Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Allow non-token values in theme color settings #3258

Merged
merged 4 commits into from Dec 12, 2019
Merged

Allow non-token values in theme color settings #3258

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
24628ff
Use `theme` and `bypass` flags to accept non-token color theme values
thisisdano Dec 10, 2019
d003df1
Use theme and bypass flags
thisisdano Dec 10, 2019
23a2746
Simplify use of flags and apply to variables
thisisdano Dec 11, 2019
bb4649f
Update URLs
thisisdano Dec 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
63 changes: 48 additions & 15 deletions src/stylesheets/core/_functions.scss
View file
Open in desktop
Expand Up @@ -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 '
Copy link
Member Author

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!

Copy link
Contributor

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:

src/stylesheets/settings/_settings-color.scss:16
src/stylesheets/theme/_uswds-theme-color.scss:16

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely

Copy link
Member Author

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

+ 'for more information.';
}

Expand Down Expand Up @@ -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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

}
@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;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

}
@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
Copy link
Member Author

Choose a reason for hiding this comment

The 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 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.';
Comment on lines +955 to +957
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Improves error message

}

/*
Expand Down
159 changes: 84 additions & 75 deletions src/stylesheets/core/_variables.scss
View file
Open in desktop
Expand Up @@ -269,51 +269,51 @@ Theme color map

$project-colors: (
"base": (
"lightest": color($theme-color-base-lightest),
"lighter": color($theme-color-base-lighter),
"light": color($theme-color-base-light),
"default": color($theme-color-base),
"dark": color($theme-color-base-dark),
"darker": color($theme-color-base-darker),
"darkest": color($theme-color-base-darkest)
"lightest": color($theme-color-base-lightest, set-theme),
"lighter": color($theme-color-base-lighter, set-theme),
"light": color($theme-color-base-light, set-theme),
"default": color($theme-color-base, set-theme),
"dark": color($theme-color-base-dark, set-theme),
"darker": color($theme-color-base-darker, set-theme),
"darkest": color($theme-color-base-darkest, set-theme)
),
"primary": (
"lightest": color($theme-color-primary-lightest),
"lighter": color($theme-color-primary-lighter),
"light": color($theme-color-primary-light),
"default": color($theme-color-primary),
"vivid": color($theme-color-primary-vivid),
"dark": color($theme-color-primary-dark),
"darker": color($theme-color-primary-darker),
"darkest": color($theme-color-primary-darkest)
"lightest": color($theme-color-primary-lightest, set-theme),
"lighter": color($theme-color-primary-lighter, set-theme),
"light": color($theme-color-primary-light, set-theme),
"default": color($theme-color-primary, set-theme),
"vivid": color($theme-color-primary-vivid, set-theme),
"dark": color($theme-color-primary-dark, set-theme),
"darker": color($theme-color-primary-darker, set-theme),
"darkest": color($theme-color-primary-darkest, set-theme)
),
"secondary": (
"lightest": color($theme-color-secondary-lightest),
"lighter": color($theme-color-secondary-lighter),
"light": color($theme-color-secondary-light),
"default": color($theme-color-secondary),
"vivid": color($theme-color-secondary-vivid),
"dark": color($theme-color-secondary-dark),
"darker": color($theme-color-secondary-darker),
"darkest": color($theme-color-secondary-darkest)
"lightest": color($theme-color-secondary-lightest, set-theme),
"lighter": color($theme-color-secondary-lighter, set-theme),
"light": color($theme-color-secondary-light, set-theme),
"default": color($theme-color-secondary, set-theme),
"vivid": color($theme-color-secondary-vivid, set-theme),
"dark": color($theme-color-secondary-dark, set-theme),
"darker": color($theme-color-secondary-darker, set-theme),
"darkest": color($theme-color-secondary-darkest, set-theme)
),
"accent-warm": (
"lightest": color($theme-color-accent-warm-lightest),
"lighter": color($theme-color-accent-warm-lighter),
"light": color($theme-color-accent-warm-light),
"default": color($theme-color-accent-warm),
"dark": color($theme-color-accent-warm-dark),
"darker": color($theme-color-accent-warm-darker),
"darkest": color($theme-color-accent-warm-darkest)
"lightest": color($theme-color-accent-warm-lightest, set-theme),
"lighter": color($theme-color-accent-warm-lighter, set-theme),
"light": color($theme-color-accent-warm-light, set-theme),
"default": color($theme-color-accent-warm, set-theme),
"dark": color($theme-color-accent-warm-dark, set-theme),
"darker": color($theme-color-accent-warm-darker, set-theme),
"darkest": color($theme-color-accent-warm-darkest, set-theme)
),
"accent-cool": (
"lightest": color($theme-color-accent-cool-lightest),
"lighter": color($theme-color-accent-cool-lighter),
"light": color($theme-color-accent-cool-light),
"default": color($theme-color-accent-cool),
"dark": color($theme-color-accent-cool-dark),
"darker": color($theme-color-accent-cool-darker),
"darkest": color($theme-color-accent-cool-darkest)
"lightest": color($theme-color-accent-cool-lightest, set-theme),
"lighter": color($theme-color-accent-cool-lighter, set-theme),
"light": color($theme-color-accent-cool-light, set-theme),
"default": color($theme-color-accent-cool, set-theme),
"dark": color($theme-color-accent-cool-dark, set-theme),
"darker": color($theme-color-accent-cool-darker, set-theme),
"darkest": color($theme-color-accent-cool-darkest, set-theme)
)
);

Expand Down Expand Up @@ -368,44 +368,53 @@ Theme color shortcodes
*/

