From 9c2eb0cdee2233f8490cafa2d317eacb83cbbc14 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Wed, 9 Apr 2025 12:49:31 -0400
Subject: [PATCH 01/17] 953: Add color themes

---
 .storybook/preview.js                         |  34 +++-
 source/00-config/config.design-tokens.yml     | 114 +++++++++++--
 source/00-config/mixins/_button.scss          |  47 +++---
 source/00-config/mixins/_color-theme.scss     |  18 +++
 source/00-config/mixins/_focus.scss           |   6 +-
 source/00-config/mixins/_index.scss           |   1 +
 source/00-config/mixins/_list.scss            |   4 +-
 source/01-global/00-colors/_color-themes.scss |  27 ++++
 source/01-global/00-colors/color.scss         | 151 ------------------
 source/01-global/00-colors/color.twig         |  39 -----
 .../{color-item.twig => palette-item.twig}    |   8 +-
 source/01-global/00-colors/palette.scss       |  61 +++++++
 ...{color.stories.jsx => palette.stories.jsx} |  10 +-
 source/01-global/00-colors/palette.twig       |  39 +++++
 source/01-global/00-colors/themes.scss        |  43 +++++
 source/01-global/00-colors/themes.stories.jsx | 110 +++++++++++++
 source/01-global/00-colors/themes.twig        |  31 ++++
 source/01-global/01-typography/fonts.scss     |  10 +-
 source/01-global/02-spacing/space.twig        |  12 +-
 source/01-global/04-transitions/duration.scss |   3 +-
 source/01-global/04-transitions/easing.scss   |   7 +-
 source/01-global/_index.scss                  |   1 +
 .../content-placeholder.jsx                   |   6 +-
 .../html-elements/02-body/_body.scss          |   4 +-
 .../15-inline-elements/_inline-elements.scss  |  12 +-
 .../16-blockquote/_blockquote.scss            |   2 +-
 .../18-horizontal-rule/_horizontal-rule.scss  |   2 +-
 .../html-elements/24-table/_table.scss        |   7 +
 source/01-global/normalize/_normalize.scss    |   8 +-
 .../accordion/accordion--step-list.scss       |   2 +-
 source/03-components/accordion/accordion.scss |   8 +-
 source/03-components/date/_date.scss          |   2 +-
 .../03-components/form-item/_form-item.scss   |   2 +-
 33 files changed, 540 insertions(+), 291 deletions(-)
 create mode 100644 source/00-config/mixins/_color-theme.scss
 create mode 100644 source/01-global/00-colors/_color-themes.scss
 delete mode 100644 source/01-global/00-colors/color.scss
 delete mode 100644 source/01-global/00-colors/color.twig
 rename source/01-global/00-colors/{color-item.twig => palette-item.twig} (82%)
 create mode 100644 source/01-global/00-colors/palette.scss
 rename source/01-global/00-colors/{color.stories.jsx => palette.stories.jsx} (73%)
 create mode 100644 source/01-global/00-colors/palette.twig
 create mode 100644 source/01-global/00-colors/themes.scss
 create mode 100644 source/01-global/00-colors/themes.stories.jsx
 create mode 100644 source/01-global/00-colors/themes.twig

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 2452f99dd..a561824ac 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -28,11 +28,28 @@ function setupTwig(twig) {
 
 setupTwig(Twig);
 
+const addThemeWrapper = (Story, context) => {
+  return (
+    <div
+      className={context.globals.theme}
+      style={{
+        backgroundColor: 'var(--background-color)',
+        color: 'var(--text-color)',
+        display: 'flow-root',
+        minHeight: '100vh',
+      }}
+    >
+      <Story />
+    </div>
+  );
+};
+
 export const decorators = [
   storyFn => {
     useEffect(() => Drupal.attachBehaviors(), []);
     return storyFn();
   },
+  addThemeWrapper,
 ];
 
 const preview = {
@@ -43,7 +60,7 @@ const preview = {
         method: 'alphabetical',
         order: [
           'Global',
-          ['Color Palette', '*'],
+          ['Color', 'Typography', '*'],
           'Layouts',
           'Components',
           'Templates',
@@ -53,5 +70,20 @@ const preview = {
       },
     },
   },
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'default',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'theme-default', title: 'Default' },
+          { value: 'theme-gray-6', title: 'Dark Gray' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
 };
 export default preview;
diff --git a/source/00-config/config.design-tokens.yml b/source/00-config/config.design-tokens.yml
index 50338ed02..2702aa9bd 100644
--- a/source/00-config/config.design-tokens.yml
+++ b/source/00-config/config.design-tokens.yml
@@ -135,18 +135,13 @@ gesso:
       border-light: grayscale.gray-1
       thumb: grayscale.gray-5
       track: grayscale.gray-3
-    mark:
-      background: other.yellow-neon.base
-      text: grayscale.gray-7
-    selection:
-      background: brand.blue.base
-      text: grayscale.white
     table:
       border: grayscale.gray-5
       background: grayscale.white
       background-head: grayscale.gray-1
       background-foot: grayscale.gray-1
       background-sorted: brand.blue.light-2
+      text: grayscale.gray-7
     ui:
       generic:
         background: grayscale.gray-3
@@ -174,6 +169,91 @@ gesso:
       warning:
         background: other.yellow.light
         border: other.yellow.base
+    theme:
+      default:
+        # generic
+        background: grayscale.white
+        secondary-background: grayscale.gray-2
+        text: grayscale.gray-7
+        secondary-text: grayscale.gray-5
+        accent: brand.blue.base
+        border: grayscale.gray-3
+        focus: brand.blue.light
+        link: brand.blue.base
+        link-hover: brand.blue.dark
+        link-active: brand.blue.dark
+        link-visited: brand.blue.dark
+        mark-background: other.yellow-neon.base
+        mark-text: grayscale.gray-7
+        selection-background: brand.blue.base
+        selection-text: grayscale.white
+        # component-specific
+        button-primary-background: brand.blue.base
+        button-primary-background-hover: brand.blue.dark
+        button-primary-background-active: brand.blue.dark-1
+        button-primary-background-disabled: grayscale.gray-1
+        button-primary-border: brand.blue.base
+        button-primary-border-hover: brand.blue.dark
+        button-primary-border-active: brand.blue.dark-1
+        button-primary-border-disabled: grayscale.gray-1
+        button-primary-text: grayscale.white
+        button-primary-text-hover: grayscale.white
+        button-primary-text-active: grayscale.white
+        button-primary-text-disabled: grayscale.gray-3
+        button-secondary-background: brand.ocean-blue.light-1
+        button-secondary-background-hover: brand.ocean-blue.light
+        button-secondary-background-active: brand.ocean-blue.base
+        button-secondary-background-disabled: grayscale.gray-1
+        button-secondary-border: brand.ocean-blue.light-1
+        button-secondary-border-hover: brand.ocean-blue.light
+        button-secondary-border-active: brand.ocean-blue.base
+        button-secondary-border-disabled: grayscale.gray-1
+        button-secondary-text: brand.ocean-blue.dark-1
+        button-secondary-text-hover: brand.ocean-blue.dark-1
+        button-secondary-text-active: grayscale.gray-7
+        button-secondary-text-disabled: grayscale.gray-3
+      gray-6:
+        # generic
+        background: grayscale.gray-6
+        secondary-background: grayscale.gray-4
+        text: grayscale.white
+        secondary-text: grayscale.gray-2
+        accent: brand.blue.light-1
+        border: grayscale.gray-3
+        focus: brand.ocean-blue.light-1
+        link: brand.ocean-blue.light
+        link-hover: brand.ocean-blue.base
+        link-active: brand.ocean-blue.base
+        link-visited: brand.ocean-blue.base
+        mark-background: other.yellow-neon.base
+        mark-text: grayscale.gray-7
+        selection-background: brand.blue.base
+        selection-text: grayscale.white
+        # component-specific
+        button-primary-background: brand.blue.base
+        button-primary-background-hover: brand.blue.dark
+        button-primary-background-active: brand.blue.dark-1
+        button-primary-background-disabled: grayscale.gray-5
+        button-primary-border: brand.blue.base
+        button-primary-border-hover: brand.blue.dark
+        button-primary-border-active: brand.blue.dark-1
+        button-primary-border-disabled: grayscale.gray-5
+        button-primary-text: grayscale.white
+        button-primary-text-hover: grayscale.white
+        button-primary-text-active: grayscale.white
+        button-primary-text-disabled: grayscale.gray-3
+        button-secondary-background: brand.ocean-blue.light-1
+        button-secondary-background-hover: brand.ocean-blue.light
+        button-secondary-background-active: brand.ocean-blue.base
+        button-secondary-background-disabled: grayscale.gray-5
+        button-secondary-border: brand.ocean-blue.light-1
+        button-secondary-border-hover: brand.ocean-blue.light
+        button-secondary-border-active: brand.ocean-blue.base
+        button-secondary-border-disabled: grayscale.gray-5
+        button-secondary-text: brand.ocean-blue.dark-1
+        button-secondary-text-hover: brand.ocean-blue.dark-1
+        button-secondary-text-active: grayscale.gray-7
+        button-secondary-text-disabled: grayscale.gray-3
   typography:
     font-family:
       primary:
@@ -285,43 +365,43 @@ gesso:
       tallest: 2
     display:
       display:
-        color: text.primary
+        color: 'var(--text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 15
       h1:
-        color: text.primary
+        color: 'var(--text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 12
       h2:
-        color: text.primary
+        color: 'var(--text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 10
       h3:
-        color: text.primary
+        color: 'var(--text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 8
       h4:
-        color: text.primary
+        color: 'var(--text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: base
         responsive-font-size: 7
       h5:
-        color: text.primary
+        color: 'var(--text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: base
         responsive-font-size: 3
       h6:
-        color: text.primary
+        color: 'var(--text-color)'
         font-family: primary.stack
         font-weight: semibold
         letter-spacing: tight
@@ -329,25 +409,25 @@ gesso:
         text-transform: uppercase
         responsive-font-size: 2
       blockquote:
-        color: text.link
+        color: 'var(--link-color)'
         font-family: primary.stack
         font-size: 7
         font-weight: regular
         line-height: base
       body:
-        color: text.primary
+        color: 'var(--text-color)'
         font-family: primary.stack
         font-size: 3
         font-weight: regular
         line-height: base
       body-large:
-        color: text.primary
+        color: 'var(--text-color)'
         font-family: primary.stack
         font-size: 5
         font-weight: regular
         line-height: base
       cite:
-        color: text.secondary
+        color: 'var(--secondary-text-color)'
         font-family: primary.stack
         font-size: 2
         font-style: normal
diff --git a/source/00-config/mixins/_button.scss b/source/00-config/mixins/_button.scss
index e00a12921..8b79fb99b 100644
--- a/source/00-config/mixins/_button.scss
+++ b/source/00-config/mixins/_button.scss
@@ -2,33 +2,25 @@
 
 @use '../functions/' as *;
 @use './focus' as *;
+@use './responsive-font-size' as *;
 
 $button-border-width: 0 !default;
 $button-border-radius: 0 !default;
-$button-background-color: gesso-color(button, primary, background) !default;
-$button-background-color-active: gesso-color(
-  button,
-  primary,
-  background-active
-) !default;
-$button-background-color-disabled: gesso-color(
-  button,
-  disabled,
-  background
-) !default;
-$button-background-color-hover: gesso-color(
-  button,
-  primary,
-  background-hover
-) !default;
-$button-border-color: gesso-color(button, primary, border) !default;
-$button-border-color-hover: gesso-color(button, primary, border-hover) !default;
-$button-border-color-disabled: gesso-color(button, disabled, border) !default;
-$button-text-color: gesso-color(button, primary, text) !default;
-$button-text-color-active: gesso-color(button, primary, text-active) !default;
-$button-text-color-disabled: gesso-color(button, disabled, text) !default;
-$button-text-color-hover: gesso-color(button, primary, text-hover) !default;
-$button-font-size: gesso-base-font-size() !default;
+$button-background-color: var(--button-primary-background-color);
+$button-background-color-hover: var(--button-primary-background-hover-color);
+$button-background-color-active: var(--button-primary-background-active-color);
+$button-background-color-disabled: var(
+  --button-primary-background-disabled-color
+);
+$button-border-color: var(--button-primary-border-color);
+$button-border-color-hover: var(--button-primary-border-hover-color);
+$button-border-color-active: var(--button-primary-border-active-color);
+$button-border-color-disabled: var(--button-primary-border-disabled-color);
+$button-text-color: var(--button-primary-text-color);
+$button-text-color-hover: var(--button-primary-text-hover-color);
+$button-text-color-active: var(--button-primary-text-active-color);
+$button-text-color-disabled: var(--button-primary-text-disabled-color);
+$button-font-size-token: 3 !default;
 
 @mixin button(
   $color-background: $button-background-color,
@@ -44,8 +36,10 @@ $button-font-size: gesso-base-font-size() !default;
   $color-text-disabled: $button-text-color-disabled,
   $border-radius: $button-border-radius,
   $border-width: $button-border-width,
-  $font-size: $button-font-size
+  $font-size-token: $button-font-size-token
 ) {
+  @include focus();
+  @include responsive-font-size($font-size-token);
   background-color: $color-background;
   @if $border-width != 0 {
     border: $border-width solid $color-border;
@@ -57,7 +51,6 @@ $button-font-size: gesso-base-font-size() !default;
   cursor: pointer;
   display: inline-block;
   font-family: gesso-font-family(primary);
-  font-size: rem($font-size);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-weight: gesso-font-weight(bold);
@@ -113,7 +106,7 @@ $button-font-size: gesso-base-font-size() !default;
   -webkit-tap-highlight-color: transparent;
 
   &[disabled] {
-    color: gesso-color(button, disabled, text);
+    color: var(--secondary-text-color);
     cursor: default;
     pointer-events: none;
   }
diff --git a/source/00-config/mixins/_color-theme.scss b/source/00-config/mixins/_color-theme.scss
new file mode 100644
index 000000000..de5562611
--- /dev/null
+++ b/source/00-config/mixins/_color-theme.scss
@@ -0,0 +1,18 @@
+// Mixins: Color Theme
+
+@use '../design-tokens.artifact' as *;
+@use '../functions' as *;
+
+@mixin color-theme($theme, $include_fix: true) {
+  $properties: gesso-get-map(colors, theme, $theme);
+
+  @each $property, $value in $properties {
+    --#{$property}-color: #{'' + gesso-color(theme, $theme, $property)};
+  }
+
+  @if ($include_fix) {
+    // Needed for elements using z-index: -1 to be visible. (ex: button focus)
+    position: relative;
+    z-index: 0;
+  }
+}
diff --git a/source/00-config/mixins/_focus.scss b/source/00-config/mixins/_focus.scss
index edce71b71..aaea1e49d 100644
--- a/source/00-config/mixins/_focus.scss
+++ b/source/00-config/mixins/_focus.scss
@@ -2,11 +2,7 @@
 
 @use '00-config/functions/gesso' as *;
 
-@mixin focus(
-  $color: gesso-color(ui, generic, focus),
-  $width: 2px,
-  $offset: 2px
-) {
+@mixin focus($color: var(--focus-color), $width: 2px, $offset: 2px) {
   outline: $width solid transparent;
   outline-offset: $offset;
 
diff --git a/source/00-config/mixins/_index.scss b/source/00-config/mixins/_index.scss
index e77322fca..c1208809b 100644
--- a/source/00-config/mixins/_index.scss
+++ b/source/00-config/mixins/_index.scss
@@ -3,6 +3,7 @@
 @forward 'breakpoint';
 @forward 'button';
 @forward 'clearfix';
+@forward 'color-theme';
 @forward 'container-query';
 @forward 'display-text-style';
 @forward 'focus';
diff --git a/source/00-config/mixins/_list.scss b/source/00-config/mixins/_list.scss
index b661ba74c..a1b31d3a5 100644
--- a/source/00-config/mixins/_list.scss
+++ b/source/00-config/mixins/_list.scss
@@ -33,7 +33,7 @@
   }
 }
 
-@mixin list-pipeline($pipeline-border-color: gesso-color(ui, generic, border)) {
+@mixin list-pipeline($pipeline-border-color: var(--border-color)) {
   @include clearfix();
   list-style-type: none;
   margin-inline-start: 0;
@@ -70,7 +70,7 @@
 
 @mixin list-border(
   $list-border-padding: 0.25rem,
-  $list-border-color: gesso-color(ui, generic, border)
+  $list-border-color: var(--border-color)
 ) {
   list-style: none;
   margin-inline-start: 0;
diff --git a/source/01-global/00-colors/_color-themes.scss b/source/01-global/00-colors/_color-themes.scss
new file mode 100644
index 000000000..52dfe42fa
--- /dev/null
+++ b/source/01-global/00-colors/_color-themes.scss
@@ -0,0 +1,27 @@
+// Global: Color Themes
+
+@use '00-config' as *;
+
+$themes: gesso-get-map(colors, theme);
+
+@each $theme, $properties in $themes {
+  @if $theme == 'default' {
+    :root {
+      @include color-theme(default, false);
+    }
+  } @else {
+    .theme-#{'' + $theme} {
+      @include color-theme($theme);
+
+      @media print {
+        @include color-theme(default);
+      }
+    }
+  }
+}
+
+// Output default theme last so it can override the others.
+%theme-default,
+.theme-default {
+  @include color-theme(default);
+}
diff --git a/source/01-global/00-colors/color.scss b/source/01-global/00-colors/color.scss
deleted file mode 100644
index c43afacfd..000000000
--- a/source/01-global/00-colors/color.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-// Storybook: Color Swatches
-
-@use 'sass:math';
-@use '00-config' as *;
-
-$swatch-size: rem(150px);
-$swatch-padding: 1rem;
-
-.gesso-storybook-color__group {
-  border-block-end: 1px solid #eee;
-  display: flex;
-  flex-wrap: wrap;
-  margin-block-end: $swatch-padding;
-}
-
-.gesso-storybook-color-swatch {
-  border: 1px solid #c1c1c1;
-  flex: 0 0 ($swatch-size + 2 * $swatch-padding);
-  margin: 0 math.div($swatch-padding, 2) $swatch-padding;
-  max-width: ($swatch-size + 2 * $swatch-padding);
-  padding: $swatch-padding;
-}
-
-.gesso-storybook-color-swatch__indicator {
-  height: $swatch-size;
-  margin-block-end: $swatch-padding;
-  width: $swatch-size;
-}
-
-.gesso-storybook-color-swatch__meta {
-  line-height: 1.2;
-}
-
-.gesso-storybook-color-swatch__name {
-  margin-block-end: rem(8px);
-}
-
-.gesso-storybook-color-swatch__hex {
-  font-family:
-    Menlo, Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New',
-    monospace, sans-serif;
-  font-size: rem(14px);
-}
-
-.gesso-storybook-color-swatch__sass-code {
-  display: block;
-  font-size: rem(12px);
-  margin-block-start: rem(4px);
-}
-
-// Box Shadows
-$shadow-swatch: rem(200px);
-$shadow-gutter: rem(50px);
-
-.gesso-storybook-box-shadow {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.gesso-storybook-box-shadow__item {
-  display: flex;
-  flex: 0 0 $shadow-swatch;
-  height: $shadow-swatch;
-  margin: 0 math.div($shadow-gutter, 2) $shadow-gutter;
-  width: $shadow-swatch;
-}
-
-.gesso-storybook-box-shadow__label {
-  margin: auto;
-  padding: 1rem;
-  text-align: center;
-}
-
-// Duration
-$duration-swatch: rem(40px);
-
-.gesso-storybook-duration {
-  margin-block-end: 1rem;
-}
-
-.gesso-storybook-duration__help-text {
-  margin-block-end: 1rem;
-}
-
-.gesso-storybook-duration__indicator {
-  background-color: #666;
-  border-radius: 50%;
-  display: inline-block;
-  height: $duration-swatch;
-  margin-block-end: 2rem;
-  position: relative;
-  transition: all 2s ease-out;
-  width: $duration-swatch;
-}
-
-.gesso-storybook-duration__item {
-  flex: 0 0 rem(150px);
-  padding: 1rem;
-  text-align: center;
-}
-
-.gesso-storybook-duration__group {
-  background-color: #eee;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 1rem;
-
-  &:hover {
-    .gesso-storybook-duration__indicator {
-      transform: scale(1.5);
-    }
-  }
-}
-
-// Easing
-$easing-swatch: rem(75px);
-
-.gesso-storybook-easing {
-  background-color: #eee;
-  padding: 1rem;
-}
-
-.gesso-storybook-easing__help-text {
-  margin-block-end: 1rem;
-}
-
-.gesso-storybook-easing__indicator {
-  background-color: #666;
-  border-radius: 10%;
-  height: $easing-swatch;
-  inset-inline-start: 0;
-  margin-block-end: 0.5rem;
-  position: relative;
-  transition-duration: 1s;
-  transition-property: left;
-  width: $easing-swatch;
-}
-
-.gesso-storybook-easing__item {
-  margin-block-end: 1rem;
-}
-
-.gesso-storybook-easing__group {
-  padding: 0 rem(150px) 0 1rem;
-
-  &:hover {
-    .gesso-storybook-easing__indicator {
-      inset-inline-start: 100%;
-    }
-  }
-}
diff --git a/source/01-global/00-colors/color.twig b/source/01-global/00-colors/color.twig
deleted file mode 100644
index ae6b87f65..000000000
--- a/source/01-global/00-colors/color.twig
+++ /dev/null
@@ -1,39 +0,0 @@
-<h3>Brand</h3>
-<div class="gesso-storybook-color">
-  {% for key, list in gesso.palette.brand %}
-    <div class="gesso-storybook-color__group">
-      {% for name, color in list %}
-        {% include '@global/00-colors/color-item.twig' with  {
-          color: color,
-          name: key ~'-'~ name
-        } %}
-      {% endfor %}
-    </div>
-  {% endfor %}
-</div>
-
-<h3>Grayscale</h3>
-<div class="gesso-storybook-color">
-  <div class="gesso-storybook-color__group">
-    {% for name, color in gesso.palette.grayscale %}
-      {% include '@global/00-colors/color-item.twig' with  {
-        color: color,
-        name: name
-      } %}
-    {% endfor %}
-  </div>
-</div>
-
-<h3>Other</h3>
-<div class="gesso-storybook-color">
-  {% for key, list in gesso.palette.other %}
-    <div class="gesso-storybook-color__group">
-      {% for name, color in list %}
-        {% include '@global/00-colors/color-item.twig' with  {
-          color: color,
-          name: key ~'-'~ name
-        } %}
-      {% endfor %}
-    </div>
-  {% endfor %}
-</div>
diff --git a/source/01-global/00-colors/color-item.twig b/source/01-global/00-colors/palette-item.twig
similarity index 82%
rename from source/01-global/00-colors/color-item.twig
rename to source/01-global/00-colors/palette-item.twig
index 6f275b21b..9042d7f3a 100644
--- a/source/01-global/00-colors/color-item.twig
+++ b/source/01-global/00-colors/palette-item.twig
@@ -1,3 +1,9 @@
+{% set classes = [
+  'gesso-storybook-color-swatch',
+  modifier_classes ? modifier_classes : '',
+]|join(' ')|trim %}
+
+
 {% if color is iterable %}
   {% set color_label = color['sass'] %}
   {% set color_value = color['fallback'] is empty ? color['sass'] : color['fallback'] %}
@@ -7,7 +13,7 @@
 {% endif %}
 {% set style = 'background-color:' ~ color_value  ~ ';' %}
 
-<div class="gesso-storybook-color-swatch">
+<div {{ add_attributes({ 'class': classes }) }}>
   <div class="gesso-storybook-color-swatch__indicator" style="{{ style }}"></div>
   <div class="gesso-storybook-color-swatch__meta">
     <div class="gesso-storybook-color-swatch__name">{{ name }}</div>
diff --git a/source/01-global/00-colors/palette.scss b/source/01-global/00-colors/palette.scss
new file mode 100644
index 000000000..c1d1b5846
--- /dev/null
+++ b/source/01-global/00-colors/palette.scss
@@ -0,0 +1,61 @@
+// Storybook: Color Swatches
+
+@use 'sass:math';
+@use '00-config' as *;
+
+$swatch-size: rem(150px);
+$swatch-padding: 1rem;
+
+.gesso-storybook-color-palette__heading {
+  font-family: gesso-font-family(system);
+  font-size: 1.25rem;
+  line-height: 1.25;
+  margin-block-end: 1rem;
+}
+
+.gesso-storybook-color-palette__group {
+  border-block-end: 1px solid var(--border-color);
+  column-gap: $swatch-padding;
+  display: flex;
+  flex-wrap: wrap;
+  margin-block-end: $swatch-padding;
+}
+
+.gesso-storybook-color-swatch {
+  border: 1px solid var(--border-color);
+  flex: 0 0 ($swatch-size + 2 * $swatch-padding);
+  margin-block-end: $swatch-padding;
+  max-width: ($swatch-size + 2 * $swatch-padding);
+  padding: $swatch-padding;
+}
+
+.gesso-storybook-color-swatch__indicator {
+  height: $swatch-size;
+  margin-block-end: $swatch-padding;
+  width: $swatch-size;
+}
+
+.gesso-storybook-color-swatch__meta {
+  line-height: 1.2;
+}
+
+.gesso-storybook-color-swatch__name {
+  margin-block-end: rem(8px);
+}
+
+.gesso-storybook-color-swatch__hex {
+  font-family: gesso-font-family(monospace);
+  font-size: rem(14px);
+}
+
+.gesso-storybook-color-swatch__sass-code {
+  display: block;
+  font-size: rem(12px);
+  margin-block-start: rem(4px);
+}
+
+.gesso-storybook-color-swatch--small {
+  .gesso-storybook-color-swatch__indicator {
+    height: math.div($swatch-size, 2);
+  }
+}
diff --git a/source/01-global/00-colors/color.stories.jsx b/source/01-global/00-colors/palette.stories.jsx
similarity index 73%
rename from source/01-global/00-colors/color.stories.jsx
rename to source/01-global/00-colors/palette.stories.jsx
index 19462de47..5b7513092 100644
--- a/source/01-global/00-colors/color.stories.jsx
+++ b/source/01-global/00-colors/palette.stories.jsx
@@ -1,12 +1,12 @@
 import parse from 'html-react-parser';
 
 import { withGlobalWrapper } from '../../../.storybook/decorators';
-import twigTemplate from './color.twig';
+import twigTemplate from './palette.twig';
 import data from '../../00-config/config.design-tokens.yml';
-import './color.scss';
+import './palette.scss';
 
 const settings = {
-  title: 'Global/Color Palette',
+  title: 'Global/Color',
   decorators: [withGlobalWrapper],
   argTypes: {
     gesso: {
@@ -17,10 +17,10 @@ const settings = {
   },
 };
 
-const ColorPalette = {
+const Palette = {
   render: args => parse(twigTemplate(args)),
   args: { ...data },
 };
 
 export default settings;
-export { ColorPalette };
+export { Palette };
diff --git a/source/01-global/00-colors/palette.twig b/source/01-global/00-colors/palette.twig
new file mode 100644
index 000000000..00b5a20be
--- /dev/null
+++ b/source/01-global/00-colors/palette.twig
@@ -0,0 +1,39 @@
+<div class="gesso-storybook-color-palette">
+  <h2 class="gesso-storybook-color-palette__heading">Brand</h2>
+  {% for key, list in gesso.palette.brand %}
+    <div class="gesso-storybook-color-palette__group">
+      {% for name, color in list %}
+        {% include '@global/00-colors/palette-item.twig' with  {
+          color: color,
+          name: key ~ '-' ~ name,
+        } %}
+      {% endfor %}
+    </div>
+  {% endfor %}
+</div>
+
+<div class="gesso-storybook-color-palette">
+  <h2 class="gesso-storybook-color-palette__heading">Grayscale</h2>
+  <div class="gesso-storybook-color-palette__group">
+    {% for name, color in gesso.palette.grayscale %}
+      {% include '@global/00-colors/palette-item.twig' with  {
+        'color': color,
+        'name': name,
+      } %}
+    {% endfor %}
+  </div>
+</div>
+
+<div class="gesso-storybook-color-palette">
+  <h2 class="gesso-storybook-color-palette__heading">Other</h2>
+  {% for key, list in gesso.palette.other %}
+    <div class="gesso-storybook-color-palette__group">
+      {% for name, color in list %}
+        {% include '@global/00-colors/palette-item.twig' with  {
+          'color': color,
+          'name': key ~ '-' ~ name,
+        } %}
+      {% endfor %}
+    </div>
+  {% endfor %}
+</div>
diff --git a/source/01-global/00-colors/themes.scss b/source/01-global/00-colors/themes.scss
new file mode 100644
index 000000000..7136babd7
--- /dev/null
+++ b/source/01-global/00-colors/themes.scss
@@ -0,0 +1,43 @@
+// Storybook: Color Themes
+
+@use '00-config' as *;
+
+.gesso-storybook-color-theme__heading {
+  font-family: gesso-font-family(system);
+  font-size: 1.25rem;
+  line-height: 1.25;
+  margin-block-end: 1rem;
+}
+
+.gesso-storybook-color-theme__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  @include breakpoint(1002px) {
+    flex-wrap: nowrap;
+  }
+}
+
+.gesso-storybook-color-theme__palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  max-width: rem(1002px);
+}
+
+.gesso-storybook-color-theme__content {
+  background: var(--background-color);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  margin-block-end: 2rem;
+  padding: 1rem 0;
+
+  > :last-child {
+    margin-block-end: 0;
+  }
+}
+
+.gesso-storybook-color-theme__icons {
+  color: var(--accent-color);
+}
diff --git a/source/01-global/00-colors/themes.stories.jsx b/source/01-global/00-colors/themes.stories.jsx
new file mode 100644
index 000000000..e33144dc7
--- /dev/null
+++ b/source/01-global/00-colors/themes.stories.jsx
@@ -0,0 +1,110 @@
+import ReactDOMServer from 'react-dom/server';
+import parse from 'html-react-parser';
+
+import { withGlobalWrapper } from '../../../.storybook/decorators';
+import twigTemplate from './themes.twig';
+import globalData from '../../00-config/storybook.global-data.yml';
+import data from '../../00-config/config.design-tokens.yml';
+import './palette.scss';
+import './themes.scss';
+import { Default as Accordion } from '../../03-components/accordion/accordion.stories';
+import {
+  Primary as PrimaryButton,
+  Secondary as SecondaryButton,
+} from '../../03-components/button/button.stories';
+import { FacetList } from '../../03-components/facet-list/facet-list.stories';
+import { Text as FormItem } from '../../03-components/form-item/form-item--textfield/form-item--textfield.stories';
+import { PageTitle } from '../../03-components/page-title/page-title.stories';
+import { TagList } from '../../03-components/tag-list/tag-list.stories';
+import { WYSIWYG } from '../../03-components/wysiwyg/wysiwyg.stories';
+
+const settings = {
+  title: 'Global/Color',
+  decorators: [withGlobalWrapper],
+  parameters: {
+    controls: {
+      include: ['storybook'],
+    },
+  },
+  argTypes: {
+    gesso: {
+      table: {
+        disable: true,
+      },
+    },
+    storybook: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+const demoContent = `
+  ${ReactDOMServer.renderToStaticMarkup(PageTitle.render(PageTitle.args))}
+  ${ReactDOMServer.renderToStaticMarkup(TagList.render(TagList.args))}
+  ${ReactDOMServer.renderToStaticMarkup(FormItem.render(FormItem.args))}
+
+  <p>
+    ${ReactDOMServer.renderToStaticMarkup(
+      PrimaryButton.render({
+        ...PrimaryButton.args,
+        text: 'Primary Button',
+      })
+    )}
+    ${ReactDOMServer.renderToStaticMarkup(
+      PrimaryButton.render({
+        ...PrimaryButton.args,
+        is_button_tag: false,
+        text: 'Primary Link Button',
+      })
+    )}
+    ${ReactDOMServer.renderToStaticMarkup(
+      PrimaryButton.render({
+        ...PrimaryButton.args,
+        is_disabled: true,
+        text: 'Disabled Primary Button'
+      })
+    )}
+  </p>
+
+  <p>
+    ${ReactDOMServer.renderToStaticMarkup(
+      SecondaryButton.render({
+        ...SecondaryButton.args,
+        text: 'Secondary Button',
+      })
+    )}
+    ${ReactDOMServer.renderToStaticMarkup(
+      SecondaryButton.render({
+        ...SecondaryButton.args,
+        is_button_tag: false,
+        text: 'Secondary Link Button',
+      })
+    )}
+    ${ReactDOMServer.renderToStaticMarkup(
+      SecondaryButton.render({
+        ...SecondaryButton.args,
+        is_disabled: true,
+        text: 'Disabled Secondary Button'
+      })
+    )}
+  </p>
+
+  ${ReactDOMServer.renderToStaticMarkup(FacetList.render(FacetList.args))}
+
+  <hr>
+
+  ${ReactDOMServer.renderToStaticMarkup(WYSIWYG.render(WYSIWYG.args))}
+`;
+
+const Themes = {
+  render: args => parse(twigTemplate({
+    ...args,
+    demo_content: demoContent,
+  })),
+  args: { ...globalData, ...data },
+};
+
+export default settings;
+export { Themes };
diff --git a/source/01-global/00-colors/themes.twig b/source/01-global/00-colors/themes.twig
new file mode 100644
index 000000000..30463d934
--- /dev/null
+++ b/source/01-global/00-colors/themes.twig
@@ -0,0 +1,31 @@
+<div class="gesso-storybook-color-theme">
+  <div>
+    <h2 class="gesso-storybook-color-theme__heading">Color Themes</h2>
+    <ul>
+      {% for key, value in gesso.colors.theme %}
+        <li><a href="#theme-{{ key }}" target="_self">{{ key|capitalize }}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>
+{% for key, value in gesso.colors.theme %}
+  <div class="gesso-storybook-color-theme" id="theme-{{ key }}">
+    <h2 class="gesso-storybook-color-theme__heading">Theme: {{ key|capitalize }}</h2>
+    <div class="gesso-storybook-color-theme__row">
+      <div class="gesso-storybook-color-theme__palette">
+        {% for token, color in value %}
+          {% include '@global/00-colors/palette-item.twig' with  {
+            'modifier_classes': 'gesso-storybook-color-swatch--small',
+            'color': color,
+            'name': token,
+          } %}
+        {% endfor %}
+      </div>
+      <div class="gesso-storybook-color-theme__content theme-{{ key }}">
+        <div class="l-constrain">
+          {{ demo_content }}
+        </div>
+      </div>
+    </div>
+  </div>
+{% endfor %}
diff --git a/source/01-global/01-typography/fonts.scss b/source/01-global/01-typography/fonts.scss
index 2ec44e9b8..f5bcbc155 100644
--- a/source/01-global/01-typography/fonts.scss
+++ b/source/01-global/01-typography/fonts.scss
@@ -28,7 +28,7 @@
 }
 
 .gesso-storybook-font__preview {
-  border-block-end: 2px solid #eee;
+  border-block-end: 2px solid var(--border-color);
   font-size: rem(18px);
   font-style: normal;
   font-weight: 400;
@@ -38,7 +38,7 @@
 
   @include breakpoint(800px) {
     border-block-end: 0;
-    border-inline-end: 2px solid #eee;
+    border-inline-end: 2px solid var(--border-color);
     margin: rem(5px) rem(30px) 0 0;
     padding: 0 rem(20px);
     text-align: start;
@@ -70,24 +70,22 @@
 }
 
 .gesso-storybook-font__label {
-  color: #999;
+  color: var(--accent-color);
 }
 
 .gesso-storybook-font__name {
-  color: #565454;
+  color: var(--accent-color);
   font-size: 0.9rem;
   line-height: 1.5;
   margin: rem(5px) 0;
 }
 
 .gesso-storybook-font__weight {
-  color: #000;
   font-size: rem(13px);
   margin-block-end: rem(5px);
 }
 
 .gesso-storybook-font__style {
-  color: #000;
   font-size: rem(13px);
   margin-block-end: rem(5px);
 }
diff --git a/source/01-global/02-spacing/space.twig b/source/01-global/02-spacing/space.twig
index 109ea9f39..95f370926 100644
--- a/source/01-global/02-spacing/space.twig
+++ b/source/01-global/02-spacing/space.twig
@@ -11,16 +11,16 @@
     {# Base font value should be a pixel value or unitless value #}
     {% for name, unit in gesso.spacing|keysort %}
       {% set remValue =
-        (unit~''|replace({'px':''})) /
-        (gesso.typography['base-font-size']|replace({'px':''}))
+        (unit~''|replace({'px': ''})) /
+        (gesso.typography['base-font-size']|replace({'px': ''}))
       %}
 
       <tr>
-        <td class="gesso-storybook-spacing__cell">{{name|trim}}</td>
-        <td class="gesso-storybook-spacing__cell">{{remValue}}rem</td>
-        <td class="gesso-storybook-spacing__cell">{{unit}}</td>
+        <td class="gesso-storybook-spacing__cell">{{ name|trim }}</td>
+        <td class="gesso-storybook-spacing__cell">{{ remValue }}rem</td>
+        <td class="gesso-storybook-spacing__cell">{{ unit }}</td>
         <td class="gesso-storybook-spacing__cell">
-          <div style="height:{{unit}}; width:{{unit}}; background-color: #ccc;"></div>
+          <div style="height:{{ unit }}; width:{{ unit }}; background-color: var(--border-color);"></div>
         </td>
       </tr>
     {% endfor %}
diff --git a/source/01-global/04-transitions/duration.scss b/source/01-global/04-transitions/duration.scss
index ae0d29501..57270db31 100644
--- a/source/01-global/04-transitions/duration.scss
+++ b/source/01-global/04-transitions/duration.scss
@@ -14,7 +14,7 @@ $duration-swatch: rem(40px);
 }
 
 .gesso-storybook-duration__indicator {
-  background-color: #666;
+  background-color: var(--secondary-text-color);
   border-radius: 50%;
   display: inline-block;
   height: $duration-swatch;
@@ -31,7 +31,6 @@ $duration-swatch: rem(40px);
 }
 
 .gesso-storybook-duration__group {
-  background-color: #eee;
   display: flex;
   flex-wrap: wrap;
   padding: 1rem;
diff --git a/source/01-global/04-transitions/easing.scss b/source/01-global/04-transitions/easing.scss
index 419604e1d..7886faf64 100644
--- a/source/01-global/04-transitions/easing.scss
+++ b/source/01-global/04-transitions/easing.scss
@@ -4,17 +4,12 @@
 
 $easing-swatch: rem(75px);
 
-.gesso-storybook-easing {
-  background-color: #eee;
-  padding: 1rem;
-}
-
 .gesso-storybook-easing__help-text {
   margin-block-end: 1rem;
 }
 
 .gesso-storybook-easing__indicator {
-  background-color: #666;
+  background-color: var(--secondary-text-color);
   border-radius: 10%;
   height: $easing-swatch;
   inset-inline-start: 0;
diff --git a/source/01-global/_index.scss b/source/01-global/_index.scss
index 46633d9d1..cdacfaa2a 100644
--- a/source/01-global/_index.scss
+++ b/source/01-global/_index.scss
@@ -2,5 +2,6 @@ $wysiwyg: false !default;
 
 @use 'fonts/fonts';
 @use 'normalize/normalize';
+@use '00-colors/color-themes';
 @use 'html-elements';
 @use 'extendables';
diff --git a/source/01-global/content-placeholder/content-placeholder.jsx b/source/01-global/content-placeholder/content-placeholder.jsx
index 1a020c642..8295f27e2 100644
--- a/source/01-global/content-placeholder/content-placeholder.jsx
+++ b/source/01-global/content-placeholder/content-placeholder.jsx
@@ -6,9 +6,9 @@ export default function ContentPlaceholder({ children }) {
   return (
     <div
       style={{
-        background: '#333',
-        border: '1px solid #fff',
-        color: '#fff',
+        background: 'var(--secondary-text-color)',
+        border: '1px solid var(--background-color)',
+        color: 'var(--background-color)',
         padding: '1em',
       }}
     >
diff --git a/source/01-global/html-elements/02-body/_body.scss b/source/01-global/html-elements/02-body/_body.scss
index e8e84f9cd..eabf3aeb0 100644
--- a/source/01-global/html-elements/02-body/_body.scss
+++ b/source/01-global/html-elements/02-body/_body.scss
@@ -5,8 +5,8 @@
 // Overflow-x and width properties ensure elements using full bleed techniques
 // (e.g., the layout-full-bleed mixin) do not create horizontal scroll bars.
 body {
-  background-color: gesso-color(background, site);
-  color: gesso-color(text, primary);
+  background-color: var(--background-color);
+  color: var(--text-color);
   margin: 0;
   overflow-x: hidden;
   padding: 0;
diff --git a/source/01-global/html-elements/15-inline-elements/_inline-elements.scss b/source/01-global/html-elements/15-inline-elements/_inline-elements.scss
index c01efb85c..56077e448 100644
--- a/source/01-global/html-elements/15-inline-elements/_inline-elements.scss
+++ b/source/01-global/html-elements/15-inline-elements/_inline-elements.scss
@@ -5,23 +5,23 @@
 a {
   @include focus();
   background-color: transparent;
-  color: gesso-color(text, link);
+  color: var(--link-color);
   -webkit-text-decoration-skip: objects;
   transition-duration: gesso-duration(short);
   transition-property: background-color, border-color, color, outline-color;
   transition-timing-function: gesso-easing(ease-in);
 
   &:visited {
-    color: gesso-color(text, link-visited);
+    color: var(--link-visited-color);
   }
 
   &:hover,
   &:focus {
-    color: gesso-color(text, link-hover);
+    color: var(--link-hover-color);
   }
 
   &:active {
-    color: gesso-color(text, link-active);
+    color: var(--link-active-color);
   }
 
   @media print {
@@ -94,8 +94,8 @@ dfn {
 // kbd {}
 
 mark {
-  background: gesso-color(mark, background);
-  color: gesso-color(mark, text);
+  background: var(--mark-background-color);
+  color: var(--mark-text-color);
 }
 
 // q {}
diff --git a/source/01-global/html-elements/16-blockquote/_blockquote.scss b/source/01-global/html-elements/16-blockquote/_blockquote.scss
index 21ab9eb87..e4c883c52 100644
--- a/source/01-global/html-elements/16-blockquote/_blockquote.scss
+++ b/source/01-global/html-elements/16-blockquote/_blockquote.scss
@@ -2,7 +2,7 @@
 
 @use '00-config' as *;
 
-$blockquote-cite-divider-color: gesso-color(ui, generic, border);
+$blockquote-cite-divider-color: var(--border-color);
 
 blockquote {
   @include display-text-style(blockquote);
diff --git a/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss b/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss
index 0af1c3935..203c20418 100644
--- a/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss
+++ b/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss
@@ -2,7 +2,7 @@
 
 @use '00-config' as *;
 
-$horizontal-rule-color: gesso-color(ui, generic, border);
+$horizontal-rule-color: var(--border-color);
 
 hr {
   border: 1px solid $horizontal-rule-color;
diff --git a/source/01-global/html-elements/24-table/_table.scss b/source/01-global/html-elements/24-table/_table.scss
index c08688f29..ea69324db 100644
--- a/source/01-global/html-elements/24-table/_table.scss
+++ b/source/01-global/html-elements/24-table/_table.scss
@@ -26,6 +26,7 @@ td {
   background-clip: padding-box;
   background-color: gesso-color(table, background);
   border: 1px solid gesso-color(table, border);
+  color: gesso-color(table, text);
   padding: rem(gesso-spacing(2));
 }
 
@@ -34,6 +35,7 @@ tfoot {
   td,
   th {
     background-color: gesso-color(table, background-foot);
+    color: gesso-color(table, text);
   }
 }
 
@@ -42,6 +44,7 @@ th {
   background-clip: padding-box;
   background-color: gesso-color(table, background);
   border: 1px solid gesso-color(table, border);
+  color: gesso-color(table, text);
   padding: rem(gesso-spacing(2));
   text-align: start;
 }
@@ -51,6 +54,7 @@ thead {
   td,
   th {
     background-color: gesso-color(table, background-head);
+    color: gesso-color(table, text);
   }
 
   @media print {
@@ -59,6 +63,9 @@ thead {
 }
 
 tr {
+  background-color: gesso-color(table, background);
+  color: gesso-color(table, text);
+
   @media print {
     page-break-inside: avoid;
   }
diff --git a/source/01-global/normalize/_normalize.scss b/source/01-global/normalize/_normalize.scss
index 637f344a3..7bb702348 100644
--- a/source/01-global/normalize/_normalize.scss
+++ b/source/01-global/normalize/_normalize.scss
@@ -148,13 +148,13 @@ var {
 
 // stylelint-disable-next-line selector-no-vendor-prefix
 ::-moz-selection {
-  background: gesso-color(selection, background);
-  color: gesso-color(selection, text);
+  background: var(--selection-background-color);
+  color: var(--selection-text-color);
   text-shadow: none;
 }
 
 ::selection {
-  background: gesso-color(selection, background);
-  color: gesso-color(selection, text);
+  background: var(--selection-background-color);
+  color: var(--selection-text-color);
   text-shadow: none;
 }
diff --git a/source/03-components/accordion/accordion--step-list.scss b/source/03-components/accordion/accordion--step-list.scss
index 24e832022..7f1a05172 100644
--- a/source/03-components/accordion/accordion--step-list.scss
+++ b/source/03-components/accordion/accordion--step-list.scss
@@ -6,7 +6,7 @@
   counter-reset: step;
 
   .c-accordion-item__number {
-    background-color: gesso-grayscale(gray-2);
+    background-color: var(--secondary-background-color);
     border-radius: 100%;
     display: inline-block;
     font-size: rem(gesso-font-size(4));
diff --git a/source/03-components/accordion/accordion.scss b/source/03-components/accordion/accordion.scss
index 5fececae0..4ff9c78fe 100644
--- a/source/03-components/accordion/accordion.scss
+++ b/source/03-components/accordion/accordion.scss
@@ -2,8 +2,8 @@
 
 @use '00-config' as *;
 
-$accordion-item-border-color: gesso-grayscale(gray-2) !default;
-$accordion-item-icon-color: gesso-color(ui, generic, accent) !default;
+$accordion-item-border-color: var(--secondary-background-color) !default;
+$accordion-item-icon-color: var(--link-color) !default;
 $accordion-item-icon-size: 20px !default;
 $accordion-item-icon-weight: 2px !default;
 
@@ -14,6 +14,8 @@ $accordion-item-icon-weight: 2px !default;
 }
 
 .c-accordion-item__heading {
+  background: var(--background-color);
+  color: var(--text-color);
   font-weight: gesso-font-weight(bold);
   margin: 0;
 }
@@ -95,7 +97,7 @@ $accordion-item-icon-weight: 2px !default;
 }
 
 .c-accordion-item__drawer {
-  background: gesso-grayscale(white);
+  background: var(--background-color);
 }
 
 .c-accordion-item__drawer-inner {
diff --git a/source/03-components/date/_date.scss b/source/03-components/date/_date.scss
index d84ebe14d..2dcf06979 100644
--- a/source/03-components/date/_date.scss
+++ b/source/03-components/date/_date.scss
@@ -3,6 +3,6 @@
 @use '00-config' as *;
 
 .c-date {
-  color: gesso-color(text, secondary);
+  color: var(--secondary-text-color);
   font-size: rem(gesso-font-size(3));
 }
diff --git a/source/03-components/form-item/_form-item.scss b/source/03-components/form-item/_form-item.scss
index 9800b9b61..38ca2ffcc 100644
--- a/source/03-components/form-item/_form-item.scss
+++ b/source/03-components/form-item/_form-item.scss
@@ -55,7 +55,7 @@ $form-text-size: gesso-base-font-size() !default;
 
 .c-form-item__description {
   @extend %disabled-form-styles;
-  color: gesso-color(text, secondary);
+  color: var(--secondary-text-color);
   font-size: rem(gesso-font-size(2));
 
   > :last-child {

From 78a48aed123996d7f73e3303615a77ed74e68978 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Tue, 8 Apr 2025 13:37:15 -0400
Subject: [PATCH 02/17] 953: Update facets to use color themes

---
 source/00-config/config.design-tokens.yml | 16 ++++++++++------
 source/03-components/facet/facet.scss     | 10 +++++-----
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/source/00-config/config.design-tokens.yml b/source/00-config/config.design-tokens.yml
index 2702aa9bd..0540826b5 100644
--- a/source/00-config/config.design-tokens.yml
+++ b/source/00-config/config.design-tokens.yml
@@ -119,12 +119,6 @@ gesso:
         background-hover: grayscale.gray-5
         color: grayscale.white
         color-hover: grayscale.white
-    facet:
-      icon: grayscale.gray-3
-      icon-active: brand.blue.dark-1
-      text: brand.blue.base
-      text-hover: brand.blue.dark
-      text-active: brand.blue.dark-1
     form:
       background: grayscale.gray-1
       background-active: grayscale.white
@@ -212,6 +206,11 @@ gesso:
         button-secondary-text-hover: brand.ocean-blue.dark-1
         button-secondary-text-active: grayscale.gray-7
         button-secondary-text-disabled: grayscale.gray-3
+        facet-icon: grayscale.gray-3
+        facet-icon-active: brand.blue.dark-1
+        facet-text: brand.blue.base
+        facet-text-hover: brand.blue.dark
+        facet-text-active: brand.blue.dark-1
       gray-6:
         # generic
         background: grayscale.gray-6
@@ -254,6 +253,11 @@ gesso:
         button-secondary-text-hover: brand.ocean-blue.dark-1
         button-secondary-text-active: grayscale.gray-7
         button-secondary-text-disabled: grayscale.gray-3
+        facet-icon: grayscale.gray-3
+        facet-icon-active: brand.ocean-blue.base
+        facet-text: brand.ocean-blue.light
+        facet-text-hover: brand.ocean-blue.base
+        facet-text-active: brand.ocean-blue.base
   typography:
     font-family:
       primary:
diff --git a/source/03-components/facet/facet.scss b/source/03-components/facet/facet.scss
index e5e693c2f..4f794188e 100644
--- a/source/03-components/facet/facet.scss
+++ b/source/03-components/facet/facet.scss
@@ -2,11 +2,11 @@
 
 @use '00-config' as *;
 
-$facet-icon-color: gesso-color(facet, icon) !default;
-$facet-icon-active-color: gesso-color(facet, icon-active) !default;
-$facet-text-color: gesso-color(facet, text) !default;
-$facet-text-hover-color: gesso-color(facet, text-hover) !default;
-$facet-text-active-color: gesso-color(facet, text-active) !default;
+$facet-icon-color: var(--facet-icon-color) !default;
+$facet-icon-active-color: var(--facet-icon-active-color) !default;
+$facet-text-color: var(--facet-text-color) !default;
+$facet-text-hover-color: var(--facet-text-hover-color) !default;
+$facet-text-active-color: var(--facet-text-active-color) !default;
 
 .c-facet {
   @include responsive-font-size(3);

From 95ad08bd49b62f7b07e20075bea8644bf77b12af Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Tue, 8 Apr 2025 13:51:46 -0400
Subject: [PATCH 03/17] 953: Update tags to use color themes

---
 source/00-config/config.design-tokens.yml | 6 ++++++
 source/03-components/tag/tag.scss         | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/source/00-config/config.design-tokens.yml b/source/00-config/config.design-tokens.yml
index 0540826b5..25edcc87d 100644
--- a/source/00-config/config.design-tokens.yml
+++ b/source/00-config/config.design-tokens.yml
@@ -211,6 +211,9 @@ gesso:
         facet-text: brand.blue.base
         facet-text-hover: brand.blue.dark
         facet-text-active: brand.blue.dark-1
+        tag-text: brand.blue.dark-1
+        tag-border: brand.blue.light
+        tag-box-shadow: brand.blue.light
       gray-6:
         # generic
         background: grayscale.gray-6
@@ -258,6 +261,9 @@ gesso:
         facet-text: brand.ocean-blue.light
         facet-text-hover: brand.ocean-blue.base
         facet-text-active: brand.ocean-blue.base
+        tag-text: brand.ocean-blue.light
+        tag-border: brand.ocean-blue.light-1
+        tag-box-shadow: brand.ocean-blue.light-1
   typography:
     font-family:
       primary:
diff --git a/source/03-components/tag/tag.scss b/source/03-components/tag/tag.scss
index 21bb74a48..b9d811633 100644
--- a/source/03-components/tag/tag.scss
+++ b/source/03-components/tag/tag.scss
@@ -3,8 +3,8 @@
 @use '00-config' as *;
 
 .c-tag {
-  @include link(gesso-color(ui, generic, accent-dark));
-  border: 2px solid gesso-color(ui, generic, accent-light);
+  @include link(var(--tag-text-color));
+  border: 2px solid var(--tag-border-color);
   border-radius: 70px;
   display: inline-block;
   font-size: rem(gesso-font-size(2));
@@ -18,7 +18,7 @@
 
   &:hover,
   &:focus {
-    box-shadow: 0 0 0 2px gesso-color(ui, generic, accent-light);
+    box-shadow: 0 0 0 2px var(--tag-box-shadow-color);
     outline: 0;
   }
 }

From 9a6a297b0c1bc72ac782c2310f3caf51c561423c Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Tue, 8 Apr 2025 15:12:25 -0400
Subject: [PATCH 04/17] 953: Update sections to use color themes

---
 source/00-config/storybook.global-data.yml    |  1 +
 source/02-layouts/section/_section.scss       |  6 +++++
 source/02-layouts/section/section.stories.jsx | 22 +++++++++++++++++++
 source/02-layouts/section/section.twig        |  2 ++
 source/02-layouts/section/section.yml         |  1 +
 5 files changed, 32 insertions(+)

diff --git a/source/00-config/storybook.global-data.yml b/source/00-config/storybook.global-data.yml
index c999e521c..baaaa4b0e 100644
--- a/source/00-config/storybook.global-data.yml
+++ b/source/00-config/storybook.global-data.yml
@@ -1,5 +1,6 @@
 ---
 storybook: true
+theme: false
 body_class: ''
 html_class: ''
 site_name: 'Site Name'
diff --git a/source/02-layouts/section/_section.scss b/source/02-layouts/section/_section.scss
index 002b047e6..7df0cd0d9 100644
--- a/source/02-layouts/section/_section.scss
+++ b/source/02-layouts/section/_section.scss
@@ -4,4 +4,10 @@
 
 .l-section {
   margin-block-end: rem(gesso-spacing(5));
+
+  &.has-theme {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    padding-block: rem(gesso-spacing(2));
+  }
 }
diff --git a/source/02-layouts/section/section.stories.jsx b/source/02-layouts/section/section.stories.jsx
index 7c855ebd6..1cbfbcd7d 100644
--- a/source/02-layouts/section/section.stories.jsx
+++ b/source/02-layouts/section/section.stories.jsx
@@ -5,6 +5,28 @@ import data from './section.yml';
 
 const settings = {
   title: 'Layouts/Section',
+  argTypes: {
+    theme: {
+      options: [
+        '',
+        'default',
+        'gray-6',
+      ],
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    controls: {
+      include: [
+        'modifier_classes',
+        'theme',
+        'has_constrain',
+        'constrain_modifier_classes',
+        'section_title_element',
+        'section_title',
+      ],
+    },
+  },
 };
 
 const Section = {
diff --git a/source/02-layouts/section/section.twig b/source/02-layouts/section/section.twig
index 3608bdac7..c89b5070b 100644
--- a/source/02-layouts/section/section.twig
+++ b/source/02-layouts/section/section.twig
@@ -1,5 +1,7 @@
 {% set classes = [
   'l-section',
+  theme ? 'theme-' ~ theme : '',
+  theme ? 'has-theme' : '',
   modifier_classes ? modifier_classes : '',
 ]|join(' ')|trim %}
 
diff --git a/source/02-layouts/section/section.yml b/source/02-layouts/section/section.yml
index 84cf74617..356f3d820 100644
--- a/source/02-layouts/section/section.yml
+++ b/source/02-layouts/section/section.yml
@@ -1,4 +1,5 @@
 ---
+theme: false
 section_title_element: 'h2'
 section_title: 'Section title'
 section_content: |-

From bcb9d003406af387eafd274880c610e1090285b6 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Tue, 8 Apr 2025 15:22:57 -0400
Subject: [PATCH 05/17] 953: Update cards to use color themes

---
 source/03-components/card/card.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/03-components/card/card.scss b/source/03-components/card/card.scss
index 388ed7a29..498027f9d 100644
--- a/source/03-components/card/card.scss
+++ b/source/03-components/card/card.scss
@@ -2,10 +2,10 @@
 
 @use '00-config' as *;
 
-$card-accent-border-color: gesso-color(ui, generic, accent) !default;
-$card-link-color: gesso-color(text, on-light) !default;
-$card-link-color-hover: gesso-color(ui, generic, text-dark) !default;
-$card-meta-color: gesso-color(ui, generic, text-dark) !default;
+$card-accent-border-color: var(--accent-color) !default;
+$card-link-color: var(--text-color) !default;
+$card-link-color-hover: var(--secondary-text-color) !default;
+$card-meta-color: var(--secondary-text-color) !default;
 $card-padding: rem(gesso-spacing(3)) !default;
 
 .c-card {

From d34807fc9e5bf2dedde00bc37f26ea708dacec33 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Tue, 8 Apr 2025 17:06:16 -0400
Subject: [PATCH 06/17] 953: Update details to use color themes and more
 closely match accordion styles

---
 source/03-components/details/details.scss | 75 +++++++++--------------
 1 file changed, 29 insertions(+), 46 deletions(-)

diff --git a/source/03-components/details/details.scss b/source/03-components/details/details.scss
index 09fafa7be..272b0daa9 100644
--- a/source/03-components/details/details.scss
+++ b/source/03-components/details/details.scss
@@ -2,71 +2,55 @@
 
 @use '00-config' as *;
 
-$details-background-color: gesso-color(ui, generic, background-light) !default;
-$details-background-color-hover: gesso-color(ui, generic, background) !default;
-$details-content-background-color: gesso-color(background, site) !default;
-$details-padding: rem(24px) !default;
-$details-text-color: gesso-color(text, on-light) !default;
+$details-border-color: var(--secondary-background-color) !default;
+$details-icon-color: var(--link-color) !default;
+$details-icon-size: 24px !default;
+$details-padding: rem(gesso-spacing(2));
 
 .c-details {
+  border-block-end: solid 1px $details-border-color;
   margin-block: 0 rem(gesso-spacing(4));
   margin-inline: 0;
 }
 
 .c-details__summary {
-  @include svg-background(plus);
-  background-color: $details-background-color;
-  background-position: right $details-padding center; // LTR
-  background-repeat: no-repeat;
-  background-size: rem(13px);
+  background: var(--background-color);
+  color: var(--text-color);
   cursor: pointer;
-  display: block;
+  display: flex;
   font-weight: gesso-font-weight(bold);
-  line-height: 1;
-  outline: 0;
-  padding-block: rem(15px);
-  padding-inline: $details-padding rem(55px);
-  transition: background gesso-duration(short) gesso-easing(ease-in-out);
-
-  @if $support-for-rtl {
-    [dir='rtl'] & {
-      background-position: left $details-padding center;
-    }
-  }
-
-  [open] > & {
-    @include svg-background(minus);
-  }
-
-  &:hover {
-    background-color: $details-background-color-hover;
-  }
-
-  &:focus {
-    box-shadow: gesso-box-shadow(2);
-  }
+  gap: 1em;
+  justify-content: space-between;
+  line-height: 1.5;
+  list-style: none;
+  margin: 0;
+  padding: $details-padding;
+  transition: all gesso-duration(short) gesso-easing(ease-out);
 
   &::-webkit-details-marker {
     display: none;
   }
 
-  &::before {
-    display: none; // remove icon added by polyfill
+  &::after {
+    color: $details-icon-color;
+    content: '+';
+    font-family: gesso-font-family(monospace);
+    font-size: $details-icon-size;
+    line-height: 1;
+    text-align: center;
+    width: $details-icon-size;
   }
-}
 
-.c-details__fallback-link {
-  color: inherit !important;
-  display: block;
-  outline: 0;
-  text-decoration: none;
+  [open] > &::after {
+    content: '-';
+  }
 }
 
 .c-details__content {
-  background: $details-content-background-color;
-  border: 3px solid $details-background-color;
-  border-block-start: 0;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: $details-padding;
+  padding-block-start: 0;
 
   > :last-child {
     margin-block-end: 0;
@@ -74,7 +58,6 @@ $details-text-color: gesso-color(text, on-light) !default;
 }
 
 .c-details__description {
-  color: $details-text-color;
   font-size: rem(gesso-font-size(2));
   margin-block-end: rem(gesso-spacing(2));
 }

From 40b914182cf872a5a22628a23de5725a8d571aa9 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Tue, 8 Apr 2025 17:19:26 -0400
Subject: [PATCH 07/17] 953: Update fieldsets to use color themes

---
 source/03-components/fieldset/_fieldset.scss | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/source/03-components/fieldset/_fieldset.scss b/source/03-components/fieldset/_fieldset.scss
index f5dcb0a6a..2d9c332f3 100644
--- a/source/03-components/fieldset/_fieldset.scss
+++ b/source/03-components/fieldset/_fieldset.scss
@@ -3,9 +3,11 @@
 @use '00-config' as *;
 @use '../form-item/form-item' as *;
 
+$fieldset-border-color: var(--secondary-background-color);
 $fieldset-legend-offset: rem(
   gesso-line-height(base) * gesso-base-font-size()
 ) !default;
+$fieldset-legend-text-color: var(--text-color);
 
 .c-fieldset {
   inset-block-start: $fieldset-legend-offset; // Offsets the negative margin of legends.
@@ -36,7 +38,7 @@ $fieldset-legend-offset: rem(
 // .c-fieldset__content {}
 
 .c-fieldset__description {
-  color: gesso-color(text, secondary);
+  color: var(--secondary-text-color);
   font-size: rem(gesso-font-size(2));
 
   > :last-child {
@@ -45,21 +47,21 @@ $fieldset-legend-offset: rem(
 }
 
 .c-fieldset--default {
-  background: #fff;
-  border: 1px solid gesso-color(form, border);
+  background: var(--background-color);
+  border: 1px solid $fieldset-border-color;
   margin: rem(gesso-spacing(2)) 0 rem(gesso-spacing(3)) +
     $fieldset-legend-offset;
   padding: 0 rem(gesso-spacing(2));
 
   .c-fieldset__legend {
-    background: gesso-color(form, border);
-    border: 1px solid gesso-color(form, border);
+    background: $fieldset-border-color;
+    border: 1px solid $fieldset-border-color;
     border-block-end: 0;
-    color: #212121;
+    color: $fieldset-legend-text-color;
     height: 2em;
     line-height: 2;
     padding: 0;
-    text-shadow: 0 1px 0 #fff;
+    text-shadow: 0 1px 0 var(--background-color);
 
     &.is-disabled {
       opacity: $form-disabled-opacity;

From e33bc19424a5cddc4e3a8b9f86805bffabb3a7cf Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Tue, 8 Apr 2025 18:06:04 -0400
Subject: [PATCH 08/17] 953: Update form items to use color themes

---
 source/00-config/config.design-tokens.yml     | 28 ++++++++++++-------
 .../03-components/form-item/_form-item.scss   | 24 +++++++++++++---
 .../_form-item--checkbox.scss                 |  8 +++---
 .../form-item--radio/_form-item--radio.scss   | 10 +++----
 .../form-item--range/_form-item--range.scss   | 15 +++++-----
 5 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/source/00-config/config.design-tokens.yml b/source/00-config/config.design-tokens.yml
index 25edcc87d..6b88493ba 100644
--- a/source/00-config/config.design-tokens.yml
+++ b/source/00-config/config.design-tokens.yml
@@ -119,16 +119,6 @@ gesso:
         background-hover: grayscale.gray-5
         color: grayscale.white
         color-hover: grayscale.white
-    form:
-      background: grayscale.gray-1
-      background-active: grayscale.white
-      background-checked: brand.blue.base
-      background-unchecked: grayscale.white
-      border: grayscale.gray-2
-      border-dark: grayscale.gray-5
-      border-light: grayscale.gray-1
-      thumb: grayscale.gray-5
-      track: grayscale.gray-3
     table:
       border: grayscale.gray-5
       background: grayscale.white
@@ -211,6 +201,15 @@ gesso:
         facet-text: brand.blue.base
         facet-text-hover: brand.blue.dark
         facet-text-active: brand.blue.dark-1
+        form-background: grayscale.gray-1
+        form-background-active: grayscale.white
+        form-background-checked: brand.blue.base
+        form-background-unchecked: grayscale.white
+        form-border: grayscale.gray-2
+        form-border-dark: grayscale.gray-5
+        form-border-light: grayscale.gray-1
+        form-thumb: grayscale.gray-5
+        form-track: grayscale.gray-3
         tag-text: brand.blue.dark-1
         tag-border: brand.blue.light
         tag-box-shadow: brand.blue.light
@@ -261,6 +260,15 @@ gesso:
         facet-text: brand.ocean-blue.light
         facet-text-hover: brand.ocean-blue.base
         facet-text-active: brand.ocean-blue.base
+        form-background: grayscale.gray-1
+        form-background-active: grayscale.white
+        form-background-checked: brand.blue.base
+        form-background-unchecked: grayscale.gray-6
+        form-border: grayscale.gray-4
+        form-border-dark: grayscale.gray-2
+        form-border-light: grayscale.gray-5
+        form-thumb: grayscale.gray-2
+        form-track: grayscale.gray-3
         tag-text: brand.ocean-blue.light
         tag-border: brand.ocean-blue.light-1
         tag-box-shadow: brand.ocean-blue.light-1
diff --git a/source/03-components/form-item/_form-item.scss b/source/03-components/form-item/_form-item.scss
index 38ca2ffcc..ef06eecb4 100644
--- a/source/03-components/form-item/_form-item.scss
+++ b/source/03-components/form-item/_form-item.scss
@@ -3,10 +3,10 @@
 @use 'sass:math';
 @use '00-config' as *;
 
-$form-background-color: gesso-color(form, background) !default;
-$form-background-color-focus: gesso-color(form, background-active) !default;
-$form-border-color: gesso-color(form, border) !default;
-$form-border-color-focus: gesso-color(form, border-dark) !default;
+$form-background-color: var(--form-background-color) !default;
+$form-background-color-focus: var(--form-background-active-color) !default;
+$form-border-color: var(--form-border-color) !default;
+$form-border-color-focus: var(--form-border-dark-color) !default;
 $form-box-shadow-focus: gesso-box-shadow(2) !default;
 $form-disabled-opacity: 0.35 !default;
 $form-text-size: gesso-base-font-size() !default;
@@ -129,6 +129,22 @@ $form-text-size: gesso-base-font-size() !default;
   }
 }
 
+.c-form-item__file {
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    background-color: transparent;
+  }
+
+  &:disabled {
+    &:hover,
+    &:focus {
+      background-color: transparent;
+    }
+  }
+}
+
 .c-form-item__textarea {
   height: auto;
 }
diff --git a/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss b/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss
index e24b48076..25339f650 100644
--- a/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss
+++ b/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss
@@ -20,8 +20,8 @@
 
       &::before {
         @include focus();
-        background: gesso-color(form, background-unchecked);
-        border: 1px solid gesso-color(form, border-dark);
+        background: var(--form-background-unchecked-color);
+        border: 1px solid var(--form-border-dark-color);
         content: '\a0';
         display: inline-block;
         height: rem(20px);
@@ -40,14 +40,14 @@
 
     &:checked + .c-form-item__label::before {
       @include svg-background(correct);
-      background-color: gesso-color(form, background-checked);
+      background-color: var(--form-background-checked-color);
       background-position: 50%;
       background-repeat: no-repeat;
       background-size: rem(20px);
     }
 
     &:focus + .c-form-item__label::before {
-      outline-color: gesso-color(ui, generic, focus);
+      outline-color: var(--focus-color);
     }
 
     &:disabled + .c-form-item__label {
diff --git a/source/03-components/form-item/form-item--radio/_form-item--radio.scss b/source/03-components/form-item/form-item--radio/_form-item--radio.scss
index a66609308..8b74849a9 100644
--- a/source/03-components/form-item/form-item--radio/_form-item--radio.scss
+++ b/source/03-components/form-item/form-item--radio/_form-item--radio.scss
@@ -11,8 +11,8 @@
   .c-form-item__radio {
     @include focus();
     appearance: none;
-    background-color: gesso-color(form, background-unchecked);
-    border: 1px solid gesso-color(form, border-dark);
+    background-color: var(--form-background-unchecked-color);
+    border: 1px solid var(--form-border-dark-color);
     border-radius: 50%;
     box-shadow: 0 0 0 2px transparent;
     cursor: pointer;
@@ -26,9 +26,9 @@
     width: 18px;
 
     &:checked {
-      background-color: gesso-color(form, background-checked);
-      border: 2px solid gesso-color(form, background-unchecked);
-      box-shadow: 0 0 0 2px gesso-color(form, background-checked);
+      background-color: var(--form-background-checked-color);
+      border: 2px solid var(--form-background-unchecked-color);
+      box-shadow: 0 0 0 2px var(--focus-color);
     }
 
     &:disabled {
diff --git a/source/03-components/form-item/form-item--range/_form-item--range.scss b/source/03-components/form-item/form-item--range/_form-item--range.scss
index ea1fd50cf..72f500c2e 100644
--- a/source/03-components/form-item/form-item--range/_form-item--range.scss
+++ b/source/03-components/form-item/form-item--range/_form-item--range.scss
@@ -13,8 +13,8 @@ $form-range-track-height: 10px !default;
 
 @mixin c-form-item__range-thumb {
   @include focus();
-  background: gesso-color(form, thumb);
-  border: $form-range-thumb-border-width solid gesso-color(form, border-light);
+  background: var(--form-thumb-color);
+  border: $form-range-thumb-border-width solid var(--form-border-light-color);
   border-radius: $form-range-thumb-border-radius;
   cursor: pointer;
   height: rem($form-range-thumb-height);
@@ -24,12 +24,12 @@ $form-range-track-height: 10px !default;
 }
 
 @mixin c-form-item__range-thumb-focus {
-  outline-color: gesso-color(ui, generic, focus);
+  outline-color: var(--focus-color);
 }
 
 @mixin c-form-item__range-track {
-  background: gesso-color(form, track);
-  border: $form-range-track-border-width solid gesso-color(form, border-dark);
+  background: var(--form-track-color);
+  border: $form-range-track-border-width solid var(--form-border-dark-color);
   cursor: pointer;
   display: block;
   height: rem($form-range-track-height);
@@ -96,9 +96,8 @@ $form-range-track-height: 10px !default;
 
     &::-ms-fill-lower,
     &::-ms-fill-upper {
-      background: gesso-color(form, track);
-      border: $form-range-track-border-width solid
-        gesso-color(form, border-dark);
+      background: var(--form-track-color);
+      border: $form-range-track-border-width solid var(--form-border-dark-color);
     }
 
     &::-webkit-slider-thumb {

From d113087f202f116b7c105c0bf0dca0d75eae666e Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Tue, 8 Apr 2025 20:34:32 -0400
Subject: [PATCH 09/17] 953: Update menus to use color themes

---
 source/00-config/mixins/_link.scss            |  7 +++-
 .../dropdown-menu/dropdown-menu.scss          |  6 +++-
 source/03-components/mega-menu/mega-menu.scss | 35 +++++++------------
 .../mobile-menu/mobile-menu.scss              | 29 +++++----------
 .../overlay-menu/overlay-menu.scss            |  7 ++--
 source/03-components/side-menu/side-menu.scss | 10 +++---
 6 files changed, 42 insertions(+), 52 deletions(-)

diff --git a/source/00-config/mixins/_link.scss b/source/00-config/mixins/_link.scss
index 235114501..d1ec847cb 100644
--- a/source/00-config/mixins/_link.scss
+++ b/source/00-config/mixins/_link.scss
@@ -1,6 +1,11 @@
 // Mixins: Link
 
-@mixin link($link, $hover: $link, $active: $hover, $visit: $link) {
+@mixin link(
+  $link: var(--link-color),
+  $hover: $link,
+  $active: $hover,
+  $visit: $link
+) {
   color: $link;
 
   &:visited {
diff --git a/source/03-components/dropdown-menu/dropdown-menu.scss b/source/03-components/dropdown-menu/dropdown-menu.scss
index 1891c7b1d..376a7ebbd 100644
--- a/source/03-components/dropdown-menu/dropdown-menu.scss
+++ b/source/03-components/dropdown-menu/dropdown-menu.scss
@@ -42,7 +42,11 @@
 
     > button.c-dropdown-menu__link {
       @include text-button;
-      @include link(gesso-color(text, link), gesso-color(text, link-hover));
+      @include link(
+        var(--link-color),
+        var(--link-hover-color),
+        var(--link-active-color)
+      );
     }
   }
 }
diff --git a/source/03-components/mega-menu/mega-menu.scss b/source/03-components/mega-menu/mega-menu.scss
index e34d3ab8b..6b857107a 100644
--- a/source/03-components/mega-menu/mega-menu.scss
+++ b/source/03-components/mega-menu/mega-menu.scss
@@ -7,14 +7,14 @@
 // the element(s) above it need a background color and
 // z-index in order to cover the mega menu.
 .l-header {
-  background: gesso-color('background', 'site');
+  background: var(--background-color);
   position: relative;
   z-index: 2;
 }
 
 .c-mega-menu {
   align-items: center;
-  background: gesso-color('background', 'site');
+  background: var(--background-color);
   display: flex;
   margin-block: 0 rem(gesso-spacing(2.5));
   margin-inline: 0;
@@ -23,7 +23,7 @@
   z-index: 1;
 
   &::after {
-    background-color: gesso-color(background, site);
+    background-color: var(--background-color);
     content: '';
     display: block;
     height: 100%;
@@ -35,13 +35,16 @@
   }
 
   > .c-mega-menu__item {
-    border-block-end: 1px solid gesso-grayscale(white);
     list-style-type: none;
     padding-block: 1.25rem;
     padding-inline: 0.8125rem 1.8125rem;
 
     > .c-mega-menu__link {
-      @include link(gesso-color(text, link), gesso-color(text, link-hover));
+      @include link(
+        var(--link-color),
+        var(--link-hover-color),
+        var(--link-active-color)
+      );
       border-block-end: rem(2px) solid transparent;
       border-radius: rem(1px);
       display: block;
@@ -51,6 +54,7 @@
       padding-inline: 0;
       position: relative;
       text-align: start;
+      text-decoration: none;
       transition: all 0.4s ease;
       width: auto;
       z-index: gesso-z-index(drawer) + 1;
@@ -72,8 +76,9 @@
 }
 
 .c-mega-menu__section {
-  background-color: gesso-color(ui, generic, background-dark);
-  color: gesso-color(text, on-dark);
+  @include color-theme(gray-6);
+  background-color: var(--background-color);
+  color: var(--text-color);
   inset-block-start: 100%;
   inset-inline-start: 0;
   margin-block: 0;
@@ -85,13 +90,6 @@
   width: 100%;
   z-index: 0;
 
-  a,
-  button {
-    &:focus {
-      @include focus(gesso-color(text, on-dark));
-    }
-  }
-
   &[hidden] {
     display: block;
     transform: translate3d(0, -100%, 0);
@@ -115,7 +113,6 @@
 
 .c-mega-menu__section-close {
   @include text-button;
-  color: gesso-color(text, on-dark);
   height: rem(50px);
   inset-block-start: rem(10px);
   inset-inline-end: rem(10px);
@@ -135,7 +132,6 @@
 }
 
 .c-mega-menu__section-title {
-  color: gesso-color(text, on-dark);
   display: block;
   font-size: rem(gesso-font-size(13));
 }
@@ -209,19 +205,16 @@
 }
 
 .c-mega-menu__subnav .c-mega-menu__subnav .c-mega-menu__link {
-  color: gesso-brand(blue, light-1);
   font-size: rem(gesso-font-size(2));
   font-weight: gesso-font-weight(semibold);
   line-height: gesso-line-height(short);
   text-transform: none;
 
   &:hover {
-    color: gesso-grayscale(white);
     opacity: 1;
   }
 
   &:focus-visible {
-    color: gesso-grayscale(white);
     opacity: 1;
   }
 }
@@ -235,10 +228,6 @@
 // stylelint-enable selector-max-compound-selectors
 
 @include breakpoint-max(gesso-breakpoint(mobile-menu)) {
-  .c-mega-menu__section {
-    background-color: rgba(gesso-color(ui, generic, background-lighter), 0.98);
-  }
-
   .c-mega-menu__section-title,
   .c-mega-menu__section-close {
     display: none;
diff --git a/source/03-components/mobile-menu/mobile-menu.scss b/source/03-components/mobile-menu/mobile-menu.scss
index 97cd5f3d7..d36274ac6 100644
--- a/source/03-components/mobile-menu/mobile-menu.scss
+++ b/source/03-components/mobile-menu/mobile-menu.scss
@@ -4,34 +4,23 @@
 @use 'sass:math';
 @use '00-config' as *;
 
-$mobile-menu-bg-color: rgba(
-  gesso-color(ui, generic, background-light),
-  0.98
-) !default;
-$mobile-menu-link-color: gesso-color(ui, generic, text-dark) !default;
-$mobile-menu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
-$mobile-menu-submenu-fallback-bg-color: gesso-color(
-  ui,
-  generic,
-  background-lighter
-) !default;
-$mobile-menu-submenu-bg-color: rgba(
-  gesso-color(ui, generic, background-lighter),
-  0.98
-) !default;
-$mobile-menu-submenu-link-color: gesso-color(ui, generic, text-dark) !default;
-$mobile-menu-submenu-link-hover-color: gesso-color(
-  ui,
-  generic,
-  text-darker
+$mobile-menu-bg-color: rgb(
+  from var(--secondary-background-color) r g b / 0.98
 ) !default;
+$mobile-menu-link-color: var(--secondary-text-color) !default;
+$mobile-menu-link-hover-color: var(--text-color) !default;
+$mobile-menu-submenu-bg-color: $mobile-menu-bg-color !default;
+$mobile-menu-submenu-link-color: var(--secondary-text-color) !default;
+$mobile-menu-submenu-link-hover-color: var(--text-color) !default;
 $mobile-menu-button-height: 54px;
 $mobile-menu-button-width: 44px;
 $mobile-menu-font-size: gesso-font-size(5);
 $mobile-menu-line-height: gesso-line-height(base);
 
 .c-mobile-menu {
+  @include color-theme(default);
   background-color: $mobile-menu-bg-color;
+  color: var(--text-color);
   display: none;
   inset-block-start: 0;
   inset-inline-start: 0;
diff --git a/source/03-components/overlay-menu/overlay-menu.scss b/source/03-components/overlay-menu/overlay-menu.scss
index c37cecc0b..6a09d88e0 100644
--- a/source/03-components/overlay-menu/overlay-menu.scss
+++ b/source/03-components/overlay-menu/overlay-menu.scss
@@ -3,9 +3,8 @@
 
 @use '00-config' as *;
 
-$overlay-menu-bg-color: rgba(
-  gesso-color(ui, generic, background-light),
-  0.98
+$overlay-menu-bg-color: rgb(
+  from var(--secondary-background-color) r g b / 0.98
 ) !default;
 
 .c-overlay-menu {
@@ -20,7 +19,9 @@ $overlay-menu-bg-color: rgba(
   z-index: -1;
 
   &.is-open {
+    @include color-theme(default);
     background-color: $overlay-menu-bg-color;
+    color: var(--text-color);
     height: 100vh;
     overflow-y: auto;
     width: 100%;
diff --git a/source/03-components/side-menu/side-menu.scss b/source/03-components/side-menu/side-menu.scss
index 4607e34c5..c06bc2de2 100644
--- a/source/03-components/side-menu/side-menu.scss
+++ b/source/03-components/side-menu/side-menu.scss
@@ -3,10 +3,12 @@
 
 @use '00-config' as *;
 
-$side-menu-bg-color: gesso-color(ui, generic, background-light);
+$side-menu-bg-color: var(--secondary-background-color);
 
 .c-side-menu {
-  background: $side-menu-bg-color;
+  @include color-theme(default);
+  background-color: $side-menu-bg-color;
+  color: var(--text-color);
   font-size: rem(gesso-font-size(5));
   height: 100vh;
   inset-block-start: 0;
@@ -83,7 +85,7 @@ $side-menu-bg-color: gesso-color(ui, generic, background-light);
 
 .c-side-menu__back {
   @include text-button;
-  color: gesso-color(text, link);
+  color: var(--link-color);
 
   &::before {
     @include svg-background(mobile-arrow-down);
@@ -100,7 +102,7 @@ $side-menu-bg-color: gesso-color(ui, generic, background-light);
 
   &:hover,
   &:focus {
-    color: gesso-color(text, link-hover);
+    color: var(--link-hover-color);
   }
 }
 

From 19cff9bfef74a3f5146f9c1e1a2d31213e1c8f68 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Tue, 8 Apr 2025 20:48:15 -0400
Subject: [PATCH 10/17] 953: Update modals to use color themes

---
 source/03-components/modal/modal.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/source/03-components/modal/modal.scss b/source/03-components/modal/modal.scss
index 89786472a..0a9ee648d 100644
--- a/source/03-components/modal/modal.scss
+++ b/source/03-components/modal/modal.scss
@@ -52,6 +52,9 @@
 }
 
 .c-modal__inner {
+  @include color-theme(default);
+  background-color: var(--background-color);
+  color: var(--text-color);
   padding-block: rem(gesso-spacing(5));
   padding-inline: rem(gesso-spacing(5));
 }

From 3821921bdbd6de0e19b8414a11d311cb165fc617 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Wed, 9 Apr 2025 09:27:09 -0400
Subject: [PATCH 11/17] 953: Update pager to use color themes

---
 source/00-config/config.design-tokens.yml     |  8 ++++++++
 source/01-global/00-colors/themes.stories.jsx |  2 ++
 source/03-components/pager/pager.scss         | 18 +++++++++---------
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/source/00-config/config.design-tokens.yml b/source/00-config/config.design-tokens.yml
index 6b88493ba..1d686dda2 100644
--- a/source/00-config/config.design-tokens.yml
+++ b/source/00-config/config.design-tokens.yml
@@ -167,6 +167,10 @@ gesso:
         link-hover: brand.blue.dark
         link-active: brand.blue.dark
         link-visited: brand.blue.dark
+        secondary-link: brand.blue.dark
+        secondary-link-hover: brand.blue.base
+        secondary-link-active: brand.blue.dark-1
+        secondary-link-visited: brand.blue.dark
         mark-background: other.yellow-neon.base
         mark-text: grayscale.gray-7
         selection-background: brand.blue.base
@@ -226,6 +230,10 @@ gesso:
         link-hover: brand.ocean-blue.base
         link-active: brand.ocean-blue.base
         link-visited: brand.ocean-blue.base
+        secondary-link: brand.ocean-blue.light
+        secondary-link-hover: brand.ocean-blue.base
+        secondary-link-active: brand.ocean-blue.base
+        secondary-link-visited: brand.ocean-blue.base
         mark-background: other.yellow-neon.base
         mark-text: grayscale.gray-7
         selection-background: brand.blue.base
diff --git a/source/01-global/00-colors/themes.stories.jsx b/source/01-global/00-colors/themes.stories.jsx
index e33144dc7..3fab4293e 100644
--- a/source/01-global/00-colors/themes.stories.jsx
+++ b/source/01-global/00-colors/themes.stories.jsx
@@ -15,6 +15,7 @@ import {
 import { FacetList } from '../../03-components/facet-list/facet-list.stories';
 import { Text as FormItem } from '../../03-components/form-item/form-item--textfield/form-item--textfield.stories';
 import { PageTitle } from '../../03-components/page-title/page-title.stories';
+import { Default as Pager } from '../../03-components/pager/pager.stories';
 import { TagList } from '../../03-components/tag-list/tag-list.stories';
 import { WYSIWYG } from '../../03-components/wysiwyg/wysiwyg.stories';
 
@@ -92,6 +93,7 @@ const demoContent = `
   </p>
 
   ${ReactDOMServer.renderToStaticMarkup(FacetList.render(FacetList.args))}
+  ${ReactDOMServer.renderToStaticMarkup(Pager.render(Pager.args))}
 
   <hr>
 
diff --git a/source/03-components/pager/pager.scss b/source/03-components/pager/pager.scss
index e2bf80f69..0bf4e0d22 100644
--- a/source/03-components/pager/pager.scss
+++ b/source/03-components/pager/pager.scss
@@ -2,11 +2,11 @@
 
 @use '00-config' as *;
 
-$pager-background-color: gesso-color(ui, generic, accent) !default;
-$pager-background-color-hover: gesso-color(ui, generic, accent) !default;
-$pager-background-color-active: gesso-color(ui, generic, accent-dark) !default;
-$pager-link-color: gesso-color(text, on-light) !default;
-$pager-link-color-active: gesso-color(text, on-dark) !default;
+$pager-background-color: var(--secondary-link-color) !default;
+$pager-background-color-hover: var(--secondary-link-color) !default;
+$pager-background-color-active: var(--secondary-link-color) !default;
+$pager-link-color: var(--secondary-link-color) !default;
+$pager-link-color-active: var(--background-color) !default;
 $pager-ellipsis-bp: 800px !default;
 $pager-bp: 600px !default;
 
@@ -87,22 +87,22 @@ $pager-bp: 600px !default;
 .c-pager__link--next,
 .c-pager__link--last {
   background-color: transparent;
-  color: gesso-color(text, link);
+  color: var(--link-color);
 
   &:visited {
-    color: gesso-color(text, link);
+    color: var(--link-color);
   }
 
   &:hover,
   &:focus {
     background-color: transparent;
-    color: gesso-color(text, link-hover);
+    color: var(--link-hover-color);
     text-decoration: underline;
   }
 
   &:active {
     background-color: transparent;
-    color: gesso-color(text, link-active);
+    color: var(--link-active-color);
     text-decoration: underline;
   }
 }

From 71d89681af2bdddf4729b4f59b391e9cfe5e65e8 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Wed, 9 Apr 2025 09:27:59 -0400
Subject: [PATCH 12/17] 953: Update progress to use color themes

---
 source/03-components/progress/progress.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/03-components/progress/progress.scss b/source/03-components/progress/progress.scss
index 7aaaf99e1..86d7f3f8c 100644
--- a/source/03-components/progress/progress.scss
+++ b/source/03-components/progress/progress.scss
@@ -3,11 +3,11 @@
 
 @use '00-config' as *;
 
-$progress-background-color: gesso-color(ui, generic, background) !default;
-$progress-bar-color: gesso-color(ui, generic, accent) !default;
-$progress-border-color: gesso-color(ui, generic, border-dark) !default;
+$progress-background-color: var(--secondary-background-color) !default;
+$progress-bar-color: var(--accent-color) !default;
+$progress-border-color: var(--border-color) !default;
 $progress-border-radius: rem(3px) !default;
-$progress-text-color: gesso-color(text, on-light) !default;
+$progress-text-color: var(--text-color) !default;
 
 .c-progress {
   position: relative;

From 5ce0c843601088b6edac55c10cfe5ff428bde9b4 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Wed, 9 Apr 2025 09:28:32 -0400
Subject: [PATCH 13/17] 953: Update read more link to use color themes

---
 .../read-more-link/read-more-link.scss        | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/source/03-components/read-more-link/read-more-link.scss b/source/03-components/read-more-link/read-more-link.scss
index 1012c78cb..d9d40a4ec 100644
--- a/source/03-components/read-more-link/read-more-link.scss
+++ b/source/03-components/read-more-link/read-more-link.scss
@@ -4,27 +4,7 @@
 @use '01-global/extendables' as *;
 
 .c-read-more-link {
-  padding-inline-end: 28px;
   text-decoration: none;
-
-  &:hover,
-  &:focus {
-    path {
-      fill: gesso-color(text, link-hover);
-    }
-  }
-}
-
-.c-read-more-link__icon {
-  display: inline-block;
-  inset-block-start: 8px;
-  margin-inline-end: -28px;
-  position: relative;
-  width: 28px;
-
-  path {
-    fill: gesso-color(text, link);
-  }
 }
 
 .c-read-more-link__accessibility-description {

From 5791a2ea618424b2805d58871bf5149f36914e2e Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Wed, 9 Apr 2025 10:21:15 -0400
Subject: [PATCH 14/17] 953: Update buttons to use color themes

---
 source/00-config/config.design-tokens.yml | 22 --------------------
 source/03-components/button/_button.scss  | 25 +++++++++++++++++------
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/source/00-config/config.design-tokens.yml b/source/00-config/config.design-tokens.yml
index 1d686dda2..d4359d979 100644
--- a/source/00-config/config.design-tokens.yml
+++ b/source/00-config/config.design-tokens.yml
@@ -74,24 +74,6 @@ gesso:
     background:
       site: grayscale.white
     button:
-      primary:
-        background: brand.blue.base
-        background-hover: brand.blue.dark
-        background-active: brand.blue.dark-1
-        border: brand.blue.base
-        border-hover: brand.blue.dark
-        text: grayscale.white
-        text-hover: grayscale.white
-        text-active: grayscale.white
-      secondary:
-        background: brand.ocean-blue.light-1
-        background-hover: brand.ocean-blue.light
-        background-active: brand.ocean-blue.base
-        border: brand.ocean-blue.light-1
-        border-hover: brand.ocean-blue.light
-        text: brand.ocean-blue.dark-1
-        text-hover: brand.ocean-blue.dark-1
-        text-active: grayscale.gray-7
       base:
         background: grayscale.gray-4
         background-hover: grayscale.gray-5
@@ -101,10 +83,6 @@ gesso:
         text: grayscale.white
         text-hover: grayscale.white
         text-active: grayscale.white
-      disabled:
-        background: grayscale.gray-1
-        border: grayscale.gray-1
-        text: grayscale.gray-3
       danger:
         background: other.red.base
         background-hover: other.red.dark
diff --git a/source/03-components/button/_button.scss b/source/03-components/button/_button.scss
index c2af64f69..122cafe7a 100644
--- a/source/03-components/button/_button.scss
+++ b/source/03-components/button/_button.scss
@@ -62,19 +62,32 @@ $button-spacing: rem(gesso-spacing(1));
 
 // This custom button class, included as an example, is not output by Drupal by default.
 .c-button--secondary {
-  background-color: gesso-color(button, secondary, background);
-  color: gesso-color(button, secondary, text);
+  background-color: var(--button-secondary-background-color);
+  border-color: var(--button-secondary-border-color);
+  color: var(--button-secondary-text-color);
+
+  &:visited {
+    color: var(--button-secondary-text-color);
+  }
 
   &:hover,
   &:focus {
-    background-color: gesso-color(button, secondary, background-hover);
-    color: gesso-color(button, secondary, text-hover);
+    background-color: var(--button-secondary-background-hover-color);
+    border-color: var(--button-secondary-border-hover-color);
+    color: var(--button-secondary-text-hover-color);
   }
 
   &:active,
   &.is-active {
-    background-color: gesso-color(button, secondary, background-active);
-    color: gesso-color(button, secondary, text-active);
+    background-color: var(--button-secondary-background-active-color);
+    border-color: var(--button-secondary-border-active-color);
+    color: var(--button-secondary-text-active-color);
+  }
+
+  &[disabled] {
+    background-color: var(--button-secondary-background-disabled-color);
+    border-color: var(--button-secondary-border-disabled-color);
+    color: var(--button-secondary-text-disabled-color);
   }
 }
 

From b0b892ddf0c73c8b17d83683f429629095327aff Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Wed, 9 Apr 2025 10:41:27 -0400
Subject: [PATCH 15/17] 953: Add gesso prefix to custom properties

---
 source/00-config/config.design-tokens.yml     | 46 +++++++++----------
 source/00-config/mixins/_button.scss          | 30 +++++++-----
 source/00-config/mixins/_color-theme.scss     |  2 +-
 source/00-config/mixins/_focus.scss           |  2 +-
 source/00-config/mixins/_layout.scss          |  4 +-
 source/00-config/mixins/_link.scss            |  2 +-
 source/00-config/mixins/_list.scss            |  4 +-
 source/01-global/00-colors/palette.scss       |  4 +-
 source/01-global/00-colors/themes.scss        |  8 ++--
 source/01-global/01-typography/fonts.scss     |  8 ++--
 source/01-global/02-spacing/space.twig        |  2 +-
 source/01-global/04-transitions/duration.scss |  2 +-
 source/01-global/04-transitions/easing.scss   |  2 +-
 .../content-placeholder.jsx                   |  6 +--
 .../00-universal/_universal.scss              |  2 +-
 .../html-elements/02-body/_body.scss          |  4 +-
 .../15-inline-elements/_inline-elements.scss  | 12 ++---
 .../16-blockquote/_blockquote.scss            |  2 +-
 .../18-horizontal-rule/_horizontal-rule.scss  |  2 +-
 source/01-global/normalize/_normalize.scss    |  8 ++--
 source/02-layouts/section/_section.scss       |  4 +-
 .../accordion/accordion--step-list.scss       |  2 +-
 source/03-components/accordion/accordion.scss | 10 ++--
 source/03-components/button/_button.scss      | 26 +++++------
 source/03-components/card/card.scss           |  8 ++--
 source/03-components/date/_date.scss          |  2 +-
 source/03-components/details/details.scss     | 12 ++---
 .../dropdown-menu/dropdown-menu.scss          |  6 +--
 source/03-components/facet/facet.scss         | 10 ++--
 source/03-components/fieldset/_fieldset.scss  | 10 ++--
 .../03-components/form-item/_form-item.scss   | 12 +++--
 .../_form-item--checkbox.scss                 |  8 ++--
 .../form-item--radio/_form-item--radio.scss   | 10 ++--
 .../form-item--range/_form-item--range.scss   | 17 ++++---
 source/03-components/mega-menu/mega-menu.scss | 16 +++----
 .../mobile-menu/mobile-menu.scss              | 12 ++---
 source/03-components/modal/modal.scss         |  4 +-
 .../overlay-menu/overlay-menu.scss            |  4 +-
 source/03-components/pager/pager.scss         | 18 ++++----
 source/03-components/progress/progress.scss   |  8 ++--
 source/03-components/side-menu/side-menu.scss |  8 ++--
 source/03-components/table/_table.scss        |  2 +-
 source/03-components/tag/tag.scss             |  6 +--
 .../06-utility/_setScrollbarProperty.es6.js   |  2 +-
 44 files changed, 190 insertions(+), 179 deletions(-)

diff --git a/source/00-config/config.design-tokens.yml b/source/00-config/config.design-tokens.yml
index d4359d979..a25f95610 100644
--- a/source/00-config/config.design-tokens.yml
+++ b/source/00-config/config.design-tokens.yml
@@ -135,9 +135,9 @@ gesso:
       default:
         # generic
         background: grayscale.white
-        secondary-background: grayscale.gray-2
+        background-secondary: grayscale.gray-2
         text: grayscale.gray-7
-        secondary-text: grayscale.gray-5
+        text-secondary: grayscale.gray-5
         accent: brand.blue.base
         border: grayscale.gray-3
         focus: brand.blue.light
@@ -145,10 +145,10 @@ gesso:
         link-hover: brand.blue.dark
         link-active: brand.blue.dark
         link-visited: brand.blue.dark
-        secondary-link: brand.blue.dark
-        secondary-link-hover: brand.blue.base
-        secondary-link-active: brand.blue.dark-1
-        secondary-link-visited: brand.blue.dark
+        link-secondary: brand.blue.dark
+        link-secondary-hover: brand.blue.base
+        link-secondary-active: brand.blue.dark-1
+        link-secondary-visited: brand.blue.dark
         mark-background: other.yellow-neon.base
         mark-text: grayscale.gray-7
         selection-background: brand.blue.base
@@ -198,9 +198,9 @@ gesso:
       gray-6:
         # generic
         background: grayscale.gray-6
-        secondary-background: grayscale.gray-4
+        background-secondary: grayscale.gray-4
         text: grayscale.white
-        secondary-text: grayscale.gray-2
+        text-secondary: grayscale.gray-2
         accent: brand.blue.light-1
         border: grayscale.gray-3
         focus: brand.ocean-blue.light-1
@@ -208,10 +208,10 @@ gesso:
         link-hover: brand.ocean-blue.base
         link-active: brand.ocean-blue.base
         link-visited: brand.ocean-blue.base
-        secondary-link: brand.ocean-blue.light
-        secondary-link-hover: brand.ocean-blue.base
-        secondary-link-active: brand.ocean-blue.base
-        secondary-link-visited: brand.ocean-blue.base
+        link-secondary: brand.ocean-blue.light
+        link-secondary-hover: brand.ocean-blue.base
+        link-secondary-active: brand.ocean-blue.base
+        link-secondary-visited: brand.ocean-blue.base
         mark-background: other.yellow-neon.base
         mark-text: grayscale.gray-7
         selection-background: brand.blue.base
@@ -369,43 +369,43 @@ gesso:
       tallest: 2
     display:
       display:
-        color: 'var(--text-color)'
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 15
       h1:
-        color: 'var(--text-color)'
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 12
       h2:
-        color: 'var(--text-color)'
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 10
       h3:
-        color: 'var(--text-color)'
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 8
       h4:
-        color: 'var(--text-color)'
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: base
         responsive-font-size: 7
       h5:
-        color: 'var(--text-color)'
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: base
         responsive-font-size: 3
       h6:
-        color: 'var(--text-color)'
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: semibold
         letter-spacing: tight
@@ -413,25 +413,25 @@ gesso:
         text-transform: uppercase
         responsive-font-size: 2
       blockquote:
-        color: 'var(--link-color)'
+        color: 'var(--gesso-link-color)'
         font-family: primary.stack
         font-size: 7
         font-weight: regular
         line-height: base
       body:
-        color: 'var(--text-color)'
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-size: 3
         font-weight: regular
         line-height: base
       body-large:
-        color: 'var(--text-color)'
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-size: 5
         font-weight: regular
         line-height: base
       cite:
-        color: 'var(--secondary-text-color)'
+        color: 'var(--gesso-text-secondary-color)'
         font-family: primary.stack
         font-size: 2
         font-style: normal
diff --git a/source/00-config/mixins/_button.scss b/source/00-config/mixins/_button.scss
index 8b79fb99b..344325208 100644
--- a/source/00-config/mixins/_button.scss
+++ b/source/00-config/mixins/_button.scss
@@ -6,20 +6,26 @@
 
 $button-border-width: 0 !default;
 $button-border-radius: 0 !default;
-$button-background-color: var(--button-primary-background-color);
-$button-background-color-hover: var(--button-primary-background-hover-color);
-$button-background-color-active: var(--button-primary-background-active-color);
+$button-background-color: var(--gesso-button-primary-background-color);
+$button-background-color-hover: var(
+  --gesso-button-primary-background-hover-color
+);
+$button-background-color-active: var(
+  --gesso-button-primary-background-active-color
+);
 $button-background-color-disabled: var(
   --button-primary-background-disabled-color
 );
-$button-border-color: var(--button-primary-border-color);
-$button-border-color-hover: var(--button-primary-border-hover-color);
-$button-border-color-active: var(--button-primary-border-active-color);
-$button-border-color-disabled: var(--button-primary-border-disabled-color);
-$button-text-color: var(--button-primary-text-color);
-$button-text-color-hover: var(--button-primary-text-hover-color);
-$button-text-color-active: var(--button-primary-text-active-color);
-$button-text-color-disabled: var(--button-primary-text-disabled-color);
+$button-border-color: var(--gesso-button-primary-border-color);
+$button-border-color-hover: var(--gesso-button-primary-border-hover-color);
+$button-border-color-active: var(--gesso-button-primary-border-active-color);
+$button-border-color-disabled: var(
+  --gesso-button-primary-border-disabled-color
+);
+$button-text-color: var(--gesso-button-primary-text-color);
+$button-text-color-hover: var(--gesso-button-primary-text-hover-color);
+$button-text-color-active: var(--gesso-button-primary-text-active-color);
+$button-text-color-disabled: var(--gesso-button-primary-text-disabled-color);
 $button-font-size-token: 3 !default;
 
 @mixin button(
@@ -106,7 +112,7 @@ $button-font-size-token: 3 !default;
   -webkit-tap-highlight-color: transparent;
 
   &[disabled] {
-    color: var(--secondary-text-color);
+    color: var(--gesso-text-secondary-color);
     cursor: default;
     pointer-events: none;
   }
diff --git a/source/00-config/mixins/_color-theme.scss b/source/00-config/mixins/_color-theme.scss
index de5562611..5a31ef62a 100644
--- a/source/00-config/mixins/_color-theme.scss
+++ b/source/00-config/mixins/_color-theme.scss
@@ -7,7 +7,7 @@
   $properties: gesso-get-map(colors, theme, $theme);
 
   @each $property, $value in $properties {
-    --#{$property}-color: #{'' + gesso-color(theme, $theme, $property)};
+    --gesso-#{$property}-color: #{'' + gesso-color(theme, $theme, $property)};
   }
 
   @if ($include_fix) {
diff --git a/source/00-config/mixins/_focus.scss b/source/00-config/mixins/_focus.scss
index aaea1e49d..5ecee1a61 100644
--- a/source/00-config/mixins/_focus.scss
+++ b/source/00-config/mixins/_focus.scss
@@ -2,7 +2,7 @@
 
 @use '00-config/functions/gesso' as *;
 
-@mixin focus($color: var(--focus-color), $width: 2px, $offset: 2px) {
+@mixin focus($color: var(--gesso-focus-color), $width: 2px, $offset: 2px) {
   outline: $width solid transparent;
   outline-offset: $offset;
 
diff --git a/source/00-config/mixins/_layout.scss b/source/00-config/mixins/_layout.scss
index 2dc792187..4555c9e58 100644
--- a/source/00-config/mixins/_layout.scss
+++ b/source/00-config/mixins/_layout.scss
@@ -69,9 +69,9 @@
 // and makes it flush with the edge of the viewport.
 @mixin layout-full-bleed() {
   inset-inline: 50%;
-  margin-inline: calc(-50vw + var(--scrollbar-width) / 2);
+  margin-inline: calc(-50vw + var(--gesso-scrollbar-width) / 2);
   position: relative;
-  width: calc(100vw - var(--scrollbar-width));
+  width: calc(100vw - var(--gesso-scrollbar-width));
 }
 
 // Reverses the above.
diff --git a/source/00-config/mixins/_link.scss b/source/00-config/mixins/_link.scss
index d1ec847cb..ed18d4ac0 100644
--- a/source/00-config/mixins/_link.scss
+++ b/source/00-config/mixins/_link.scss
@@ -1,7 +1,7 @@
 // Mixins: Link
 
 @mixin link(
-  $link: var(--link-color),
+  $link: var(--gesso-link-color),
   $hover: $link,
   $active: $hover,
   $visit: $link
diff --git a/source/00-config/mixins/_list.scss b/source/00-config/mixins/_list.scss
index a1b31d3a5..1a9bc4110 100644
--- a/source/00-config/mixins/_list.scss
+++ b/source/00-config/mixins/_list.scss
@@ -33,7 +33,7 @@
   }
 }
 
-@mixin list-pipeline($pipeline-border-color: var(--border-color)) {
+@mixin list-pipeline($pipeline-border-color: var(--gesso-border-color)) {
   @include clearfix();
   list-style-type: none;
   margin-inline-start: 0;
@@ -70,7 +70,7 @@
 
 @mixin list-border(
   $list-border-padding: 0.25rem,
-  $list-border-color: var(--border-color)
+  $list-border-color: var(--gesso-border-color)
 ) {
   list-style: none;
   margin-inline-start: 0;
diff --git a/source/01-global/00-colors/palette.scss b/source/01-global/00-colors/palette.scss
index c1d1b5846..695f9faeb 100644
--- a/source/01-global/00-colors/palette.scss
+++ b/source/01-global/00-colors/palette.scss
@@ -14,7 +14,7 @@ $swatch-padding: 1rem;
 }
 
 .gesso-storybook-color-palette__group {
-  border-block-end: 1px solid var(--border-color);
+  border-block-end: 1px solid var(--gesso-border-color);
   column-gap: $swatch-padding;
   display: flex;
   flex-wrap: wrap;
@@ -22,7 +22,7 @@ $swatch-padding: 1rem;
 }
 
 .gesso-storybook-color-swatch {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--gesso-border-color);
   flex: 0 0 ($swatch-size + 2 * $swatch-padding);
   margin-block-end: $swatch-padding;
   max-width: ($swatch-size + 2 * $swatch-padding);
diff --git a/source/01-global/00-colors/themes.scss b/source/01-global/00-colors/themes.scss
index 7136babd7..b1727c7c9 100644
--- a/source/01-global/00-colors/themes.scss
+++ b/source/01-global/00-colors/themes.scss
@@ -27,9 +27,9 @@
 }
 
 .gesso-storybook-color-theme__content {
-  background: var(--background-color);
-  border: 1px solid var(--border-color);
-  color: var(--text-color);
+  background: var(--gesso-background-color);
+  border: 1px solid var(--gesso-border-color);
+  color: var(--gesso-text-color);
   margin-block-end: 2rem;
   padding: 1rem 0;
 
@@ -39,5 +39,5 @@
 }
 
 .gesso-storybook-color-theme__icons {
-  color: var(--accent-color);
+  color: var(--gesso-accent-color);
 }
diff --git a/source/01-global/01-typography/fonts.scss b/source/01-global/01-typography/fonts.scss
index f5bcbc155..89860547a 100644
--- a/source/01-global/01-typography/fonts.scss
+++ b/source/01-global/01-typography/fonts.scss
@@ -28,7 +28,7 @@
 }
 
 .gesso-storybook-font__preview {
-  border-block-end: 2px solid var(--border-color);
+  border-block-end: 2px solid var(--gesso-border-color);
   font-size: rem(18px);
   font-style: normal;
   font-weight: 400;
@@ -38,7 +38,7 @@
 
   @include breakpoint(800px) {
     border-block-end: 0;
-    border-inline-end: 2px solid var(--border-color);
+    border-inline-end: 2px solid var(--gesso-border-color);
     margin: rem(5px) rem(30px) 0 0;
     padding: 0 rem(20px);
     text-align: start;
@@ -70,11 +70,11 @@
 }
 
 .gesso-storybook-font__label {
-  color: var(--accent-color);
+  color: var(--gesso-accent-color);
 }
 
 .gesso-storybook-font__name {
-  color: var(--accent-color);
+  color: var(--gesso-accent-color);
   font-size: 0.9rem;
   line-height: 1.5;
   margin: rem(5px) 0;
diff --git a/source/01-global/02-spacing/space.twig b/source/01-global/02-spacing/space.twig
index 95f370926..1046ddf76 100644
--- a/source/01-global/02-spacing/space.twig
+++ b/source/01-global/02-spacing/space.twig
@@ -20,7 +20,7 @@
         <td class="gesso-storybook-spacing__cell">{{ remValue }}rem</td>
         <td class="gesso-storybook-spacing__cell">{{ unit }}</td>
         <td class="gesso-storybook-spacing__cell">
-          <div style="height:{{ unit }}; width:{{ unit }}; background-color: var(--border-color);"></div>
+          <div style="height:{{ unit }}; width:{{ unit }}; background-color: var(--gesso-border-color);"></div>
         </td>
       </tr>
     {% endfor %}
diff --git a/source/01-global/04-transitions/duration.scss b/source/01-global/04-transitions/duration.scss
index 57270db31..c91dfdf8f 100644
--- a/source/01-global/04-transitions/duration.scss
+++ b/source/01-global/04-transitions/duration.scss
@@ -14,7 +14,7 @@ $duration-swatch: rem(40px);
 }
 
 .gesso-storybook-duration__indicator {
-  background-color: var(--secondary-text-color);
+  background-color: var(--gesso-text-secondary-color);
   border-radius: 50%;
   display: inline-block;
   height: $duration-swatch;
diff --git a/source/01-global/04-transitions/easing.scss b/source/01-global/04-transitions/easing.scss
index 7886faf64..a4e2d87f5 100644
--- a/source/01-global/04-transitions/easing.scss
+++ b/source/01-global/04-transitions/easing.scss
@@ -9,7 +9,7 @@ $easing-swatch: rem(75px);
 }
 
 .gesso-storybook-easing__indicator {
-  background-color: var(--secondary-text-color);
+  background-color: var(--gesso-text-secondary-color);
   border-radius: 10%;
   height: $easing-swatch;
   inset-inline-start: 0;
diff --git a/source/01-global/content-placeholder/content-placeholder.jsx b/source/01-global/content-placeholder/content-placeholder.jsx
index 8295f27e2..7bd5ca9fc 100644
--- a/source/01-global/content-placeholder/content-placeholder.jsx
+++ b/source/01-global/content-placeholder/content-placeholder.jsx
@@ -6,9 +6,9 @@ export default function ContentPlaceholder({ children }) {
   return (
     <div
       style={{
-        background: 'var(--secondary-text-color)',
-        border: '1px solid var(--background-color)',
-        color: 'var(--background-color)',
+        background: 'var(--gesso-text-secondary-color)',
+        border: '1px solid var(--gesso-background-color)',
+        color: 'var(--gesso-background-color)',
         padding: '1em',
       }}
     >
diff --git a/source/01-global/html-elements/00-universal/_universal.scss b/source/01-global/html-elements/00-universal/_universal.scss
index ebc75c78e..ff5d97b9b 100644
--- a/source/01-global/html-elements/00-universal/_universal.scss
+++ b/source/01-global/html-elements/00-universal/_universal.scss
@@ -4,7 +4,7 @@
 
 :root {
   // stylelint-disable-next-line
-  --scrollbar-width: 0px;
+  --gesso-scrollbar-width: 0px;
 }
 
 // Uncomment to add a set of default transitions to all elements
diff --git a/source/01-global/html-elements/02-body/_body.scss b/source/01-global/html-elements/02-body/_body.scss
index eabf3aeb0..102a62c89 100644
--- a/source/01-global/html-elements/02-body/_body.scss
+++ b/source/01-global/html-elements/02-body/_body.scss
@@ -5,8 +5,8 @@
 // Overflow-x and width properties ensure elements using full bleed techniques
 // (e.g., the layout-full-bleed mixin) do not create horizontal scroll bars.
 body {
-  background-color: var(--background-color);
-  color: var(--text-color);
+  background-color: var(--gesso-background-color);
+  color: var(--gesso-text-color);
   margin: 0;
   overflow-x: hidden;
   padding: 0;
diff --git a/source/01-global/html-elements/15-inline-elements/_inline-elements.scss b/source/01-global/html-elements/15-inline-elements/_inline-elements.scss
index 56077e448..0780808e7 100644
--- a/source/01-global/html-elements/15-inline-elements/_inline-elements.scss
+++ b/source/01-global/html-elements/15-inline-elements/_inline-elements.scss
@@ -5,23 +5,23 @@
 a {
   @include focus();
   background-color: transparent;
-  color: var(--link-color);
+  color: var(--gesso-link-color);
   -webkit-text-decoration-skip: objects;
   transition-duration: gesso-duration(short);
   transition-property: background-color, border-color, color, outline-color;
   transition-timing-function: gesso-easing(ease-in);
 
   &:visited {
-    color: var(--link-visited-color);
+    color: var(--gesso-link-visited-color);
   }
 
   &:hover,
   &:focus {
-    color: var(--link-hover-color);
+    color: var(--gesso-link-hover-color);
   }
 
   &:active {
-    color: var(--link-active-color);
+    color: var(--gesso-link-active-color);
   }
 
   @media print {
@@ -94,8 +94,8 @@ dfn {
 // kbd {}
 
 mark {
-  background: var(--mark-background-color);
-  color: var(--mark-text-color);
+  background: var(--gesso-mark-background-color);
+  color: var(--gesso-mark-text-color);
 }
 
 // q {}
diff --git a/source/01-global/html-elements/16-blockquote/_blockquote.scss b/source/01-global/html-elements/16-blockquote/_blockquote.scss
index e4c883c52..0727498a3 100644
--- a/source/01-global/html-elements/16-blockquote/_blockquote.scss
+++ b/source/01-global/html-elements/16-blockquote/_blockquote.scss
@@ -2,7 +2,7 @@
 
 @use '00-config' as *;
 
-$blockquote-cite-divider-color: var(--border-color);
+$blockquote-cite-divider-color: var(--gesso-border-color);
 
 blockquote {
   @include display-text-style(blockquote);
diff --git a/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss b/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss
index 203c20418..ab3fa5429 100644
--- a/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss
+++ b/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss
@@ -2,7 +2,7 @@
 
 @use '00-config' as *;
 
-$horizontal-rule-color: var(--border-color);
+$horizontal-rule-color: var(--gesso-border-color);
 
 hr {
   border: 1px solid $horizontal-rule-color;
diff --git a/source/01-global/normalize/_normalize.scss b/source/01-global/normalize/_normalize.scss
index 7bb702348..d9547d7a7 100644
--- a/source/01-global/normalize/_normalize.scss
+++ b/source/01-global/normalize/_normalize.scss
@@ -148,13 +148,13 @@ var {
 
 // stylelint-disable-next-line selector-no-vendor-prefix
 ::-moz-selection {
-  background: var(--selection-background-color);
-  color: var(--selection-text-color);
+  background: var(--gesso-selection-background-color);
+  color: var(--gesso-selection-text-color);
   text-shadow: none;
 }
 
 ::selection {
-  background: var(--selection-background-color);
-  color: var(--selection-text-color);
+  background: var(--gesso-selection-background-color);
+  color: var(--gesso-selection-text-color);
   text-shadow: none;
 }
diff --git a/source/02-layouts/section/_section.scss b/source/02-layouts/section/_section.scss
index 7df0cd0d9..c889df951 100644
--- a/source/02-layouts/section/_section.scss
+++ b/source/02-layouts/section/_section.scss
@@ -6,8 +6,8 @@
   margin-block-end: rem(gesso-spacing(5));
 
   &.has-theme {
-    background-color: var(--background-color);
-    color: var(--text-color);
+    background-color: var(--gesso-background-color);
+    color: var(--gesso-text-color);
     padding-block: rem(gesso-spacing(2));
   }
 }
diff --git a/source/03-components/accordion/accordion--step-list.scss b/source/03-components/accordion/accordion--step-list.scss
index 7f1a05172..50c8d4e31 100644
--- a/source/03-components/accordion/accordion--step-list.scss
+++ b/source/03-components/accordion/accordion--step-list.scss
@@ -6,7 +6,7 @@
   counter-reset: step;
 
   .c-accordion-item__number {
-    background-color: var(--secondary-background-color);
+    background-color: var(--gesso-background-secondary-color);
     border-radius: 100%;
     display: inline-block;
     font-size: rem(gesso-font-size(4));
diff --git a/source/03-components/accordion/accordion.scss b/source/03-components/accordion/accordion.scss
index 4ff9c78fe..1f4e2e01e 100644
--- a/source/03-components/accordion/accordion.scss
+++ b/source/03-components/accordion/accordion.scss
@@ -2,8 +2,8 @@
 
 @use '00-config' as *;
 
-$accordion-item-border-color: var(--secondary-background-color) !default;
-$accordion-item-icon-color: var(--link-color) !default;
+$accordion-item-border-color: var(--gesso-background-secondary-color) !default;
+$accordion-item-icon-color: var(--gesso-link-color) !default;
 $accordion-item-icon-size: 20px !default;
 $accordion-item-icon-weight: 2px !default;
 
@@ -14,8 +14,8 @@ $accordion-item-icon-weight: 2px !default;
 }
 
 .c-accordion-item__heading {
-  background: var(--background-color);
-  color: var(--text-color);
+  background: var(--gesso-background-color);
+  color: var(--gesso-text-color);
   font-weight: gesso-font-weight(bold);
   margin: 0;
 }
@@ -97,7 +97,7 @@ $accordion-item-icon-weight: 2px !default;
 }
 
 .c-accordion-item__drawer {
-  background: var(--background-color);
+  background: var(--gesso-background-color);
 }
 
 .c-accordion-item__drawer-inner {
diff --git a/source/03-components/button/_button.scss b/source/03-components/button/_button.scss
index 122cafe7a..a183200f3 100644
--- a/source/03-components/button/_button.scss
+++ b/source/03-components/button/_button.scss
@@ -62,32 +62,32 @@ $button-spacing: rem(gesso-spacing(1));
 
 // This custom button class, included as an example, is not output by Drupal by default.
 .c-button--secondary {
-  background-color: var(--button-secondary-background-color);
-  border-color: var(--button-secondary-border-color);
-  color: var(--button-secondary-text-color);
+  background-color: var(--gesso-button-secondary-background-color);
+  border-color: var(--gesso-button-secondary-border-color);
+  color: var(--gesso-button-secondary-text-color);
 
   &:visited {
-    color: var(--button-secondary-text-color);
+    color: var(--gesso-button-secondary-text-color);
   }
 
   &:hover,
   &:focus {
-    background-color: var(--button-secondary-background-hover-color);
-    border-color: var(--button-secondary-border-hover-color);
-    color: var(--button-secondary-text-hover-color);
+    background-color: var(--gesso-button-secondary-background-hover-color);
+    border-color: var(--gesso-button-secondary-border-hover-color);
+    color: var(--gesso-button-secondary-text-hover-color);
   }
 
   &:active,
   &.is-active {
-    background-color: var(--button-secondary-background-active-color);
-    border-color: var(--button-secondary-border-active-color);
-    color: var(--button-secondary-text-active-color);
+    background-color: var(--gesso-button-secondary-background-active-color);
+    border-color: var(--gesso-button-secondary-border-active-color);
+    color: var(--gesso-button-secondary-text-active-color);
   }
 
   &[disabled] {
-    background-color: var(--button-secondary-background-disabled-color);
-    border-color: var(--button-secondary-border-disabled-color);
-    color: var(--button-secondary-text-disabled-color);
+    background-color: var(--gesso-button-secondary-background-disabled-color);
+    border-color: var(--gesso-button-secondary-border-disabled-color);
+    color: var(--gesso-button-secondary-text-disabled-color);
   }
 }
 
diff --git a/source/03-components/card/card.scss b/source/03-components/card/card.scss
index 498027f9d..6d24e9b2b 100644
--- a/source/03-components/card/card.scss
+++ b/source/03-components/card/card.scss
@@ -2,10 +2,10 @@
 
 @use '00-config' as *;
 
-$card-accent-border-color: var(--accent-color) !default;
-$card-link-color: var(--text-color) !default;
-$card-link-color-hover: var(--secondary-text-color) !default;
-$card-meta-color: var(--secondary-text-color) !default;
+$card-accent-border-color: var(--gesso-accent-color) !default;
+$card-link-color: var(--gesso-text-color) !default;
+$card-link-color-hover: var(--gesso-text-secondary-color) !default;
+$card-meta-color: var(--gesso-text-secondary-color) !default;
 $card-padding: rem(gesso-spacing(3)) !default;
 
 .c-card {
diff --git a/source/03-components/date/_date.scss b/source/03-components/date/_date.scss
index 2dcf06979..ae982ba61 100644
--- a/source/03-components/date/_date.scss
+++ b/source/03-components/date/_date.scss
@@ -3,6 +3,6 @@
 @use '00-config' as *;
 
 .c-date {
-  color: var(--secondary-text-color);
+  color: var(--gesso-text-secondary-color);
   font-size: rem(gesso-font-size(3));
 }
diff --git a/source/03-components/details/details.scss b/source/03-components/details/details.scss
index 272b0daa9..0127bc03a 100644
--- a/source/03-components/details/details.scss
+++ b/source/03-components/details/details.scss
@@ -2,8 +2,8 @@
 
 @use '00-config' as *;
 
-$details-border-color: var(--secondary-background-color) !default;
-$details-icon-color: var(--link-color) !default;
+$details-border-color: var(--gesso-background-secondary-color) !default;
+$details-icon-color: var(--gesso-link-color) !default;
 $details-icon-size: 24px !default;
 $details-padding: rem(gesso-spacing(2));
 
@@ -14,8 +14,8 @@ $details-padding: rem(gesso-spacing(2));
 }
 
 .c-details__summary {
-  background: var(--background-color);
-  color: var(--text-color);
+  background: var(--gesso-background-color);
+  color: var(--gesso-text-color);
   cursor: pointer;
   display: flex;
   font-weight: gesso-font-weight(bold);
@@ -47,8 +47,8 @@ $details-padding: rem(gesso-spacing(2));
 }
 
 .c-details__content {
-  background: var(--background-color);
-  color: var(--text-color);
+  background: var(--gesso-background-color);
+  color: var(--gesso-text-color);
   padding: $details-padding;
   padding-block-start: 0;
 
diff --git a/source/03-components/dropdown-menu/dropdown-menu.scss b/source/03-components/dropdown-menu/dropdown-menu.scss
index 376a7ebbd..4152d49f8 100644
--- a/source/03-components/dropdown-menu/dropdown-menu.scss
+++ b/source/03-components/dropdown-menu/dropdown-menu.scss
@@ -43,9 +43,9 @@
     > button.c-dropdown-menu__link {
       @include text-button;
       @include link(
-        var(--link-color),
-        var(--link-hover-color),
-        var(--link-active-color)
+        var(--gesso-link-color),
+        var(--gesso-link-hover-color),
+        var(--gesso-link-active-color)
       );
     }
   }
diff --git a/source/03-components/facet/facet.scss b/source/03-components/facet/facet.scss
index 4f794188e..d7e083d3a 100644
--- a/source/03-components/facet/facet.scss
+++ b/source/03-components/facet/facet.scss
@@ -2,11 +2,11 @@
 
 @use '00-config' as *;
 
-$facet-icon-color: var(--facet-icon-color) !default;
-$facet-icon-active-color: var(--facet-icon-active-color) !default;
-$facet-text-color: var(--facet-text-color) !default;
-$facet-text-hover-color: var(--facet-text-hover-color) !default;
-$facet-text-active-color: var(--facet-text-active-color) !default;
+$facet-icon-color: var(--gesso-facet-icon-color) !default;
+$facet-icon-active-color: var(--gesso-facet-icon-active-color) !default;
+$facet-text-color: var(--gesso-facet-text-color) !default;
+$facet-text-hover-color: var(--gesso-facet-text-hover-color) !default;
+$facet-text-active-color: var(--gesso-facet-text-active-color) !default;
 
 .c-facet {
   @include responsive-font-size(3);
diff --git a/source/03-components/fieldset/_fieldset.scss b/source/03-components/fieldset/_fieldset.scss
index 2d9c332f3..06bc884f6 100644
--- a/source/03-components/fieldset/_fieldset.scss
+++ b/source/03-components/fieldset/_fieldset.scss
@@ -3,11 +3,11 @@
 @use '00-config' as *;
 @use '../form-item/form-item' as *;
 
-$fieldset-border-color: var(--secondary-background-color);
+$fieldset-border-color: var(--gesso-background-secondary-color);
 $fieldset-legend-offset: rem(
   gesso-line-height(base) * gesso-base-font-size()
 ) !default;
-$fieldset-legend-text-color: var(--text-color);
+$fieldset-legend-text-color: var(--gesso-text-color);
 
 .c-fieldset {
   inset-block-start: $fieldset-legend-offset; // Offsets the negative margin of legends.
@@ -38,7 +38,7 @@ $fieldset-legend-text-color: var(--text-color);
 // .c-fieldset__content {}
 
 .c-fieldset__description {
-  color: var(--secondary-text-color);
+  color: var(--gesso-text-secondary-color);
   font-size: rem(gesso-font-size(2));
 
   > :last-child {
@@ -47,7 +47,7 @@ $fieldset-legend-text-color: var(--text-color);
 }
 
 .c-fieldset--default {
-  background: var(--background-color);
+  background: var(--gesso-background-color);
   border: 1px solid $fieldset-border-color;
   margin: rem(gesso-spacing(2)) 0 rem(gesso-spacing(3)) +
     $fieldset-legend-offset;
@@ -61,7 +61,7 @@ $fieldset-legend-text-color: var(--text-color);
     height: 2em;
     line-height: 2;
     padding: 0;
-    text-shadow: 0 1px 0 var(--background-color);
+    text-shadow: 0 1px 0 var(--gesso-background-color);
 
     &.is-disabled {
       opacity: $form-disabled-opacity;
diff --git a/source/03-components/form-item/_form-item.scss b/source/03-components/form-item/_form-item.scss
index ef06eecb4..9e407707a 100644
--- a/source/03-components/form-item/_form-item.scss
+++ b/source/03-components/form-item/_form-item.scss
@@ -3,10 +3,12 @@
 @use 'sass:math';
 @use '00-config' as *;
 
-$form-background-color: var(--form-background-color) !default;
-$form-background-color-focus: var(--form-background-active-color) !default;
-$form-border-color: var(--form-border-color) !default;
-$form-border-color-focus: var(--form-border-dark-color) !default;
+$form-background-color: var(--gesso-form-background-color) !default;
+$form-background-color-focus: var(
+  --gesso-form-background-active-color
+) !default;
+$form-border-color: var(--gesso-form-border-color) !default;
+$form-border-color-focus: var(--gesso-form-border-dark-color) !default;
 $form-box-shadow-focus: gesso-box-shadow(2) !default;
 $form-disabled-opacity: 0.35 !default;
 $form-text-size: gesso-base-font-size() !default;
@@ -55,7 +57,7 @@ $form-text-size: gesso-base-font-size() !default;
 
 .c-form-item__description {
   @extend %disabled-form-styles;
-  color: var(--secondary-text-color);
+  color: var(--gesso-text-secondary-color);
   font-size: rem(gesso-font-size(2));
 
   > :last-child {
diff --git a/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss b/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss
index 25339f650..3543de89a 100644
--- a/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss
+++ b/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss
@@ -20,8 +20,8 @@
 
       &::before {
         @include focus();
-        background: var(--form-background-unchecked-color);
-        border: 1px solid var(--form-border-dark-color);
+        background: var(--gesso-form-background-unchecked-color);
+        border: 1px solid var(--gesso-form-border-dark-color);
         content: '\a0';
         display: inline-block;
         height: rem(20px);
@@ -40,14 +40,14 @@
 
     &:checked + .c-form-item__label::before {
       @include svg-background(correct);
-      background-color: var(--form-background-checked-color);
+      background-color: var(--gesso-form-background-checked-color);
       background-position: 50%;
       background-repeat: no-repeat;
       background-size: rem(20px);
     }
 
     &:focus + .c-form-item__label::before {
-      outline-color: var(--focus-color);
+      outline-color: var(--gesso-focus-color);
     }
 
     &:disabled + .c-form-item__label {
diff --git a/source/03-components/form-item/form-item--radio/_form-item--radio.scss b/source/03-components/form-item/form-item--radio/_form-item--radio.scss
index 8b74849a9..366d51c25 100644
--- a/source/03-components/form-item/form-item--radio/_form-item--radio.scss
+++ b/source/03-components/form-item/form-item--radio/_form-item--radio.scss
@@ -11,8 +11,8 @@
   .c-form-item__radio {
     @include focus();
     appearance: none;
-    background-color: var(--form-background-unchecked-color);
-    border: 1px solid var(--form-border-dark-color);
+    background-color: var(--gesso-form-background-unchecked-color);
+    border: 1px solid var(--gesso-form-border-dark-color);
     border-radius: 50%;
     box-shadow: 0 0 0 2px transparent;
     cursor: pointer;
@@ -26,9 +26,9 @@
     width: 18px;
 
     &:checked {
-      background-color: var(--form-background-checked-color);
-      border: 2px solid var(--form-background-unchecked-color);
-      box-shadow: 0 0 0 2px var(--focus-color);
+      background-color: var(--gesso-form-background-checked-color);
+      border: 2px solid var(--gesso-form-background-unchecked-color);
+      box-shadow: 0 0 0 2px var(--gesso-focus-color);
     }
 
     &:disabled {
diff --git a/source/03-components/form-item/form-item--range/_form-item--range.scss b/source/03-components/form-item/form-item--range/_form-item--range.scss
index 72f500c2e..d39b1864a 100644
--- a/source/03-components/form-item/form-item--range/_form-item--range.scss
+++ b/source/03-components/form-item/form-item--range/_form-item--range.scss
@@ -13,8 +13,9 @@ $form-range-track-height: 10px !default;
 
 @mixin c-form-item__range-thumb {
   @include focus();
-  background: var(--form-thumb-color);
-  border: $form-range-thumb-border-width solid var(--form-border-light-color);
+  background: var(--gesso-form-thumb-color);
+  border: $form-range-thumb-border-width solid
+    var(--gesso-form-border-light-color);
   border-radius: $form-range-thumb-border-radius;
   cursor: pointer;
   height: rem($form-range-thumb-height);
@@ -24,12 +25,13 @@ $form-range-track-height: 10px !default;
 }
 
 @mixin c-form-item__range-thumb-focus {
-  outline-color: var(--focus-color);
+  outline-color: var(--gesso-focus-color);
 }
 
 @mixin c-form-item__range-track {
-  background: var(--form-track-color);
-  border: $form-range-track-border-width solid var(--form-border-dark-color);
+  background: var(--gesso-form-track-color);
+  border: $form-range-track-border-width solid
+    var(--gesso-form-border-dark-color);
   cursor: pointer;
   display: block;
   height: rem($form-range-track-height);
@@ -96,8 +98,9 @@ $form-range-track-height: 10px !default;
 
     &::-ms-fill-lower,
     &::-ms-fill-upper {
-      background: var(--form-track-color);
-      border: $form-range-track-border-width solid var(--form-border-dark-color);
+      background: var(--gesso-form-track-color);
+      border: $form-range-track-border-width solid
+        var(--gesso-form-border-dark-color);
     }
 
     &::-webkit-slider-thumb {
diff --git a/source/03-components/mega-menu/mega-menu.scss b/source/03-components/mega-menu/mega-menu.scss
index 6b857107a..bcbf4fb3f 100644
--- a/source/03-components/mega-menu/mega-menu.scss
+++ b/source/03-components/mega-menu/mega-menu.scss
@@ -7,14 +7,14 @@
 // the element(s) above it need a background color and
 // z-index in order to cover the mega menu.
 .l-header {
-  background: var(--background-color);
+  background: var(--gesso-background-color);
   position: relative;
   z-index: 2;
 }
 
 .c-mega-menu {
   align-items: center;
-  background: var(--background-color);
+  background: var(--gesso-background-color);
   display: flex;
   margin-block: 0 rem(gesso-spacing(2.5));
   margin-inline: 0;
@@ -23,7 +23,7 @@
   z-index: 1;
 
   &::after {
-    background-color: var(--background-color);
+    background-color: var(--gesso-background-color);
     content: '';
     display: block;
     height: 100%;
@@ -41,9 +41,9 @@
 
     > .c-mega-menu__link {
       @include link(
-        var(--link-color),
-        var(--link-hover-color),
-        var(--link-active-color)
+        var(--gesso-link-color),
+        var(--gesso-link-hover-color),
+        var(--gesso-link-active-color)
       );
       border-block-end: rem(2px) solid transparent;
       border-radius: rem(1px);
@@ -77,8 +77,8 @@
 
 .c-mega-menu__section {
   @include color-theme(gray-6);
-  background-color: var(--background-color);
-  color: var(--text-color);
+  background-color: var(--gesso-background-color);
+  color: var(--gesso-text-color);
   inset-block-start: 100%;
   inset-inline-start: 0;
   margin-block: 0;
diff --git a/source/03-components/mobile-menu/mobile-menu.scss b/source/03-components/mobile-menu/mobile-menu.scss
index d36274ac6..815e1290b 100644
--- a/source/03-components/mobile-menu/mobile-menu.scss
+++ b/source/03-components/mobile-menu/mobile-menu.scss
@@ -5,13 +5,13 @@
 @use '00-config' as *;
 
 $mobile-menu-bg-color: rgb(
-  from var(--secondary-background-color) r g b / 0.98
+  from var(--gesso-background-secondary-color) r g b / 0.98
 ) !default;
-$mobile-menu-link-color: var(--secondary-text-color) !default;
-$mobile-menu-link-hover-color: var(--text-color) !default;
+$mobile-menu-link-color: var(--gesso-text-secondary-color) !default;
+$mobile-menu-link-hover-color: var(--gesso-text-color) !default;
 $mobile-menu-submenu-bg-color: $mobile-menu-bg-color !default;
-$mobile-menu-submenu-link-color: var(--secondary-text-color) !default;
-$mobile-menu-submenu-link-hover-color: var(--text-color) !default;
+$mobile-menu-submenu-link-color: var(--gesso-text-secondary-color) !default;
+$mobile-menu-submenu-link-hover-color: var(--gesso-text-color) !default;
 $mobile-menu-button-height: 54px;
 $mobile-menu-button-width: 44px;
 $mobile-menu-font-size: gesso-font-size(5);
@@ -20,7 +20,7 @@ $mobile-menu-line-height: gesso-line-height(base);
 .c-mobile-menu {
   @include color-theme(default);
   background-color: $mobile-menu-bg-color;
-  color: var(--text-color);
+  color: var(--gesso-text-color);
   display: none;
   inset-block-start: 0;
   inset-inline-start: 0;
diff --git a/source/03-components/modal/modal.scss b/source/03-components/modal/modal.scss
index 0a9ee648d..fa5c31c89 100644
--- a/source/03-components/modal/modal.scss
+++ b/source/03-components/modal/modal.scss
@@ -53,8 +53,8 @@
 
 .c-modal__inner {
   @include color-theme(default);
-  background-color: var(--background-color);
-  color: var(--text-color);
+  background-color: var(--gesso-background-color);
+  color: var(--gesso-text-color);
   padding-block: rem(gesso-spacing(5));
   padding-inline: rem(gesso-spacing(5));
 }
diff --git a/source/03-components/overlay-menu/overlay-menu.scss b/source/03-components/overlay-menu/overlay-menu.scss
index 6a09d88e0..d3596b9d9 100644
--- a/source/03-components/overlay-menu/overlay-menu.scss
+++ b/source/03-components/overlay-menu/overlay-menu.scss
@@ -4,7 +4,7 @@
 @use '00-config' as *;
 
 $overlay-menu-bg-color: rgb(
-  from var(--secondary-background-color) r g b / 0.98
+  from var(--gesso-background-secondary-color) r g b / 0.98
 ) !default;
 
 .c-overlay-menu {
@@ -21,7 +21,7 @@ $overlay-menu-bg-color: rgb(
   &.is-open {
     @include color-theme(default);
     background-color: $overlay-menu-bg-color;
-    color: var(--text-color);
+    color: var(--gesso-text-color);
     height: 100vh;
     overflow-y: auto;
     width: 100%;
diff --git a/source/03-components/pager/pager.scss b/source/03-components/pager/pager.scss
index 0bf4e0d22..2486dd90e 100644
--- a/source/03-components/pager/pager.scss
+++ b/source/03-components/pager/pager.scss
@@ -2,11 +2,11 @@
 
 @use '00-config' as *;
 
-$pager-background-color: var(--secondary-link-color) !default;
-$pager-background-color-hover: var(--secondary-link-color) !default;
-$pager-background-color-active: var(--secondary-link-color) !default;
-$pager-link-color: var(--secondary-link-color) !default;
-$pager-link-color-active: var(--background-color) !default;
+$pager-background-color: var(--gesso-link-secondary-color) !default;
+$pager-background-color-hover: var(--gesso-link-secondary-color) !default;
+$pager-background-color-active: var(--gesso-link-secondary-color) !default;
+$pager-link-color: var(--gesso-link-secondary-color) !default;
+$pager-link-color-active: var(--gesso-background-color) !default;
 $pager-ellipsis-bp: 800px !default;
 $pager-bp: 600px !default;
 
@@ -87,22 +87,22 @@ $pager-bp: 600px !default;
 .c-pager__link--next,
 .c-pager__link--last {
   background-color: transparent;
-  color: var(--link-color);
+  color: var(--gesso-link-color);
 
   &:visited {
-    color: var(--link-color);
+    color: var(--gesso-link-color);
   }
 
   &:hover,
   &:focus {
     background-color: transparent;
-    color: var(--link-hover-color);
+    color: var(--gesso-link-hover-color);
     text-decoration: underline;
   }
 
   &:active {
     background-color: transparent;
-    color: var(--link-active-color);
+    color: var(--gesso-link-active-color);
     text-decoration: underline;
   }
 }
diff --git a/source/03-components/progress/progress.scss b/source/03-components/progress/progress.scss
index 86d7f3f8c..e416fa195 100644
--- a/source/03-components/progress/progress.scss
+++ b/source/03-components/progress/progress.scss
@@ -3,11 +3,11 @@
 
 @use '00-config' as *;
 
-$progress-background-color: var(--secondary-background-color) !default;
-$progress-bar-color: var(--accent-color) !default;
-$progress-border-color: var(--border-color) !default;
+$progress-background-color: var(--gesso-background-secondary-color) !default;
+$progress-bar-color: var(--gesso-accent-color) !default;
+$progress-border-color: var(--gesso-border-color) !default;
 $progress-border-radius: rem(3px) !default;
-$progress-text-color: var(--text-color) !default;
+$progress-text-color: var(--gesso-text-color) !default;
 
 .c-progress {
   position: relative;
diff --git a/source/03-components/side-menu/side-menu.scss b/source/03-components/side-menu/side-menu.scss
index c06bc2de2..d62d79e40 100644
--- a/source/03-components/side-menu/side-menu.scss
+++ b/source/03-components/side-menu/side-menu.scss
@@ -3,12 +3,12 @@
 
 @use '00-config' as *;
 
-$side-menu-bg-color: var(--secondary-background-color);
+$side-menu-bg-color: var(--gesso-background-secondary-color);
 
 .c-side-menu {
   @include color-theme(default);
   background-color: $side-menu-bg-color;
-  color: var(--text-color);
+  color: var(--gesso-text-color);
   font-size: rem(gesso-font-size(5));
   height: 100vh;
   inset-block-start: 0;
@@ -85,7 +85,7 @@ $side-menu-bg-color: var(--secondary-background-color);
 
 .c-side-menu__back {
   @include text-button;
-  color: var(--link-color);
+  color: var(--gesso-link-color);
 
   &::before {
     @include svg-background(mobile-arrow-down);
@@ -102,7 +102,7 @@ $side-menu-bg-color: var(--secondary-background-color);
 
   &:hover,
   &:focus {
-    color: var(--link-hover-color);
+    color: var(--gesso-link-hover-color);
   }
 }
 
diff --git a/source/03-components/table/_table.scss b/source/03-components/table/_table.scss
index 42a717d1b..52ea17968 100644
--- a/source/03-components/table/_table.scss
+++ b/source/03-components/table/_table.scss
@@ -7,7 +7,7 @@
     thead {
       display: table;
       table-layout: fixed;
-      width: calc(100% - var(--scrollbar-width));
+      width: calc(100% - var(--gesso-scrollbar-width));
     }
 
     tbody {
diff --git a/source/03-components/tag/tag.scss b/source/03-components/tag/tag.scss
index b9d811633..d04b966cc 100644
--- a/source/03-components/tag/tag.scss
+++ b/source/03-components/tag/tag.scss
@@ -3,8 +3,8 @@
 @use '00-config' as *;
 
 .c-tag {
-  @include link(var(--tag-text-color));
-  border: 2px solid var(--tag-border-color);
+  @include link(var(--gesso-tag-text-color));
+  border: 2px solid var(--gesso-tag-border-color);
   border-radius: 70px;
   display: inline-block;
   font-size: rem(gesso-font-size(2));
@@ -18,7 +18,7 @@
 
   &:hover,
   &:focus {
-    box-shadow: 0 0 0 2px var(--tag-box-shadow-color);
+    box-shadow: 0 0 0 2px var(--gesso-tag-box-shadow-color);
     outline: 0;
   }
 }
diff --git a/source/06-utility/_setScrollbarProperty.es6.js b/source/06-utility/_setScrollbarProperty.es6.js
index 54a0b67b4..7ca6d6d32 100644
--- a/source/06-utility/_setScrollbarProperty.es6.js
+++ b/source/06-utility/_setScrollbarProperty.es6.js
@@ -21,7 +21,7 @@ function setScrollbarProperty() {
   const scrollbarWidth = calculateScrollbarSize();
   if (!Number.isNaN(scrollbarWidth)) {
     document.documentElement.style.setProperty(
-      '--scrollbar-width',
+      '--gesso-scrollbar-width',
       `${scrollbarWidth}px`
     );
   }

From 8a628d8938edd9070ac4d038ea4cb12d4732845e Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Wed, 9 Apr 2025 14:12:26 -0400
Subject: [PATCH 16/17] 953: Add documentation about color themes

---
 README.md | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/README.md b/README.md
index 8288957d2..256c5a789 100644
--- a/README.md
+++ b/README.md
@@ -591,6 +591,46 @@ set to `true` (default: `false`).
 }
 ```
 
+### Color themes
+
+Gesso supports color themes using CSS custom properties to define colors whose
+values can change depending on which color theme is being used. You can apply
+these color themes to elements, and everything within it that uses those custom
+properties wil inherit the values for that specific theme.
+
+Color themes are defined in `source/00-config/config.design-tokens.yml` under
+`gesso: colors: theme:`. By default Gesso only has two color themes (default and
+gray-6) but more can be added. When creating new ones, be sure to also add them
+to `.storybook/preview.js` in order to see them show up in the Storybook theme
+preview dropdown.
+
+A color theme can be added to an element in two ways:
+
+1. Add the corresponding `theme-X` class to that element where X is the machine
+name for that color theme.
+
+```html
+<div class="c-custom-component theme-gray-6">
+```
+
+2. Use the `@include color-theme($theme)` Sass mixin within your styles.
+
+```sass
+.c-custom-component {
+  @include color-theme(gray-6);
+}
+```
+
+In both cases you’ll likely want to add a background color and text color to
+that element or a child of that element using custom properties.
+
+```sass {
+.c-custom-component {
+  background-color: var(--gesso-background-color);
+  color: var(--gesso-text-color);
+}
+```
+
 ## Twig Filters and Functions
 Gesso includes some additional filters and functions that can be used in Twig templates.
 

From 3bc473e65d99dc2de4895d61e72112c5ac7ce978 Mon Sep 17 00:00:00 2001
From: Dan Mouyard <dcmouyard@gmail.com>
Date: Wed, 14 May 2025 09:47:13 -0400
Subject: [PATCH 17/17] 953: Tweak color themes for form items

---
 source/03-components/form-item/_form-item.scss            | 8 ++++++++
 .../form-item/form-item--radio/_form-item--radio.scss     | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/source/03-components/form-item/_form-item.scss b/source/03-components/form-item/_form-item.scss
index 9e407707a..6477831ce 100644
--- a/source/03-components/form-item/_form-item.scss
+++ b/source/03-components/form-item/_form-item.scss
@@ -11,6 +11,7 @@ $form-border-color: var(--gesso-form-border-color) !default;
 $form-border-color-focus: var(--gesso-form-border-dark-color) !default;
 $form-box-shadow-focus: gesso-box-shadow(2) !default;
 $form-disabled-opacity: 0.35 !default;
+$form-text-color: var(--gesso-form-text-color) !default;
 $form-text-size: gesso-base-font-size() !default;
 
 .c-form-item {
@@ -98,6 +99,7 @@ $form-text-size: gesso-base-font-size() !default;
   background-color: $form-background-color;
   border: 1px solid $form-border-color;
   border-radius: 0;
+  color: $form-text-color;
   display: inline-block;
   font-size: rem($form-text-size);
   height: rem(44px);
@@ -133,6 +135,7 @@ $form-text-size: gesso-base-font-size() !default;
 
 .c-form-item__file {
   background-color: transparent;
+  color: var(--gesso-text-color);
 
   &:hover,
   &:focus {
@@ -150,3 +153,8 @@ $form-text-size: gesso-base-font-size() !default;
 .c-form-item__textarea {
   height: auto;
 }
+
+.c-form-item__error-message {
+  @include responsive-font-size(3);
+  color: var(--gesso-form-error-text-color);
+}
diff --git a/source/03-components/form-item/form-item--radio/_form-item--radio.scss b/source/03-components/form-item/form-item--radio/_form-item--radio.scss
index 366d51c25..943255563 100644
--- a/source/03-components/form-item/form-item--radio/_form-item--radio.scss
+++ b/source/03-components/form-item/form-item--radio/_form-item--radio.scss
@@ -28,7 +28,7 @@
     &:checked {
       background-color: var(--gesso-form-background-checked-color);
       border: 2px solid var(--gesso-form-background-unchecked-color);
-      box-shadow: 0 0 0 2px var(--gesso-focus-color);
+      box-shadow: 0 0 0 2px var(--gesso-form-background-checked-color);
     }
 
     &:disabled {