USWDS added the ability to provide custom hex values for color theme settings in 2.4.0. (https://github.com/uswds/uswds/pull/3258) If we add a custom hex color value to our design tokens file, however, we get a compilation error.
Example custom color setting:
color-primary-lightest: '#e6eff6'
Error message:
Message:
node_modules/uswds/src/stylesheets/core/_functions.scss
Error: `#e6eff6` is not a valid USWDS color token. See designsystem.digital.gov/design-tokens/color for more information.
on line 1331 of node_modules/uswds/src/stylesheets/core/_functions.scss, in function `color`
from line 308 of node_modules/uswds/src/stylesheets/core/_variables.scss
from line 14 of node_modules/uswds/src/stylesheets/packages/_required.scss
from line 9 of source/styles.scss
from line 7 of source/pattern-lab.scss
>> @error '`#{$value}` is not a valid USWDS color token. '
--^
Details:
status: 1
file: /app/node_modules/uswds/src/stylesheets/core/_functions.scss
line: 1331
column: 3
formatted: Error: `#e6eff6` is not a valid USWDS color token. See designsystem.digital.gov/design-tokens/color for more information.
on line 1331 of node_modules/uswds/src/stylesheets/core/_functions.scss, in function `color`
from line 308 of node_modules/uswds/src/stylesheets/core/_variables.scss
from line 14 of node_modules/uswds/src/stylesheets/packages/_required.scss
from line 9 of source/styles.scss
from line 7 of source/pattern-lab.scss
>> @error '`#{$value}` is not a valid USWDS color token. '
--^
messageFormatted: node_modules/uswds/src/stylesheets/core/_functions.scss
Error: `#e6eff6` is not a valid USWDS color token. See designsystem.digital.gov/design-tokens/color for more information.
on line 1331 of node_modules/uswds/src/stylesheets/core/_functions.scss, in function `color`
from line 308 of node_modules/uswds/src/stylesheets/core/_variables.scss
from line 14 of node_modules/uswds/src/stylesheets/packages/_required.scss
from line 9 of source/styles.scss
from line 7 of source/pattern-lab.scss
>> @error '`#{$value}` is not a valid USWDS color token. '
--^
messageOriginal: `#e6eff6` is not a valid USWDS color token. See designsystem.digital.gov/design-tokens/color for more information.
relativePath: node_modules/uswds/src/stylesheets/core/_functions.scss
domainEmitter: [object Object]
domainThrown: false
USWDS added the ability to provide custom hex values for color theme settings in 2.4.0. (https://github.com/uswds/uswds/pull/3258) If we add a custom hex color value to our design tokens file, however, we get a compilation error.
Example custom color setting:
Error message: