From 24628ff5d550fe3974cf304759bed26d0fcfc7ac Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
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 <daniel.williams@gsa.gov>
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 <daniel.williams@gsa.gov>
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 <daniel.williams@gsa.gov>
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
 ----------------------------------------
 */