Skip to content

Commit 1815376

Browse files
thisisdanothisisdano
authored
Merge pull request #4712 from uswds/al-table-color-settings
USWDS - Table: Update color styles to use theme settings
2 parents 7dfaecf + a36ad60 commit 1815376

File tree

2 files changed

+42
-28
lines changed

2 files changed

+42
-28
lines changed

‎packages/uswds-core/src/styles/mixins/general/table.scss‎

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,60 +5,66 @@
55
@use "../utilities" as *;
66
@use "../typography/typeset" as *;
77

8-
$table-text-color: color(
9-
get-color-token-from-bg(
10-
$bg-color: $theme-body-background-color,
11-
$preferred-text-token: $theme-text-reverse-color,
12-
$fallback-text-token: $theme-table-text-color,
13-
$context: "Table text",
14-
)
8+
$table-text-color: get-color-token-from-bg(
9+
$bg-color: $theme-body-background-color,
10+
$preferred-text-token: $theme-table-text-color,
11+
$context: "Table text",
1512
);
1613

1714
$table-header-text-color: color(
1815
get-color-token-from-bg(
1916
$bg-color: $theme-table-header-background-color,
20-
$preferred-text-token: $theme-text-reverse-color,
21-
$fallback-text-token: $theme-table-header-text-color,
17+
$preferred-text-token: $theme-table-header-text-color,
2218
$context: "Table header text",
2319
)
2420
);
2521

2622
$table-stripe-text-color: color(
2723
get-color-token-from-bg(
2824
$bg-color: $theme-table-stripe-background-color,
29-
$preferred-text-token: $theme-text-reverse-color,
30-
$fallback-text-token: $theme-table-stripe-text-color,
25+
$preferred-text-token: $theme-table-stripe-text-color,
3126
$context: "Table stripe text",
3227
)
3328
);
3429

3530
$table-sorted-text-color: color(
3631
get-color-token-from-bg(
3732
$bg-color: $theme-table-sorted-background-color,
38-
$preferred-text-token: $theme-text-reverse-color,
39-
$fallback-text-token: $theme-table-text-color,
4033
$context: "Table sorted text",
4134
)
4235
);
4336

4437
$table-sorted-header-text-color: color(
4538
get-color-token-from-bg(
4639
$bg-color: $theme-table-sorted-header-background-color,
47-
$preferred-text-token: $theme-text-reverse-color,
48-
$fallback-text-token: $theme-table-header-text-color,
40+
$preferred-text-token: $theme-table-header-text-color,
4941
$context: "Table sorted header text",
5042
)
5143
);
5244

5345
$table-sorted-stripe-text-color: color(
5446
get-color-token-from-bg(
5547
$bg-color: $theme-table-sorted-stripe-background-color,
56-
$preferred-text-token: $theme-text-reverse-color,
57-
$fallback-text-token: $theme-table-stripe-text-color,
48+
$preferred-text-token: $theme-table-stripe-text-color,
5849
$context: "Table sorted stripe text",
5950
)
6051
);
6152

53+
$table-sorted-icon-color: color(
54+
get-color-token-from-bg(
55+
$bg-color: $theme-table-sorted-header-background-color,
56+
$preferred-text-token: $theme-table-sorted-icon-color,
57+
$context: "Table sorted icon",
58+
)
59+
);
60+
61+
$table-unsorted-icon-color: get-color-token-from-bg(
62+
$bg-color: $theme-table-header-background-color,
63+
$preferred-text-token: $theme-table-unsorted-icon-color,
64+
$context: "Table unsorted icon",
65+
);
66+
67+
6268
// Shared table styles
6369
@mixin table-header-unsorted-styles {
6470
padding-right: units(5);
@@ -107,24 +113,26 @@ $table-sorted-stripe-text-color: color(
107113
@mixin table-button-unsorted-styles {
108114
@include table-button-default-styles;
109115
.usa-icon > g.unsorted {
110-
fill: color($theme-table-unsorted-icon-color);
116+
fill: color($table-unsorted-icon-color);
111117
}
112118
&:hover .usa-icon > g.unsorted {
113-
fill: $table-sorted-header-text-color;
119+
fill: color(
120+
next-token($table-unsorted-icon-color, "darker")
121+
)
114122
}
115123
}
116124

117125
@mixin table-button-sorted-ascending-styles {
118126
@include table-button-default-styles;
119127
.usa-icon > g.ascending {
120-
fill: $table-sorted-header-text-color;
128+
fill: $table-sorted-icon-color;
121129
}
122130
}
123131

124132
@mixin table-button-sorted-descending-styles {
125133
@include table-button-default-styles;
126134
.usa-icon > g.descending {
127-
fill: $table-sorted-header-text-color;
135+
fill: $table-sorted-icon-color;
128136
}
129137
}
130138

@@ -141,7 +149,7 @@ $table-sorted-stripe-text-color: color(
141149
}
142150

143151
tr {
144-
border-bottom: units(0.5) solid $table-text-color;
152+
border-bottom: units(0.5) solid color($theme-table-border-color);
145153
border-top-width: 0;
146154
display: block;
147155
width: 100%;
@@ -159,7 +167,7 @@ $table-sorted-stripe-text-color: color(
159167
&:first-child {
160168
th:first-child,
161169
td:first-child {
162-
border-top: units(0.5) solid $table-text-color;
170+
border-top: units(0.5) solid color($theme-table-border-color);
163171
}
164172
}
165173
}
@@ -203,7 +211,7 @@ $table-sorted-stripe-text-color: color(
203211
@include typeset;
204212
border-collapse: collapse;
205213
border-spacing: 0;
206-
color: $table-text-color;
214+
color: color($table-text-color);
207215
margin: units(2.5) 0;
208216
text-align: left;
209217

@@ -232,7 +240,7 @@ $table-sorted-stripe-text-color: color(
232240
th,
233241
td {
234242
background-color: color($theme-body-background-color);
235-
border: 1px solid $table-text-color;
243+
border: 1px solid color($theme-table-border-color);
236244
font-weight: fw("normal");
237245
padding: units(1) units(2);
238246
}
@@ -294,16 +302,22 @@ $table-sorted-stripe-text-color: color(
294302
th {
295303
background-color: transparent;
296304
border-top: 0;
297-
color: $table-text-color;
305+
color: color($table-text-color);
298306

299307
&[aria-sort] {
300308
color: $table-sorted-header-text-color;
301309
}
302310
}
303311
/* stylelint-disable selector-class-pattern */
304312
th[data-sortable]:not([aria-sort]) {
313+
.usa-table__header__button .usa-icon > g.unsorted {
314+
fill: color($table-text-color);
315+
}
316+
305317
.usa-table__header__button:hover .usa-icon > g.unsorted {
306-
fill: $table-text-color;
318+
fill: color(
319+
next-token($table-text-color, "darker")
320+
);
307321
}
308322
}
309323
/* stylelint-enable selector-class-pattern */

‎packages/uswds-core/src/styles/settings/_settings-components.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ $theme-summary-box-link-color: default !default;
184184
$theme-summary-box-text-color: default !default;
185185

186186
// Table
187-
$theme-table-border-color: default !default;
187+
$theme-table-border-color: "ink" !default;
188188
$theme-table-header-background-color: "base-lighter" !default;
189189
$theme-table-header-text-color: default !default;
190190
$theme-table-stripe-background-color: "base-lightest" !default;

0 commit comments

Comments
 (0)