TAI-1139 added table--heavy-header

[timsb]

Added a variant for child of table element with a blue border.

[feedmypixel]

I don't understand the use of the name heavy, is it the border or colour?
So given this is on the th element and there are no other header selectors I would be tempted to use:
.table-header
or
.table__header
Then if there are different iterations in the future we can add modifiers then.

[timsb]

Is the default th styling not in effect the table__header? I would have thought that this is a variant of the default th? .table__header--heavy?

[feedmypixel]

I suppose this is a broader question for designers what is the default border styling for a table?
The work on the th should be a reset in base. The component should have a standard border size.

.table__header {
border-bottom: 2px solid;
border-color: <default>
}

Then we have a tones file

.tone-border-govuk {
border-colour: $govukBlue;
}

Implementation

<th class="table__header tone-border-govuk">

But that doesn't help the current situation!

Is the default th styling not in effect the table__header? I would have thought that this is a variant of the default th? .table__header--heavy?

Potentially .table__header--highlight although this feels a little odd to me without a .table__header class.
As tables are a guaranteed structure in html you get the table styles for free when adding a table without a selector, apply .table__header and you get the custom styles, this would be my ideal.

Or following the same patten then:

.table--header-highlight {
   th {
      border-bottom: em(2) solid $govuk-blue-colour;
   }
}

[timsb]

I like the:

.table--header-highlight {
th {
border-bottom: em(2) solid $govuk-blue-colour;
}
}

but shouldn't we try to keep the class as close as possible to the component that is being affected i.e. the th?

So it would be .table__header--highlight

[feedmypixel]

LGTM - please see discussion in comments above and issue opened when refactoring the tables work 👍