USWDS - Colors: Debug color contrast issues. #3949

mejiaj · 2021-01-15T20:53:17Z

Description

Adds sass-true for Mocha-based Sass unit testing (npm run test:sass)
Add standalone test script for selected Sass functions
Add options $context data to color-picker functions for clearer error messaging
Tried to address many edge cases, and test for them
Improves performance of color calculations
Improves error messaging
Demotes most color errors to warnings, with predictable fallbacks
Continues to throw errors for transparent color calculations
Adds special error handling to output some error messages as strings for testing purposes
Adds new helper functions for repeatable, single-purpose calculations:
- is-accessible-magic-number(): Determines if two grades achieve a specified WCAG level
- color-token-family(): Outputs the family of a color token or split
- color-token-grade(): Outputs the grade (system or theme grade) of a color token or split. Note that this is different from calculate-grade() which will output the absolute system grade for any color.
- color-token-type(): Outputs the type ("system" or "theme") of a color token
- color-token-variant(): Outputs the variant ("vivid") of a color token or split
- magic-number(): Outputs the magic number between two grades
- next-token(): Gets the next color token "darker" or "lighter" from a specified color

- Move custom color token code to it's own function get-custom-color-shades() - Set link token to be closest value to $target-magic-number, warn if it doesn't meet the standard.

src/stylesheets/core/_variables.scss

src/stylesheets/theme/_uswds-theme-components.scss

src/stylesheets/components/_identifier.scss

src/stylesheets/core/_functions.scss

A proxy for body background setting

Revise color functions and add Sass testing

- Allow color tokens in magic-number() function - Add wcag-magic-number() function to get MN for a wcag level

thisisdano · 2021-02-04T00:31:54Z

package.json

@@ -26,8 +26,9 @@
    "release": "gulp release",
    "spec": "npm run mocha -- 'spec/**/*.spec.js'",
    "start": "npm run build && fractal start --sync & npm run watch",
-    "test": "snyk test && gulp eslint && gulp typecheck && gulp stylelint && fractal build && gulp test && gulp regression",
+    "test": "snyk test && gulp eslint && gulp typecheck && gulp stylelint && fractal build && gulp test && gulp regression && npm run test:sass",


Note the sass tests are not run as part of the main mocha job (gulp regression). I couldn't get it to work, but it works like this.

thisisdano · 2021-02-04T00:32:46Z

src/stylesheets/base/_body.scss

