diff --git a/src/stylesheets/core/_functions.scss b/src/stylesheets/core/_functions.scss index 1b1f1ee6e3..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,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; + } } - @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; } - @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; + } + } + + @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 f8a3ddde5c..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), - "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) ) ); @@ -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: ( 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 ---------------------------------------- */