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

amyleadem · 2022-05-24T14:24:09Z

Description

Problem

Theme table settings are not consistently applied to table styles. This results in an unpredictable user experience and undesired visual presentation.

$theme-table-border-color is defined but not used
$theme-table-sorted-icon-color is defined but not used
$theme-table-sorted-icon-colorand $theme-table-unsorted-icon-color do not check for accessible contrast ratio
In limited circumstances, settings colors are overwritten by project defaults, despite the setting having an accessible contrast ratio

An example that demonstrates most of these issues can be seen by customizing the following variables, which returns the screenshot below:

/* _settings-components.scss*/
$theme-table-border-color: "red-cool-30" !default;
$theme-table-header-background-color: "magenta-70" !default;
$theme-table-header-text-color: "blue-60" !default;
$theme-table-stripe-background-color: "blue-warm-10" !default;
$theme-table-stripe-text-color: "indigo-60" !default;
$theme-table-text-color: "cyan-60" !default;
$theme-table-sorted-header-background-color: "green-cool-10" !default;
$theme-table-sorted-background-color: "orange-warm-10" !default;
$theme-table-sorted-stripe-background-color: "indigo-10" !default;
$theme-table-sorted-icon-color: "red-60" !default;
$theme-table-unsorted-icon-color: "green-cool-10" !default;

Note that the table border and sort icons are not receiving defined values, and that the unsorted icon on the borderless table does not have acceptable contrast ratio

Solution

Use the settings vars$theme-table-border-color and $theme-table-sorted-icon-color to define related style rules
Run both $theme-table-sorted-icon-color and $theme-table-unsorted-icon-color through a contrast check to increase the likelihood of an acceptable contrast token.
Use the theme setting variable in $preferred-text-token rather than placing that value in $fallback-text-token

Testing

To test, simply customize $theme-table colors and check the rendered results. I've included some samples below as a starting point.

Desired result: Rendered colors should match the declared settings, and should differ from these settings only when the supplied color does not meet contrast requirements. If no accessible colors are available, the user should receive a compile warning and instructions to choose another color.

Limitations

~~There are limited instances when the functions will return defaults instead of settings values. See dark body background section below for an example.~~

Light body background

This demo uses the same settings as above. Note that all colors are being rendered as expected, except for the borderless unsorted icon, which instead is delivering a color with accessible contrast. The header text color is changed to white because the provided color does not create accessible contrast ratio.

/* _settings-components.scss*/
$theme-table-border-color: "red-cool-30" !default;
$theme-table-header-background-color: "magenta-70" !default;
$theme-table-header-text-color: "blue-60" !default;
$theme-table-stripe-background-color: "blue-warm-10" !default;
$theme-table-stripe-text-color: "indigo-60" !default;
$theme-table-text-color: "cyan-60" !default;
$theme-table-sorted-header-background-color: "green-cool-10" !default;
$theme-table-sorted-background-color: "orange-warm-10" !default;
$theme-table-sorted-stripe-background-color: "indigo-10" !default;
$theme-table-sorted-icon-color: "red-60" !default;
$theme-table-unsorted-icon-color: "green-cool-10" !default;

Dark body background

If a user sets both $theme-text-reverse-color and $theme-table settings to dark colors, the $theme-table settings color will be overwritten with project defaults, even if it has an accessible contrast ratio. In this case below, $theme-table-header-text-color and $theme-table-stripe-text-color are being overwritten, despite having an accessible contrast ratio.

Because all settings here have been given values with accessible color contrast, these colors are rendering as expected with no warnings.

/* _settings-color.scss*/
// Body
$theme-body-background-color: "ink" !default;

// Text
$theme-text-color: "white" !default;
$theme-text-reverse-color: "ink" !default;

/* _settings-components.scss*/
$theme-table-border-color: "red-cool-30" !default;
$theme-table-header-background-color: "magenta-10" !default;
$theme-table-header-text-color: "blue-70" !default;
$theme-table-stripe-background-color: "blue-warm-10" !default;
$theme-table-stripe-text-color: "indigo-60" !default;
$theme-table-text-color: "yellow-10" !default;
$theme-table-sorted-header-background-color: "green-cool-10" !default;
$theme-table-sorted-background-color: "orange-warm-10" !default;
$theme-table-sorted-stripe-background-color: "indigo-10" !default;
$theme-table-sorted-icon-color: "red-60" !default;
$theme-table-unsorted-icon-color: "green-60" !default;

Default settings

/* _settings-components.scss*/
$theme-table-border-color: "ink" !default;
$theme-table-header-background-color: "base-lighter" !default;
$theme-table-header-text-color: default !default;
$theme-table-stripe-background-color: "base-lightest" !default;
$theme-table-stripe-text-color: default !default;
$theme-table-text-color: default !default;
$theme-table-sorted-header-background-color: "accent-cool-light" !default;
$theme-table-sorted-background-color: "accent-cool-lighter" !default;
$theme-table-sorted-stripe-background-color: "blue-cool-10v" !default;
$theme-table-sorted-icon-color: default !default;
$theme-table-unsorted-icon-color: "base" !default;

