Merge pull request #4198 from uswds/jm-state-color-utils

USWDS - Color: Add state color tokens to default palettes.

src/components/test/state-color/state-color.config.yml

@@ -0,0 +1,30 @@
+label: State color utils
+
+context:
+  # $tokens-color-state in _variables.scss
+  state_colors:
+    - error-lighter
+    - error-light
+    - error
+    - error-dark
+    - error-darker
+    - warning-lighter
+    - warning-light
+    - warning
+    - warning-dark
+    - warning-darker
+    - success-lighter
+    - success-light
+    - success
+    - success-dark
+    - success-darker
+    - info-lighter
+    - info-light
+    - info
+    - info-dark
+    - info-darker
+    - disabled-light
+    - disabled
+    - disabled-dark
+    - emergency
+    - emergency-dark

src/components/test/state-color/state-color.njk

@@ -0,0 +1,14 @@
+<div class="padding-2 maxw-desktop">
+  {% for color in state_colors %}
+    <div class="grid-row flex-align-center">
+      <div class="tablet:grid-col-2">
+        <div>
+          {{ color }}
+        </div>
+      </div>
+      <div class="tablet:grid-col-10">
+        <div class="bg-{{ color }} util-test padding-205"></div>
+      </div>
+    </div>
+  {% endfor %}
+</div>

src/stylesheets/utilities/palettes/_default-palettes.scss

@@ -23,7 +23,8 @@ $palettes-default: (
     map-collect(
       $tokens-color-basic,
       $tokens-color-grayscale,
-      $tokens-color-theme
+      $tokens-color-theme,
+      $tokens-color-state
     ),
   "palette-cursor-default": get-standard-values(cursor),
   "palette-display-default": get-standard-values(display),