-
Notifications
You must be signed in to change notification settings - Fork 932
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.
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
Allow non-token values in theme color settings #3258
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 ' | ||
+ 'for more information.'; | ||
} | ||
|
||
|
@@ -900,28 +900,61 @@ Derive a color from a color shortcode | |
---------------------------------------- | ||
*/ | ||
|
||
@function color($shortcode) { | ||
$shortcode: smart-quote(unpack($shortcode)); | ||
@if not $shortcode { | ||
@return false; | ||
@function color($value, $flags...) { | ||
$value: unpack($value); | ||
|
||
// 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; | ||
} | ||
Comment on lines
+906
to
+920
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The color function can now include a number of flags like |
||
} | ||
@if map-has-key($system-color-shortcodes, $shortcode) { | ||
$our-color: map-get($system-color-shortcodes, $shortcode); | ||
@if $our-color == false { | ||
@error '`#{$shortcode}` is a color that does not exist ' | ||
+ 'or is set to false.'; | ||
|
||
// 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Rewrote this to restrict the |
||
} | ||
@return $our-color; | ||
} | ||
@if map-has-key($project-color-shortcodes, $shortcode) { | ||
$our-color: (map-get($project-color-shortcodes, $shortcode)); | ||
|
||
// Now, any value should be evaluated as a token | ||
|
||
$value: smart-quote($value); | ||
|
||
@if map-has-key($system-color-shortcodes, $value) { | ||
$our-color: map-get($system-color-shortcodes, $value); | ||
@if $our-color == false { | ||
@error '`#{$shortcode}` is a color that does not exist ' | ||
@error '`#{$value}` is a color that does not exist ' | ||
+ 'or is set to false.'; | ||
} | ||
@return $our-color; | ||
} | ||
@error '`#{$shortcode}` is not a valid color token.'; | ||
|
||
// 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; | ||
} | ||
} | ||
Comment on lines
+943
to
+953
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Improves error handling. We can't check against the theme colors when we're setting them, so setting the |
||
|
||
@error '`#{$value}` is not a valid USWDS color token. ' | ||
+ 'See designsystem.digital.gov/design-tokens/color ' | ||
+ 'for more information.'; | ||
Comment on lines
+955
to
+957
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Improves error message |
||
} | ||
|
||
/* | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed this url as well!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should probably update this on:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Definitely
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated in every instance I could find