From 24628ff5d550fe3974cf304759bed26d0fcfc7ac Mon Sep 17 00:00:00 2001 From: Dano Williams Date: Tue, 10 Dec 2019 15:22:03 -0800 Subject: [PATCH 1/4] Use `theme` and `bypass` flags to accept non-token color theme values --- src/stylesheets/core/_functions.scss | 45 +++++++++++++++++++++------- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/src/stylesheets/core/_functions.scss b/src/stylesheets/core/_functions.scss index 1b1f1ee6e3..55a39dc261 100644 --- a/src/stylesheets/core/_functions.scss +++ b/src/stylesheets/core/_functions.scss @@ -900,11 +900,31 @@ Derive a color from a color shortcode ---------------------------------------- */ -@function color($shortcode) { - $shortcode: smart-quote(unpack($shortcode)); - @if not $shortcode { - @return false; +@function color($value, $flags: null) { + $shortcode: unpack($value); + + // The bypass flag simply passes the value + @if ($flags == bypass) { + @return $value; + } + + // The theme flag accepts colors with a warning + @if ($flags == theme) { + @if (type-of($value) == color) { + @if $theme-show-compile-warnings { + @warn 'Theme color override: `#{$value}` is not a USWDS color token.'; + } + @return $value; + } + } + + // Explicit false values should be passed through + @if $value == false { + @return $value; } + + $shortcode: smart-quote(unpack($value)); + @if map-has-key($system-color-shortcodes, $shortcode) { $our-color: map-get($system-color-shortcodes, $shortcode); @if $our-color == false { @@ -913,14 +933,19 @@ Derive a color from a color shortcode } @return $our-color; } - @if map-has-key($project-color-shortcodes, $shortcode) { - $our-color: (map-get($project-color-shortcodes, $shortcode)); - @if $our-color == false { - @error '`#{$shortcode}` is a color that does not exist ' - + 'or is set to false.'; + + // If we're using the theme flag, $project-color-shortcodes has not yet been set + @if $flags != theme { + @if map-has-key($project-color-shortcodes, $shortcode) { + $our-color: (map-get($project-color-shortcodes, $shortcode)); + @if $our-color == false { + @error '`#{$shortcode}` is a color that does not exist ' + + 'or is set to false.'; + } + @return $our-color; } - @return $our-color; } + @error '`#{$shortcode}` is not a valid color token.'; } From d003df1878907e5492e07bc2e60f8e7a8b20475a Mon Sep 17 00:00:00 2001 From: Dano Williams Date: Tue, 10 Dec 2019 15:22:20 -0800 Subject: [PATCH 2/4] Use theme and bypass flags --- src/stylesheets/core/_variables.scss | 150 +++++++++++++-------------- 1 file changed, 75 insertions(+), 75 deletions(-) diff --git a/src/stylesheets/core/_variables.scss b/src/stylesheets/core/_variables.scss index f8a3ddde5c..294213098c 100644 --- a/src/stylesheets/core/_variables.scss +++ b/src/stylesheets/core/_variables.scss @@ -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, theme), + "lighter": color($theme-color-base-lighter, theme), + "light": color($theme-color-base-light, theme), + "default": color($theme-color-base, theme), + "dark": color($theme-color-base-dark, theme), + "darker": color($theme-color-base-darker, theme), + "darkest": color($theme-color-base-darkest, 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, theme), + "lighter": color($theme-color-primary-lighter, theme), + "light": color($theme-color-primary-light, theme), + "default": color($theme-color-primary, theme), + "vivid": color($theme-color-primary-vivid, theme), + "dark": color($theme-color-primary-dark, theme), + "darker": color($theme-color-primary-darker, theme), + "darkest": color($theme-color-primary-darkest, 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, theme), + "lighter": color($theme-color-secondary-lighter, theme), + "light": color($theme-color-secondary-light, theme), + "default": color($theme-color-secondary, theme), + "vivid": color($theme-color-secondary-vivid, theme), + "dark": color($theme-color-secondary-dark, theme), + "darker": color($theme-color-secondary-darker, theme), + "darkest": color($theme-color-secondary-darkest, 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, theme), + "lighter": color($theme-color-accent-warm-lighter, theme), + "light": color($theme-color-accent-warm-light, theme), + "default": color($theme-color-accent-warm, theme), + "dark": color($theme-color-accent-warm-dark, theme), + "darker": color($theme-color-accent-warm-darker, theme), + "darkest": color($theme-color-accent-warm-darkest, 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, theme), + "lighter": color($theme-color-accent-cool-lighter, theme), + "light": color($theme-color-accent-cool-light, theme), + "default": color($theme-color-accent-cool, theme), + "dark": color($theme-color-accent-cool-dark, theme), + "darker": color($theme-color-accent-cool-darker, theme), + "darkest": color($theme-color-accent-cool-darkest, theme) ) ); @@ -368,44 +368,44 @@ 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, bypass), + "base-lighter": color($theme-color-base-lighter, bypass), + "base-light": color($theme-color-base-light, bypass), + "base": color($theme-color-base, bypass), + "base-dark": color($theme-color-base-dark, bypass), + "base-darker": color($theme-color-base-darker, bypass), + "base-darkest": color($theme-color-base-darkest, bypass), + "ink": color($theme-color-base-ink, bypass), + "primary-lightest": color($theme-color-primary-lightest, bypass), + "primary-lighter": color($theme-color-primary-lighter, bypass), + "primary-light": color($theme-color-primary-light, bypass), + "primary": color($theme-color-primary, bypass), + "primary-vivid": color($theme-color-primary-vivid, bypass), + "primary-dark": color($theme-color-primary-dark, bypass), + "primary-darker": color($theme-color-primary-darker, bypass), + "primary-darkest": color($theme-color-primary-darkest, bypass), + "secondary-lightest": color($theme-color-secondary-lightest, bypass), + "secondary-lighter": color($theme-color-secondary-lighter, bypass), + "secondary-light": color($theme-color-secondary-light, bypass), + "secondary": color($theme-color-secondary, bypass), + "secondary-vivid": color($theme-color-secondary-vivid, bypass), + "secondary-dark": color($theme-color-secondary-dark, bypass), + "secondary-darker": color($theme-color-secondary-darker, bypass), + "secondary-darkest": color($theme-color-secondary-darkest, bypass), + "accent-warm-darkest": color($theme-color-accent-warm-darkest, bypass), + "accent-warm-darker": color($theme-color-accent-warm-darker, bypass), + "accent-warm-dark": color($theme-color-accent-warm-dark, bypass), + "accent-warm": color($theme-color-accent-warm, bypass), + "accent-warm-light": color($theme-color-accent-warm-light, bypass), + "accent-warm-lighter": color($theme-color-accent-warm-lighter, bypass), + "accent-warm-lightest": color($theme-color-accent-warm-lightest, bypass), + "accent-cool-darkest": color($theme-color-accent-cool-darkest, bypass), + "accent-cool-darker": color($theme-color-accent-cool-darker, bypass), + "accent-cool-dark": color($theme-color-accent-cool-dark, bypass), + "accent-cool": color($theme-color-accent-cool, bypass), + "accent-cool-light": color($theme-color-accent-cool-light, bypass), + "accent-cool-lighter": color($theme-color-accent-cool-lighter, bypass), + "accent-cool-lightest": color($theme-color-accent-cool-lightest, bypass) ); $tokens-color-state: ( From 23a2746e1f06201aa954e68de73b010bf6352c26 Mon Sep 17 00:00:00 2001 From: Dano Williams Date: Tue, 10 Dec 2019 16:22:58 -0800 Subject: [PATCH 3/4] Simplify use of flags and apply to variables --- src/stylesheets/core/_functions.scss | 52 +++++---- src/stylesheets/core/_variables.scss | 159 ++++++++++++++------------- 2 files changed, 114 insertions(+), 97 deletions(-) diff --git a/src/stylesheets/core/_functions.scss b/src/stylesheets/core/_functions.scss index 55a39dc261..69161b44cb 100644 --- a/src/stylesheets/core/_functions.scss +++ b/src/stylesheets/core/_functions.scss @@ -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,53 +900,61 @@ Derive a color from a color shortcode ---------------------------------------- */ -@function color($value, $flags: null) { - $shortcode: unpack($value); +@function color($value, $flags...) { + $value: unpack($value); - // The bypass flag simply passes the value - @if ($flags == bypass) { - @return $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; + } - // The theme flag accepts colors with a warning - @if ($flags == theme) { - @if (type-of($value) == color) { @if $theme-show-compile-warnings { - @warn 'Theme color override: `#{$value}` is not a USWDS color token.'; + @warn 'Override: `#{$value}` is not a USWDS color token.'; } + @return $value; } } - // Explicit false values should be passed through + // False values may be passed through when setting theme colors @if $value == false { - @return $value; + @if index($flags, set-theme) { + @return $value; + } } - $shortcode: smart-quote(unpack($value)); + // Now, any value should be evaluated as a token - @if map-has-key($system-color-shortcodes, $shortcode) { - $our-color: map-get($system-color-shortcodes, $shortcode); + $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; } // If we're using the theme flag, $project-color-shortcodes has not yet been set - @if $flags != theme { - @if map-has-key($project-color-shortcodes, $shortcode) { - $our-color: (map-get($project-color-shortcodes, $shortcode)); + @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 '`#{$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.'; + @error '`#{$value}` is not a valid USWDS color token. ' + + 'See designsystem.digital.gov/design-tokens/color ' + + 'for more information.'; } /* diff --git a/src/stylesheets/core/_variables.scss b/src/stylesheets/core/_variables.scss index 294213098c..705a9ef649 100644 --- a/src/stylesheets/core/_variables.scss +++ b/src/stylesheets/core/_variables.scss @@ -269,51 +269,51 @@ Theme color map $project-colors: ( "base": ( - "lightest": color($theme-color-base-lightest, theme), - "lighter": color($theme-color-base-lighter, theme), - "light": color($theme-color-base-light, theme), - "default": color($theme-color-base, theme), - "dark": color($theme-color-base-dark, theme), - "darker": color($theme-color-base-darker, theme), - "darkest": color($theme-color-base-darkest, theme) + "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, theme), - "lighter": color($theme-color-primary-lighter, theme), - "light": color($theme-color-primary-light, theme), - "default": color($theme-color-primary, theme), - "vivid": color($theme-color-primary-vivid, theme), - "dark": color($theme-color-primary-dark, theme), - "darker": color($theme-color-primary-darker, theme), - "darkest": color($theme-color-primary-darkest, theme) + "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, theme), - "lighter": color($theme-color-secondary-lighter, theme), - "light": color($theme-color-secondary-light, theme), - "default": color($theme-color-secondary, theme), - "vivid": color($theme-color-secondary-vivid, theme), - "dark": color($theme-color-secondary-dark, theme), - "darker": color($theme-color-secondary-darker, theme), - "darkest": color($theme-color-secondary-darkest, theme) + "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, theme), - "lighter": color($theme-color-accent-warm-lighter, theme), - "light": color($theme-color-accent-warm-light, theme), - "default": color($theme-color-accent-warm, theme), - "dark": color($theme-color-accent-warm-dark, theme), - "darker": color($theme-color-accent-warm-darker, theme), - "darkest": color($theme-color-accent-warm-darkest, theme) + "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, theme), - "lighter": color($theme-color-accent-cool-lighter, theme), - "light": color($theme-color-accent-cool-light, theme), - "default": color($theme-color-accent-cool, theme), - "dark": color($theme-color-accent-cool-dark, theme), - "darker": color($theme-color-accent-cool-darker, theme), - "darkest": color($theme-color-accent-cool-darkest, theme) + "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) ) ); @@ -368,44 +368,53 @@ Theme color shortcodes */ $tokens-color-theme: ( - "base-lightest": color($theme-color-base-lightest, bypass), - "base-lighter": color($theme-color-base-lighter, bypass), - "base-light": color($theme-color-base-light, bypass), - "base": color($theme-color-base, bypass), - "base-dark": color($theme-color-base-dark, bypass), - "base-darker": color($theme-color-base-darker, bypass), - "base-darkest": color($theme-color-base-darkest, bypass), - "ink": color($theme-color-base-ink, bypass), - "primary-lightest": color($theme-color-primary-lightest, bypass), - "primary-lighter": color($theme-color-primary-lighter, bypass), - "primary-light": color($theme-color-primary-light, bypass), - "primary": color($theme-color-primary, bypass), - "primary-vivid": color($theme-color-primary-vivid, bypass), - "primary-dark": color($theme-color-primary-dark, bypass), - "primary-darker": color($theme-color-primary-darker, bypass), - "primary-darkest": color($theme-color-primary-darkest, bypass), - "secondary-lightest": color($theme-color-secondary-lightest, bypass), - "secondary-lighter": color($theme-color-secondary-lighter, bypass), - "secondary-light": color($theme-color-secondary-light, bypass), - "secondary": color($theme-color-secondary, bypass), - "secondary-vivid": color($theme-color-secondary-vivid, bypass), - "secondary-dark": color($theme-color-secondary-dark, bypass), - "secondary-darker": color($theme-color-secondary-darker, bypass), - "secondary-darkest": color($theme-color-secondary-darkest, bypass), - "accent-warm-darkest": color($theme-color-accent-warm-darkest, bypass), - "accent-warm-darker": color($theme-color-accent-warm-darker, bypass), - "accent-warm-dark": color($theme-color-accent-warm-dark, bypass), - "accent-warm": color($theme-color-accent-warm, bypass), - "accent-warm-light": color($theme-color-accent-warm-light, bypass), - "accent-warm-lighter": color($theme-color-accent-warm-lighter, bypass), - "accent-warm-lightest": color($theme-color-accent-warm-lightest, bypass), - "accent-cool-darkest": color($theme-color-accent-cool-darkest, bypass), - "accent-cool-darker": color($theme-color-accent-cool-darker, bypass), - "accent-cool-dark": color($theme-color-accent-cool-dark, bypass), - "accent-cool": color($theme-color-accent-cool, bypass), - "accent-cool-light": color($theme-color-accent-cool-light, bypass), - "accent-cool-lighter": color($theme-color-accent-cool-lighter, bypass), - "accent-cool-lightest": color($theme-color-accent-cool-lightest, bypass) + "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: ( From bb4649f03096ac8314af6898a88d9db78bf79b86 Mon Sep 17 00:00:00 2001 From: Dano Williams Date: Thu, 12 Dec 2019 11:18:59 -0800 Subject: [PATCH 4/4] Update URLs --- src/stylesheets/settings/_settings-color.scss | 2 +- src/stylesheets/settings/_settings-components.scss | 2 +- src/stylesheets/settings/_settings-general.scss | 2 +- src/stylesheets/settings/_settings-spacing.scss | 2 +- src/stylesheets/settings/_settings-typography.scss | 2 +- src/stylesheets/settings/_settings-utilities.scss | 2 +- src/stylesheets/theme/_uswds-theme-color.scss | 2 +- src/stylesheets/theme/_uswds-theme-components.scss | 2 +- src/stylesheets/theme/_uswds-theme-general.scss | 2 +- src/stylesheets/theme/_uswds-theme-spacing.scss | 2 +- src/stylesheets/theme/_uswds-theme-utilities.scss | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/stylesheets/settings/_settings-color.scss b/src/stylesheets/settings/_settings-color.scss index 8dafa31e61..b8ff11104e 100644 --- a/src/stylesheets/settings/_settings-color.scss +++ b/src/stylesheets/settings/_settings-color.scss @@ -13,7 +13,7 @@ COLOR SETTINGS ---------------------------------------- Read more about settings and USWDS color tokens in the documentation: -https://v2.designsystem.digital.gov/style-tokens/color +https://designsystem.digital.gov/design-tokens/color ---------------------------------------- */ diff --git a/src/stylesheets/settings/_settings-components.scss b/src/stylesheets/settings/_settings-components.scss index 07ea03e3d6..a0a976f402 100644 --- a/src/stylesheets/settings/_settings-components.scss +++ b/src/stylesheets/settings/_settings-components.scss @@ -13,7 +13,7 @@ COMPONENT SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: -https://v2.designsystem.digital.gov/style-tokens +https://designsystem.digital.gov/design-tokens ---------------------------------------- */ diff --git a/src/stylesheets/settings/_settings-general.scss b/src/stylesheets/settings/_settings-general.scss index 0ea22c0bf6..4add189a02 100644 --- a/src/stylesheets/settings/_settings-general.scss +++ b/src/stylesheets/settings/_settings-general.scss @@ -13,7 +13,7 @@ GENERAL SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: -https://v2.designsystem.digital.gov/style-tokens +https://designsystem.digital.gov/design-tokens ---------------------------------------- */ diff --git a/src/stylesheets/settings/_settings-spacing.scss b/src/stylesheets/settings/_settings-spacing.scss index d9ea0700e0..380e49219b 100644 --- a/src/stylesheets/settings/_settings-spacing.scss +++ b/src/stylesheets/settings/_settings-spacing.scss @@ -14,7 +14,7 @@ SPACING SETTINGS Read more about settings and USWDS spacing units tokens in the documentation: -https://v2.designsystem.digital.gov/style-tokens/spacing-units +https://designsystem.digital.gov/design-tokens/spacing-units ---------------------------------------- */ diff --git a/src/stylesheets/settings/_settings-typography.scss b/src/stylesheets/settings/_settings-typography.scss index c0bc4931df..9e131f5804 100644 --- a/src/stylesheets/settings/_settings-typography.scss +++ b/src/stylesheets/settings/_settings-typography.scss @@ -13,7 +13,7 @@ TYPOGRAPHY SETTINGS ---------------------------------------- Read more about settings and USWDS typography tokens in the documentation: -https://v2.designsystem.digital.gov/style-tokens/typography +https://designsystem.digital.gov/design-tokens/typography ---------------------------------------- */ diff --git a/src/stylesheets/settings/_settings-utilities.scss b/src/stylesheets/settings/_settings-utilities.scss index 2edcc9e015..eb098812a7 100644 --- a/src/stylesheets/settings/_settings-utilities.scss +++ b/src/stylesheets/settings/_settings-utilities.scss @@ -13,7 +13,7 @@ UTILITIES SETTINGS ---------------------------------------- Read more about settings and USWDS utilities in the documentation: -https://v2.designsystem.digital.gov/utilities +https://designsystem.digital.gov/utilities ---------------------------------------- */ diff --git a/src/stylesheets/theme/_uswds-theme-color.scss b/src/stylesheets/theme/_uswds-theme-color.scss index f02a528f61..742d9e738a 100644 --- a/src/stylesheets/theme/_uswds-theme-color.scss +++ b/src/stylesheets/theme/_uswds-theme-color.scss @@ -13,7 +13,7 @@ COLOR SETTINGS ---------------------------------------- Read more about settings and USWDS color tokens in the documentation: -https://v2.designsystem.digital.gov/style-tokens/color +https://designsystem.digital.gov/design-tokens/color ---------------------------------------- */ diff --git a/src/stylesheets/theme/_uswds-theme-components.scss b/src/stylesheets/theme/_uswds-theme-components.scss index a407c67ac2..eaa05ae6a4 100644 --- a/src/stylesheets/theme/_uswds-theme-components.scss +++ b/src/stylesheets/theme/_uswds-theme-components.scss @@ -13,7 +13,7 @@ COMPONENT SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: -https://v2.designsystem.digital.gov/style-tokens +https://designsystem.digital.gov/design-tokens ---------------------------------------- */ diff --git a/src/stylesheets/theme/_uswds-theme-general.scss b/src/stylesheets/theme/_uswds-theme-general.scss index 8684968b79..2a2ecfbb37 100644 --- a/src/stylesheets/theme/_uswds-theme-general.scss +++ b/src/stylesheets/theme/_uswds-theme-general.scss @@ -13,7 +13,7 @@ GENERAL SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: -https://v2.designsystem.digital.gov/style-tokens +https://designsystem.digital.gov/design-tokens ---------------------------------------- */ diff --git a/src/stylesheets/theme/_uswds-theme-spacing.scss b/src/stylesheets/theme/_uswds-theme-spacing.scss index ec4cac07f4..45fa5c44fc 100644 --- a/src/stylesheets/theme/_uswds-theme-spacing.scss +++ b/src/stylesheets/theme/_uswds-theme-spacing.scss @@ -14,7 +14,7 @@ SPACING SETTINGS Read more about settings and USWDS spacing units tokens in the documentation: -https://v2.designsystem.digital.gov/style-tokens/spacing-units +https://designsystem.digital.gov/design-tokens/spacing-units ---------------------------------------- */ diff --git a/src/stylesheets/theme/_uswds-theme-utilities.scss b/src/stylesheets/theme/_uswds-theme-utilities.scss index b79814d9eb..f052d124f9 100644 --- a/src/stylesheets/theme/_uswds-theme-utilities.scss +++ b/src/stylesheets/theme/_uswds-theme-utilities.scss @@ -13,7 +13,7 @@ UTILITIES SETTINGS ---------------------------------------- Read more about settings and USWDS utilities in the documentation: -https://v2.designsystem.digital.gov/utilities +https://designsystem.digital.gov/utilities ---------------------------------------- */