$tokens-color-theme: (
"base-lightest": color($theme-color-base-lightest),
"base-lighter": color($theme-color-base-lighter),
"base-light": color($theme-color-base-light),
"base": color($theme-color-base),
"base-dark": color($theme-color-base-dark),
"base-darker": color($theme-color-base-darker),
"base-darkest": color($theme-color-base-darkest),
"ink": color($theme-color-base-ink),
"primary-lightest": color($theme-color-primary-lightest),
"primary-lighter": color($theme-color-primary-lighter),
"primary-light": color($theme-color-primary-light),
"primary": color($theme-color-primary),
"primary-vivid": color($theme-color-primary-vivid),
"primary-dark": color($theme-color-primary-dark),
"primary-darker": color($theme-color-primary-darker),
"primary-darkest": color($theme-color-primary-darkest),
"secondary-lightest": color($theme-color-secondary-lightest),
"secondary-lighter": color($theme-color-secondary-lighter),
"secondary-light": color($theme-color-secondary-light),
"secondary": color($theme-color-secondary),
"secondary-vivid": color($theme-color-secondary-vivid),
"secondary-dark": color($theme-color-secondary-dark),
"secondary-darker": color($theme-color-secondary-darker),
"secondary-darkest": color($theme-color-secondary-darkest),
"accent-warm-darkest": color($theme-color-accent-warm-darkest),
"accent-warm-darker": color($theme-color-accent-warm-darker),
"accent-warm-dark": color($theme-color-accent-warm-dark),
"accent-warm": color($theme-color-accent-warm),
"accent-warm-light": color($theme-color-accent-warm-light),
"accent-warm-lighter": color($theme-color-accent-warm-lighter),
"accent-warm-lightest": color($theme-color-accent-warm-lightest),
"accent-cool-darkest": color($theme-color-accent-cool-darkest),
"accent-cool-darker": color($theme-color-accent-cool-darker),
"accent-cool-dark": color($theme-color-accent-cool-dark),
"accent-cool": color($theme-color-accent-cool),
"accent-cool-light": color($theme-color-accent-cool-light),
"accent-cool-lighter": color($theme-color-accent-cool-lighter),
"accent-cool-lightest": color($theme-color-accent-cool-lightest)
"base-lightest": color($theme-color-base-lightest, set-theme, no-warn),
"base-lighter": color($theme-color-base-lighter, set-theme, no-warn),
"base-light": color($theme-color-base-light, set-theme, no-warn),
"base": color($theme-color-base, set-theme, no-warn),
"base-dark": color($theme-color-base-dark, set-theme, no-warn),
"base-darker": color($theme-color-base-darker, set-theme, no-warn),
"base-darkest": color($theme-color-base-darkest, set-theme, no-warn),
"ink": color($theme-color-base-ink, set-theme, no-warn),
"primary-lightest": color($theme-color-primary-lightest, set-theme, no-warn),
"primary-lighter": color($theme-color-primary-lighter, set-theme, no-warn),
"primary-light": color($theme-color-primary-light, set-theme, no-warn),
"primary": color($theme-color-primary, set-theme, no-warn),
"primary-vivid": color($theme-color-primary-vivid, set-theme, no-warn),
"primary-dark": color($theme-color-primary-dark, set-theme, no-warn),
"primary-darker": color($theme-color-primary-darker, set-theme, no-warn),
"primary-darkest": color($theme-color-primary-darkest, set-theme, no-warn),
"secondary-lightest":
color($theme-color-secondary-lightest, set-theme, no-warn),
"secondary-lighter": color($theme-color-secondary-lighter, set-theme, no-warn),
"secondary-light": color($theme-color-secondary-light, set-theme, no-warn),
"secondary": color($theme-color-secondary, set-theme, no-warn),
"secondary-vivid": color($theme-color-secondary-vivid, set-theme, no-warn),
"secondary-dark": color($theme-color-secondary-dark, set-theme, no-warn),
"secondary-darker": color($theme-color-secondary-darker, set-theme, no-warn),
"secondary-darkest": color($theme-color-secondary-darkest, set-theme, no-warn),
"accent-warm-darkest":
color($theme-color-accent-warm-darkest, set-theme, no-warn),
"accent-warm-darker":
color($theme-color-accent-warm-darker, set-theme, no-warn),
"accent-warm-dark": color($theme-color-accent-warm-dark, set-theme, no-warn),
"accent-warm": color($theme-color-accent-warm, set-theme, no-warn),
"accent-warm-light": color($theme-color-accent-warm-light, set-theme, no-warn),
"accent-warm-lighter":
color($theme-color-accent-warm-lighter, set-theme, no-warn),
"accent-warm-lightest":
color($theme-color-accent-warm-lightest, set-theme, no-warn),
"accent-cool-darkest":
color($theme-color-accent-cool-darkest, set-theme, no-warn),
"accent-cool-darker":
color($theme-color-accent-cool-darker, set-theme, no-warn),
"accent-cool-dark": color($theme-color-accent-cool-dark, set-theme, no-warn),
"accent-cool": color($theme-color-accent-cool, set-theme, no-warn),
"accent-cool-light": color($theme-color-accent-cool-light, set-theme, no-warn),
"accent-cool-lighter":
color($theme-color-accent-cool-lighter, set-theme, no-warn),
"accent-cool-lightest":
color($theme-color-accent-cool-lightest, set-theme, no-warn)
);

$tokens-color-state: (
Expand Down