@@ -1,5 +1,4 @@
 body {
-  background-color: color("white");
-  color: color("ink");
+  @include set-text-and-bg($context: "Body");


Now body has user-settable colors.

thisisdano · 2021-02-04T00:33:43Z

src/stylesheets/components/_banner.scss

 $banner-guidance-measure: 3;
 $banner-icon-colors: get-link-tokens-from-bg(
  $theme-banner-background-color,
-  $theme-banner-link-color
+  $theme-banner-link-color,
+  $context: $banner-context


Note that all these context vars help output better warning messages, to help users find the component settings that need updating

thisisdano · 2021-02-04T00:38:16Z

src/stylesheets/core/_system-tokens.scss

-  0: (
-    1,
-    1,
+$system-color-grades: (


Now with keys to make it more obvious. Also reversed the order to go from 100-0 so as you progress, the max of the current key is less than the min of the next key, making a more logical progression. It's strange because 100 is USWDS black but 1.00 luminance is white...

thisisdano · 2021-02-04T00:50:11Z

src/stylesheets/core/_system-tokens.scss

-    0,
+);
+
+$theme-color-grades: (


Added a similar map for system colors. Note that this one goes from lightest to darkest — again so the max of one token is less than the min of the next token.

thisisdano · 2021-02-04T23:20:28Z

src/stylesheets/core/mixins/_set-link-from-bg.scss

  );
-
+  $bg-color: if($bg-color == "default", get-default("bg-color"), $bg-color);


These calculations are still a little ugly. I don't know how they could be improved

thisisdano · 2021-02-04T23:35:45Z

spec/unit/sass/tests.scss

+@import "../../../src/stylesheets/uswds.scss";
+
+// is-system-color-token()
+@include describe("[function] is-system-color-token()") {


Finally, some Sass unit tests. This is just a start. More to come on this front.

thisisdano · 2021-02-04T23:36:50Z

src/stylesheets/core/_functions.scss

+----------------------------------------
+*/
+
+$_error-output-override: false !default;


This allows us to unit test error messaging without the error itself breaking the test run

thisisdano · 2021-02-05T00:13:27Z

src/stylesheets/core/_functions.scss

+----------------------------------------
+*/
+
+@function error-not-token($token, $type, $valid-token-map: false) {


Tried to capture this common error in a repeatable function

thisisdano · 2021-02-05T00:35:12Z

src/stylesheets/core/_functions.scss

+----------------------------------------
+*/
+
+@function color-token-family($color-token) {


This (and color-token-family() and color-token-grade()) can accept a token or a split. Split is faster!

mejiaj added skill: front end Affects: Accessibility 🟡 Relates to the accessibility of our components labels Jan 15, 2021

mejiaj added 2 commits January 15, 2021 14:56

Add primary link style to Identifier.

9270d8f

Assign $theme-color-base-ink to "ink".

2d41ef1

mejiaj force-pushed the jm-color-contrast-3906 branch from b9d8ed7 to 2d41ef1 Compare January 15, 2021 20:57

mejiaj and others added 18 commits January 19, 2021 08:55

Move custom color check to own function.

3a07674

Create custom color functions for getting split and family values.

94fff38

Create get-custom-color-grade().

ef262ad

Update vraiable names for custom color split.

3442dc1

Swap check for custom colors, default to system tokens.

06335d1

Create functions for custom lighter & darker color grades.

65db3b9

Add comments to custom color functions.

0e0741a

Add closest-to-number().

a5df8e3

Create stub for fallback color selection.

a5486dc

Default to white for hover tokens less than 0.

42b1cb0

Create new closest number test.

defb8fa

Start rewriting link color setting function.

607f325

Update check on custom color family for accent.

7f51ee0

Update get-link-tokens-from-bg().

ef60715

- Move custom color token code to it's own function get-custom-color-shades() - Set link token to be closest value to $target-magic-number, warn if it doesn't meet the standard.

Run prettier to fix mangled spacing from VS Code.

9dc770f

Check if custom color family is ink.

404fe69

Check if grade is higher than target otherwise use closest.

53f03e7

Set better fallbacks for Identifier links.

de76456

mejiaj commented Jan 26, 2021

View reviewed changes

src/stylesheets/core/_variables.scss Show resolved Hide resolved

mejiaj commented Jan 26, 2021

View reviewed changes

src/stylesheets/theme/_uswds-theme-components.scss Outdated Show resolved Hide resolved

mejiaj commented Jan 26, 2021

View reviewed changes

src/stylesheets/components/_identifier.scss Outdated Show resolved Hide resolved

mejiaj commented Jan 26, 2021

View reviewed changes

src/stylesheets/core/_functions.scss Outdated Show resolved Hide resolved

thisisdano and others added 25 commits February 3, 2021 09:59

Use consistent treatment for alert links

c19844d

Use defaults in set-text mixins

a799cc5

Allow "default" to be passed as a background color

a219c38

A proxy for body background setting

Use default for breadcrumb background

84db44c

Add a function to grab common project defaults

9276e21

Remove props from functions if duplicate defaults

eeaef37

Fix broken test

693a67a

Pass a for prop to improve error messaging

610958e

Fix alert content

02a7e2d

Use mixin instead of setting bg and text separately

fa9b8b8

Pick the best color token instead of the preferred, if none match

8c93557

Respect $theme-show-compile-warnings

5fa117b

Update tests and add more WCAG level testing

3cae33a

Merge pull request #3966 from uswds/dw-color-functions

b18b43b

Revise color functions and add Sass testing

Update theme grade min/max to current schema. Use "root" not "default"

0001d96

Use set-text-from-bg() on Identifier domain.

ea735e1

Use clear grade name for custom hex values

f9dfbc3

Fix typos

51b383a

[see details]

230b33c

- Allow color tokens in magic-number() function - Add wcag-magic-number() function to get MN for a wcag level

Update var name for $system-wcag-magic-numbers

90801b3

Use new function in set-link-from-bg() mixin

64ee419

Sync theme and settings files

6c8deed

Use error-not-token() in more cases

d6b38b3

Simplify get-color-token-from-bg()

c905c70

Fix small bugs

e6c5c87

thisisdano approved these changes Feb 5, 2021

View reviewed changes

Remove test code.

0e2b566

thisisdano merged commit 07f12be into develop Feb 5, 2021

thisisdano deleted the jm-color-contrast-3906 branch February 5, 2021 17:57

thisisdano mentioned this pull request Feb 5, 2021

Transparent Token #3934

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

USWDS - Colors: Debug color contrast issues. #3949

USWDS - Colors: Debug color contrast issues. #3949

mejiaj commented Jan 15, 2021 •

edited by thisisdano

thisisdano Feb 4, 2021

thisisdano Feb 4, 2021

thisisdano Feb 4, 2021

thisisdano Feb 4, 2021

thisisdano Feb 4, 2021

thisisdano Feb 4, 2021

thisisdano Feb 4, 2021

thisisdano Feb 4, 2021

thisisdano Feb 5, 2021

thisisdano Feb 5, 2021

		);

		$bg-color: if($bg-color == "default", get-default("bg-color"), $bg-color);

USWDS - Colors: Debug color contrast issues. #3949

USWDS - Colors: Debug color contrast issues. #3949

Conversation

mejiaj commented Jan 15, 2021 • edited by thisisdano

Description

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mejiaj commented Jan 15, 2021 •

edited by thisisdano