Before you hit Submit, make sure you’ve done whichever of these applies to you:

Follow the 18F Front End Coding Style Guide and Accessibility Guide.
Run npm test and make sure the tests for the files you have changed have passed.
Run your code through HTML_CodeSniffer and make sure it’s error free.
Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

…ult'

…e-color-settings

amyleadem · 2022-05-25T16:37:01Z

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

 @use "../utilities" as *;
 @use "../typography/typeset" as *;

-$table-text-color: color(


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

amyleadem · 2022-05-25T21:06:40Z

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


 // Table
-$theme-table-border-color: default !default;
+$theme-table-border-color: "ink" !default;


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

amyleadem · 2022-05-25T21:18:25Z

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

    /* stylelint-disable selector-class-pattern */
    th[data-sortable]:not([aria-sort]) {
+      .usa-table__header__button .usa-icon > g.unsorted {
+        fill: color($table-text-color);


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

mejiaj

Can we double check the variables for color setting (lines 9-73)? There are some backgrounds being set as "white" with preferred text token of "white".

mejiaj · 2022-05-26T15:50:24Z

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

+  $preferred-text-token: $theme-text-reverse-color,
+  $fallback-text-token: $theme-table-text-color,


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

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

amyleadem · 2022-05-26T20:16:07Z

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

  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,


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

amyleadem · 2022-05-26T20:17:12Z

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

+$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",
+);
+


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

mejiaj

Looks good, thanks Amy.

thisisdano

Nice work

Amy Leadem added 4 commits May 24, 2022 07:14

Update default value of -table-color-border to 'ink' instead of 'defa…

0674506

…ult'

Update border color to use theme-table-border-color

9736b53

Set sorted and unsorted icon colors with vars from settings

0388b80

Merge branch 'develop' of https://github.com/uswds/uswds into al-tabl…

2ea67b1

…e-color-settings

amyleadem commented May 25, 2022

View reviewed changes

Use default fallback token for icon color vars

29523d9

amyleadem commented May 25, 2022

View reviewed changes

amyleadem marked this pull request as ready for review May 25, 2022 22:55

amyleadem requested review from mahoneycm and mejiaj May 25, 2022 22:55

mejiaj reviewed May 26, 2022

View reviewed changes

Amy Leadem added 2 commits May 26, 2022 11:59

Move theme-table-x settings to preferred-token instead of fallback

7cc6fb0

use project defaults for table-sorted-text-color

a36ad60

amyleadem commented May 26, 2022

View reviewed changes

mejiaj approved these changes Jun 2, 2022

View reviewed changes

mejiaj requested a review from thisisdano June 2, 2022 15:42

thisisdano approved these changes Jun 3, 2022

View reviewed changes

thisisdano merged commit 1815376 into develop Jun 3, 2022

thisisdano deleted the al-table-color-settings branch June 3, 2022 16:19

thisisdano mentioned this pull request Jun 17, 2022

USWDS 3.0.2 #4824

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

amyleadem commented May 24, 2022 •

edited

Loading

Uh oh!

amyleadem May 25, 2022 •

edited

Loading

Uh oh!

amyleadem May 25, 2022

Uh oh!

amyleadem May 25, 2022 •

edited

Loading

Uh oh!

mejiaj left a comment

Uh oh!

mejiaj May 26, 2022

Uh oh!

amyleadem May 26, 2022

Uh oh!

amyleadem May 26, 2022 •

edited

Loading

Uh oh!

amyleadem May 26, 2022

Uh oh!

mejiaj left a comment

Uh oh!

thisisdano left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		$preferred-text-token: $theme-text-reverse-color,
		$fallback-text-token: $theme-table-text-color,

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

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

Uh oh!

Conversation

amyleadem commented May 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Problem

Solution

Testing

Limitations

Light body background

Dark body background

Default settings

Uh oh!

amyleadem May 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyleadem May 25, 2022

Choose a reason for hiding this comment

Uh oh!

amyleadem May 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

mejiaj May 26, 2022

Choose a reason for hiding this comment

Uh oh!

amyleadem May 26, 2022

Choose a reason for hiding this comment

Uh oh!

amyleadem May 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyleadem May 26, 2022

Choose a reason for hiding this comment

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

thisisdano left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

amyleadem commented May 24, 2022 •

edited

Loading

amyleadem May 25, 2022 •

edited

Loading

amyleadem May 25, 2022 •

edited

Loading

amyleadem May 26, 2022 •

edited

Loading