Skip to content

USWDS - Table: Update color styles to use theme settings #4712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thisisdano merged 7 commits into from
Jun 3, 2022
Merged

USWDS - Table: Update color styles to use theme settings #4712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0674506
Update default value of -table-color-border to 'ink' instead of 'defa…
May 24, 2022
9736b53
Update border color to use theme-table-border-color
May 24, 2022
0388b80
Set sorted and unsorted icon colors with vars from settings
May 24, 2022
2ea67b1
Merge branch 'develop' of https://github.com/uswds/uswds into al-tabl…
May 25, 2022
29523d9
Use default fallback token for icon color vars
May 25, 2022
7cc6fb0
Move theme-table-x settings to preferred-token instead of fallback
May 26, 2022
a36ad60
use project defaults for table-sorted-text-color
May 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 41 additions & 27 deletions packages/uswds-core/src/styles/mixins/general/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,66 @@
@use "../utilities" as *;
@use "../typography/typeset" as *;

$table-text-color: color(
Copy link
Contributor Author

@amyleadem amyleadem May 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the color function here so that we could use this variable with next-token() below for hover states

get-color-token-from-bg(
$bg-color: $theme-body-background-color,
$preferred-text-token: $theme-text-reverse-color,
$fallback-text-token: $theme-table-text-color,
$context: "Table text",
)
$table-text-color: get-color-token-from-bg(
$bg-color: $theme-body-background-color,
$preferred-text-token: $theme-table-text-color,
$context: "Table text",
);

$table-header-text-color: color(
get-color-token-from-bg(
$bg-color: $theme-table-header-background-color,
$preferred-text-token: $theme-text-reverse-color,
$fallback-text-token: $theme-table-header-text-color,
Copy link
Contributor Author

@amyleadem amyleadem May 26, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved the theme settings variables into the value for $preferred-text-token. Allowed $fallback-text-token to use the fallback from project defaults.

$preferred-text-token: $theme-table-header-text-color,
$context: "Table header text",
)
);

$table-stripe-text-color: color(
get-color-token-from-bg(
$bg-color: $theme-table-stripe-background-color,
$preferred-text-token: $theme-text-reverse-color,
$fallback-text-token: $theme-table-stripe-text-color,
$preferred-text-token: $theme-table-stripe-text-color,
$context: "Table stripe text",
)
);

$table-sorted-text-color: color(
get-color-token-from-bg(
$bg-color: $theme-table-sorted-background-color,
$preferred-text-token: $theme-text-reverse-color,
$fallback-text-token: $theme-table-text-color,
$context: "Table sorted text",
)
);

$table-sorted-header-text-color: color(
get-color-token-from-bg(
$bg-color: $theme-table-sorted-header-background-color,
$preferred-text-token: $theme-text-reverse-color,
$fallback-text-token: $theme-table-header-text-color,
$preferred-text-token: $theme-table-header-text-color,
$context: "Table sorted header text",
)
);

$table-sorted-stripe-text-color: color(
get-color-token-from-bg(
$bg-color: $theme-table-sorted-stripe-background-color,
$preferred-text-token: $theme-text-reverse-color,
$fallback-text-token: $theme-table-stripe-text-color,
$preferred-text-token: $theme-table-stripe-text-color,
$context: "Table sorted stripe text",
)
);

$table-sorted-icon-color: color(
get-color-token-from-bg(
$bg-color: $theme-table-sorted-header-background-color,
$preferred-text-token: $theme-table-sorted-icon-color,
$context: "Table sorted icon",
)
);

$table-unsorted-icon-color: get-color-token-from-bg(
$bg-color: $theme-table-header-background-color,
$preferred-text-token: $theme-table-unsorted-icon-color,
$context: "Table unsorted icon",
);

Comment on lines +53 to +66
Copy link
Contributor Author

@amyleadem amyleadem May 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Run $table-sorted-icon-color and $table-unsorted-icon-color through a contrast check


// Shared table styles
@mixin table-header-unsorted-styles {
padding-right: units(5);
Expand Down Expand Up @@ -107,24 +113,26 @@ $table-sorted-stripe-text-color: color(
@mixin table-button-unsorted-styles {
@include table-button-default-styles;
.usa-icon > g.unsorted {
fill: color($theme-table-unsorted-icon-color);
fill: color($table-unsorted-icon-color);
}
&:hover .usa-icon > g.unsorted {
fill: $table-sorted-header-text-color;
fill: color(
next-token($table-unsorted-icon-color, "darker")
)
}
}

@mixin table-button-sorted-ascending-styles {
@include table-button-default-styles;
.usa-icon > g.ascending {
fill: $table-sorted-header-text-color;
fill: $table-sorted-icon-color;
}
}

@mixin table-button-sorted-descending-styles {
@include table-button-default-styles;
.usa-icon > g.descending {
fill: $table-sorted-header-text-color;
fill: $table-sorted-icon-color;
}
}

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

tr {
border-bottom: units(0.5) solid $table-text-color;
border-bottom: units(0.5) solid color($theme-table-border-color);
border-top-width: 0;
display: block;
width: 100%;
Expand All @@ -159,7 +167,7 @@ $table-sorted-stripe-text-color: color(
&:first-child {
th:first-child,
td:first-child {
border-top: units(0.5) solid $table-text-color;
border-top: units(0.5) solid color($theme-table-border-color);
}
}
}
Expand Down Expand Up @@ -203,7 +211,7 @@ $table-sorted-stripe-text-color: color(
@include typeset;
border-collapse: collapse;
border-spacing: 0;
color: $table-text-color;
color: color($table-text-color);
margin: units(2.5) 0;
text-align: left;

Expand Down Expand Up @@ -232,7 +240,7 @@ $table-sorted-stripe-text-color: color(
th,
td {
background-color: color($theme-body-background-color);
border: 1px solid $table-text-color;
border: 1px solid color($theme-table-border-color);
font-weight: fw("normal");
padding: units(1) units(2);
}
Expand Down Expand Up @@ -294,16 +302,22 @@ $table-sorted-stripe-text-color: color(
th {
background-color: transparent;
border-top: 0;
color: $table-text-color;
color: color($table-text-color);

&[aria-sort] {
color: $table-sorted-header-text-color;
}
}
/* stylelint-disable selector-class-pattern */
th[data-sortable]:not([aria-sort]) {
.usa-table__header__button .usa-icon > g.unsorted {
fill: color($table-text-color);
Copy link
Contributor Author

@amyleadem amyleadem May 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a default fill for unsorted icons to match the header color

}

.usa-table__header__button:hover .usa-icon > g.unsorted {
fill: $table-text-color;
fill: color(
next-token($table-text-color, "darker")
);
}
}
/* stylelint-enable selector-class-pattern */
Expand Down
2 changes: 1 addition & 1 deletion packages/uswds-core/src/styles/settings/_settings-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ $theme-summary-box-link-color: default !default;
$theme-summary-box-text-color: default !default;

// Table
$theme-table-border-color: default !default;
$theme-table-border-color: "ink" !default;
Copy link
Contributor Author

@amyleadem amyleadem May 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$theme-table-border-color needs a defined token value or it will throw an error. ink is the current rendered default value.

$theme-table-header-background-color: "base-lighter" !default;
$theme-table-header-text-color: default !default;
$theme-table-stripe-background-color: "base-lightest" !default;
Expand Down