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

Changes from 1 commit
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
Prev Previous commit
Next Next commit
Set sorted and unsorted icon colors with vars from settings
  • Loading branch information
Amy Leadem committed May 24, 2022
commit 0388b80b4d0821334a33e1047973af940ed6194e
51 changes: 37 additions & 14 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,13 +5,12 @@
@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-text-reverse-color,
$fallback-text-token: $theme-table-text-color,
Copy link
Contributor

@mejiaj mejiaj May 26, 2022

Choose a reason for hiding this comment

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

Shouldn't the default $theme-table-text-color be the preferred token?

$bg-color: $theme-body-background-color // "white"
$preferred-text-token: $theme-text-reverse-color, // "white"
$fallback-text-token: $theme-table-text-color, // default

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.

I agree. I will test out using the settings as the preferred token, not the fallback, throughout table.scss

$context: "Table text",
);

$table-header-text-color: color(
Expand Down Expand Up @@ -59,6 +58,22 @@ $table-sorted-stripe-text-color: color(
)
);

$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,
$fallback-text-token: $theme-table-unsorted-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,
$fallback-text-token: $theme-text-color,
$context: "Table unsorted icon",
);

// Shared table styles
@mixin table-header-unsorted-styles {
padding-right: units(5);
Expand Down Expand Up @@ -107,24 +122,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(
next-token($table-unsorted-icon-color, "lighter")
)
}
&:hover .usa-icon > g.unsorted {
fill: $table-sorted-header-text-color;
fill: color($table-unsorted-icon-color);
}
}

@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 Down Expand Up @@ -203,7 +220,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 @@ -294,16 +311,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(
next-token($table-text-color, "lighter")
);
}

.usa-table__header__button:hover .usa-icon > g.unsorted {
fill: $table-text-color;
fill: color($table-text-color);
}
}
/* stylelint-enable selector-class-pattern */
Expand Down