Merge pull request #3258 from uswds/dw-non-token-theme

Allow non-token values in theme color settings

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.';
 }
 
 /*

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: (

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */
 

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
 ----------------------------------------
 */