Allow non-token values in theme color settings #3258
Conversation
thisisdano
added
Type: Enhancement
| @@ -123,7 +123,7 @@ Leaves bools as is | |||
|
|
|||
| @if type-of($value) == "color" { | |||
| @error 'Only use quoted color tokens in USWDS functions and mixins. ' | |||
| + 'See v2.designsystem.digital.gov/style-tokens/color ' | |||
| + 'See designsystem.digital.gov/design-tokens/color ' | |||
There was a problem hiding this comment.
Fixed this url as well!
There was a problem hiding this comment.
We should probably update this on:
src/stylesheets/settings/_settings-color.scss:16
src/stylesheets/theme/_uswds-theme-color.scss:16There was a problem hiding this comment.
Updated in every instance I could find
| // Non-token colors may be passed with specific flags | ||
| @if type-of($value) == color { | ||
| // override or set-theme will allow any color | ||
| @if index($flags, override) or index($flags, set-theme) { | ||
| // override + no-warn will skip warnings | ||
| @if index($flags, no-warn) { | ||
| @return $value; | ||
| } | ||
|
|
||
| @if $theme-show-compile-warnings { | ||
| @warn 'Override: `#{$value}` is not a USWDS color token.'; | ||
| } | ||
|
|
||
| @return $value; | ||
| } |
There was a problem hiding this comment.
The color function can now include a number of flags like color(value, flag-1, flag-2, ...). override and set-theme flags allow passing a color. no-warn suppresses the warning.
| // False values may be passed through when setting theme colors | ||
| @if $value == false { | ||
| @if index($flags, set-theme) { | ||
| @return $value; |
There was a problem hiding this comment.
Rewrote this to restrict the false pass-through to set-theme only — this allows the color() function to be used when setting the theme token (since theme tokens can be false).
| // If we're using the theme flag, $project-color-shortcodes has not yet been set | ||
| @if not index($flags, set-theme) { | ||
| @if map-has-key($project-color-shortcodes, $value) { | ||
| $our-color: (map-get($project-color-shortcodes, $value)); | ||
| @if $our-color == false { | ||
| @error '`#{$value}` is a color that does not exist ' | ||
| + 'or is set to false.'; | ||
| } | ||
| @return $our-color; | ||
| } | ||
| } |
There was a problem hiding this comment.
Improves error handling. We can't check against the theme colors when we're setting them, so setting the set-theme flag bypasses this check
| @error '`#{$value}` is not a valid USWDS color token. ' | ||
| + 'See designsystem.digital.gov/design-tokens/color ' | ||
| + 'for more information.'; |
There was a problem hiding this comment.
Improves error message
| @@ -123,7 +123,7 @@ Leaves bools as is | |||
|
|
|||
| @if type-of($value) == "color" { | |||
| @error 'Only use quoted color tokens in USWDS functions and mixins. ' | |||
| + 'See v2.designsystem.digital.gov/style-tokens/color ' | |||
| + 'See designsystem.digital.gov/design-tokens/color ' | |||
There was a problem hiding this comment.
We should probably update this on:
src/stylesheets/settings/_settings-color.scss:16
src/stylesheets/theme/_uswds-theme-color.scss:16
|
I'll update asap |
|
Greatly looking forward to this! |
Allow non-token values in theme color settings. While USWDS promotes and encourages using our system tokens in theme color settings, agencies have a real need to occasionally use non-token colors. This includes instances where certain colors are mandated by law and cannot be easily changed. Now, teams can add non-token colors to theme color settings like
$theme-color-primary: #f00. This new non-token value of'primary'will apply anywhere the'primary'token is used: functions, mixins, settings, and utilities. Using non-token values will throw a warning in the compile process, but this, like all compile warnings, can be disabled by setting$theme-show-compile-warnings: false.Fixes #3209
Success criteria
$theme-show-compile-warnings: false$theme-link-color)