diff --git a/.changeset/dull-ears-change.md b/.changeset/dull-ears-change.md
new file mode 100644
index 0000000000..05e9360b91
--- /dev/null
+++ b/.changeset/dull-ears-change.md
@@ -0,0 +1,2386 @@
+---
+"@spectrum-css/tokens": major
+---
+
+## Breaking change
+
+This major update creates a bridge between the Spectrum 1 (S1) and Spectrum 2 (S2) designs, dubbed "Spectrum 2 Foundations". These were built from a manual snapshot release via `@adobe/spectrum-tokens` and does _NOT_ reflect a fully S2 design asset. This introduces S2 corner rounding and color palette, along with a few component- and alias-level mappings. This approach allows us to temporarily create component CSS that can render S1, Express, or S2 designs by swapping out a few "system"-level variables.
+
+If you are looking to implement a fully S2 design, please explore the `next` releases instead of using this foundations release. The S2 components rendered with these token values will not fully match S2 design assets. **This release is used in Spectrum Web Components 1.x**.
+
+**Tokens changed:** 1104
+
+### Newly Deprecated (23)
+
+- `--spectrum---spectrum-corner-radius-300`
+- `--spectrum-corner-radius-400`
+- `--spectrum-corner-radius-500`
+- `--spectrum-corner-radius-600`
+- `--spectrum-corner-radius-700`
+- `--spectrum-corner-radius-800`
+- `--spectrum-corner-radius-1000`
+- `--spectrum-corner-radius-small-default`
+- `--spectrum-corner-radius-medium-default`
+- `--spectrum-corner-radius-large-default`
+- `--spectrum-corner-radius-extra-large-default`
+- `--spectrum-corner-radius-full`
+- `--spectrum-corner-radius-small-size-small`
+- `--spectrum-corner-radius-small-size-medium`
+- `--spectrum-corner-radius-small-size-large`
+- `--spectrum-corner-radius-small-size-extra-large`
+- `--spectrum-corner-radius-medium-size-extra-small`
+- `--spectrum-corner-radius-medium-size-small`
+- `--spectrum-corner-radius-medium-size-medium`
+- `--spectrum-corner-radius-medium-size-large`
+- `--spectrum-corner-radius-medium-size-extra-large`
+- `--spectrum-overlay-opacity`
+- `--spectrum-drop-shadow-color`: Replaced with `--spectrum-drop-shadow-color-100`
+
+### Added (185)
+
+- `accent-color-1500`
+
+- `--spectrum-accent-color-1600`
+- `--spectrum-informative-color-1500`
+- `--spectrum-informative-color-1600`
+- `--spectrum-negative-color-1500`
+- `--spectrum-negative-color-1600`
+- `--spectrum-notice-color-1500`
+- `--spectrum-notice-color-1600`
+- `--spectrum-positive-color-1500`
+- `--spectrum-positive-color-1600`
+- `--spectrum-negative-subdued-background-color-default`
+- `--spectrum-negative-subdued-background-color-hover`
+- `--spectrum-negative-subdued-background-color-down`
+- `--spectrum-negative-subdued-background-color-key-focus`
+- `--spectrum-accent-subtle-background-color-default`
+- `--spectrum-informative-subtle-background-color-default`
+- `--spectrum-positive-subtle-background-color-default`
+- `--spectrum-notice-subtle-background-color-default`
+- `--spectrum-negative-subtle-background-color-default`
+- `--spectrum-corner-radius-0`
+- `--spectrum-corner-radius-none`
+- `--spectrum-text-to-visual-400`
+- `--spectrum-transparent-white-25`
+- `--spectrum-transparent-white-50`
+- `--spectrum-transparent-white-75`
+- `--spectrum-transparent-white-1000`
+- `--spectrum-transparent-black-25`
+- `--spectrum-transparent-black-50`
+- `--spectrum-transparent-black-75`
+- `--spectrum-transparent-black-1000`
+- `--spectrum-gray-25`
+- `--spectrum-gray-1000`
+- `--spectrum-blue-1500`
+- `--spectrum-blue-1600`
+- `--spectrum-red-1500`
+- `--spectrum-red-1600`
+- `--spectrum-orange-1500`
+- `--spectrum-orange-1600`
+- `--spectrum-yellow-1500`
+- `--spectrum-yellow-1600`
+- `--spectrum-chartreuse-1500`
+- `--spectrum-chartreuse-1600`
+- `--spectrum-celery-1500`
+- `--spectrum-celery-1600`
+- `--spectrum-green-1500`
+- `--spectrum-green-1600`
+- `--spectrum-seafoam-1500`
+- `--spectrum-seafoam-1600`
+- `--spectrum-cyan-1500`
+- `--spectrum-cyan-1600`
+- `--spectrum-indigo-1500`
+- `--spectrum-indigo-1600`
+- `--spectrum-purple-1500`
+- `--spectrum-purple-1600`
+- `--spectrum-fuchsia-1500`
+- `--spectrum-fuchsia-1600`
+- `--spectrum-magenta-1500`
+- `--spectrum-magenta-1600`
+- `--spectrum-pink-100`
+- `--spectrum-pink-200`
+- `--spectrum-pink-300`
+- `--spectrum-pink-400`
+- `--spectrum-pink-500`
+- `--spectrum-pink-600`
+- `--spectrum-pink-700`
+- `--spectrum-pink-800`
+- `--spectrum-pink-900`
+- `--spectrum-pink-1000`
+- `--spectrum-pink-1100`
+- `--spectrum-pink-1200`
+- `--spectrum-pink-1300`
+- `--spectrum-pink-1400`
+- `--spectrum-pink-1500`
+- `--spectrum-pink-1600`
+- `--spectrum-turquoise-100`
+- `--spectrum-turquoise-200`
+- `--spectrum-turquoise-300`
+- `--spectrum-turquoise-400`
+- `--spectrum-turquoise-500`
+- `--spectrum-turquoise-600`
+- `--spectrum-turquoise-700`
+- `--spectrum-turquoise-800`
+- `--spectrum-turquoise-900`
+- `--spectrum-turquoise-1000`
+- `--spectrum-turquoise-1100`
+- `--spectrum-turquoise-1200`
+- `--spectrum-turquoise-1300`
+- `--spectrum-turquoise-1400`
+- `--spectrum-turquoise-1500`
+- `--spectrum-turquoise-1600`
+- `--spectrum-brown-100`
+- `--spectrum-brown-200`
+- `--spectrum-brown-300`
+- `--spectrum-brown-400`
+- `--spectrum-brown-500`
+- `--spectrum-brown-600`
+- `--spectrum-brown-700`
+- `--spectrum-brown-800`
+- `--spectrum-brown-900`
+- `--spectrum-brown-1000`
+- `--spectrum-brown-1100`
+- `--spectrum-brown-1200`
+- `--spectrum-brown-1300`
+- `--spectrum-brown-1400`
+- `--spectrum-brown-1500`
+- `--spectrum-brown-1600`
+- `--spectrum-silver-100`
+- `--spectrum-silver-200`
+- `--spectrum-silver-300`
+- `--spectrum-silver-400`
+- `--spectrum-silver-500`
+- `--spectrum-silver-600`
+- `--spectrum-silver-700`
+- `--spectrum-silver-800`
+- `--spectrum-silver-900`
+- `--spectrum-silver-1000`
+- `--spectrum-silver-1100`
+- `--spectrum-silver-1200`
+- `--spectrum-silver-1300`
+- `--spectrum-silver-1400`
+- `--spectrum-silver-1500`
+- `--spectrum-silver-1600`
+- `--spectrum-cinnamon-100`
+- `--spectrum-cinnamon-200`
+- `--spectrum-cinnamon-300`
+- `--spectrum-cinnamon-400`
+- `--spectrum-cinnamon-500`
+- `--spectrum-cinnamon-600`
+- `--spectrum-cinnamon-700`
+- `--spectrum-cinnamon-800`
+- `--spectrum-cinnamon-900`
+- `--spectrum-cinnamon-1000`
+- `--spectrum-cinnamon-1100`
+- `--spectrum-cinnamon-1200`
+- `--spectrum-cinnamon-1300`
+- `--spectrum-cinnamon-1400`
+- `--spectrum-cinnamon-1500`
+- `--spectrum-cinnamon-1600`
+- `--spectrum-background-elevated-color`
+- `--spectrum-background-pasteboard-color`
+- `--spectrum-brown-visual-color`
+- `--spectrum-cinnamon-visual-color`
+- `--spectrum-pink-visual-color`
+- `--spectrum-silver-visual-color`
+- `--spectrum-turquoise-visual-color`
+- `--spectrum-brown-background-color-default`
+- `--spectrum-cinnamon-background-color-default`
+- `--spectrum-pink-background-color-default`
+- `--spectrum-silver-background-color-default`
+- `--spectrum-turquoise-background-color-default`
+- `--spectrum-title-color`
+- `--spectrum-drop-shadow-color-100`
+- `--spectrum-drop-shadow-color-200`
+- `--spectrum-drop-shadow-color-300`
+- `--spectrum-drop-shadow-emphasized-default-color`
+- `--spectrum-drop-shadow-emphasized-hover-color`
+- `--spectrum-drop-shadow-elevated-color`
+- `--spectrum-neutral-subtle-background-color-default`
+- `--spectrum-gray-subtle-background-color-default`
+- `--spectrum-blue-subtle-background-color-default`
+- `--spectrum-green-subtle-background-color-default`
+- `--spectrum-orange-subtle-background-color-default`
+- `--spectrum-red-subtle-background-color-default`
+- `--spectrum-brown-subtle-background-color-default`
+- `--spectrum-cinnamon-subtle-background-color-default`
+- `--spectrum-celery-subtle-background-color-default`
+- `--spectrum-chartreuse-subtle-background-color-default`
+- `--spectrum-cyan-subtle-background-color-default`
+- `--spectrum-fuchsia-subtle-background-color-default`
+- `--spectrum-indigo-subtle-background-color-default`
+- `--spectrum-magenta-subtle-background-color-default`
+- `--spectrum-pink-subtle-background-color-default`
+- `--spectrum-purple-subtle-background-color-default`
+- `--spectrum-seafoam-subtle-background-color-default`
+- `--spectrum-silver-subtle-background-color-default`
+- `--spectrum-turquoise-subtle-background-color-default`
+- `--spectrum-yellow-subtle-background-color-default`
+- `--spectrum-drop-shadow-dragged-color`
+- `--spectrum-static-black-text-color`
+- `--spectrum-static-white-text-color`
+- `--spectrum-track-color`
+- `--spectrum-static-black-track-color`
+- `--spectrum-static-white-track-color`
+- `--spectrum-static-black-track-indicator-color`
+- `--spectrum-static-white-track-indicator-color`
+
+### Updated (896)
+
+####  Added Properties (112)
+
+- `--spectrum-heading-sans-serif-font-weight`
+  - **value**: `--spectrum-bold-font-weight`
+- `--spectrum-heading-serif-font-weight`
+  - **value**: `--spectrum-bold-font-weight`
+- `--spectrum-heading-cjk-font-weight`
+  - **value**: `--spectrum-extra-bold-font-weight`
+- `--spectrum-heading-sans-serif-emphasized-font-weight`
+  - **value**: `--spectrum-bold-font-weight`
+- `--spectrum-heading-serif-emphasized-font-weight`
+  - **value**: `--spectrum-bold-font-weight`
+- `--spectrum-accent-color-100`
+  - **value**: `--spectrum-blue-100`
+- `--spectrum-accent-color-200`
+  - **value**: `--spectrum-blue-200`
+- `--spectrum-accent-color-300`
+  - **value**: `--spectrum-blue-300`
+- `--spectrum-accent-color-400`
+  - **value**: `--spectrum-blue-400`
+- `--spectrum-accent-color-500`
+  - **value**: `--spectrum-blue-500`
+- `--spectrum-accent-color-600`
+  - **value**: `--spectrum-blue-600`
+- `--spectrum-accent-color-700`
+  - **value**: `--spectrum-blue-700`
+- `--spectrum-accent-color-800`
+  - **value**: `--spectrum-blue-800`
+- `--spectrum-accent-color-900`
+  - **value**: `--spectrum-blue-900`
+- `--spectrum-accent-color-1000`
+  - **value**: `--spectrum-blue-1000`
+- `--spectrum-accent-color-1100`
+  - **value**: `--spectrum-blue-1100`
+- `--spectrum-accent-color-1200`
+  - **value**: `--spectrum-blue-1200`
+- `--spectrum-accent-color-1300`
+  - **value**: `--spectrum-blue-1300`
+- `--spectrum-accent-color-1400`
+  - **value**: `--spectrum-blue-1400`
+- `--spectrum-corner-radius-75`
+  - **value**: 4px
+- `--spectrum-corner-radius-100`
+  - **value**: 8px
+- `--spectrum-corner-radius-200`
+  - **value**: 10px
+- `--spectrum-drop-shadow-x`
+  - **value**: 0px
+- `--spectrum-drop-shadow-y`
+  - **value**: 1px (desktop)
+  - **value**: 2px (mobile)
+- `--spectrum-drop-shadow-blur`
+  - **value**: 4px (desktop)
+  - **value**: 6px (mobile)
+- `--spectrum-border-width-100`
+  - **value**: 1px
+- `--spectrum-checkbox-control-size-small`
+  - **value**: 12px (desktop)
+  - **value**: 16px (mobile)
+- `--spectrum-checkbox-control-size-medium`
+  - **value**: 14px (desktop)
+  - **value**: 18px (mobile)
+- `--spectrum-checkbox-control-size-large`
+  - **value**: 16px (desktop)
+  - **value**: 20px (mobile)
+- `--spectrum-checkbox-control-size-extra-large`
+  - **value**: 18px (desktop)
+  - **value**: 22px (mobile)
+- `--spectrum-checkbox-top-to-control-small`
+  - **value**: 6px (desktop)
+  - **value**: 7px (mobile)
+- `--spectrum-checkbox-top-to-control-medium`
+  - **value**: 9px (desktop)
+  - **value**: 11px (mobile)
+- `--spectrum-checkbox-top-to-control-large`
+  - **value**: 12px (desktop)
+  - **value**: 15px (mobile)
+- `--spectrum-checkbox-top-to-control-extra-large`
+  - **value**: 15px (desktop)
+  - **value**: 19px (mobile)
+- `--spectrum-switch-control-width-small`
+  - **value**: 23px (desktop)
+  - **value**: 32px (mobile)
+- `--spectrum-switch-control-width-medium`
+  - **value**: 26px (desktop)
+  - **value**: 36px (mobile)
+- `--spectrum-switch-control-width-large`
+  - **value**: 29px (desktop)
+  - **value**: 41px (mobile)
+- `--spectrum-switch-control-width-extra-large`
+  - **value**: 33px (desktop)
+  - **value**: 46px (mobile)
+- `--spectrum-switch-control-height-small`
+  - **value**: 12px (desktop)
+  - **value**: 16px (mobile)
+- `--spectrum-switch-control-height-medium`
+  - **value**: 14px (desktop)
+  - **value**: 18px (mobile)
+- `--spectrum-switch-control-height-large`
+  - **value**: 16px (desktop)
+  - **value**: 20px (mobile)
+- `--spectrum-switch-control-height-extra-large`
+  - **value**: 18px (desktop)
+  - **value**: 22px (mobile)
+- `--spectrum-switch-top-to-control-small`
+  - **value**: 6px (desktop)
+  - **value**: 7px (mobile)
+- `--spectrum-switch-top-to-control-medium`
+  - **value**: 9px (desktop)
+  - **value**: 11px (mobile)
+- `--spectrum-switch-top-to-control-large`
+  - **value**: 12px (desktop)
+  - **value**: 15px (mobile)
+- `--spectrum-switch-top-to-control-extra-large`
+  - **value**: 15px (desktop)
+  - **value**: 19px (mobile)
+- `--spectrum-radio-button-control-size-small`
+  - **value**: 12px (desktop)
+  - **value**: 16px (mobile)
+- `--spectrum-radio-button-control-size-medium`
+  - **value**: 14px (desktop)
+  - **value**: 18px (mobile)
+- `--spectrum-radio-button-control-size-large`
+  - **value**: 16px (desktop)
+  - **value**: 20px (mobile)
+- `--spectrum-radio-button-control-size-extra-large`
+  - **value**: 18px (desktop)
+  - **value**: 22px (mobile)
+- `--spectrum-radio-button-top-to-control-small`
+  - **value**: 6px (desktop)
+  - **value**: 7px (mobile)
+- `--spectrum-radio-button-top-to-control-medium`
+  - **value**: 9px (desktop)
+  - **value**: 11px (mobile)
+- `--spectrum-radio-button-top-to-control-large`
+  - **value**: 12px (desktop)
+  - **value**: 15px (mobile)
+- `--spectrum-radio-button-top-to-control-extra-large`
+  - **value**: 15px (desktop)
+  - **value**: 19px (mobile)
+- `--spectrum-slider-track-thickness`
+  - **value**: 2px
+- `--spectrum-slider-control-height-small`
+  - **value**: 14px (desktop)
+  - **value**: 18px (mobile)
+- `--spectrum-slider-control-height-medium`
+  - **value**: 16px (desktop)
+  - **value**: 20px (mobile)
+- `--spectrum-slider-control-height-large`
+  - **value**: 18px (desktop)
+  - **value**: 22px (mobile)
+- `--spectrum-slider-control-height-extra-large`
+  - **value**: 20px (desktop)
+  - **value**: 26px (mobile)
+- `--spectrum-slider-handle-size-small`
+  - **value**: 14px (desktop)
+  - **value**: 18px (mobile)
+- `--spectrum-slider-handle-size-medium`
+  - **value**: 16px (desktop)
+  - **value**: 20px (mobile)
+- `--spectrum-slider-handle-size-large`
+  - **value**: 18px (desktop)
+  - **value**: 22px (mobile)
+- `--spectrum-slider-handle-size-extra-large`
+  - **value**: 20px (desktop)
+  - **value**: 26px (mobile)
+- `--spectrum-slider-handle-border-width-down-small`
+  - **value**: 5px (desktop)
+  - **value**: 7px (mobile)
+- `--spectrum-slider-handle-border-width-down-medium`
+  - **value**: 6px (desktop)
+  - **value**: 8px (mobile)
+- `--spectrum-slider-handle-border-width-down-large`
+  - **value**: 7px (desktop)
+  - **value**: 9px (mobile)
+- `--spectrum-slider-handle-border-width-down-extra-large`
+  - **value**: 8px (desktop)
+  - **value**: 11px (mobile)
+- `--spectrum-slider-handle-gap`
+  - **value**: 4px
+- `--spectrum-slider-bottom-to-handle-small`
+  - **value**: 5px (desktop)
+  - **value**: 6px (mobile)
+- `--spectrum-slider-bottom-to-handle-medium`
+  - **value**: 8px (desktop)
+  - **value**: 10px (mobile)
+- `--spectrum-slider-bottom-to-handle-large`
+  - **value**: 11px (desktop)
+  - **value**: 14px (mobile)
+- `--spectrum-slider-bottom-to-handle-extra-large`
+  - **value**: 14px (desktop)
+  - **value**: 17px (mobile)
+- `--spectrum-picker-border-width`
+  - **value**: border-width-100
+- `--spectrum-in-field-button-fill-stacked-inner-border-rounding`
+  - **value**: 0px
+- `--spectrum-in-field-button-edge-to-fill`
+  - **value**: 0px
+- `--spectrum-in-field-button-stacked-inner-edge-to-fill`
+  - **value**: 0px
+- `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium`
+  - **value**: 3px
+- `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large`
+  - **value**: 4px
+- `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large`
+  - **value**: 5px
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small`
+  - **value**: `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small`
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium`
+  - **value**: `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium`
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large`
+  - **value**: `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large`
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large`
+  - **value**: `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large`
+- `--spectrum-white`
+  - **value**: rgb(255, 255, 255) (light)
+  - **value**: rgb(255, 255, 255) (dark)
+- `--spectrum-transparent-white-100`
+  - **value**: rgba(255, 255, 255, 0.11) (light)
+  - **value**: rgba(255, 255, 255, 0.11) (dark)
+- `--spectrum-transparent-white-200`
+  - **value**: rgba(255, 255, 255, 0.14) (light)
+  - **value**: rgba(255, 255, 255, 0.14) (dark)
+- `--spectrum-transparent-white-300`
+  - **value**: rgba(255, 255, 255, 0.17) (light)
+  - **value**: rgba(255, 255, 255, 0.17) (dark)
+- `--spectrum-transparent-white-400`
+  - **value**: rgba(255, 255, 255, 0.21) (light)
+  - **value**: rgba(255, 255, 255, 0.21) (dark)
+- `--spectrum-transparent-white-500`
+  - **value**: rgba(255, 255, 255, 0.39) (light)
+  - **value**: rgba(255, 255, 255, 0.39) (dark)
+- `--spectrum-transparent-white-600`
+  - **value**: rgba(255, 255, 255, 0.51) (light)
+  - **value**: rgba(255, 255, 255, 0.51) (dark)
+- `--spectrum-transparent-white-700`
+  - **value**: rgba(255, 255, 255, 0.66) (light)
+  - **value**: rgba(255, 255, 255, 0.66) (dark)
+- `--spectrum-transparent-white-800`
+  - **value**: rgba(255, 255, 255, 0.85) (light)
+  - **value**: rgba(255, 255, 255, 0.85) (dark)
+- `--spectrum-transparent-white-900`
+  - **value**: rgba(255, 255, 255, 0.94) (light)
+  - **value**: rgba(255, 255, 255, 0.94) (dark)
+- `--spectrum-transparent-black-100`
+  - **value**: rgba(0, 0, 0, 0.09) (light)
+  - **value**: rgba(0, 0, 0, 0.09) (dark)
+- `--spectrum-transparent-black-200`
+  - **value**: rgba(0, 0, 0, 0.12) (light)
+  - **value**: rgba(0, 0, 0, 0.12) (dark)
+- `--spectrum-transparent-black-300`
+  - **value**: rgba(0, 0, 0, 0.15) (light)
+  - **value**: rgba(0, 0, 0, 0.15) (dark)
+- `--spectrum-transparent-black-400`
+  - **value**: rgba(0, 0, 0, 0.22) (light)
+  - **value**: rgba(0, 0, 0, 0.22) (dark)
+- `--spectrum-transparent-black-500`
+  - **value**: rgba(0, 0, 0, 0.44) (light)
+  - **value**: rgba(0, 0, 0, 0.44) (dark)
+- `--spectrum-transparent-black-600`
+  - **value**: rgba(0, 0, 0, 0.56) (light)
+  - **value**: rgba(0, 0, 0, 0.56) (dark)
+- `--spectrum-transparent-black-700`
+  - **value**: rgba(0, 0, 0, 0.69) (light)
+  - **value**: rgba(0, 0, 0, 0.69) (dark)
+- `--spectrum-transparent-black-800`
+  - **value**: rgba(0, 0, 0, 0.84) (light)
+  - **value**: rgba(0, 0, 0, 0.84) (dark)
+- `--spectrum-transparent-black-900`
+  - **value**: rgba(0, 0, 0, 0.93) (light)
+  - **value**: rgba(0, 0, 0, 0.93) (dark)
+- `--spectrum-background-base-color`
+  - **value**: `--spectrum-gray-25`
+- `--spectrum-background-layer-1-color`
+  - **value**: `--spectrum-gray-50`
+- `--spectrum-neutral-background-color-default`
+  - **value**: `--spectrum-gray-800`
+- `--spectrum-neutral-background-color-hover`
+  - **value**: `--spectrum-gray-900`
+- `--spectrum-neutral-background-color-down`
+  - **value**: `--spectrum-gray-900`
+- `--spectrum-neutral-background-color-key-focus`
+  - **value**: `--spectrum-gray-900`
+- `--spectrum-neutral-background-color-selected-default`
+  - **value**: `--spectrum-gray-800`
+- `--spectrum-neutral-background-color-selected-hover`
+  - **value**: `--spectrum-gray-900`
+- `--spectrum-neutral-background-color-selected-down`
+  - **value**: `--spectrum-gray-900`
+- `--spectrum-neutral-background-color-selected-key-focus`
+  - **value**: `--spectrum-gray-900`
+
+#### Deleted Properties (368)
+
+- `--spectrum-heading-sans-serif-font-weight`
+  - **value**: `--spectrum-bold-font-weight` (spectrum)
+  - **value**: `--spectrum-black-font-weight` (express) **deprecated**
+- `--spectrum-heading-serif-font-weight`
+  - **value**: `--spectrum-bold-font-weight` (spectrum)
+  - **value**: `--spectrum-black-font-weight` (express) **deprecated**
+- `--spectrum-heading-cjk-font-weight`
+  - **value**: `--spectrum-extra-bold-font-weight` (spectrum)
+  - **value**: `--spectrum-black-font-weight` (express) **deprecated**
+- `--spectrum-heading-sans-serif-emphasized-font-weight`
+  - **value**: `--spectrum-bold-font-weight` (spectrum)
+  - **value**: `--spectrum-black-font-weight` (express) **deprecated**
+- `--spectrum-heading-serif-emphasized-font-weight`
+  - **value**: `--spectrum-bold-font-weight` (spectrum)
+  - **value**: `--spectrum-black-font-weight` (express) **deprecated**
+- `--spectrum-accent-color-100`
+  - **value**: `--spectrum-blue-100` (spectrum)
+  - **value**: `--spectrum-indigo-100` (express) **deprecated**
+- `--spectrum-accent-color-200`
+  - **value**: `--spectrum-blue-200` (spectrum)
+  - **value**: `--spectrum-indigo-200` (express) **deprecated**
+- `--spectrum-accent-color-300`
+  - **value**: `--spectrum-blue-300` (spectrum)
+  - **value**: `--spectrum-indigo-300` (express) **deprecated**
+- `--spectrum-accent-color-400`
+  - **value**: `--spectrum-blue-400` (spectrum)
+  - **value**: `--spectrum-indigo-400` (express) **deprecated**
+- `--spectrum-accent-color-500`
+  - **value**: `--spectrum-blue-500` (spectrum)
+  - **value**: `--spectrum-indigo-500` (express) **deprecated**
+- `--spectrum-accent-color-600`
+  - **value**: `--spectrum-blue-600` (spectrum)
+  - **value**: `--spectrum-indigo-600` (express) **deprecated**
+- `--spectrum-accent-color-700`
+  - **value**: `--spectrum-blue-700` (spectrum)
+  - **value**: `--spectrum-indigo-700` (express) **deprecated**
+- `--spectrum-accent-color-800`
+  - **value**: `--spectrum-blue-800` (spectrum)
+  - **value**: `--spectrum-indigo-800` (express) **deprecated**
+- `--spectrum-accent-color-900`
+  - **value**: `--spectrum-blue-900` (spectrum)
+  - **value**: `--spectrum-indigo-900` (express) **deprecated**
+- `--spectrum-accent-color-1000`
+  - **value**: `--spectrum-blue-1000` (spectrum)
+  - **value**: `--spectrum-indigo-1000` (express) **deprecated**
+- `--spectrum-accent-color-1100`
+  - **value**: `--spectrum-blue-1100` (spectrum)
+  - **value**: `--spectrum-indigo-1100` (express) **deprecated**
+- `--spectrum-accent-color-1200`
+  - **value**: `--spectrum-blue-1200` (spectrum)
+  - **value**: `--spectrum-indigo-1200` (express) **deprecated**
+- `--spectrum-accent-color-1300`
+  - **value**: `--spectrum-blue-1300` (spectrum)
+  - **value**: `--spectrum-indigo-1300` (express) **deprecated**
+- `--spectrum-accent-color-1400`
+  - **value**: `--spectrum-blue-1400` (spectrum)
+  - **value**: `--spectrum-indigo-1400` (express) **deprecated**
+- `--spectrum-corner-radius-75`
+  - **value**: 2px (spectrum)
+  - **value**: 3px (express | desktop) **deprecated**
+  - **value**: 4px (express | mobile) **deprecated**
+- `--spectrum-corner-radius-100`
+  - **value**: 4px (spectrum | desktop)
+  - **value**: 5px (spectrum | mobile)
+  - **value**: 6px (express | desktop) **deprecated**
+  - **value**: 8px (express | mobile) **deprecated**
+- `--spectrum-corner-radius-200`
+  - **value**: 8px (spectrum | desktop)
+  - **value**: 10px (spectrum | mobile)
+  - **value**: 12px (express | desktop) **deprecated**
+  - **value**: 16px (express | mobile) **deprecated**
+- `--spectrum-drop-shadow-x`
+  - **value**: 0px (spectrum)
+  - **value**: 0px (express | desktop) **deprecated**
+  - **value**: 0px (express | mobile) **deprecated**
+- `--spectrum-drop-shadow-y`
+  - **value**: 1px (spectrum | desktop)
+  - **value**: 2px (spectrum | mobile)
+  - **value**: 4px (express | desktop) **deprecated**
+  - **value**: 4px (express | mobile) **deprecated**
+- `--spectrum-drop-shadow-blur`
+  - **value**: 4px (spectrum | desktop)
+  - **value**: 6px (spectrum | mobile)
+  - **value**: 16px (express | desktop) **deprecated**
+  - **value**: 16px (express | mobile) **deprecated**
+- `--spectrum-border-width-100`
+  - **value**: 1px (spectrum)
+  - **value**: 2px (express) **deprecated**
+- `--spectrum-checkbox-control-size-small`
+  - **value**: 12px (spectrum | desktop)
+  - **value**: 16px (spectrum | mobile)
+  - **value**: 14px (express | desktop) **deprecated**
+  - **value**: 18px (express | mobile) **deprecated**
+- `--spectrum-checkbox-control-size-medium`
+  - **value**: 14px (spectrum | desktop)
+  - **value**: 18px (spectrum | mobile)
+  - **value**: 16px (express | desktop) **deprecated**
+  - **value**: 20px (express | mobile) **deprecated**
+- `--spectrum-checkbox-control-size-large`
+  - **value**: 16px (spectrum | desktop)
+  - **value**: 20px (spectrum | mobile)
+  - **value**: 18px (express | desktop) **deprecated**
+  - **value**: 22px (express | mobile) **deprecated**
+- `--spectrum-checkbox-control-size-extra-large`
+  - **value**: 18px (spectrum | desktop)
+  - **value**: 22px (spectrum | mobile)
+  - **value**: 20px (express | desktop) **deprecated**
+  - **value**: 26px (express | mobile) **deprecated**
+- `--spectrum-checkbox-top-to-control-small`
+  - **value**: 6px (spectrum | desktop)
+  - **value**: 7px (spectrum | mobile)
+  - **value**: 5px (express | desktop) **deprecated**
+  - **value**: 6px (express | mobile) **deprecated**
+- `--spectrum-checkbox-top-to-control-medium`
+  - **value**: 9px (spectrum | desktop)
+  - **value**: 11px (spectrum | mobile)
+  - **value**: 8px (express | desktop) **deprecated**
+  - **value**: 10px (express | mobile) **deprecated**
+- `--spectrum-checkbox-top-to-control-large`
+  - **value**: 12px (spectrum | desktop)
+  - **value**: 15px (spectrum | mobile)
+  - **value**: 11px (express | desktop) **deprecated**
+  - **value**: 14px (express | mobile) **deprecated**
+- `--spectrum-checkbox-top-to-control-extra-large`
+  - **value**: 15px (spectrum | desktop)
+  - **value**: 19px (spectrum | mobile)
+  - **value**: 14px (express | desktop) **deprecated**
+  - **value**: 17px (express | mobile) **deprecated**
+- `--spectrum-switch-control-width-small`
+  - **value**: 23px (spectrum | desktop)
+  - **value**: 32px (spectrum | mobile)
+  - **value**: 25px (express | desktop) **deprecated**
+  - **value**: 32px (express | mobile) **deprecated**
+- `--spectrum-switch-control-width-medium`
+  - **value**: 26px (spectrum | desktop)
+  - **value**: 36px (spectrum | mobile)
+  - **value**: 28px (express | desktop) **deprecated**
+  - **value**: 36px (express | mobile) **deprecated**
+- `--spectrum-switch-control-width-large`
+  - **value**: 29px (spectrum | desktop)
+  - **value**: 41px (spectrum | mobile)
+  - **value**: 32px (express | desktop) **deprecated**
+  - **value**: 41px (express | mobile) **deprecated**
+- `--spectrum-switch-control-width-extra-large`
+  - **value**: 33px (spectrum | desktop)
+  - **value**: 46px (spectrum | mobile)
+  - **value**: 35px (express | desktop) **deprecated**
+  - **value**: 46px (express | mobile) **deprecated**
+- `--spectrum-switch-control-height-small`
+  - **value**: 12px (spectrum | desktop)
+  - **value**: 16px (spectrum | mobile)
+  - **value**: 14px (express | desktop) **deprecated**
+  - **value**: 18px (express | mobile) **deprecated**
+- `--spectrum-switch-control-height-medium`
+  - **value**: 14px (spectrum | desktop)
+  - **value**: 18px (spectrum | mobile)
+  - **value**: 16px (express | desktop) **deprecated**
+  - **value**: 20px (express | mobile) **deprecated**
+- `--spectrum-switch-control-height-large`
+  - **value**: 16px (spectrum | desktop)
+  - **value**: 20px (spectrum | mobile)
+  - **value**: 18px (express | desktop) **deprecated**
+  - **value**: 22px (express | mobile) **deprecated**
+- `--spectrum-switch-control-height-extra-large`
+  - **value**: 18px (spectrum | desktop)
+  - **value**: 22px (spectrum | mobile)
+  - **value**: 20px (express | desktop) **deprecated**
+  - **value**: 26px (express | mobile) **deprecated**
+- `--spectrum-switch-top-to-control-small`
+  - **value**: 6px (spectrum | desktop)
+  - **value**: 7px (spectrum | mobile)
+  - **value**: 5px (express | desktop) **deprecated**
+  - **value**: 6px (express | mobile) **deprecated**
+- `--spectrum-switch-top-to-control-medium`
+  - **value**: 9px (spectrum | desktop)
+  - **value**: 11px (spectrum | mobile)
+  - **value**: 8px (express | desktop) **deprecated**
+  - **value**: 10px (express | mobile) **deprecated**
+- `--spectrum-switch-top-to-control-large`
+  - **value**: 12px (spectrum | desktop)
+  - **value**: 15px (spectrum | mobile)
+  - **value**: 11px (express | desktop) **deprecated**
+  - **value**: 14px (express | mobile) **deprecated**
+- `--spectrum-switch-top-to-control-extra-large`
+  - **value**: 15px (spectrum | desktop)
+  - **value**: 19px (spectrum | mobile)
+  - **value**: 14px (express | desktop) **deprecated**
+  - **value**: 17px (express | mobile) **deprecated**
+- `--spectrum-radio-button-control-size-small`
+  - **value**: 12px (spectrum | desktop)
+  - **value**: 16px (spectrum | mobile)
+  - **value**: 14px (express | desktop) **deprecated**
+  - **value**: 18px (express | mobile) **deprecated**
+- `--spectrum-radio-button-control-size-medium`
+  - **value**: 14px (spectrum | desktop)
+  - **value**: 18px (spectrum | mobile)
+  - **value**: 16px (express | desktop) **deprecated**
+  - **value**: 20px (express | mobile) **deprecated**
+- `--spectrum-radio-button-control-size-large`
+  - **value**: 16px (spectrum | desktop)
+  - **value**: 20px (spectrum | mobile)
+  - **value**: 18px (express | desktop) **deprecated**
+  - **value**: 22px (express | mobile) **deprecated**
+- `--spectrum-radio-button-control-size-extra-large`
+  - **value**: 18px (spectrum | desktop)
+  - **value**: 22px (spectrum | mobile)
+  - **value**: 20px (express | desktop) **deprecated**
+  - **value**: 26px (express | mobile) **deprecated**
+- `--spectrum-radio-button-top-to-control-small`
+  - **value**: 6px (spectrum | desktop)
+  - **value**: 7px (spectrum | mobile)
+  - **value**: 5px (express | desktop) **deprecated**
+  - **value**: 6px (express | mobile) **deprecated**
+- `--spectrum-radio-button-top-to-control-medium`
+  - **value**: 9px (spectrum | desktop)
+  - **value**: 11px (spectrum | mobile)
+  - **value**: 8px (express | desktop) **deprecated**
+  - **value**: 10px (express | mobile) **deprecated**
+- `--spectrum-radio-button-top-to-control-large`
+  - **value**: 12px (spectrum | desktop)
+  - **value**: 15px (spectrum | mobile)
+  - **value**: 11px (express | desktop) **deprecated**
+  - **value**: 14px (express | mobile) **deprecated**
+- `--spectrum-radio-button-top-to-control-extra-large`
+  - **value**: 15px (spectrum | desktop)
+  - **value**: 19px (spectrum | mobile)
+  - **value**: 14px (express | desktop) **deprecated**
+  - **value**: 17px (express | mobile) **deprecated**
+- `--spectrum-slider-track-thickness`
+  - **value**: 2px (spectrum)
+  - **value**: 4px (express) **deprecated**
+- `--spectrum-slider-control-height-small`
+  - **value**: 14px (spectrum | desktop)
+  - **value**: 18px (spectrum | mobile)
+  - **value**: 18px (express | desktop) **deprecated**
+  - **value**: 22px (express | mobile) **deprecated**
+- `--spectrum-slider-control-height-medium`
+  - **value**: 16px (spectrum | desktop)
+  - **value**: 20px (spectrum | mobile)
+  - **value**: 20px (express | desktop) **deprecated**
+  - **value**: 24px (express | mobile) **deprecated**
+- `--spectrum-slider-control-height-large`
+  - **value**: 18px (spectrum | desktop)
+  - **value**: 22px (spectrum | mobile)
+  - **value**: 22px (express | desktop) **deprecated**
+  - **value**: 28px (express | mobile) **deprecated**
+- `--spectrum-slider-control-height-extra-large`
+  - **value**: 20px (spectrum | desktop)
+  - **value**: 26px (spectrum | mobile)
+  - **value**: 24px (express | desktop) **deprecated**
+  - **value**: 30px (express | mobile) **deprecated**
+- `--spectrum-slider-handle-size-small`
+  - **value**: 14px (spectrum | desktop)
+  - **value**: 18px (spectrum | mobile)
+  - **value**: 18px (express | desktop) **deprecated**
+  - **value**: 22px (express | mobile) **deprecated**
+- `--spectrum-slider-handle-size-medium`
+  - **value**: 16px (spectrum | desktop)
+  - **value**: 20px (spectrum | mobile)
+  - **value**: 20px (express | desktop) **deprecated**
+  - **value**: 24px (express | mobile) **deprecated**
+- `--spectrum-slider-handle-size-large`
+  - **value**: 18px (spectrum | desktop)
+  - **value**: 22px (spectrum | mobile)
+  - **value**: 22px (express | desktop) **deprecated**
+  - **value**: 28px (express | mobile) **deprecated**
+- `--spectrum-slider-handle-size-extra-large`
+  - **value**: 20px (spectrum | desktop)
+  - **value**: 26px (spectrum | mobile)
+  - **value**: 24px (express | desktop) **deprecated**
+  - **value**: 30px (express | mobile) **deprecated**
+- `--spectrum-slider-handle-border-width-down-small`
+  - **value**: 5px (spectrum | desktop)
+  - **value**: 7px (spectrum | mobile)
+  - **value**: `--spectrum-border-width-200` (express | desktop) **deprecated**
+  - **value**: `--spectrum-border-width-200` (express | mobile) **deprecated**
+- `--spectrum-slider-handle-border-width-down-medium`
+  - **value**: 6px (spectrum | desktop)
+  - **value**: 8px (spectrum | mobile)
+  - **value**: `--spectrum-border-width-200` (express | desktop) **deprecated**
+  - **value**: `--spectrum-border-width-200` (express | mobile) **deprecated**
+- `--spectrum-slider-handle-border-width-down-large`
+  - **value**: 7px (spectrum | desktop)
+  - **value**: 9px (spectrum | mobile)
+  - **value**: `--spectrum-border-width-200` (express | desktop) **deprecated**
+  - **value**: `--spectrum-border-width-200` (express | mobile) **deprecated**
+- `--spectrum-slider-handle-border-width-down-extra-large`
+  - **value**: 8px (spectrum | desktop)
+  - **value**: 11px (spectrum | mobile)
+  - **value**: `--spectrum-border-width-200` (express | desktop) **deprecated**
+  - **value**: `--spectrum-border-width-200` (express | mobile) **deprecated**
+- `--spectrum-slider-handle-gap`
+  - **value**: 4px (spectrum)
+  - **value**: 0px (express) **deprecated**
+- `--spectrum-slider-bottom-to-handle-small`
+  - **value**: 5px (spectrum | desktop)
+  - **value**: 6px (spectrum | mobile)
+  - **value**: 3px (express | desktop) **deprecated**
+  - **value**: 4px (express | mobile) **deprecated**
+- `--spectrum-slider-bottom-to-handle-medium`
+  - **value**: 8px (spectrum | desktop)
+  - **value**: 10px (spectrum | mobile)
+  - **value**: 6px (express | desktop) **deprecated**
+  - **value**: 8px (express | mobile) **deprecated**
+- `--spectrum-slider-bottom-to-handle-large`
+  - **value**: 11px (spectrum | desktop)
+  - **value**: 14px (spectrum | mobile)
+  - **value**: 9px (express | desktop) **deprecated**
+  - **value**: 12px (express | mobile) **deprecated**
+- `--spectrum-slider-bottom-to-handle-extra-large`
+  - **value**: 14px (spectrum | desktop)
+  - **value**: 17px (spectrum | mobile)
+  - **value**: 12px (express | desktop) **deprecated**
+  - **value**: 15px (express | mobile) **deprecated**
+- `--spectrum-picker-border-width`
+  - **value**: `--spectrum-border-width-100` (spectrum)
+  - **value**: 0 (express)
+- `--spectrum-in-field-button-fill-stacked-inner-border-rounding`
+  - **value**: 0px (spectrum)
+  - **value**: 1px (express)
+- `--spectrum-in-field-button-edge-to-fill`
+  - **value**: 0px (spectrum)
+  - **value**: 4px (express)
+- `--spectrum-in-field-button-stacked-inner-edge-to-fill`
+  - **value**: 0px (spectrum)
+  - **value**: 1px (express)
+- `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium`
+  - **value**: 3px (spectrum)
+  - **value**: 5px (express)
+- `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large`
+  - **value**: 4px (spectrum)
+  - **value**: 7px (express)
+- `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large`
+  - **value**: 5px (spectrum)
+  - **value**: 8px (express)
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small`
+  - **value**: `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small` (spectrum)
+  - **value**: 1px (express)
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium`
+  - **value**: `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium` (spectrum)
+  - **value**: 1px (express)
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large`
+  - **value**: `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large` (spectrum)
+  - **value**: 3px (express)
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large`
+  - **value**: `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large` (spectrum)
+  - **value**: 4px (express)
+- `--spectrum-icon-color-blue-primary-default`
+  - **value**: `--spectrum-blue-800` (darkest)
+- `--spectrum-icon-color-green-primary-default`
+  - **value**: `--spectrum-green-800` (darkest)
+- `--spectrum-icon-color-red-primary-default`
+  - **value**: `--spectrum-red-700` (darkest)
+- `--spectrum-icon-color-yellow-primary-default`
+  - **value**: `--spectrum-yellow-1000` (darkest)
+- `--spectrum-white`
+  - **value**: rgb(255, 255, 255)
+- `--spectrum-transparent-white-100`
+  - **value**: rgba(255, 255, 255, 0)
+- `--spectrum-transparent-white-200`
+  - **value**: rgba(255, 255, 255, 0.1)
+- `--spectrum-transparent-white-300`
+  - **value**: rgba(255, 255, 255, 0.25)
+- `--spectrum-transparent-white-400`
+  - **value**: rgba(255, 255, 255, 0.4)
+- `--spectrum-transparent-white-500`
+  - **value**: rgba(255, 255, 255, 0.55)
+- `--spectrum-transparent-white-600`
+  - **value**: rgba(255, 255, 255, 0.7)
+- `--spectrum-transparent-white-700`
+  - **value**: rgba(255, 255, 255, 0.8)
+- `--spectrum-transparent-white-800`
+  - **value**: rgba(255, 255, 255, 0.9)
+- `--spectrum-transparent-white-900`
+  - **value**: rgb(255, 255, 255)
+- `--spectrum-transparent-black-100`
+  - **value**: rgba(0, 0, 0, 0)
+- `--spectrum-transparent-black-200`
+  - **value**: rgba(0, 0, 0, 0.1)
+- `--spectrum-transparent-black-300`
+  - **value**: rgba(0, 0, 0, 0.25)
+- `--spectrum-transparent-black-400`
+  - **value**: rgba(0, 0, 0, 0.4)
+- `--spectrum-transparent-black-500`
+  - **value**: rgba(0, 0, 0, 0.55)
+- `--spectrum-transparent-black-600`
+  - **value**: rgba(0, 0, 0, 0.7)
+- `--spectrum-transparent-black-700`
+  - **value**: rgba(0, 0, 0, 0.8)
+- `--spectrum-transparent-black-800`
+  - **value**: rgba(0, 0, 0, 0.9)
+- `--spectrum-transparent-black-900`
+  - **value**: rgb(0, 0, 0)
+- `--spectrum-gray-50`
+  - **value**: rgb(0, 0, 0) (darkest)
+- `--spectrum-gray-75`
+  - **value**: rgb(14, 14, 14) (darkest)
+- `--spectrum-gray-100`
+  - **value**: rgb(29, 29, 29) (darkest)
+- `--spectrum-gray-200`
+  - **value**: rgb(48, 48, 48) (darkest)
+- `--spectrum-gray-300`
+  - **value**: rgb(75, 75, 75) (darkest)
+- `--spectrum-gray-400`
+  - **value**: rgb(106, 106, 106) (darkest)
+- `--spectrum-gray-500`
+  - **value**: rgb(141, 141, 141) (darkest)
+- `--spectrum-gray-600`
+  - **value**: rgb(176, 176, 176) (darkest)
+- `--spectrum-gray-700`
+  - **value**: rgb(208, 208, 208) (darkest)
+- `--spectrum-gray-800`
+  - **value**: rgb(235, 235, 235) (darkest)
+- `--spectrum-gray-900`
+  - **value**: rgb(255, 255, 255) (darkest)
+- `--spectrum-blue-100`
+  - **value**: rgb(0, 38, 81) (darkest)
+- `--spectrum-blue-200`
+  - **value**: rgb(0, 50, 106) (darkest)
+- `--spectrum-blue-300`
+  - **value**: rgb(0, 64, 135) (darkest)
+- `--spectrum-blue-400`
+  - **value**: rgb(0, 78, 166) (darkest)
+- `--spectrum-blue-500`
+  - **value**: rgb(0, 92, 200) (darkest)
+- `--spectrum-blue-600`
+  - **value**: rgb(6, 108, 231) (darkest)
+- `--spectrum-blue-700`
+  - **value**: rgb(29, 128, 245) (darkest)
+- `--spectrum-blue-800`
+  - **value**: rgb(64, 150, 243) (darkest)
+- `--spectrum-blue-900`
+  - **value**: rgb(94, 170, 247) (darkest)
+- `--spectrum-blue-1000`
+  - **value**: rgb(124, 189, 250) (darkest)
+- `--spectrum-blue-1100`
+  - **value**: rgb(152, 206, 253) (darkest)
+- `--spectrum-blue-1200`
+  - **value**: rgb(179, 222, 254) (darkest)
+- `--spectrum-blue-1300`
+  - **value**: rgb(206, 234, 255) (darkest)
+- `--spectrum-blue-1400`
+  - **value**: rgb(227, 243, 255) (darkest)
+- `--spectrum-red-100`
+  - **value**: rgb(87, 0, 0) (darkest)
+- `--spectrum-red-200`
+  - **value**: rgb(110, 0, 0) (darkest)
+- `--spectrum-red-300`
+  - **value**: rgb(138, 0, 0) (darkest)
+- `--spectrum-red-400`
+  - **value**: rgb(167, 0, 0) (darkest)
+- `--spectrum-red-500`
+  - **value**: rgb(196, 7, 6) (darkest)
+- `--spectrum-red-600`
+  - **value**: rgb(221, 33, 24) (darkest)
+- `--spectrum-red-700`
+  - **value**: rgb(238, 67, 49) (darkest)
+- `--spectrum-red-800`
+  - **value**: rgb(249, 99, 76) (darkest)
+- `--spectrum-red-900`
+  - **value**: rgb(255, 129, 107) (darkest)
+- `--spectrum-red-1000`
+  - **value**: rgb(255, 158, 140) (darkest)
+- `--spectrum-red-1100`
+  - **value**: rgb(255, 183, 169) (darkest)
+- `--spectrum-red-1200`
+  - **value**: rgb(255, 205, 195) (darkest)
+- `--spectrum-red-1300`
+  - **value**: rgb(255, 223, 217) (darkest)
+- `--spectrum-red-1400`
+  - **value**: rgb(255, 237, 234) (darkest)
+- `--spectrum-orange-100`
+  - **value**: rgb(72, 24, 1) (darkest)
+- `--spectrum-orange-200`
+  - **value**: rgb(92, 32, 0) (darkest)
+- `--spectrum-orange-300`
+  - **value**: rgb(115, 43, 0) (darkest)
+- `--spectrum-orange-400`
+  - **value**: rgb(138, 55, 0) (darkest)
+- `--spectrum-orange-500`
+  - **value**: rgb(162, 68, 0) (darkest)
+- `--spectrum-orange-600`
+  - **value**: rgb(186, 82, 0) (darkest)
+- `--spectrum-orange-700`
+  - **value**: rgb(210, 98, 0) (darkest)
+- `--spectrum-orange-800`
+  - **value**: rgb(232, 116, 0) (darkest)
+- `--spectrum-orange-900`
+  - **value**: rgb(249, 137, 23) (darkest)
+- `--spectrum-orange-1000`
+  - **value**: rgb(255, 162, 59) (darkest)
+- `--spectrum-orange-1100`
+  - **value**: rgb(255, 188, 102) (darkest)
+- `--spectrum-orange-1200`
+  - **value**: rgb(253, 210, 145) (darkest)
+- `--spectrum-orange-1300`
+  - **value**: rgb(255, 226, 181) (darkest)
+- `--spectrum-orange-1400`
+  - **value**: rgb(255, 239, 213) (darkest)
+- `--spectrum-yellow-100`
+  - **value**: rgb(53, 36, 0) (darkest)
+- `--spectrum-yellow-200`
+  - **value**: rgb(68, 47, 0) (darkest)
+- `--spectrum-yellow-300`
+  - **value**: rgb(86, 62, 0) (darkest)
+- `--spectrum-yellow-400`
+  - **value**: rgb(103, 77, 0) (darkest)
+- `--spectrum-yellow-500`
+  - **value**: rgb(122, 92, 0) (darkest)
+- `--spectrum-yellow-600`
+  - **value**: rgb(141, 108, 0) (darkest)
+- `--spectrum-yellow-700`
+  - **value**: rgb(161, 126, 0) (darkest)
+- `--spectrum-yellow-800`
+  - **value**: rgb(180, 144, 0) (darkest)
+- `--spectrum-yellow-900`
+  - **value**: rgb(199, 162, 0) (darkest)
+- `--spectrum-yellow-1000`
+  - **value**: rgb(216, 181, 0) (darkest)
+- `--spectrum-yellow-1100`
+  - **value**: rgb(233, 199, 0) (darkest)
+- `--spectrum-yellow-1200`
+  - **value**: rgb(247, 216, 4) (darkest)
+- `--spectrum-yellow-1300`
+  - **value**: rgb(249, 233, 97) (darkest)
+- `--spectrum-yellow-1400`
+  - **value**: rgb(252, 243, 170) (darkest)
+- `--spectrum-chartreuse-100`
+  - **value**: rgb(32, 43, 0) (darkest)
+- `--spectrum-chartreuse-200`
+  - **value**: rgb(42, 56, 0) (darkest)
+- `--spectrum-chartreuse-300`
+  - **value**: rgb(54, 72, 0) (darkest)
+- `--spectrum-chartreuse-400`
+  - **value**: rgb(66, 88, 0) (darkest)
+- `--spectrum-chartreuse-500`
+  - **value**: rgb(79, 105, 0) (darkest)
+- `--spectrum-chartreuse-600`
+  - **value**: rgb(93, 123, 0) (darkest)
+- `--spectrum-chartreuse-700`
+  - **value**: rgb(107, 142, 0) (darkest)
+- `--spectrum-chartreuse-800`
+  - **value**: rgb(122, 161, 0) (darkest)
+- `--spectrum-chartreuse-900`
+  - **value**: rgb(138, 180, 3) (darkest)
+- `--spectrum-chartreuse-1000`
+  - **value**: rgb(154, 198, 11) (darkest)
+- `--spectrum-chartreuse-1100`
+  - **value**: rgb(170, 216, 22) (darkest)
+- `--spectrum-chartreuse-1200`
+  - **value**: rgb(187, 232, 41) (darkest)
+- `--spectrum-chartreuse-1300`
+  - **value**: rgb(205, 246, 72) (darkest)
+- `--spectrum-chartreuse-1400`
+  - **value**: rgb(225, 253, 132) (darkest)
+- `--spectrum-celery-100`
+  - **value**: rgb(0, 47, 7) (darkest)
+- `--spectrum-celery-200`
+  - **value**: rgb(0, 61, 9) (darkest)
+- `--spectrum-celery-300`
+  - **value**: rgb(0, 77, 12) (darkest)
+- `--spectrum-celery-400`
+  - **value**: rgb(0, 95, 15) (darkest)
+- `--spectrum-celery-500`
+  - **value**: rgb(0, 113, 15) (darkest)
+- `--spectrum-celery-600`
+  - **value**: rgb(0, 132, 15) (darkest)
+- `--spectrum-celery-700`
+  - **value**: rgb(0, 151, 20) (darkest)
+- `--spectrum-celery-800`
+  - **value**: rgb(13, 171, 37) (darkest)
+- `--spectrum-celery-900`
+  - **value**: rgb(45, 191, 58) (darkest)
+- `--spectrum-celery-1000`
+  - **value**: rgb(80, 208, 82) (darkest)
+- `--spectrum-celery-1100`
+  - **value**: rgb(115, 224, 107) (darkest)
+- `--spectrum-celery-1200`
+  - **value**: rgb(147, 237, 131) (darkest)
+- `--spectrum-celery-1300`
+  - **value**: rgb(180, 247, 162) (darkest)
+- `--spectrum-celery-1400`
+  - **value**: rgb(213, 252, 202) (darkest)
+- `--spectrum-green-100`
+  - **value**: rgb(10, 44, 28) (darkest)
+- `--spectrum-green-200`
+  - **value**: rgb(7, 59, 36) (darkest)
+- `--spectrum-green-300`
+  - **value**: rgb(0, 76, 46) (darkest)
+- `--spectrum-green-400`
+  - **value**: rgb(0, 93, 57) (darkest)
+- `--spectrum-green-500`
+  - **value**: rgb(0, 111, 69) (darkest)
+- `--spectrum-green-600`
+  - **value**: rgb(0, 130, 82) (darkest)
+- `--spectrum-green-700`
+  - **value**: rgb(0, 149, 98) (darkest)
+- `--spectrum-green-800`
+  - **value**: rgb(28, 168, 114) (darkest)
+- `--spectrum-green-900`
+  - **value**: rgb(52, 187, 132) (darkest)
+- `--spectrum-green-1000`
+  - **value**: rgb(75, 205, 149) (darkest)
+- `--spectrum-green-1100`
+  - **value**: rgb(103, 222, 168) (darkest)
+- `--spectrum-green-1200`
+  - **value**: rgb(137, 236, 188) (darkest)
+- `--spectrum-green-1300`
+  - **value**: rgb(177, 244, 209) (darkest)
+- `--spectrum-green-1400`
+  - **value**: rgb(214, 249, 228) (darkest)
+- `--spectrum-seafoam-100`
+  - **value**: rgb(18, 43, 42) (darkest)
+- `--spectrum-seafoam-200`
+  - **value**: rgb(19, 57, 55) (darkest)
+- `--spectrum-seafoam-300`
+  - **value**: rgb(16, 73, 70) (darkest)
+- `--spectrum-seafoam-400`
+  - **value**: rgb(3, 91, 88) (darkest)
+- `--spectrum-seafoam-500`
+  - **value**: rgb(0, 108, 104) (darkest)
+- `--spectrum-seafoam-600`
+  - **value**: rgb(0, 127, 121) (darkest)
+- `--spectrum-seafoam-700`
+  - **value**: rgb(0, 146, 140) (darkest)
+- `--spectrum-seafoam-800`
+  - **value**: rgb(0, 165, 159) (darkest)
+- `--spectrum-seafoam-900`
+  - **value**: rgb(26, 185, 178) (darkest)
+- `--spectrum-seafoam-1000`
+  - **value**: rgb(66, 202, 195) (darkest)
+- `--spectrum-seafoam-1100`
+  - **value**: rgb(102, 218, 211) (darkest)
+- `--spectrum-seafoam-1200`
+  - **value**: rgb(139, 232, 225) (darkest)
+- `--spectrum-seafoam-1300`
+  - **value**: rgb(179, 242, 237) (darkest)
+- `--spectrum-seafoam-1400`
+  - **value**: rgb(215, 248, 244) (darkest)
+- `--spectrum-cyan-100`
+  - **value**: rgb(0, 41, 68) (darkest)
+- `--spectrum-cyan-200`
+  - **value**: rgb(0, 54, 88) (darkest)
+- `--spectrum-cyan-300`
+  - **value**: rgb(0, 69, 108) (darkest)
+- `--spectrum-cyan-400`
+  - **value**: rgb(0, 86, 128) (darkest)
+- `--spectrum-cyan-500`
+  - **value**: rgb(0, 103, 147) (darkest)
+- `--spectrum-cyan-600`
+  - **value**: rgb(0, 121, 167) (darkest)
+- `--spectrum-cyan-700`
+  - **value**: rgb(0, 140, 186) (darkest)
+- `--spectrum-cyan-800`
+  - **value**: rgb(4, 160, 205) (darkest)
+- `--spectrum-cyan-900`
+  - **value**: rgb(23, 180, 221) (darkest)
+- `--spectrum-cyan-1000`
+  - **value**: rgb(57, 199, 234) (darkest)
+- `--spectrum-cyan-1100`
+  - **value**: rgb(96, 216, 243) (darkest)
+- `--spectrum-cyan-1200`
+  - **value**: rgb(134, 230, 250) (darkest)
+- `--spectrum-cyan-1300`
+  - **value**: rgb(170, 242, 255) (darkest)
+- `--spectrum-cyan-1400`
+  - **value**: rgb(206, 249, 255) (darkest)
+- `--spectrum-indigo-100`
+  - **value**: rgb(26, 29, 97) (darkest)
+- `--spectrum-indigo-200`
+  - **value**: rgb(35, 39, 125) (darkest)
+- `--spectrum-indigo-300`
+  - **value**: rgb(46, 50, 158) (darkest)
+- `--spectrum-indigo-400`
+  - **value**: rgb(58, 63, 189) (darkest)
+- `--spectrum-indigo-500`
+  - **value**: rgb(73, 78, 216) (darkest)
+- `--spectrum-indigo-600`
+  - **value**: rgb(90, 96, 235) (darkest)
+- `--spectrum-indigo-700`
+  - **value**: rgb(110, 115, 246) (darkest)
+- `--spectrum-indigo-800`
+  - **value**: rgb(132, 136, 253) (darkest)
+- `--spectrum-indigo-900`
+  - **value**: rgb(153, 157, 255) (darkest)
+- `--spectrum-indigo-1000`
+  - **value**: rgb(174, 177, 255) (darkest)
+- `--spectrum-indigo-1100`
+  - **value**: rgb(194, 196, 255) (darkest)
+- `--spectrum-indigo-1200`
+  - **value**: rgb(212, 213, 255) (darkest)
+- `--spectrum-indigo-1300`
+  - **value**: rgb(227, 228, 255) (darkest)
+- `--spectrum-indigo-1400`
+  - **value**: rgb(240, 240, 255) (darkest)
+- `--spectrum-purple-100`
+  - **value**: rgb(50, 16, 104) (darkest)
+- `--spectrum-purple-200`
+  - **value**: rgb(67, 13, 140) (darkest)
+- `--spectrum-purple-300`
+  - **value**: rgb(86, 16, 173) (darkest)
+- `--spectrum-purple-400`
+  - **value**: rgb(106, 29, 200) (darkest)
+- `--spectrum-purple-500`
+  - **value**: rgb(126, 49, 222) (darkest)
+- `--spectrum-purple-600`
+  - **value**: rgb(145, 70, 236) (darkest)
+- `--spectrum-purple-700`
+  - **value**: rgb(162, 94, 246) (darkest)
+- `--spectrum-purple-800`
+  - **value**: rgb(178, 119, 250) (darkest)
+- `--spectrum-purple-900`
+  - **value**: rgb(192, 143, 252) (darkest)
+- `--spectrum-purple-1000`
+  - **value**: rgb(206, 166, 253) (darkest)
+- `--spectrum-purple-1100`
+  - **value**: rgb(219, 188, 254) (darkest)
+- `--spectrum-purple-1200`
+  - **value**: rgb(230, 207, 255) (darkest)
+- `--spectrum-purple-1300`
+  - **value**: rgb(240, 224, 255) (darkest)
+- `--spectrum-purple-1400`
+  - **value**: rgb(248, 237, 255) (darkest)
+- `--spectrum-fuchsia-100`
+  - **value**: rgb(70, 14, 68) (darkest)
+- `--spectrum-fuchsia-200`
+  - **value**: rgb(93, 9, 92) (darkest)
+- `--spectrum-fuchsia-300`
+  - **value**: rgb(120, 0, 120) (darkest)
+- `--spectrum-fuchsia-400`
+  - **value**: rgb(146, 0, 147) (darkest)
+- `--spectrum-fuchsia-500`
+  - **value**: rgb(169, 19, 170) (darkest)
+- `--spectrum-fuchsia-600`
+  - **value**: rgb(191, 43, 191) (darkest)
+- `--spectrum-fuchsia-700`
+  - **value**: rgb(211, 65, 213) (darkest)
+- `--spectrum-fuchsia-800`
+  - **value**: rgb(228, 91, 229) (darkest)
+- `--spectrum-fuchsia-900`
+  - **value**: rgb(239, 120, 238) (darkest)
+- `--spectrum-fuchsia-1000`
+  - **value**: rgb(246, 149, 243) (darkest)
+- `--spectrum-fuchsia-1100`
+  - **value**: rgb(251, 175, 246) (darkest)
+- `--spectrum-fuchsia-1200`
+  - **value**: rgb(254, 199, 248) (darkest)
+- `--spectrum-fuchsia-1300`
+  - **value**: rgb(255, 220, 250) (darkest)
+- `--spectrum-fuchsia-1400`
+  - **value**: rgb(255, 235, 252) (darkest)
+- `--spectrum-magenta-100`
+  - **value**: rgb(83, 3, 41) (darkest)
+- `--spectrum-magenta-200`
+  - **value**: rgb(106, 0, 52) (darkest)
+- `--spectrum-magenta-300`
+  - **value**: rgb(133, 0, 65) (darkest)
+- `--spectrum-magenta-400`
+  - **value**: rgb(161, 0, 78) (darkest)
+- `--spectrum-magenta-500`
+  - **value**: rgb(186, 22, 93) (darkest)
+- `--spectrum-magenta-600`
+  - **value**: rgb(209, 43, 114) (darkest)
+- `--spectrum-magenta-700`
+  - **value**: rgb(227, 69, 137) (darkest)
+- `--spectrum-magenta-800`
+  - **value**: rgb(241, 97, 156) (darkest)
+- `--spectrum-magenta-900`
+  - **value**: rgb(252, 124, 173) (darkest)
+- `--spectrum-magenta-1000`
+  - **value**: rgb(255, 152, 191) (darkest)
+- `--spectrum-magenta-1100`
+  - **value**: rgb(255, 179, 207) (darkest)
+- `--spectrum-magenta-1200`
+  - **value**: rgb(255, 202, 221) (darkest)
+- `--spectrum-magenta-1300`
+  - **value**: rgb(255, 221, 233) (darkest)
+- `--spectrum-magenta-1400`
+  - **value**: rgb(255, 236, 243) (darkest)
+- `--spectrum-opacity-checkerboard-square-dark`
+  - **value**: `--spectrum-gray-800` (darkest)
+- `--spectrum-overlay-opacity`
+  - **value**: 0.6 (darkest)
+- `--spectrum-drop-shadow-color`
+  - **value**: rgba(0, 0, 0, 0.15) (light)
+  - **value**: rgba(0, 0, 0, 0.5) (dark)
+  - **value**: rgba(0, 0, 0, 0.8) (darkest)
+- `--spectrum-background-base-color`
+  - **value**: `--spectrum-gray-200` (light)
+  - **value**: `--spectrum-gray-50` (dark)
+  - **value**: `--spectrum-gray-50` (darkest)
+- `--spectrum-background-layer-1-color`
+  - **value**: `--spectrum-gray-100` (light)
+  - **value**: `--spectrum-gray-75` (dark)
+  - **value**: `--spectrum-gray-75` (darkest)
+- `--spectrum-background-layer-2-color`
+  - **value**: `--spectrum-gray-100` (darkest)
+- `--spectrum-neutral-background-color-default`
+  - **value**: `--spectrum-gray-800` (light)
+  - **value**: `--spectrum-gray-400` (dark)
+  - **value**: `--spectrum-gray-400` (darkest)
+- `--spectrum-neutral-background-color-hover`
+  - **value**: `--spectrum-gray-900` (light)
+  - **value**: `--spectrum-gray-300` (dark)
+  - **value**: `--spectrum-gray-300` (darkest)
+- `--spectrum-neutral-background-color-down`
+  - **value**: `--spectrum-gray-900` (light)
+  - **value**: `--spectrum-gray-200` (dark)
+  - **value**: `--spectrum-gray-200` (darkest)
+- `--spectrum-neutral-background-color-key-focus`
+  - **value**: `--spectrum-gray-900` (light)
+  - **value**: `--spectrum-gray-300` (dark)
+  - **value**: `--spectrum-gray-300` (darkest)
+- `--spectrum-neutral-background-color-selected-default`
+  - **value**: `--spectrum-gray-700` (spectrum)
+  - **value**: `--spectrum-gray-800` (express) **deprecated**
+- `--spectrum-neutral-background-color-selected-hover`
+  - **value**: `--spectrum-gray-800` (spectrum)
+  - **value**: `--spectrum-gray-900` (express) **deprecated**
+- `--spectrum-neutral-background-color-selected-down`
+  - **value**: `--spectrum-gray-900` (spectrum)
+  - **value**: `--spectrum-gray-900` (express) **deprecated**
+- `--spectrum-neutral-background-color-selected-key-focus`
+  - **value**: `--spectrum-gray-800` (spectrum)
+  - **value**: `--spectrum-gray-900` (express) **deprecated**
+- `--spectrum-neutral-subdued-background-color-default`
+  - **value**: `--spectrum-gray-400` (darkest)
+- `--spectrum-neutral-subdued-background-color-hover`
+  - **value**: `--spectrum-gray-300` (darkest)
+- `--spectrum-neutral-subdued-background-color-down`
+  - **value**: `--spectrum-gray-200` (darkest)
+- `--spectrum-neutral-subdued-background-color-key-focus`
+  - **value**: `--spectrum-gray-300` (darkest)
+- `--spectrum-accent-background-color-default`
+  - **value**: `--spectrum-accent-color-600` (darkest)
+- `--spectrum-accent-background-color-hover`
+  - **value**: `--spectrum-accent-color-500` (darkest)
+- `--spectrum-accent-background-color-down`
+  - **value**: `--spectrum-accent-color-400` (darkest)
+- `--spectrum-accent-background-color-key-focus`
+  - **value**: `--spectrum-accent-color-500` (darkest)
+- `--spectrum-informative-background-color-default`
+  - **value**: `--spectrum-informative-color-600` (darkest)
+- `--spectrum-informative-background-color-hover`
+  - **value**: `--spectrum-informative-color-500` (darkest)
+- `--spectrum-informative-background-color-down`
+  - **value**: `--spectrum-informative-color-400` (darkest)
+- `--spectrum-informative-background-color-key-focus`
+  - **value**: `--spectrum-informative-color-500` (darkest)
+- `--spectrum-negative-background-color-default`
+  - **value**: `--spectrum-negative-color-600` (darkest)
+- `--spectrum-negative-background-color-hover`
+  - **value**: `--spectrum-negative-color-500` (darkest)
+- `--spectrum-negative-background-color-down`
+  - **value**: `--spectrum-negative-color-400` (darkest)
+- `--spectrum-negative-background-color-key-focus`
+  - **value**: `--spectrum-negative-color-500` (darkest)
+- `--spectrum-positive-background-color-default`
+  - **value**: `--spectrum-positive-color-600` (darkest)
+- `--spectrum-positive-background-color-hover`
+  - **value**: `--spectrum-positive-color-500` (darkest)
+- `--spectrum-positive-background-color-down`
+  - **value**: `--spectrum-positive-color-400` (darkest)
+- `--spectrum-positive-background-color-key-focus`
+  - **value**: `--spectrum-positive-color-500` (darkest)
+- `--spectrum-notice-background-color-default`
+  - **value**: `--spectrum-notice-color-800` (darkest)
+- `--spectrum-gray-background-color-default`
+  - **value**: `--spectrum-gray-700` (darkest)
+- `--spectrum-red-background-color-default`
+  - **value**: `--spectrum-red-700` (darkest)
+- `--spectrum-orange-background-color-default`
+  - **value**: `--spectrum-orange-800` (darkest)
+- `--spectrum-yellow-background-color-default`
+  - **value**: `--spectrum-yellow-1000` (darkest)
+- `--spectrum-chartreuse-background-color-default`
+  - **value**: `--spectrum-chartreuse-900` (darkest)
+- `--spectrum-celery-background-color-default`
+  - **value**: `--spectrum-celery-800` (darkest)
+- `--spectrum-green-background-color-default`
+  - **value**: `--spectrum-green-700` (darkest)
+- `--spectrum-seafoam-background-color-default`
+  - **value**: `--spectrum-seafoam-700` (darkest)
+- `--spectrum-cyan-background-color-default`
+  - **value**: `--spectrum-cyan-700` (darkest)
+- `--spectrum-blue-background-color-default`
+  - **value**: `--spectrum-blue-700` (darkest)
+- `--spectrum-indigo-background-color-default`
+  - **value**: `--spectrum-indigo-700` (darkest)
+- `--spectrum-purple-background-color-default`
+  - **value**: `--spectrum-purple-700` (darkest)
+- `--spectrum-fuchsia-background-color-default`
+  - **value**: `--spectrum-fuchsia-700` (darkest)
+- `--spectrum-magenta-background-color-default`
+  - **value**: `--spectrum-magenta-700` (darkest)
+- `--spectrum-neutral-visual-color`
+  - **value**: `--spectrum-gray-600` (darkest)
+- `--spectrum-accent-visual-color`
+  - **value**: `--spectrum-accent-color-900` (darkest)
+- `--spectrum-informative-visual-color`
+  - **value**: `--spectrum-informative-color-900` (darkest)
+- `--spectrum-negative-visual-color`
+  - **value**: `--spectrum-negative-color-700` (darkest)
+- `--spectrum-notice-visual-color`
+  - **value**: `--spectrum-notice-color-900` (darkest)
+- `--spectrum-positive-visual-color`
+  - **value**: `--spectrum-positive-color-800` (darkest)
+- `--spectrum-gray-visual-color`
+  - **value**: `--spectrum-gray-600` (darkest)
+- `--spectrum-red-visual-color`
+  - **value**: `--spectrum-red-700` (darkest)
+- `--spectrum-orange-visual-color`
+  - **value**: `--spectrum-orange-900` (darkest)
+- `--spectrum-yellow-visual-color`
+  - **value**: `--spectrum-yellow-1100` (darkest)
+- `--spectrum-chartreuse-visual-color`
+  - **value**: `--spectrum-chartreuse-900` (darkest)
+- `--spectrum-celery-visual-color`
+  - **value**: `--spectrum-celery-800` (darkest)
+- `--spectrum-green-visual-color`
+  - **value**: `--spectrum-green-800` (darkest)
+- `--spectrum-seafoam-visual-color`
+  - **value**: `--spectrum-seafoam-800` (darkest)
+- `--spectrum-cyan-visual-color`
+  - **value**: `--spectrum-cyan-900` (darkest)
+- `--spectrum-blue-visual-color`
+  - **value**: `--spectrum-blue-900` (darkest)
+- `--spectrum-indigo-visual-color`
+  - **value**: `--spectrum-indigo-900` (darkest)
+- `--spectrum-purple-visual-color`
+  - **value**: `--spectrum-purple-900` (darkest)
+- `--spectrum-fuchsia-visual-color`
+  - **value**: `--spectrum-fuchsia-900` (darkest)
+- `--spectrum-magenta-visual-color`
+  - **value**: `--spectrum-magenta-900` (darkest)
+
+#### Updated Properties (416)
+
+- `--spectrum-heading-sans-serif-font-weight`
+- `--spectrum-heading-serif-font-weight`
+- `--spectrum-heading-cjk-font-weight`
+- `--spectrum-heading-sans-serif-emphasized-font-weight`
+- `--spectrum-heading-serif-emphasized-font-weight`
+- `--spectrum-accent-color-100`
+- `--spectrum-accent-color-200`
+- `--spectrum-accent-color-300`
+- `--spectrum-accent-color-400`
+- `--spectrum-accent-color-500`
+- `--spectrum-accent-color-600`
+- `--spectrum-accent-color-700`
+- `--spectrum-accent-color-800`
+- `--spectrum-accent-color-900`
+- `--spectrum-accent-color-1000`
+- `--spectrum-accent-color-1100`
+- `--spectrum-accent-color-1200`
+- `--spectrum-accent-color-1300`
+- `--spectrum-accent-color-1400`
+- `--spectrum-corner-radius-75`
+- `--spectrum-corner-radius-100`
+- `--spectrum-corner-radius-200`
+- `--spectrum-drop-shadow-x`
+- `--spectrum-drop-shadow-y`
+- `--spectrum-drop-shadow-blur`
+- `--spectrum-text-to-visual-50`
+  - **value**: 6px -> 5px (desktop)
+  - **value**: 8px -> 7px (mobile)
+- `--spectrum-text-to-visual-75`
+  - **value**: 7px -> 5px (desktop)
+  - **value**: 9px -> 7px (mobile)
+- `--spectrum-text-to-visual-100`
+  - **value**: 8px -> 6px (desktop)
+  - **value**: 10px -> 8px (mobile)
+- `--spectrum-text-to-visual-200`
+  - **value**: 9px -> 7px (desktop)
+  - **value**: 11px -> 9px (mobile)
+- `--spectrum-text-to-visual-300`
+  - **value**: 10px -> 8px (desktop)
+  - **value**: 13px -> 10px (mobile)
+- `--spectrum-border-width-100`
+- `--spectrum-component-pill-edge-to-visual-75`
+  - **value**: 10px -> 11px (desktop)
+  - **value**: 13px -> 15px (mobile)
+- `--spectrum-component-pill-edge-to-visual-200`
+  - **value**: 22px -> 21px (mobile)
+- `--spectrum-component-pill-edge-to-visual-300`
+  - **value**: 21px -> 20px (desktop)
+  - **value**: 27px -> 28px (mobile)
+- `--spectrum-component-pill-edge-to-visual-only-75`
+  - **value**: 5px -> 6px (mobile)
+- `--spectrum-component-pill-edge-to-visual-only-100`
+  - **value**: 7px -> 6px (desktop)
+  - **value**: 9px -> 8px (mobile)
+- `--spectrum-component-pill-edge-to-visual-only-200`
+  - **value**: 10px -> 9px (desktop)
+  - **value**: 13px -> 11px (mobile)
+- `--spectrum-component-pill-edge-to-visual-only-300`
+  - **value**: 13px -> 11px (desktop)
+  - **value**: 16px -> 15px (mobile)
+- `--spectrum-component-pill-edge-to-text-75`
+  - **value**: 12px -> 13px (desktop)
+  - **value**: 15px -> 17px (mobile)
+- `--spectrum-component-pill-edge-to-text-200`
+  - **value**: 25px -> 24px (mobile)
+- `--spectrum-component-pill-edge-to-text-300`
+  - **value**: 24px -> 23px (desktop)
+- `--spectrum-component-edge-to-visual-50`
+  - **value**: 6px -> 7px (desktop)
+  - **value**: 7px -> 9px (mobile)
+- `--spectrum-component-edge-to-visual-75`
+  - **value**: 7px -> 8px (desktop)
+  - **value**: 9px -> 11px (mobile)
+- `--spectrum-component-edge-to-visual-200`
+  - **value**: 16px -> 15px (mobile)
+- `--spectrum-component-edge-to-visual-300`
+  - **value**: 15px -> 14px (desktop)
+  - **value**: 19px -> 20px (mobile)
+- `--spectrum-component-edge-to-visual-only-50`
+  - **value**: 4px -> 5px (mobile)
+- `--spectrum-component-edge-to-visual-only-75`
+  - **value**: 5px -> 6px (mobile)
+- `--spectrum-component-edge-to-visual-only-100`
+  - **value**: 7px -> 6px (desktop)
+  - **value**: 9px -> 8px (mobile)
+- `--spectrum-component-edge-to-visual-only-200`
+  - **value**: 10px -> 9px (desktop)
+  - **value**: 13px -> 11px (mobile)
+- `--spectrum-component-edge-to-visual-only-300`
+  - **value**: 13px -> 11px (desktop)
+  - **value**: 16px -> 15px (mobile)
+- `--spectrum-component-edge-to-text-50`
+  - **value**: 10px -> 11px (mobile)
+- `--spectrum-component-edge-to-text-75`
+  - **value**: 9px -> 10px (desktop)
+  - **value**: 11px -> 13px (mobile)
+- `--spectrum-component-edge-to-text-200`
+  - **value**: 19px -> 18px (mobile)
+- `--spectrum-component-edge-to-text-300`
+  - **value**: 18px -> 17px (desktop)
+- `--spectrum-component-top-to-workflow-icon-50`
+  - **value**: 4px -> 5px (mobile)
+- `--spectrum-component-top-to-workflow-icon-75`
+  - **value**: 5px -> 6px (mobile)
+- `--spectrum-component-top-to-workflow-icon-100`
+  - **value**: 7px -> 6px (desktop)
+  - **value**: 9px -> 8px (mobile)
+- `--spectrum-component-top-to-workflow-icon-200`
+  - **value**: 10px -> 9px (desktop)
+  - **value**: 13px -> 11px (mobile)
+- `--spectrum-component-top-to-workflow-icon-300`
+  - **value**: 13px -> 11px (desktop)
+  - **value**: 16px -> 15px (mobile)
+- `--spectrum-checkbox-control-size-small`
+- `--spectrum-checkbox-control-size-medium`
+- `--spectrum-checkbox-control-size-large`
+- `--spectrum-checkbox-control-size-extra-large`
+- `--spectrum-checkbox-top-to-control-small`
+- `--spectrum-checkbox-top-to-control-medium`
+- `--spectrum-checkbox-top-to-control-large`
+- `--spectrum-checkbox-top-to-control-extra-large`
+- `--spectrum-switch-control-width-small`
+- `--spectrum-switch-control-width-medium`
+- `--spectrum-switch-control-width-large`
+- `--spectrum-switch-control-width-extra-large`
+- `--spectrum-switch-control-height-small`
+- `--spectrum-switch-control-height-medium`
+- `--spectrum-switch-control-height-large`
+- `--spectrum-switch-control-height-extra-large`
+- `--spectrum-switch-top-to-control-small`
+- `--spectrum-switch-top-to-control-medium`
+- `--spectrum-switch-top-to-control-large`
+- `--spectrum-switch-top-to-control-extra-large`
+- `--spectrum-radio-button-control-size-small`
+- `--spectrum-radio-button-control-size-medium`
+- `--spectrum-radio-button-control-size-large`
+- `--spectrum-radio-button-control-size-extra-large`
+- `--spectrum-radio-button-top-to-control-small`
+- `--spectrum-radio-button-top-to-control-medium`
+- `--spectrum-radio-button-top-to-control-large`
+- `--spectrum-radio-button-top-to-control-extra-large`
+- `--spectrum-slider-track-thickness`
+- `--spectrum-slider-control-height-small`
+- `--spectrum-slider-control-height-medium`
+- `--spectrum-slider-control-height-large`
+- `--spectrum-slider-control-height-extra-large`
+- `--spectrum-slider-handle-size-small`
+- `--spectrum-slider-handle-size-medium`
+- `--spectrum-slider-handle-size-large`
+- `--spectrum-slider-handle-size-extra-large`
+- `--spectrum-slider-handle-border-width-down-small`
+- `--spectrum-slider-handle-border-width-down-medium`
+- `--spectrum-slider-handle-border-width-down-large`
+- `--spectrum-slider-handle-border-width-down-extra-large`
+- `--spectrum-slider-handle-gap`
+- `--spectrum-slider-bottom-to-handle-small`
+- `--spectrum-slider-bottom-to-handle-medium`
+- `--spectrum-slider-bottom-to-handle-large`
+- `--spectrum-slider-bottom-to-handle-extra-large`
+- `--spectrum-picker-border-width`
+- `--spectrum-color-area-border-rounding`
+  - **value**: `--spectrum-corner-radius-100` -> `--spectrum-corner-radius-medium-size-small`
+- `--spectrum-color-slider-border-rounding`
+  - **value**: 4px -> `--spectrum-corner-radius-medium-size-small`
+- `--spectrum-in-field-button-fill-stacked-inner-border-rounding`
+- `--spectrum-in-field-button-edge-to-fill`
+- `--spectrum-in-field-button-stacked-inner-edge-to-fill`
+- `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium`
+- `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large`
+- `--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large`
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small`
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium`
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large`
+- `--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large`
+- `--spectrum-icon-color-blue-primary-default`
+- `--spectrum-icon-color-green-primary-default`
+- `--spectrum-icon-color-red-primary-default`
+- `--spectrum-icon-color-yellow-primary-default`
+- `--spectrum-workflow-icon-size-50`
+  - **value**: 18px -> 16px (mobile)
+- `--spectrum-workflow-icon-size-75`
+  - **value**: 20px -> 18px (mobile)
+- `--spectrum-workflow-icon-size-100`
+  - **value**: 18px -> 20px (desktop)
+  - **value**: 22px -> 24px (mobile)
+- `--spectrum-workflow-icon-size-200`
+  - **value**: 20px -> 22px (desktop)
+  - **value**: 24px -> 28px (mobile)
+- `--spectrum-workflow-icon-size-300`
+  - **value**: 22px -> 26px (desktop)
+  - **value**: 28px -> 30px (mobile)
+- `--spectrum-white`
+- `--spectrum-transparent-white-100`
+- `--spectrum-transparent-white-200`
+- `--spectrum-transparent-white-300`
+- `--spectrum-transparent-white-400`
+- `--spectrum-transparent-white-500`
+- `--spectrum-transparent-white-600`
+- `--spectrum-transparent-white-700`
+- `--spectrum-transparent-white-800`
+- `--spectrum-transparent-white-900`
+- `--spectrum-transparent-black-100`
+- `--spectrum-transparent-black-200`
+- `--spectrum-transparent-black-300`
+- `--spectrum-transparent-black-400`
+- `--spectrum-transparent-black-500`
+- `--spectrum-transparent-black-600`
+- `--spectrum-transparent-black-700`
+- `--spectrum-transparent-black-800`
+- `--spectrum-transparent-black-900`
+- `--spectrum-gray-50`
+  - **value**: rgb(255, 255, 255) -> rgb(248, 248, 248) (light)
+  - **value**: rgb(29, 29, 29) -> rgb(27, 27, 27) (dark)
+- `--spectrum-gray-75`
+  - **value**: rgb(253, 253, 253) -> rgb(243, 243, 243) (light)
+  - **value**: rgb(38, 38, 38) -> rgb(34, 34, 34) (dark)
+- `--spectrum-gray-100`
+  - **value**: rgb(248, 248, 248) -> rgb(233, 233, 233) (light)
+  - **value**: rgb(50, 50, 50) -> rgb(44, 44, 44) (dark)
+- `--spectrum-gray-200`
+  - **value**: rgb(230, 230, 230) -> rgb(225, 225, 225) (light)
+  - **value**: rgb(63, 63, 63) -> rgb(50, 50, 50) (dark)
+- `--spectrum-gray-300`
+  - **value**: rgb(213, 213, 213) -> rgb(218, 218, 218) (light)
+  - **value**: rgb(84, 84, 84) -> rgb(57, 57, 57) (dark)
+- `--spectrum-gray-400`
+  - **value**: rgb(177, 177, 177) -> rgb(198, 198, 198) (light)
+  - **value**: rgb(112, 112, 112) -> rgb(68, 68, 68) (dark)
+- `--spectrum-gray-500`
+  - **value**: rgb(144, 144, 144) -> rgb(143, 143, 143) (light)
+  - **value**: rgb(144, 144, 144) -> rgb(109, 109, 109) (dark)
+- `--spectrum-gray-600`
+  - **value**: rgb(109, 109, 109) -> rgb(113, 113, 113) (light)
+  - **value**: rgb(178, 178, 178) -> rgb(138, 138, 138) (dark)
+- `--spectrum-gray-700`
+  - **value**: rgb(70, 70, 70) -> rgb(80, 80, 80) (light)
+  - **value**: rgb(209, 209, 209) -> rgb(175, 175, 175) (dark)
+- `--spectrum-gray-800`
+  - **value**: rgb(34, 34, 34) -> rgb(41, 41, 41) (light)
+  - **value**: rgb(235, 235, 235) -> rgb(219, 219, 219) (dark)
+- `--spectrum-gray-900`
+  - **value**: rgb(0, 0, 0) -> rgb(19, 19, 19) (light)
+  - **value**: rgb(255, 255, 255) -> rgb(242, 242, 242) (dark)
+- `--spectrum-blue-100`
+  - **value**: rgb(224, 242, 255) -> rgb(245, 249, 255) (light)
+  - **value**: rgb(0, 56, 119) -> rgb(14, 23, 63) (dark)
+- `--spectrum-blue-200`
+  - **value**: rgb(202, 232, 255) -> rgb(229, 240, 254) (light)
+  - **value**: rgb(0, 65, 138) -> rgb(15, 28, 82) (dark)
+- `--spectrum-blue-300`
+  - **value**: rgb(181, 222, 255) -> rgb(203, 226, 254) (light)
+  - **value**: rgb(0, 77, 163) -> rgb(12, 33, 117) (dark)
+- `--spectrum-blue-400`
+  - **value**: rgb(150, 206, 253) -> rgb(172, 207, 253) (light)
+  - **value**: rgb(0, 89, 194) -> rgb(18, 45, 154) (dark)
+- `--spectrum-blue-500`
+  - **value**: rgb(120, 187, 250) -> rgb(142, 185, 252) (light)
+  - **value**: rgb(3, 103, 224) -> rgb(26, 58, 195) (dark)
+- `--spectrum-blue-600`
+  - **value**: rgb(89, 167, 246) -> rgb(114, 158, 253) (light)
+  - **value**: rgb(19, 121, 243) -> rgb(37, 73, 229) (dark)
+- `--spectrum-blue-700`
+  - **value**: rgb(56, 146, 243) -> rgb(93, 137, 255) (light)
+  - **value**: rgb(52, 143, 244) -> rgb(52, 91, 248) (dark)
+- `--spectrum-blue-800`
+  - **value**: rgb(20, 122, 243) -> rgb(75, 117, 255) (light)
+  - **value**: rgb(84, 163, 246) -> rgb(64, 105, 253) (dark)
+- `--spectrum-blue-900`
+  - **value**: rgb(2, 101, 220) -> rgb(59, 99, 251) (light)
+  - **value**: rgb(114, 183, 249) -> rgb(86, 129, 255) (dark)
+- `--spectrum-blue-1000`
+  - **value**: rgb(0, 84, 182) -> rgb(39, 77, 234) (light)
+  - **value**: rgb(143, 202, 252) -> rgb(105, 149, 254) (dark)
+- `--spectrum-blue-1100`
+  - **value**: rgb(0, 68, 145) -> rgb(29, 62, 207) (light)
+  - **value**: rgb(174, 219, 254) -> rgb(124, 169, 252) (dark)
+- `--spectrum-blue-1200`
+  - **value**: rgb(0, 53, 113) -> rgb(21, 50, 173) (light)
+  - **value**: rgb(204, 233, 255) -> rgb(152, 192, 252) (dark)
+- `--spectrum-blue-1300`
+  - **value**: rgb(0, 39, 84) -> rgb(16, 40, 140) (light)
+  - **value**: rgb(232, 246, 255) -> rgb(181, 213, 253) (dark)
+- `--spectrum-blue-1400`
+  - **value**: rgb(0, 28, 60) -> rgb(12, 31, 105) (light)
+  - **value**: rgb(255, 255, 255) -> rgb(213, 231, 254) (dark)
+- `--spectrum-red-100`
+  - **value**: rgb(255, 235, 231) -> rgb(255, 246, 245) (light)
+  - **value**: rgb(123, 0, 0) -> rgb(54, 10, 3) (dark)
+- `--spectrum-red-200`
+  - **value**: rgb(255, 221, 214) -> rgb(255, 235, 232) (light)
+  - **value**: rgb(141, 0, 0) -> rgb(68, 13, 5) (dark)
+- `--spectrum-red-300`
+  - **value**: rgb(255, 205, 195) -> rgb(255, 214, 209) (light)
+  - **value**: rgb(165, 0, 0) -> rgb(87, 17, 7) (dark)
+- `--spectrum-red-400`
+  - **value**: rgb(255, 183, 169) -> rgb(255, 188, 180) (light)
+  - **value**: rgb(190, 4, 3) -> rgb(115, 24, 11) (dark)
+- `--spectrum-red-500`
+  - **value**: rgb(255, 155, 136) -> rgb(255, 157, 145) (light)
+  - **value**: rgb(215, 25, 19) -> rgb(147, 31, 17) (dark)
+- `--spectrum-red-600`
+  - **value**: rgb(255, 124, 101) -> rgb(255, 118, 101) (light)
+  - **value**: rgb(234, 56, 41) -> rgb(177, 38, 23) (dark)
+- `--spectrum-red-700`
+  - **value**: rgb(247, 92, 70) -> rgb(255, 81, 61) (light)
+  - **value**: rgb(246, 88, 67) -> rgb(205, 46, 29) (dark)
+- `--spectrum-red-800`
+  - **value**: rgb(234, 56, 41) -> rgb(240, 56, 35) (light)
+  - **value**: rgb(255, 117, 94) -> rgb(223, 52, 34) (dark)
+- `--spectrum-red-900`
+  - **value**: rgb(211, 21, 16) -> rgb(215, 50, 32) (light)
+  - **value**: rgb(255, 149, 129) -> rgb(252, 67, 46) (dark)
+- `--spectrum-red-1000`
+  - **value**: rgb(180, 0, 0) -> rgb(183, 40, 24) (light)
+  - **value**: rgb(255, 176, 161) -> rgb(255, 103, 86) (dark)
+- `--spectrum-red-1100`
+  - **value**: rgb(147, 0, 0) -> rgb(156, 33, 19) (light)
+  - **value**: rgb(255, 201, 189) -> rgb(255, 134, 120) (dark)
+- `--spectrum-red-1200`
+  - **value**: rgb(116, 0, 0) -> rgb(129, 27, 14) (light)
+  - **value**: rgb(255, 222, 216) -> rgb(255, 167, 157) (dark)
+- `--spectrum-red-1300`
+  - **value**: rgb(89, 0, 0) -> rgb(104, 21, 10) (light)
+  - **value**: rgb(255, 241, 238) -> rgb(255, 196, 189) (dark)
+- `--spectrum-red-1400`
+  - **value**: rgb(67, 0, 0) -> rgb(80, 16, 6) (light)
+  - **value**: rgb(255, 255, 255) -> rgb(255, 222, 219) (dark)
+- `--spectrum-orange-100`
+  - **value**: rgb(255, 236, 204) -> rgb(255, 246, 231) (light)
+  - **value**: rgb(102, 37, 0) -> rgb(49, 16, 0) (dark)
+- `--spectrum-orange-200`
+  - **value**: rgb(255, 223, 173) -> rgb(255, 236, 207) (light)
+  - **value**: rgb(117, 45, 0) -> rgb(61, 21, 0) (dark)
+- `--spectrum-orange-300`
+  - **value**: rgb(253, 210, 145) -> rgb(255, 218, 158) (light)
+  - **value**: rgb(137, 55, 0) -> rgb(80, 27, 0) (dark)
+- `--spectrum-orange-400`
+  - **value**: rgb(255, 187, 99) -> rgb(255, 193, 94) (light)
+  - **value**: rgb(158, 66, 0) -> rgb(106, 36, 0) (dark)
+- `--spectrum-orange-500`
+  - **value**: rgb(255, 160, 55) -> rgb(255, 162, 19) (light)
+  - **value**: rgb(180, 78, 0) -> rgb(135, 47, 0) (dark)
+- `--spectrum-orange-600`
+  - **value**: rgb(246, 133, 17) -> rgb(252, 125, 0) (light)
+  - **value**: rgb(202, 93, 0) -> rgb(162, 59, 0) (dark)
+- `--spectrum-orange-700`
+  - **value**: rgb(228, 111, 0) -> rgb(232, 106, 0) (light)
+  - **value**: rgb(225, 109, 0) -> rgb(185, 73, 0) (dark)
+- `--spectrum-orange-800`
+  - **value**: rgb(203, 93, 0) -> rgb(212, 91, 0) (light)
+  - **value**: rgb(244, 129, 12) -> rgb(199, 82, 0) (dark)
+- `--spectrum-orange-900`
+  - **value**: rgb(177, 76, 0) -> rgb(194, 78, 0) (light)
+  - **value**: rgb(254, 154, 46) -> rgb(224, 100, 0) (dark)
+- `--spectrum-orange-1000`
+  - **value**: rgb(149, 61, 0) -> rgb(167, 62, 0) (light)
+  - **value**: rgb(255, 181, 88) -> rgb(243, 117, 0) (dark)
+- `--spectrum-orange-1100`
+  - **value**: rgb(122, 47, 0) -> rgb(144, 51, 0) (light)
+  - **value**: rgb(253, 206, 136) -> rgb(255, 137, 0) (dark)
+- `--spectrum-orange-1200`
+  - **value**: rgb(97, 35, 0) -> rgb(118, 41, 0) (light)
+  - **value**: rgb(255, 225, 179) -> rgb(255, 173, 45) (dark)
+- `--spectrum-orange-1300`
+  - **value**: rgb(73, 25, 1) -> rgb(95, 32, 0) (light)
+  - **value**: rgb(255, 242, 221) -> rgb(255, 201, 116) (dark)
+- `--spectrum-orange-1400`
+  - **value**: rgb(53, 18, 1) -> rgb(73, 24, 0) (light)
+  - **value**: rgb(255, 253, 249) -> rgb(255, 225, 178) (dark)
+- `--spectrum-yellow-100`
+  - **value**: rgb(251, 241, 152) -> rgb(255, 248, 204) (light)
+  - **value**: rgb(76, 54, 0) -> rgb(37, 23, 0) (dark)
+- `--spectrum-yellow-200`
+  - **value**: rgb(248, 231, 80) -> rgb(255, 241, 151) (light)
+  - **value**: rgb(88, 64, 0) -> rgb(47, 29, 0) (dark)
+- `--spectrum-yellow-300`
+  - **value**: rgb(248, 217, 4) -> rgb(255, 222, 44) (light)
+  - **value**: rgb(103, 76, 0) -> rgb(61, 39, 0) (dark)
+- `--spectrum-yellow-400`
+  - **value**: rgb(232, 198, 0) -> rgb(245, 199, 0) (light)
+  - **value**: rgb(119, 89, 0) -> rgb(83, 52, 0) (dark)
+- `--spectrum-yellow-500`
+  - **value**: rgb(215, 179, 0) -> rgb(230, 175, 0) (light)
+  - **value**: rgb(136, 104, 0) -> rgb(107, 67, 0) (dark)
+- `--spectrum-yellow-600`
+  - **value**: rgb(196, 159, 0) -> rgb(210, 149, 0) (light)
+  - **value**: rgb(155, 120, 0) -> rgb(130, 82, 0) (dark)
+- `--spectrum-yellow-700`
+  - **value**: rgb(176, 140, 0) -> rgb(193, 131, 0) (light)
+  - **value**: rgb(174, 137, 0) -> rgb(151, 97, 0) (dark)
+- `--spectrum-yellow-800`
+  - **value**: rgb(155, 120, 0) -> rgb(175, 116, 0) (light)
+  - **value**: rgb(192, 156, 0) -> rgb(164, 106, 0) (dark)
+- `--spectrum-yellow-900`
+  - **value**: rgb(133, 102, 0) -> rgb(158, 102, 0) (light)
+  - **value**: rgb(211, 174, 0) -> rgb(186, 124, 0) (dark)
+- `--spectrum-yellow-1000`
+  - **value**: rgb(112, 83, 0) -> rgb(134, 85, 0) (light)
+  - **value**: rgb(228, 194, 0) -> rgb(203, 141, 0) (dark)
+- `--spectrum-yellow-1100`
+  - **value**: rgb(91, 67, 0) -> rgb(114, 72, 0) (light)
+  - **value**: rgb(244, 213, 0) -> rgb(218, 159, 0) (dark)
+- `--spectrum-yellow-1200`
+  - **value**: rgb(72, 51, 0) -> rgb(93, 59, 0) (light)
+  - **value**: rgb(249, 232, 92) -> rgb(235, 183, 0) (dark)
+- `--spectrum-yellow-1300`
+  - **value**: rgb(54, 37, 0) -> rgb(75, 47, 0) (light)
+  - **value**: rgb(252, 246, 187) -> rgb(249, 206, 0) (dark)
+- `--spectrum-yellow-1400`
+  - **value**: rgb(40, 26, 0) -> rgb(56, 35, 0) (light)
+  - **value**: rgb(255, 255, 255) -> rgb(255, 230, 86) (dark)
+- `--spectrum-chartreuse-100`
+  - **value**: rgb(219, 252, 110) -> rgb(246, 251, 222) (light)
+  - **value**: rgb(48, 64, 0) -> rgb(23, 28, 0) (dark)
+- `--spectrum-chartreuse-200`
+  - **value**: rgb(203, 244, 67) -> rgb(234, 246, 173) (light)
+  - **value**: rgb(55, 74, 0) -> rgb(30, 36, 0) (dark)
+- `--spectrum-chartreuse-300`
+  - **value**: rgb(188, 233, 42) -> rgb(208, 236, 70) (light)
+  - **value**: rgb(65, 87, 0) -> rgb(39, 47, 0) (dark)
+- `--spectrum-chartreuse-400`
+  - **value**: rgb(170, 216, 22) -> rgb(182, 219, 0) (light)
+  - **value**: rgb(76, 102, 0) -> rgb(53, 63, 0) (dark)
+- `--spectrum-chartreuse-500`
+  - **value**: rgb(152, 197, 10) -> rgb(163, 196, 0) (light)
+  - **value**: rgb(89, 118, 0) -> rgb(68, 82, 0) (dark)
+- `--spectrum-chartreuse-600`
+  - **value**: rgb(135, 177, 3) -> rgb(143, 172, 0) (light)
+  - **value**: rgb(102, 136, 0) -> rgb(83, 100, 0) (dark)
+- `--spectrum-chartreuse-700`
+  - **value**: rgb(118, 156, 0) -> rgb(128, 153, 0) (light)
+  - **value**: rgb(117, 154, 0) -> rgb(97, 116, 0) (dark)
+- `--spectrum-chartreuse-800`
+  - **value**: rgb(103, 136, 0) -> rgb(114, 137, 0) (light)
+  - **value**: rgb(132, 173, 1) -> rgb(106, 127, 0) (dark)
+- `--spectrum-chartreuse-900`
+  - **value**: rgb(87, 116, 0) -> rgb(102, 122, 0) (light)
+  - **value**: rgb(148, 192, 8) -> rgb(122, 147, 0) (dark)
+- `--spectrum-chartreuse-1000`
+  - **value**: rgb(72, 96, 0) -> rgb(86, 103, 0) (light)
+  - **value**: rgb(166, 211, 18) -> rgb(136, 164, 0) (dark)
+- `--spectrum-chartreuse-1100`
+  - **value**: rgb(58, 77, 0) -> rgb(73, 87, 0) (light)
+  - **value**: rgb(184, 229, 37) -> rgb(151, 181, 0) (dark)
+- `--spectrum-chartreuse-1200`
+  - **value**: rgb(44, 59, 0) -> rgb(60, 71, 0) (light)
+  - **value**: rgb(205, 245, 71) -> rgb(169, 203, 0) (dark)
+- `--spectrum-chartreuse-1300`
+  - **value**: rgb(33, 44, 0) -> rgb(47, 57, 0) (light)
+  - **value**: rgb(231, 254, 154) -> rgb(187, 225, 0) (dark)
+- `--spectrum-chartreuse-1400`
+  - **value**: rgb(24, 31, 0) -> rgb(35, 43, 0) (light)
+  - **value**: rgb(255, 255, 255) -> rgb(219, 240, 117) (dark)
+- `--spectrum-celery-100`
+  - **value**: rgb(205, 252, 191) -> rgb(235, 255, 220) (light)
+  - **value**: rgb(0, 69, 10) -> rgb(11, 31, 0) (dark)
+- `--spectrum-celery-200`
+  - **value**: rgb(174, 246, 157) -> rgb(197, 255, 156) (light)
+  - **value**: rgb(0, 80, 12) -> rgb(15, 38, 0) (dark)
+- `--spectrum-celery-300`
+  - **value**: rgb(150, 238, 133) -> rgb(157, 247, 92) (light)
+  - **value**: rgb(0, 94, 14) -> rgb(21, 51, 1) (dark)
+- `--spectrum-celery-400`
+  - **value**: rgb(114, 224, 106) -> rgb(129, 228, 58) (light)
+  - **value**: rgb(0, 109, 15) -> rgb(31, 67, 4) (dark)
+- `--spectrum-celery-500`
+  - **value**: rgb(78, 207, 80) -> rgb(110, 206, 42) (light)
+  - **value**: rgb(0, 127, 15) -> rgb(41, 86, 8) (dark)
+- `--spectrum-celery-600`
+  - **value**: rgb(39, 187, 54) -> rgb(93, 180, 31) (light)
+  - **value**: rgb(0, 145, 18) -> rgb(50, 105, 11) (dark)
+- `--spectrum-celery-700`
+  - **value**: rgb(7, 167, 33) -> rgb(82, 161, 25) (light)
+  - **value**: rgb(4, 165, 30) -> rgb(60, 122, 15) (dark)
+- `--spectrum-celery-800`
+  - **value**: rgb(0, 145, 18) -> rgb(72, 144, 20) (light)
+  - **value**: rgb(34, 184, 51) -> rgb(66, 134, 18) (dark)
+- `--spectrum-celery-900`
+  - **value**: rgb(0, 124, 15) -> rgb(64, 129, 17) (light)
+  - **value**: rgb(68, 202, 73) -> rgb(78, 154, 23) (dark)
+- `--spectrum-celery-1000`
+  - **value**: rgb(0, 103, 15) -> rgb(52, 109, 12) (light)
+  - **value**: rgb(105, 220, 99) -> rgb(88, 172, 28) (dark)
+- `--spectrum-celery-1100`
+  - **value**: rgb(0, 83, 13) -> rgb(44, 92, 9) (light)
+  - **value**: rgb(142, 235, 127) -> rgb(100, 190, 35) (dark)
+- `--spectrum-celery-1200`
+  - **value**: rgb(0, 64, 10) -> rgb(35, 75, 6) (light)
+  - **value**: rgb(180, 247, 162) -> rgb(116, 213, 46) (dark)
+- `--spectrum-celery-1300`
+  - **value**: rgb(0, 48, 7) -> rgb(27, 60, 3) (light)
+  - **value**: rgb(221, 253, 211) -> rgb(136, 234, 65) (dark)
+- `--spectrum-celery-1400`
+  - **value**: rgb(0, 34, 5) -> rgb(19, 46, 0) (light)
+  - **value**: rgb(255, 255, 255) -> rgb(170, 251, 112) (dark)
+- `--spectrum-green-100`
+  - **value**: rgb(206, 248, 224) -> rgb(237, 252, 241) (light)
+  - **value**: rgb(4, 67, 41) -> rgb(0, 30, 23) (dark)
+- `--spectrum-green-200`
+  - **value**: rgb(173, 244, 206) -> rgb(215, 247, 225) (light)
+  - **value**: rgb(0, 78, 47) -> rgb(0, 38, 29) (dark)
+- `--spectrum-green-300`
+  - **value**: rgb(137, 236, 188) -> rgb(173, 238, 197) (light)
+  - **value**: rgb(0, 92, 56) -> rgb(0, 51, 38) (dark)
+- `--spectrum-green-400`
+  - **value**: rgb(103, 222, 168) -> rgb(107, 227, 162) (light)
+  - **value**: rgb(0, 108, 67) -> rgb(0, 68, 48) (dark)
+- `--spectrum-green-500`
+  - **value**: rgb(73, 204, 147) -> rgb(43, 209, 125) (light)
+  - **value**: rgb(0, 125, 78) -> rgb(2, 87, 58) (dark)
+- `--spectrum-green-600`
+  - **value**: rgb(47, 184, 128) -> rgb(18, 184, 103) (light)
+  - **value**: rgb(0, 143, 93) -> rgb(3, 106, 67) (dark)
+- `--spectrum-green-700`
+  - **value**: rgb(21, 164, 110) -> rgb(11, 164, 93) (light)
+  - **value**: rgb(18, 162, 108) -> rgb(4, 124, 75) (dark)
+- `--spectrum-green-800`
+  - **value**: rgb(0, 143, 93) -> rgb(7, 147, 85) (light)
+  - **value**: rgb(43, 180, 125) -> rgb(6, 136, 80) (dark)
+- `--spectrum-green-900`
+  - **value**: rgb(0, 122, 77) -> rgb(5, 131, 78) (light)
+  - **value**: rgb(67, 199, 143) -> rgb(9, 157, 89) (dark)
+- `--spectrum-green-1000`
+  - **value**: rgb(0, 101, 62) -> rgb(3, 110, 69) (light)
+  - **value**: rgb(94, 217, 162) -> rgb(14, 175, 98) (dark)
+- `--spectrum-green-1100`
+  - **value**: rgb(0, 81, 50) -> rgb(2, 93, 60) (light)
+  - **value**: rgb(129, 233, 184) -> rgb(24, 193, 110) (dark)
+- `--spectrum-green-1200`
+  - **value**: rgb(5, 63, 39) -> rgb(1, 76, 52) (light)
+  - **value**: rgb(177, 244, 209) -> rgb(57, 215, 134) (dark)
+- `--spectrum-green-1300`
+  - **value**: rgb(10, 46, 29) -> rgb(0, 61, 44) (light)
+  - **value**: rgb(223, 250, 234) -> rgb(126, 231, 172) (dark)
+- `--spectrum-green-1400`
+  - **value**: rgb(10, 32, 21) -> rgb(0, 46, 34) (light)
+  - **value**: rgb(254, 255, 252) -> rgb(189, 241, 208) (dark)
+- `--spectrum-seafoam-100`
+  - **value**: rgb(206, 247, 243) -> rgb(235, 251, 246) (light)
+  - **value**: rgb(18, 65, 63) -> rgb(0, 30, 27) (dark)
+- `--spectrum-seafoam-200`
+  - **value**: rgb(170, 241, 234) -> rgb(211, 246, 234) (light)
+  - **value**: rgb(14, 76, 73) -> rgb(0, 39, 35) (dark)
+- `--spectrum-seafoam-300`
+  - **value**: rgb(140, 233, 226) -> rgb(169, 237, 216) (light)
+  - **value**: rgb(4, 90, 87) -> rgb(0, 50, 44) (dark)
+- `--spectrum-seafoam-400`
+  - **value**: rgb(101, 218, 210) -> rgb(92, 225, 194) (light)
+  - **value**: rgb(0, 105, 101) -> rgb(0, 67, 59) (dark)
+- `--spectrum-seafoam-500`
+  - **value**: rgb(63, 201, 193) -> rgb(16, 207, 169) (light)
+  - **value**: rgb(0, 122, 117) -> rgb(2, 86, 75) (dark)
+- `--spectrum-seafoam-600`
+  - **value**: rgb(15, 181, 174) -> rgb(13, 181, 149) (light)
+  - **value**: rgb(0, 140, 135) -> rgb(4, 105, 89) (dark)
+- `--spectrum-seafoam-700`
+  - **value**: rgb(0, 161, 154) -> rgb(11, 162, 134) (light)
+  - **value**: rgb(0, 158, 152) -> rgb(6, 122, 103) (dark)
+- `--spectrum-seafoam-800`
+  - **value**: rgb(0, 140, 135) -> rgb(9, 144, 120) (light)
+  - **value**: rgb(3, 178, 171) -> rgb(8, 134, 112) (dark)
+- `--spectrum-seafoam-900`
+  - **value**: rgb(0, 119, 114) -> rgb(7, 129, 109) (light)
+  - **value**: rgb(54, 197, 189) -> rgb(10, 154, 128) (dark)
+- `--spectrum-seafoam-1000`
+  - **value**: rgb(0, 99, 95) -> rgb(5, 108, 92) (light)
+  - **value**: rgb(93, 214, 207) -> rgb(12, 173, 142) (dark)
+- `--spectrum-seafoam-1100`
+  - **value**: rgb(12, 79, 76) -> rgb(3, 92, 80) (light)
+  - **value**: rgb(132, 230, 223) -> rgb(14, 190, 156) (dark)
+- `--spectrum-seafoam-1200`
+  - **value**: rgb(18, 60, 58) -> rgb(1, 75, 67) (light)
+  - **value**: rgb(176, 242, 236) -> rgb(29, 214, 176) (dark)
+- `--spectrum-seafoam-1300`
+  - **value**: rgb(18, 44, 43) -> rgb(0, 60, 54) (light)
+  - **value**: rgb(223, 249, 246) -> rgb(122, 229, 203) (dark)
+- `--spectrum-seafoam-1400`
+  - **value**: rgb(15, 31, 30) -> rgb(0, 46, 40) (light)
+  - **value**: rgb(254, 255, 254) -> rgb(186, 241, 222) (dark)
+- `--spectrum-cyan-100`
+  - **value**: rgb(197, 248, 255) -> rgb(238, 250, 254) (light)
+  - **value**: rgb(0, 61, 98) -> rgb(0, 29, 39) (dark)
+- `--spectrum-cyan-200`
+  - **value**: rgb(164, 240, 255) -> rgb(217, 244, 253) (light)
+  - **value**: rgb(0, 71, 111) -> rgb(0, 36, 49) (dark)
+- `--spectrum-cyan-300`
+  - **value**: rgb(136, 231, 250) -> rgb(183, 231, 252) (light)
+  - **value**: rgb(0, 85, 127) -> rgb(0, 48, 65) (dark)
+- `--spectrum-cyan-400`
+  - **value**: rgb(96, 216, 243) -> rgb(138, 213, 255) (light)
+  - **value**: rgb(0, 100, 145) -> rgb(0, 64, 88) (dark)
+- `--spectrum-cyan-500`
+  - **value**: rgb(51, 197, 232) -> rgb(92, 192, 255) (light)
+  - **value**: rgb(0, 116, 162) -> rgb(0, 82, 113) (dark)
+- `--spectrum-cyan-600`
+  - **value**: rgb(18, 176, 218) -> rgb(48, 167, 254) (light)
+  - **value**: rgb(0, 134, 180) -> rgb(3, 99, 140) (dark)
+- `--spectrum-cyan-700`
+  - **value**: rgb(1, 156, 200) -> rgb(29, 149, 231) (light)
+  - **value**: rgb(0, 153, 198) -> rgb(8, 115, 168) (dark)
+- `--spectrum-cyan-800`
+  - **value**: rgb(0, 134, 180) -> rgb(18, 134, 205) (light)
+  - **value**: rgb(14, 173, 215) -> rgb(13, 125, 186) (dark)
+- `--spectrum-cyan-900`
+  - **value**: rgb(0, 113, 159) -> rgb(11, 120, 179) (light)
+  - **value**: rgb(44, 193, 230) -> rgb(24, 142, 220) (dark)
+- `--spectrum-cyan-1000`
+  - **value**: rgb(0, 93, 137) -> rgb(4, 102, 145) (light)
+  - **value**: rgb(84, 211, 241) -> rgb(38, 159, 244) (dark)
+- `--spectrum-cyan-1100`
+  - **value**: rgb(0, 74, 115) -> rgb(0, 87, 121) (light)
+  - **value**: rgb(127, 228, 249) -> rgb(63, 177, 255) (dark)
+- `--spectrum-cyan-1200`
+  - **value**: rgb(0, 57, 93) -> rgb(0, 71, 98) (light)
+  - **value**: rgb(167, 241, 255) -> rgb(107, 199, 255) (dark)
+- `--spectrum-cyan-1300`
+  - **value**: rgb(0, 42, 70) -> rgb(0, 57, 78) (light)
+  - **value**: rgb(215, 250, 255) -> rgb(152, 219, 255) (dark)
+- `--spectrum-cyan-1400`
+  - **value**: rgb(0, 30, 51) -> rgb(0, 43, 59) (light)
+  - **value**: rgb(255, 255, 255) -> rgb(195, 236, 252) (dark)
+- `--spectrum-indigo-100`
+  - **value**: rgb(237, 238, 255) -> rgb(247, 248, 255) (light)
+  - **value**: rgb(40, 44, 140) -> rgb(30, 0, 93) (dark)
+- `--spectrum-indigo-200`
+  - **value**: rgb(224, 226, 255) -> rgb(235, 238, 255) (light)
+  - **value**: rgb(47, 52, 163) -> rgb(35, 0, 110) (dark)
+- `--spectrum-indigo-300`
+  - **value**: rgb(211, 213, 255) -> rgb(216, 222, 255) (light)
+  - **value**: rgb(57, 63, 187) -> rgb(47, 0, 140) (dark)
+- `--spectrum-indigo-400`
+  - **value**: rgb(193, 196, 255) -> rgb(192, 201, 255) (light)
+  - **value**: rgb(70, 75, 211) -> rgb(62, 12, 174) (dark)
+- `--spectrum-indigo-500`
+  - **value**: rgb(172, 175, 255) -> rgb(167, 178, 255) (light)
+  - **value**: rgb(85, 91, 231) -> rgb(79, 30, 209) (dark)
+- `--spectrum-indigo-600`
+  - **value**: rgb(149, 153, 255) -> rgb(145, 151, 254) (light)
+  - **value**: rgb(104, 109, 244) -> rgb(95, 52, 235) (dark)
+- `--spectrum-indigo-700`
+  - **value**: rgb(126, 132, 252) -> rgb(132, 128, 254) (light)
+  - **value**: rgb(124, 129, 251) -> rgb(109, 75, 248) (dark)
+- `--spectrum-indigo-800`
+  - **value**: rgb(104, 109, 244) -> rgb(122, 106, 253) (light)
+  - **value**: rgb(145, 149, 255) -> rgb(116, 91, 252) (dark)
+- `--spectrum-indigo-900`
+  - **value**: rgb(82, 88, 228) -> rgb(113, 85, 250) (light)
+  - **value**: rgb(167, 170, 255) -> rgb(128, 119, 254) (dark)
+- `--spectrum-indigo-1000`
+  - **value**: rgb(64, 70, 202) -> rgb(99, 56, 238) (light)
+  - **value**: rgb(188, 190, 255) -> rgb(139, 141, 254) (dark)
+- `--spectrum-indigo-1100`
+  - **value**: rgb(50, 54, 168) -> rgb(84, 36, 219) (light)
+  - **value**: rgb(208, 210, 255) -> rgb(153, 161, 255) (dark)
+- `--spectrum-indigo-1200`
+  - **value**: rgb(38, 41, 134) -> rgb(69, 19, 191) (light)
+  - **value**: rgb(226, 228, 255) -> rgb(176, 186, 255) (dark)
+- `--spectrum-indigo-1300`
+  - **value**: rgb(27, 30, 100) -> rgb(55, 6, 160) (light)
+  - **value**: rgb(243, 243, 254) -> rgb(199, 208, 255) (dark)
+- `--spectrum-indigo-1400`
+  - **value**: rgb(20, 22, 72) -> rgb(42, 0, 129) (light)
+  - **value**: rgb(255, 255, 255) -> rgb(223, 228, 255) (dark)
+- `--spectrum-purple-100`
+  - **value**: rgb(246, 235, 255) -> rgb(251, 247, 254) (light)
+  - **value**: rgb(76, 13, 157) -> rgb(41, 0, 79) (dark)
+- `--spectrum-purple-200`
+  - **value**: rgb(238, 221, 255) -> rgb(244, 235, 252) (light)
+  - **value**: rgb(89, 17, 177) -> rgb(50, 0, 96) (dark)
+- `--spectrum-purple-300`
+  - **value**: rgb(230, 208, 255) -> rgb(235, 218, 249) (light)
+  - **value**: rgb(105, 28, 200) -> rgb(64, 0, 122) (dark)
+- `--spectrum-purple-400`
+  - **value**: rgb(219, 187, 254) -> rgb(221, 193, 246) (light)
+  - **value**: rgb(122, 45, 218) -> rgb(83, 0, 159) (dark)
+- `--spectrum-purple-500`
+  - **value**: rgb(204, 164, 253) -> rgb(208, 167, 243) (light)
+  - **value**: rgb(140, 65, 233) -> rgb(107, 6, 195) (dark)
+- `--spectrum-purple-600`
+  - **value**: rgb(189, 139, 252) -> rgb(191, 138, 238) (light)
+  - **value**: rgb(157, 87, 243) -> rgb(130, 34, 215) (dark)
+- `--spectrum-purple-700`
+  - **value**: rgb(174, 114, 249) -> rgb(178, 114, 235) (light)
+  - **value**: rgb(172, 111, 249) -> rgb(148, 62, 224) (dark)
+- `--spectrum-purple-800`
+  - **value**: rgb(157, 87, 244) -> rgb(166, 92, 231) (light)
+  - **value**: rgb(187, 135, 251) -> rgb(157, 78, 228) (dark)
+- `--spectrum-purple-900`
+  - **value**: rgb(137, 61, 231) -> rgb(154, 71, 226) (light)
+  - **value**: rgb(202, 159, 252) -> rgb(173, 105, 233) (dark)
+- `--spectrum-purple-1000`
+  - **value**: rgb(115, 38, 211) -> rgb(134, 40, 217) (light)
+  - **value**: rgb(215, 182, 254) -> rgb(186, 127, 237) (dark)
+- `--spectrum-purple-1100`
+  - **value**: rgb(93, 19, 183) -> rgb(115, 13, 204) (light)
+  - **value**: rgb(228, 204, 254) -> rgb(197, 149, 240) (dark)
+- `--spectrum-purple-1200`
+  - **value**: rgb(71, 12, 148) -> rgb(93, 0, 177) (light)
+  - **value**: rgb(239, 223, 255) -> rgb(212, 176, 244) (dark)
+- `--spectrum-purple-1300`
+  - **value**: rgb(51, 16, 106) -> rgb(75, 0, 144) (light)
+  - **value**: rgb(249, 240, 255) -> rgb(225, 201, 247) (dark)
+- `--spectrum-purple-1400`
+  - **value**: rgb(35, 15, 73) -> rgb(59, 0, 111) (light)
+  - **value**: rgb(255, 253, 255) -> rgb(238, 224, 250) (dark)
+- `--spectrum-fuchsia-100`
+  - **value**: rgb(255, 233, 252) -> rgb(254, 246, 255) (light)
+  - **value**: rgb(107, 3, 106) -> rgb(50, 0, 61) (dark)
+- `--spectrum-fuchsia-200`
+  - **value**: rgb(255, 218, 250) -> rgb(253, 233, 255) (light)
+  - **value**: rgb(123, 0, 123) -> rgb(61, 0, 74) (dark)
+- `--spectrum-fuchsia-300`
+  - **value**: rgb(254, 199, 248) -> rgb(250, 211, 255) (light)
+  - **value**: rgb(144, 0, 145) -> rgb(79, 0, 95) (dark)
+- `--spectrum-fuchsia-400`
+  - **value**: rgb(251, 174, 246) -> rgb(247, 181, 255) (light)
+  - **value**: rgb(165, 13, 166) -> rgb(102, 9, 120) (dark)
+- `--spectrum-fuchsia-500`
+  - **value**: rgb(245, 146, 243) -> rgb(243, 147, 255) (light)
+  - **value**: rgb(185, 37, 185) -> rgb(127, 23, 146) (dark)
+- `--spectrum-fuchsia-600`
+  - **value**: rgb(237, 116, 237) -> rgb(236, 105, 255) (light)
+  - **value**: rgb(205, 57, 206) -> rgb(151, 38, 170) (dark)
+- `--spectrum-fuchsia-700`
+  - **value**: rgb(224, 85, 226) -> rgb(223, 77, 245) (light)
+  - **value**: rgb(223, 81, 224) -> rgb(173, 51, 192) (dark)
+- `--spectrum-fuchsia-800`
+  - **value**: rgb(205, 58, 206) -> rgb(200, 68, 220) (light)
+  - **value**: rgb(235, 110, 236) -> rgb(186, 60, 206) (dark)
+- `--spectrum-fuchsia-900`
+  - **value**: rgb(182, 34, 183) -> rgb(181, 57, 200) (light)
+  - **value**: rgb(244, 140, 242) -> rgb(213, 73, 235) (dark)
+- `--spectrum-fuchsia-1000`
+  - **value**: rgb(157, 3, 158) -> rgb(156, 40, 175) (light)
+  - **value**: rgb(250, 168, 245) -> rgb(232, 91, 253) (dark)
+- `--spectrum-fuchsia-1100`
+  - **value**: rgb(128, 0, 129) -> rgb(135, 27, 154) (light)
+  - **value**: rgb(254, 194, 248) -> rgb(240, 122, 255) (dark)
+- `--spectrum-fuchsia-1200`
+  - **value**: rgb(100, 6, 100) -> rgb(113, 15, 131) (light)
+  - **value**: rgb(255, 219, 250) -> rgb(245, 159, 255) (dark)
+- `--spectrum-fuchsia-1300`
+  - **value**: rgb(71, 14, 70) -> rgb(92, 4, 109) (light)
+  - **value**: rgb(255, 239, 252) -> rgb(248, 191, 255) (dark)
+- `--spectrum-fuchsia-1400`
+  - **value**: rgb(50, 13, 49) -> rgb(72, 0, 88) (light)
+  - **value**: rgb(255, 253, 255) -> rgb(251, 219, 255) (dark)
+- `--spectrum-magenta-100`
+  - **value**: rgb(255, 234, 241) -> rgb(255, 245, 248) (light)
+  - **value**: rgb(118, 0, 58) -> rgb(59, 0, 22) (dark)
+- `--spectrum-magenta-200`
+  - **value**: rgb(255, 220, 232) -> rgb(255, 232, 240) (light)
+  - **value**: rgb(137, 0, 66) -> rgb(74, 0, 27) (dark)
+- `--spectrum-magenta-300`
+  - **value**: rgb(255, 202, 221) -> rgb(255, 213, 227) (light)
+  - **value**: rgb(160, 0, 77) -> rgb(93, 0, 34) (dark)
+- `--spectrum-magenta-400`
+  - **value**: rgb(255, 178, 206) -> rgb(255, 185, 208) (light)
+  - **value**: rgb(182, 18, 90) -> rgb(123, 0, 45) (dark)
+- `--spectrum-magenta-500`
+  - **value**: rgb(255, 149, 189) -> rgb(255, 152, 187) (light)
+  - **value**: rgb(203, 38, 109) -> rgb(152, 7, 60) (dark)
+- `--spectrum-magenta-600`
+  - **value**: rgb(250, 119, 170) -> rgb(255, 112, 159) (light)
+  - **value**: rgb(222, 61, 130) -> rgb(181, 19, 76) (dark)
+- `--spectrum-magenta-700`
+  - **value**: rgb(239, 90, 152) -> rgb(255, 72, 133) (light)
+  - **value**: rgb(237, 87, 149) -> rgb(207, 31, 92) (dark)
+- `--spectrum-magenta-800`
+  - **value**: rgb(222, 61, 130) -> rgb(240, 45, 110) (light)
+  - **value**: rgb(249, 114, 167) -> rgb(224, 38, 101) (dark)
+- `--spectrum-magenta-900`
+  - **value**: rgb(200, 34, 105) -> rgb(217, 35, 97) (light)
+  - **value**: rgb(255, 143, 185) -> rgb(255, 51, 119) (dark)
+- `--spectrum-magenta-1000`
+  - **value**: rgb(173, 9, 85) -> rgb(186, 22, 80) (light)
+  - **value**: rgb(255, 172, 202) -> rgb(255, 96, 149) (dark)
+- `--spectrum-magenta-1100`
+  - **value**: rgb(142, 0, 69) -> rgb(163, 5, 62) (light)
+  - **value**: rgb(255, 198, 218) -> rgb(255, 128, 171) (dark)
+- `--spectrum-magenta-1200`
+  - **value**: rgb(112, 0, 55) -> rgb(136, 0, 51) (light)
+  - **value**: rgb(255, 221, 233) -> rgb(255, 163, 194) (dark)
+- `--spectrum-magenta-1300`
+  - **value**: rgb(84, 3, 42) -> rgb(111, 0, 40) (light)
+  - **value**: rgb(255, 240, 245) -> rgb(255, 193, 214) (dark)
+- `--spectrum-magenta-1400`
+  - **value**: rgb(60, 6, 29) -> rgb(86, 0, 30) (light)
+  - **value**: rgb(255, 252, 253) -> rgb(255, 220, 232) (dark)
+- `--spectrum-opacity-checkerboard-square-dark`
+- `--spectrum-overlay-opacity`
+  - **value**: 0.5 -> 0.6 (dark)
+- `--spectrum-drop-shadow-color`
+- `--spectrum-background-base-color`
+- `--spectrum-background-layer-1-color`
+- `--spectrum-background-layer-2-color`
+  - **value**: `--spectrum-gray-50` -> `--spectrum-gray-25` (light)
+  - **value**: `--spectrum-gray-100` -> `--spectrum-gray-75` (dark)
+- `--spectrum-neutral-background-color-default`
+- `--spectrum-neutral-background-color-hover`
+- `--spectrum-neutral-background-color-down`
+- `--spectrum-neutral-background-color-key-focus`
+- `--spectrum-neutral-background-color-selected-default`
+- `--spectrum-neutral-background-color-selected-hover`
+- `--spectrum-neutral-background-color-selected-down`
+- `--spectrum-neutral-background-color-selected-key-focus`
+- `--spectrum-neutral-subdued-background-color-default`
+  - **value**: `--spectrum-gray-600` -> `--spectrum-gray-700` (light)
+  - **value**: `--spectrum-gray-400` -> `--spectrum-gray-500` (dark)
+- `--spectrum-neutral-subdued-background-color-hover`
+  - **value**: `--spectrum-gray-700` -> `--spectrum-gray-800` (light)
+  - **value**: `--spectrum-gray-300` -> `--spectrum-gray-400` (dark)
+- `--spectrum-neutral-subdued-background-color-down`
+  - **value**: `--spectrum-gray-200` -> `--spectrum-gray-400` (dark)
+- `--spectrum-neutral-subdued-background-color-key-focus`
+  - **value**: `--spectrum-gray-700` -> `--spectrum-gray-800` (light)
+  - **value**: `--spectrum-gray-300` -> `--spectrum-gray-400` (dark)
+- `--spectrum-accent-background-color-default`
+  - **value**: `--spectrum-accent-color-500` -> `--spectrum-accent-color-800` (dark)
+- `--spectrum-accent-background-color-hover`
+  - **value**: `--spectrum-accent-color-400` -> `--spectrum-accent-color-700` (dark)
+- `--spectrum-accent-background-color-down`
+  - **value**: `--spectrum-accent-color-1100` -> `--spectrum-accent-color-1000` (light)
+  - **value**: `--spectrum-accent-color-300` -> `--spectrum-accent-color-700` (dark)
+- `--spectrum-accent-background-color-key-focus`
+  - **value**: `--spectrum-accent-color-400` -> `--spectrum-accent-color-700` (dark)
+- `--spectrum-informative-background-color-default`
+  - **value**: `--spectrum-informative-color-500` -> `--spectrum-informative-color-800` (dark)
+- `--spectrum-informative-background-color-hover`
+  - **value**: `--spectrum-informative-color-400` -> `--spectrum-informative-color-700` (dark)
+- `--spectrum-informative-background-color-down`
+  - **value**: `--spectrum-informative-color-1100` -> `--spectrum-informative-color-1000` (light)
+  - **value**: `--spectrum-informative-color-300` -> `--spectrum-informative-color-700` (dark)
+- `--spectrum-informative-background-color-key-focus`
+  - **value**: `--spectrum-informative-color-400` -> `--spectrum-informative-color-700` (dark)
+- `--spectrum-negative-background-color-default`
+  - **value**: `--spectrum-negative-color-500` -> `--spectrum-negative-color-800` (dark)
+- `--spectrum-negative-background-color-hover`
+  - **value**: `--spectrum-negative-color-400` -> negative-color-700 (dark)
+- `--spectrum-negative-background-color-down`
+  - **value**: `--spectrum-negative-color-1100` -> `--spectrum-negative-color-1000` (light)
+  - **value**: `--spectrum-negative-color-300` -> `--spectrum-negative-color-700` (dark)
+- `--spectrum-negative-background-color-key-focus`
+  - **value**: `--spectrum-negative-color-400` -> `--spectrum-negative-color-700` (dark)
+- `--spectrum-positive-background-color-default`
+  - **value**: `--spectrum-positive-color-500` -> `--spectrum-positive-color-800` (dark)
+- `--spectrum-positive-background-color-hover`
+  - **value**: `--spectrum-positive-color-400` -> `--spectrum-positive-color-700` (dark)
+- `--spectrum-positive-background-color-down`
+  - **value**: `--spectrum-positive-color-1100` -> `--spectrum-positive-color-1000` (light)
+  - **value**: `--spectrum-positive-color-300` -> `--spectrum-positive-color-700` (dark)
+- `--spectrum-positive-background-color-key-focus`
+  - **value**: `--spectrum-positive-color-400` -> `--spectrum-positive-color-700` (dark)
+- `--spectrum-notice-background-color-default`
+  - **value**: `--spectrum-notice-color-800` -> `--spectrum-notice-color-900` (dark)
+- `--spectrum-disabled-background-color`
+  - **value**: `--spectrum-gray-200` -> `--spectrum-gray-100`
+- `--spectrum-disabled-static-white-background-color`
+  - **value**: `--spectrum-transparent-white-200` -> `--spectrum-transparent-white-100`
+- `--spectrum-disabled-static-black-background-color`
+  - **value**: `--spectrum-transparent-black-200` -> `--spectrum-transparent-black-100`
+- `--spectrum-gray-background-color-default`
+  - **value**: `--spectrum-gray-700` -> `--spectrum-gray-500` (dark)
+- `--spectrum-red-background-color-default`
+  - **value**: `--spectrum-red-700` -> `--spectrum-red-800` (dark)
+- `--spectrum-orange-background-color-default`
+  - **value**: `--spectrum-orange-800` -> `--spectrum-orange-900` (dark)
+- `--spectrum-yellow-background-color-default`
+  - **value**: `--spectrum-yellow-1000` -> `--spectrum-yellow-1100` (dark)
+- `--spectrum-chartreuse-background-color-default`
+  - **value**: `--spectrum-chartreuse-900` -> `--spectrum-chartreuse-1000` (dark)
+- `--spectrum-celery-background-color-default`
+  - **value**: `--spectrum-celery-800` -> `--spectrum-celery-900` (dark)
+- `--spectrum-green-background-color-default`
+  - **value**: `--spectrum-green-700` -> `--spectrum-green-800` (dark)
+- `--spectrum-seafoam-background-color-default`
+  - **value**: `--spectrum-seafoam-700` -> `--spectrum-seafoam-800` (dark)
+- `--spectrum-cyan-background-color-default`
+  - **value**: `--spectrum-cyan-700` -> `--spectrum-cyan-800` (dark)
+- `--spectrum-blue-background-color-default`
+  - **value**: `--spectrum-blue-700` -> `--spectrum-blue-800` (dark)
+- `--spectrum-indigo-background-color-default`
+  - **value**: `--spectrum-indigo-700` -> `--spectrum-indigo-800` (dark)
+- `--spectrum-purple-background-color-default`
+  - **value**: `--spectrum-purple-700` -> `--spectrum-purple-800` (dark)
+- `--spectrum-fuchsia-background-color-default`
+  - **value**: `--spectrum-fuchsia-700` -> `--spectrum-fuchsia-800` (dark)
+- `--spectrum-magenta-background-color-default`
+  - **value**: `--spectrum-magenta-700` -> `--spectrum-magenta-800` (dark)
+- `--spectrum-neutral-subdued-content-color-down`
+  - **value**: `--spectrum-gray-900` -> `--spectrum-gray-800`
+- `--spectrum-accent-content-color-down`
+  - **value**: `--spectrum-accent-color-1100` -> `--spectrum-accent-color-1000`
+- `--spectrum-negative-content-color-down`
+  - **value**: `--spectrum-negative-color-1100` -> `--spectrum-negative-color-1000`
+- `--spectrum-disabled-static-white-content-color`
+  - **value**: `--spectrum-transparent-white-500` -> `--spectrum-transparent-white-400`
+- `--spectrum-disabled-static-black-content-color`
+  - **value**: `--spectrum-transparent-black-500` -> `--spectrum-transparent-black-400`
+- `--spectrum-neutral-visual-color`
+- `--spectrum-accent-visual-color`
+- `--spectrum-informative-visual-color`
+- `--spectrum-negative-visual-color`
+  - **value**: `--spectrum-negative-color-700` -> `--spectrum-negative-color-900` (dark)
+- `--spectrum-notice-visual-color`
+  - **value**: `--spectrum-notice-color-700` -> `--spectrum-notice-color-800` (light)
+- `--spectrum-positive-visual-color`
+  - **value**: `--spectrum-positive-color-700` -> `--spectrum-positive-color-800` (light)
+  - **value**: `--spectrum-positive-color-800` -> `--spectrum-positive-color-900` (dark)
+- `--spectrum-gray-visual-color`
+- `--spectrum-red-visual-color`
+- `--spectrum-orange-visual-color`
+- `--spectrum-yellow-visual-color`
+- `--spectrum-chartreuse-visual-color`
+- `--spectrum-celery-visual-color`
+- `--spectrum-green-visual-color`
+- `--spectrum-seafoam-visual-color`
+- `--spectrum-cyan-visual-color`
+- `--spectrum-blue-visual-color`
+- `--spectrum-indigo-visual-color`
+- `--spectrum-purple-visual-color`
+- `--spectrum-fuchsia-visual-color`
+- `--spectrum-magenta-visual-color`
+
+**Please note** that the S1 and Express contexts are no longer shipped in this tokens package. Though individual components can still render those styles, you must load the v14.x or v15.x versions of the tokens package with the component styles in order to do so. These token assets are only for use with the S2 mappings of the components.
diff --git a/.changeset/metal-walls-scream.md b/.changeset/metal-walls-scream.md
new file mode 100644
index 0000000000..ea30ec26e1
--- /dev/null
+++ b/.changeset/metal-walls-scream.md
@@ -0,0 +1,19 @@
+---
+"@spectrum-css/preview": major
+---
+
+## Breaking change
+
+This update removes the previously deprecated component documentation for **cyclebutton**, **quickaction**, **searchwithin**, and **splitbutton**.
+
+To support the Spectrum 2 (S2) Foundations release, Storybook has been updated to toggle token packages to connect the following labels with their appropriate data sources:
+
+- **Spectrum 1**: Flagged as the "legacy" context, this version is no longer the default for the component contexts. When selected, Storybook will load the `@spectrum-css/tokens` at release `v14.6.0` and attach the `.spectrum--legacy` class to the container.
+- **Spectrum 2**: The new default context, this version represents the "S2 Foundations" release which serves as a bridge between S1 and S2. Components in this context are not fully S2 and will not exactly match specifications but they do reflect a significant move toward the S2 designs. For full details, see the token and component-level changelogs.
+- **Express**: This now deprecated context is still rendered in Storybook by leveraging the `@spectrum-css/tokens` at release `v14.6.0`. Please note that Express and S1 will be removed in the next major release.
+
+This release also includes:
+
+- New migration documentation for S1 -> S2 updates
+- Fix for the duplicate line numbers in the code preview plugin
+- Updated styles to integrate Spectrum styling into the Storybook UI
diff --git a/.changeset/wise-otters-burn.md b/.changeset/wise-otters-burn.md
new file mode 100644
index 0000000000..7df57535da
--- /dev/null
+++ b/.changeset/wise-otters-burn.md
@@ -0,0 +1,110 @@
+---
+"@spectrum-css/floatingactionbutton": major
+"@spectrum-css/opacitycheckerboard": major
+"@spectrum-css/illustratedmessage": major
+"@spectrum-css/coachindicator": major
+"@spectrum-css/contextualhelp": major
+"@spectrum-css/progresscircle": major
+"@spectrum-css/dropindicator": major
+"@spectrum-css/infieldbutton": major
+"@spectrum-css/actionbutton": major
+"@spectrum-css/pickerbutton": major
+"@spectrum-css/actiongroup": major
+"@spectrum-css/alertbanner": major
+"@spectrum-css/alertdialog": major
+"@spectrum-css/buttongroup": major
+"@spectrum-css/clearbutton": major
+"@spectrum-css/closebutton": major
+"@spectrum-css/colorhandle": major
+"@spectrum-css/colorslider": major
+"@spectrum-css/inlinealert": major
+"@spectrum-css/logicbutton": major
+"@spectrum-css/progressbar": major
+"@spectrum-css/statuslight": major
+"@spectrum-css/swatchgroup": major
+"@spectrum-css/actionmenu": major
+"@spectrum-css/breadcrumb": major
+"@spectrum-css/colorloupe": major
+"@spectrum-css/colorwheel": major
+"@spectrum-css/datepicker": major
+"@spectrum-css/fieldgroup": major
+"@spectrum-css/fieldlabel": major
+"@spectrum-css/pagination": major
+"@spectrum-css/typography": major
+"@spectrum-css/accordion": major
+"@spectrum-css/actionbar": major
+"@spectrum-css/assetcard": major
+"@spectrum-css/assetlist": major
+"@spectrum-css/coachmark": major
+"@spectrum-css/colorarea": major
+"@spectrum-css/splitview": major
+"@spectrum-css/textfield": major
+"@spectrum-css/thumbnail": major
+"@spectrum-css/calendar": major
+"@spectrum-css/checkbox": major
+"@spectrum-css/combobox": major
+"@spectrum-css/dropzone": major
+"@spectrum-css/helptext": major
+"@spectrum-css/steplist": major
+"@spectrum-css/taggroup": major
+"@spectrum-css/treeview": major
+"@spectrum-css/underlay": major
+"@spectrum-css/commons": major
+"@spectrum-css/divider": major
+"@spectrum-css/popover": major
+"@spectrum-css/sidenav": major
+"@spectrum-css/stepper": major
+"@spectrum-css/tooltip": major
+"@spectrum-css/avatar": major
+"@spectrum-css/button": major
+"@spectrum-css/dialog": major
+"@spectrum-css/miller": major
+"@spectrum-css/picker": major
+"@spectrum-css/rating": major
+"@spectrum-css/search": major
+"@spectrum-css/slider": major
+"@spectrum-css/swatch": major
+"@spectrum-css/switch": major
+"@spectrum-css/asset": major
+"@spectrum-css/badge": major
+"@spectrum-css/meter": major
+"@spectrum-css/modal": major
+"@spectrum-css/radio": major
+"@spectrum-css/table": major
+"@spectrum-css/toast": major
+"@spectrum-css/card": major
+"@spectrum-css/dial": major
+"@spectrum-css/form": major
+"@spectrum-css/icon": major
+"@spectrum-css/link": major
+"@spectrum-css/menu": major
+"@spectrum-css/page": major
+"@spectrum-css/tabs": major
+"@spectrum-css/tray": major
+"@spectrum-css/well": major
+"@spectrum-css/tag": major
+---
+
+## Breaking change
+
+This major update creates a bridge between the Spectrum 1 (S1) and Spectrum 2 (S2) designs, dubbed "Spectrum 2 Foundations". These do _NOT_ reflect a fully migrated S2 component. This approach allows consumers to swap the appearance of their components between S1, Express, and S2 by leveraging a "system" layer that remaps the necessary component-level tokens to the appropriate token dataset.
+
+For these components to appear S2, you must load the assets with the `@spectrum-css/tokens` at `v16` or higher.
+
+For S1 or Express, load assets with the `@spectrum-css/tokens` at `v14.x` or `v15.x`.
+
+If you are looking to implement a fully S2 design, please explore the `next` tag releases instead of using this foundations release. **This release is used in Spectrum Web Components 1.x**.
+
+### Deprecations
+
+The `metadata` folder containing the `mods.md` and `metadata.json` assets has been removed from source. To find information about the components including what selectors, modifiers, and passthroughs are used, please see the `dist/metadata.json` asset shipped with every component containing CSS.
+
+The `index-vars.css` asset has been removed in this release as it was previously deprecated and is no longer maintained. Please use the `index.css` or `index-base.css`
+
+### File usage
+
+If you are rendering components and need **only** the S2 Foundations styles, you can make use of the `index.css` asset which contains all the base styles plus the system mappings for S2 Foundations.
+
+If you are using this version to publish **only** an S1 or Express component, you can use the `index-base.css` plus the desired `themes/(spectrum|express).css` file.
+
+To render a component that can be easily swapped between the S2 Foundations, S1, or Express contexts, load `index-base.css` with the `index-theme.css` file and leverage the appropriate context classes (`.spectrum--legacy` for S1 and `.spectrum--express` for Express).
diff --git a/.gitignore b/.gitignore
index cd27332f67..7b820e4545 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,6 @@
 dist
-!tokens/dist/index.css
-!tokens/dist/css/*.css
-!tokens/dist/css/express/*.css
-!tokens/dist/css/spectrum/*.css
+!dist/metadata.json
+!tokens/dist/**
 
 # Not committing the map assets, these are dev-only
 *.map
diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css
index d10bbc45c8..fbf3f32e58 100644
--- a/.storybook/assets/base.css
+++ b/.storybook/assets/base.css
@@ -30,10 +30,15 @@ body {
 
 .spectrum {
 	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-layer-1-color);
+	background-color: var(--spectrum-background-base-color);
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
 }
 
+.spectrum.spectrum--legacy {
+	color: var(--spectrum-neutral-content-color-default);
+	background-color: var(--spectrum-background-layer-1-color);
+}
+
 /* Hide the SVG elements that only include references */
 svg:has(symbol):not(:has(use)) {
 	display: none;
diff --git a/.storybook/assets/images/gray_migration-guide.png b/.storybook/assets/images/gray_migration-guide.png
new file mode 100644
index 0000000000..43dde6742d
Binary files /dev/null and b/.storybook/assets/images/gray_migration-guide.png differ
diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js
index 26e6d076e3..991a1717dd 100644
--- a/.storybook/decorators/context.js
+++ b/.storybook/decorators/context.js
@@ -1,7 +1,8 @@
 import { makeDecorator, useEffect } from "@storybook/preview-api";
 import { fetchContainers, toggleStyles } from "./helpers.js";
 
-import tokens from "@spectrum-css/tokens/dist/index.css?inline";
+import legacyTokens from "@spectrum-css/tokens-legacy/dist/index.css?inline";
+import tokens from "@spectrum-css/tokens/dist/css/index.css?inline";
 
 /**
  * @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework>
@@ -18,7 +19,7 @@ export const withContextWrapper = makeDecorator({
 			} = {},
 			globals: {
 				color = "light",
-				context = "legacy",
+				context = "spectrum",
 				scale = "medium",
 			} = {},
 			parameters: {
@@ -52,14 +53,14 @@ export const withContextWrapper = makeDecorator({
 			const isModern = Boolean(context === "spectrum");
 			const isExpress = Boolean(context === "express");
 
-			// Start by attaching the appropriate tokens to the container
-			toggleStyles(document.body, "tokens", tokens, !isRaw);
-
 			if (!isRaw) {
 				// add the default classes to the body to ensure labels, headings, and borders are styled correctly
 				document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
 			}
 
+			// Start by attaching the appropriate tokens to the container
+			toggleStyles(document.body, "tokens", isModern ? tokens : legacyTokens, !isRaw, context);
+
 			for (const container of fetchContainers(id, isDocs, isTesting)) {
 				// Check if the container is a testing wrapper to prevent applying colors around the testing grid
 				const isTestingWrapper = isTesting ? container.matches("body:has([data-testing-preview]),[data-testing-preview]") : false;
@@ -127,7 +128,7 @@ export const withContextWrapper = makeDecorator({
 				}
 			}
 
-		}, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, showTestingGrid]);
+		}, [context, color, scale, viewMode, original, staticColor, rootClass, tokens, legacyTokens, staticColorSettings, showTestingGrid]);
 
 		return StoryFn(data);
 	},
diff --git a/.storybook/deprecated/cyclebutton/cyclebutton.stories.js b/.storybook/deprecated/cyclebutton/cyclebutton.stories.js
deleted file mode 100644
index c42fa7288a..0000000000
--- a/.storybook/deprecated/cyclebutton/cyclebutton.stories.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
-import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
-import packageJson from "@spectrum-css/cyclebutton/package.json";
-import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
-import { html } from "lit";
-
-import "@spectrum-css/cyclebutton/dist/index-vars.css";
-import "@spectrum-css/cyclebutton/dist/vars.css";
-
-/**
- * **This component is deprecated.** Please use the quiet variant of action button with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation.
- *
- * The cycle button component is an action button that cycles through two different icons, a play that then changes to a pause, for example.
- */
-export default {
-	title: "Cycle button",
-	component: "CycleButton",
-	argTypes: {
-		size: ActionButtonStories?.argTypes?.size ?? {},
-		initialIcon: {
-			...(IconStories?.argTypes?.iconName ?? {}),
-			name: "Initial icon",
-			type: { name: "string", required: true },
-			if: false,
-		},
-		selectedIcon: {
-			...(IconStories?.argTypes?.iconName ?? {}),
-			name: "Selected icon",
-			if: false,
-		},
-		isSelected: ActionButtonStories?.argTypes?.isSelected ?? {},
-		isDisabled: ActionButtonStories?.argTypes?.isDisabled ?? {},
-	},
-	args: {
-		rootClass: "spectrum-CycleButton",
-		size: "m",
-		initialIcon: "Play",
-		selectedIcon: "Pause",
-	},
-	parameters: {
-		actions: {
-			handles: [...(ActionButtonStories?.parameters?.actions?.handles ?? [])],
-		},
-		chromatic: { disableSnapshot: true },
-		status: {
-			type: "deprecated"
-		},
-		packageJson,
-	},
-};
-
-export const Default = (({
-	rootClass = "spectrum-CycleButton",
-	customClasses = [],
-	size = "m",
-	isDisabled = false,
-	onclick,
-	selectedIcon = "Pause",
-	initialIcon = "Play"
-} = {}, context = {}) => {
-	const { updateArgs } = context;
-
-	return html`
-		<!-- Note: These dimensions don't change in express theme -->
-		<style>
-			:root, .spectrum--medium { --spectrum-global-dimension-size-85: 7px; }
-			.spectrum--large { --spectrum-global-dimension-size-85: 9px; }
-		</style>
-		${ActionButton({
-			customClasses: [rootClass, ...customClasses],
-			isQuiet: true,
-			isDisabled,
-			size,
-			iconName: initialIcon,
-			iconSet: "workflow",
-			onclick:
-				onclick ??
-				function () {
-					if (isDisabled) return;
-
-					updateArgs({
-						initialIcon: selectedIcon,
-						selectedIcon: initialIcon
-					});
-				},
-		}, context)}
-	`;
-}).bind({});
-Default.args = {};
diff --git a/.storybook/deprecated/quickaction/quickaction.stories.js b/.storybook/deprecated/quickaction/quickaction.stories.js
deleted file mode 100644
index 15dc69298b..0000000000
--- a/.storybook/deprecated/quickaction/quickaction.stories.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import packageJson from "@spectrum-css/quickaction/package.json";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-
-import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
-
-import "@spectrum-css/quickaction/dist/index-vars.css";
-import "@spectrum-css/quickaction/dist/vars.css";
-
-/**
- * **This component is deprecated.** Please use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead.
- */
-export default {
-	title: "Quick actions",
-	component: "QuickAction",
-	argTypes: {
-		content: { table: { disable: true } },
-		isOpen: {
-			name: "Open",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "Component",
-			},
-			control: "boolean",
-		},
-		position: {
-			name: "Position",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string" },
-				category: "Component",
-			},
-			control: "select",
-			options: ["left", "right"],
-		},
-		textOnly: {
-			name: "Text only action buttons",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "Advanced",
-			},
-			control: "boolean",
-		},
-	},
-	args: {
-		rootClass: "spectrum-QuickActions",
-		isOpen: true,
-		textOnly: false,
-		content: [
-			{
-				iconName: "Edit",
-				iconSet: "workflow",
-				label: "Edit",
-			},
-			{
-				iconName: "Copy",
-				iconSet: "workflow",
-				label: "Copy",
-			},
-			{
-				iconName: "Delete",
-				iconSet: "workflow",
-				label: "Delete",
-			},
-		],
-	},
-	parameters: {
-		chromatic: { disableSnapshot: true },
-		status: {
-			type: "deprecated"
-		},
-		packageJson: {
-			...packageJson,
-			"spectrum": [
-				{
-					"guidelines": "https://spectrum.adobe.com/page/quick-actions/",
-					"rootClass": "spectrum-QuickActions",
-				}
-			]
-		}
-	},
-};
-
-const Template = ({
-	rootClass = "spectrum-QuickActions",
-	size = "m",
-	isOpen = false,
-	textOnly = false,
-	position,
-	// noOverlay = false,
-	content = [],
-	id,
-	customClasses = [],
-} = {}, context = {}) => {
-	if (!content.length) {
-		console.warn("QuickActions: requires content be passed in to render.");
-		return html``;
-	}
-
-	if (!content.some((c) => c.icon)) textOnly = true;
-
-	return html`
-		<!-- Note: Only values that differ in express theme are included -->
-		<style>
-			:root {
-				--spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-50);
-				--spectrum-alias-background-color-quickactions-overlay: rgba(0,0,0,0.2);
-			}
-			:root, .spectrum--light {
-				--spectrum-alias-background-color-quickactions: rgba(248,248,248,0.9);
-			}
-			.spectrum--dark {
-				--spectrum-alias-background-color-quickactions: rgba(50,50,50,0.9);
-			}
-			.spectrum--darkest {
-				--spectrum-alias-background-color-quickactions: rgba(29,29,29,0.9);
-			}
-			:root, .spectrum--medium {
-				--spectrum-global-dimension-size-50: 4px;
-				--spectrum-global-dimension-size-100: 8px;
-				--spectrum-global-dimension-size-500: 40px;
-			}
-			.spectrum--large {
-				--spectrum-global-dimension-size-50: 5px;
-				--spectrum-global-dimension-size-100: 10px;
-				--spectrum-global-dimension-size-500: 50px;
-			}
-			.spectrum--express {
-				--spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-75);
-			}
-		</style>
-		<div
-			class="${classMap({
-				[rootClass]: true,
-				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof size !== "undefined",
-				"is-open": isOpen,
-				[`${rootClass}--${position}`]: typeof position !== "undefined",
-				[`${rootClass}--textOnly`]: textOnly,
-				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-			})}"
-			id=${ifDefined(id)}
-		>
-			${content.map((c) => {
-				if ((typeof c === "object" && c.iconName) || c.label) {
-					return ActionButton({ ...c, isQuiet: true }, context);
-				} else return c;
-			})}
-		</div>
-	`;
-};
-
-export const Default = Template.bind({});
-Default.args = {};
diff --git a/.storybook/deprecated/searchwithin/searchwithin.stories.js b/.storybook/deprecated/searchwithin/searchwithin.stories.js
deleted file mode 100644
index 4591ffd180..0000000000
--- a/.storybook/deprecated/searchwithin/searchwithin.stories.js
+++ /dev/null
@@ -1,238 +0,0 @@
-import packageJson from "@spectrum-css/searchwithin/package.json";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { styleMap } from "lit/directives/style-map.js";
-
-import { Template as ClearButton } from "@spectrum-css/clearbutton/stories/template.js";
-import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
-import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
-import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
-
-import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
-
-import "@spectrum-css/searchwithin/dist/index-vars.css";
-import "@spectrum-css/searchwithin/dist/vars.css";
-
-/**
- * **This component is deprecated.** Please use a search field with a separate control to filter the search instead.
- */
-export default {
-	title: "Search within",
-	component: "SearchWithin",
-	argTypes: {
-		size: {
-			name: "Size",
-			type: { name: "string", required: true },
-			table: {
-				type: { summary: "string" },
-				category: "Component",
-			},
-			options: ["s", "m", "l", "xl"],
-			control: "select",
-		},
-		label: {
-			name: "Label",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string" },
-				category: "Content",
-			},
-			control: { type: "text" },
-		},
-		labelPosition: {
-			name: "Label position",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string" },
-				category: "Content",
-			},
-			options: ["top", "left"],
-			control: { type: "select" },
-		},
-		withSwitch: {
-			name: "Display with a switch component",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "Component",
-			},
-			control: "boolean",
-			if: { arg: "labelPosition", eq: "left" },
-		},
-		placeholder: {
-			name: "Placeholder",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string" },
-				category: "Content",
-			},
-			control: { type: "text" },
-		},
-		isQuiet: {
-			name: "Quiet styling",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "Component",
-			},
-			control: "boolean",
-		},
-		isOpen: {
-			name: "Open",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "State",
-			},
-			control: "boolean",
-		},
-		isKeyboardFocused: {
-			name: "Keyboard focused",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "State",
-			},
-			control: "boolean",
-		},
-		isDisabled: {
-			name: "Disabled",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "State",
-			},
-			control: "boolean",
-		},
-		isLoading: {
-			name: "Loading",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "State",
-			},
-			control: "boolean",
-		},
-		isInvalid: {
-			name: "Invalid input",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "State",
-			},
-			control: "boolean",
-		},
-		content: { table: { disable: true } },
-	},
-	args: {
-		rootClass: "spectrum-SearchWithin",
-		isOpen: false,
-		isQuiet: false,
-		size: "m",
-		label: "All",
-		placeholder: "Search",
-		isKeyboardFocused: false,
-		isLoading: false,
-		isDisabled: false,
-		isInvalid: false,
-		withSwitch: false,
-	},
-	parameters: {
-		chromatic: { disableSnapshot: true },
-		status: {
-			type: "deprecated"
-		},
-		packageJson,
-	},
-};
-
-const Template = ({
-	rootClass = "spectrum-SearchWithin",
-	customClasses = [],
-	customStyles = {},
-	isQuiet = false,
-	isOpen = false,
-	isInvalid = false,
-	isLoading = false,
-	isDisabled = false,
-	withSwitch = false,
-	isKeyboardFocused = false,
-	size = "m",
-	label,
-	placeholder,
-}, context) => html`
-		<!-- Note: Only values that differ in express theme are included -->
-	<style>
-		.spectrum-SearchWithin {
-			--spectrum-alias-input-border-size: var(--spectrum-global-dimension-static-size-10, 1px);
-		}
-		.spectrum--express .spectrum-SearchWithin {
-			--spectrum-alias-input-border-size: var(--spectrum-global-dimension-static-size-25, 2px);
-		}
-	</style>
-	<form
-		class=${classMap({
-			[rootClass]: true,
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-		style=${ifDefined(styleMap(customStyles))}
-	>
-		${Picker({
-			size,
-			placeholder: label,
-			label: undefined,
-			isOpen,
-			isQuiet,
-			isInvalid,
-			isLoading,
-			isDisabled,
-			withSwitch,
-			position: "left",
-			customClasses: [`${rootClass}-picker`],
-		}, context)}
-		${Textfield({
-			size,
-			autocomplete: false,
-			name: "search",
-			placeholder,
-			type: "search",
-			customInputClasses: [`${rootClass}-input`],
-			isQuiet,
-			isInvalid,
-			isLoading,
-			isDisabled,
-			isKeyboardFocused,
-		}, context)}
-		${ClearButton({
-			size,
-			customClasses: [`${rootClass}-clearButton`],
-		}, context)}
-		${Popover({
-			isOpen: isOpen,
-			withTip: false,
-			position: "bottom",
-			customStyles: {
-				position: "absolute",
-				top: "38px",
-				left: "0",
-			},
-			content: [
-				Menu({
-					items: [
-						{ label: "Deselect" },
-						{ label: "Select Inverse" },
-						{ label: "Feather..." },
-						{ label: "Select and Mask..." },
-						{ type: "divider" },
-						{ label: "Save Selection" },
-						{ label: "Make Work Path", isDisabled: true },
-					],
-				}, context),
-			],
-		}, context)}
-	</form>
-`;
-
-export const Default = Template.bind({});
-Default.args = {};
diff --git a/.storybook/deprecated/splitbutton/splitbutton.stories.js b/.storybook/deprecated/splitbutton/splitbutton.stories.js
deleted file mode 100644
index 74af7005b9..0000000000
--- a/.storybook/deprecated/splitbutton/splitbutton.stories.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import packageJson from "@spectrum-css/splitbutton/package.json";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-
-import { Template as Button } from "@spectrum-css/button/stories/template.js";
-
-import "@spectrum-css/splitbutton/dist/index-vars.css";
-import "@spectrum-css/splitbutton/dist/vars.css";
-
-/**
- * **This component is deprecated.** Please use a button group to show any additional actions related to the most critical action. Reference [Spectrum documentation](https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions) for more information.
- *
- * A split button surfaces an immediately invokable action via it's main button, as well as a list of alternative actions in its toggle-able menu overlay.
- */
-export default {
-	title: "Split button",
-	component: "SplitButton",
-	argTypes: {
-		size: {
-			name: "Size",
-			type: { name: "string", required: true },
-			table: { disable: true },
-			options: ["m"],
-			control: "select",
-		},
-		variant: {
-			name: "Variant",
-			type: { name: "string" },
-			table: { disable: true },
-			options: ["accent", "primary", "secondary"],
-			control: "select",
-		},
-		position: {
-			name: "Position",
-			type: { name: "string", required: true },
-			table: {
-				type: { summary: "string" },
-				category: "Component",
-			},
-			options: ["right", "left"],
-			control: "select",
-		},
-		iconName: { table: { disable: true } },
-		label: {
-			name: "Label",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string" },
-				category: "Content",
-			},
-			control: { type: "text" },
-		},
-	},
-	args: {
-		rootClass: "spectrum-SplitButton",
-		size: "m",
-		position: "right",
-		label: "Split Button",
-		variant: "accent",
-		iconName: "ChevronDown100",
-	},
-	parameters: {
-		chromatic: { disableSnapshot: true },
-		status: {
-			type: "deprecated"
-		},
-		packageJson,
-	},
-};
-
-const Template = ({
-	rootClass = "spectrum-SplitButton",
-	customClasses = [],
-	customFirstButtonClasses = [],
-	customLastButtonClasses = [],
-	size = "m",
-	variant = "cta",
-	iconName = "ChevronDown100",
-	iconSet = "ui",
-	labelIconName = undefined,
-	position = "right",
-	label = "Split button",
-} = {}, context = {}) => {
-	return html`
-		<!-- Note: Only values that differ in express theme are included -->
-		<style>
-			:root, .spectrum--medium {
-				--spectrum-global-dimension-size-25: 2px;
-				--spectrum-global-dimension-size-40: 3px;
-				--spectrum-global-dimension-size-100: 8px;
-				--spectrum-global-dimension-size-125: 10px;
-				--spectrum-global-dimension-size-150: 12px;
-				--spectrum-global-dimension-size-175: 14px;
-				--spectrum-global-dimension-size-200: 16px;
-			}
-			.spectrum--large {
-				--spectrum-global-dimension-size-40: 4px;
-				--spectrum-global-dimension-size-100: 10px;
-				--spectrum-global-dimension-size-125: 13px;
-				--spectrum-global-dimension-size-150: 15px;
-				--spectrum-global-dimension-size-175: 18px;
-				--spectrum-global-dimension-size-200: 20px;
-			}
-			.spectrum-SplitButton {
-				--spectrum-button-m-primary-outline-texticon-padding-left: var(--spectrum-button-m-primary-outline-texticon-padding-right);
-				--spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-25);
-				--spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25, 2px);
-			}
-			.spectrum--express .spectrum-SplitButton {
-				--spectrum-button-m-primary-outline-texticon-padding-left: var(--spectrum-global-dimension-size-175);
-				--spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-40);
-			}
-		</style>
-		<div
-			class=${classMap({
-				[rootClass]: true,
-				[`${rootClass}--left`]:
-					typeof position !== "undefined" && position === "left",
-				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-			})}
-		>
-			${Button({
-				variant,
-				size,
-				iconSet,
-				iconName: position === "right"
-					? typeof labelIconName != "undefined" ? labelIconName : undefined
-					: iconName,
-				label: position === "right" ? label : undefined,
-				hideLabel: position === "right" ? false : true,
-				customClasses: [
-					position === "right"
-						? "spectrum-SplitButton-action"
-						: "spectrum-SplitButton-trigger",
-					...customFirstButtonClasses
-				]
-			}, context)}
-			${Button({
-				variant,
-				size,
-				iconSet,
-				iconName: position === "right"
-					? iconName
-					: typeof labelIconName != "undefined" ? labelIconName : undefined,
-				iconAfterLabel: true,
-				label: position === "right" ? undefined : label,
-				hideLabel: position === "right" ? true : false,
-				customClasses: [
-					position === "right"
-						? "spectrum-SplitButton-trigger"
-						: "spectrum-SplitButton-action",
-					...customLastButtonClasses
-				]
-			}, context)}
-		</div>
-	`;
-};
-
-export const Default = Template.bind({});
-Default.args = {};
diff --git a/.storybook/guides/develop.mdx b/.storybook/guides/develop.mdx
index b68956cd0a..d36ba09a9a 100644
--- a/.storybook/guides/develop.mdx
+++ b/.storybook/guides/develop.mdx
@@ -46,8 +46,9 @@ Each component outputs the following assets to `dist`:
 
 Each component outputs theme-specific assets to `dist/themes`. These assets include the system variables mapped to their global token counterparts. This file is meant to be loaded in conjunction with the `index-base.css` and `index-theme.css` files to render a themed component.
 
-- `themes/spectrum.css`: Represents the Spectrum theme.
-- `themes/express.css`: Represents the Express theme. **deprecated in Spectrum 2**
+- `themes/spectrum-two.css`: Represents the current Spectrum theme, aka Spectrum 2.
+- `themes/spectrum.css`: Represents the legacy Spectrum theme, aka Spectrum 1. **deprecated**
+- `themes/express.css`: Represents the Express theme. **deprecated**
 
 ## Adding a new component
 
diff --git a/.storybook/guides/s2_migration.mdx b/.storybook/guides/s2_migration.mdx
new file mode 100644
index 0000000000..c94a30bf8a
--- /dev/null
+++ b/.storybook/guides/s2_migration.mdx
@@ -0,0 +1,70 @@
+import { Meta, Title } from "@storybook/blocks";
+import { ThemeContainer, Heading } from "../blocks";
+
+import GrayMigrationGuide from "../assets/images/gray_migration-guide.png";
+
+<Meta title="Migration guide" />
+<Title>Migration guide</Title>
+
+## Deprecated components
+
+- Cycle button: Use the quiet variant of action button with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation.
+- Quick actions: Use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead.
+- Search within: Use a search field with a separate control to filter the search instead.
+- Split button: Use a button group to show any additional actions related to the most critical action. Reference [Spectrum documentation](https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions) for more information.
+
+## Grays
+
+<img
+	src={GrayMigrationGuide}
+	alt="Gray migration guide"
+	style={{ maxInlineSize: "400px", borderRadius: "8px", overflow: "hidden" }}
+/>
+<br />
+<br />
+
+### Examples of using the new grays
+
+- `Gray-25`, `-50`, and `-75` are reserved for background layers.
+- `Gray-100`, `-200`, and `-300` are used for lower contrast component background progressions or borders.
+- `Gray-800` and `-900` are used for higher contrast component backgrounds such as text and active borders. This ensures that components are always visible, regardless of the background color.
+
+## Transparent colors
+
+### Transparent white
+
+|                   |           |  Spectrum 2 |  Spectrum 1 |
+| ----------------- | :-------: | ----------: | ----------: |
+| **Color**         | **Value** | **Opacity** | **Opacity** |
+| transparent-white |    25     |           0 |             |
+| transparent-white |    50     |        0.04 |             |
+| transparent-white |    75     |        0.07 |             |
+| transparent-white |    100    |        0.11 |           0 |
+| transparent-white |    200    |        0.14 |         0.1 |
+| transparent-white |    300    |        0.17 |        0.25 |
+| transparent-white |    400    |        0.21 |         0.4 |
+| transparent-white |    500    |        0.39 |        0.55 |
+| transparent-white |    600    |        0.51 |         0.7 |
+| transparent-white |    700    |        0.66 |         0.8 |
+| transparent-white |    800    |        0.85 |         0.9 |
+| transparent-white |    900    |        0.94 |           1 |
+| transparent-white |   1000    |           1 |             |
+
+### Transparent black
+
+|                   |           |  Spectrum 2 |  Spectrum 1 |
+| ----------------- | :-------: | ----------: | ----------: |
+| **Color**         | **Value** | **Opacity** | **Opacity** |
+| transparent-black |    25     |           0 |             |
+| transparent-black |    50     |        0.03 |             |
+| transparent-black |    75     |        0.05 |             |
+| transparent-black |    100    |        0.09 |           0 |
+| transparent-black |    200    |        0.12 |         0.1 |
+| transparent-black |    300    |        0.15 |        0.25 |
+| transparent-black |    400    |        0.22 |         0.4 |
+| transparent-black |    500    |        0.44 |        0.55 |
+| transparent-black |    600    |        0.56 |         0.7 |
+| transparent-black |    700    |        0.69 |         0.8 |
+| transparent-black |    800    |        0.84 |         0.9 |
+| transparent-black |    900    |        0.93 |           1 |
+| transparent-black |   1000    |           1 |             |
diff --git a/.storybook/package.json b/.storybook/package.json
index b8f20bba56..14be5f581f 100644
--- a/.storybook/package.json
+++ b/.storybook/package.json
@@ -29,9 +29,10 @@
 	},
 	"dependencies": {
 		"@adobe/spectrum-css-workflow-icons": "^1.5.4",
-		"@adobe/spectrum-tokens": "12.25.0",
+		"@adobe/spectrum-tokens": "0.0.0-s2-foundations-20241021172855",
 		"@spectrum-css/table": "workspace:^",
 		"@spectrum-css/tokens": "workspace:^",
+		"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.6.0",
 		"@spectrum-css/ui-icons": "workspace:^"
 	},
 	"devDependencies": {
diff --git a/.storybook/types/global.js b/.storybook/types/global.js
index aceccb44c4..60a369079e 100644
--- a/.storybook/types/global.js
+++ b/.storybook/types/global.js
@@ -7,13 +7,14 @@ export default {
 	context: {
 		title: "Design context",
 		description: "The variation of Spectrum to use in the component",
-		defaultValue: "legacy",
+		defaultValue: "spectrum",
 		type: "string",
 		showName: true,
 		toolbar: {
 			items: [
-				{ value: "legacy", title: "Spectrum 1", right: "default" },
-				{ value: "express", title: "Express" },
+				{ value: "spectrum", title: "Spectrum 2", right: "default" },
+				{ value: "legacy", title: "Spectrum 1", right: "legacy" },
+				{ value: "express", title: "Express", right: "legacy" },
 				{ value: "raw", title: "Token-free", right: "raw" },
 			],
 			dynamicTitle: true,
diff --git a/commitlint.config.js b/commitlint.config.js
index 26a88cbb58..2a548b0b37 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,3 +1,6 @@
 module.exports = {
 	extends: ["@commitlint/config-conventional"],
+	rules: {
+		"header-max-length": [0],
+	}
 };
diff --git a/components/README.md b/components/README.md
deleted file mode 100644
index f383a7f67e..0000000000
--- a/components/README.md
+++ /dev/null
@@ -1,74 +0,0 @@
-# Spectrum CSS Components
-
-The project is broken down into separate components for each component inside of the `components/` folder.
-
-Components are released on npm as `@spectrum-css/$COMPONENT`, where `$COMPONENT` corresponds to the folder name in this repository.
-
-## Component structure
-
-Each component has the following files:
-
-- `index.css` - The scale-specific styles for the component: dimensions, layout, etc (these change between scales)
-- `themes/*.css` - The theme-specific styles for the component.
-- `stories/*.mdx` - The examples and documentation for the component.
-- `stories/*.stories.js` and `stories/template.js` - The storybook assets for rendering components in the Storybook tool and eventually to be used for visual regression testing.
-
-## Editing an existing component
-
-1. Run `yarn start` in the root of the project to begin developing.
-2. Edit `components/$COMPONENT/index.css` with dimensions and color properties. The documentation will live reload with your changes.
-3. Edit the markup examples within `components/$COMPONENT/stories/*.stories.js`. The documentation will live reload with your changes.
-
-## Adding a new component
-
-1. Generate a new component using the `yarn new component` command. The generator will prompt you to answer questions about your component.
-2. Edit the `dependencies` within the `package.json` file to use only the dependencies your component needs. All components rely on `@spectrum-css/tokens` and `@spectrum-css/component-builder-simple`, and most rely on `@spectrum-css/icon`. **Note: If you are working on a legacy component, it will dependend on `@spectrum-css/vars` and `@spectrum-css/component-builder` instead. This is expected.**
-3. Once your folder has been generated, you can run `yarn start` in the root of the project to begin developing.
-4. The `index.css` file is where most of your styles will be added.
-5. Inside the `stories` directory you will find a `template.js` and an `*.stories.js` file.
-   - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction).
-   - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs.
-6. Edit your `stories/*.mdx` to add markup examples for each of the variants of your component.
-
-Because we use scoped packages, before it can be published with Lerna, you must manually publish the new component as public:
-
-```shell
-cd components/newcomponent
-npm publish --access=public
-```
-
-## Component dependencies
-
-1. If your component requires another component in order to render, it should be declared in both `devDependencies` and `peerDependencies`.
-   1. The version range included in `peerDependencies` must satisfy the version included in `devDependencies`.
-   2. If a component appears in `peerDependencies`, it must also appear in `devDependencies`.
-   3. This goes for every class used to render the component; even if the class comes from a component that's a dependency of another component you already have a dependency on.
-   4. For instance, if your component requires a button with an icon inside of it, you must explicitly include both `icon` and `button` in both `devDependencies` and `peerDependencies`.
-2. If your component has an example that uses another component, but the component isn't required to render your component, it should be declared in `devDependencies` only.
-   1. For instance, if your component is commonly used with a table and includes an example where it is used with a table, but doesn't require table to render itself, you should declare `table` in `devDependencies` only.
-
-For example, `actionbar` gets its tokens from `vars`, and requires `button`, `checkbox`, `icon`, and `popover` to render, but also has an example where the component is used with a `table`. Its dependencies should be declared as follows:
-
-```json
-{
-  "name": "@spectrum-css/actionbar",
-  "peerDependencies": {
-    "@spectrum-css/button": ">=12,
-    "@spectrum-css/checkbox": ">=8",
-    "@spectrum-css/icon": ">=6",
-    "@spectrum-css/popover": ">=6",
-    "@spectrum-css/tokens": ">=13"
-  }
-}
-```
-
-The release will error out if:
-
-1. A package is specified in `peerDependencies` that does not appear in `devDependencies`
-2. The version of a package is specified in `devDependencies` satisfy the range defined for that package in `peerDependencies`
-
-## Releasing components
-
-Any change to a component or a component's dependencies will require a release of that component and all components that depend upon it. Component releases cannot be done ala carte and must be done from the top-level.
-
-See [Releasing](/README.md#Releasing) for more information.
diff --git a/components/accordion/metadata/metadata.json b/components/accordion/dist/metadata.json
similarity index 98%
rename from components/accordion/metadata/metadata.json
rename to components/accordion/dist/metadata.json
index c08d3b4107..3f3e89fbf1 100644
--- a/components/accordion/metadata/metadata.json
+++ b/components/accordion/dist/metadata.json
@@ -188,7 +188,7 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-500",
     "--spectrum-font-size-700",
-    "--spectrum-gray-300",
+    "--spectrum-gray-200",
     "--spectrum-gray-900-rgb",
     "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
@@ -198,7 +198,11 @@
     "--spectrum-neutral-content-color-key-focus",
     "--spectrum-sans-font-family-stack"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-accordion-divider-color",
+    "--system-accordion-item-content-color",
+    "--system-accordion-item-content-disabled-color"
+  ],
   "passthroughs": [],
   "high-contrast": []
 }
diff --git a/components/accordion/index.css b/components/accordion/index.css
index d09fb4e243..2e0a761645 100644
--- a/components/accordion/index.css
+++ b/components/accordion/index.css
@@ -11,6 +11,8 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 .spectrum-Accordion {
 	--spectrum-accordion-item-height: var(--spectrum-component-height-200);
 	--spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);
@@ -54,16 +56,10 @@
 	--spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
 
 	--spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color);
-	--spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color);
-
-	/* Body */
-	--spectrum-accordion-item-content-color: var(--spectrum-body-color);
 
 	/* Focus indicator */
 	--spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color);
 
-	/* Divider */
-	--spectrum-accordion-divider-color: var(--spectrum-gray-300);
 	--spectrum-accordion-min-block-size: max(
 		var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)),
 		calc(var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))))
diff --git a/components/accordion/metadata/mods.md b/components/accordion/metadata/mods.md
deleted file mode 100644
index 412286413e..0000000000
--- a/components/accordion/metadata/mods.md
+++ /dev/null
@@ -1,41 +0,0 @@
-| Modifiable custom properties                          |
-| ----------------------------------------------------- |
-| `--mod-accordion-background-color-default`            |
-| `--mod-accordion-background-color-down`               |
-| `--mod-accordion-background-color-hover`              |
-| `--mod-accordion-background-color-key-focus`          |
-| `--mod-accordion-component-edge-to-text`              |
-| `--mod-accordion-corner-radius`                       |
-| `--mod-accordion-disclosure-indicator-height`         |
-| `--mod-accordion-disclosure-indicator-to-text-space`  |
-| `--mod-accordion-divider-color`                       |
-| `--mod-accordion-divider-thickness`                   |
-| `--mod-accordion-edge-to-disclosure-indicator-space`  |
-| `--mod-accordion-edge-to-text-space`                  |
-| `--mod-accordion-focus-indicator-color`               |
-| `--mod-accordion-focus-indicator-gap`                 |
-| `--mod-accordion-focus-indicator-thickness`           |
-| `--mod-accordion-item-content-area-bottom-to-content` |
-| `--mod-accordion-item-content-area-top-to-content`    |
-| `--mod-accordion-item-content-color`                  |
-| `--mod-accordion-item-content-disabled-color`         |
-| `--mod-accordion-item-content-font`                   |
-| `--mod-accordion-item-content-font-size`              |
-| `--mod-accordion-item-content-font-style`             |
-| `--mod-accordion-item-content-font-weight`            |
-| `--mod-accordion-item-content-line-height`            |
-| `--mod-accordion-item-header-bottom-to-text-space`    |
-| `--mod-accordion-item-header-color-default`           |
-| `--mod-accordion-item-header-color-down`              |
-| `--mod-accordion-item-header-color-hover`             |
-| `--mod-accordion-item-header-color-key-focus`         |
-| `--mod-accordion-item-header-disabled-color`          |
-| `--mod-accordion-item-header-font`                    |
-| `--mod-accordion-item-header-font-size`               |
-| `--mod-accordion-item-header-font-style`              |
-| `--mod-accordion-item-header-font-weight`             |
-| `--mod-accordion-item-header-line-height`             |
-| `--mod-accordion-item-header-top-to-text-space`       |
-| `--mod-accordion-item-height`                         |
-| `--mod-accordion-item-width`                          |
-| `--mod-accordion-min-block-size`                      |
diff --git a/components/accordion/package.json b/components/accordion/package.json
index b0b2f27cc0..6a2d28437d 100644
--- a/components/accordion/package.json
+++ b/components/accordion/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/accordion/stories/accordion.mdx b/components/accordion/stories/accordion.mdx
deleted file mode 100644
index f3307ff25b..0000000000
--- a/components/accordion/stories/accordion.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
-  Canvas,
-  ArgTypes,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-import * as AccordionStories from "./accordion.stories";
-
-<Meta of={AccordionStories} title="Docs" />
-
-<Title of={AccordionStories} />
-<Subtitle of={AccordionStories} />
-<ComponentDetails />
-
-<Description of={AccordionStories} />
-
-## Density options
-
-Accordion has three density options and requires that you specify one of the density types: compact, regular, or spacious.
-
-### Regular
-
-<Canvas of={AccordionStories.Default} />
-
-### Compact
-
-<Canvas of={AccordionStories.Compact} />
-
-### Spacious
-
-<Canvas of={AccordionStories.Spacious} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js
index 7b7fb45bcf..3709e75871 100644
--- a/components/accordion/stories/accordion.stories.js
+++ b/components/accordion/stories/accordion.stories.js
@@ -1,14 +1,19 @@
 import { Template as Link } from "@spectrum-css/link/stories/template.js";
+import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { AccordionGroup } from "./accordion.test.js";
 import { Template } from "./template.js";
 
 /**
  * The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.
+ *
+ * ## Density options
+ *
+ * Accordion has three density options and requires that you specify one of the density types: compact, regular, or spacious.
  */
 export default {
 	title: "Accordion",
@@ -57,10 +62,13 @@ export default {
 			handles: ["click .spectrum-Accordion-item"],
 		},
 		chromatic: { disableSnapshot: true },
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=39469-5419",
+		},
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 /* Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. */
@@ -178,6 +186,10 @@ Compact.args = {
 	items: content,
 	density: "compact",
 };
+Compact.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Compact.storyName = "Density - Compact";
 
 export const Spacious = Template.bind({});
 Spacious.tags = ["!dev"];
@@ -185,3 +197,19 @@ Spacious.args = {
 	items: content,
 	density: "spacious",
 };
+Spacious.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Spacious.storyName = "Density - Spacious";
+
+export const Sizing = (args, context) => Sizes({
+	Template,
+	withBorder: false,
+	withHeading: false,
+	items: content,
+	...args,
+}, context);
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js
index 79fc3648bf..8294f3a402 100644
--- a/components/accordion/stories/template.js
+++ b/components/accordion/stories/template.js
@@ -7,6 +7,9 @@ import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const AccordionItem = ({
 	heading,
diff --git a/tools/generator/templates/themes/express.css.hbs b/components/accordion/themes/express.css
similarity index 95%
rename from tools/generator/templates/themes/express.css.hbs
rename to components/accordion/themes/express.css
index 9e2e6809da..9fd550418f 100644
--- a/tools/generator/templates/themes/express.css.hbs
+++ b/components/accordion/themes/express.css
@@ -14,5 +14,3 @@
 /* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
-
-@container (--system: express) {}
diff --git a/tokens/dist/css/express/dark-vars.css b/components/accordion/themes/spectrum-two.css
similarity index 55%
rename from tokens/dist/css/express/dark-vars.css
rename to components/accordion/themes/spectrum-two.css
index 48933324bf..7097b1adc6 100644
--- a/tokens/dist/css/express/dark-vars.css
+++ b/components/accordion/themes/spectrum-two.css
@@ -11,11 +11,10 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum--express.spectrum--dark {
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
+@container style(--system: spectrum) {
+	.spectrum-Accordion {
+		--spectrum-accordion-divider-color: var(--spectrum-gray-200);
+		--spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color);
+		--spectrum-accordion-item-content-color: var(--spectrum-body-color);
+	}
 }
diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css
new file mode 100644
index 0000000000..572d3f1db1
--- /dev/null
+++ b/components/accordion/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Accordion {
+		--spectrum-accordion-divider-color: var(--spectrum-gray-300);
+		--spectrum-accordion-item-content-disabled-color: var(--spectrum-gray-400);
+		--spectrum-accordion-item-content-color: var(--spectrum-gray-800);
+	}
+}
diff --git a/components/actionbar/metadata/metadata.json b/components/actionbar/dist/metadata.json
similarity index 96%
rename from components/actionbar/metadata/metadata.json
rename to components/actionbar/dist/metadata.json
index 2da9488577..3632db90bf 100644
--- a/components/actionbar/metadata/metadata.json
+++ b/components/actionbar/dist/metadata.json
@@ -77,8 +77,8 @@
     "--spectrum-drop-shadow-x",
     "--spectrum-drop-shadow-y",
     "--spectrum-font-size-100",
+    "--spectrum-gray-25",
     "--spectrum-gray-400",
-    "--spectrum-gray-50",
     "--spectrum-informative-background-color-default",
     "--spectrum-line-height-100",
     "--spectrum-neutral-content-color-default",
@@ -88,7 +88,10 @@
     "--spectrum-spacing-75",
     "--spectrum-white"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-action-bar-popover-background-color",
+    "--system-action-bar-popover-border-color"
+  ],
   "passthroughs": [],
   "high-contrast": ["--highcontrast-actionbar-popover-border-color"]
 }
diff --git a/components/actionbar/index.css b/components/actionbar/index.css
index 7cb714aaec..474499e462 100644
--- a/components/actionbar/index.css
+++ b/components/actionbar/index.css
@@ -11,6 +11,8 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 .spectrum-ActionBar {
 	--spectrum-actionbar-height: var(--spectrum-action-bar-height);
 	--spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100);
@@ -20,10 +22,6 @@
 	--spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);
 	--spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);
 
-	/* colors - applied to popover */
-	--spectrum-actionbar-popover-background-color: var(--spectrum-gray-50);
-	--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
-
 	/* emphasized variation colors */
 	--spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
 	--spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
diff --git a/components/actionbar/metadata/mods.md b/components/actionbar/metadata/mods.md
deleted file mode 100644
index c66fd46ead..0000000000
--- a/components/actionbar/metadata/mods.md
+++ /dev/null
@@ -1,24 +0,0 @@
-| Modifiable custom properties                    |
-| ----------------------------------------------- |
-| `--mod-actionbar-corner-radius`                 |
-| `--mod-actionbar-emphasized-background-color`   |
-| `--mod-actionbar-emphasized-item-counter-color` |
-| `--mod-actionbar-height`                        |
-| `--mod-actionbar-item-counter-color`            |
-| `--mod-actionbar-item-counter-font-size`        |
-| `--mod-actionbar-item-counter-line-height`      |
-| `--mod-actionbar-item-counter-line-height-cjk`  |
-| `--mod-actionbar-popover-background-color`      |
-| `--mod-actionbar-popover-border-color`          |
-| `--mod-actionbar-shadow-blur`                   |
-| `--mod-actionbar-shadow-color`                  |
-| `--mod-actionbar-shadow-horizontal`             |
-| `--mod-actionbar-shadow-vertical`               |
-| `--mod-actionbar-spacing-action-group-end`      |
-| `--mod-actionbar-spacing-action-group-top`      |
-| `--mod-actionbar-spacing-close-button-end`      |
-| `--mod-actionbar-spacing-close-button-start`    |
-| `--mod-actionbar-spacing-close-button-top`      |
-| `--mod-actionbar-spacing-item-counter-end`      |
-| `--mod-actionbar-spacing-item-counter-top`      |
-| `--mod-actionbar-spacing-outer-edge`            |
diff --git a/components/actionbar/package.json b/components/actionbar/package.json
index e6c8f9131e..bd8d6b3e83 100644
--- a/components/actionbar/package.json
+++ b/components/actionbar/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/actionbar/stories/actionbar.mdx b/components/actionbar/stories/actionbar.mdx
deleted file mode 100644
index 0f0fc64686..0000000000
--- a/components/actionbar/stories/actionbar.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
-import {
-  Canvas,
-  ArgTypes,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-import * as ActionBarStories from "./actionbar.stories";
-
-<Meta of={ActionBarStories} title="Docs" />
-
-<Title of={ActionBarStories} />
-<Subtitle of={ActionBarStories} />
-<ComponentDetails />
-
-<Description of={ActionBarStories} />
-
-## Standard
-
-<Canvas of={ActionBarStories.Default} />
-
-## Emphasized
-
-<Canvas of={ActionBarStories.Emphasized} />
-
-## Behavioral variants
-
-- Standard - Action bars fill the width of their container.
-- Flexible - Action bars fit the width of their content.
-- Sticky - Action bars will sit on top of content until dismissed.
-
-## Popover Dependency
-
-Action bar requires Popover, which is nested within Action bar. Action bar background, border, and corner radius are applied to the nested Popover component and can be overriden by Action bar using `--mod-*` prefixed custom properties. A [list of the properties](https://github.com/adobe/spectrum-css/blob/main/components/actionbar/metadata/mods.md) can be found in the repo.
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js
index ab3aad09e2..aa2e867ea0 100644
--- a/components/actionbar/stories/actionbar.stories.js
+++ b/components/actionbar/stories/actionbar.stories.js
@@ -3,13 +3,16 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb
 import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isEmphasized, isOpen } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ActionBarGroup } from "./actionbar.test.js";
-import { Template } from "./template.js";
+import { BehavioralTemplate } from "./template.js";
 
 /**
- * The action bar component is a floating full width bar that appears upon selection.
+ * The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.
+ *
+ * ## Popover dependency
+ * Action bar requires popover, which is nested within the action bar. Action bar background, border, and corner radius are applied to the nested popover component and can be overridden by using action bar's `--mod-*` prefixed custom properties. A [list of the properties](#modifiable-properties) can be found below.
  */
 export default {
 	title: "Action bar",
@@ -65,16 +68,16 @@ export default {
 		// Getting the Figma link: https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
 		design: {
 			type: "figma",
-			url: "https://www.figma.com/file/MPtRIVRzPp2VHiEplwXL2X/S-%2F-Manual?node-id=465%3A3127&t=xbooxCWItOFgG2xM-1",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=28379-300",
 		},
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = ActionBarGroup.bind({});
 Default.args = {};
+Default.tags = ["!autodocs"];
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ActionBarGroup.bind({});
@@ -88,7 +91,10 @@ WithForcedColors.parameters = {
 };
 
 // ********* DOCS ONLY ********* //
-export const Emphasized = Template.bind({});
+/**
+ * The emphasized action bar has a blue background that adds visual emphasis on the actions and selection. Use this for when the bar should call attention (e.g., floating in a table).
+ */
+export const Emphasized = BehavioralTemplate.bind({});
 Emphasized.tags = ["!dev"];
 Emphasized.args = {
 	isEmphasized: true,
@@ -96,3 +102,18 @@ Emphasized.args = {
 Emphasized.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+
+/**
+ * By default, action bars fill the width of their container. Below are example of the other behavioral variants available.
+ *
+ * - Standard action bars fill the width of their container.
+ * - Flexible action bars fit the width of their content.
+ * - Sticky action bars will sit on top of content until dismissed. Scroll down on this example to view how the sticky action bar behaves within a scrollable element.
+ *
+*/
+export const Standard = BehavioralTemplate.bind({});
+Standard.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Standard.tags = ["!dev"];
+Standard.storyName = "Default";
diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
index 28e7a418b6..8b134157bd 100644
--- a/components/actionbar/stories/template.js
+++ b/components/actionbar/stories/template.js
@@ -1,3 +1,4 @@
+import { Container } from "@spectrum-css/preview/decorators";
 import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js";
 import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
@@ -7,6 +8,9 @@ import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-ActionBar",
@@ -24,8 +28,7 @@ export const Template = ({
 		<div
 			class=${classMap({
 				[rootClass]: true,
-				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof size !== "undefined",
+				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
 				[`${rootClass}--emphasized`]: isEmphasized,
 				[`${rootClass}--sticky`]: isSticky,
 				[`${rootClass}--fixed`]: isFixed,
@@ -74,3 +77,33 @@ export const Template = ({
 		</div>
 	`;
 };
+
+/* This template shows standard, flexible, and sticky action bars in one story. */
+/* The fixed behavior works best in an iframe, so is not represented in this template. */
+export const BehavioralTemplate = (args, context) => Container({
+	withBorder: false,
+	withHeading: false,
+	direction: "column",
+	content: html`
+		${Container({
+			withBorder: false,
+			heading: "Standard",
+			content: Template({...args, customPopoverStyles: {"transform": "unset"}}, context)
+		})}
+		${Container({
+			withBorder: false,
+			heading: "Flexible",
+			content: Template({...args, isFlexible: true,}, context)
+		})}
+		${Container({
+			withBorder: false,
+			heading: "Sticky",
+			containerStyles: {
+				"max-block-size": "100px",
+				"max-inline-size": " 550px",
+				"overflow": "auto",
+			},
+			content: ["Scroll down to view sticky behavior. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", Template({...args, isSticky: true,}, context)]
+		})}
+	`
+});
diff --git a/tools/generator/templates/themes/spectrum.css.hbs b/components/actionbar/themes/express.css
similarity index 89%
rename from tools/generator/templates/themes/spectrum.css.hbs
rename to components/actionbar/themes/express.css
index b0d4a7b1ab..9fd550418f 100644
--- a/tools/generator/templates/themes/spectrum.css.hbs
+++ b/components/actionbar/themes/express.css
@@ -11,4 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {}
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/actionbar/themes/spectrum-two.css b/components/actionbar/themes/spectrum-two.css
new file mode 100644
index 0000000000..157c2dc929
--- /dev/null
+++ b/components/actionbar/themes/spectrum-two.css
@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-ActionBar {
+		/* colors - applied to popover */
+		--spectrum-actionbar-popover-background-color: var(--spectrum-gray-25);
+		--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
+	}
+}
diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css
new file mode 100644
index 0000000000..27971810d3
--- /dev/null
+++ b/components/actionbar/themes/spectrum.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-ActionBar {
+		--spectrum-actionbar-popover-background-color: var(--spectrum-gray-50);
+		--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
+	}
+}
diff --git a/components/actionbutton/metadata/metadata.json b/components/actionbutton/dist/metadata.json
similarity index 67%
rename from components/actionbutton/metadata/metadata.json
rename to components/actionbutton/dist/metadata.json
index 4846cdfcaf..e17f6a5c58 100644
--- a/components/actionbutton/metadata/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -18,13 +18,11 @@
     ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
     ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
     ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
+    ".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton::-moz-focus-inner",
     ".spectrum-ActionButton:active",
@@ -98,12 +96,18 @@
     "--spectrum-action-button-edge-to-hold-icon-large",
     "--spectrum-action-button-edge-to-hold-icon-medium",
     "--spectrum-action-button-edge-to-hold-icon-small",
-    "--spectrum-actionbutton-animation-duration",
+    "--spectrum-actionbutton-background-color",
     "--spectrum-actionbutton-background-color-default",
     "--spectrum-actionbutton-background-color-disabled",
     "--spectrum-actionbutton-background-color-down",
     "--spectrum-actionbutton-background-color-focus",
     "--spectrum-actionbutton-background-color-hover",
+    "--spectrum-actionbutton-background-color-selected",
+    "--spectrum-actionbutton-background-color-selected-disabled",
+    "--spectrum-actionbutton-background-color-selected-down",
+    "--spectrum-actionbutton-background-color-selected-focus",
+    "--spectrum-actionbutton-background-color-selected-hover",
+    "--spectrum-actionbutton-border-color",
     "--spectrum-actionbutton-border-color-default",
     "--spectrum-actionbutton-border-color-disabled",
     "--spectrum-actionbutton-border-color-down",
@@ -111,23 +115,26 @@
     "--spectrum-actionbutton-border-color-hover",
     "--spectrum-actionbutton-border-radius",
     "--spectrum-actionbutton-border-width",
-    "--spectrum-actionbutton-content-color-default",
-    "--spectrum-actionbutton-content-color-disabled",
-    "--spectrum-actionbutton-content-color-down",
-    "--spectrum-actionbutton-content-color-focus",
-    "--spectrum-actionbutton-content-color-hover",
+    "--spectrum-actionbutton-content-color",
+    "--spectrum-actionbutton-content-color-selected",
     "--spectrum-actionbutton-edge-to-hold-icon",
     "--spectrum-actionbutton-edge-to-text",
     "--spectrum-actionbutton-edge-to-visual",
     "--spectrum-actionbutton-edge-to-visual-only",
-    "--spectrum-actionbutton-focus-indicator-border-radius",
     "--spectrum-actionbutton-focus-indicator-color",
     "--spectrum-actionbutton-focus-indicator-gap",
     "--spectrum-actionbutton-focus-indicator-thickness",
     "--spectrum-actionbutton-font-size",
     "--spectrum-actionbutton-height",
     "--spectrum-actionbutton-icon-size",
-    "--spectrum-actionbutton-min-width",
+    "--spectrum-actionbutton-sized-edge-to-hold-icon",
+    "--spectrum-actionbutton-sized-edge-to-text",
+    "--spectrum-actionbutton-sized-edge-to-visual",
+    "--spectrum-actionbutton-sized-edge-to-visual-only",
+    "--spectrum-actionbutton-sized-font-size",
+    "--spectrum-actionbutton-sized-height",
+    "--spectrum-actionbutton-sized-icon-size",
+    "--spectrum-actionbutton-sized-text-to-visual",
     "--spectrum-actionbutton-text-to-visual"
   ],
   "global": [
@@ -159,13 +166,10 @@
     "--spectrum-component-height-50",
     "--spectrum-component-height-75",
     "--spectrum-corner-radius-100",
-    "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
-    "--spectrum-disabled-static-black-background-color",
     "--spectrum-disabled-static-black-border-color",
     "--spectrum-disabled-static-black-content-color",
-    "--spectrum-disabled-static-white-background-color",
     "--spectrum-disabled-static-white-border-color",
     "--spectrum-disabled-static-white-content-color",
     "--spectrum-focus-indicator-color",
@@ -176,13 +180,12 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-50",
     "--spectrum-font-size-75",
+    "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-300",
     "--spectrum-gray-400",
     "--spectrum-gray-50",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
-    "--spectrum-gray-75",
     "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
     "--spectrum-neutral-background-color-selected-default",
@@ -201,18 +204,19 @@
     "--spectrum-text-to-visual-300",
     "--spectrum-text-to-visual-50",
     "--spectrum-text-to-visual-75",
+    "--spectrum-transparent-black-100",
     "--spectrum-transparent-black-200",
-    "--spectrum-transparent-black-300",
     "--spectrum-transparent-black-400",
     "--spectrum-transparent-black-500",
     "--spectrum-transparent-black-600",
+    "--spectrum-transparent-black-700",
     "--spectrum-transparent-black-800",
     "--spectrum-transparent-black-900",
     "--spectrum-transparent-white-200",
-    "--spectrum-transparent-white-300",
     "--spectrum-transparent-white-400",
     "--spectrum-transparent-white-500",
     "--spectrum-transparent-white-600",
+    "--spectrum-transparent-white-700",
     "--spectrum-transparent-white-800",
     "--spectrum-transparent-white-900",
     "--spectrum-white",
@@ -224,94 +228,52 @@
   ],
   "system-theme": [
     "--system-action-button-background-color-default",
-    "--system-action-button-background-color-disabled",
     "--system-action-button-background-color-down",
     "--system-action-button-background-color-focus",
     "--system-action-button-background-color-hover",
+    "--system-action-button-background-color-selected",
+    "--system-action-button-background-color-selected-disabled",
+    "--system-action-button-background-color-selected-down",
+    "--system-action-button-background-color-selected-focus",
+    "--system-action-button-background-color-selected-hover",
     "--system-action-button-border-color-default",
     "--system-action-button-border-color-disabled",
     "--system-action-button-border-color-down",
     "--system-action-button-border-color-focus",
     "--system-action-button-border-color-hover",
-    "--system-action-button-content-color-disabled",
+    "--system-action-button-content-color-selected",
     "--system-action-button-quiet-background-color-default",
-    "--system-action-button-quiet-background-color-disabled",
     "--system-action-button-quiet-background-color-down",
     "--system-action-button-quiet-background-color-focus",
     "--system-action-button-quiet-background-color-hover",
-    "--system-action-button-quiet-border-color-default",
-    "--system-action-button-quiet-border-color-disabled",
-    "--system-action-button-quiet-border-color-down",
-    "--system-action-button-quiet-border-color-focus",
-    "--system-action-button-quiet-border-color-hover",
-    "--system-action-button-selected-background-color-disabled",
-    "--system-action-button-selected-border-color-default",
-    "--system-action-button-selected-border-color-disabled",
-    "--system-action-button-selected-border-color-down",
-    "--system-action-button-selected-border-color-focus",
-    "--system-action-button-selected-border-color-hover",
     "--system-action-button-static-black-background-color-default",
     "--system-action-button-static-black-background-color-disabled",
     "--system-action-button-static-black-background-color-down",
     "--system-action-button-static-black-background-color-focus",
     "--system-action-button-static-black-background-color-hover",
+    "--system-action-button-static-black-background-color-selected-disabled",
     "--system-action-button-static-black-border-color-default",
-    "--system-action-button-static-black-border-color-disabled",
     "--system-action-button-static-black-border-color-down",
     "--system-action-button-static-black-border-color-focus",
     "--system-action-button-static-black-border-color-hover",
-    "--system-action-button-static-black-content-color-default",
-    "--system-action-button-static-black-content-color-disabled",
-    "--system-action-button-static-black-content-color-down",
-    "--system-action-button-static-black-content-color-focus",
-    "--system-action-button-static-black-content-color-hover",
-    "--system-action-button-static-black-focus-indicator-color",
-    "--system-action-button-static-black-quiet-border-color-default",
-    "--system-action-button-static-black-quiet-border-color-disabled",
-    "--system-action-button-static-black-quiet-border-color-down",
-    "--system-action-button-static-black-quiet-border-color-focus",
-    "--system-action-button-static-black-quiet-border-color-hover",
-    "--system-action-button-static-black-selected-background-color-default",
-    "--system-action-button-static-black-selected-background-color-disabled",
-    "--system-action-button-static-black-selected-background-color-down",
-    "--system-action-button-static-black-selected-background-color-focus",
-    "--system-action-button-static-black-selected-background-color-hover",
-    "--system-action-button-static-black-selected-border-color-disabled",
-    "--system-action-button-static-black-selected-content-color-default",
-    "--system-action-button-static-black-selected-content-color-down",
-    "--system-action-button-static-black-selected-content-color-focus",
-    "--system-action-button-static-black-selected-content-color-hover",
+    "--system-action-button-static-black-quiet-background-color-default",
+    "--system-action-button-static-black-quiet-background-color-down",
+    "--system-action-button-static-black-quiet-background-color-focus",
+    "--system-action-button-static-black-quiet-background-color-hover",
     "--system-action-button-static-white-background-color-default",
     "--system-action-button-static-white-background-color-disabled",
     "--system-action-button-static-white-background-color-down",
     "--system-action-button-static-white-background-color-focus",
     "--system-action-button-static-white-background-color-hover",
+    "--system-action-button-static-white-background-color-selected-disabled",
     "--system-action-button-static-white-border-color-default",
-    "--system-action-button-static-white-border-color-disabled",
     "--system-action-button-static-white-border-color-down",
     "--system-action-button-static-white-border-color-focus",
     "--system-action-button-static-white-border-color-hover",
-    "--system-action-button-static-white-content-color-default",
-    "--system-action-button-static-white-content-color-disabled",
-    "--system-action-button-static-white-content-color-down",
-    "--system-action-button-static-white-content-color-focus",
-    "--system-action-button-static-white-content-color-hover",
-    "--system-action-button-static-white-focus-indicator-color",
-    "--system-action-button-static-white-quiet-border-color-default",
-    "--system-action-button-static-white-quiet-border-color-disabled",
-    "--system-action-button-static-white-quiet-border-color-down",
-    "--system-action-button-static-white-quiet-border-color-focus",
-    "--system-action-button-static-white-quiet-border-color-hover",
-    "--system-action-button-static-white-selected-background-color-default",
-    "--system-action-button-static-white-selected-background-color-disabled",
-    "--system-action-button-static-white-selected-background-color-down",
-    "--system-action-button-static-white-selected-background-color-focus",
-    "--system-action-button-static-white-selected-background-color-hover",
-    "--system-action-button-static-white-selected-border-color-disabled",
-    "--system-action-button-static-white-selected-content-color-default",
-    "--system-action-button-static-white-selected-content-color-down",
-    "--system-action-button-static-white-selected-content-color-focus",
-    "--system-action-button-static-white-selected-content-color-hover"
+    "--system-action-button-static-white-quiet-background-color-default",
+    "--system-action-button-static-white-quiet-background-color-down",
+    "--system-action-button-static-white-quiet-background-color-focus",
+    "--system-action-button-static-white-quiet-background-color-hover"
   ],
   "passthroughs": [
     "--mod-button-animation-duration",
@@ -319,21 +281,9 @@
     "--mod-button-line-height"
   ],
   "high-contrast": [
-    "--highcontrast-actionbutton-background-color-default",
-    "--highcontrast-actionbutton-background-color-disabled",
-    "--highcontrast-actionbutton-background-color-down",
-    "--highcontrast-actionbutton-background-color-focus",
-    "--highcontrast-actionbutton-background-color-hover",
-    "--highcontrast-actionbutton-border-color-default",
-    "--highcontrast-actionbutton-border-color-disabled",
-    "--highcontrast-actionbutton-border-color-down",
-    "--highcontrast-actionbutton-border-color-focus",
-    "--highcontrast-actionbutton-border-color-hover",
-    "--highcontrast-actionbutton-content-color-default",
-    "--highcontrast-actionbutton-content-color-disabled",
-    "--highcontrast-actionbutton-content-color-down",
-    "--highcontrast-actionbutton-content-color-focus",
-    "--highcontrast-actionbutton-content-color-hover",
+    "--highcontrast-actionbutton-background-color",
+    "--highcontrast-actionbutton-border-color",
+    "--highcontrast-actionbutton-content-color",
     "--highcontrast-actionbutton-focus-indicator-color"
   ]
 }
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 3344fc24ad..962babfbf0 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -12,146 +12,30 @@
  */
 
 @import "@spectrum-css/commons/basebutton.css";
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
-
-.spectrum-ActionButton {
-	--spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
-	--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100);
-	--spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
-
-	--spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default);
-	--spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
-	--spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
-	--spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
-	--spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-	--spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-	--spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
-	--spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
-
-	&:dir(rtl) {
-		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-	}
-
-	&.is-selected {
-		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
-		--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
-		--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
-		--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
-
-		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50));
-		--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50));
-		--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50));
-		--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50));
-
-		&.spectrum-ActionButton--emphasized {
-			--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));
-			--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
-			--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
-			--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus));
-
-			--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white));
-			--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white));
-			--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white));
-			--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white));
-		}
-	}
-}
-
-.spectrum-ActionButton--sizeXS {
-	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50));
-	--spectrum-actionbutton-height: var(--spectrum-component-height-50);
-
-	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50);
-	--spectrum-actionbutton-font-size: var(--spectrum-font-size-50);
-	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small);
-	--spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeS {
-	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75));
-	--spectrum-actionbutton-height: var(--spectrum-component-height-75);
-
-	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
-	--spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
-	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
-	--spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeM {
-	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100));
-	--spectrum-actionbutton-height: var(--spectrum-component-height-100);
-
-	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
-	--spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
-	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
-	--spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeL {
-	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200));
-	--spectrum-actionbutton-height: var(--spectrum-component-height-200);
-
-	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
-	--spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
-	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
-	--spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeXL {
-	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300));
-	--spectrum-actionbutton-height: var(--spectrum-component-height-300);
-
-	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
-	--spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
-	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
-	--spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width));
-	--spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));
-}
+@import "./themes/spectrum-two.css";
 
 @media (forced-colors: active) {
 	.spectrum-ActionButton {
+		/* force a more visible focus indicator color */
+		--highcontrast-actionbutton-focus-indicator-color: ButtonText;
+		--highcontrast-actionbutton-content-color: ButtonText;
+
 		&::after {
 			/* make sure focus indicator renders */
 			forced-color-adjust: none;
 		}
 
-		/* force a more visible focus indicator color */
-		--highcontrast-actionbutton-focus-indicator-color: ButtonText;
+		&:disabled,
+		&.is-disabled {
+			--highcontrast-actionbutton-content-color: GrayText;
+			--highcontrast-actionbutton-border-color: GrayText;
+			--highcontrast-actionbutton-background-color: ButtonFace;
+		}
 
 		&.is-selected {
-			--highcontrast-actionbutton-background-color-default: Highlight;
-			--highcontrast-actionbutton-background-color-hover: Highlight;
-			--highcontrast-actionbutton-background-color-focus: Highlight;
-			--highcontrast-actionbutton-background-color-down: Highlight;
-			--highcontrast-actionbutton-background-color-disabled: ButtonFace;
-
-			--highcontrast-actionbutton-border-color-default: HighlightText;
-			--highcontrast-actionbutton-border-color-hover: HighlightText;
-			--highcontrast-actionbutton-border-color-focus: HighlightText;
-			--highcontrast-actionbutton-border-color-down: HighlightText;
-			--highcontrast-actionbutton-border-color-disabled: GrayText;
-
-			--highcontrast-actionbutton-content-color-default: HighlightText;
-			--highcontrast-actionbutton-content-color-hover: HighlightText;
-			--highcontrast-actionbutton-content-color-focus: HighlightText;
-			--highcontrast-actionbutton-content-color-down: HighlightText;
-			--highcontrast-actionbutton-content-color-disabled: GrayText;
+			--highcontrast-actionbutton-background-color: Highlight;
+			--highcontrast-actionbutton-border-color: HighlightText;
+			--highcontrast-actionbutton-content-color: HighlightText;
 
 			.spectrum-ActionButton-icon,
 			.spectrum-ActionButton-hold,
@@ -165,109 +49,228 @@
 }
 
 .spectrum-ActionButton {
-	@extend %spectrum-BaseButton;
-	position: relative;
+	--spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
+	--spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
+	--spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default)));
 
-	min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
-	block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height));
+	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-100));
+	--spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
 
-	border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
-	border-width: var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width));
+	--spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
+	--spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
+	--spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color)));
 
-	gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + (var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))));
+	&:dir(rtl) {
+		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+	}
 
-	/* Start with text-only padding */
-	padding-inline: var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text));
+	&.spectrum-ActionButton--quiet {
+		--spectrum-actionbutton-border-color: transparent;
+	}
+
+	/* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */
+	&.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) {
+		--mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));
+		--mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
+		--mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
+		--mod-actionbutton-background-color-focus-selected: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus));
+
+		--mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white));
+		--mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white));
+		--mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white));
+		--mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white));
+	}
+
+	&.spectrum-ActionButton--staticBlack {
+		--mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800);
+		--mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900);
+		--mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900);
+		--mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900);
+
+		/* border color _not_ disabled is coming from the system theme layer */
+		--mod-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+
+		--mod-actionbutton-content-color-default: var(--spectrum-black);
+		--mod-actionbutton-content-color-hover: var(--spectrum-black);
+		--mod-actionbutton-content-color-down: var(--spectrum-black);
+		--mod-actionbutton-content-color-focus: var(--spectrum-black);
+		--mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+
+		--mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
+		--mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
+		--mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
+		--mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
+
+		--mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+	}
+
+	&.spectrum-ActionButton--staticWhite {
+		/* background color _not_ selected is coming from the system theme layer */
+		--mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800);
+		--mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900);
+		--mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900);
+		--mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900);
+
+		/* border color _not_ disabled is coming from the system theme layer */
+		--mod-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+
+		--mod-actionbutton-content-color-default: var(--spectrum-white);
+		--mod-actionbutton-content-color-hover: var(--spectrum-white);
+		--mod-actionbutton-content-color-down: var(--spectrum-white);
+		--mod-actionbutton-content-color-focus: var(--spectrum-white);
+		--mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
 
-	background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
-	border-color: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
-	color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
+		--mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
+		--mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
+		--mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
+		--mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
+
+		--mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+	}
+
+	&.is-selected {
+		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-actionbutton-background-color-selected));
+		--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover));
+		--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down));
+		--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus));
+		--mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled);
+
+		--mod-actionbutton-border-color-default: transparent;
+		--mod-actionbutton-border-color-hover: transparent;
+		--mod-actionbutton-border-color-down: transparent;
+		--mod-actionbutton-border-color-focus: transparent;
+		--mod-actionbutton-border-color-disabled: transparent;
+
+		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-actionbutton-content-color-selected));
+		--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-actionbutton-content-color-selected));
+		--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-actionbutton-content-color-selected));
+		--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-actionbutton-content-color-selected));
+	}
 
 	&:hover {
-		background-color: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
-		border-color: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover)));
-		color: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
+		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover));
+		--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover));
+		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover));
 	}
 
 	&:focus-visible {
-		background-color: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)));
-		border-color: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus)));
-		color: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus)));
+		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus));
+		--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus));
+		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus));
 	}
 
 	&:active {
-		background-color: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)));
-		border-color: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down)));
-		color: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down)));
+		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
+		--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down));
+		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down));
 	}
 
 	&:disabled,
 	&.is-disabled {
-		background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)));
-		border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled)));
-		color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled)));
+		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
+		--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled));
+		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color));
 	}
 }
 
-a.spectrum-ActionButton {
-	@extend %spectrum-AnchorButton;
+.spectrum-ActionButton,
+.spectrum-ActionButton--sizeM {
+	--spectrum-actionbutton-sized-height: var(--spectrum-component-height-100);
+	--spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100);
+	--spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100);
+	--spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100);
+	--spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
+	--spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
+	--spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100);
+	--spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
 }
 
-.spectrum-ActionButton-icon {
-	@extend %spectrum-ButtonIcon;
-
-	inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
-	block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
+.spectrum-ActionButton--sizeXS {
+	--spectrum-actionbutton-sized-height: var(--spectrum-component-height-50);
+	--spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50);
+	--spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-50);
+	--spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-50);
+	--spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small);
+	--spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-50);
+	--spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-50);
+	--spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50);
+}
 
-	/* adjust icon positioning to match UI kit */
-	margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
-	margin-inline-end: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
+.spectrum-ActionButton--sizeS {
+	--spectrum-actionbutton-sized-height: var(--spectrum-component-height-75);
+	--spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-75);
+	--spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-75);
+	--spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-75);
+	--spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
+	--spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
+	--spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-75);
+	--spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75);
+}
 
-	color: inherit;
+.spectrum-ActionButton--sizeL {
+	--spectrum-actionbutton-sized-height: var(--spectrum-component-height-200);
+	--spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-200);
+	--spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-200);
+	--spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-200);
+	--spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
+	--spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
+	--spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-200);
+	--spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200);
 }
 
-.spectrum-ActionButton-hold + .spectrum-ActionButton-icon,
-.spectrum-ActionButton-icon:only-child {
-	/* Augment the margin correction for the icon only scenario */
-	margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
+.spectrum-ActionButton--sizeXL {
+	--spectrum-actionbutton-sized-height: var(--spectrum-component-height-300);
+	--spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-300);
+	--spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-300);
+	--spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-300);
+	--spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
+	--spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
+	--spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-300);
+	--spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300);
 }
 
-.spectrum-ActionButton-label {
-	@extend %spectrum-ButtonLabel;
-	pointer-events: none;
-	line-height: var(--spectrum-actionbutton-height);
+.spectrum-ActionButton {
+	/* Variables leveraging t-shirt sizing */
+	--spectrum-actionbutton-height: var(--mod-actionbutton-height, var(--spectrum-actionbutton-sized-height));
+	--spectrum-actionbutton-icon-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-sized-icon-size));
+	--spectrum-actionbutton-font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-sized-font-size));
+	--spectrum-actionbutton-text-to-visual: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-sized-text-to-visual));
+	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-sized-edge-to-hold-icon));
 
-	font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size));
-	white-space: nowrap;
-	color: var(--mod-actionbutton-label-color, inherit);
+	--spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width)));
+	--spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width)));
+	--spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-actionbutton-sized-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)));
 
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
+	@extend %spectrum-BaseButton;
 
-.spectrum-ActionButton-hold {
-	position: absolute;
-	inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width)));
-	inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width)));
+	position: relative;
 
-	color: inherit;
+	min-inline-size: var(--mod-actionbutton-min-width, calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size)));
+	block-size: var(--spectrum-actionbutton-height);
 
-	transform: var(--spectrum-logical-rotation);
-}
+	border-radius: var(--spectrum-actionbutton-border-radius);
+	border-width: var(--spectrum-actionbutton-border-width);
 
-/* special cases for focus-ring */
-.spectrum-ActionButton {
-	transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+	gap: calc(var(--spectrum-actionbutton-text-to-visual) + var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only));
+
+	/* Start with text-only padding */
+	padding-inline: var(--spectrum-actionbutton-edge-to-text);
+
+	background-color: var(--spectrum-actionbutton-background-color);
+	border-color: var(--spectrum-actionbutton-border-color);
+	color: var(--spectrum-actionbutton-content-color);
+
+	transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
 
 	&::after {
 		position: absolute;
 		inset: 0;
 
-		margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1);
+		margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1);
 
-		border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
+		border-radius: var(--mod-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)));
 
-		transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+		transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
 
 		pointer-events: none;
 		content: "";
@@ -279,7 +282,54 @@ a.spectrum-ActionButton {
 		outline: none;
 
 		&::after {
-			box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)));
+			box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--spectrum-actionbutton-focus-indicator-color);
 		}
 	}
 }
+
+a.spectrum-ActionButton {
+	@extend %spectrum-AnchorButton;
+}
+
+/* Nested sub-component: Icon */
+.spectrum-ActionButton-icon {
+	@extend %spectrum-ButtonIcon;
+
+	inline-size: var(--spectrum-actionbutton-icon-size);
+	block-size: var(--spectrum-actionbutton-icon-size);
+
+	/* adjust icon positioning to match UI kit */
+	margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual) - var(--spectrum-actionbutton-edge-to-text));
+	margin-inline-end: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
+
+	color: inherit;
+
+	/* Augment the margin correction for the icon only scenario */
+	.spectrum-ActionButton-hold + &,
+	&:only-child {
+		margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
+	}
+}
+
+.spectrum-ActionButton-label {
+	@extend %spectrum-ButtonLabel;
+	pointer-events: none;
+	line-height: var(--spectrum-actionbutton-height);
+
+	font-size: var(--spectrum-actionbutton-font-size);
+	white-space: nowrap;
+	color: var(--mod-actionbutton-label-color, inherit);
+
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.spectrum-ActionButton-hold {
+	position: absolute;
+	inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
+	inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
+
+	color: inherit;
+
+	transform: var(--spectrum-logical-rotation,);
+}
diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md
deleted file mode 100644
index 0c91d4059b..0000000000
--- a/components/actionbutton/metadata/mods.md
+++ /dev/null
@@ -1,54 +0,0 @@
-| Modifiable custom properties                                      |
-| ----------------------------------------------------------------- |
-| `--mod-actionbutton-animation-duration`                           |
-| `--mod-actionbutton-background-color-default`                     |
-| `--mod-actionbutton-background-color-default-selected`            |
-| `--mod-actionbutton-background-color-default-selected-emphasized` |
-| `--mod-actionbutton-background-color-disabled`                    |
-| `--mod-actionbutton-background-color-down`                        |
-| `--mod-actionbutton-background-color-down-selected`               |
-| `--mod-actionbutton-background-color-down-selected-emphasized`    |
-| `--mod-actionbutton-background-color-focus`                       |
-| `--mod-actionbutton-background-color-focus-selected`              |
-| `--mod-actionbutton-background-color-focus-selected-emphasized`   |
-| `--mod-actionbutton-background-color-hover`                       |
-| `--mod-actionbutton-background-color-hover-selected`              |
-| `--mod-actionbutton-background-color-hover-selected-emphasized`   |
-| `--mod-actionbutton-border-color-default`                         |
-| `--mod-actionbutton-border-color-disabled`                        |
-| `--mod-actionbutton-border-color-down`                            |
-| `--mod-actionbutton-border-color-focus`                           |
-| `--mod-actionbutton-border-color-hover`                           |
-| `--mod-actionbutton-border-radius`                                |
-| `--mod-actionbutton-border-width`                                 |
-| `--mod-actionbutton-content-color-default`                        |
-| `--mod-actionbutton-content-color-default-selected`               |
-| `--mod-actionbutton-content-color-default-selected-emphasized`    |
-| `--mod-actionbutton-content-color-disabled`                       |
-| `--mod-actionbutton-content-color-down`                           |
-| `--mod-actionbutton-content-color-down-selected`                  |
-| `--mod-actionbutton-content-color-down-selected-emphasized`       |
-| `--mod-actionbutton-content-color-focus`                          |
-| `--mod-actionbutton-content-color-focus-selected`                 |
-| `--mod-actionbutton-content-color-focus-selected-emphasized`      |
-| `--mod-actionbutton-content-color-hover`                          |
-| `--mod-actionbutton-content-color-hover-selected`                 |
-| `--mod-actionbutton-content-color-hover-selected-emphasized`      |
-| `--mod-actionbutton-edge-to-hold-icon`                            |
-| `--mod-actionbutton-edge-to-text`                                 |
-| `--mod-actionbutton-edge-to-visual`                               |
-| `--mod-actionbutton-edge-to-visual-only`                          |
-| `--mod-actionbutton-focus-indicator-border-radius`                |
-| `--mod-actionbutton-focus-indicator-color`                        |
-| `--mod-actionbutton-focus-indicator-gap`                          |
-| `--mod-actionbutton-focus-indicator-thickness`                    |
-| `--mod-actionbutton-font-size`                                    |
-| `--mod-actionbutton-height`                                       |
-| `--mod-actionbutton-icon-size`                                    |
-| `--mod-actionbutton-label-color`                                  |
-| `--mod-actionbutton-min-width`                                    |
-| `--mod-actionbutton-static-content-color`                         |
-| `--mod-actionbutton-text-to-visual`                               |
-| `--mod-animation-duration-100`                                    |
-| `--mod-line-height-100`                                           |
-| `--mod-sans-font-family-stack`                                    |
diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json
index 4d075a5f14..8ac1e5343b 100644
--- a/components/actionbutton/package.json
+++ b/components/actionbutton/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index 39fa261322..a08f0f7bbf 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -2,7 +2,7 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ActionButtonGroup } from "./actionbutton.test.js";
 import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from "./template.js";
@@ -84,6 +84,10 @@ export default {
 		actions: {
 			handles: ["click .spectrum-ActionButton:not([disabled])"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=702-2877",
+		},
 		packageJson,
 		metadata,
 		docs: {
diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
index 23cf2a1dfa..425b7e4115 100644
--- a/components/actionbutton/stories/template.js
+++ b/components/actionbutton/stories/template.js
@@ -7,6 +7,9 @@ import { when } from "lit/directives/when.js";
 import { capitalize } from "lodash-es";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 /**
  * @todo load order should not influence the icon size but it is; fix this
@@ -67,6 +70,7 @@ export const Template = ({
 	role = "button",
 } = {}, context = {}) => {
 	const { updateArgs } = context;
+
 	return html`
 		<button
 			aria-label=${ifDefined(hideLabel ? label : undefined)}
diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css
index e1ae5a3036..489d96692b 100644
--- a/components/actionbutton/themes/express.css
+++ b/components/actionbutton/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-ActionButton {
 		--spectrum-actionbutton-background-color-default: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
@@ -26,8 +26,6 @@
 		--spectrum-actionbutton-border-color-hover: transparent;
 		--spectrum-actionbutton-border-color-down: transparent;
 		--spectrum-actionbutton-border-color-focus: transparent;
-
-		--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
 		--spectrum-actionbutton-border-color-disabled: transparent;
 
 		&.spectrum-ActionButton--quiet {
@@ -46,17 +44,27 @@
 		}
 
 		&.spectrum-ActionButton--staticBlack {
-			--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200);
-			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
-			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
-			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
+			--spectrum-actionbutton-background-color-disabled: transparent;
+
+			&,
+			&.spectrum-ActionButton--quiet {
+				--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200);
+				--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
+				--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
+				--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
+			}
 		}
 
 		&.spectrum-ActionButton--staticWhite {
-			--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200);
-			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
-			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
-			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
+			--spectrum-actionbutton-background-color-disabled: transparent;
+
+			&,
+			&.spectrum-ActionButton--quiet {
+				--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200);
+				--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
+				--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
+				--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
+			}
 		}
 	}
 }
diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css
new file mode 100644
index 0000000000..656f651393
--- /dev/null
+++ b/components/actionbutton/themes/spectrum-two.css
@@ -0,0 +1,78 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-ActionButton {
+		--spectrum-actionbutton-background-color-default: var(--spectrum-gray-50);
+		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
+		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
+		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
+
+		--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
+		--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
+		--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
+		--spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
+
+		--spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
+		--spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
+		--spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
+		--spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
+		--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
+
+		--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50);
+
+		&.spectrum-ActionButton--quiet {
+			--spectrum-actionbutton-background-color-default: transparent;
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
+		}
+
+		&.spectrum-ActionButton--staticBlack {
+			--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
+			--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
+			--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
+			--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
+
+			--spectrum-actionbutton-background-color-disabled: transparent;
+			--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
+
+			&,
+			&.spectrum-ActionButton--quiet {
+				--spectrum-actionbutton-background-color-default: transparent;
+				--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
+				--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
+				--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
+			}
+		}
+
+		&.spectrum-ActionButton--staticWhite {
+			--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
+			--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
+			--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
+			--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
+
+			--spectrum-actionbutton-background-color-disabled: transparent;
+			--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200);
+
+			&,
+			&.spectrum-ActionButton--quiet {
+				--spectrum-actionbutton-background-color-default: transparent;
+				--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
+				--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
+				--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
+			}
+		}
+	}
+}
diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css
index dac5a200cf..c0b4c61ca0 100644
--- a/components/actionbutton/themes/spectrum.css
+++ b/components/actionbutton/themes/spectrum.css
@@ -11,132 +11,51 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-ActionButton {
 		--spectrum-actionbutton-background-color-default: var(--spectrum-gray-75);
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
+		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
 
-		--spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
-		--spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
-		--spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
-		--spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
-
-		--spectrum-actionbutton-background-color-disabled: transparent;
-		--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
-		--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
+		--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75);
 
 		&.spectrum-ActionButton--quiet {
-			--spectrum-actionbutton-background-color-default: transparent;
 			--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
 			--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
 			--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
-
-			--spectrum-actionbutton-border-color-default: transparent;
-			--spectrum-actionbutton-border-color-hover: transparent;
-			--spectrum-actionbutton-border-color-down: transparent;
-			--spectrum-actionbutton-border-color-focus: transparent;
-
-			--spectrum-actionbutton-background-color-disabled: transparent;
-			--spectrum-actionbutton-border-color-disabled: transparent;
-		}
-
-		&.is-selected {
-			--spectrum-actionbutton-border-color-default: transparent;
-			--spectrum-actionbutton-border-color-hover: transparent;
-			--spectrum-actionbutton-border-color-down: transparent;
-			--spectrum-actionbutton-border-color-focus: transparent;
-
-			--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
-			--spectrum-actionbutton-border-color-disabled: transparent;
-		}
-
-		&.spectrum-ActionButton--staticBlack,
-		&.spectrum-ActionButton--staticWhite {
-			&.spectrum-ActionButton--quiet {
-				--spectrum-actionbutton-border-color-default: transparent;
-				--spectrum-actionbutton-border-color-hover: transparent;
-				--spectrum-actionbutton-border-color-down: transparent;
-				--spectrum-actionbutton-border-color-focus: transparent;
-
-				--spectrum-actionbutton-border-color-disabled: transparent;
-			}
 		}
 
 		&.spectrum-ActionButton--staticBlack {
-			--spectrum-actionbutton-background-color-default: transparent;
-			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
-			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
-			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
-
 			--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400);
 			--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500);
 			--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600);
 			--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500);
 
-			--spectrum-actionbutton-content-color-default: var(--spectrum-black);
-			--spectrum-actionbutton-content-color-hover: var(--spectrum-black);
-			--spectrum-actionbutton-content-color-down: var(--spectrum-black);
-			--spectrum-actionbutton-content-color-focus: var(--spectrum-black);
-
-			--spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
-			--spectrum-actionbutton-background-color-disabled: transparent;
-			--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
-			--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-
-			&.is-selected {
-				--mod-actionbutton-background-color-default: var(--spectrum-transparent-black-800);
-				--mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-900);
-				--mod-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
-				--mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
-
-				--mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
-				--mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
-				--mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
-				--mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
-
-				--mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
-				--mod-actionbutton-border-color-disabled: transparent;
+			&,
+			&.spectrum-ActionButton--quiet {
+				--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
+				--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
+				--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
 			}
 		}
 
 		&.spectrum-ActionButton--staticWhite {
-			--spectrum-actionbutton-background-color-default: transparent;
-			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
-			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
-			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
-
 			--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400);
 			--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500);
 			--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600);
 			--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500);
 
-			--spectrum-actionbutton-content-color-default: var(--spectrum-white);
-			--spectrum-actionbutton-content-color-hover: var(--spectrum-white);
-			--spectrum-actionbutton-content-color-down: var(--spectrum-white);
-			--spectrum-actionbutton-content-color-focus: var(--spectrum-white);
-
-			--spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
-			--spectrum-actionbutton-background-color-disabled: transparent;
-			--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
-			--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-
-			&.is-selected {
-				--mod-actionbutton-background-color-default: var(--spectrum-transparent-white-800);
-				--mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-900);
-				--mod-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
-				--mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
-
-				--mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
-				--mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
-				--mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
-				--mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
-
-				--mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
-				--mod-actionbutton-border-color-disabled: transparent;
+			&,
+			&.spectrum-ActionButton--quiet {
+				--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
+				--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
+				--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
 			}
 		}
 	}
diff --git a/components/actiongroup/metadata/metadata.json b/components/actiongroup/dist/metadata.json
similarity index 92%
rename from components/actiongroup/metadata/metadata.json
rename to components/actiongroup/dist/metadata.json
index 11bfce0b28..c78e7d3096 100644
--- a/components/actiongroup/metadata/metadata.json
+++ b/components/actiongroup/dist/metadata.json
@@ -5,6 +5,7 @@
     ".spectrum-ActionGroup .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup .spectrum-ActionGroup-item:focus-visible",
     ".spectrum-ActionGroup--compact",
+    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)",
     ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
@@ -18,7 +19,6 @@
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:focus-visible",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
-    ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical",
     ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup--sizeL",
     ".spectrum-ActionGroup--sizeM",
@@ -26,7 +26,7 @@
     ".spectrum-ActionGroup--sizeXL",
     ".spectrum-ActionGroup--sizeXS",
     ".spectrum-ActionGroup--vertical",
-    ".spectrum-ActionGroup.spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical):not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item"
+    ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item"
   ],
   "modifiers": [
     "--mod-actiongroup-border-radius",
@@ -51,7 +51,6 @@
   "global": [
     "--spectrum-corner-radius-100",
     "--spectrum-spacing-100",
-    "--spectrum-spacing-50",
     "--spectrum-spacing-75"
   ],
   "system-theme": [
diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
index 2b69125215..bbd26cb0f6 100644
--- a/components/actiongroup/index.css
+++ b/components/actiongroup/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-ActionGroup {
 	--spectrum-actiongroup-button-spacing-reset: 0;
@@ -47,7 +46,7 @@
 		}
 	}
 
-	&:not(.spectrum-ActionGroup--vertical)&:not(.spectrum-ActionGroup--compact) {
+	&:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) {
 		.spectrum-ActionGroup-item {
 			flex-shrink: 0;
 		}
@@ -73,7 +72,7 @@
 		z-index: 0;
 
 		&:first-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 
 			border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -82,7 +81,7 @@
 		}
 
 		& + .spectrum-ActionGroup-item {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: 0px;
 
 			margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
@@ -90,7 +89,7 @@
 		}
 
 		&:last-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
 
 			border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -118,14 +117,14 @@
 	}
 }
 
-.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical {
+.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) {
 	gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact));
 
 	.spectrum-ActionGroup-item {
 		border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
 
 		&:first-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px;
 
 			border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -143,7 +142,7 @@
 		}
 
 		&:last-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 
 			border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
diff --git a/components/actiongroup/metadata/mods.md b/components/actiongroup/metadata/mods.md
deleted file mode 100644
index 2fcc384c89..0000000000
--- a/components/actiongroup/metadata/mods.md
+++ /dev/null
@@ -1,10 +0,0 @@
-| Modifiable custom properties                   |
-| ---------------------------------------------- |
-| `--mod-actiongroup-border-radius`              |
-| `--mod-actiongroup-border-radius-reset`        |
-| `--mod-actiongroup-button-spacing-reset`       |
-| `--mod-actiongroup-gap-size-compact`           |
-| `--mod-actiongroup-horizontal-spacing-compact` |
-| `--mod-actiongroup-horizontal-spacing-regular` |
-| `--mod-actiongroup-vertical-spacing-compact`   |
-| `--mod-actiongroup-vertical-spacing-regular`   |
diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json
index 59d17e4265..05e3416288 100644
--- a/components/actiongroup/package.json
+++ b/components/actiongroup/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js
index 4eff36dccc..a83857b9e5 100644
--- a/components/actiongroup/stories/actiongroup.stories.js
+++ b/components/actiongroup/stories/actiongroup.stories.js
@@ -2,7 +2,7 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ActionGroups } from "./actiongroup.test.js";
 import { OverflowOption, TreatmentTemplate } from "./template.js";
@@ -93,6 +93,10 @@ export default {
 				...(ActionButton?.parameters?.actions?.handles ?? []),
 			],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=19083-360",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js
index 25d8f25f4e..d13cdac64a 100644
--- a/components/actiongroup/stories/template.js
+++ b/components/actiongroup/stories/template.js
@@ -6,6 +6,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { capitalize } from "lodash-es";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-ActionGroup",
diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css
index 67e17a4e9f..3fd8de9cdb 100644
--- a/components/actiongroup/themes/express.css
+++ b/components/actiongroup/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-ActionGroup {
 		--spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50);
 
diff --git a/components/actiongroup/themes/spectrum-two.css b/components/actiongroup/themes/spectrum-two.css
new file mode 100644
index 0000000000..b25c0f945b
--- /dev/null
+++ b/components/actiongroup/themes/spectrum-two.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-ActionGroup {
+		--spectrum-actiongroup-gap-size-compact: 0;
+
+		/* account for button border */
+		--spectrum-actiongroup-horizontal-spacing-compact: -1px;
+		--spectrum-actiongroup-vertical-spacing-compact: -1px;
+	}
+}
diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css
index ff6e1cab39..3d81bc564b 100644
--- a/components/actiongroup/themes/spectrum.css
+++ b/components/actiongroup/themes/spectrum.css
@@ -11,12 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-ActionGroup {
-		--spectrum-actiongroup-gap-size-compact: 0;
+/* @combine .spectrum.spectrum--legacy */
 
-		/* account for button border */
-		--spectrum-actiongroup-horizontal-spacing-compact: -1px;
-		--spectrum-actiongroup-vertical-spacing-compact: -1px;
-	}
-}
+@import "./spectrum-two.css";
diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json
index 2090e2cca9..de35db2cc2 100644
--- a/components/actionmenu/package.json
+++ b/components/actionmenu/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/alertbanner/metadata/metadata.json b/components/alertbanner/dist/metadata.json
similarity index 93%
rename from components/alertbanner/metadata/metadata.json
rename to components/alertbanner/dist/metadata.json
index 0d4cc64c15..15b6983e63 100644
--- a/components/alertbanner/metadata/metadata.json
+++ b/components/alertbanner/dist/metadata.json
@@ -24,7 +24,7 @@
     "--mod-alert-banner-max-inline-size",
     "--mod-alert-banner-min-height",
     "--mod-alert-banner-negative-background",
-    "--mod-alert-banner-netural-background",
+    "--mod-alert-banner-neutral-background",
     "--mod-alert-banner-size",
     "--mod-alert-banner-start-edge",
     "--mod-alert-banner-text-to-button-horizontal",
@@ -48,7 +48,7 @@
     "--spectrum-alert-banner-min-height",
     "--spectrum-alert-banner-minimum-height",
     "--spectrum-alert-banner-negative-background",
-    "--spectrum-alert-banner-netural-background",
+    "--spectrum-alert-banner-neutral-background",
     "--spectrum-alert-banner-size",
     "--spectrum-alert-banner-start-edge",
     "--spectrum-alert-banner-text-to-button-horizontal",
@@ -65,14 +65,13 @@
     "--spectrum-font-size-100",
     "--spectrum-informative-background-color-default",
     "--spectrum-negative-background-color-default",
-    "--spectrum-neutral-background-color-default",
     "--spectrum-neutral-subdued-background-color-default",
     "--spectrum-spacing-300",
     "--spectrum-text-to-visual-300",
     "--spectrum-white",
     "--spectrum-workflow-icon-size-100"
   ],
-  "system-theme": ["--system-alert-banner-netural-background"],
+  "system-theme": ["--system-alert-banner-neutral-background"],
   "passthroughs": [
     "--mod-button-margin-block",
     "--mod-button-margin-left",
diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css
index 3df1601bc2..2f483970fb 100644
--- a/components/alertbanner/index.css
+++ b/components/alertbanner/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-AlertBanner {
 	--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
@@ -49,9 +48,7 @@
 	--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
 	--mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
 	--mod-closebutton-align-self: flex-start;
-}
 
-.spectrum-AlertBanner {
 	display: none;
 	justify-content: space-between;
 	inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
@@ -59,7 +56,7 @@
 	min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
 	font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
 	color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
-	background-color: var(--mod-alert-banner-netural-background, var(--spectrum-alert-banner-netural-background));
+	background-color: var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background));
 	border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
 
 	&.is-open {
diff --git a/components/alertbanner/metadata/mods.md b/components/alertbanner/metadata/mods.md
deleted file mode 100644
index 7d70038551..0000000000
--- a/components/alertbanner/metadata/mods.md
+++ /dev/null
@@ -1,22 +0,0 @@
-| Modifiable custom properties                   |
-| ---------------------------------------------- |
-| `--mod-alert-banner-bottom-text`               |
-| `--mod-alert-banner-close-button-spacing`      |
-| `--mod-alert-banner-edge-to-button`            |
-| `--mod-alert-banner-edge-to-divider`           |
-| `--mod-alert-banner-font-color`                |
-| `--mod-alert-banner-font-size`                 |
-| `--mod-alert-banner-icon-size`                 |
-| `--mod-alert-banner-icon-to-text`              |
-| `--mod-alert-banner-informative-background`    |
-| `--mod-alert-banner-max-inline-size`           |
-| `--mod-alert-banner-min-height`                |
-| `--mod-alert-banner-negative-background`       |
-| `--mod-alert-banner-netural-background`        |
-| `--mod-alert-banner-size`                      |
-| `--mod-alert-banner-start-edge`                |
-| `--mod-alert-banner-text-to-button-horizontal` |
-| `--mod-alert-banner-text-to-button-vertical`   |
-| `--mod-alert-banner-text-to-divider`           |
-| `--mod-alert-banner-top-icon`                  |
-| `--mod-alert-banner-top-text`                  |
diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json
index 93fc95914a..3ae696bea4 100644
--- a/components/alertbanner/package.json
+++ b/components/alertbanner/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js
index d5998fa43d..cd49c21a70 100644
--- a/components/alertbanner/stories/alertbanner.stories.js
+++ b/components/alertbanner/stories/alertbanner.stories.js
@@ -1,6 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { AlertBannerGroup } from "./alertbanner.test.js";
 import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js";
@@ -69,6 +69,10 @@ export default {
 		actions: {
 			handles: ["click .spectrum-AlertBanner button"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=15963-287",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js
index b564deeed0..3eb719c061 100644
--- a/components/alertbanner/stories/template.js
+++ b/components/alertbanner/stories/template.js
@@ -10,6 +10,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-AlertBanner",
diff --git a/components/alertbanner/themes/express.css b/components/alertbanner/themes/express.css
index b0d6ffea4a..a86424d5e4 100644
--- a/components/alertbanner/themes/express.css
+++ b/components/alertbanner/themes/express.css
@@ -11,12 +11,12 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-AlertBanner {
-		--spectrum-alert-banner-netural-background: var(--spectrum-neutral-background-color-default);
+		--spectrum-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default);
 	}
 }
diff --git a/components/alertbanner/themes/spectrum-two.css b/components/alertbanner/themes/spectrum-two.css
new file mode 100644
index 0000000000..3e038dbd7a
--- /dev/null
+++ b/components/alertbanner/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-AlertBanner {
+		--spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
+	}
+}
diff --git a/components/alertbanner/themes/spectrum.css b/components/alertbanner/themes/spectrum.css
index adcf854d6c..1bd05c8e88 100644
--- a/components/alertbanner/themes/spectrum.css
+++ b/components/alertbanner/themes/spectrum.css
@@ -11,8 +11,12 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: spectrum) {
 	.spectrum-AlertBanner {
-		--spectrum-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default);
+		--spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
 	}
 }
diff --git a/components/alertdialog/metadata/metadata.json b/components/alertdialog/dist/metadata.json
similarity index 100%
rename from components/alertdialog/metadata/metadata.json
rename to components/alertdialog/dist/metadata.json
diff --git a/components/alertdialog/metadata/mods.md b/components/alertdialog/metadata/mods.md
deleted file mode 100644
index e80747e43a..0000000000
--- a/components/alertdialog/metadata/mods.md
+++ /dev/null
@@ -1,24 +0,0 @@
-| Modifiable custom properties                |
-| ------------------------------------------- |
-| `--mod-alert-dialog-body-color`             |
-| `--mod-alert-dialog-body-font-family`       |
-| `--mod-alert-dialog-body-font-size`         |
-| `--mod-alert-dialog-body-font-style`        |
-| `--mod-alert-dialog-body-font-weight`       |
-| `--mod-alert-dialog-body-line-height`       |
-| `--mod-alert-dialog-description-to-buttons` |
-| `--mod-alert-dialog-divider-to-description` |
-| `--mod-alert-dialog-error-icon-color`       |
-| `--mod-alert-dialog-icon-size`              |
-| `--mod-alert-dialog-max-width`              |
-| `--mod-alert-dialog-min-width`              |
-| `--mod-alert-dialog-padding`                |
-| `--mod-alert-dialog-title-color`            |
-| `--mod-alert-dialog-title-font-family`      |
-| `--mod-alert-dialog-title-font-size`        |
-| `--mod-alert-dialog-title-font-style`       |
-| `--mod-alert-dialog-title-font-weight`      |
-| `--mod-alert-dialog-title-line-height`      |
-| `--mod-alert-dialog-title-to-divider`       |
-| `--mod-alert-dialog-title-to-icon`          |
-| `--mod-alert-dialog-warning-icon-color`     |
diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json
index e9df734fb3..50491a4f1f 100644
--- a/components/alertdialog/package.json
+++ b/components/alertdialog/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index 12674e970d..87c83d18ff 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -1,7 +1,7 @@
 import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { AlertDialogGroup } from "./alertdialog.test.js";
 import { Template } from "./template.js";
@@ -45,6 +45,10 @@ export default {
 		actions: {
 			handles: ["click .spectrum-AlertDialog button"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21917-157",
+		},
 		docs: {
 			story: {
 				height: "300px",
diff --git a/components/asset/metadata/metadata.json b/components/asset/dist/metadata.json
similarity index 52%
rename from components/asset/metadata/metadata.json
rename to components/asset/dist/metadata.json
index c4dba7ecfc..306c123b1b 100644
--- a/components/asset/metadata/metadata.json
+++ b/components/asset/dist/metadata.json
@@ -18,17 +18,26 @@
     "--mod-asset-icon-min-width",
     "--mod-asset-icon-outline-color"
   ],
-  "component": [],
+  "component": [
+    "--spectrum-asset-file-background",
+    "--spectrum-asset-file-background-color",
+    "--spectrum-asset-file-outline",
+    "--spectrum-asset-folder-background",
+    "--spectrum-asset-folder-background-color",
+    "--spectrum-asset-folder-outline",
+    "--spectrum-asset-icon-outline-color"
+  ],
   "global": [
     "--spectrum-animation-duration-100",
-    "--spectrum-gray-300",
-    "--spectrum-gray-50",
+    "--spectrum-gray-200",
+    "--spectrum-gray-25",
     "--spectrum-gray-500"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-asset-file-background-color",
+    "--system-asset-folder-background-color",
+    "--system-asset-icon-outline-color"
+  ],
   "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-asset-file-background-color",
-    "--highcontrast-asset-folder-background-color"
-  ]
+  "high-contrast": ["--highcontrast-asset-icon-background-color"]
 }
diff --git a/components/asset/index.css b/components/asset/index.css
index 3c30287e68..abf5d42572 100644
--- a/components/asset/index.css
+++ b/components/asset/index.css
@@ -11,7 +11,14 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 .spectrum-Asset {
+	--spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-asset-folder-background-color)));
+	--spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color)));
+	--spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color));
+	--spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color));
+
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -35,21 +42,23 @@
 }
 
 .spectrum-Asset-folderBackground {
-	fill: var(--highcontrast-asset-folder-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-300)));
+	fill: var(--spectrum-asset-folder-background);
 }
 
 .spectrum-Asset-fileBackground {
-	fill: var(--highcontrast-asset-file-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-50)));
+	fill: var(--spectrum-asset-file-background);
+}
+
+.spectrum-Asset-folderOutline {
+	fill: var(--spectrum-asset-folder-outline);
 }
 
-.spectrum-Asset-folderOutline,
 .spectrum-Asset-fileOutline {
-	fill: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500));
+	fill: var(--spectrum-asset-file-outline);
 }
 
 @media (forced-colors: active) {
 	.spectrum-Asset {
-		--highcontrast-asset-folder-background-color: currentColor;
-		--highcontrast-asset-file-background-color: currentColor;
+		--highcontrast-asset-icon-background-color: currentColor;
 	}
 }
diff --git a/components/asset/metadata/mods.md b/components/asset/metadata/mods.md
deleted file mode 100644
index c4afdaba58..0000000000
--- a/components/asset/metadata/mods.md
+++ /dev/null
@@ -1,8 +0,0 @@
-| Modifiable custom properties          |
-| ------------------------------------- |
-| `--mod-asset-file-background-color`   |
-| `--mod-asset-folder-background-color` |
-| `--mod-asset-icon-margin`             |
-| `--mod-asset-icon-max-width`          |
-| `--mod-asset-icon-min-width`          |
-| `--mod-asset-icon-outline-color`      |
diff --git a/components/asset/package.json b/components/asset/package.json
index b37f4ba441..e8979a15fa 100644
--- a/components/asset/package.json
+++ b/components/asset/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/asset/stories/asset.mdx b/components/asset/stories/asset.mdx
deleted file mode 100644
index 455cef7842..0000000000
--- a/components/asset/stories/asset.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-import * as AssetStories from "./asset.stories";
-
-<Meta of={AssetStories} title="Docs" />
-
-<Title of={AssetStories} />
-<Subtitle of={AssetStories} />
-<ComponentDetails />
-
-<Description of={AssetStories} />
-
-## Variants
-
-### Image
-
-<Canvas of={AssetStories.Default} />
-
-### File
-
-<Canvas of={AssetStories.File} />
-
-### Folder
-
-<Canvas of={AssetStories.Folder} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js
index d38c9eb682..927c1009aa 100644
--- a/components/asset/stories/asset.stories.js
+++ b/components/asset/stories/asset.stories.js
@@ -1,5 +1,5 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { AssetGroup } from "./asset.test.js";
 import { Template } from "./template.js";
@@ -39,7 +39,6 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = AssetGroup.bind({});
diff --git a/components/asset/stories/template.js b/components/asset/stories/template.js
index 30bb729941..c32f792cd4 100644
--- a/components/asset/stories/template.js
+++ b/components/asset/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Asset",
@@ -13,8 +16,8 @@ export const Template = ({
 	id = getRandomId("asset"),
 	customClasses = [],
 	customStyles = {},
-	isCardAssetOverride = false,
-}) => {
+	isImageFill = false,
+} = {}) => {
 	let visual;
 	if (preset === "file") {
 		visual = svg`
@@ -35,9 +38,8 @@ export const Template = ({
 			class="${rootClass}-image"
 			src=${ifDefined(image)}
 			style=${styleMap({
-				"max-width": !isCardAssetOverride ? "75%" : undefined,
-				"max-height": !isCardAssetOverride ? "75%" : undefined,
-				"object-fit": !isCardAssetOverride ? "contain" : undefined,
+				"max-inline-size": !isImageFill ? "75%" : undefined,
+				"max-block-size": !isImageFill ? "75%" : undefined,
 			})}
 		/>`;
 	}
diff --git a/tokens/custom-express/global-vars.css b/components/asset/themes/express.css
similarity index 85%
rename from tokens/custom-express/global-vars.css
rename to components/asset/themes/express.css
index d21931db51..9fd550418f 100644
--- a/tokens/custom-express/global-vars.css
+++ b/components/asset/themes/express.css
@@ -11,8 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-/* This file contains overrides and additions to core tokens */
+/* @combine .spectrum.spectrum--express */
 
-.spectrum--express {
-	--system: express;
-}
+@import "./spectrum.css";
diff --git a/components/asset/themes/spectrum-two.css b/components/asset/themes/spectrum-two.css
new file mode 100644
index 0000000000..5eda732011
--- /dev/null
+++ b/components/asset/themes/spectrum-two.css
@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Asset {
+		--spectrum-asset-folder-background-color: var(--spectrum-gray-200);
+		--spectrum-asset-file-background-color: var(--spectrum-gray-25);
+		--spectrum-asset-icon-outline-color: var(--spectrum-gray-500);
+	}
+}
diff --git a/components/asset/themes/spectrum.css b/components/asset/themes/spectrum.css
new file mode 100644
index 0000000000..8b2b12ee37
--- /dev/null
+++ b/components/asset/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Asset {
+		--spectrum-asset-folder-background-color: var(--spectrum-gray-300);
+		--spectrum-asset-file-background-color: var(--spectrum-gray-50);
+		--spectrum-asset-icon-outline-color: var(--spectrum-gray-500);
+	}
+}
diff --git a/components/assetcard/metadata/metadata.json b/components/assetcard/dist/metadata.json
similarity index 95%
rename from components/assetcard/metadata/metadata.json
rename to components/assetcard/dist/metadata.json
index 2996ffa38f..1c86dc4752 100644
--- a/components/assetcard/metadata/metadata.json
+++ b/components/assetcard/dist/metadata.json
@@ -127,6 +127,7 @@
     "--spectrum-assetcard-selectionindicator-background-color-ordered",
     "--spectrum-assetcard-selectionindicator-blur",
     "--spectrum-assetcard-selectionindicator-border-radius",
+    "--spectrum-assetcard-selectionindicator-box-shadow-color",
     "--spectrum-assetcard-selectionindicator-color",
     "--spectrum-assetcard-selectionindicator-font-size",
     "--spectrum-assetcard-selectionindicator-font-weight",
@@ -156,11 +157,11 @@
     "--spectrum-default-font-style",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-font-size-400",
-    "--spectrum-gray-100-rgb",
-    "--spectrum-gray-200",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
+    "--spectrum-gray-75",
+    "--spectrum-gray-75-rgb",
     "--spectrum-gray-900",
     "--spectrum-heading-cjk-font-style",
     "--spectrum-heading-cjk-font-weight",
@@ -172,9 +173,15 @@
     "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-300",
     "--spectrum-spacing-75",
+    "--spectrum-transparent-black-300",
     "--spectrum-white"
   ],
-  "system-theme": ["--system-asset-card-overlay-background-color"],
+  "system-theme": [
+    "--system-asset-card-background-color",
+    "--system-asset-card-overlay-background-color",
+    "--system-asset-card-selectionindicator-background-color-default",
+    "--system-asset-card-selectionindicator-box-shadow-color"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-assectcard-border-color-selected-down",
diff --git a/components/assetcard/index.css b/components/assetcard/index.css
index 3d6e0d3f6c..26881a3f45 100644
--- a/components/assetcard/index.css
+++ b/components/assetcard/index.css
@@ -11,14 +11,12 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 /* outer container, unstyled */
 .spectrum-AssetCard {
 	/* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
 	--spectrum-assetcard-asset-size: 224px;
-	--spectrum-assetcard-background-color: var(--spectrum-gray-200);
 	--spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100);
 	--spectrum-assetcard-asset-container-border-size: 1px;
 	--spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300);
@@ -32,7 +30,6 @@
 	--spectrum-assetcard-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 
 	/* selection indicator - checkbox or number */
-	--spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9);
 	--spectrum-assetcard-selectionindicator-size: var(--spectrum-card-selection-background-size);
 	--spectrum-assetcard-selectionindicator-border-radius: var(--spectrum-corner-radius-100);
 	--spectrum-assetcard-selectionindicator-offset-y: 4px;
@@ -67,6 +64,16 @@
 
 	--spectrum-assetcard-content-margin-block-start: var(--spectrum-spacing-75);
 
+	/* contain selection indicator */
+	position: relative;
+
+	display: flex;
+	flex-direction: column;
+
+	inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));
+
+	cursor: pointer;
+
 	&:lang(zh),
 	&:lang(ja),
 	&:lang(ko) {
@@ -89,18 +96,6 @@
 		--spectrum-assetcard-content-font-style: var(--spectrum-body-cjk-font-style);
 		--spectrum-assetcard-content-letter-spacing: var(--spectrum-cjk-letter-spacing);
 	}
-}
-
-.spectrum-AssetCard {
-	/* contain selection indicator */
-	position: relative;
-
-	display: flex;
-	flex-direction: column;
-
-	inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));
-
-	cursor: pointer;
 
 	&.is-selected,
 	&:hover,
@@ -273,7 +268,7 @@
 
 	border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius));
 
-	box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0 0 0 / 15%);
+	box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) var(--spectrum-assetcard-selectionindicator-box-shadow-color);
 
 	color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)));
 	font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight));
diff --git a/components/assetcard/metadata/mods.md b/components/assetcard/metadata/mods.md
deleted file mode 100644
index 867a8fe680..0000000000
--- a/components/assetcard/metadata/mods.md
+++ /dev/null
@@ -1,49 +0,0 @@
-| Modifiable custom properties                                  |
-| ------------------------------------------------------------- |
-| `--mod-assectcard-border-color-selected-down`                 |
-| `--mod-assectcard-focus-indicator-color`                      |
-| `--mod-assetcard-asset-animation-duration`                    |
-| `--mod-assetcard-asset-container-border-size`                 |
-| `--mod-assetcard-asset-size`                                  |
-| `--mod-assetcard-background-color`                            |
-| `--mod-assetcard-border-color`                                |
-| `--mod-assetcard-border-color-down`                           |
-| `--mod-assetcard-border-color-hover`                          |
-| `--mod-assetcard-border-color-selected`                       |
-| `--mod-assetcard-border-color-selected-hover`                 |
-| `--mod-assetcard-border-radius`                               |
-| `--mod-assetcard-content-font-family`                         |
-| `--mod-assetcard-content-font-size`                           |
-| `--mod-assetcard-content-font-style`                          |
-| `--mod-assetcard-content-font-weight`                         |
-| `--mod-assetcard-content-letter-spacing`                      |
-| `--mod-assetcard-content-line-height`                         |
-| `--mod-assetcard-content-margin-block-start`                  |
-| `--mod-assetcard-content-text-color`                          |
-| `--mod-assetcard-focus-indicator-thickness`                   |
-| `--mod-assetcard-focus-ring-border-radius`                    |
-| `--mod-assetcard-focus-ring-gap`                              |
-| `--mod-assetcard-header-content-font-family`                  |
-| `--mod-assetcard-header-content-font-size`                    |
-| `--mod-assetcard-header-content-font-stlye`                   |
-| `--mod-assetcard-header-content-font-weight`                  |
-| `--mod-assetcard-header-content-letter-spacing`               |
-| `--mod-assetcard-header-content-line-height`                  |
-| `--mod-assetcard-header-content-text-color`                   |
-| `--mod-assetcard-header-margin-block-start`                   |
-| `--mod-assetcard-overlay-background-color`                    |
-| `--mod-assetcard-selectionindicator-background-color-default` |
-| `--mod-assetcard-selectionindicator-background-color-ordered` |
-| `--mod-assetcard-selectionindicator-border-radius`            |
-| `--mod-assetcard-selectionindicator-color`                    |
-| `--mod-assetcard-selectionindicator-font-size`                |
-| `--mod-assetcard-selectionindicator-font-weight`              |
-| `--mod-assetcard-selectionindicator-margin`                   |
-| `--mod-assetcard-selectionindicator-size`                     |
-| `--mod-assetcard-title-font-family`                           |
-| `--mod-assetcard-title-font-size`                             |
-| `--mod-assetcard-title-font-style`                            |
-| `--mod-assetcard-title-font-weight`                           |
-| `--mod-assetcard-title-letter-spacing`                        |
-| `--mod-assetcard-title-line-height`                           |
-| `--mod-assetcard-title-text-color`                            |
diff --git a/components/assetcard/package.json b/components/assetcard/package.json
index deddbd0581..c6844f6116 100644
--- a/components/assetcard/package.json
+++ b/components/assetcard/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/assetcard/stories/assetcard.mdx b/components/assetcard/stories/assetcard.mdx
deleted file mode 100644
index d6edaaa020..0000000000
--- a/components/assetcard/stories/assetcard.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-import * as AssetCardStories from "./assetcard.stories";
-
-<Meta of={AssetCardStories} title="Docs" />
-
-<Title of={AssetCardStories} />
-<Subtitle of={AssetCardStories} />
-<ComponentDetails />
-
-<Description of={AssetCardStories} />
-
-## Portrait
-
-<Canvas of={AssetCardStories.Portrait} />
-
-## Landscape
-
-<Canvas of={AssetCardStories.Landscape} />
-
-## Square
-
-<Canvas of={AssetCardStories.Square} />
-
-## Optional Content
-
-<Canvas of={AssetCardStories.OptionalContent} />
-
-## Highlight Selection
-
-<Canvas of={AssetCardStories.HighlightSelection} />
-
-## Checkbox Selection
-
-<Canvas of={AssetCardStories.CheckboxSelection} />
-
-## Ordered Selection
-
-<Canvas of={AssetCardStories.OrderedSelection} />
-
-## Drop Target
-
-<Canvas of={AssetCardStories.DropTarget} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js
index e44d5a1ca1..2e917fbc25 100644
--- a/components/assetcard/stories/assetcard.stories.js
+++ b/components/assetcard/stories/assetcard.stories.js
@@ -1,13 +1,17 @@
 import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused, isSelected } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { AssetCardGroup } from "./assetcard.test.js";
 import { Template } from "./template.js";
 
 /**
  * The asset card component allows users to select and manage assets and their metadata in a grid.
+ *
+ * ## Usage notes
+ * Set the `--spectrum-assetcard-asset-size` custom property to the size at which you want to display the asset.
+ *
  */
 export default {
 	title: "Asset card",
@@ -89,7 +93,6 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = AssetCardGroup.bind({});
@@ -98,8 +101,13 @@ Default.args = {
 	exampleImage: "portrait",
 	content: ["Image"],
 };
+Default.tags = ["!autodocs"];
 
 // ********* DOCS ONLY ********* //
+/**
+ * Inside the tile, an asset card displays the preview of the item it represents. The preview has different styles, depending on the type of item.
+ *
+ * The default asset card is also referred to as "portrait." */
 export const Portrait = Template.bind({});
 Portrait.args = {
 	title: "Portrait asset",
@@ -110,6 +118,7 @@ Portrait.tags = ["!dev"];
 Portrait.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+Portrait.storyName = "Default";
 
 export const Landscape = Template.bind({});
 Landscape.args = {
@@ -131,6 +140,9 @@ Square.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * Asset cards have two optional content areas for extra information: `.spectrum-AssetCard-content` and `.spectrum-AssetCard-headerContent`. These content areas can include time stamps, non-interactive rating indicators, colored labels, badges, and more.
+ */
 export const OptionalContent = Template.bind({});
 OptionalContent.args = {
 	title: "MVI_0123.mp4",
@@ -141,7 +153,11 @@ OptionalContent.tags = ["!dev"];
 OptionalContent.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+OptionalContent.storyName = "Optional content";
 
+/**
+ * Sometimes it may not make sense to use checkboxes to indicate selection. In those rare cases, show a highlighted state when a user is inspecting one or more cards.
+ */
 export const HighlightSelection = Template.bind({});
 HighlightSelection.args = {
 	title: "Highlight selection",
@@ -153,7 +169,11 @@ HighlightSelection.tags = ["!dev"];
 HighlightSelection.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+HighlightSelection.storyName = "Selection - highlight";
 
+/**
+ * Some cards allow selection, on which the user can take an action. Both single-select and multi-select cards have checkboxes on the top left of the card (or in the top right for RTL languages).
+ */
 export const CheckboxSelection = Template.bind({});
 CheckboxSelection.args = {
 	title: "Checkbox selection",
@@ -165,7 +185,11 @@ CheckboxSelection.tags = ["!dev"];
 CheckboxSelection.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+CheckboxSelection.storyName = "Selection - checkbox";
 
+/**
+ * In cases where it’s important for users to know the order in which they have selected multiple cards — for example, to add video clips to a sequence — use ordered selection. Ordered selection must be multi-selectable.
+ */
 export const OrderedSelection = Template.bind({});
 OrderedSelection.args = {
 	title: "Ordered selection",
@@ -177,6 +201,7 @@ OrderedSelection.tags = ["!dev"];
 OrderedSelection.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+OrderedSelection.storyName = "Selection - ordered";
 
 export const DropTarget = Template.bind({});
 DropTarget.args = {
@@ -190,6 +215,7 @@ DropTarget.tags = ["!dev"];
 DropTarget.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+DropTarget.storyName = "Drop target";
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = AssetCardGroup.bind({});
diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js
index 1b44be4e56..864fcd951b 100644
--- a/components/assetcard/stories/template.js
+++ b/components/assetcard/stories/template.js
@@ -8,6 +8,9 @@ import { when } from "lit/directives/when.js";
 import { camelCase } from "lodash-es";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-AssetCard",
diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css
index ce7b1ac4ea..63115538f1 100644
--- a/components/assetcard/themes/express.css
+++ b/components/assetcard/themes/express.css
@@ -11,12 +11,12 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-AssetCard {
-		--spectrum-assetcard-overlay-background-color: rgb(109 115 246 / 20%);
+		--spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%);
 	}
 }
diff --git a/components/assetcard/themes/spectrum-two.css b/components/assetcard/themes/spectrum-two.css
new file mode 100644
index 0000000000..f38045fb75
--- /dev/null
+++ b/components/assetcard/themes/spectrum-two.css
@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-AssetCard {
+		--spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
+		--spectrum-assetcard-background-color: var(--spectrum-gray-75);
+		--spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9);
+		--spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300);
+	}
+}
diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css
index d3b3caf11c..c3e7ef9e0a 100644
--- a/components/assetcard/themes/spectrum.css
+++ b/components/assetcard/themes/spectrum.css
@@ -11,8 +11,15 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-AssetCard {
 		--spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
+		--spectrum-assetcard-background-color: var(--spectrum-gray-200);
+		--spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9);
+		--spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200);
 	}
 }
diff --git a/components/assetlist/metadata/metadata.json b/components/assetlist/dist/metadata.json
similarity index 96%
rename from components/assetlist/metadata/metadata.json
rename to components/assetlist/dist/metadata.json
index 2de86c3120..6aa102a6dc 100644
--- a/components/assetlist/metadata/metadata.json
+++ b/components/assetlist/dist/metadata.json
@@ -82,8 +82,8 @@
   "global": [
     "--spectrum-animation-duration-100",
     "--spectrum-font-size-100",
+    "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-300",
     "--spectrum-logical-rotation",
     "--spectrum-neutral-content-color-default",
     "--spectrum-regular-font-weight",
@@ -93,7 +93,10 @@
     "--spectrum-spacing-600",
     "--spectrum-spacing-75"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-asset-list-item-background-color-down",
+    "--system-asset-list-item-background-color-hover"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-assetlist-border-color-key-focus",
diff --git a/components/assetlist/index.css b/components/assetlist/index.css
index eb3a7f027f..742070edbd 100644
--- a/components/assetlist/index.css
+++ b/components/assetlist/index.css
@@ -11,6 +11,8 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 .spectrum-AssetList {
 	--spectrum-assetlist-width: 272px;
 	--spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100);
@@ -24,8 +26,6 @@
 	--spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100);
 	--spectrum-assetlist-item-font-size: var(--spectrum-font-size-100);
 	--spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight);
-	--spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300);
-	--spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200);
 
 	/* thumbnail */
 	--spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400);
@@ -36,15 +36,13 @@
 	--spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
 	--spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
 
-	&:dir(rtl) {
-		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-	}
-}
-
-.spectrum-AssetList {
 	margin-block-start: 0;
 	margin-block-end: 0;
 	padding: 0;
+
+	&:dir(rtl) {
+		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+	}
 }
 
 .spectrum-AssetList-item {
@@ -159,7 +157,7 @@
 .spectrum-AssetList-itemChildIndicator {
 	display: none;
 	transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation));
-	transform: var(--spectrum-logical-rotation);
+	transform: var(--spectrum-logical-rotation,);
 }
 
 .spectrum-AssetList-itemLabel {
diff --git a/components/assetlist/metadata/mods.md b/components/assetlist/metadata/mods.md
deleted file mode 100644
index 2b5081cf59..0000000000
--- a/components/assetlist/metadata/mods.md
+++ /dev/null
@@ -1,22 +0,0 @@
-| Modifiable custom properties                           |
-| ------------------------------------------------------ |
-| `--mod-assetlist-border-color-key-focus`               |
-| `--mod-assetlist-child-indicator-animation`            |
-| `--mod-assetlist-item-animation`                       |
-| `--mod-assetlist-item-background-color-down`           |
-| `--mod-assetlist-item-background-color-hover`          |
-| `--mod-assetlist-item-background-color-selected`       |
-| `--mod-assetlist-item-background-color-selected-hover` |
-| `--mod-assetlist-item-border-radius`                   |
-| `--mod-assetlist-item-font-size`                       |
-| `--mod-assetlist-item-font-weight`                     |
-| `--mod-assetlist-item-height`                          |
-| `--mod-assetlist-item-label-padding-inline-start`      |
-| `--mod-assetlist-item-margin-bottom`                   |
-| `--mod-assetlist-item-padding-inline-end`              |
-| `--mod-assetlist-item-padding-inline-start`            |
-| `--mod-assetlist-label-color`                          |
-| `--mod-assetlist-thumbnail-margin-left`                |
-| `--mod-assetlist-thumbnail-width`                      |
-| `--mod-assetlist-thumnail-height`                      |
-| `--mod-assetlist-width`                                |
diff --git a/components/assetlist/package.json b/components/assetlist/package.json
index 49e16c0300..dad435caab 100644
--- a/components/assetlist/package.json
+++ b/components/assetlist/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js
index f83219d77c..d421267b95 100644
--- a/components/assetlist/stories/assetlist.stories.js
+++ b/components/assetlist/stories/assetlist.stories.js
@@ -1,6 +1,6 @@
 import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { AssetListGroup } from "./assetlist.test.js";
 
diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js
index e126ff1ec8..96d8f75a80 100644
--- a/components/assetlist/stories/template.js
+++ b/components/assetlist/stories/template.js
@@ -7,6 +7,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const AssetListItem = ({
 	rootClass = "spectrum-AssetList-item",
@@ -21,7 +24,7 @@ export const AssetListItem = ({
 	isSelected = false,
 	isBranch = false,
 	onclick = () => {},
-}) => html`
+} = {}, context = {}) => html`
 	<li
 		class=${classMap({
 			[rootClass]: true,
@@ -40,7 +43,7 @@ export const AssetListItem = ({
 				ariaLabelledby,
 				id: checkboxId,
 				customClasses: [`${rootClass}Selector`],
-			})
+			}, context)
 		)}
 		${when(image, () => 
 			html`<img src=${image} class="${rootClass}Thumbnail" alt="asset image thumbnail" />`
@@ -50,7 +53,7 @@ export const AssetListItem = ({
 				iconName,
 				setName: iconSet,
 				customClasses: [`${rootClass}Thumbnail`],
-			})
+			}, context)
 		)}
 		${when(label, () => html`<span class="${rootClass}Label">${label}</span>`)}
 		${when(!isSelectable && !isBranch, () =>
@@ -60,13 +63,13 @@ export const AssetListItem = ({
 				ariaLabelledby,
 				id: checkboxId,
 				customClasses: [`${rootClass}Selector`],
-			}))}
+			}, context))}
 		${when(isBranch, () =>
 			Icon({
 				iconName: "ChevronRight100",
 				setName: "ui",
 				customClasses: [`${rootClass}ChildIndicator`],
-			})
+			}, context)
 		)}
 	</li>
 `;
diff --git a/components/assetlist/themes/express.css b/components/assetlist/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/assetlist/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/assetlist/themes/spectrum-two.css b/components/assetlist/themes/spectrum-two.css
new file mode 100644
index 0000000000..0624623caf
--- /dev/null
+++ b/components/assetlist/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-AssetList {
+		--spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200);
+		--spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100);
+	}
+}
diff --git a/components/assetlist/themes/spectrum.css b/components/assetlist/themes/spectrum.css
new file mode 100644
index 0000000000..30f67757c2
--- /dev/null
+++ b/components/assetlist/themes/spectrum.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-AssetList {
+		--spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300);
+		--spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200);
+	}
+}
diff --git a/components/avatar/metadata/metadata.json b/components/avatar/dist/metadata.json
similarity index 100%
rename from components/avatar/metadata/metadata.json
rename to components/avatar/dist/metadata.json
diff --git a/components/avatar/metadata/mods.md b/components/avatar/metadata/mods.md
deleted file mode 100644
index ec5bc8755c..0000000000
--- a/components/avatar/metadata/mods.md
+++ /dev/null
@@ -1,10 +0,0 @@
-| Modifiable custom properties             |
-| ---------------------------------------- |
-| `--mod-avatar-block-size`                |
-| `--mod-avatar-border-radius`             |
-| `--mod-avatar-color-opacity`             |
-| `--mod-avatar-color-opacity-disabled`    |
-| `--mod-avatar-focus-indicator-color`     |
-| `--mod-avatar-focus-indicator-gap`       |
-| `--mod-avatar-focus-indicator-thickness` |
-| `--mod-avatar-inline-size`               |
diff --git a/components/avatar/package.json b/components/avatar/package.json
index 4b64dd88a3..0b49ae3a3f 100644
--- a/components/avatar/package.json
+++ b/components/avatar/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/avatar/stories/avatar.mdx b/components/avatar/stories/avatar.mdx
deleted file mode 100644
index f25de9a1cf..0000000000
--- a/components/avatar/stories/avatar.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-import * as AvatarStories from "./avatar.stories";
-
-<Meta of={AvatarStories} title="Docs" />
-
-<Title of={AvatarStories} />
-<Subtitle of={AvatarStories} />
-<ComponentDetails />
-
-<Description of={AvatarStories} />
-
-<Canvas of={AvatarStories.Default} />
-
-## Sizes
-
-Avatar is available in many sizes using the required `.spectrum-Avatar--size<number>` class. The available size classes are:
-
-- `spectrum-Avatar--size50`
-- `spectrum-Avatar--size75`
-- `spectrum-Avatar--size100`
-- `spectrum-Avatar--size200`
-- `spectrum-Avatar--size300`
-- `spectrum-Avatar--size400`
-- `spectrum-Avatar--size500`
-- `spectrum-Avatar--size600`
-- `spectrum-Avatar--size700`
-
-<Canvas of={AvatarStories.SizeOptions} />
-
-## No Link
-
-An avatar image is wrapped in a link that uses the `.spectrum-Avatar-link` class by default, however, an avatar may also be used without a link.
-
-<Canvas of={AvatarStories.NoLink} />
-
-## Disabled
-
-When disabled, the avatar should only be used without a link.
-
-<Canvas of={AvatarStories.Disabled} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js
index 0c40951b2a..3ef54b07b7 100644
--- a/components/avatar/stories/avatar.stories.js
+++ b/components/avatar/stories/avatar.stories.js
@@ -1,18 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { AvatarGroup } from "./avatar.test.js";
 import { Template } from "./template.js";
 
 /**
- * An image representing a user. Note that a div wrapper is required for avatar:
- * ```
- * <div class="spectrum-Avatar spectrum-Avatar--size50">
- *   <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
- * </div>
- * ```
+ * An image representing a user.
  */
 export default {
 	title: "Avatar",
@@ -58,28 +53,56 @@ export default {
 		altText: "Shantanu",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=19100-131",
+		},
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
+/**
+ * Note that a `div` wrapper is required for avatar:
+ * ```
+ * <div class="spectrum-Avatar spectrum-Avatar--size50">
+ *   <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ * </div>
+ * ```
+ */
 export const Default = AvatarGroup.bind({});
 Default.args = {};
 
 // ********* DOCS ONLY ********* //
-export const SizeOptions = (args, context) => Sizes({
+/** Avatar sizes scale exponentially, based on the Spectrum type scale. These range from size-50 to size-700, with the default size for an avatar being `100`. An avatar can also be customized to fit appropriately for your context.
+ *
+ * Avatar is available in many sizes using the required `.spectrum-Avatar--size<number>` class. The available size classes are:
+
+- `spectrum-Avatar--size50`
+- `spectrum-Avatar--size75`
+- `spectrum-Avatar--size100`
+- `spectrum-Avatar--size200`
+- `spectrum-Avatar--size300`
+- `spectrum-Avatar--size400`
+- `spectrum-Avatar--size500`
+- `spectrum-Avatar--size600`
+- `spectrum-Avatar--size700`
+*/
+export const Sizing = (args, context) => Sizes({
 	Template,
 	withHeading: false,
 	withBorder: false,
 	...args
 }, context);
-SizeOptions.tags = ["!dev"];
-SizeOptions.args = Default.args;
-SizeOptions.parameters = {
+Sizing.tags = ["!dev"];
+Sizing.args = Default.args;
+Sizing.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * An avatar image is wrapped in a link that uses the `.spectrum-Avatar-link` class by default, however, an avatar may also be used without a link.
+ */
 export const NoLink = Template.bind({});
 NoLink.tags = ["!dev"];
 NoLink.args = {
@@ -90,7 +113,10 @@ NoLink.args = {
 NoLink.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+NoLink.storyName = "No link";
 
+/**
+ * When disabled, the avatar should only be used without a link.*/
 export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];
 Disabled.args = {
diff --git a/components/avatar/stories/avatar.test.js b/components/avatar/stories/avatar.test.js
index 4d18b20d44..716696f37c 100644
--- a/components/avatar/stories/avatar.test.js
+++ b/components/avatar/stories/avatar.test.js
@@ -9,6 +9,7 @@ export const AvatarGroup = Variants({
 	}, {
 		testHeading: "Disabled",
 		isDisabled: true,
+		hasLink: false,
 	}, {
 		testHeading: "Focused",
 		isFocused: true,
diff --git a/components/badge/metadata/metadata.json b/components/badge/dist/metadata.json
similarity index 100%
rename from components/badge/metadata/metadata.json
rename to components/badge/dist/metadata.json
diff --git a/components/badge/index.css b/components/badge/index.css
index 33874bee37..bf4e458aca 100644
--- a/components/badge/index.css
+++ b/components/badge/index.css
@@ -193,6 +193,7 @@
 	background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive));
 }
 
+/* New in S2, not supporting in Foundations yet! */
 .spectrum-Badge--notice {
 	background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice));
 }
diff --git a/components/badge/metadata/mods.md b/components/badge/metadata/mods.md
deleted file mode 100644
index 09a243c9c5..0000000000
--- a/components/badge/metadata/mods.md
+++ /dev/null
@@ -1,36 +0,0 @@
-| Modifiable custom properties                |
-| ------------------------------------------- |
-| `--mod-badge-background-color-accent`       |
-| `--mod-badge-background-color-blue`         |
-| `--mod-badge-background-color-celery`       |
-| `--mod-badge-background-color-chartreuse`   |
-| `--mod-badge-background-color-cyan`         |
-| `--mod-badge-background-color-default`      |
-| `--mod-badge-background-color-fuchsia`      |
-| `--mod-badge-background-color-gray`         |
-| `--mod-badge-background-color-green`        |
-| `--mod-badge-background-color-indigo`       |
-| `--mod-badge-background-color-informative`  |
-| `--mod-badge-background-color-magenta`      |
-| `--mod-badge-background-color-negative`     |
-| `--mod-badge-background-color-notice`       |
-| `--mod-badge-background-color-orange`       |
-| `--mod-badge-background-color-positive`     |
-| `--mod-badge-background-color-purple`       |
-| `--mod-badge-background-color-red`          |
-| `--mod-badge-background-color-seafoam`      |
-| `--mod-badge-background-color-yellow`       |
-| `--mod-badge-corner-radius`                 |
-| `--mod-badge-font-size`                     |
-| `--mod-badge-height`                        |
-| `--mod-badge-icon-only-spacing-horizontal`  |
-| `--mod-badge-icon-spacing-horizontal`       |
-| `--mod-badge-icon-spacing-vertical-top`     |
-| `--mod-badge-icon-text-spacing`             |
-| `--mod-badge-label-icon-color`              |
-| `--mod-badge-label-spacing-horizontal`      |
-| `--mod-badge-label-spacing-vertical-bottom` |
-| `--mod-badge-label-spacing-vertical-top`    |
-| `--mod-badge-line-height`                   |
-| `--mod-badge-line-height-cjk`               |
-| `--mod-badge-workflow-icon-size`            |
diff --git a/components/badge/package.json b/components/badge/package.json
index b3b4c004e2..016a7f6ab8 100644
--- a/components/badge/package.json
+++ b/components/badge/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/badge/stories/badge.mdx b/components/badge/stories/badge.mdx
deleted file mode 100644
index e6587039ca..0000000000
--- a/components/badge/stories/badge.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as BadgeStories from "./badge.stories";
-
-<Meta of={BadgeStories} title="Docs" />
-
-<Title of={BadgeStories} />
-<Subtitle of={BadgeStories} />
-<ComponentDetails />
-
-<Description of={BadgeStories} />
-
-## Default
-
-Badges can contain label, icon, or label and icon. Text wrapping is also included when a `max-width` is applied to the badge.
-
-<Canvas of={BadgeStories.Default} />
-
-## Semantic
-
-<Canvas of={BadgeStories.SemanticVariants} />
-
-## Non-semantic
-
-<Canvas of={BadgeStories.NonSemanticVariants} />
-
-## Fixed edge
-
-The border radius is 0 along the fixed edge of the component. The actual component position is not represented on this page.
-
-<Canvas of={BadgeStories.FixedVariants} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js
index 80b5abeb2a..fb9961227a 100644
--- a/components/badge/stories/badge.stories.js
+++ b/components/badge/stories/badge.stories.js
@@ -1,20 +1,17 @@
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
+import { ArgGrid } from "@spectrum-css/preview/decorators";
+import { Sizes } from "@spectrum-css/preview/decorators/utilities.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { BadgeGroup } from "./badge.test.js";
-import { PreviewSets } from "./template.js";
+import { ContentOptions, Template } from "./template.js";
 
-const semanticOptions = ["neutral", "accent", "informative", "positive", "negative"];
-const nonSemanticOptions = ["gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"];
-const fixedOptions = ["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"];
 /**
  * A badge element displays a small amount of color-categorized metadata; ideal for getting a user's attention. Some notes about badge:
- * - Badge t-shirt sizes correspond to icon sizes
- * - Label and icon elements must be nested inside a parent container of class .spectrum-Badge in order to achieve the correct layout and wrapping behavior.
- * - Layout of Badge is applied with a display of `inline-flex`, allowing badge to display as inline while the child elements for the label and icon utilize flexbox for layout.
- * - Fixed positioning impacts the border radius of the badge component
+ * - Label and icon elements must be nested inside a parent container of class `.spectrum-Badge` in order to achieve the correct layout and wrapping behavior.
+ * - The layout of badge is achieved by applying a display of `inline-flex`, allowing badge to display as inline, while the label and/or icon child elements can utilize flexbox for layout.
  */
 export default {
 	title: "Badge",
@@ -36,7 +33,8 @@ export default {
 		},
 		iconSet: { table: { disable: true } },
 		variant: {
-			name: "Background color variants",
+			name: "Variants",
+			description: "Changes the badge's background color. The variant list includes both semantic and non-semantic options.",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
@@ -52,7 +50,7 @@ export default {
 				type: { summary: "string" },
 				category: "Advanced",
 			},
-			options: fixedOptions,
+			options: ["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"],
 			control: "select",
 		},
 	},
@@ -64,12 +62,18 @@ export default {
 		fixed: "none"
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551",
+		},
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
+/**
+ * Badges can contain label, icon, or label and icon. Text wrapping is also included when a `max-inline-size` is applied to the badge.
+ */
 export const Default = BadgeGroup.bind({});
 Default.args = {
 	iconName: "Info",
@@ -77,23 +81,65 @@ Default.args = {
 };
 
 // ********* DOCS ONLY ********* //
-export const SemanticVariants = (args, context) => PreviewSets(semanticOptions, args, context);
+export const SemanticVariants = (args, context) => ArgGrid({
+	Template,
+	argKey: "variant",
+	options: ["neutral", "accent", "informative", "positive", "negative"],
+	withBorder: false,
+	...args,
+}, context);
+SemanticVariants.args = Default.args;
 SemanticVariants.tags = ["!dev"];
 SemanticVariants.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+SemanticVariants.storyName = "Semantic";
 
-export const NonSemanticVariants = (args, context) => PreviewSets(nonSemanticOptions, args, context);
+export const NonSemanticVariants = (args, context) => ArgGrid({
+	Template,
+	argKey: "variant",
+	options: ["gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"],
+	withBorder: false,
+	...args,
+}, context);
+NonSemanticVariants.args = Default.args;
 NonSemanticVariants.tags = ["!dev"];
 NonSemanticVariants.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+NonSemanticVariants.storyName = "Non-semantic";
 
-export const FixedVariants = (args, context) => PreviewSets(fixedOptions, args, context);
+/**
+ * Fixed positioning impacts the border radius of the badge component. The border radius is 0 along the fixed edge of the component. The actual component position is not represented on this page.
+ */
+export const FixedVariants = (args, context) => ArgGrid({
+	Template,
+	argKey: "fixed",
+	options: ["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"],
+	withBorder: false,
+	...args,
+}, context);
+FixedVariants.args = Default.args;
 FixedVariants.tags = ["!dev"];
 FixedVariants.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+FixedVariants.storyName = "Fixed-edge";
+
+/**
+ * Badge t-shirt sizes correspond to icon sizes.
+ */
+export const Sizing = (args, context) => Sizes({
+	Template: ContentOptions,
+	withBorder: false,
+	withHeading: false,
+	...args,
+}, context);
+Sizing.args = Default.args;
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Sizing.tags = ["!dev"];
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = BadgeGroup.bind({});
diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js
index bcaba99326..ee071e455f 100644
--- a/components/badge/stories/template.js
+++ b/components/badge/stories/template.js
@@ -1,11 +1,10 @@
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
-import { capitalize } from "lodash-es";
 
 import "../index.css";
 
@@ -20,53 +19,43 @@ export const Template = ({
 	customStyles = {},
 	customClasses = [],
 	id = getRandomId("badge"),
-}) => html`
-  <div
-	class=${classMap({
-		[rootClass]: true,
-		[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
-		[`${rootClass}--${variant}`]: typeof variant !== "undefined",
-		[`${rootClass}--${fixed}`]: typeof fixed !== "undefined",
-		...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-	})}
-	id=${ifDefined(id)}
-	style=${styleMap(customStyles)}
-  >
-	${when(iconName, () =>
-		Icon({
-			iconName,
-			setName: iconSet,
-			customClasses: [
-				...(typeof label === "undefined"
-				? [`${rootClass}-icon--no-label`]
-				: []),
-				`${rootClass}-icon`,
-			],
-		})
-	)}
-	${when(label, () => html`<div class="${rootClass}-label">${label}</div>`)}
-  </div>
-`;
+} = {}, context = {}) => {
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--size${size?.toUpperCase()}`]:
+					typeof size !== "undefined",
+				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
+				[`${rootClass}--${fixed}`]: typeof fixed !== "undefined",
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			id=${ifDefined(id)}
+			style=${styleMap(customStyles)}
+		>
+			${when(iconName, () =>
+				Icon({
+					iconName,
+					setName: iconSet,
+					customClasses: [
+						...(typeof label === "undefined"
+							? [`${rootClass}-icon--no-label`]
+							: []),
+						`${rootClass}-icon`,
+					],
+				}, context),
+			)}
+			${when(label, () => html`<div class="${rootClass}-label">${label}</div>`)}
+		</div>
+	`;
+};
 
-export const PreviewSets = (variants, args, context) => html`
-	<div
-		style=${styleMap({
-			"display": "flex",
-			"gap": "16px",
-			"flex-wrap": "wrap"
-		})}
-	>
-		${variants.map((variant) => html`
-			<div
-				style=${styleMap({
-					"display": "flex",
-					"gap": "16px",
-					"flex-direction": "column",
-					"align-items": "center",
-				})}
-			>
-				${Template({ ...args, variant, label: capitalize(variant) }, context)}
-			</div>
-		`)}
-	</div>
-`;
+/* Displays icon-only, text-only, and icon-and-text badge options. */
+export const ContentOptions = (args, context) => Container({
+	withBorder: false,
+	content: [
+		Template(args, context),
+		Template({ ...args, iconName: undefined }, context),
+		Template({ ...args, label: undefined }, context),
+	]
+});
diff --git a/components/breadcrumb/metadata/metadata.json b/components/breadcrumb/dist/metadata.json
similarity index 100%
rename from components/breadcrumb/metadata/metadata.json
rename to components/breadcrumb/dist/metadata.json
diff --git a/components/breadcrumb/metadata/mods.md b/components/breadcrumb/metadata/mods.md
deleted file mode 100644
index 2cdbc38c54..0000000000
--- a/components/breadcrumb/metadata/mods.md
+++ /dev/null
@@ -1,56 +0,0 @@
-| Modifiable custom properties                                      |
-| ----------------------------------------------------------------- |
-| `--mod-breadcrumbs-action-button-color`                           |
-| `--mod-breadcrumbs-action-button-color-disabled`                  |
-| `--mod-breadcrumbs-action-button-spacing-block`                   |
-| `--mod-breadcrumbs-action-button-spacing-block-between-multiline` |
-| `--mod-breadcrumbs-action-button-spacing-block-compact`           |
-| `--mod-breadcrumbs-action-button-spacing-block-multiline`         |
-| `--mod-breadcrumbs-action-button-spacing-inline`                  |
-| `--mod-breadcrumbs-action-button-spacing-inline-start`            |
-| `--mod-breadcrumbs-block-size`                                    |
-| `--mod-breadcrumbs-block-size-compact`                            |
-| `--mod-breadcrumbs-block-size-multiline`                          |
-| `--mod-breadcrumbs-focus-indicator-color`                         |
-| `--mod-breadcrumbs-focus-indicator-gap`                           |
-| `--mod-breadcrumbs-focus-indicator-thickness`                     |
-| `--mod-breadcrumbs-font-family`                                   |
-| `--mod-breadcrumbs-font-family-compact`                           |
-| `--mod-breadcrumbs-font-family-compact-current`                   |
-| `--mod-breadcrumbs-font-family-current`                           |
-| `--mod-breadcrumbs-font-family-multiline`                         |
-| `--mod-breadcrumbs-font-family-multiline-current`                 |
-| `--mod-breadcrumbs-font-size`                                     |
-| `--mod-breadcrumbs-font-size-compact`                             |
-| `--mod-breadcrumbs-font-size-compact-current`                     |
-| `--mod-breadcrumbs-font-size-current`                             |
-| `--mod-breadcrumbs-font-size-multiline`                           |
-| `--mod-breadcrumbs-font-size-multiline-current`                   |
-| `--mod-breadcrumbs-font-weight`                                   |
-| `--mod-breadcrumbs-font-weight-compact`                           |
-| `--mod-breadcrumbs-font-weight-compact-current`                   |
-| `--mod-breadcrumbs-font-weight-current`                           |
-| `--mod-breadcrumbs-font-weight-multiline`                         |
-| `--mod-breadcrumbs-font-weight-multiline-current`                 |
-| `--mod-breadcrumbs-icon-spacing-block`                            |
-| `--mod-breadcrumbs-icon-spacing-block-between-multiline`          |
-| `--mod-breadcrumbs-icon-spacing-block-compact`                    |
-| `--mod-breadcrumbs-icon-spacing-block-start-multiline`            |
-| `--mod-breadcrumbs-inline-end`                                    |
-| `--mod-breadcrumbs-inline-start`                                  |
-| `--mod-breadcrumbs-item-link-border-radius`                       |
-| `--mod-breadcrumbs-line-height`                                   |
-| `--mod-breadcrumbs-separator-color`                               |
-| `--mod-breadcrumbs-separator-spacing-inline`                      |
-| `--mod-breadcrumbs-text-color`                                    |
-| `--mod-breadcrumbs-text-color-current`                            |
-| `--mod-breadcrumbs-text-color-disabled`                           |
-| `--mod-breadcrumbs-text-decoration-gap`                           |
-| `--mod-breadcrumbs-text-decoration-thickness`                     |
-| `--mod-breadcrumbs-text-spacing-block-between-multiline`          |
-| `--mod-breadcrumbs-text-spacing-block-end`                        |
-| `--mod-breadcrumbs-text-spacing-block-end-compact`                |
-| `--mod-breadcrumbs-text-spacing-block-end-multiline`              |
-| `--mod-breadcrumbs-text-spacing-block-start`                      |
-| `--mod-breadcrumbs-text-spacing-block-start-compact`              |
-| `--mod-breadcrumbs-text-spacing-block-start-multiline`            |
diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json
index 6c274091ac..0e0c4154b5 100644
--- a/components/breadcrumb/package.json
+++ b/components/breadcrumb/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js
index 99377515b3..a25c76c285 100644
--- a/components/breadcrumb/stories/breadcrumb.stories.js
+++ b/components/breadcrumb/stories/breadcrumb.stories.js
@@ -1,6 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDragged } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { BreadcrumbGroup } from "./breadcrumb.test.js";
 import { Template } from "./template.js";
@@ -41,6 +41,10 @@ export default {
 		variant: "default",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=29434-6624",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js
index 3ebf606e5e..3f0db2ad30 100644
--- a/components/breadcrumb/stories/template.js
+++ b/components/breadcrumb/stories/template.js
@@ -7,79 +7,80 @@ import { when } from "lit/directives/when.js";
 
 import "../index.css";
 
-export const Template = (
-	{
-		rootClass = "spectrum-Breadcrumbs",
-		customClasses = [],
-		items = [],
-		variant,
-		isDragged = false,
-	} = {},
-	context = {},
-) => html`
-	<nav>
-		<ul
-			class=${classMap({
-				[rootClass]: true,
-				[`${rootClass}--${variant}`]: typeof variant !== "undefined" || variant !== "default",
-				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-			})}
-		>
-			${items.map((item, idx, arr) => {
-				const { label, isDisabled, iconName, iconSet } = item;
-				return html` <li
-					class=${classMap({
-						[`${rootClass}-item`]: true,
-						"is-dragged": isDragged && item.isDragged,
-					})}
-				>
-					${when(
-						iconName,
-						() =>
-							ActionButton(
+export const Template = ({
+	rootClass = "spectrum-Breadcrumbs",
+	customClasses = [],
+	items = [],
+	variant,
+	isDragged = false,
+} = {}, context = {}) => {
+	return html`
+		<nav>
+			<ul
+				class=${classMap({
+					[rootClass]: true,
+					[`${rootClass}--${variant}`]: typeof variant !== "undefined",
+					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+				})}
+			>
+				${items.map((item, idx, arr) => {
+					const { label, isDisabled, iconName, iconSet } = item;
+					return html` <li
+						class=${classMap({
+							[`${rootClass}-item`]: true,
+							"is-dragged": isDragged && item.isDragged,
+						})}
+					>
+						${when(
+							iconName,
+							() =>
+								ActionButton(
+									{
+										iconName,
+										iconSet,
+										isDisabled,
+										isQuiet: true,
+										customIconClasses: [`${rootClass}-folder`],
+										size: "m",
+									},
+									context,
+								),
+							() =>
+								when(
+									idx !== arr.length - 1,
+									() =>
+										html`<div
+											class=${classMap({
+												[`${rootClass}-itemLink`]: true,
+												"is-disabled": isDisabled,
+											})}
+											aria-disabled=${ifDefined(
+												isDisabled ? "true" : undefined,
+											)}
+											role="link"
+											tabindex=${ifDefined(!isDisabled ? "0" : undefined)}
+										>
+											${label}
+										</div>`,
+									() =>
+										html`<a class="${rootClass}-itemLink" aria-current="page"
+											>${label}</a
+										>`,
+								),
+						)}
+						${when(idx !== arr.length - 1, () =>
+							Icon(
 								{
-									iconName,
-									iconSet,
-									isDisabled,
-									isQuiet: true,
-									customIconClasses: [`${rootClass}-folder`],
-									size: "m",
+									iconName: "ChevronRight100",
+									setName: "ui",
+									customClasses: [`${rootClass}-itemSeparator`],
 								},
 								context,
 							),
-						() =>
-							when(
-								idx !== arr.length - 1,
-								() =>
-									html`<div
-										class=${classMap({
-											[`${rootClass}-itemLink`]: true,
-											"is-disabled": isDisabled,
-										})}
-										aria-disabled=${ifDefined(isDisabled ? "true" : undefined)}
-										role="link"
-										tabindex=${ifDefined(!isDisabled ? "0" : undefined)}
-									>
-										${label}
-									</div>`,
-								() =>
-									html`<a class="${rootClass}-itemLink" aria-current="page"
-										>${label}</a
-									>`,
-							),
-					)}
-					${when(idx !== arr.length - 1, () =>
-						Icon(
-							{
-								iconName: "ChevronRight100",
-								setName: "ui",
-								customClasses: [`${rootClass}-itemSeparator`],
-							},
-							context,
-						),
-					)}
-				</li>`;
-			})}
-		</ul>
-	</nav>
-`;
+						)}
+					</li>`;
+				})}
+			</ul>
+		</nav>
+	`;
+};
diff --git a/components/button/metadata/metadata.json b/components/button/dist/metadata.json
similarity index 52%
rename from components/button/metadata/metadata.json
rename to components/button/dist/metadata.json
index fab6be5ef6..1a77f387fc 100644
--- a/components/button/metadata/metadata.json
+++ b/components/button/dist/metadata.json
@@ -11,12 +11,9 @@
     ".spectrum-Button--sizeM",
     ".spectrum-Button--sizeS",
     ".spectrum-Button--sizeXL",
-    ".spectrum-Button--staticBlack",
-    ".spectrum-Button--staticWhite",
     ".spectrum-Button-label",
     ".spectrum-Button-label:empty",
     ".spectrum-Button.is-disabled",
-    ".spectrum-Button.is-focused",
     ".spectrum-Button.is-focused:after",
     ".spectrum-Button.is-pending",
     ".spectrum-Button.is-pending .spectrum-Button-label",
@@ -32,22 +29,31 @@
     ".spectrum-Button.spectrum-Button--iconOnly:after",
     ".spectrum-Button.spectrum-Button--negative",
     ".spectrum-Button.spectrum-Button--negative.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--outline",
     ".spectrum-Button.spectrum-Button--primary",
     ".spectrum-Button.spectrum-Button--primary.spectrum-Button--outline",
     ".spectrum-Button.spectrum-Button--quiet",
     ".spectrum-Button.spectrum-Button--secondary",
     ".spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--secondary:not(.spectrum-Button--outline)",
     ".spectrum-Button.spectrum-Button--staticBlack",
+    ".spectrum-Button.spectrum-Button--staticBlack.is-selected",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary)",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary:not(.spectrum-Button--outline)",
     ".spectrum-Button.spectrum-Button--staticWhite",
     ".spectrum-Button.spectrum-Button--staticWhite.is-selected",
+    ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--accent",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary",
+    ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary)",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary:not(.spectrum-Button--outline)",
     ".spectrum-Button::-moz-focus-inner",
     ".spectrum-Button:active",
     ".spectrum-Button:after",
@@ -87,6 +93,8 @@
     "--mod-button-edge-to-text",
     "--mod-button-edge-to-visual",
     "--mod-button-edge-to-visual-only",
+    "--mod-button-focus-indicator-gap",
+    "--mod-button-focus-ring-border-radius",
     "--mod-button-focus-ring-color",
     "--mod-button-focus-ring-gap",
     "--mod-button-focus-ring-thickness",
@@ -139,7 +147,6 @@
     "--spectrum-button-edge-to-visual",
     "--spectrum-button-edge-to-visual-only",
     "--spectrum-button-focus-indicator-color",
-    "--spectrum-button-focus-ring-border-radius",
     "--spectrum-button-focus-ring-gap",
     "--spectrum-button-focus-ring-thickness",
     "--spectrum-button-font-size",
@@ -149,6 +156,15 @@
     "--spectrum-button-min-width",
     "--spectrum-button-minimum-width-multiplier",
     "--spectrum-button-padding-label-to-icon",
+    "--spectrum-button-sized-bottom-to-text",
+    "--spectrum-button-sized-edge-to-text",
+    "--spectrum-button-sized-edge-to-visual",
+    "--spectrum-button-sized-edge-to-visual-only",
+    "--spectrum-button-sized-font-size",
+    "--spectrum-button-sized-height",
+    "--spectrum-button-sized-padding-label-to-icon",
+    "--spectrum-button-sized-top-to-icon",
+    "--spectrum-button-sized-top-to-text",
     "--spectrum-button-top-to-icon",
     "--spectrum-button-top-to-text",
     "--spectrum-button-top-to-text-extra-large",
@@ -210,12 +226,14 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
+    "--spectrum-gray-100",
     "--spectrum-gray-200",
+    "--spectrum-gray-25",
     "--spectrum-gray-300",
     "--spectrum-gray-400",
+    "--spectrum-gray-50",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
-    "--spectrum-gray-75",
     "--spectrum-gray-800",
     "--spectrum-gray-900",
     "--spectrum-icon-block-size",
@@ -253,57 +271,26 @@
     "--spectrum-text-to-visual-200",
     "--spectrum-text-to-visual-300",
     "--spectrum-text-to-visual-75",
-    "--spectrum-transparent-black-200",
+    "--spectrum-transparent-black-1000",
     "--spectrum-transparent-black-300",
     "--spectrum-transparent-black-400",
     "--spectrum-transparent-black-500",
     "--spectrum-transparent-black-600",
-    "--spectrum-transparent-black-800",
+    "--spectrum-transparent-black-700",
     "--spectrum-transparent-black-900",
-    "--spectrum-transparent-white-200",
+    "--spectrum-transparent-white-1000",
     "--spectrum-transparent-white-300",
     "--spectrum-transparent-white-400",
     "--spectrum-transparent-white-500",
-    "--spectrum-transparent-white-800",
+    "--spectrum-transparent-white-600",
     "--spectrum-transparent-white-900",
     "--spectrum-white",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-50",
     "--spectrum-workflow-icon-size-75"
   ],
   "system-theme": [
-    "--system-button-accent-background-color-default",
-    "--system-button-accent-background-color-disabled",
-    "--system-button-accent-background-color-down",
-    "--system-button-accent-background-color-focus",
-    "--system-button-accent-background-color-hover",
-    "--system-button-accent-border-color-default",
-    "--system-button-accent-border-color-disabled",
-    "--system-button-accent-border-color-down",
-    "--system-button-accent-border-color-focus",
-    "--system-button-accent-border-color-hover",
-    "--system-button-accent-content-color-default",
-    "--system-button-accent-content-color-disabled",
-    "--system-button-accent-content-color-down",
-    "--system-button-accent-content-color-focus",
-    "--system-button-accent-content-color-hover",
-    "--system-button-accent-outline-background-color-default",
-    "--system-button-accent-outline-background-color-disabled",
-    "--system-button-accent-outline-background-color-down",
-    "--system-button-accent-outline-background-color-focus",
-    "--system-button-accent-outline-background-color-hover",
-    "--system-button-accent-outline-border-color-default",
-    "--system-button-accent-outline-border-color-disabled",
-    "--system-button-accent-outline-border-color-down",
-    "--system-button-accent-outline-border-color-focus",
-    "--system-button-accent-outline-border-color-hover",
-    "--system-button-accent-outline-content-color-default",
-    "--system-button-accent-outline-content-color-disabled",
-    "--system-button-accent-outline-content-color-down",
-    "--system-button-accent-outline-content-color-focus",
-    "--system-button-accent-outline-content-color-hover",
     "--system-button-background-color-default",
     "--system-button-background-color-disabled",
     "--system-button-background-color-down",
@@ -314,277 +301,93 @@
     "--system-button-border-color-down",
     "--system-button-border-color-focus",
     "--system-button-border-color-hover",
-    "--system-button-content-color-default",
-    "--system-button-content-color-disabled",
-    "--system-button-content-color-down",
-    "--system-button-content-color-focus",
-    "--system-button-content-color-hover",
-    "--system-button-negative-background-color-default",
-    "--system-button-negative-background-color-disabled",
-    "--system-button-negative-background-color-down",
-    "--system-button-negative-background-color-focus",
-    "--system-button-negative-background-color-hover",
-    "--system-button-negative-border-color-default",
-    "--system-button-negative-border-color-disabled",
-    "--system-button-negative-border-color-down",
-    "--system-button-negative-border-color-focus",
-    "--system-button-negative-border-color-hover",
-    "--system-button-negative-content-color-default",
-    "--system-button-negative-content-color-disabled",
-    "--system-button-negative-content-color-down",
-    "--system-button-negative-content-color-focus",
-    "--system-button-negative-content-color-hover",
-    "--system-button-negative-outline-background-color-default",
-    "--system-button-negative-outline-background-color-disabled",
-    "--system-button-negative-outline-background-color-down",
-    "--system-button-negative-outline-background-color-focus",
-    "--system-button-negative-outline-background-color-hover",
-    "--system-button-negative-outline-border-color-default",
-    "--system-button-negative-outline-border-color-disabled",
-    "--system-button-negative-outline-border-color-down",
-    "--system-button-negative-outline-border-color-focus",
-    "--system-button-negative-outline-border-color-hover",
-    "--system-button-negative-outline-content-color-default",
-    "--system-button-negative-outline-content-color-disabled",
-    "--system-button-negative-outline-content-color-down",
-    "--system-button-negative-outline-content-color-focus",
-    "--system-button-negative-outline-content-color-hover",
-    "--system-button-primary-background-color-default",
-    "--system-button-primary-background-color-disabled",
-    "--system-button-primary-background-color-down",
-    "--system-button-primary-background-color-focus",
-    "--system-button-primary-background-color-hover",
-    "--system-button-primary-border-color-default",
-    "--system-button-primary-border-color-disabled",
-    "--system-button-primary-border-color-down",
-    "--system-button-primary-border-color-focus",
-    "--system-button-primary-border-color-hover",
     "--system-button-primary-content-color-default",
-    "--system-button-primary-content-color-disabled",
     "--system-button-primary-content-color-down",
     "--system-button-primary-content-color-focus",
     "--system-button-primary-content-color-hover",
-    "--system-button-primary-outline-background-color-default",
-    "--system-button-primary-outline-background-color-disabled",
     "--system-button-primary-outline-background-color-down",
     "--system-button-primary-outline-background-color-focus",
     "--system-button-primary-outline-background-color-hover",
-    "--system-button-primary-outline-border-color-default",
-    "--system-button-primary-outline-border-color-disabled",
-    "--system-button-primary-outline-border-color-down",
-    "--system-button-primary-outline-border-color-focus",
-    "--system-button-primary-outline-border-color-hover",
-    "--system-button-primary-outline-content-color-default",
-    "--system-button-primary-outline-content-color-disabled",
-    "--system-button-primary-outline-content-color-down",
-    "--system-button-primary-outline-content-color-focus",
-    "--system-button-primary-outline-content-color-hover",
-    "--system-button-quiet-background-color-default",
-    "--system-button-quiet-background-color-disabled",
-    "--system-button-quiet-background-color-down",
-    "--system-button-quiet-background-color-focus",
-    "--system-button-quiet-background-color-hover",
-    "--system-button-quiet-border-color-default",
-    "--system-button-quiet-border-color-disabled",
-    "--system-button-quiet-border-color-down",
-    "--system-button-quiet-border-color-focus",
-    "--system-button-quiet-border-color-hover",
     "--system-button-secondary-background-color-default",
-    "--system-button-secondary-background-color-disabled",
-    "--system-button-secondary-background-color-down",
-    "--system-button-secondary-background-color-focus",
-    "--system-button-secondary-background-color-hover",
-    "--system-button-secondary-border-color-default",
-    "--system-button-secondary-border-color-disabled",
-    "--system-button-secondary-border-color-down",
-    "--system-button-secondary-border-color-focus",
-    "--system-button-secondary-border-color-hover",
-    "--system-button-secondary-content-color-default",
-    "--system-button-secondary-content-color-disabled",
-    "--system-button-secondary-content-color-down",
-    "--system-button-secondary-content-color-focus",
-    "--system-button-secondary-content-color-hover",
-    "--system-button-secondary-outline-background-color-default",
-    "--system-button-secondary-outline-background-color-disabled",
+    "--system-button-secondary-not-outline-background-color-down",
+    "--system-button-secondary-not-outline-background-color-focus",
+    "--system-button-secondary-not-outline-background-color-hover",
     "--system-button-secondary-outline-background-color-down",
     "--system-button-secondary-outline-background-color-focus",
     "--system-button-secondary-outline-background-color-hover",
     "--system-button-secondary-outline-border-color-default",
-    "--system-button-secondary-outline-border-color-disabled",
-    "--system-button-secondary-outline-border-color-down",
-    "--system-button-secondary-outline-border-color-focus",
-    "--system-button-secondary-outline-border-color-hover",
-    "--system-button-secondary-outline-content-color-default",
-    "--system-button-secondary-outline-content-color-disabled",
-    "--system-button-secondary-outline-content-color-down",
-    "--system-button-secondary-outline-content-color-focus",
-    "--system-button-secondary-outline-content-color-hover",
     "--system-button-selected-background-color-default",
-    "--system-button-selected-background-color-disabled",
     "--system-button-selected-background-color-down",
     "--system-button-selected-background-color-focus",
     "--system-button-selected-background-color-hover",
-    "--system-button-selected-border-color-default",
-    "--system-button-selected-border-color-disabled",
-    "--system-button-selected-border-color-down",
-    "--system-button-selected-border-color-focus",
-    "--system-button-selected-border-color-hover",
-    "--system-button-selected-content-color-default",
-    "--system-button-selected-content-color-down",
-    "--system-button-selected-content-color-focus",
-    "--system-button-selected-content-color-hover",
-    "--system-button-selected-emphasized-background-color-default",
-    "--system-button-selected-emphasized-background-color-down",
-    "--system-button-selected-emphasized-background-color-focus",
-    "--system-button-selected-emphasized-background-color-hover",
     "--system-button-static-black-background-color-default",
-    "--system-button-static-black-background-color-disabled",
     "--system-button-static-black-background-color-down",
     "--system-button-static-black-background-color-focus",
     "--system-button-static-black-background-color-hover",
-    "--system-button-static-black-border-color-default",
-    "--system-button-static-black-border-color-disabled",
-    "--system-button-static-black-border-color-down",
-    "--system-button-static-black-border-color-focus",
-    "--system-button-static-black-border-color-hover",
     "--system-button-static-black-content-color-default",
-    "--system-button-static-black-content-color-disabled",
     "--system-button-static-black-content-color-down",
     "--system-button-static-black-content-color-focus",
     "--system-button-static-black-content-color-hover",
-    "--system-button-static-black-focus-indicator-color",
-    "--system-button-static-black-outline-background-color-default",
-    "--system-button-static-black-outline-background-color-disabled",
-    "--system-button-static-black-outline-background-color-down",
-    "--system-button-static-black-outline-background-color-focus",
-    "--system-button-static-black-outline-background-color-hover",
-    "--system-button-static-black-outline-border-color-default",
-    "--system-button-static-black-outline-border-color-disabled",
-    "--system-button-static-black-outline-border-color-down",
-    "--system-button-static-black-outline-border-color-focus",
-    "--system-button-static-black-outline-border-color-hover",
-    "--system-button-static-black-outline-content-color-default",
-    "--system-button-static-black-outline-content-color-disabled",
-    "--system-button-static-black-outline-content-color-down",
-    "--system-button-static-black-outline-content-color-focus",
-    "--system-button-static-black-outline-content-color-hover",
-    "--system-button-static-black-outline-focus-indicator-color",
-    "--system-button-static-black-quiet-border-color-default",
-    "--system-button-static-black-quiet-border-color-disabled",
-    "--system-button-static-black-quiet-border-color-down",
-    "--system-button-static-black-quiet-border-color-focus",
-    "--system-button-static-black-quiet-border-color-hover",
+    "--system-button-static-black-outline-not-secondary-background-color-down",
+    "--system-button-static-black-outline-not-secondary-background-color-focus",
+    "--system-button-static-black-outline-not-secondary-background-color-hover",
+    "--system-button-static-black-outline-not-secondary-border-color-default",
+    "--system-button-static-black-outline-not-secondary-border-color-down",
+    "--system-button-static-black-outline-not-secondary-border-color-focus",
+    "--system-button-static-black-outline-not-secondary-border-color-hover",
+    "--system-button-static-black-outline-not-secondary-content-color-default",
+    "--system-button-static-black-outline-not-secondary-content-color-down",
+    "--system-button-static-black-outline-not-secondary-content-color-focus",
+    "--system-button-static-black-outline-not-secondary-content-color-hover",
     "--system-button-static-black-secondary-background-color-default",
-    "--system-button-static-black-secondary-background-color-disabled",
     "--system-button-static-black-secondary-background-color-down",
     "--system-button-static-black-secondary-background-color-focus",
     "--system-button-static-black-secondary-background-color-hover",
-    "--system-button-static-black-secondary-border-color-default",
-    "--system-button-static-black-secondary-border-color-disabled",
-    "--system-button-static-black-secondary-border-color-down",
-    "--system-button-static-black-secondary-border-color-focus",
-    "--system-button-static-black-secondary-border-color-hover",
     "--system-button-static-black-secondary-content-color-default",
-    "--system-button-static-black-secondary-content-color-disabled",
     "--system-button-static-black-secondary-content-color-down",
     "--system-button-static-black-secondary-content-color-focus",
     "--system-button-static-black-secondary-content-color-hover",
-    "--system-button-static-black-secondary-focus-indicator-color",
-    "--system-button-static-black-secondary-outline-background-color-default",
-    "--system-button-static-black-secondary-outline-background-color-disabled",
     "--system-button-static-black-secondary-outline-background-color-down",
     "--system-button-static-black-secondary-outline-background-color-focus",
     "--system-button-static-black-secondary-outline-background-color-hover",
     "--system-button-static-black-secondary-outline-border-color-default",
-    "--system-button-static-black-secondary-outline-border-color-disabled",
     "--system-button-static-black-secondary-outline-border-color-down",
     "--system-button-static-black-secondary-outline-border-color-focus",
     "--system-button-static-black-secondary-outline-border-color-hover",
-    "--system-button-static-black-secondary-outline-content-color-default",
-    "--system-button-static-black-secondary-outline-content-color-disabled",
-    "--system-button-static-black-secondary-outline-content-color-down",
-    "--system-button-static-black-secondary-outline-content-color-focus",
-    "--system-button-static-black-secondary-outline-content-color-hover",
-    "--system-button-static-black-secondary-outline-focus-indicator-color",
     "--system-button-static-white-background-color-default",
-    "--system-button-static-white-background-color-disabled",
     "--system-button-static-white-background-color-down",
     "--system-button-static-white-background-color-focus",
     "--system-button-static-white-background-color-hover",
-    "--system-button-static-white-border-color-default",
-    "--system-button-static-white-border-color-disabled",
-    "--system-button-static-white-border-color-down",
-    "--system-button-static-white-border-color-focus",
-    "--system-button-static-white-border-color-hover",
     "--system-button-static-white-content-color-default",
-    "--system-button-static-white-content-color-disabled",
     "--system-button-static-white-content-color-down",
     "--system-button-static-white-content-color-focus",
     "--system-button-static-white-content-color-hover",
-    "--system-button-static-white-focus-indicator-color",
-    "--system-button-static-white-outline-background-color-default",
-    "--system-button-static-white-outline-background-color-disabled",
-    "--system-button-static-white-outline-background-color-down",
-    "--system-button-static-white-outline-background-color-focus",
-    "--system-button-static-white-outline-background-color-hover",
-    "--system-button-static-white-outline-border-color-default",
-    "--system-button-static-white-outline-border-color-disabled",
-    "--system-button-static-white-outline-border-color-down",
-    "--system-button-static-white-outline-border-color-focus",
-    "--system-button-static-white-outline-border-color-hover",
-    "--system-button-static-white-outline-content-color-default",
-    "--system-button-static-white-outline-content-color-disabled",
-    "--system-button-static-white-outline-content-color-down",
-    "--system-button-static-white-outline-content-color-focus",
-    "--system-button-static-white-outline-content-color-hover",
-    "--system-button-static-white-outline-focus-indicator-color",
-    "--system-button-static-white-quiet-border-color-default",
-    "--system-button-static-white-quiet-border-color-disabled",
-    "--system-button-static-white-quiet-border-color-down",
-    "--system-button-static-white-quiet-border-color-focus",
-    "--system-button-static-white-quiet-border-color-hover",
+    "--system-button-static-white-outline-not-secondary-background-color-down",
+    "--system-button-static-white-outline-not-secondary-background-color-focus",
+    "--system-button-static-white-outline-not-secondary-background-color-hover",
+    "--system-button-static-white-outline-not-secondary-border-color-default",
+    "--system-button-static-white-outline-not-secondary-border-color-down",
+    "--system-button-static-white-outline-not-secondary-border-color-focus",
+    "--system-button-static-white-outline-not-secondary-border-color-hover",
+    "--system-button-static-white-outline-not-secondary-content-color-default",
+    "--system-button-static-white-outline-not-secondary-content-color-down",
+    "--system-button-static-white-outline-not-secondary-content-color-focus",
+    "--system-button-static-white-outline-not-secondary-content-color-hover",
+    "--system-button-static-white-outline-secondary-background-color-down",
+    "--system-button-static-white-outline-secondary-background-color-focus",
+    "--system-button-static-white-outline-secondary-background-color-hover",
     "--system-button-static-white-secondary-background-color-default",
-    "--system-button-static-white-secondary-background-color-disabled",
     "--system-button-static-white-secondary-background-color-down",
     "--system-button-static-white-secondary-background-color-focus",
     "--system-button-static-white-secondary-background-color-hover",
-    "--system-button-static-white-secondary-border-color-default",
-    "--system-button-static-white-secondary-border-color-disabled",
-    "--system-button-static-white-secondary-border-color-down",
-    "--system-button-static-white-secondary-border-color-focus",
-    "--system-button-static-white-secondary-border-color-hover",
     "--system-button-static-white-secondary-content-color-default",
-    "--system-button-static-white-secondary-content-color-disabled",
     "--system-button-static-white-secondary-content-color-down",
     "--system-button-static-white-secondary-content-color-focus",
     "--system-button-static-white-secondary-content-color-hover",
-    "--system-button-static-white-secondary-focus-indicator-color",
-    "--system-button-static-white-secondary-outline-background-color-default",
-    "--system-button-static-white-secondary-outline-background-color-disabled",
-    "--system-button-static-white-secondary-outline-background-color-down",
-    "--system-button-static-white-secondary-outline-background-color-focus",
-    "--system-button-static-white-secondary-outline-background-color-hover",
     "--system-button-static-white-secondary-outline-border-color-default",
-    "--system-button-static-white-secondary-outline-border-color-disabled",
     "--system-button-static-white-secondary-outline-border-color-down",
     "--system-button-static-white-secondary-outline-border-color-focus",
-    "--system-button-static-white-secondary-outline-border-color-hover",
-    "--system-button-static-white-secondary-outline-content-color-default",
-    "--system-button-static-white-secondary-outline-content-color-disabled",
-    "--system-button-static-white-secondary-outline-content-color-down",
-    "--system-button-static-white-secondary-outline-content-color-focus",
-    "--system-button-static-white-secondary-outline-content-color-hover",
-    "--system-button-static-white-secondary-outline-focus-indicator-color",
-    "--system-button-static-white-selected-background-color-default",
-    "--system-button-static-white-selected-background-color-disabled",
-    "--system-button-static-white-selected-background-color-down",
-    "--system-button-static-white-selected-background-color-focus",
-    "--system-button-static-white-selected-background-color-hover",
-    "--system-button-static-white-selected-border-color-disabled",
-    "--system-button-static-white-selected-content-color-default",
-    "--system-button-static-white-selected-content-color-down",
-    "--system-button-static-white-selected-content-color-focus",
-    "--system-button-static-white-selected-content-color-hover"
+    "--system-button-static-white-secondary-outline-border-color-hover"
   ],
   "passthroughs": [
     "--mod-progress-circle-position",
diff --git a/components/button/index.css b/components/button/index.css
index e884d714c3..69d17903f9 100644
--- a/components/button/index.css
+++ b/components/button/index.css
@@ -11,223 +11,427 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "@spectrum-css/commons/basebutton.css";
+@import "./themes/spectrum-two.css";
 
-/* default for all buttons */
-.spectrum-Button {
-	--spectrum-button-animation-duration: var(--spectrum-animation-duration-100);
-	--spectrum-button-border-radius: calc(var(--spectrum-button-height) / 2);
-	--spectrum-button-border-width: var(--spectrum-border-width-200);
-	--spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */
+.spectrum-Button,
+.spectrum-Button--sizeM {
+	--spectrum-button-sized-height: var(--spectrum-component-height-100);
+	--spectrum-button-sized-font-size: var(--spectrum-font-size-100);
+
+	--spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width));
+	--spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100);
+	--spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width));
+	--spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-100);
+	--spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-medium);
+	--spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-medium);
+	--spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
+	--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100);
+}
 
-	--spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
-	--spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));
-	--spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
-	--spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
-	--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50);
+.spectrum-Button--sizeS {
+	--spectrum-button-sized-height: var(--spectrum-component-height-75);
+	--spectrum-button-sized-font-size: var(--spectrum-font-size-75);
+
+	--spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width));
+	--spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75);
+	--spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width));
+	--spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-75);
+	--spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-small);
+	--spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-small);
+	--spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
+	--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75);
+}
 
-	--mod-progress-circle-position: absolute;
+.spectrum-Button--sizeL {
+	--spectrum-button-sized-height: var(--spectrum-component-height-200);
+	--spectrum-button-sized-font-size: var(--spectrum-font-size-200);
+
+	--spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width));
+	--spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200);
+	--spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width));
+	--spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-200);
+	--spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-large);
+	--spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-large);
+	--spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200);
+	--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200);
 }
 
-.spectrum-Button--sizeS {
-	--spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier));
+.spectrum-Button--sizeXL {
+	--spectrum-button-sized-height: var(--spectrum-component-height-300);
+	--spectrum-button-sized-font-size: var(--spectrum-font-size-300);
+
+	--spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width));
+	--spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300);
+	--spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width));
+	--spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-300);
+	--spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-extra-large);
+	--spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large);
+	--spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300);
+	--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300);
+}
 
-	--spectrum-button-height: var(--spectrum-component-height-75);
+/* default for all buttons */
+.spectrum-Button {
+	&.is-selected {
+		--mod-button-border-color-default: transparent;
+		--mod-button-border-color-hover: transparent;
+		--mod-button-border-color-down: transparent;
+		--mod-button-border-color-focus: transparent;
+
+		--mod-button-content-color-default: var(--spectrum-white);
+		--mod-button-content-color-hover: var(--spectrum-white);
+		--mod-button-content-color-down: var(--spectrum-white);
+		--mod-button-content-color-focus: var(--spectrum-white);
+
+		--mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+		--mod-button-border-color-disabled: transparent;
+
+		&.spectrum-Button--emphasized {
+			--mod-button-background-color-default: var(--spectrum-accent-background-color-default);
+			--mod-button-background-color-hover: var(--spectrum-accent-background-color-hover);
+			--mod-button-background-color-down: var(--spectrum-accent-background-color-down);
+			--mod-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+		}
+	}
 
-	--spectrum-button-font-size: var(--spectrum-font-size-75);
+	&.spectrum-Button--accent {
+		--mod-button-background-color-default: var(--spectrum-accent-background-color-default);
+		--mod-button-background-color-hover: var(--spectrum-accent-background-color-hover);
+		--mod-button-background-color-down: var(--spectrum-accent-background-color-down);
+		--mod-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+		--mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+
+		--mod-button-border-color-default: transparent;
+		--mod-button-border-color-hover: transparent;
+		--mod-button-border-color-down: transparent;
+		--mod-button-border-color-focus: transparent;
+		--mod-button-border-color-disabled: transparent;
+
+		--mod-button-content-color-default: var(--spectrum-white);
+		--mod-button-content-color-hover: var(--spectrum-white);
+		--mod-button-content-color-down: var(--spectrum-white);
+		--mod-button-content-color-focus: var(--spectrum-white);
+
+		&.spectrum-Button--outline {
+			--mod-button-background-color-hover: var(--spectrum-accent-color-200);
+			--mod-button-background-color-down: var(--spectrum-accent-color-300);
+			--mod-button-background-color-focus: var(--spectrum-accent-color-200);
+
+			--mod-button-border-color-default: var(--spectrum-accent-color-900);
+			--mod-button-border-color-hover: var(--spectrum-accent-color-1000);
+			--mod-button-border-color-down: var(--spectrum-accent-color-1100);
+			--mod-button-border-color-focus: var(--spectrum-accent-color-1000);
+			--mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
+
+			--mod-button-content-color-default: var(--spectrum-accent-content-color-default);
+			--mod-button-content-color-hover: var(--spectrum-accent-content-color-hover);
+			--mod-button-content-color-down: var(--spectrum-accent-content-color-down);
+			--mod-button-content-color-focus: var(--spectrum-accent-content-color-key-focus);
+			--mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
+		}
+	}
 
-	--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width));
-	--spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75);
-	--spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width));
-	--spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75);
-	--spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small);
-	--spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small);
-	--spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
-	--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75);
-}
+	&.spectrum-Button--negative {
+		--mod-button-background-color-default: var(--spectrum-negative-background-color-default);
+		--mod-button-background-color-hover: var(--spectrum-negative-background-color-hover);
+		--mod-button-background-color-down: var(--spectrum-negative-background-color-down);
+		--mod-button-background-color-focus: var(--spectrum-negative-background-color-key-focus);
+
+		--mod-button-border-color-default: transparent;
+		--mod-button-border-color-hover: transparent;
+		--mod-button-border-color-down: transparent;
+		--mod-button-border-color-focus: transparent;
+
+		--mod-button-content-color-default: var(--spectrum-white);
+		--mod-button-content-color-hover: var(--spectrum-white);
+		--mod-button-content-color-down: var(--spectrum-white);
+		--mod-button-content-color-focus: var(--spectrum-white);
+
+		--mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+		--mod-button-border-color-disabled: transparent;
+		--mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+		&.spectrum-Button--outline {
+			--mod-button-background-color-hover: var(--spectrum-negative-color-200);
+			--mod-button-background-color-down: var(--spectrum-negative-color-300);
+			--mod-button-background-color-focus: var(--spectrum-negative-color-200);
+
+			--mod-button-border-color-default: var(--spectrum-negative-color-900);
+			--mod-button-border-color-hover: var(--spectrum-negative-color-1000);
+			--mod-button-border-color-down: var(--spectrum-negative-color-1100);
+			--mod-button-border-color-focus: var(--spectrum-negative-color-1000);
+			--mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
+
+			--mod-button-content-color-default: var(--spectrum-negative-content-color-default);
+			--mod-button-content-color-hover: var(--spectrum-negative-content-color-hover);
+			--mod-button-content-color-down: var(--spectrum-negative-content-color-down);
+			--mod-button-content-color-focus: var(--spectrum-negative-content-color-key-focus);
+			--mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
+		}
+	}
 
-.spectrum-Button--sizeM {
-	--spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier));
+	&.spectrum-Button--primary {
+		--mod-button-background-color-default: var(--spectrum-neutral-background-color-default);
+		--mod-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
+		--mod-button-background-color-down: var(--spectrum-neutral-background-color-down);
+		--mod-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
+		--mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+
+		--mod-button-border-color-default: transparent;
+		--mod-button-border-color-hover: transparent;
+		--mod-button-border-color-down: transparent;
+		--mod-button-border-color-focus: transparent;
+		--mod-button-border-color-disabled: transparent;
+
+		&.spectrum-Button--outline {
+			--mod-button-border-color-default: var(--spectrum-gray-800);
+			--mod-button-border-color-hover: var(--spectrum-gray-900);
+			--mod-button-border-color-down: var(--spectrum-gray-900);
+			--mod-button-border-color-focus: var(--spectrum-gray-900);
+
+			--mod-button-content-color-default: var(--spectrum-neutral-content-color-default);
+			--mod-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+			--mod-button-content-color-down: var(--spectrum-neutral-content-color-down);
+			--mod-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+			--mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
+			--mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
+		}
+	}
 
-	--spectrum-button-height: var(--spectrum-component-height-100);
+	&.spectrum-Button--secondary {
+		--mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+
+		--mod-button-border-color-default: transparent;
+		--mod-button-border-color-hover: transparent;
+		--mod-button-border-color-down: transparent;
+		--mod-button-border-color-focus: transparent;
+		--mod-button-border-color-disabled: transparent;
+
+		--mod-button-content-color-default: var(--spectrum-neutral-content-color-default);
+		--mod-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+		--mod-button-content-color-down: var(--spectrum-neutral-content-color-down);
+		--mod-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+		--mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+		&.spectrum-Button--outline {
+			--mod-button-background-color-down: var(--spectrum-gray-400);
+
+			--mod-button-border-color-default: var(--spectrum-gray-300);
+			--mod-button-border-color-hover: var(--spectrum-gray-400);
+			--mod-button-border-color-down: var(--spectrum-gray-500);
+			--mod-button-border-color-focus: var(--spectrum-gray-400);
+			--mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
+
+			--mod-button-content-color-default: var(--spectrum-neutral-content-color-default);
+			--mod-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+			--mod-button-content-color-down: var(--spectrum-neutral-content-color-down);
+			--mod-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+			--mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
+		}
+	}
 
-	--spectrum-button-font-size: var(--spectrum-font-size-100);
+	&.spectrum-Button--quiet {
+		--mod-button-background-color-hover: var(--spectrum-gray-200);
+		--mod-button-background-color-down: var(--spectrum-gray-300);
+		--mod-button-background-color-focus: var(--spectrum-gray-200);
 
-	--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width));
-	--spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100);
-	--spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width));
-	--spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100);
-	--spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium);
-	--spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium);
-	--spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
-	--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100);
-}
+		--mod-button-border-color-default: transparent;
+		--mod-button-border-color-hover: transparent;
+		--mod-button-border-color-down: transparent;
+		--mod-button-border-color-focus: transparent;
+		--mod-button-border-color-disabled: transparent;
+	}
 
-.spectrum-Button--sizeL {
-	--spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier));
+	&.spectrum-Button--staticBlack,
+	&.spectrum-Button--staticWhite {
+		--mod-button-border-color-default: transparent;
+		--mod-button-border-color-hover: transparent;
+		--mod-button-border-color-down: transparent;
+		--mod-button-border-color-focus: transparent;
+		--mod-button-border-color-disabled: transparent;
+
+		&.is-selected {
+			/* @deprecated previous mapping for --mod-button-static-content-color was applied to the is-selected state */
+			--mod-button-content-color-default: var(--mod-button-static-content-color);
+			--mod-button-content-color-hover: var(--mod-button-static-content-color);
+			--mod-button-content-color-down: var(--mod-button-static-content-color);
+			--mod-button-content-color-focus: var(--mod-button-static-content-color);
+
+			--mod-button-border-color-disabled: transparent;
+		}
 
-	--spectrum-button-height: var(--spectrum-component-height-200);
+		&.spectrum-Button--secondary {
+			--mod-button-border-color-default: transparent;
+			--mod-button-border-color-hover: transparent;
+			--mod-button-border-color-down: transparent;
+			--mod-button-border-color-focus: transparent;
+			--mod-button-border-color-disabled: transparent;
+		}
 
-	--spectrum-button-font-size: var(--spectrum-font-size-200);
+		&.spectrum-Button--quiet {
+			--mod-button-border-color-default: transparent;
+			--mod-button-border-color-hover: transparent;
+			--mod-button-border-color-down: transparent;
+			--mod-button-border-color-focus: transparent;
 
-	--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width));
-	--spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200);
-	--spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width));
-	--spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200);
-	--spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large);
-	--spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large);
-	--spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200);
-	--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200);
-}
+			--mod-button-border-color-disabled: transparent;
+		}
+	}
 
-.spectrum-Button--sizeXL {
-	--spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier));
+	&.spectrum-Button--staticWhite {
+		--mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+		--mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+		--mod-button-focus-ring-color: var(--spectrum-static-white-focus-indicator-color);
+
+		&.spectrum-Button--secondary:not(.spectrum-Button--outline) {
+			--mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+		}
 
-	--spectrum-button-height: var(--spectrum-component-height-300);
+		&.spectrum-Button--outline {
+			--mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+			--mod-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+		}
+	}
 
-	--spectrum-button-font-size: var(--spectrum-font-size-300);
+	&.spectrum-Button--staticBlack {
+		--mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+		--mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+		--mod-button-focus-ring-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
 
-	--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width));
-	--spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300);
-	--spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width));
-	--spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300);
-	--spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large);
-	--spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large);
-	--spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300);
-	--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300);
+		&.spectrum-Button--secondary:not(.spectrum-Button--outline) {
+			--mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+		}
+
+		&.spectrum-Button--outline {
+			--mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+			--mod-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+		}
+	}
+
+	&.spectrum-Button--quiet,
+	&.spectrum-Button--outline {
+		--mod-button-background-color-default: transparent;
+		--mod-button-background-color-disabled: transparent;
+	}
 }
 
 .spectrum-Button {
-	cursor: pointer;
-	user-select: none;
+	--spectrum-button-height: var(--mod-button-height, var(--spectrum-button-sized-height));
+	--spectrum-button-min-width: var(--mod-button-min-width, calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier)));
 
-	/* Show the button overflow in Edge. */
-	overflow: visible;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon));
+	--spectrum-button-line-height: var(--mod-button-line-height, 1.2); /* Hack to keep buttons at 32px */
+	--spectrum-button-font-size: var(--mod-button-font-size, var(--spectrum-button-sized-font-size));
+	--spectrum-button-padding-label-to-icon: var(--mod-button-padding-label-to-icon, var(--spectrum-button-sized-padding-label-to-icon));
 
-	box-sizing: border-box;
+	--spectrum-button-edge-to-visual: var(--mod-button-edge-to-visual, var(--spectrum-button-sized-edge-to-visual));
+	--spectrum-button-edge-to-visual-only: var(--mod-button-edge-to-visual-only, var(--spectrum-button-sized-edge-to-visual-only));
+	--spectrum-button-edge-to-text: var(--mod-button-edge-to-text, var(--spectrum-button-sized-edge-to-text));
 
-	/* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
-	font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
-	font-size: var(--mod-button-font-size, var(--spectrum-button-font-size));
-	font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight));
+	--spectrum-button-top-to-text: var(--mod-button-top-to-text, var(--spectrum-button-sized-top-to-text));
+	--spectrum-button-bottom-to-text: var(--mod-button-bottom-to-text, var(--spectrum-button-sized-bottom-to-text));
+	--spectrum-button-top-to-icon: var(--mod-button-top-to-icon, var(--spectrum-button-sized-top-to-icon));
 
-	/* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
-	line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
-	text-decoration: none;
+	--spectrum-button-focus-ring-thickness: var(--mod-button-focus-ring-thickness, var(--spectrum-focus-indicator-thickness));
+	--spectrum-button-focus-indicator-color: var(--mod-button-focus-ring-color, var(--spectrum-focus-indicator-color));
 
-	/* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
-	text-transform: none;
+	--spectrum-button-animation-duration: var(--mod-button-animation-duration, var(--spectrum-animation-duration-100));
+	--spectrum-button-border-width: var(--mod-button-border-width, var(--spectrum-border-width-200));
 
-	/* Adjacent buttons should be aligned correctly */
-	vertical-align: top;
+	--spectrum-button-focus-ring-gap: var(--mod-focus-indicator-gap, var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap)));
+	--spectrum-button-border-radius: var(--mod-button-border-radius, calc(var(--spectrum-button-height) / 2));
 
-	/* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
-	-webkit-appearance: button;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+	--spectrum-button-content-color-default: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-neutral-content-color-default)));
+	--spectrum-button-content-color-hover: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-neutral-content-color-hover)));
+	--spectrum-button-content-color-down: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-neutral-content-color-down)));
+	--spectrum-button-content-color-focus: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-neutral-content-color-key-focus)));
+	--spectrum-button-content-color-disabled: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-disabled-content-color)));
 
-	border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius));
-	border-width: var(--mod-button-border-width, var(--spectrum-button-border-width));
-	border-style: solid;
-	border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
+	/* @passthrough -- align the progress circle in the button */
+	--mod-progress-circle-position: absolute;
+
+	@extend %spectrum-BaseButton;
+	@extend %spectrum-ButtonWithFocusRing;
 
+	border-radius: var(--spectrum-button-border-radius);
+	border-width: var(--spectrum-button-border-width);
+	border-style: solid;
+	font-size: var(--spectrum-button-font-size);
+	font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight));
+	gap: var(--spectrum-button-padding-label-to-icon);
 	max-inline-size: var(--mod-button-max-inline-size, none);
-	min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width));
-	min-block-size: var(--mod-button-height, var(--spectrum-button-height));
+	min-inline-size: var(--spectrum-button-min-width);
+	min-block-size: var(--spectrum-button-height);
 
 	/* Start with text-only padding */
 	padding-block: 0;
-	padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text));
-
-	/* Contain halo */
+	padding-inline: var(--spectrum-button-edge-to-text);
 	position: relative;
 
-	/* let staticColor variants inherit their color */
-
 	margin-block: var(--mod-button-margin-block);
 	margin-inline-end: var(--mod-button-margin-right);
 	margin-inline-start: var(--mod-button-margin-left);
 
 	background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
-	color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default)));
+	border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
 
+	/* let staticColor variants inherit their color */
+	color: var(--spectrum-button-content-color-default, inherit);
 	transition:
-		background-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-		border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-		color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-		box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
+		border var(--spectrum-button-animation-duration, 130ms) linear,
+		color var(--spectrum-button-animation-duration, 130ms) linear,
+		background-color var(--spectrum-button-animation-duration, 130ms) linear;
 
-	&::after {
-		content: "";
+	&.spectrum-Button--outline {
+		background-color: transparent;
+	}
 
+	&::after {
 		position: absolute;
-		inset-block-start: 0;
-		inset-block-end: 0;
-		inset-inline-start: 0;
-		inset-inline-end: 0;
-
-		display: block;
-
-		margin: calc(-1 * (var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))));
-
-		/* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
-		transition:
-			opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out,
-			margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out,
-			box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out;
+		inset: 0;
+		margin: var(--mod-button-focus-ring-border-radius, calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1));
+		transition: box-shadow var(--spectrum-button-animation-duration) ease-in-out;
+		pointer-events: none;
+		content: "";
 
 		/* correct focus indicator radius for t-shirt sizing */
-		border-radius: calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)));
+		border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-focus-indicator-gap));
+	}
 
-		pointer-events: none;
+	&:hover {
+		background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover)));
+		border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover)));
+		color: var(--spectrum-button-content-color-hover);
+		box-shadow: none;
 	}
 
-	&:focus-visible,
-	&.is-focused {
+	&:focus-visible {
 		background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus)));
 		border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus)));
-		color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus)));
+		color: var(--spectrum-button-content-color-focus);
 
 		/* Remove the default focus outline */
 		box-shadow: none;
 		outline: none;
 
 		&::after {
-			margin: calc(-2 * var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)));
-			box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--mod-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)));
+			box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color);
 		}
 	}
 
-	/* Remove the inner border and padding in Firefox (normalize). */
-	&::-moz-focus-inner {
-		border-style: none;
-		padding: 0;
-	}
-
-	&:focus {
-		outline: none;
-	}
-
-	&:disabled,
-	&.is-disabled {
-		cursor: default;
-	}
-
-	&:hover {
-		background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover)));
-		border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover)));
-		color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover)));
+	&:focus-visible,
+	&.is-focused {
+		&::after {
+			box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color);
+		}
 	}
 
 	&:active {
 		background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down)));
 		border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down)));
-		color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down)));
+		color: var(--spectrum-button-content-color-down);
+		box-shadow: none;
 	}
 
 	&:hover,
@@ -241,7 +445,7 @@
 	&.is-pending {
 		background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled)));
 		border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled)));
-		color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled)));
+		color: var(--spectrum-button-content-color-disabled);
 	}
 
 	.spectrum-Icon {
@@ -280,15 +484,15 @@
 	.spectrum-Button-label {
 		visibility: visible;
 		opacity: 1;
-		transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out;
+		transition: opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out;
 	}
 
 	.spectrum-ProgressCircle {
 		visibility: hidden;
 		opacity: 0;
 		transition:
-			opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out,
-			visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms));
+			opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out,
+			visibility 0ms linear var(--spectrum-button-animation-duration, 130ms);
 	}
 
 	&[pending],
@@ -300,55 +504,69 @@
 			visibility: hidden;
 			opacity: 0;
 			transition:
-				opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out,
-				visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms));
+				opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out,
+				visibility 0ms linear var(--spectrum-button-animation-duration, 130ms);
 		}
 
 		.spectrum-ProgressCircle {
 			visibility: visible;
 			opacity: 1;
-			transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out;
+			transition: opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out;
 		}
 	}
-}
 
-a.spectrum-Button {
-	/* Make link text not selectable  */
-	user-select: none;
+	.spectrum-Icon {
+		/* Any block-size difference between the intended workflow icon size and actual icon used.
+       Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
+		--_icon-size-difference: max(0px, calc(var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))));
 
-	/* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
-	-webkit-appearance: none;
-}
+		margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, calc(var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + (var(--_icon-size-difference, 0px) / 2))));
 
-.spectrum-Button-label {
-	padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
-	padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
-	line-height: var(--mod-button-line-height, var(--spectrum-button-line-height));
-	align-self: start;
-	justify-self: center;
+		margin-inline-start: calc(var(--spectrum-button-edge-to-visual) - var(--spectrum-button-edge-to-text));
+		color: inherit;
+		flex-shrink: 0;
+		align-self: flex-start;
+	}
 
-	/* Fixes horizontal alignment of text in anchor buttons */
-	text-align: var(--mod-button-text-align, center);
+	&.spectrum-Button--iconOnly {
+		min-inline-size: unset;
+		padding: calc(var(--spectrum-button-edge-to-visual-only) - var(--spectrum-button-border-width));
+		border-radius: 50%;
 
-	&:empty {
-		display: none;
+		.spectrum-Icon {
+			align-self: center;
+			margin-inline-start: 0;
+			margin-block-start: 0;
+		}
+
+		&::after {
+			border-radius: 50%;
+		}
 	}
-}
 
-/* Disable button label wrap  */
-.spectrum-Button--noWrap .spectrum-Button-label {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	.spectrum-Icon + .spectrum-Button-label {
+		text-align: var(--mod-button-text-align-with-icon, start);
+	}
 }
 
-/* Static color variants */
-.spectrum-Button--staticWhite {
-	--spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
+a.spectrum-Button {
+	@extend %spectrum-AnchorButton;
 }
 
-.spectrum-Button--staticBlack {
-	--spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
+.spectrum-Button-label {
+	@extend %spectrum-ButtonLabel;
+	padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width));
+	padding-block-end: calc(var(--spectrum-button-bottom-to-text) - var(--spectrum-button-border-width));
+	line-height: var(--spectrum-button-line-height);
+	align-self: start;
+	text-align: var(--mod-button-text-align, center);
+
+	/* Disable button label wrap  */
+	.spectrum-Button--noWrap & {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 }
 
 /* Windows High Contrast Mode */
@@ -358,17 +576,19 @@ a.spectrum-Button {
 		--highcontrast-button-content-color-hover: ButtonText;
 		--highcontrast-button-content-color-focus: ButtonText;
 		--highcontrast-button-content-color-down: ButtonText;
+		--highcontrast-button-content-color-disabled: GrayText;
+
 		--highcontrast-button-border-color-default: ButtonBorder;
 		--highcontrast-button-border-color-hover: ButtonBorder;
 		--highcontrast-button-border-color-focus: ButtonBorder;
 		--highcontrast-button-border-color-down: ButtonBorder;
+		--highcontrast-button-border-color-disabled: GrayText;
+
 		--highcontrast-button-background-color-default: ButtonFace;
 		--highcontrast-button-background-color-hover: ButtonFace;
 		--highcontrast-button-background-color-down: ButtonFace;
 		--highcontrast-button-background-color-focus: ButtonFace;
 		--highcontrast-button-background-color-disabled: ButtonFace;
-		--highcontrast-button-content-color-disabled: GrayText;
-		--highcontrast-button-border-color-disabled: GrayText;
 
 		--mod-progress-circle-track-border-color: ButtonText;
 		--mod-progress-circle-track-border-color-over-background: ButtonText;
@@ -379,23 +599,27 @@ a.spectrum-Button {
 			forced-color-adjust: none;
 		}
 
-		&:focus-visible {
-			&::after {
-				forced-color-adjust: none;
-				box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) ButtonText;
-			}
+		&:focus-visible::after {
+			forced-color-adjust: none;
+			box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) ButtonText;
+		}
+
+		&.spectrum-Button--staticWhite.spectrum-Button--accent {
+			--highcontrast-button-content-color-disabled: GrayText;
 		}
 
 		&.spectrum-Button--accent.spectrum-Button--fill {
 			--highcontrast-button-background-color-default: ButtonText;
+			--highcontrast-button-background-color-hover: Highlight;
+			--highcontrast-button-background-color-down: Highlight;
+			--highcontrast-button-background-color-focus: Highlight;
+			--highcontrast-button-background-color-disabled: ButtonFace;
+
 			--highcontrast-button-content-color-default: ButtonFace;
 			--highcontrast-button-content-color-hover: HighlightText;
 			--highcontrast-button-content-color-down: HighlightText;
 			--highcontrast-button-content-color-focus: HighlightText;
-			--highcontrast-button-background-color-disabled: ButtonFace;
-			--highcontrast-button-background-color-hover: Highlight;
-			--highcontrast-button-background-color-down: Highlight;
-			--highcontrast-button-background-color-focus: Highlight;
+
 			--highcontrast-button-border-color-default: ButtonText;
 			--highcontrast-button-border-color-hover: Highlight;
 			--highcontrast-button-border-color-focus: Highlight;
diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md
deleted file mode 100644
index 7f3a41b7d4..0000000000
--- a/components/button/metadata/mods.md
+++ /dev/null
@@ -1,49 +0,0 @@
-| Modifiable custom properties               |
-| ------------------------------------------ |
-| `--mod-animation-duration-100`             |
-| `--mod-bold-font-weight`                   |
-| `--mod-button-animation-duration`          |
-| `--mod-button-background-color-default`    |
-| `--mod-button-background-color-disabled`   |
-| `--mod-button-background-color-down`       |
-| `--mod-button-background-color-focus`      |
-| `--mod-button-background-color-hover`      |
-| `--mod-button-border-color-default`        |
-| `--mod-button-border-color-disabled`       |
-| `--mod-button-border-color-down`           |
-| `--mod-button-border-color-focus`          |
-| `--mod-button-border-color-hover`          |
-| `--mod-button-border-radius`               |
-| `--mod-button-border-width`                |
-| `--mod-button-bottom-to-text`              |
-| `--mod-button-content-color-default`       |
-| `--mod-button-content-color-disabled`      |
-| `--mod-button-content-color-down`          |
-| `--mod-button-content-color-focus`         |
-| `--mod-button-content-color-hover`         |
-| `--mod-button-edge-to-text`                |
-| `--mod-button-edge-to-visual`              |
-| `--mod-button-edge-to-visual-only`         |
-| `--mod-button-focus-ring-color`            |
-| `--mod-button-focus-ring-gap`              |
-| `--mod-button-focus-ring-thickness`        |
-| `--mod-button-font-family`                 |
-| `--mod-button-font-size`                   |
-| `--mod-button-height`                      |
-| `--mod-button-icon-margin-block-start`     |
-| `--mod-button-line-height`                 |
-| `--mod-button-margin-block`                |
-| `--mod-button-margin-left`                 |
-| `--mod-button-margin-right`                |
-| `--mod-button-max-inline-size`             |
-| `--mod-button-min-width`                   |
-| `--mod-button-padding-label-to-icon`       |
-| `--mod-button-static-content-color`        |
-| `--mod-button-text-align`                  |
-| `--mod-button-text-align-with-icon`        |
-| `--mod-button-top-to-icon`                 |
-| `--mod-button-top-to-text`                 |
-| `--mod-focus-indicator-gap`                |
-| `--mod-line-height-100`                    |
-| `--mod-sans-font-family-stack`             |
-| `--mod-static-black-focus-indicator-color` |
diff --git a/components/button/package.json b/components/button/package.json
index 085d7c613d..456117a8ec 100644
--- a/components/button/package.json
+++ b/components/button/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/button/stories/button.mdx b/components/button/stories/button.mdx
index e544518bae..024a29f86e 100644
--- a/components/button/stories/button.mdx
+++ b/components/button/stories/button.mdx
@@ -1,15 +1,15 @@
 import {
-  Meta,
-  Title,
-  Subtitle,
-  Description,
-  ArgTypes,
-  Canvas,
+	Meta,
+	Title,
+	Subtitle,
+	Description,
+	ArgTypes,
+	Canvas,
 } from "@storybook/blocks";
 import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
+	ComponentDetails,
+	TaggedReleases,
+	PropertiesTable,
 } from "@spectrum-css/preview/blocks";
 
 import * as ButtonStories from "./button.stories";
@@ -56,29 +56,29 @@ option. Static color buttons do not change shades or values depending upon the c
 ### Static white - primary
 
 <Canvas
-  of={ButtonStories.StaticWhitePrimary}
-  className="spectrum-examples-static-white"
+	of={ButtonStories.StaticWhitePrimary}
+	className="spectrum-examples-static-white"
 />
 
 ### Static white - secondary
 
 <Canvas
-  of={ButtonStories.StaticWhiteSecondary}
-  className="spectrum-examples-static-white"
+	of={ButtonStories.StaticWhiteSecondary}
+	className="spectrum-examples-static-white"
 />
 
 ### Static black - primary
 
 <Canvas
-  of={ButtonStories.StaticBlackPrimary}
-  className="spectrum-examples-static-black"
+	of={ButtonStories.StaticBlackPrimary}
+	className="spectrum-examples-static-black"
 />
 
 ### Static black - secondary
 
 <Canvas
-  of={ButtonStories.StaticBlackSecondary}
-  className="spectrum-examples-static-black"
+	of={ButtonStories.StaticBlackSecondary}
+	className="spectrum-examples-static-black"
 />
 
 ## Sizing
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
index 8eff8c2918..0dbefb09f6 100644
--- a/components/button/stories/button.stories.js
+++ b/components/button/stories/button.stories.js
@@ -2,7 +2,7 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ButtonGroups } from "./button.test.js";
 import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, TreatmentTemplate } from "./template.js";
@@ -85,6 +85,10 @@ export default {
 		actions: {
 			handles: ["click .spectrum-Button"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=707-2774",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/button/stories/template.js b/components/button/stories/template.js
index cecada6f7a..16e259bd86 100644
--- a/components/button/stories/template.js
+++ b/components/button/stories/template.js
@@ -9,6 +9,9 @@ import { when } from "lit/directives/when.js";
 import { capitalize } from "lodash-es";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Button",
diff --git a/components/button/themes/express.css b/components/button/themes/express.css
index 1c47b73398..9c43b7cb5d 100644
--- a/components/button/themes/express.css
+++ b/components/button/themes/express.css
@@ -11,30 +11,27 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Button {
-		--spectrum-button-background-color-default: var(--spectrum-gray-200);
-		--spectrum-button-background-color-hover: var(--spectrum-gray-300);
-		--spectrum-button-background-color-down: var(--spectrum-gray-400);
-		--spectrum-button-background-color-focus: var(--spectrum-gray-300);
+		--mod-button-background-color-default: var(--spectrum-gray-200);
+		--mod-button-background-color-hover: var(--spectrum-gray-300);
+		--mod-button-background-color-down: var(--spectrum-gray-400);
+		--mod-button-background-color-focus: var(--spectrum-gray-300);
 
-		--spectrum-button-border-color-default: transparent;
-		--spectrum-button-border-color-hover: transparent;
-		--spectrum-button-border-color-down: transparent;
-		--spectrum-button-border-color-focus: transparent;
-
-		--spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-		--spectrum-button-border-color-disabled: transparent;
+		--mod-button-border-color-default: transparent;
+		--mod-button-border-color-hover: transparent;
+		--mod-button-border-color-down: transparent;
+		--mod-button-border-color-focus: transparent;
 
 		&.is-selected {
-			--spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
-			--spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
-			--spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
-			--spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
+			--mod-button-background-color-default: var(--spectrum-neutral-background-color-default);
+			--mod-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
+			--mod-button-background-color-down: var(--spectrum-neutral-background-color-down);
+			--mod-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
 		}
 	}
 }
diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css
new file mode 100644
index 0000000000..79af18b6fd
--- /dev/null
+++ b/components/button/themes/spectrum-two.css
@@ -0,0 +1,177 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Button {
+		--spectrum-button-background-color-default: var(--spectrum-gray-50);
+		--spectrum-button-background-color-hover: var(--spectrum-gray-100);
+		--spectrum-button-background-color-down: var(--spectrum-gray-200);
+		--spectrum-button-background-color-focus: var(--spectrum-gray-100);
+
+		--spectrum-button-border-color-default: var(--spectrum-gray-400);
+		--spectrum-button-border-color-hover: var(--spectrum-gray-500);
+		--spectrum-button-border-color-down: var(--spectrum-gray-600);
+		--spectrum-button-border-color-focus: var(--spectrum-gray-500);
+
+		--spectrum-button-background-color-disabled: transparent;
+		--spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+
+		&.is-selected {
+			--mod-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+			--mod-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
+			--mod-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
+			--mod-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
+		}
+
+		&.spectrum-Button--primary {
+			--mod-button-content-color-default: var(--spectrum-gray-25);
+			--mod-button-content-color-hover: var(--spectrum-gray-25);
+			--mod-button-content-color-down: var(--spectrum-gray-25);
+			--mod-button-content-color-focus: var(--spectrum-gray-25);
+
+			&.spectrum-Button--outline {
+				--mod-button-background-color-hover: var(--spectrum-gray-200);
+				--mod-button-background-color-down: var(--spectrum-gray-400);
+				--mod-button-background-color-focus: var(--spectrum-gray-200);
+			}
+		}
+
+		&.spectrum-Button--secondary {
+			--mod-button-background-color-default: var(--spectrum-gray-100);
+
+			&:not(.spectrum-Button--outline) {
+				--mod-button-background-color-hover: var(--spectrum-gray-200);
+				--mod-button-background-color-down: var(--spectrum-gray-400);
+				--mod-button-background-color-focus: var(--spectrum-gray-200);
+			}
+
+			&.spectrum-Button--outline {
+				--mod-button-background-color-hover: var(--spectrum-gray-200);
+				--mod-button-background-color-down: var(--spectrum-gray-400);
+				--mod-button-background-color-focus: var(--spectrum-gray-200);
+
+				--mod-button-border-color-default: var(--spectrum-gray-200);
+			}
+		}
+
+		/* static white: double the selector, double the fun (specificity...) */
+		&.spectrum-Button--staticWhite {
+			--mod-button-background-color-default: var(--spectrum-transparent-white-900);
+			--mod-button-background-color-hover: var(--spectrum-transparent-white-1000);
+			--mod-button-background-color-down: var(--spectrum-transparent-white-1000);
+			--mod-button-background-color-focus: var(--spectrum-transparent-white-1000);
+
+			--mod-button-content-color-default: var(--spectrum-black);
+			--mod-button-content-color-hover: var(--spectrum-black);
+			--mod-button-content-color-down: var(--spectrum-black);
+			--mod-button-content-color-focus: var(--spectrum-black);
+
+			&.spectrum-Button--secondary {
+				--mod-button-background-color-default: var(--spectrum-transparent-white-300);
+				--mod-button-background-color-hover: var(--spectrum-transparent-white-400);
+				--mod-button-background-color-down: var(--spectrum-transparent-white-500);
+				--mod-button-background-color-focus: var(--spectrum-transparent-white-400);
+
+				--mod-button-content-color-default: var(--spectrum-white);
+				--mod-button-content-color-hover: var(--spectrum-white);
+				--mod-button-content-color-down: var(--spectrum-white);
+				--mod-button-content-color-focus: var(--spectrum-white);
+
+				&.spectrum-Button--outline {
+					--mod-button-border-color-default: var(--spectrum-transparent-white-400);
+					--mod-button-border-color-hover: var(--spectrum-transparent-white-500);
+					--mod-button-border-color-down: var(--spectrum-transparent-white-600);
+					--mod-button-border-color-focus: var(--spectrum-transparent-white-500);
+				}
+			}
+
+			&.spectrum-Button--outline {
+				&:not(.spectrum-Button--secondary) {
+					--mod-button-background-color-hover: var(--spectrum-transparent-white-400);
+					--mod-button-background-color-down: var(--spectrum-transparent-white-500);
+					--mod-button-background-color-focus: var(--spectrum-transparent-white-400);
+
+					--mod-button-content-color-default: var(--spectrum-white);
+					--mod-button-content-color-hover: var(--spectrum-white);
+					--mod-button-content-color-down: var(--spectrum-white);
+					--mod-button-content-color-focus: var(--spectrum-white);
+
+					--mod-button-border-color-default: var(--spectrum-transparent-white-900);
+					--mod-button-border-color-hover: var(--spectrum-transparent-white-1000);
+					--mod-button-border-color-down: var(--spectrum-transparent-white-1000);
+					--mod-button-border-color-focus: var(--spectrum-transparent-white-1000);
+				}
+
+				&.spectrum-Button--secondary {
+					--mod-button-background-color-hover: var(--spectrum-transparent-white-400);
+					--mod-button-background-color-down: var(--spectrum-transparent-white-500);
+					--mod-button-background-color-focus: var(--spectrum-transparent-white-400);
+				}
+			}
+		}
+
+		/* static black */
+		&.spectrum-Button--staticBlack {
+			--mod-button-background-color-default: var(--spectrum-transparent-black-900);
+			--mod-button-background-color-hover: var(--spectrum-transparent-black-1000);
+			--mod-button-background-color-down: var(--spectrum-transparent-black-1000);
+			--mod-button-background-color-focus: var(--spectrum-transparent-black-1000);
+
+			--mod-button-content-color-default: var(--spectrum-white);
+			--mod-button-content-color-hover: var(--spectrum-white);
+			--mod-button-content-color-down: var(--spectrum-white);
+			--mod-button-content-color-focus: var(--spectrum-white);
+
+			&.spectrum-Button--secondary {
+				--mod-button-background-color-default: var(--spectrum-transparent-black-300);
+				--mod-button-background-color-hover: var(--spectrum-transparent-black-400);
+				--mod-button-background-color-down: var(--spectrum-transparent-black-500);
+				--mod-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+				--mod-button-content-color-default: var(--spectrum-black);
+				--mod-button-content-color-hover: var(--spectrum-black);
+				--mod-button-content-color-down: var(--spectrum-black);
+				--mod-button-content-color-focus: var(--spectrum-black);
+
+				&.spectrum-Button--outline {
+					--mod-button-background-color-hover: var(--spectrum-transparent-black-400);
+					--mod-button-background-color-down: var(--spectrum-transparent-black-500);
+					--mod-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+					--mod-button-border-color-default: var(--spectrum-transparent-black-400);
+					--mod-button-border-color-hover: var(--spectrum-transparent-black-500);
+					--mod-button-border-color-down: var(--spectrum-transparent-black-600);
+					--mod-button-border-color-focus: var(--spectrum-transparent-black-500);
+				}
+			}
+
+			&.spectrum-Button--outline {
+				&:not(.spectrum-Button--secondary) {
+					--mod-button-background-color-hover: var(--spectrum-transparent-black-400);
+					--mod-button-background-color-down: var(--spectrum-transparent-black-500);
+					--mod-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+					--mod-button-content-color-default: var(--spectrum-black);
+					--mod-button-content-color-hover: var(--spectrum-black);
+					--mod-button-content-color-down: var(--spectrum-black);
+					--mod-button-content-color-focus: var(--spectrum-black);
+
+					--mod-button-border-color-default: var(--spectrum-transparent-black-500);
+					--mod-button-border-color-hover: var(--spectrum-transparent-black-600);
+					--mod-button-border-color-down: var(--spectrum-transparent-black-700);
+					--mod-button-border-color-focus: var(--spectrum-transparent-black-600);
+				}
+			}
+		}
+	}
+}
diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css
index 851cb0efd6..9af3829626 100644
--- a/components/button/themes/spectrum.css
+++ b/components/button/themes/spectrum.css
@@ -11,448 +11,122 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-Button {
-		--spectrum-button-background-color-default: var(--spectrum-gray-75);
-		--spectrum-button-background-color-hover: var(--spectrum-gray-200);
-		--spectrum-button-background-color-down: var(--spectrum-gray-300);
-		--spectrum-button-background-color-focus: var(--spectrum-gray-200);
-
-		--spectrum-button-border-color-default: var(--spectrum-gray-400);
-		--spectrum-button-border-color-hover: var(--spectrum-gray-500);
-		--spectrum-button-border-color-down: var(--spectrum-gray-600);
-		--spectrum-button-border-color-focus: var(--spectrum-gray-500);
-
-		--spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
-		--spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
-		--spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
-		--spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
-		--spectrum-button-background-color-disabled: transparent;
-		--spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
-		--spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
-		&.spectrum-Button--accent {
-			--spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
-			--spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
-			--spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
-			--spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-content-color-default: var(--spectrum-white);
-			--spectrum-button-content-color-hover: var(--spectrum-white);
-			--spectrum-button-content-color-down: var(--spectrum-white);
-			--spectrum-button-content-color-focus: var(--spectrum-white);
+/* @combine .spectrum.spectrum--legacy */
 
-			--spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-			--spectrum-button-border-color-disabled: transparent;
-			--spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+@import "./spectrum-two.css";
 
-			&.spectrum-Button--outline {
-				--spectrum-button-background-color-default: transparent;
-				--spectrum-button-background-color-hover: var(--spectrum-accent-color-200);
-				--spectrum-button-background-color-down: var(--spectrum-accent-color-300);
-				--spectrum-button-background-color-focus: var(--spectrum-accent-color-200);
-
-				--spectrum-button-border-color-default: var(--spectrum-accent-color-900);
-				--spectrum-button-border-color-hover: var(--spectrum-accent-color-1000);
-				--spectrum-button-border-color-down: var(--spectrum-accent-color-1100);
-				--spectrum-button-border-color-focus: var(--spectrum-accent-color-1000);
-
-				--spectrum-button-content-color-default: var(--spectrum-accent-content-color-default);
-				--spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover);
-				--spectrum-button-content-color-down: var(--spectrum-accent-content-color-down);
-				--spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus);
-
-				--spectrum-button-background-color-disabled: transparent;
-				--spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
-				--spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-			}
-		}
-
-		&.spectrum-Button--negative {
-			--spectrum-button-background-color-default: var(--spectrum-negative-background-color-default);
-			--spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover);
-			--spectrum-button-background-color-down: var(--spectrum-negative-background-color-down);
-			--spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-content-color-default: var(--spectrum-white);
-			--spectrum-button-content-color-hover: var(--spectrum-white);
-			--spectrum-button-content-color-down: var(--spectrum-white);
-			--spectrum-button-content-color-focus: var(--spectrum-white);
-
-			--spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-			--spectrum-button-border-color-disabled: transparent;
-			--spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
-			&.spectrum-Button--outline {
-				--spectrum-button-background-color-default: transparent;
-				--spectrum-button-background-color-hover: var(--spectrum-negative-color-200);
-				--spectrum-button-background-color-down: var(--spectrum-negative-color-300);
-				--spectrum-button-background-color-focus: var(--spectrum-negative-color-200);
-
-				--spectrum-button-border-color-default: var(--spectrum-negative-color-900);
-				--spectrum-button-border-color-hover: var(--spectrum-negative-color-1000);
-				--spectrum-button-border-color-down: var(--spectrum-negative-color-1100);
-				--spectrum-button-border-color-focus: var(--spectrum-negative-color-1000);
-
-				--spectrum-button-content-color-default: var(--spectrum-negative-content-color-default);
-				--spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover);
-				--spectrum-button-content-color-down: var(--spectrum-negative-content-color-down);
-				--spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus);
-
-				--spectrum-button-background-color-disabled: transparent;
-				--spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
-				--spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-			}
-		}
+@container style(--system: legacy) {
+	.spectrum-Button {
+		--mod-button-background-color-default: var(--spectrum-gray-75);
+		--mod-button-background-color-hover: var(--spectrum-gray-200);
+		--mod-button-background-color-down: var(--spectrum-gray-300);
+		--mod-button-background-color-focus: var(--spectrum-gray-200);
 
 		&.spectrum-Button--primary {
-			--spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
-			--spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
-			--spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
-			--spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-content-color-default: var(--spectrum-white);
-			--spectrum-button-content-color-hover: var(--spectrum-white);
-			--spectrum-button-content-color-down: var(--spectrum-white);
-			--spectrum-button-content-color-focus: var(--spectrum-white);
-
-			--spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-			--spectrum-button-border-color-disabled: transparent;
-			--spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+			--mod-button-content-color-default: var(--spectrum-gray-50);
+			--mod-button-content-color-hover: var(--spectrum-gray-50);
+			--mod-button-content-color-down: var(--spectrum-gray-50);
+			--mod-button-content-color-focus: var(--spectrum-gray-50);
 
 			&.spectrum-Button--outline {
-				--spectrum-button-background-color-default: transparent;
-				--spectrum-button-background-color-hover: var(--spectrum-gray-300);
-				--spectrum-button-background-color-down: var(--spectrum-gray-400);
-				--spectrum-button-background-color-focus: var(--spectrum-gray-300);
-
-				--spectrum-button-border-color-default: var(--spectrum-gray-800);
-				--spectrum-button-border-color-hover: var(--spectrum-gray-900);
-				--spectrum-button-border-color-down: var(--spectrum-gray-900);
-				--spectrum-button-border-color-focus: var(--spectrum-gray-900);
-
-				--spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
-				--spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
-				--spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
-				--spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
-				--spectrum-button-background-color-disabled: transparent;
-				--spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
-				--spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+				--mod-button-background-color-hover: var(--spectrum-gray-300);
+				--mod-button-background-color-focus: var(--spectrum-gray-300);
 			}
 		}
 
 		&.spectrum-Button--secondary {
-			--spectrum-button-background-color-default: var(--spectrum-gray-200);
-			--spectrum-button-background-color-hover: var(--spectrum-gray-300);
-			--spectrum-button-background-color-down: var(--spectrum-gray-400);
-			--spectrum-button-background-color-focus: var(--spectrum-gray-300);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
-			--spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
-			--spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
-			--spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
-			--spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-			--spectrum-button-border-color-disabled: transparent;
-			--spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
-			&.spectrum-Button--outline {
-				--spectrum-button-background-color-default: transparent;
-				--spectrum-button-background-color-hover: var(--spectrum-gray-300);
-				--spectrum-button-background-color-down: var(--spectrum-gray-400);
-				--spectrum-button-background-color-focus: var(--spectrum-gray-300);
-
-				--spectrum-button-border-color-default: var(--spectrum-gray-300);
-				--spectrum-button-border-color-hover: var(--spectrum-gray-400);
-				--spectrum-button-border-color-down: var(--spectrum-gray-500);
-				--spectrum-button-border-color-focus: var(--spectrum-gray-400);
+			--mod-button-background-color-default: var(--spectrum-gray-200);
 
-				--spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
-				--spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
-				--spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
-				--spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
-				--spectrum-button-background-color-disabled: transparent;
-				--spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
-				--spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+			&:not(.spectrum-Button--outline) {
+				--mod-button-background-color-hover: var(--spectrum-gray-300);
+				--mod-button-background-color-focus: var(--spectrum-gray-300);
 			}
-		}
-
-		&.spectrum-Button--quiet {
-			--spectrum-button-background-color-default: transparent;
-			--spectrum-button-background-color-hover: var(--spectrum-gray-200);
-			--spectrum-button-background-color-down: var(--spectrum-gray-300);
-			--spectrum-button-background-color-focus: var(--spectrum-gray-200);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-background-color-disabled: transparent;
-			--spectrum-button-border-color-disabled: transparent;
-		}
 
-		&.is-selected {
-			--spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-			--spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
-			--spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
-			--spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-content-color-default: var(--spectrum-white);
-			--spectrum-button-content-color-hover: var(--spectrum-white);
-			--spectrum-button-content-color-down: var(--spectrum-white);
-			--spectrum-button-content-color-focus: var(--spectrum-white);
-
-			--spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-			--spectrum-button-border-color-disabled: transparent;
-
-			&.spectrum-Button--emphasized {
-				--spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
-				--spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
-				--spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
-				--spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
-			}
-		}
-
-		&.spectrum-Button--staticBlack,
-		&.spectrum-Button--staticWhite {
-			&.spectrum-Button--quiet {
-				--spectrum-button-border-color-default: transparent;
-				--spectrum-button-border-color-hover: transparent;
-				--spectrum-button-border-color-down: transparent;
-				--spectrum-button-border-color-focus: transparent;
+			&.spectrum-Button--outline {
+				--mod-button-background-color-hover: var(--spectrum-gray-300);
+				--mod-button-background-color-focus: var(--spectrum-gray-300);
 
-				--spectrum-button-border-color-disabled: transparent;
+				--mod-button-border-color-default: var(--spectrum-gray-300);
 			}
 		}
 
-		/* static white */
-
 		&.spectrum-Button--staticWhite {
-			--spectrum-button-background-color-default: var(--spectrum-transparent-white-800);
-			--spectrum-button-background-color-hover: var(--spectrum-transparent-white-900);
-			--spectrum-button-background-color-down: var(--spectrum-transparent-white-900);
-			--spectrum-button-background-color-focus: var(--spectrum-transparent-white-900);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-content-color-default: var(--spectrum-black);
-			--spectrum-button-content-color-hover: var(--spectrum-black);
-			--spectrum-button-content-color-down: var(--spectrum-black);
-			--spectrum-button-content-color-focus: var(--spectrum-black);
-
-			--spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
-			--spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
-			--spectrum-button-border-color-disabled: transparent;
-			--spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-
-			&.spectrum-Button--outline {
-				--spectrum-button-background-color-default: transparent;
-				--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
-				--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
-				--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
-
-				--spectrum-button-border-color-default: var(--spectrum-transparent-white-800);
-				--spectrum-button-border-color-hover: var(--spectrum-transparent-white-900);
-				--spectrum-button-border-color-down: var(--spectrum-transparent-white-900);
-				--spectrum-button-border-color-focus: var(--spectrum-transparent-white-900);
-
-				--spectrum-button-content-color-default: var(--spectrum-white);
-				--spectrum-button-content-color-hover: var(--spectrum-white);
-				--spectrum-button-content-color-down: var(--spectrum-white);
-				--spectrum-button-content-color-focus: var(--spectrum-white);
-
-				--spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
-				--spectrum-button-background-color-disabled: transparent;
-				--spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
-				--spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-			}
-
-			&.is-selected {
-				--spectrum-button-background-color-default: var(--spectrum-transparent-white-800);
-				--spectrum-button-background-color-hover: var(--spectrum-transparent-white-900);
-				--spectrum-button-background-color-down: var(--spectrum-transparent-white-900);
-				--spectrum-button-background-color-focus: var(--spectrum-transparent-white-900);
-
-				--spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black));
-				--spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black));
-				--spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black));
-				--spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black));
-
-				--spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
-				--spectrum-button-border-color-disabled: transparent;
+			--mod-button-background-color-default: var(--spectrum-transparent-white-800);
+			--mod-button-background-color-hover: var(--spectrum-transparent-white-900);
+			--mod-button-background-color-down: var(--spectrum-transparent-white-900);
+			--mod-button-background-color-focus: var(--spectrum-transparent-white-900);
+
+			&.spectrum-Button--secondary {
+				--mod-button-background-color-default: var(--spectrum-transparent-white-200);
+				--mod-button-background-color-hover: var(--spectrum-transparent-white-300);
+				--mod-button-background-color-down: var(--spectrum-transparent-white-400);
+				--mod-button-background-color-focus: var(--spectrum-transparent-white-300);
+
+				&.spectrum-Button--outline {
+					--mod-button-border-color-default: var(--spectrum-transparent-white-300);
+					--mod-button-border-color-hover: var(--spectrum-transparent-white-400);
+					--mod-button-border-color-down: var(--spectrum-transparent-white-500);
+					--mod-button-border-color-focus: var(--spectrum-transparent-white-400);
+				}
 			}
-		}
-
-		&.spectrum-Button--staticWhite.spectrum-Button--secondary {
-			--spectrum-button-background-color-default: var(--spectrum-transparent-white-200);
-			--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
-			--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
-			--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-content-color-default: var(--spectrum-white);
-			--spectrum-button-content-color-hover: var(--spectrum-white);
-			--spectrum-button-content-color-down: var(--spectrum-white);
-			--spectrum-button-content-color-focus: var(--spectrum-white);
-
-			--spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
-			--spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
-			--spectrum-button-border-color-disabled: transparent;
-			--spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
 
 			&.spectrum-Button--outline {
-				--spectrum-button-background-color-default: transparent;
-				--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
-				--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
-				--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
-
-				--spectrum-button-border-color-default: var(--spectrum-transparent-white-300);
-				--spectrum-button-border-color-hover: var(--spectrum-transparent-white-400);
-				--spectrum-button-border-color-down: var(--spectrum-transparent-white-500);
-				--spectrum-button-border-color-focus: var(--spectrum-transparent-white-400);
-
-				--spectrum-button-content-color-default: var(--spectrum-white);
-				--spectrum-button-content-color-hover: var(--spectrum-white);
-				--spectrum-button-content-color-down: var(--spectrum-white);
-				--spectrum-button-content-color-focus: var(--spectrum-white);
-
-				--spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
-				--spectrum-button-background-color-disabled: transparent;
-				--spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
-				--spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+				&:not(.spectrum-Button--secondary) {
+					--mod-button-background-color-hover: var(--spectrum-transparent-white-300);
+					--mod-button-background-color-down: var(--spectrum-transparent-white-400);
+					--mod-button-background-color-focus: var(--spectrum-transparent-white-300);
+
+					--mod-button-border-color-default: var(--spectrum-transparent-white-800);
+					--mod-button-border-color-hover: var(--spectrum-transparent-white-900);
+					--mod-button-border-color-down: var(--spectrum-transparent-white-900);
+					--mod-button-border-color-focus: var(--spectrum-transparent-white-900);
+				}
+
+				&.spectrum-Button--secondary {
+					--mod-button-background-color-hover: var(--spectrum-transparent-white-300);
+					--mod-button-background-color-down: var(--spectrum-transparent-white-400);
+					--mod-button-background-color-focus: var(--spectrum-transparent-white-300);
+				}
 			}
 		}
 
-		/* static black */
 		&.spectrum-Button--staticBlack {
-			--spectrum-button-background-color-default: var(--spectrum-transparent-black-800);
-			--spectrum-button-background-color-hover: var(--spectrum-transparent-black-900);
-			--spectrum-button-background-color-down: var(--spectrum-transparent-black-900);
-			--spectrum-button-background-color-focus: var(--spectrum-transparent-black-900);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-content-color-default: var(--spectrum-white);
-			--spectrum-button-content-color-hover: var(--spectrum-white);
-			--spectrum-button-content-color-down: var(--spectrum-white);
-			--spectrum-button-content-color-focus: var(--spectrum-white);
-
-			--spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
-			--spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
-			--spectrum-button-border-color-disabled: transparent;
-			--spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-
-			&.spectrum-Button--outline {
-				--spectrum-button-background-color-default: transparent;
-				--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
-				--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
-				--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
-
-				--spectrum-button-border-color-default: var(--spectrum-transparent-black-400);
-				--spectrum-button-border-color-hover: var(--spectrum-transparent-black-500);
-				--spectrum-button-border-color-down: var(--spectrum-transparent-black-600);
-				--spectrum-button-border-color-focus: var(--spectrum-transparent-black-500);
-
-				--spectrum-button-content-color-default: var(--spectrum-black);
-				--spectrum-button-content-color-hover: var(--spectrum-black);
-				--spectrum-button-content-color-down: var(--spectrum-black);
-				--spectrum-button-content-color-focus: var(--spectrum-black);
-
-				--spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
-				--spectrum-button-background-color-disabled: transparent;
-				--spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
-				--spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+			--mod-button-background-color-default: var(--spectrum-transparent-black-800);
+			--mod-button-background-color-hover: var(--spectrum-transparent-black-900);
+			--mod-button-background-color-down: var(--spectrum-transparent-black-900);
+			--mod-button-background-color-focus: var(--spectrum-transparent-black-900);
+
+			&.spectrum-Button--secondary {
+				--mod-button-background-color-default: var(--spectrum-transparent-black-200);
+				--mod-button-background-color-hover: var(--spectrum-transparent-black-300);
+				--mod-button-background-color-down: var(--spectrum-transparent-black-400);
+				--mod-button-background-color-focus: var(--spectrum-transparent-black-300);
+
+				&.spectrum-Button--outline {
+					--mod-button-border-color-default: var(--spectrum-transparent-black-300);
+					--mod-button-border-color-hover: var(--spectrum-transparent-black-400);
+					--mod-button-border-color-down: var(--spectrum-transparent-black-500);
+					--mod-button-border-color-focus: var(--spectrum-transparent-black-400);
+				}
 			}
-		}
-
-		&.spectrum-Button--staticBlack.spectrum-Button--secondary {
-			--spectrum-button-background-color-default: var(--spectrum-transparent-black-200);
-			--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
-			--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
-			--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
-
-			--spectrum-button-border-color-default: transparent;
-			--spectrum-button-border-color-hover: transparent;
-			--spectrum-button-border-color-down: transparent;
-			--spectrum-button-border-color-focus: transparent;
-
-			--spectrum-button-content-color-default: var(--spectrum-black);
-			--spectrum-button-content-color-hover: var(--spectrum-black);
-			--spectrum-button-content-color-down: var(--spectrum-black);
-			--spectrum-button-content-color-focus: var(--spectrum-black);
-
-			--spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
-			--spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
-			--spectrum-button-border-color-disabled: transparent;
-			--spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
 
 			&.spectrum-Button--outline {
-				--spectrum-button-background-color-default: transparent;
-				--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
-				--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
-				--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
-
-				--spectrum-button-border-color-default: var(--spectrum-transparent-black-300);
-				--spectrum-button-border-color-hover: var(--spectrum-transparent-black-400);
-				--spectrum-button-border-color-down: var(--spectrum-transparent-black-500);
-				--spectrum-button-border-color-focus: var(--spectrum-transparent-black-400);
-
-				--spectrum-button-content-color-default: var(--spectrum-black);
-				--spectrum-button-content-color-hover: var(--spectrum-black);
-				--spectrum-button-content-color-down: var(--spectrum-black);
-				--spectrum-button-content-color-focus: var(--spectrum-black);
-
-				--spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
-				--spectrum-button-background-color-disabled: transparent;
-				--spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
-				--spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+				&:not(.spectrum-Button--secondary) {
+					--mod-button-background-color-hover: var(--spectrum-transparent-black-300);
+					--mod-button-background-color-down: var(--spectrum-transparent-black-400);
+					--mod-button-background-color-focus: var(--spectrum-transparent-black-300);
+
+					--mod-button-border-color-default: var(--spectrum-transparent-black-400);
+					--mod-button-border-color-hover: var(--spectrum-transparent-black-500);
+					--mod-button-border-color-down: var(--spectrum-transparent-black-600);
+					--mod-button-border-color-focus: var(--spectrum-transparent-black-500);
+				}
+
+				&.spectrum-Button--secondary {
+					--mod-button-background-color-hover: var(--spectrum-transparent-black-300);
+					--mod-button-background-color-down: var(--spectrum-transparent-black-400);
+					--mod-button-background-color-focus: var(--spectrum-transparent-black-300);
+				}
 			}
 		}
 	}
diff --git a/components/buttongroup/metadata/metadata.json b/components/buttongroup/dist/metadata.json
similarity index 52%
rename from components/buttongroup/metadata/metadata.json
rename to components/buttongroup/dist/metadata.json
index e74734f850..38d29f26e3 100644
--- a/components/buttongroup/metadata/metadata.json
+++ b/components/buttongroup/dist/metadata.json
@@ -2,21 +2,21 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ButtonGroup",
-    ".spectrum-ButtonGroup .spectrum-ButtonGroup-item",
-    ".spectrum-ButtonGroup--sizeL",
-    ".spectrum-ButtonGroup--sizeM",
-    ".spectrum-ButtonGroup--sizeS",
-    ".spectrum-ButtonGroup--sizeXL",
-    ".spectrum-ButtonGroup--vertical"
+    ".spectrum-ButtonGroup-item",
+    ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS",
+    ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical"
   ],
   "modifiers": [
     "--mod-buttongroup-justify-content",
+    "--mod-buttongroup-spacing",
     "--mod-buttongroup-spacing-horizontal",
     "--mod-buttongroup-spacing-vertical"
   ],
   "component": [
-    "--spectrum-buttongroup-spacing-horizontal",
-    "--spectrum-buttongroup-spacing-vertical"
+    "--spectrum-buttongroup-display",
+    "--spectrum-buttongroup-flex-direction",
+    "--spectrum-buttongroup-justify-content",
+    "--spectrum-buttongroup-spacing"
   ],
   "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"],
   "system-theme": [],
diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css
index 2d3fa7ac5f..0501982478 100644
--- a/components/buttongroup/index.css
+++ b/components/buttongroup/index.css
@@ -12,43 +12,35 @@
  */
 
 .spectrum-ButtonGroup {
-	--spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
-	--spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeS {
-	--spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200);
-	--spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200);
-}
-
-.spectrum-ButtonGroup--sizeM {
-	--spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
-	--spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
+	/* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */
+	--spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-300)));
+	--spectrum-buttongroup-display: flex;
+	--spectrum-buttongroup-flex-direction: row;
+	--spectrum-buttongroup-justify-content: var(--mod-buttongroup-justify-content, normal);
+
+	&.spectrum-ButtonGroup--sizeS {
+		/* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */
+		--spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200)));
+	}
 
-.spectrum-ButtonGroup--sizeL {
-	--spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
-	--spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
+	&.spectrum-ButtonGroup--vertical {
+		/* @deprecated --mod-buttongroup-spacing-vertical -- replaced by generic --mod-buttongroup-spacing */
+		--mod-buttongroup-spacing: var(--mod-buttongroup-spacing-vertical);
 
-.spectrum-ButtonGroup--sizeXL {
-	--spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
-	--spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
+		--spectrum-buttongroup-display: inline-flex;
+		--spectrum-buttongroup-flex-direction: column;
+	}
 }
 
 .spectrum-ButtonGroup {
-	display: flex;
+	display: var(--spectrum-buttongroup-display);
+	flex-direction: var(--spectrum-buttongroup-flex-direction);
 	flex-wrap: wrap;
-	gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal));
-	justify-content: var(--mod-buttongroup-justify-content, normal);
 
-	.spectrum-ButtonGroup-item {
-		flex-shrink: 0;
-	}
+	gap: var(--spectrum-buttongroup-spacing);
+	justify-content: var(--spectrum-buttongroup-justify-content);
 }
 
-.spectrum-ButtonGroup--vertical {
-	display: inline-flex;
-	flex-direction: column;
-	gap: var(--mod-buttongroup-spacing-vertical, var(--spectrum-buttongroup-spacing-vertical));
+.spectrum-ButtonGroup-item {
+	flex-shrink: 0;
 }
diff --git a/components/buttongroup/metadata/mods.md b/components/buttongroup/metadata/mods.md
deleted file mode 100644
index d24339e5f5..0000000000
--- a/components/buttongroup/metadata/mods.md
+++ /dev/null
@@ -1,5 +0,0 @@
-| Modifiable custom properties           |
-| -------------------------------------- |
-| `--mod-buttongroup-justify-content`    |
-| `--mod-buttongroup-spacing-horizontal` |
-| `--mod-buttongroup-spacing-vertical`   |
diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json
index 7e4c88d55c..bdaa8e8c32 100644
--- a/components/buttongroup/package.json
+++ b/components/buttongroup/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js
index fce4956dd9..ba7e125de7 100644
--- a/components/buttongroup/stories/buttongroup.stories.js
+++ b/components/buttongroup/stories/buttongroup.stories.js
@@ -1,9 +1,10 @@
 import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ButtonGroup } from "./buttongroup.test.js";
+import { Template } from "./template.js";
 
 /**
  * A button group is a grouping of buttons whose actions are related to each other.
@@ -57,6 +58,10 @@ export default {
 		],
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13663-6530",
+		},
 		packageJson,
 		metadata,
 	},
@@ -71,8 +76,11 @@ Default.tags = ["!autodocs"];
 /**
  * Default spacing for Medium, Large, and Extra Large t-shirt sizes.
 */
-export const Horizontal = ButtonGroup.bind({});
+export const Horizontal = Template.bind({});
 Horizontal.tags = ["!dev"];
+Horizontal.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 Horizontal.args = Default.args;
 Horizontal.parameters = {
 	chromatic: { disableSnapshot: true },
@@ -81,8 +89,11 @@ Horizontal.parameters = {
 /**
  * Spacing for the Small t-shirt size.
 */
-export const HorizontalSmall = ButtonGroup.bind({});
+export const HorizontalSmall = Template.bind({});
 HorizontalSmall.tags = ["!dev"];
+HorizontalSmall.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 HorizontalSmall.args = {
 	size: "s"
 };
@@ -95,6 +106,9 @@ HorizontalSmall.parameters = {
 */
 export const Vertical = ButtonGroup.bind({});
 Vertical.tags = ["!dev"];
+Vertical.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 Vertical.args = {
 	vertical: true,
 };
@@ -105,8 +119,11 @@ Vertical.parameters = {
 /**
  * Spacing for the Small t-shirt size.
 */
-export const VerticalSmall = ButtonGroup.bind({});
+export const VerticalSmall = Template.bind({});
 VerticalSmall.tags = ["!dev"];
+VerticalSmall.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 VerticalSmall.args = {
 	vertical: true,
 	size: "s"
@@ -119,8 +136,11 @@ VerticalSmall.parameters = {
  * A button group in a disabled state shows that the buttons within the group exist, but are not available in that circumstance. This state can be used to maintain layout continuity and to communicate that a button group may become available later.
 */
 
-export const Disabled = ButtonGroup.bind({});
+export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 Disabled.args = {
 	items: [
 		{
diff --git a/components/buttongroup/stories/buttongroup.test.js b/components/buttongroup/stories/buttongroup.test.js
index 0a51ed2974..9b2d0e11c7 100644
--- a/components/buttongroup/stories/buttongroup.test.js
+++ b/components/buttongroup/stories/buttongroup.test.js
@@ -1,4 +1,4 @@
-import { Variants } from "@spectrum-css/preview/decorators";
+import { Sizes, Variants } from "@spectrum-css/preview/decorators";
 import { Template } from "./template.js";
 
 export const ButtonGroup = Variants({
@@ -7,10 +7,6 @@ export const ButtonGroup = Variants({
 		{
 			testHeading: "Default",
 		},
-		{
-			testHeading: "Vertical",
-			vertical: true,
-		},
 		{
 			testHeading: "Disabled",
 			items: [
@@ -27,6 +23,20 @@ export const ButtonGroup = Variants({
 					isDisabled: true,
 				},
 			]
-		}
+		},
+		{
+			testHeading: "Vertical",
+			vertical: true,
+		},
+		{
+			Template: (args, context) => Sizes({
+				Template,
+				withHeading: false,
+				withWrapperBorder: false,
+				...args
+			}, context),
+			testHeading: "Vertical sizing",
+			vertical: true,
+		},
 	],
 });
diff --git a/components/buttongroup/stories/template.js b/components/buttongroup/stories/template.js
index 1d85c23d2c..e6d1ac7704 100644
--- a/components/buttongroup/stories/template.js
+++ b/components/buttongroup/stories/template.js
@@ -15,8 +15,7 @@ export const Template = ({
 	<div
 		class=${classMap({
 			[rootClass]: true,
-			[`${rootClass}--size${size?.toUpperCase()}`]:
-				typeof size !== "undefined",
+			[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
 			[`${rootClass}--vertical`]: vertical,
 			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 		})}
diff --git a/components/calendar/metadata/metadata.json b/components/calendar/dist/metadata.json
similarity index 71%
rename from components/calendar/metadata/metadata.json
rename to components/calendar/dist/metadata.json
index f4998b6380..676c81a041 100644
--- a/components/calendar/metadata/metadata.json
+++ b/components/calendar/dist/metadata.json
@@ -6,13 +6,11 @@
     ".spectrum-Calendar-body",
     ".spectrum-Calendar-date",
     ".spectrum-Calendar-date.is-disabled",
-    ".spectrum-Calendar-date.is-disabled.is-range-selection",
     ".spectrum-Calendar-date.is-disabled.is-selected",
-    ".spectrum-Calendar-date.is-focused.is-range-selection:before",
-    ".spectrum-Calendar-date.is-focused.is-selected:before",
+    ".spectrum-Calendar-date.is-focused",
+    ".spectrum-Calendar-date.is-focused.is-range-selection",
+    ".spectrum-Calendar-date.is-focused.is-selected",
     ".spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection)",
-    ".spectrum-Calendar-date.is-focused.is-today:not(.is-range-selection)",
-    ".spectrum-Calendar-date.is-focused:before",
     ".spectrum-Calendar-date.is-focused:not(.is-range-selection)",
     ".spectrum-Calendar-date.is-focused:not(.is-range-selection):active",
     ".spectrum-Calendar-date.is-outsideMonth",
@@ -33,27 +31,17 @@
     ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end",
     ".spectrum-Calendar-date.is-range-selection.is-selection-start:after",
     ".spectrum-Calendar-date.is-range-selection.is-selection-start:before",
-    ".spectrum-Calendar-date.is-range-selection.is-today",
-    ".spectrum-Calendar-date.is-range-selection:hover:before",
+    ".spectrum-Calendar-date.is-range-selection:hover",
     ".spectrum-Calendar-date.is-selected",
-    ".spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start):before",
+    ".spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)",
     ".spectrum-Calendar-date.is-selected:not(.is-range-selection)",
-    ".spectrum-Calendar-date.is-selected:not(.is-range-selection):before",
-    ".spectrum-Calendar-date.is-selection-end",
-    ".spectrum-Calendar-date.is-selection-end.is-disabled",
-    ".spectrum-Calendar-date.is-selection-end:after",
-    ".spectrum-Calendar-date.is-selection-start",
-    ".spectrum-Calendar-date.is-selection-start.is-disabled",
-    ".spectrum-Calendar-date.is-selection-start:after",
     ".spectrum-Calendar-date.is-today",
-    ".spectrum-Calendar-date.is-today.is-disabled",
-    ".spectrum-Calendar-date.is-today.is-disabled:before",
-    ".spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection):hover:before",
-    ".spectrum-Calendar-date.is-today:before",
+    ".spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection)",
     ".spectrum-Calendar-date:active",
+    ".spectrum-Calendar-date:after",
     ".spectrum-Calendar-date:before",
     ".spectrum-Calendar-date:hover",
-    ".spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start):before",
+    ".spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)",
     ".spectrum-Calendar-date:lang(ja)",
     ".spectrum-Calendar-date:lang(ko)",
     ".spectrum-Calendar-date:lang(zh)",
@@ -61,9 +49,7 @@
     ".spectrum-Calendar-dayOfWeek[title]",
     ".spectrum-Calendar-header",
     ".spectrum-Calendar-nextMonth",
-    ".spectrum-Calendar-nextMonth:not([disabled])",
     ".spectrum-Calendar-prevMonth",
-    ".spectrum-Calendar-prevMonth:not([disabled])",
     ".spectrum-Calendar-table",
     ".spectrum-Calendar-tableCell",
     ".spectrum-Calendar-tableCell:focus",
@@ -75,21 +61,29 @@
     "--mod-calendar-border-radius-reset",
     "--mod-calendar-border-width-reset",
     "--mod-calendar-button-icon-color",
+    "--mod-calendar-day-background-color",
     "--mod-calendar-day-background-color-cap-selected",
     "--mod-calendar-day-background-color-down",
+    "--mod-calendar-day-background-color-focus",
     "--mod-calendar-day-background-color-hover",
     "--mod-calendar-day-background-color-key-focus",
     "--mod-calendar-day-background-color-selected",
     "--mod-calendar-day-background-color-selected-hover",
+    "--mod-calendar-day-background-layer-color",
+    "--mod-calendar-day-border-color",
     "--mod-calendar-day-border-color-key-focus",
     "--mod-calendar-day-border-size",
+    "--mod-calendar-day-fill-content",
+    "--mod-calendar-day-fill-display",
     "--mod-calendar-day-height",
     "--mod-calendar-day-padding",
+    "--mod-calendar-day-text-color",
     "--mod-calendar-day-text-color-cap-selected",
     "--mod-calendar-day-text-color-disabled",
     "--mod-calendar-day-text-color-hover",
     "--mod-calendar-day-text-color-key-focus",
     "--mod-calendar-day-text-color-selected",
+    "--mod-calendar-day-text-font-weight",
     "--mod-calendar-day-text-font-weight-cap-selected",
     "--mod-calendar-day-text-font-weight-selected",
     "--mod-calendar-day-text-size",
@@ -101,8 +95,8 @@
     "--mod-calendar-day-today-border-color",
     "--mod-calendar-day-today-border-color-disabled",
     "--mod-calendar-day-today-text-color",
-    "--mod-calendar-day-today-text-color-disabled",
     "--mod-calendar-day-today-text-font-weight",
+    "--mod-calendar-day-visibility",
     "--mod-calendar-day-width",
     "--mod-calendar-margin-x",
     "--mod-calendar-margin-y",
@@ -115,38 +109,50 @@
     "--spectrum-calendar-border-radius-reset",
     "--spectrum-calendar-border-width-reset",
     "--spectrum-calendar-button-icon-color",
+    "--spectrum-calendar-day-background",
+    "--spectrum-calendar-day-background-cap-selected",
     "--spectrum-calendar-day-background-color-cap-selected",
     "--spectrum-calendar-day-background-color-down",
     "--spectrum-calendar-day-background-color-hover",
     "--spectrum-calendar-day-background-color-key-focus",
     "--spectrum-calendar-day-background-color-selected",
+    "--spectrum-calendar-day-background-color-selected-disabled",
     "--spectrum-calendar-day-background-color-selected-hover",
+    "--spectrum-calendar-day-background-down",
+    "--spectrum-calendar-day-background-focus",
+    "--spectrum-calendar-day-background-hover",
+    "--spectrum-calendar-day-background-layer-color",
+    "--spectrum-calendar-day-background-selected",
+    "--spectrum-calendar-day-background-selected-hover",
+    "--spectrum-calendar-day-border-color",
+    "--spectrum-calendar-day-border-color-focus",
     "--spectrum-calendar-day-border-color-key-focus",
     "--spectrum-calendar-day-border-size",
     "--spectrum-calendar-day-height",
     "--spectrum-calendar-day-padding",
+    "--spectrum-calendar-day-text-color",
     "--spectrum-calendar-day-text-color-cap-selected",
     "--spectrum-calendar-day-text-color-disabled",
     "--spectrum-calendar-day-text-color-hover",
     "--spectrum-calendar-day-text-color-key-focus",
     "--spectrum-calendar-day-text-color-selected",
+    "--spectrum-calendar-day-text-font-weight",
     "--spectrum-calendar-day-text-font-weight-cap-selected",
     "--spectrum-calendar-day-text-font-weight-selected",
     "--spectrum-calendar-day-text-size",
-    "--spectrum-calendar-day-text-size-han",
-    "--spectrum-calendar-day-title-text-color",
-    "--spectrum-calendar-day-title-text-font-weight",
-    "--spectrum-calendar-day-title-text-size",
     "--spectrum-calendar-day-today-background-color-selected-hover",
+    "--spectrum-calendar-day-today-background-selected-hover",
     "--spectrum-calendar-day-today-border-color",
     "--spectrum-calendar-day-today-border-color-disabled",
     "--spectrum-calendar-day-today-text-color",
-    "--spectrum-calendar-day-today-text-color-disabled",
     "--spectrum-calendar-day-today-text-font-weight",
     "--spectrum-calendar-day-width",
+    "--spectrum-calendar-heading-text-size",
     "--spectrum-calendar-margin-x",
     "--spectrum-calendar-margin-y",
     "--spectrum-calendar-title-height",
+    "--spectrum-calendar-title-text-color",
+    "--spectrum-calendar-title-text-font-weight",
     "--spectrum-calendar-title-text-letter-spacing",
     "--spectrum-calendar-title-text-size",
     "--spectrum-calendar-width"
@@ -155,38 +161,42 @@
     "--spectrum-bold-font-weight",
     "--spectrum-border-width-200",
     "--spectrum-component-height-100",
+    "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
     "--spectrum-font-size-100",
     "--spectrum-font-size-300",
     "--spectrum-font-size-50",
-    "--spectrum-gray-400",
-    "--spectrum-gray-500",
-    "--spectrum-gray-700",
+    "--spectrum-gray-100-rgb",
     "--spectrum-gray-800",
-    "--spectrum-gray-900",
-    "--spectrum-logical-rotation"
+    "--spectrum-logical-rotation",
+    "--spectrum-neutral-content-color-default",
+    "--spectrum-neutral-content-color-down",
+    "--spectrum-neutral-content-color-hover",
+    "--spectrum-neutral-content-color-key-focus",
+    "--spectrum-neutral-subdued-content-color-default",
+    "--spectrum-regular-font-weight"
+  ],
+  "system-theme": ["--system-calendar-day-background-color-selected-disabled"],
+  "passthroughs": [
+    "--mod-actionbutton-content-color-default",
+    "--mod-actionbutton-edge-to-text",
+    "--mod-actionbutton-min-width"
   ],
-  "system-theme": [],
-  "passthroughs": [],
   "high-contrast": [
-    "--highcontrast-calendar-button-icon-color",
-    "--highcontrast-calendar-day-background-color-cap-selected",
-    "--highcontrast-calendar-day-background-color-down",
-    "--highcontrast-calendar-day-background-color-hover",
-    "--highcontrast-calendar-day-background-color-key-focus",
-    "--highcontrast-calendar-day-background-color-selected",
-    "--highcontrast-calendar-day-background-color-selected-hover",
-    "--highcontrast-calendar-day-border-color-key-focus",
+    "--highcontrast-calendar-day-background-cap-selected",
+    "--highcontrast-calendar-day-background-down",
+    "--highcontrast-calendar-day-background-focus",
+    "--highcontrast-calendar-day-background-hover",
+    "--highcontrast-calendar-day-background-selected",
+    "--highcontrast-calendar-day-background-selected-hover",
+    "--highcontrast-calendar-day-border-color-focus",
     "--highcontrast-calendar-day-text-color-cap-selected",
-    "--highcontrast-calendar-day-text-color-disabled",
     "--highcontrast-calendar-day-text-color-hover",
     "--highcontrast-calendar-day-text-color-key-focus",
     "--highcontrast-calendar-day-text-color-selected",
     "--highcontrast-calendar-day-title-text-color",
-    "--highcontrast-calendar-day-today-background-color-selected-hover",
+    "--highcontrast-calendar-day-today-background-selected-hover",
     "--highcontrast-calendar-day-today-border-color",
-    "--highcontrast-calendar-day-today-border-color-disabled",
-    "--highcontrast-calendar-day-today-text-color",
-    "--highcontrast-calendar-day-today-text-color-disabled"
+    "--highcontrast-calendar-day-today-text-color"
   ]
 }
diff --git a/components/calendar/index.css b/components/calendar/index.css
index ec2cabe508..2ca1bc289a 100644
--- a/components/calendar/index.css
+++ b/components/calendar/index.css
@@ -11,57 +11,139 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 .spectrum-Calendar {
-	--spectrum-calendar-day-width: var(--spectrum-component-height-100);
-	--spectrum-calendar-day-height: var(--spectrum-component-height-100);
-	--spectrum-calendar-border-radius-reset: 0;
-	--spectrum-calendar-border-width-reset: 0;
-	--spectrum-calendar-day-border-size: var(--spectrum-border-width-200);
-	--spectrum-calendar-margin-y: 24px;
-	--spectrum-calendar-margin-x: 32px;
-	--spectrum-calendar-day-padding: 4px;
-	--spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7);
-
-	--spectrum-calendar-title-text-letter-spacing: 0.06em;
-	--spectrum-calendar-title-height: 32px;
-	--spectrum-calendar-title-text-size: var(--spectrum-font-size-300);
-
-	--spectrum-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-calendar-day-title-text-color: var(--spectrum-gray-700);
-	--spectrum-calendar-day-title-text-size: var(--spectrum-font-size-50);
-	--spectrum-calendar-day-text-size-han: var(--spectrum-font-size-50);
-
-	--spectrum-calendar-day-text-size: var(--spectrum-font-size-100);
-	--spectrum-calendar-day-text-color-selected: var(--spectrum-gray-900);
-	--spectrum-calendar-day-text-color-hover: var(--spectrum-gray-900);
-	--spectrum-calendar-day-text-color-cap-selected: var(--spectrum-gray-900);
-	--spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight);
-	--spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight);
-
-	--spectrum-calendar-day-today-text-color: var(--spectrum-gray-800);
-	--spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-calendar-day-today-border-color: var(--spectrum-gray-800);
-
-	--spectrum-calendar-day-today-text-color-disabled: var(--spectrum-gray-500);
-	--spectrum-calendar-day-today-border-color-disabled: var(--spectrum-gray-400);
-	--spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color);
-
-	--spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900);
-
-	--spectrum-calendar-button-icon-color: var(--spectrum-gray-700);
+	--spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100));
+	--spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100));
+	--spectrum-calendar-day-border-size: var(--mod-calendar-day-border-size, var(--spectrum-border-width-200));
+	--spectrum-calendar-day-padding: var(--mod-calendar-day-padding, 4px);
+
+	--spectrum-calendar-border-radius-reset: var(--mod-calendar-border-radius-reset, 0);
+	--spectrum-calendar-border-width-reset: var(--mod-calendar-border-width-reset, 0);
+	--spectrum-calendar-margin-y: var(--mod-calendar-margin-y, 24px);
+	--spectrum-calendar-margin-x: var(--mod-calendar-margin-x, 32px);
+
+	/* combines (day-width and day-padding x 2) x 7 days a week */
+	--spectrum-calendar-width: var(--mod-calendar-width, calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7));
+
+	/* Add letter spacing of 0.66px from Typography > Detail  issue #407 */
+	--spectrum-calendar-title-text-letter-spacing: var(--mod-calendar-title-text-letter-spacing, 0.06em);
+	--spectrum-calendar-title-height: var(--mod-calendar-title-height, 32px);
+	--spectrum-calendar-title-text-size: var(--mod-calendar-title-text-size, var(--spectrum-font-size-300));
+
+	--spectrum-calendar-title-text-font-weight: var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight));
+	--spectrum-calendar-title-text-color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default)));
+
+	--spectrum-calendar-heading-text-size: var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50));
+
+	--spectrum-calendar-button-icon-color: var(--mod-calendar-button-icon-color, var(--spectrum-neutral-subdued-content-color-default));
 
 	&:dir(rtl) {
 		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 	}
 }
 
+.spectrum-Calendar-date {
+	--spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent);
+	--spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
+	--spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
+	--spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
+	--spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)));
+	--spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)));
+	--spectrum-calendar-day-background-down: var(--highcontrast-calendar-day-background-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)));
+
+	--spectrum-calendar-day-background-layer-color: var(--mod-calendar-day-background-layer-color, transparent);
+
+	--spectrum-calendar-day-border-color: var(--mod-calendar-day-border-color, transparent);
+	--spectrum-calendar-day-border-color-focus: var(--highcontrast-calendar-day-border-color-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
+
+	--spectrum-calendar-day-text-size: var(--mod-calendar-day-text-size, var(--spectrum-font-size-100));
+	--spectrum-calendar-day-text-font-weight: var(--mod-calendar-day-text-font-weight, var(--spectrum-regular-font-weight));
+	--spectrum-calendar-day-text-font-weight-selected: var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-bold-font-weight));
+	--spectrum-calendar-day-text-font-weight-cap-selected: var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-bold-font-weight));
+
+	/* Styles specific to the today identifier */
+	--spectrum-calendar-day-today-background-selected-hover: var(--highcontrast-calendar-day-today-background-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)));
+	--spectrum-calendar-day-today-text-font-weight: var(--mod-calendar-day-today-text-font-weight, var(--spectrum-bold-font-weight));
+	--spectrum-calendar-day-today-text-color: var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default)));
+	/* @todo There's not a good semantic alias to map this to */
+	--spectrum-calendar-day-today-border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800)));
+
+	/* Applied to both title-text-color and today-text-color */
+	--spectrum-calendar-day-text-color: var(--mod-calendar-day-text-color, var(--spectrum-neutral-subdued-content-color-default));
+	--spectrum-calendar-day-text-color-selected: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down)));
+	--spectrum-calendar-day-text-color-cap-selected: var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down)));
+	--spectrum-calendar-day-text-color-hover: var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover)));
+	--spectrum-calendar-day-text-color-key-focus: var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus)));
+
+	/* Disabled state */
+	--spectrum-calendar-day-text-color-disabled: var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color));
+	--spectrum-calendar-day-today-border-color-disabled: var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-disabled-border-color));
+
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-calendar-day-text-size: var(--mod-calendar-day-text-size-han, var(--spectrum-font-size-50));
+	}
+}
+
+@media (forced-colors: active) {
+	.spectrum-Calendar-date {
+		--highcontrast-calendar-day-title-text-color: CanvasText;
+
+		--highcontrast-calendar-day-text-color-selected: HighlightText;
+		--highcontrast-calendar-day-text-color-cap-selected: HighlightText;
+		--highcontrast-calendar-day-text-color-hover: HighlightText;
+		--highcontrast-calendar-day-text-color-key-focus: ButtonText;
+
+		--highcontrast-calendar-day-background-selected: Highlight;
+		--highcontrast-calendar-day-background-selected-hover: Highlight;
+		--highcontrast-calendar-day-background-cap-selected: Highlight;
+		--highcontrast-calendar-day-background-hover: Highlight;
+		--highcontrast-calendar-day-background-focus: ButtonFace;
+		--highcontrast-calendar-day-background-down: ButtonFace;
+
+		--highcontrast-calendar-day-today-border-color: ButtonText;
+		--highcontrast-calendar-day-border-color-focus: ButtonText;
+
+		--highcontrast-calendar-day-today-text-color: ButtonText;
+		--highcontrast-calendar-day-today-background-selected-hover: Highlight;
+
+		forced-color-adjust: none;
+
+		&::before {
+			background: Transparent !important;
+		}
+
+		&.is-selected {
+			background: Highlight;
+		}
+
+		&.is-disabled {
+			--highcontrast-calendar-day-title-text-color: GrayText;
+
+			--highcontrast-calendar-day-text-color-hover: GrayText;
+			--highcontrast-calendar-day-text-color-key-focus: GrayText;
+
+			--highcontrast-calendar-day-today-text-color: HighlightText;
+			--highcontrast-calendar-day-today-border-color: HighlightText;
+		}
+
+		&.is-range-selection.is-selection-start,
+		&.is-range-selection.is-selection-end {
+			--mod-calendar-day-fill-content: none;
+		}
+	}
+}
+
 .spectrum-Calendar {
-	inline-size: var(--mod-calendar-width, var(--spectrum-calendar-width));
 	display: inline-block;
+	inline-size: var(--spectrum-calendar-width);
 }
 
 .spectrum-Calendar--padded {
-	margin: var(--mod-calendar-margin-x, var(--spectrum-calendar-margin-x)) var(--mod-calendar-margin-y, var(--spectrum-calendar-margin-y));
+	margin: var(--spectrum-calendar-margin-x) var(--spectrum-calendar-margin-y);
 }
 
 .spectrum-Calendar-header {
@@ -71,11 +153,11 @@
 }
 
 .spectrum-Calendar-title {
-	color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-calendar-day-title-text-color)));
-	font-size: var(--mod-calendar-title-text-size, var(--spectrum-calendar-title-text-size));
-	font-weight: bold;
+	color: var(--spectrum-calendar-title-text-color);
+	font-size: var(--spectrum-calendar-title-text-size);
+	font-weight: var(--spectrum-calendar-title-text-font-weight);
 
-	line-height: var(--mod-calendar-title-height, var(--spectrum-calendar-title-height));
+	line-height: var(--spectrum-calendar-title-height);
 	margin: 0;
 	order: 1;
 	flex-grow: 1;
@@ -88,11 +170,14 @@
 
 .spectrum-Calendar-prevMonth,
 .spectrum-Calendar-nextMonth {
-	transform: var(--spectrum-logical-rotation);
-
-	&:not([disabled]) {
-		color: var(--highcontrast-calendar-button-icon-color, var(--mod-calendar-button-icon-color, var(--spectrum-calendar-button-icon-color)));
-	}
+	/* @passthrough start */
+	/* Mimic the placement and sizing of the dates in the grid below */
+	--mod-actionbutton-edge-to-text: var(--spectrum-calendar-day-padding);
+	--mod-actionbutton-min-width: var(--spectrum-calendar-day-width);
+	--mod-actionbutton-content-color-default: var(--spectrum-calendar-button-icon-color);
+	/* @passthrough end */
+
+	transform: var(--spectrum-logical-rotation,);
 }
 
 .spectrum-Calendar-prevMonth {
@@ -109,13 +194,13 @@
 	justify-content: flex-end;
 	block-size: 100%;
 
-	inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
+	inline-size: var(--spectrum-calendar-day-width);
 
 	border-block-end: none !important; /* override abbr styling from normalize.css */
 
-	color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-calendar-day-title-text-color)));
-	font-size: var(--mod-calendar-day-title-text-size, var(--spectrum-calendar-day-title-text-size));
-	font-weight: var(--mod-calendar-day-title-text-font-weight, var(--spectrum-calendar-day-title-text-font-weight));
+	color: var(--spectrum-calendar-title-text-color);
+	font-size: var(--spectrum-calendar-heading-text-size);
+	font-weight: var(--spectrum-calendar-title-text-font-weight);
 	text-transform: uppercase;
 	text-decoration: none !important; /* override abbr styling from normalize.css */
 
@@ -130,8 +215,7 @@
 		text-decoration: underline;
 		text-decoration: underline dotted;
 
-		/* Add letter spacing of 0.66px from Typography > Detail  issue #407 */
-		letter-spacing: var(--mod-calendar-title-text-letter-spacing, var(--spectrum-calendar-title-text-letter-spacing));
+		letter-spacing: var(--spectrum-calendar-title-text-letter-spacing);
 	}
 }
 
@@ -142,8 +226,6 @@
 .spectrum-Calendar-table {
 	table-layout: fixed;
 
-	/* width: 100%; */
-
 	border-collapse: collapse;
 	border-spacing: 0;
 
@@ -152,11 +234,13 @@
 
 .spectrum-Calendar-tableCell {
 	text-align: center;
+
 	position: relative;
 	box-sizing: content-box;
-	block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height));
-	inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-	padding: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding));
+
+	block-size: var(--spectrum-calendar-day-height);
+	inline-size: var(--spectrum-calendar-day-width);
+	padding: var(--spectrum-calendar-day-padding);
 
 	&:focus {
 		outline: 0;
@@ -166,106 +250,128 @@
 .spectrum-Calendar-date {
 	/* This is fun, but we need to trick the table so it doesn't size itself in a weird way */
 	position: absolute;
-	display: block;
+	display: var(--mod-calendar-day-visibility, block);
 	inset-block-start: 0;
 	inset-inline-start: 0;
 
 	box-sizing: border-box;
 
-	block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height));
-	inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-	margin: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding));
+	block-size: var(--spectrum-calendar-day-height);
+	inline-size: var(--spectrum-calendar-day-width);
+	margin: var(--spectrum-calendar-day-padding);
 
-	border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-	border: var(--mod-calendar-day-border-size, var(--spectrum-calendar-day-border-size)) solid transparent;
+	border-width: var(--spectrum-calendar-day-border-size);
+	border-style: solid;
+	border-color: var(--spectrum-calendar-day-border-color);
+	border-radius: var(--spectrum-calendar-day-width);
 
-	font-size: var(--mod-calendar-day-text-size, var(--spectrum-calendar-day-text-size));
-	line-height: calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) - var(--mod-calendar-day-border-size, var(--spectrum-calendar-day-border-size)) * 2);
+	font-size: var(--spectrum-calendar-day-text-size);
+	font-weight: var(--spectrum-calendar-day-text-font-weight);
+	line-height: calc(var(--spectrum-calendar-day-width) - var(--spectrum-calendar-day-border-size) * 2);
 	white-space: nowrap;
 
+	color: var(--spectrum-calendar-day-text-color);
+	background: var(--spectrum-calendar-day-background-layer-color);
+
 	cursor: pointer;
 
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		font-size: var(--mod-calendar-day-text-size-han, var(--spectrum-calendar-day-text-size-han));
+	&::before {
+		content: "";
+		position: absolute;
+		inset-block-start: calc(50% - var(--spectrum-calendar-day-width) / 2);
+		inset-inline-start: calc(50% - var(--spectrum-calendar-day-width) / 2);
+
+		box-sizing: border-box;
+		inline-size: var(--spectrum-calendar-day-width);
+		block-size: var(--spectrum-calendar-day-height);
+
+		background: var(--spectrum-calendar-day-background);
+
+		border-width: var(--spectrum-calendar-day-border-size);
+		border-style: solid;
+		border-color: var(--mod-calendar-day-border-color, transparent);
+
+		border-radius: var(--spectrum-calendar-day-width);
 	}
 
-	&.is-disabled {
-		cursor: default;
-		pointer-events: none;
+	&::after {
+		position: absolute;
+		inset-block-start: 0;
+
+		display: var(--mod-calendar-day-fill-display, none);
+
+		block-size: var(--spectrum-calendar-day-height);
+		inline-size: var(--spectrum-calendar-day-width);
+
+		border-radius: var(--spectrum-calendar-day-width);
+		background: transparent;
+
+		content: var(--mod-calendar-day-fill-content, "");
 	}
 
-	&.is-outsideMonth {
-		display: none;
+	&:hover {
+		--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-hover);
+
+		&:not(.is-selection-end, .is-selection-start) {
+			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-hover);
+		}
+
+		&.is-selected:not(.is-selection-end, .is-selection-start),
+		&.is-range-selection {
+			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-selected-hover);
+		}
 	}
 
-	&::before {
-		content: "";
-		position: absolute;
-		inset-block-start: calc(50% - calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) / 2));
-		inset-inline-start: calc(50% - calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) / 2));
-		box-sizing: border-box;
-		inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-		block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height));
-		border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-		border: var(--mod-calendar-day-border-size, var(--spectrum-calendar-day-border-size)) solid transparent;
+	&:active {
+		/* Applied behind the selected circle around the date */
+		--mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-down);
 	}
 
-	&.is-selected:not(.is-range-selection) {
-		font-weight: var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-calendar-day-text-font-weight-selected));
+	&.is-focused {
+		--mod-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus);
 
-		&::before {
-			/* No highlight for lone selections */
-			display: none;
+		&.is-selected,
+		&.is-range-selection {
+			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-selected);
 		}
 	}
 
-	&.is-today {
-		font-weight: var(--mod-calendar-day-today-text-font-weight, var(--spectrum-calendar-day-today-text-font-weight));
+	&.is-outsideMonth {
+		--mod-calendar-day-visibility: none;
 	}
 
 	&.is-range-selection {
+		inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2);
+
 		/* overrides to make the cells appear connected */
-		margin: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) 0;
-		border-width: var(--mod-calendar-border-width-reset, var(--spectrum-calendar-border-width-reset));
-		line-height: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height));
-		border-radius: var(--mod-calendar-border-radius-reset, var(--spectrum-calendar-border-radius-reset));
+		margin: var(--spectrum-calendar-day-padding) 0;
 
-		inline-size: calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) + calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2));
+		border-width: var(--spectrum-calendar-border-width-reset);
+		border-radius: var(--spectrum-calendar-border-radius-reset);
+
+		line-height: var(--spectrum-calendar-day-height);
 
-		&.is-range-start,
-		&.is-range-end,
 		&.is-selection-start,
-		&.is-selection-end {
-			inline-size: calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) + var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)));
+		&.is-selection-end,
+		&.is-range-start,
+		&.is-selection-start {
+			inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
 		}
 
 		&.is-selection-start,
 		&.is-selection-end {
-			font-weight: var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-calendar-day-text-font-weight-cap-selected));
-
-			&::after {
-				position: absolute;
-				inset-block-start: 0;
-
-				display: block;
-
-				block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height));
-				inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-
-				border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-
-				content: "";
-			}
+			--mod-calendar-day-fill-display: block;
+			--mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-selected);
+			--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected);
 		}
 
 		&.is-range-start,
 		&.is-selection-start {
-			padding-inline-end: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding));
-			margin-inline-start: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding));
-			border-start-start-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-			border-end-start-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
+			padding-inline-end: var(--spectrum-calendar-day-padding);
+			margin-inline-start: var(--spectrum-calendar-day-padding);
+
+			border-start-start-radius: var(--spectrum-calendar-day-width);
+			border-end-start-radius: var(--spectrum-calendar-day-width);
 
 			&::before,
 			&::after {
@@ -275,10 +381,12 @@
 
 		&.is-range-end,
 		&.is-selection-end {
-			padding-inline-start: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding));
-			margin-inline-end: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding));
-			border-start-end-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-			border-end-end-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
+			inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
+			padding-inline-start: var(--spectrum-calendar-day-padding);
+			margin-inline-end: var(--spectrum-calendar-day-padding);
+
+			border-start-end-radius: var(--spectrum-calendar-day-width);
+			border-end-end-radius: var(--spectrum-calendar-day-width);
 
 			&::before,
 			&::after {
@@ -287,176 +395,81 @@
 			}
 		}
 
+		/* dates that are both start & end */
 		&.is-selection-start.is-selection-end,
 		&.is-selection-start.is-range-end,
 		&.is-selection-end.is-range-start,
 		&.is-range-start.is-range-end {
-			inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
-			border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width));
+			inline-size: var(--spectrum-calendar-day-width);
+			border-radius: var(--spectrum-calendar-day-width);
 		}
 	}
-}
-
-.spectrum-Calendar-date {
-	color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-calendar-day-title-text-color)));
-
-	&:hover {
-		color: var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-calendar-day-text-color-hover)));
 
-		&:not(.is-selection-end, .is-selection-start) {
-			&::before {
-				background: var(--highcontrast-calendar-day-background-color-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)));
-			}
+	&:not(.is-range-selection) {
+		&.is-focused:active,
+		&.is-focused.is-selected {
+			--mod-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-cap-selected);
+			--mod-calendar-day-background-color-key-focus: var(--spectrum-calendar-day-background-cap-selected);
 		}
 
-		&.is-selected:not(.is-selection-end, .is-selection-start)::before {
-			background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
+		&.is-focused {
+			--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-key-focus);
+			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-focus);
+			--mod-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus);
 		}
 
-		&.is-range-selection {
-			&::before {
-				background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
-			}
+		&.is-today.is-selected {
+			--mod-calendar-day-background-color-hover: var(--spectrum-calendar-day-today-background-selected-hover);
 		}
-	}
 
-	&:active {
-		background-color: var(--highcontrast-calendar-day-background-color-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)));
+		&.is-selected {
+			--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected);
+			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-cap-selected);
+			--mod-calendar-day-background-layer-color: transparent;
+			--mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-cap-selected);
+		}
 	}
 
 	&.is-selected {
-		color: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-calendar-day-text-color-selected)));
-		background: var(--highcontrast-calendar-day-background-color-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
-	}
+		--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-selected);
 
-	&.is-selected:not(.is-range-selection) {
-		background: var(--highcontrast-calendar-day-background-color-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
+		/* Applied behind the selected circle around the date */
+		--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-cap-selected);
+		--mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected);
 	}
 
 	&.is-today {
-		color: var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-calendar-day-today-text-color)));
-		border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-calendar-day-today-border-color)));
-
-		&::before {
-			border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-calendar-day-today-border-color)));
-		}
-
-		&.is-selected:not(.is-range-selection):hover::before {
-			background: var(--highcontrast-calendar-day-today-background-color-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)));
-		}
-
-		&.is-disabled {
-			color: var(--highcontrast-calendar-day-today-text-color-disabled, var(--mod-calendar-day-today-text-color-disabled, var(--spectrum-calendar-day-today-text-color-disabled)));
-			border-color: var(--highcontrast-calendar-day-today-border-color-disabled, var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-calendar-day-today-border-color-disabled)));
-
-			&::before {
-				border-color: var(--highcontrast-calendar-day-today-border-color-disabled, var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-calendar-day-today-border-color-disabled)));
-			}
-		}
-	}
-
-	&.is-focused:not(.is-range-selection) {
-		background: var(--highcontrast-calendar-day-background-color-key-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)));
-		border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
-		color: var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-calendar-day-text-color-key-focus)));
-
-		&.is-today {
-			border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
-		}
-
-		&:active,
-		&.is-selected {
-			color: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-calendar-day-text-color-selected)));
-			background: var(--highcontrast-calendar-day-background-color-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
-			border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
-		}
-	}
-
-	&.is-focused {
-		&.is-selected {
-			&::before {
-				background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
-			}
-		}
-
-		&.is-range-selection {
-			&::before {
-				background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
-			}
-		}
-
-		&::before {
-			border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
-		}
+		--mod-calendar-day-text-color: var(--spectrum-calendar-day-today-text-color);
+		--mod-calendar-day-border-color: var(--spectrum-calendar-day-today-border-color);
+		--mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-today-text-font-weight);
 	}
 
 	&.is-disabled {
-		color: var(--highcontrast-calendar-day-text-color-disabled, var(--mod-calendar-day-text-color-disabled, var(--spectrum-calendar-day-text-color-disabled)));
-	}
-
-	&.is-selection-start,
-	&.is-selection-end {
-		color: var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-calendar-day-text-color-cap-selected)));
-
-		&::after {
-			background-color: var(--highcontrast-calendar-day-background-color-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
-		}
+		--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-disabled);
+		--mod-calendar-day-text-color-selected: var(--spectrum-calendar-day-text-color-disabled);
+		--mod-calendar-day-text-color-cap-selected: var(--spectrum-calendar-day-text-color-disabled);
+		--mod-calendar-day-text-color-hover: var(--spectrum-calendar-day-text-color-disabled);
+		--mod-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-disabled);
+
+		--mod-calendar-day-today-border-color: var(--spectrum-calendar-day-today-border-color-disabled);
+		--mod-calendar-day-border-color-key-focus: transparent;
+
+		--mod-calendar-day-background-color-selected: var(--spectrum-calendar-day-background-color-selected-disabled);
+		--mod-calendar-day-background-color-selected-hover: transparent;
+		--mod-calendar-day-background-color-cap-selected: transparent;
+		--mod-calendar-day-background-color-hover: transparent;
+		--mod-calendar-day-background-color-focus: transparent;
+		--mod-calendar-day-background-color-down: transparent;
+
+		--mod-calendar-day-text-font-weight: normal;
+		--mod-calendar-day-text-font-weight-selected: normal;
+		--mod-calendar-day-text-font-weight-cap-selected: normal;
 
-		&.is-disabled {
-			color: var(--highcontrast-calendar-day-text-color-disabled, var(--mod-calendar-day-text-color-disabled, var(--spectrum-calendar-day-text-color-disabled)));
-		}
-	}
-}
-
-@media (forced-colors: active) {
-	.spectrum-Calendar-prevMonth,
-	.spectrum-Calendar-nextMonth {
-		--highcontrast-calendar-button-icon-color: ButtonText;
-	}
-
-	.spectrum-Calendar-date {
-		--highcontrast-calendar-day-background-color-cap-selected: Highlight;
-		--highcontrast-calendar-day-background-color-down: ButtonFace;
-		--highcontrast-calendar-day-background-color-hover: Transparent;
-		--highcontrast-calendar-day-background-color-key-focus: ButtonFace;
-		--highcontrast-calendar-day-background-color-selected-hover: Transparent;
-		--highcontrast-calendar-day-background-color-selected: Highlight;
-		--highcontrast-calendar-day-border-color-key-focus: ButtonText;
-		--highcontrast-calendar-day-text-color-cap-selected: HighlightText;
-		--highcontrast-calendar-day-text-color-disabled: GrayText;
-		--highcontrast-calendar-day-text-color-hover: ButtonText;
-		--highcontrast-calendar-day-text-color-key-focus: ButtonText;
-		--highcontrast-calendar-day-text-color-selected: HighlightText;
-		--highcontrast-calendar-day-title-text-color: CanvasText;
-		--highcontrast-calendar-day-today-background-color-selected-hover: Highlight;
-		--highcontrast-calendar-day-today-border-color-disabled: GrayText;
-		--highcontrast-calendar-day-today-border-color: ButtonText;
-		--highcontrast-calendar-day-today-text-color-disabled: GrayText;
-		--highcontrast-calendar-day-today-text-color: ButtonText;
-
-		forced-color-adjust: none;
-
-		&.is-range-selection {
-			&.is-today {
-				color: HighlightText;
-			}
-
-			&.is-selection-start::after,
-			&.is-selection-end::after {
-				content: none;
-			}
-		}
-
-		&.is-disabled {
-			&.is-range-selection {
-				background: Highlight;
-				color: HighlightText;
-			}
+		pointer-events: none;
 
-			&.is-selected {
-				background: Highlight;
-				color: HighlightText;
-			}
+		/* @todo sync with design on these colors and states for disabled calendars */
+		&.is-selected {
+			--mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected);
 		}
 	}
 }
diff --git a/components/calendar/metadata/mods.md b/components/calendar/metadata/mods.md
deleted file mode 100644
index d95ba38398..0000000000
--- a/components/calendar/metadata/mods.md
+++ /dev/null
@@ -1,40 +0,0 @@
-| Modifiable custom properties                               |
-| ---------------------------------------------------------- |
-| `--mod-calendar-border-radius-reset`                       |
-| `--mod-calendar-border-width-reset`                        |
-| `--mod-calendar-button-icon-color`                         |
-| `--mod-calendar-day-background-color-cap-selected`         |
-| `--mod-calendar-day-background-color-down`                 |
-| `--mod-calendar-day-background-color-hover`                |
-| `--mod-calendar-day-background-color-key-focus`            |
-| `--mod-calendar-day-background-color-selected`             |
-| `--mod-calendar-day-background-color-selected-hover`       |
-| `--mod-calendar-day-border-color-key-focus`                |
-| `--mod-calendar-day-border-size`                           |
-| `--mod-calendar-day-height`                                |
-| `--mod-calendar-day-padding`                               |
-| `--mod-calendar-day-text-color-cap-selected`               |
-| `--mod-calendar-day-text-color-disabled`                   |
-| `--mod-calendar-day-text-color-hover`                      |
-| `--mod-calendar-day-text-color-key-focus`                  |
-| `--mod-calendar-day-text-color-selected`                   |
-| `--mod-calendar-day-text-font-weight-cap-selected`         |
-| `--mod-calendar-day-text-font-weight-selected`             |
-| `--mod-calendar-day-text-size`                             |
-| `--mod-calendar-day-text-size-han`                         |
-| `--mod-calendar-day-title-text-color`                      |
-| `--mod-calendar-day-title-text-font-weight`                |
-| `--mod-calendar-day-title-text-size`                       |
-| `--mod-calendar-day-today-background-color-selected-hover` |
-| `--mod-calendar-day-today-border-color`                    |
-| `--mod-calendar-day-today-border-color-disabled`           |
-| `--mod-calendar-day-today-text-color`                      |
-| `--mod-calendar-day-today-text-color-disabled`             |
-| `--mod-calendar-day-today-text-font-weight`                |
-| `--mod-calendar-day-width`                                 |
-| `--mod-calendar-margin-x`                                  |
-| `--mod-calendar-margin-y`                                  |
-| `--mod-calendar-title-height`                              |
-| `--mod-calendar-title-text-letter-spacing`                 |
-| `--mod-calendar-title-text-size`                           |
-| `--mod-calendar-width`                                     |
diff --git a/components/calendar/package.json b/components/calendar/package.json
index dce2e844b9..a9611c4806 100644
--- a/components/calendar/package.json
+++ b/components/calendar/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/calendar/stories/calendar.mdx b/components/calendar/stories/calendar.mdx
deleted file mode 100644
index 6fb7a8b8f0..0000000000
--- a/components/calendar/stories/calendar.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as CalendarStories from "./calendar.stories";
-
-<Meta of={CalendarStories} title="Docs" />
-
-<Title of={CalendarStories} />
-<Subtitle of={CalendarStories} />
-<ComponentDetails />
-
-<Description of={CalendarStories} />
-
-## Standard
-
-<Canvas of={CalendarStories.Default} />
-
-## Abbreviated weekdays
-
-<Canvas of={CalendarStories.AbbreviatedWeekdays} />
-
-## Range selection
-
-For calendars with a selected range:
-
-- `.is-selection-start` class goes on the first day in the selection, and `.is-range-start` goes on the first day of each week or month in the middle of a selection (but not the first day of the selection)
-- `.is-selection-end` goes on the last day of the selection, and `.is-range-end goes` on the last day of each week or month in the middle of the selection (but not on the last day of the selection)
-
-<Canvas of={CalendarStories.RangeSelection} />
-
-## Focused
-
-<Canvas of={CalendarStories.Focused} />
-
-## Disabled
-
-<Canvas of={CalendarStories.Disabled} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js
index a1844700b0..303121e961 100644
--- a/components/calendar/stories/calendar.stories.js
+++ b/components/calendar/stories/calendar.stories.js
@@ -1,7 +1,7 @@
 import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CalendarGroup } from "./calendar.test.js";
 import { Template } from "./template.js";
@@ -11,7 +11,7 @@ const months = [...Array(12).keys()].map((key) =>
 );
 
 /**
- * Calendars display a grid of days in one or more months and allow users to select a single date.
+ * Calendars display a grid of days in one or more months and allow users to select a single date or a range of dates.
  */
 export default {
 	title: "Calendar",
@@ -27,6 +27,9 @@ export default {
 			options: months,
 			control: "select",
 		},
+		// The date selection controls don't update the story, so they are removed from the table.
+		// TODO: We may have to refactor some of the template to create a working controls for the
+		// selectable dates.
 		selectedDay: {
 			name: "Selected date or range start (date)",
 			description:
@@ -35,10 +38,22 @@ export default {
 			table: {
 				type: { summary: "datetime" },
 				category: "Content",
+				disable: true,
 			},
 			control: "date",
 			if: { arg: "isDisabled", truthy: false },
 		},
+		isRangeSelection : {
+			name: "Range selection",
+			description: "Allow users to select a range of dates.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Content",
+				disable: true,
+			},
+			control: "boolean",
+		},
 		lastDay: {
 			name: "Range end (date)",
 			description: "Defines the end of a date range.",
@@ -46,8 +61,10 @@ export default {
 			table: {
 				type: { summary: "datetime" },
 				category: "Content",
+				disable: true,
 			},
 			control: "date",
+			if: { arg: "isRangeSelection", truthy: true}
 		},
 		year: {
 			name: "Year",
@@ -69,7 +86,8 @@ export default {
 			control: "boolean",
 		},
 		useDOWAbbrev: {
-			name: "Use 3 letter abbreviation for day of week",
+			name: "Use abbreviated weekdays",
+			description: "Uses a 3 letter abbreviation for day of week.",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
@@ -89,6 +107,7 @@ export default {
 		isFocused: false,
 		useDOWAbbrev: false,
 		buttonSize: ActionButtonStories.args.size,
+		isRangeSelection: false,
 	},
 	parameters: {
 		actions: {
@@ -99,45 +118,52 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = CalendarGroup.bind({});
 Default.args = {
 	month: months[6],
-	selectedDay: new Date(2023, 6, 3),
-	year: 2023,
+	year: 2025,
+	selectedDay: new Date(2025, 6, 3),
 };
 
 // ********* DOCS ONLY ********* //
 export const AbbreviatedWeekdays = Template.bind({});
 AbbreviatedWeekdays.args = {
+	...Default.args,
 	useDOWAbbrev: true,
 };
 AbbreviatedWeekdays.tags = ["!dev"];
 AbbreviatedWeekdays.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+AbbreviatedWeekdays.storyName = "Abbreviated weekdays";
+
+/**
+ * For calendars with a selectable range:
 
+- The `.is-range-start` and `.is-range-selection` classes go on the first day in the selection.
+- The `.is-range-end` and `.is-range-selection` classes go on the last day of the selection.
+- The `.is-range-selection` class goes on all days in the middle of the selection.
+ */
 export const RangeSelection = Template.bind({});
 RangeSelection.args = {
+	isRangeSelection: true,
 	month: months[6],
-	selectedDay: new Date(2023, 6, 3),
-	year: 2023,
-	lastDay: new Date(2023, 6, 7),
-	useDOWAbbrev: true,
+	year: 2025,
+	selectedDay: new Date(2025, 6, 3),
+	lastDay: new Date(2025, 6, 7),
 	isPadded: true,
 };
-RangeSelection.tags = ["!dev"];
 RangeSelection.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+RangeSelection.storyName = "Range selection";
 
 export const Focused = Template.bind({});
 Focused.args = {
-	month: undefined,
+	...Default.args,
 	selectedDay: undefined,
-	year: undefined,
 	isFocused: true,
 };
 Focused.tags = ["!dev"];
@@ -148,6 +174,7 @@ Focused.parameters = {
 export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];
 Disabled.args = {
+	...Default.args,
 	isDisabled: true
 };
 Disabled.parameters = {
diff --git a/components/calendar/stories/calendar.test.js b/components/calendar/stories/calendar.test.js
index 06ef05193b..01458d9c69 100644
--- a/components/calendar/stories/calendar.test.js
+++ b/components/calendar/stories/calendar.test.js
@@ -22,8 +22,8 @@ export const CalendarGroup = Variants({
 		{
 			testHeading: "Range selection",
 			month: months[6],
-			selectedDay: new Date(2023, 6, 3),
 			year: 2023,
+			selectedDay: new Date(2023, 6, 3),
 			lastDay: new Date(2023, 6, 7),
 			useDOWAbbrev: true,
 			padded: true,
@@ -31,8 +31,8 @@ export const CalendarGroup = Variants({
 		{
 			testHeading: "Today highlighted",
 			month: undefined,
-			selectedDay: undefined,
 			year: undefined,
+			selectedDay: undefined,
 		},
 	],
 	stateData: [
diff --git a/components/calendar/stories/template.js b/components/calendar/stories/template.js
index a081928590..19c70fe939 100644
--- a/components/calendar/stories/template.js
+++ b/components/calendar/stories/template.js
@@ -8,6 +8,9 @@ import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Calendar",
@@ -75,7 +78,7 @@ export const Template = ({
 
 	if (today) {
 		month = month ?? getMonthName(today);
-		year = year ?? today.getFullYear();
+		year = year ?? today ? today.getFullYear() : 2021;
 	}
 
 	const displayedDate = new Date(`${month} 1, ${year}`);
@@ -138,7 +141,7 @@ export const Template = ({
 		if (firstDOWInMonth > DOW.length - orphanedDays) {
 			weeksInMonth++;
 		}
-		if (displayedMonth === 1 && firstDOWInMonth > 0) { // accounts for Feburary
+		if (displayedMonth === 1 && firstDOWInMonth > 0) { // accounts for February
 			weeksInMonth++;
 		}
 
@@ -285,7 +288,7 @@ export const Template = ({
 					isQuiet: true,
 					isDisabled,
 					size: buttonSize,
-					iconName: "ChevronLeft100",
+					iconName: "ChevronLeft",
 					iconSet: "ui",
 					customClasses: [`${rootClass}-prevMonth`],
 					onclick: previousHandler.bind(null, {
@@ -299,7 +302,7 @@ export const Template = ({
 					isQuiet: true,
 					isDisabled,
 					size: buttonSize,
-					iconName: "ChevronRight100",
+					iconName: "ChevronRight",
 					iconSet: "ui",
 					customClasses: [`${rootClass}-nextMonth`],
 					onclick: nextHandler.bind(null, {
@@ -367,8 +370,6 @@ export const Template = ({
 												"is-range-start": thisDay.isRangeStart,
 												"is-range-end": thisDay.isRangeEnd,
 												"is-selected": thisDay.isSelected,
-												// "is-selection-start": thisDay.isRangeStart,
-												// "is-selection-end": thisDay.isRangeEnd,
 												"is-disabled": isDisabled,
 												"is-focused": (isFocused && thisDay.isFocused) || thisDay.isSelected,
 											})}
diff --git a/components/calendar/themes/express.css b/components/calendar/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/calendar/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/calendar/themes/spectrum-two.css b/components/calendar/themes/spectrum-two.css
new file mode 100644
index 0000000000..b14c713435
--- /dev/null
+++ b/components/calendar/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Calendar {
+		--spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4);
+	}
+}
diff --git a/components/calendar/themes/spectrum.css b/components/calendar/themes/spectrum.css
new file mode 100644
index 0000000000..368d50d51e
--- /dev/null
+++ b/components/calendar/themes/spectrum.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Calendar {
+		--spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-200-rgb), 0.4);
+	}
+}
diff --git a/components/card/metadata/metadata.json b/components/card/dist/metadata.json
similarity index 94%
rename from components/card/metadata/metadata.json
rename to components/card/dist/metadata.json
index 011177d8ae..54eb899211 100644
--- a/components/card/metadata/metadata.json
+++ b/components/card/dist/metadata.json
@@ -14,7 +14,6 @@
     ".spectrum-Card--gallery.is-drop-target .spectrum-Card-preview:before",
     ".spectrum-Card--gallery.is-selected .spectrum-Card-preview:before",
     ".spectrum-Card--gallery:before",
-    ".spectrum-Card--gallery:hover",
     ".spectrum-Card--gallery:hover .spectrum-Card-preview",
     ".spectrum-Card--horizontal",
     ".spectrum-Card--horizontal .spectrum-Card-body",
@@ -39,7 +38,6 @@
     ".spectrum-Card--quiet:before",
     ".spectrum-Card--quiet:focus .spectrum-Card-preview:after",
     ".spectrum-Card--quiet:focus:after",
-    ".spectrum-Card--quiet:hover",
     ".spectrum-Card--quiet:hover .spectrum-Card-preview",
     ".spectrum-Card-actionButton",
     ".spectrum-Card-actions",
@@ -61,6 +59,8 @@
     ".spectrum-Card.is-selected .spectrum-Card-actions",
     ".spectrum-Card.is-selected .spectrum-Card-quickActions",
     ".spectrum-Card.is-selected:before",
+    ".spectrum-Card.spectrum-Card--gallery",
+    ".spectrum-Card.spectrum-Card--quiet",
     ".spectrum-Card:after",
     ".spectrum-Card:before",
     ".spectrum-Card:focus .spectrum-Card-actions",
@@ -112,7 +112,6 @@
     "--mod-card-footer-margin-block-start",
     "--mod-card-footer-margin-inline-end",
     "--mod-card-footer-margin-inline-start",
-    "--mod-card-footer-margin-top",
     "--mod-card-footer-padding-block-end",
     "--mod-card-footer-padding-block-start",
     "--mod-card-horizontal-body-padding",
@@ -121,7 +120,6 @@
     "--mod-card-minimum-width-quiet",
     "--mod-card-preview-background-color",
     "--mod-card-preview-background-color-hover",
-    "--mod-card-preview-border-width",
     "--mod-card-preview-border-width-selected",
     "--mod-card-preview-minimum-height",
     "--mod-card-selected-background-color-rgb",
@@ -134,8 +132,7 @@
     "--mod-card-title-font-weight",
     "--mod-card-title-line-height",
     "--mod-card-title-padding-right",
-    "--mod-card-title-padding-top",
-    "--mod-spectrum-card-background-color"
+    "--mod-overlay-animation-duration"
   ],
   "component": [
     "--spectrum-card-actions-background-color-opacity",
@@ -154,10 +151,10 @@
     "--spectrum-card-body-font-style",
     "--spectrum-card-body-font-weight",
     "--spectrum-card-body-line-height",
+    "--spectrum-card-body-padding-block-start",
     "--spectrum-card-body-spacing",
     "--spectrum-card-border-color",
     "--spectrum-card-border-color-hover",
-    "--spectrum-card-border-color-selected",
     "--spectrum-card-border-width",
     "--spectrum-card-content-margin-bottom",
     "--spectrum-card-content-margin-top",
@@ -184,8 +181,7 @@
     "--spectrum-card-title-font-style",
     "--spectrum-card-title-font-weight",
     "--spectrum-card-title-line-height",
-    "--spectrum-card-title-padding-right",
-    "--spectrum-card-title-padding-top"
+    "--spectrum-card-title-padding-right"
   ],
   "global": [
     "--spectrum-animation-duration-100",
@@ -205,9 +201,9 @@
     "--spectrum-drop-shadow-y",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-thickness",
+    "--spectrum-gray-100",
     "--spectrum-gray-100-rgb",
     "--spectrum-gray-200",
-    "--spectrum-gray-300",
     "--spectrum-heading-color",
     "--spectrum-heading-line-height",
     "--spectrum-heading-sans-serif-font-style",
@@ -219,7 +215,13 @@
     "--spectrum-spacing-300",
     "--spectrum-spacing-400"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-card-border-color",
+    "--system-card-border-color-hover",
+    "--system-card-divider-color",
+    "--system-card-preview-background-color",
+    "--system-card-preview-background-color-hover"
+  ],
   "passthroughs": [],
   "high-contrast": []
 }
diff --git a/components/card/index.css b/components/card/index.css
index 7b00d8c117..f56599c17c 100644
--- a/components/card/index.css
+++ b/components/card/index.css
@@ -11,74 +11,76 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 .spectrum-Card {
 	/* Default Layout */
-	--spectrum-card-background-color: var(--spectrum-background-layer-2-color);
-	--spectrum-card-body-spacing: var(--spectrum-spacing-400);
-	--spectrum-card-title-padding-top: var(--spectrum-spacing-300);
-	--spectrum-card-title-padding-right: var(--spectrum-spacing-400);
-	--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
-	--spectrum-card-content-margin-bottom: var(--spectrum-spacing-300);
-	--spectrum-card-footer-padding-top: var(--spectrum-spacing-100);
-	--spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100);
-
-	--spectrum-card-border-width: var(--spectrum-border-width-100);
-	--spectrum-card-corner-radius: var(--spectrum-corner-radius-100);
-	--spectrum-card-border-color: var(--spectrum-gray-200);
-	--spectrum-card-border-color-hover: var(--spectrum-gray-300);
-	--spectrum-card-border-color-selected: var(--spectrum-blue-700);
-
-	--spectrum-card-divider-color: var(--spectrum-gray-300);
+	--spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color));
+	--spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400));
+	--spectrum-card-body-padding-block-start: var(--mod-card-body-padding-block-start, var(--spectrum-spacing-300));
+	--spectrum-card-title-padding-right: var(--mod-card-title-padding-right, var(--spectrum-spacing-400));
+	--spectrum-card-content-margin-top: var(--mod-card-content-margin-top, var(--spectrum-spacing-100));
+	--spectrum-card-content-margin-bottom: var(--mod-card-content-margin-bottom, var(--spectrum-spacing-300));
+	--spectrum-card-footer-padding-top: var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100));
+	--spectrum-card-subtitle-padding-right: var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100));
+
+	--spectrum-card-border-width: var(--mod-card-border-width, var(--spectrum-border-width-100));
+	--spectrum-card-corner-radius: var(--mod-card-corner-radius, var(--spectrum-corner-radius-100));
 
 	/* Typography */
-	--spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-card-title-font-size: var(--spectrum-heading-size-xxs);
-	--spectrum-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-	--spectrum-card-title-font-style: var(--spectrum-heading-sans-serif-font-style);
-	--spectrum-card-title-line-height: var(--spectrum-heading-line-height);
-	--spectrum-card-title-font-color: var(--spectrum-heading-color);
-
-	--spectrum-card-body-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-card-body-font-size: var(--spectrum-body-size-s);
-	--spectrum-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
-	--spectrum-card-body-font-style: var(--spectrum-body-sans-serif-font-style);
-	--spectrum-card-body-line-height: var(--spectrum-body-line-height);
-	--spectrum-card-body-font-color: var(--spectrum-body-color);
+	--spectrum-card-title-font-family: var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack));
+	--spectrum-card-title-font-size: var(--mod-card-title-font-size, var(--spectrum-heading-size-xxs));
+	--spectrum-card-title-font-weight: var(--mod-card-title-font-weight, var(--spectrum-heading-sans-serif-font-weight));
+	--spectrum-card-title-font-style: var(--mod-card-title-font-style, var(--spectrum-heading-sans-serif-font-style));
+	--spectrum-card-title-line-height: var(--mod-card-title-line-height, var(--spectrum-heading-line-height));
+	--spectrum-card-title-font-color: var(--mod-card-title-font-color, var(--spectrum-heading-color));
+
+	--spectrum-card-body-font-family: var(--mod-card-body-font-family, var(--spectrum-sans-font-family-stack));
+	--spectrum-card-body-font-size: var(--mod-card-body-font-size, var(--spectrum-body-size-s));
+	--spectrum-card-body-font-weight: var(--mod-card-body-font-weight, var(--spectrum-body-sans-serif-font-weight));
+	--spectrum-card-body-font-style: var(--mod-card-body-font-style, var(--spectrum-body-sans-serif-font-style));
+	--spectrum-card-body-line-height: var(--mod-card-body-line-height, var(--spectrum-body-line-height));
+	--spectrum-card-body-font-color: var(--mod-card-body-font-color, var(--spectrum-body-color));
 
 	/* Quick Actions */
-	--spectrum-card-actions-spacing: var(--spectrum-spacing-300);
-	--spectrum-card-actions-size: var(--spectrum-card-selection-background-size);
-	--spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100);
+	--spectrum-card-actions-spacing: var(--mod-card-actions-spacing, var(--spectrum-spacing-300));
+	--spectrum-card-actions-size: var(--mod-card-actions-size, var(--spectrum-card-selection-background-size));
+	--spectrum-card-actions-border-radius: var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100));
 
 	/* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */
-	--spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb);
-	--spectrum-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity);
-	--spectrum-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color);
-	--spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x);
-	--spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y);
-	--spectrum-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur);
+	--spectrum-card-actions-background-color-rgb: var(--mod-card-actions-background-color-rgb, var(--spectrum-gray-100-rgb));
+	--spectrum-card-actions-background-color-opacity: var(--mod-card-actions-background-color-opacity, var(--spectrum-card-selection-background-color-opacity));
+	--spectrum-card-actions-drop-shadow-color: var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color));
+	--spectrum-card-actions-drop-shadow-x: var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x));
+	--spectrum-card-actions-drop-shadow-y: var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y));
+	--spectrum-card-actions-drop-shadow-blur: var(--mod-card-actions-drop-shadow-blur, var(--spectrum-drop-shadow-blur));
 
 	/* Focus */
-	--spectrum-card-focus-indicator-color: var(--spectrum-focus-indicator-color);
-	--spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
+	--spectrum-card-focus-indicator-color: var(--mod-card-focus-indicator-color, var(--spectrum-focus-indicator-color));
+	--spectrum-card-focus-indicator-width: var(--mod-card-focus-indicator-width, var(--spectrum-focus-indicator-thickness));
 
 	/* Selected */
-	--spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */
+	--spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1); /* table-selected-row-background-opacity does not exist in tokens yet */
 
-	--spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100);
-	--spectrum-card-preview-background-color: var(--spectrum-background-base-color);
-	--spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
+	--spectrum-card-preview-border-width-selected: var(--mod-card-preview-border-width-selected, var(--spectrum-border-width-100));
 
 	/* Horizontal */
-	--spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300);
-	--spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200);
-}
+	--spectrum-card-horizontal-body-padding: var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300));
+	--spectrum-card-horizontal-preview-padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200));
 
-/* Quiet/Gallery */
-.spectrum-Card--quiet,
-.spectrum-Card--gallery {
-	--mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
-	--mod-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width));
+	&.spectrum-Card--quiet {
+		--mod-card-minimum-width: var(--mod-card-minimum-width-quiet);
+		--mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
+	}
+
+	&.spectrum-Card--gallery {
+		--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
+	}
+
+	&.is-selected,
+	&.is-drop-target {
+		--spectrum-card-border-color: var(--mod-card-border-color-selected, var(--spectrum-blue-700));
+	}
 }
 
 .spectrum-Card {
@@ -89,14 +91,13 @@
 	text-decoration: none;
 
 	min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width));
+	block-size: 100%;
 
-	border: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid transparent;
-	border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius));
+	border: var(--spectrum-card-border-width) solid transparent;
+	border-radius: var(--spectrum-card-corner-radius);
 	border-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
 
-	/* @deprecation --mod-spectrum-card-background-color has been renamed to
-		--mod-card-background-color. The fallback will be removed in a future version. */
-	background-color: var(--mod-card-background-color, var(--mod-spectrum-card-background-color, var(--spectrum-card-background-color)));
+	background-color: var(--spectrum-card-background-color);
 
 	&::before {
 		content: "";
@@ -119,48 +120,42 @@
 		border-style: solid;
 		border-color: transparent;
 		border-width: 0;
-		border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius));
-		margin-block-start: calc(-1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)));
-		margin-inline-start: calc(-1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)));
+		border-radius: var(--spectrum-card-corner-radius);
+		margin-block-start: calc(-1 * var(--spectrum-card-focus-indicator-width));
+		margin-inline-start: calc(-1 * var(--spectrum-card-focus-indicator-width));
 	}
 
 	&:focus-visible {
 		outline: none;
 
 		&::after {
-			border-width: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width));
-			border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color));
+			border-width: var(--spectrum-card-focus-indicator-width);
+			border-color: var(--spectrum-card-focus-indicator-color);
 		}
 
 		.spectrum-Card-coverPhoto {
-			border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)));
-			border-start-end-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)));
+			border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
+			border-start-end-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
 		}
 
 		.spectrum-Card-preview {
-			border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)));
-			border-start-end-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)));
+			border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
+			border-start-end-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
 		}
 	}
 
 	&:hover {
-		border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
+		--mod-card-border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
 	}
 
-	&.is-selected {
-		border-color: var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected));
-
-		&::before {
-			background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));
-		}
+	&.is-selected::before {
+		background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--spectrum-card-selected-background-opacity));
 	}
 
 	&.is-drop-target {
 		--mod-card-background-color: var(--spectrum-background-base-color);
 
-		border-color: var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected));
-		box-shadow: 0 0 0 1px var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected));
-		background-color: var(--mod-card-background-color, var(--spectrum-card-background-color));
+		box-shadow: 0 0 0 1px var(--spectrum-card-border-color);
 	}
 
 	&.is-focused,
@@ -169,7 +164,6 @@
 	&:hover {
 		.spectrum-Card-quickActions,
 		.spectrum-Card-actions {
-			/* Ideally, this would simply apply is-open to the QuickActions component */
 			visibility: visible;
 			opacity: 1;
 			pointer-events: all;
@@ -180,20 +174,32 @@
 .spectrum-Card-quickActions {
 	position: absolute;
 	visibility: hidden;
-	box-shadow: var(--mod-card-actions-drop-shadow-x, var(--spectrum-card-actions-drop-shadow-x)) var(--mod-card-actions-drop-shadow-y, var(--spectrum-card-actions-drop-shadow-y)) var(--mod-card-actions-drop-shadow-blur, var(--spectrum-card-actions-drop-shadow-blur)) var(--mod-card-actions-drop-shadow-color, var(--spectrum-card-actions-drop-shadow-color));
+	box-shadow: var(--spectrum-card-actions-drop-shadow-x) var(--spectrum-card-actions-drop-shadow-y) var(--spectrum-card-actions-drop-shadow-blur) var(--spectrum-card-actions-drop-shadow-color);
 
-	inline-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size));
-	block-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size));
-	border-radius: var(--mod-card-actions-border-radius, var(--spectrum-card-actions-border-radius));
-	background-color: rgba(var(--mod-card-actions-background-color-rgb, var(--spectrum-card-actions-background-color-rgb)), var(--mod-card-actions-background-color-opacity, var(--spectrum-card-actions-background-color-opacity)));
+	inline-size: var(--spectrum-card-actions-size);
+	block-size: var(--spectrum-card-actions-size);
+	border-radius: var(--spectrum-card-actions-border-radius);
+	background-color: rgba(var(--spectrum-card-actions-background-color-rgb), var(--spectrum-card-actions-background-color-opacity));
+
+	inset-inline-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));
+	inset-block-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));
+
+	/* From QuickAction component that is officially deprecated */
+	pointer-events: auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
 
-	inset-inline-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
-	inset-block-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+	transition:
+		transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+		opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+		visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
 }
 
 .spectrum-Card-actions {
-	inset-block-start: var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing));
-	inset-inline-end: var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing));
+	inset-block-start: var(--spectrum-card-actions-spacing);
+	inset-inline-end: var(--spectrum-card-actions-spacing);
 }
 
 .spectrum-Card-coverPhoto {
@@ -206,8 +212,8 @@
 	align-items: center;
 	justify-content: center;
 
-	border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
-	border-start-end-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+	border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
+	border-start-end-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
 	border-end-end-radius: 0;
 	border-end-start-radius: 0;
 
@@ -225,73 +231,68 @@
 .spectrum-Card-content {
 	display: flex;
 	align-items: center;
-	margin-block-start: var(--mod-card-content-margin-top, var(--spectrum-card-content-margin-top));
+	margin-block-start: var(--spectrum-card-content-margin-top);
 }
 
 .spectrum-Card-body {
-	/* @deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start
-	   and will be removed in a future version. */
-	padding-block-start: var(--mod-card-body-padding-block-start, var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top)));
-	padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
-	padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
-	padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
+	padding-block-start: var(--spectrum-card-body-padding-block-start);
+	padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
+	padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
+	padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
 }
 
 .spectrum-Card-preview {
 	overflow: hidden;
-	border-start-start-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius));
-	border-start-end-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius));
+	border-start-start-radius: var(--spectrum-card-corner-radius);
+	border-start-end-radius: var(--spectrum-card-corner-radius);
 	border-end-end-radius: 0;
 	border-end-start-radius: 0;
 	display: flex;
 	align-items: center;
-	color: var(--mod-card-body-font-color, var(--spectrum-card-body-font-color));
+	color: var(--spectrum-card-body-font-color);
 }
 
 .spectrum-Card-title {
-	padding-inline-end: var(--mod-card-title-padding-right, var(--spectrum-card-title-padding-right));
-	font-family: var(--mod-card-title-font-family, var(--spectrum-card-title-font-family));
-	font-size: var(--mod-card-title-font-size, var(--spectrum-card-title-font-size));
-	font-weight: var(--mod-card-title-font-weight, var(--spectrum-card-title-font-weight));
-	font-style: var(--mod-card-title-font-style, var(--spectrum-card-title-font-style));
-	line-height: var(--mod-card-title-line-height, var(--spectrum-card-title-line-height));
-	color: var(--mod-card-title-font-color, var(--spectrum-card-title-font-color));
+	padding-inline-end: var(--spectrum-card-title-padding-right);
+	font-family: var(--spectrum-card-title-font-family);
+	font-size: var(--spectrum-card-title-font-size);
+	font-weight: var(--spectrum-card-title-font-weight);
+	font-style: var(--spectrum-card-title-font-style);
+	line-height: var(--spectrum-card-title-line-height);
+	color: var(--spectrum-card-title-font-color);
 }
 
 .spectrum-Card-subtitle {
-	padding-inline-end: var(--mod-card-subtitle-padding-right, var(--spectrum-card-subtitle-padding-right));
-	color: var(--mod-card-title-font-color, var(--spectrum-card-title-font-color));
+	padding-inline-end: var(--spectrum-card-subtitle-padding-right);
+	color: var(--spectrum-card-title-font-color);
 	text-transform: none;
 }
 
 .spectrum-Card-subtitle + .spectrum-Card-description::before {
 	content: "•";
-	padding-inline-end: var(--mod-card-subtitle-padding-right, var(--spectrum-card-subtitle-padding-right));
+	padding-inline-end: var(--spectrum-card-subtitle-padding-right);
 }
 
 .spectrum-Card-description {
-	font-family: var(--mod-card-body-font-family, var(--spectrum-card-body-font-family));
-	font-size: var(--mod-card-body-font-size, var(--spectrum-card-body-font-size));
-	font-weight: var(--mod-card-body-font-weight, var(--spectrum-card-body-font-weight));
-	font-style: var(--mod-card-body-font-style, var(--spectrum-card-body-font-style));
-	line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height));
-	color: var(--mod-card-body-font-color, var(--spectrum-card-body-font-color));
+	font-family: var(--spectrum-card-body-font-family);
+	font-size: var(--spectrum-card-body-font-size);
+	font-weight: var(--spectrum-card-body-font-weight);
+	font-style: var(--spectrum-card-body-font-style);
+	line-height: var(--spectrum-card-body-line-height);
+	color: var(--spectrum-card-body-font-color);
 }
 
 .spectrum-Card-footer {
 	/* Accommodate for wanting less spacing between body and footer */
-	margin-block-start: var(--mod-card-footer-margin-block-start, calc(-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-content-margin-bottom, var(--spectrum-card-content-margin-bottom)))));
-	margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)));
-	margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)));
-	padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
-
-	/* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start
-	   and will be removed in a future version. */
-	padding-block-start: var(--mod-card-footer-padding-block-start, var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top)));
-
-	color: var(--mod-card-body-font-color, var(--spectrum-card-body-font-color));
-	line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height));
-	border-block-start: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
+	margin-block-start: var(--mod-card-footer-margin-block-start, calc(-1 * (var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom))));
+	margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--spectrum-card-body-spacing));
+	margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--spectrum-card-body-spacing));
+	padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
+	padding-block-start: var(--spectrum-card-footer-padding-top);
+
+	color: var(--spectrum-card-body-font-color);
+	line-height: var(--spectrum-card-body-line-height);
+	border-block-start: var(--spectrum-card-border-width) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
 }
 
 .spectrum-Card-header {
@@ -301,15 +302,12 @@
 }
 
 .spectrum-Card-actionButton {
-	align-self: center;
-	display: flex;
-	justify-content: flex-end;
 	z-index: 1;
 }
 
 .spectrum-Card--quiet {
 	.spectrum-Card-preview {
-		border: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) solid transparent;
+		border: var(--spectrum-card-focus-indicator-width) solid transparent;
 	}
 
 	&:focus,
@@ -320,24 +318,20 @@
 		}
 
 		.spectrum-Card-preview::after {
-			border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color));
+			border-color: var(--spectrum-card-focus-indicator-color);
 		}
 	}
 
-	&.is-selected {
-		.spectrum-Card-preview {
-			/* @deprecation --mod-card-preview-border-width has been renamed to --mod-card-preview-border-width-selected
-				and the fallback will be removed in a future version. */
-			border: var(--mod-card-preview-border-width-selected, var(--mod-card-preview-border-width, var(--spectrum-card-preview-border-width-selected))) solid;
-			border-color: var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected));
-		}
+	&.is-selected .spectrum-Card-preview {
+		border: var(--spectrum-card-preview-border-width-selected) solid;
+		border-color: var(--spectrum-card-border-color);
 	}
 }
 
 .spectrum-Card--quiet,
 .spectrum-Card--gallery {
-	block-size: 100%;
-	min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width));
+	--mod-card-border-color-hover: transparent;
+
 	border-width: 0;
 	border-radius: 0;
 	overflow: visible;
@@ -349,7 +343,7 @@
 	}
 
 	.spectrum-Card-preview {
-		border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius));
+		border-radius: var(--spectrum-card-corner-radius);
 		background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color)));
 		min-block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height));
 		inline-size: 100%;
@@ -385,18 +379,14 @@
 			border-style: solid;
 			border-color: transparent;
 			border-width: 0;
-			border-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) + var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)));
-			margin-block-start: calc(-1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)));
-			margin-inline-start: calc(-1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)));
+			border-radius: calc(var(--spectrum-card-corner-radius) + var(--spectrum-card-focus-indicator-width));
+			margin-block-start: calc(-1 * var(--spectrum-card-focus-indicator-width));
+			margin-inline-start: calc(-1 * var(--spectrum-card-focus-indicator-width));
 		}
 	}
 
-	&:hover {
-		border-color: transparent;
-
-		.spectrum-Card-preview {
-			background-color: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover)));
-		}
+	&:hover .spectrum-Card-preview {
+		background-color: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover)));
 	}
 
 	&.is-drop-target {
@@ -410,22 +400,17 @@
 		}
 
 		.spectrum-Card-preview::before {
-			border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color));
-			box-shadow: 0 0 0 1px var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color));
-		}
-	}
-
-	&.is-selected {
-		.spectrum-Card-preview::before {
-			background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));
+			border-color: var(--spectrum-card-focus-indicator-color);
+			box-shadow: 0 0 0 1px var(--spectrum-card-focus-indicator-color);
 		}
 	}
 
-	.spectrum-Card-body {
-		margin-block-start: var(--mod-card-content-margin-top, var(--spectrum-card-content-margin-top));
+	&.is-selected .spectrum-Card-preview::before {
+		background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));
 	}
 
 	.spectrum-Card-body {
+		margin-block-start: var(--spectrum-card-content-margin-top);
 		padding: 0;
 	}
 
@@ -438,10 +423,8 @@
 .spectrum-Card--horizontal {
 	flex-direction: row;
 
-	&:hover {
-		.spectrum-Card-preview {
-			border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
-		}
+	&:hover .spectrum-Card-preview {
+		border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
 	}
 
 	.spectrum-Card-preview {
@@ -451,12 +434,12 @@
 		align-items: center;
 		justify-content: center;
 
-		border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+		border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
 		border-start-end-radius: 0;
-		border-end-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+		border-end-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
 		border-end-end-radius: 0;
 
-		padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-card-horizontal-preview-padding));
+		padding: var(--spectrum-card-horizontal-preview-padding);
 		background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color));
 		border-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
 	}
@@ -481,7 +464,7 @@
 		justify-content: center;
 		flex-direction: column;
 		padding-block: 0;
-		padding-inline: var(--mod-card-horizontal-body-padding, var(--spectrum-card-horizontal-body-padding));
+		padding-inline: var(--spectrum-card-horizontal-body-padding);
 	}
 }
 
diff --git a/components/card/metadata/mods.md b/components/card/metadata/mods.md
deleted file mode 100644
index 69311af19e..0000000000
--- a/components/card/metadata/mods.md
+++ /dev/null
@@ -1,64 +0,0 @@
-| Modifiable custom properties                  |
-| --------------------------------------------- |
-| `--mod-animation-duration-100`                |
-| `--mod-card-actions-background-color-opacity` |
-| `--mod-card-actions-background-color-rgb`     |
-| `--mod-card-actions-border-radius`            |
-| `--mod-card-actions-drop-shadow-blur`         |
-| `--mod-card-actions-drop-shadow-color`        |
-| `--mod-card-actions-drop-shadow-x`            |
-| `--mod-card-actions-drop-shadow-y`            |
-| `--mod-card-actions-size`                     |
-| `--mod-card-actions-spacing`                  |
-| `--mod-card-animation-duration`               |
-| `--mod-card-background-color`                 |
-| `--mod-card-background-color-hover`           |
-| `--mod-card-body-font-color`                  |
-| `--mod-card-body-font-family`                 |
-| `--mod-card-body-font-size`                   |
-| `--mod-card-body-font-style`                  |
-| `--mod-card-body-font-weight`                 |
-| `--mod-card-body-line-height`                 |
-| `--mod-card-body-padding-block-end`           |
-| `--mod-card-body-padding-block-start`         |
-| `--mod-card-body-padding-inline-end`          |
-| `--mod-card-body-padding-inline-start`        |
-| `--mod-card-body-spacing`                     |
-| `--mod-card-border-color`                     |
-| `--mod-card-border-color-hover`               |
-| `--mod-card-border-color-selected`            |
-| `--mod-card-border-width`                     |
-| `--mod-card-content-margin-bottom`            |
-| `--mod-card-content-margin-top`               |
-| `--mod-card-content-margin-top-quiet`         |
-| `--mod-card-corner-radius`                    |
-| `--mod-card-divider-color`                    |
-| `--mod-card-focus-indicator-color`            |
-| `--mod-card-focus-indicator-width`            |
-| `--mod-card-footer-margin-block-start`        |
-| `--mod-card-footer-margin-inline-end`         |
-| `--mod-card-footer-margin-inline-start`       |
-| `--mod-card-footer-margin-top`                |
-| `--mod-card-footer-padding-block-end`         |
-| `--mod-card-footer-padding-block-start`       |
-| `--mod-card-horizontal-body-padding`          |
-| `--mod-card-horizontal-preview-padding`       |
-| `--mod-card-minimum-width`                    |
-| `--mod-card-minimum-width-quiet`              |
-| `--mod-card-preview-background-color`         |
-| `--mod-card-preview-background-color-hover`   |
-| `--mod-card-preview-border-width`             |
-| `--mod-card-preview-border-width-selected`    |
-| `--mod-card-preview-minimum-height`           |
-| `--mod-card-selected-background-color-rgb`    |
-| `--mod-card-selected-background-opacity`      |
-| `--mod-card-subtitle-padding-right`           |
-| `--mod-card-title-font-color`                 |
-| `--mod-card-title-font-family`                |
-| `--mod-card-title-font-size`                  |
-| `--mod-card-title-font-style`                 |
-| `--mod-card-title-font-weight`                |
-| `--mod-card-title-line-height`                |
-| `--mod-card-title-padding-right`              |
-| `--mod-card-title-padding-top`                |
-| `--mod-spectrum-card-background-color`        |
diff --git a/components/card/package.json b/components/card/package.json
index 57836ff210..b2a3bc7f70 100644
--- a/components/card/package.json
+++ b/components/card/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
@@ -52,9 +53,6 @@
 		"@spectrum-css/icon": {
 			"optional": true
 		},
-		"@spectrum-css/quickaction": {
-			"optional": true
-		},
 		"@spectrum-css/typography": {
 			"optional": true
 		}
@@ -64,7 +62,6 @@
 		"@spectrum-css/asset": "workspace:^",
 		"@spectrum-css/checkbox": "workspace:^",
 		"@spectrum-css/icon": "workspace:^",
-		"@spectrum-css/quickaction": "^3.1.1",
 		"@spectrum-css/tokens": "workspace:^",
 		"@spectrum-css/typography": "workspace:^"
 	},
diff --git a/components/card/stories/card.mdx b/components/card/stories/card.mdx
deleted file mode 100644
index e806ef6c35..0000000000
--- a/components/card/stories/card.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as CardStories from "./card.stories";
-
-<Meta of={CardStories} title="Docs" />
-
-<Title of={CardStories} />
-<Subtitle of={CardStories} />
-<ComponentDetails />
-
-<Description of={CardStories} />
-
-## Standard
-
-<Canvas of={CardStories.Default} />
-
-### No image
-
-<Canvas of={CardStories.NoImage} />
-
-### Focused
-
-<Canvas of={CardStories.Focused} />
-
-### Selected
-
-<Canvas of={CardStories.Selected} />
-
-## Quiet
-
-<Canvas of={CardStories.Quiet} />
-
-### Quiet File
-
-<Canvas of={CardStories.QuietFile} />
-
-### Quiet Folder
-
-<Canvas of={CardStories.QuietFolder} />
-
-### Quiet Focused
-
-<Canvas of={CardStories.QuietFocused} />
-
-### Quiet Selected
-
-<Canvas of={CardStories.QuietSelected} />
-
-## Horizontal
-
-<Canvas of={CardStories.Horizontal} />
-
-## Asset preview
-
-A standard card with a full-sized asset preview.
-
-<Canvas of={CardStories.AssetPreview} />
-
-## Gallery
-
-A gallery card for an image.
-
-<Canvas of={CardStories.Gallery} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js
index 92bd25070c..2d8147cda3 100644
--- a/components/card/stories/card.stories.js
+++ b/components/card/stories/card.stories.js
@@ -2,7 +2,7 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti
 import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused, isQuiet, isSelected } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CardGroup } from "./card.test.js";
 import { Template } from "./template.js";
@@ -28,6 +28,7 @@ export default {
 		isFocused,
 		hasActions: {
 			name: "Card actions",
+			description: "Adds an action button to the card's header.",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
@@ -41,6 +42,7 @@ export default {
 		},
 		showAsset: {
 			name: "Show asset",
+			description: "Select image, file, or folder asset to display in the preview area. The image option will render a full-sized asset preview.",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string | boolean" },
@@ -68,10 +70,39 @@ export default {
 			control: { type: "text" },
 		},
 		footer: { table: { disable: true } },
-		isGallery: { table: { disable: true } },
-		isCardAssetOverride: { table: { disable: true } },
+		isGallery: {
+			name: "Gallery preview",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+			if: { arg: "isHorizontal", truthy: false },
+		},
+		isImageFill: {
+			name: "Image fill",
+			description: "Scales image to fill all available preview area space for gallery or full-sized previews.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+			if: { arg: "showAsset", eq: "image"},
+		},
 		isGrid: { table: { disable: true } },
-		isHorizontal: { table: { disable: true } },
+		isHorizontal: {
+			name: "Horizontal orientation",
+			description: "Select an option from the `showAsset` control to see the horizontal orientation of cards.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+			if: { arg: "image", truthy: true },
+		},
 		isDropTarget: { table: { disable: true } },
 	},
 	args: {
@@ -84,6 +115,8 @@ export default {
 		isDropTarget: false,
 		hasActions: true,
 		hasQuickAction: true,
+		isHorizontal: false,
+		isImageFill: false,
 	},
 	parameters: {
 		actions: {
@@ -95,9 +128,11 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
+/**
+ *  Cards can either be standard or quiet style. A standard card includes a cover photo and footer, with buttons and more information. A vertical layout is default for cards, and the recommended default preview size is 2:1.
+ */
 export const Default = CardGroup.bind({});
 Default.args = {
 	title: "Card title",
@@ -124,26 +159,31 @@ Selected.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 Selected.args = {
-	isSelected: true
+	...Default.args,
+	isSelected: true,
 };
+Selected.storyName = "Default - selected";
 
 export const Focused = Template.bind({});
 Focused.args = {
-	isFocused: true,
+	...Default.args,
 	title: "Card title that is longer and should wrap",
-	customStyles: { "max-inline-size": "205px"},
+	isFocused: true,
 };
 Focused.tags = ["!dev"];
 Focused.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+Focused.storyName = "Default - focused";
 
+/**
+ * Quiet card styling is reserved for very simple cards with little metadata. The border of the `.spectrum-Card` element is removed, and additional rounded corners are added to the `.spectrum-Card-preview` container.
+ */
 export const Quiet = Template.bind({});
 Quiet.args = {
-	title: "Name",
+	...Default.args,
 	showAsset: "image",
 	image: "example-ava@2x.png",
-	description: "10/15/18",
 	isQuiet: true,
 };
 Quiet.tags = ["!dev"];
@@ -151,45 +191,51 @@ Quiet.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/** A quiet card for a file asset. */
 export const QuietFile = Template.bind({});
-QuietFile.storyName = "Quiet (file)";
+QuietFile.storyName = "Quiet - file";
 QuietFile.args = {
+	...Quiet.args,
 	title: "FileName",
 	description: "PDF",
 	showAsset: "file",
-	image: undefined,
-	isQuiet: true,
 };
 QuietFile.tags = ["!dev"];
 QuietFile.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * A card with a horizontal layout. Horizontal cards always have a square preview, and the image is cropped to fit inside the square. These can only be laid out in a tile grid where every card is the same size.
+ * */
 export const Horizontal = Template.bind({});
 Horizontal.tags = ["!dev"];
 Horizontal.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 Horizontal.args = {
-	title: "Card title",
-	description: "jpg",
+	...Default.args,
 	showAsset: "file",
-	isQuiet: false,
 	isHorizontal: true,
 	hasActions: false,
 	hasQuickAction: false,
 };
 
+/**
+ * A card with no photo.
+ * */
 export const NoImage = Template.bind({});
 NoImage.args = {
-	title: "Card title",
-	description: "Optional description that should be one or two lines",
+	...Default.args,
+	image: undefined,
 };
-NoImage.tags = ["!dev"];
 NoImage.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * A quiet card for a folder asset.
+ * */
 export const QuietFolder = Quiet.bind({});
 QuietFolder.args = {
 	title: "Name",
@@ -201,52 +247,52 @@ QuietFolder.tags = ["!dev"];
 QuietFolder.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+QuietFolder.storyName = "Quiet - folder";
 
 export const QuietFocused = Quiet.bind({});
 QuietFocused.args = {
-	title: "Name",
-	showAsset: "image",
-	image: "example-ava@2x.png",
-	description: "10/15/18",
-	isQuiet: true,
+	...Quiet.args,
 	isFocused: true,
 };
 QuietFocused.tags = ["!dev"];
 QuietFocused.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+QuietFocused.storyName = "Quiet - focused";
 
 export const QuietSelected = Quiet.bind({});
 QuietSelected.args = {
-	title: "Name",
-	showAsset: "image",
-	image: "example-ava@2x.png",
-	description: "10/15/18",
-	isQuiet: true,
+	...Quiet.args,
 	isSelected: true,
 };
 QuietSelected.tags = ["!dev"];
 QuietSelected.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+QuietSelected.storyName = "Quiet - selected";
 
+/**
+ * Card preview areas can have any aspect ratio between 4:1 (shortest) and 3:4 (tallest).
+ */
 export const AssetPreview = Template.bind({});
 AssetPreview.args = {
-	title: "Card title",
+	...Default.args,
 	showAsset: "image",
-	image: "example-card-portrait.png",
-	description: "jpg",
 	hasActions: false,
-	isCardAssetOverride: true,
+	isImageFill: true,
 	customStyles: {
-		"width": "200px",
+		"width": "300px",
 	}
 };
 AssetPreview.tags = ["!dev"];
 AssetPreview.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+AssetPreview.storyName = "Full-size asset preview";
 
+/**
+ * A gallery card for an image.
+ */
 export const Gallery = Template.bind({});
 Gallery.args = {
 	title: "Card title",
@@ -254,7 +300,7 @@ Gallery.args = {
 	image: "example-card-landscape.png",
 	description: "jpg",
 	isGallery: true,
-	isCardAssetOverride: true,
+	isImageFill: true,
 	customStyles: {
 		"width": "700px",
 	}
diff --git a/components/card/stories/card.test.js b/components/card/stories/card.test.js
index 336ed1c1b7..143d1ad800 100644
--- a/components/card/stories/card.test.js
+++ b/components/card/stories/card.test.js
@@ -9,17 +9,13 @@ export const CardGroup = Variants({
 		},
 		{
 			testHeading: "No image",
-			title: "Card title",
-			description: "Optional description that should be one or two lines",
 			footer: undefined,
 			image: undefined,
 		},
 		{
 			testHeading: "Horizontal",
-			title: "Card title",
 			description: "jpg",
 			showAsset: "file",
-			isQuiet: false,
 			isHorizontal: true,
 			hasActions: false,
 			hasQuickAction: false,
@@ -27,10 +23,8 @@ export const CardGroup = Variants({
 		},
 		{
 			testHeading: "Quiet",
-			title: "Name",
 			showAsset: "image",
 			image: "example-ava@2x.png",
-			description: "10/15/18",
 			isQuiet: true,
 			footer: undefined,
 		},
@@ -39,7 +33,6 @@ export const CardGroup = Variants({
 			title: "FileName",
 			description: "PDF",
 			showAsset: "file",
-			image: undefined,
 			isQuiet: true,
 			footer: undefined,
 		},
@@ -54,12 +47,11 @@ export const CardGroup = Variants({
 		},
 		{
 			testHeading: "Asset preview",
-			title: "Card title",
 			showAsset: "image",
 			image: "example-card-portrait.png",
 			description: "jpg",
 			hasActions: false,
-			isCardAssetOverride: true,
+			isImageFill: true,
 			customStyles: {
 				width: "200px",
 			},
@@ -67,12 +59,11 @@ export const CardGroup = Variants({
 		},
 		{
 			testHeading: "Gallery",
-			title: "Card title",
 			showAsset: "image",
 			image: "example-card-landscape.png",
 			description: "jpg",
 			isGallery: true,
-			isCardAssetOverride: true,
+			isImageFill: true,
 			customStyles: {
 				width: "700px",
 			},
diff --git a/components/card/stories/template.js b/components/card/stories/template.js
index c6119408ab..d1d226c7b0 100644
--- a/components/card/stories/template.js
+++ b/components/card/stories/template.js
@@ -4,7 +4,6 @@ import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js
 import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { getRandomId } from "@spectrum-css/preview/decorators";
-import { Template as QuickAction } from "@spectrum-css/quickaction/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -12,6 +11,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Card",
@@ -25,10 +27,10 @@ export const Template = ({
 	isHorizontal = false,
 	isQuiet = false,
 	isGallery = false,
-	isCardAssetOverride = false,
+	isImageFill = false,
 	isGrid = false,
-	hasQuickAction = false,
 	hasActions = false,
+	hasQuickAction = false,
 	showAsset,
 	customStyles = {},
 	customClasses = [],
@@ -63,7 +65,7 @@ export const Template = ({
     >
       ${when(image || showAsset, () =>
         when(
-          showAsset || (isGallery && image),
+          showAsset || (isGallery && image) || isQuiet,
           () => html`
             <div
               class=${classMap({
@@ -76,8 +78,8 @@ export const Template = ({
                   Asset(
                     {
                       image,
-                      preset: !image ? showAsset : undefined,
-                      isCardAssetOverride,
+                      preset: showAsset,
+                      isImageFill,
                     },
                     context
                   ),
@@ -85,7 +87,7 @@ export const Template = ({
                   Icon(
                     {
                       size: "xxl",
-                      iconName: showAsset === "folder" ? "File" : "Document",
+                      iconName: showAsset === "folder" ? "Folder" : "Document",
                       setName: "workflow",
                     },
                     context
@@ -186,7 +188,7 @@ export const Template = ({
           </div>`
       )}
       ${when(
-        footer && !isQuiet,
+        footer && !isQuiet && !isHorizontal && !isGallery,
         () => html`
           <div
             class=${classMap({
@@ -198,25 +200,23 @@ export const Template = ({
         `
       )}
       ${when(hasQuickAction && !isHorizontal, () =>
-        QuickAction(
-          {
-            noOverlay: true,
-            content: [
-              Checkbox(
-                {
-                  isChecked: isSelected,
-                  title: "Select",
-                },
-                context
-              ),
-            ],
-            onclick: function() {
+        html`
+          <div
+            class=${classMap({
+              [`${rootClass}-quickActions`]: true,
+            })}
+            @click=${function() {
               updateArgs({ isSelected: !isSelected });
-            },
-            customClasses: [`${rootClass}-quickActions`],
-          },
-          context
-        )
+            }}
+          >
+            ${Checkbox(
+              {
+                isChecked: isSelected,
+                title: "Select",
+              },
+              context
+            )}
+          </div>`
       )}
     </div>
   `;
diff --git a/components/card/themes/express.css b/components/card/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/card/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/card/themes/spectrum-two.css b/components/card/themes/spectrum-two.css
new file mode 100644
index 0000000000..2ef275418e
--- /dev/null
+++ b/components/card/themes/spectrum-two.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Card {
+		--spectrum-card-border-color: var(--spectrum-gray-100);
+		--spectrum-card-border-color-hover: var(--spectrum-gray-200);
+		--spectrum-card-divider-color: var(--spectrum-gray-200);
+		--spectrum-card-preview-background-color: var(--spectrum-gray-100);
+		--spectrum-card-preview-background-color-hover: var(--spectrum-gray-200);
+	}
+}
diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css
new file mode 100644
index 0000000000..a1906d601b
--- /dev/null
+++ b/components/card/themes/spectrum.css
@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Card {
+		--spectrum-card-border-color: var(--spectrum-gray-200);
+		--spectrum-card-border-color-hover: var(--spectrum-gray-300);
+		--spectrum-card-divider-color: var(--spectrum-gray-300);
+		--spectrum-card-preview-background-color: var(--spectrum-background-base-color);
+		--spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
+	}
+}
diff --git a/components/checkbox/metadata/metadata.json b/components/checkbox/dist/metadata.json
similarity index 98%
rename from components/checkbox/metadata/metadata.json
rename to components/checkbox/dist/metadata.json
index 6f369b09cd..fcfbcf86ab 100644
--- a/components/checkbox/metadata/metadata.json
+++ b/components/checkbox/dist/metadata.json
@@ -179,7 +179,6 @@
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-75",
     "--spectrum-disabled-content-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
@@ -188,11 +187,10 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
+    "--spectrum-gray-50",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
-    "--spectrum-gray-75",
     "--spectrum-gray-800",
-    "--spectrum-gray-900",
     "--spectrum-line-height-100",
     "--spectrum-negative-color-1000",
     "--spectrum-negative-color-1100",
@@ -211,10 +209,12 @@
     "--spectrum-text-to-control-75"
   ],
   "system-theme": [
+    "--system-checkbox-checkmark-color",
     "--system-checkbox-control-color-default",
     "--system-checkbox-control-color-down",
     "--system-checkbox-control-color-focus",
-    "--system-checkbox-control-color-hover"
+    "--system-checkbox-control-color-hover",
+    "--system-checkbox-control-corner-radius"
   ],
   "passthroughs": [],
   "high-contrast": [
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
index b2bb61ca57..c997e7ceca 100644
--- a/components/checkbox/index.css
+++ b/components/checkbox/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 /*
  * .spectrum-Checkbox-box::before is the Checkbox "box"
@@ -30,7 +29,6 @@
 
 	--spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color);
 	--spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color);
-	--spectrum-checkbox-checkmark-color: var(--spectrum-gray-75);
 
 	--spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
 	--spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);
@@ -48,25 +46,27 @@
 	--spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
 
 	/* Font */
-	--spectrum-checkbox-font-size: var(--spectrum-font-size-100);
 	--spectrum-checkbox-line-height: var(--spectrum-line-height-100);
 	--spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
-	/* Size */
-	--spectrum-checkbox-height: var(--spectrum-component-height-100);
-	--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium);
-	--spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
-
 	--spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
 	--spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 
 	--spectrum-checkbox-border-width: var(--spectrum-border-width-200);
 	--spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2);
 
-	/* Spacing */
+	--spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100);
+}
+
+.spectrum-Checkbox,
+.spectrum-Checkbox--sizeM {
+	--spectrum-checkbox-font-size: var(--spectrum-font-size-100);
+
+	--spectrum-checkbox-height: var(--spectrum-component-height-100);
+	--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium);
+
 	--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
 	--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100);
-	--spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100);
 }
 
 .spectrum-Checkbox--sizeS {
@@ -79,16 +79,6 @@
 	--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75);
 }
 
-.spectrum-Checkbox--sizeM {
-	--spectrum-checkbox-font-size: var(--spectrum-font-size-100);
-
-	--spectrum-checkbox-height: var(--spectrum-component-height-100);
-	--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium);
-
-	--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
-	--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100);
-}
-
 .spectrum-Checkbox--sizeL {
 	--spectrum-checkbox-font-size: var(--spectrum-font-size-200);
 
diff --git a/components/checkbox/metadata/mods.md b/components/checkbox/metadata/mods.md
deleted file mode 100644
index 1b76565159..0000000000
--- a/components/checkbox/metadata/mods.md
+++ /dev/null
@@ -1,41 +0,0 @@
-| Modifiable custom properties                    |
-| ----------------------------------------------- |
-| `--mod-checkbox-animation-duration`             |
-| `--mod-checkbox-border-width`                   |
-| `--mod-checkbox-checkmark-color`                |
-| `--mod-checkbox-content-color-default`          |
-| `--mod-checkbox-content-color-disabled`         |
-| `--mod-checkbox-content-color-down`             |
-| `--mod-checkbox-content-color-focus`            |
-| `--mod-checkbox-content-color-hover`            |
-| `--mod-checkbox-control-color-default`          |
-| `--mod-checkbox-control-color-disabled`         |
-| `--mod-checkbox-control-color-down`             |
-| `--mod-checkbox-control-color-focus`            |
-| `--mod-checkbox-control-color-hover`            |
-| `--mod-checkbox-control-corner-radius`          |
-| `--mod-checkbox-control-invalid-color-down`     |
-| `--mod-checkbox-control-selected-color-default` |
-| `--mod-checkbox-control-selected-color-down`    |
-| `--mod-checkbox-control-selected-color-focus`   |
-| `--mod-checkbox-control-selected-color-hover`   |
-| `--mod-checkbox-control-size`                   |
-| `--mod-checkbox-emphasized-color-default`       |
-| `--mod-checkbox-emphasized-color-down`          |
-| `--mod-checkbox-emphasized-color-focus`         |
-| `--mod-checkbox-emphasized-color-hover`         |
-| `--mod-checkbox-focus-indicator-color`          |
-| `--mod-checkbox-focus-indicator-gap`            |
-| `--mod-checkbox-focus-indicator-thinkness`      |
-| `--mod-checkbox-font-size`                      |
-| `--mod-checkbox-height`                         |
-| `--mod-checkbox-invalid-color-default`          |
-| `--mod-checkbox-invalid-color-focus`            |
-| `--mod-checkbox-invalid-color-hover`            |
-| `--mod-checkbox-line-height`                    |
-| `--mod-checkbox-line-height-cjk`                |
-| `--mod-checkbox-selected-border-width`          |
-| `--mod-checkbox-spacing`                        |
-| `--mod-checkbox-text-to-control`                |
-| `--mod-checkbox-top-to-text`                    |
-| `--mod-focus-indicator-thickness`               |
diff --git a/components/checkbox/package.json b/components/checkbox/package.json
index c5097f4400..c06e07b91b 100644
--- a/components/checkbox/package.json
+++ b/components/checkbox/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js
index 07ab09a792..ecee4a4b38 100644
--- a/components/checkbox/stories/checkbox.stories.js
+++ b/components/checkbox/stories/checkbox.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isChecked, isDisabled, isEmphasized, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CheckboxGroup } from "./checkbox.test.js";
 import { AllVariantsCheckboxGroup, DocsCheckboxGroup, Template } from "./template.js";
@@ -51,6 +51,10 @@ export default {
 		actions: {
 			handles: ["click input[type=\"checkbox\"]"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=164-16685",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js
index 920b1f98b5..9c778259f7 100644
--- a/components/checkbox/stories/template.js
+++ b/components/checkbox/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Checkbox",
diff --git a/components/checkbox/themes/express.css b/components/checkbox/themes/express.css
index da58ca9426..1c84aa5f83 100644
--- a/components/checkbox/themes/express.css
+++ b/components/checkbox/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Checkbox {
 		--spectrum-checkbox-control-color-default: var(--spectrum-gray-800);
 		--spectrum-checkbox-control-color-hover: var(--spectrum-gray-900);
diff --git a/components/checkbox/themes/spectrum-two.css b/components/checkbox/themes/spectrum-two.css
new file mode 100644
index 0000000000..8632f60bce
--- /dev/null
+++ b/components/checkbox/themes/spectrum-two.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Checkbox {
+		--spectrum-checkbox-control-color-default: var(--spectrum-gray-600);
+		--spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
+		--spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
+		--spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
+
+		--spectrum-checkbox-checkmark-color: var(--spectrum-gray-50);
+		--spectrum-checkbox-control-corner-radius: 2px;
+	}
+}
diff --git a/components/checkbox/themes/spectrum.css b/components/checkbox/themes/spectrum.css
index 49c95dd11a..25ea7552d1 100644
--- a/components/checkbox/themes/spectrum.css
+++ b/components/checkbox/themes/spectrum.css
@@ -11,11 +11,13 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-Checkbox {
-		--spectrum-checkbox-control-color-default: var(--spectrum-gray-600);
-		--spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
-		--spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
-		--spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
+		--spectrum-checkbox-checkmark-color: var(--spectrum-gray-75);
+		--spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
 	}
 }
diff --git a/components/clearbutton/metadata/metadata.json b/components/clearbutton/dist/metadata.json
similarity index 89%
rename from components/clearbutton/metadata/metadata.json
rename to components/clearbutton/dist/metadata.json
index 711176c624..9c4c6a6511 100644
--- a/components/clearbutton/metadata/metadata.json
+++ b/components/clearbutton/dist/metadata.json
@@ -8,16 +8,14 @@
     ".spectrum-ClearButton--overBackground:focus-visible",
     ".spectrum-ClearButton--staticWhite:focus-visible",
     ".spectrum-ClearButton-fill",
+    ".spectrum-ClearButton-icon",
     ".spectrum-ClearButton.is-disabled",
-    ".spectrum-ClearButton.is-disabled .spectrum-ClearButton-icon",
-    ".spectrum-ClearButton.spectrum-ClearButton--overBackground",
     ".spectrum-ClearButton.spectrum-ClearButton--quiet",
     ".spectrum-ClearButton.spectrum-ClearButton--sizeL",
     ".spectrum-ClearButton.spectrum-ClearButton--sizeS",
     ".spectrum-ClearButton.spectrum-ClearButton--sizeXL",
     ".spectrum-ClearButton.spectrum-ClearButton--staticWhite",
     ".spectrum-ClearButton:disabled",
-    ".spectrum-ClearButton:disabled .spectrum-ClearButton-icon",
     ".spectrum-ClearButton:not(:disabled)",
     ".spectrum-ClearButton:not(:disabled):active",
     ".spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill",
@@ -52,7 +50,6 @@
     "--spectrum-clear-button-background-color-key-focus",
     "--spectrum-clear-button-height",
     "--spectrum-clear-button-icon-color",
-    "--spectrum-clear-button-icon-color-disabled",
     "--spectrum-clear-button-icon-color-down",
     "--spectrum-clear-button-icon-color-hover",
     "--spectrum-clear-button-icon-color-key-focus",
@@ -66,23 +63,23 @@
     "--spectrum-component-height-75",
     "--spectrum-disabled-content-color",
     "--spectrum-disabled-static-white-content-color",
-    "--spectrum-gray-200",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
     "--spectrum-in-field-button-edge-to-fill",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
     "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-transparent-white-300",
     "--spectrum-transparent-white-400",
+    "--spectrum-transparent-white-500",
     "--spectrum-white"
   ],
   "system-theme": [
     "--system-clear-button-background-color",
     "--system-clear-button-background-color-down",
     "--system-clear-button-background-color-hover",
-    "--system-clear-button-background-color-key-focus"
+    "--system-clear-button-background-color-key-focus",
+    "--system-clear-button-static-white-background-color-down",
+    "--system-clear-button-static-white-background-color-hover",
+    "--system-clear-button-static-white-background-color-key-focus"
   ],
   "passthroughs": [],
   "high-contrast": ["--highcontrast-clear-button-icon-color-hover"]
diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css
index d8bc06063c..edee47004e 100644
--- a/components/clearbutton/index.css
+++ b/components/clearbutton/index.css
@@ -11,8 +11,7 @@
 * governing permissions and limitations under the License.
 */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-ClearButton {
 	--spectrum-clear-button-height: var(--spectrum-component-height-100);
@@ -57,18 +56,14 @@
 		--mod-clear-button-background-color-key-focus: transparent;
 	}
 
-	/* @deprecated .spectrum-ClearButton--overBackground */
-	&.spectrum-ClearButton--staticWhite,
-	&.spectrum-ClearButton--overBackground {
+	&.spectrum-ClearButton--staticWhite {
 		--mod-clear-button-icon-color: var(--spectrum-white);
 		--mod-clear-button-icon-color-hover: var(--spectrum-white);
 		--mod-clear-button-icon-color-down: var(--spectrum-white);
 		--mod-clear-button-icon-color-key-focus: var(--spectrum-white);
+		--mod-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
 
 		--mod-clear-button-background-color: transparent;
-		--mod-clear-button-background-color-hover: var(--spectrum-transparent-white-300);
-		--mod-clear-button-background-color-down: var(--spectrum-transparent-white-400);
-		--mod-clear-button-background-color-key-focus: var(--spectrum-transparent-white-300);
 	}
 
 	&:disabled,
@@ -79,10 +74,6 @@
 		--mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
 	}
 
-	&.spectrum-ClearButton--staticWhite {
-		--spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
-	}
-
 	&:not(:disabled) {
 		cursor: pointer;
 	}
@@ -119,11 +110,8 @@
 	}
 }
 
-.spectrum-ClearButton:disabled,
-.spectrum-ClearButton.is-disabled {
-	.spectrum-ClearButton-icon {
-		color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-clear-button-icon-color-disabled));
-	}
+.spectrum-ClearButton-icon {
+	color: inherit;
 }
 
 .spectrum-ClearButton-fill {
diff --git a/components/clearbutton/metadata/mods.md b/components/clearbutton/metadata/mods.md
deleted file mode 100644
index 1af49691ae..0000000000
--- a/components/clearbutton/metadata/mods.md
+++ /dev/null
@@ -1,15 +0,0 @@
-| Modifiable custom properties                    |
-| ----------------------------------------------- |
-| `--mod-clear-button-background-color`           |
-| `--mod-clear-button-background-color-disabled`  |
-| `--mod-clear-button-background-color-down`      |
-| `--mod-clear-button-background-color-hover`     |
-| `--mod-clear-button-background-color-key-focus` |
-| `--mod-clear-button-height`                     |
-| `--mod-clear-button-icon-color`                 |
-| `--mod-clear-button-icon-color-disabled`        |
-| `--mod-clear-button-icon-color-down`            |
-| `--mod-clear-button-icon-color-hover`           |
-| `--mod-clear-button-icon-color-key-focus`       |
-| `--mod-clear-button-padding`                    |
-| `--mod-clear-button-width`                      |
diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json
index 09b4c92e8b..ca6bbaba35 100644
--- a/components/clearbutton/package.json
+++ b/components/clearbutton/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js
index 3e19531b47..a8dd535927 100644
--- a/components/clearbutton/stories/clearbutton.stories.js
+++ b/components/clearbutton/stories/clearbutton.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isQuiet, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ClearButtonGroup } from "./clearbutton.test.js";
 import { Template } from "./template.js";
@@ -102,6 +102,7 @@ Sizing.args = {};
 Sizing.tags = ["!dev"];
 Sizing.parameters = {
 	chromatic: { disableSnapshot: true },
+
 };
 
 export const OverBackground = ClearButtonGroup.bind({});
diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js
index a4ce921c7a..58e90007c0 100644
--- a/components/clearbutton/stories/template.js
+++ b/components/clearbutton/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-ClearButton",
diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css
index f6a9806911..e13724e288 100644
--- a/components/clearbutton/themes/express.css
+++ b/components/clearbutton/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-ClearButton {
 		--spectrum-clear-button-background-color: var(--spectrum-gray-200);
 		--spectrum-clear-button-background-color-hover: var(--spectrum-gray-300);
diff --git a/components/clearbutton/themes/spectrum-two.css b/components/clearbutton/themes/spectrum-two.css
new file mode 100644
index 0000000000..abba1f7855
--- /dev/null
+++ b/components/clearbutton/themes/spectrum-two.css
@@ -0,0 +1,27 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-ClearButton {
+		--spectrum-clear-button-background-color: transparent;
+		--spectrum-clear-button-background-color-hover: transparent;
+		--spectrum-clear-button-background-color-down: transparent;
+		--spectrum-clear-button-background-color-key-focus: transparent;
+
+		&.spectrum-ClearButton--staticWhite {
+			--spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400);
+			--spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500);
+			--spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400);
+		}
+	}
+}
diff --git a/components/clearbutton/themes/spectrum.css b/components/clearbutton/themes/spectrum.css
index 84194abf9a..e4235fb3df 100644
--- a/components/clearbutton/themes/spectrum.css
+++ b/components/clearbutton/themes/spectrum.css
@@ -11,11 +11,16 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-ClearButton {
-		--spectrum-clear-button-background-color: transparent;
-		--spectrum-clear-button-background-color-hover: transparent;
-		--spectrum-clear-button-background-color-down: transparent;
-		--spectrum-clear-button-background-color-key-focus: transparent;
+		&.spectrum-ClearButton--staticWhite {
+			--spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-300);
+			--spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-400);
+			--spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-300);
+		}
 	}
 }
diff --git a/components/closebutton/metadata/metadata.json b/components/closebutton/dist/metadata.json
similarity index 88%
rename from components/closebutton/metadata/metadata.json
rename to components/closebutton/dist/metadata.json
index 2f074987f0..756fc3d7e6 100644
--- a/components/closebutton/metadata/metadata.json
+++ b/components/closebutton/dist/metadata.json
@@ -2,10 +2,6 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-CloseButton",
-    ".spectrum-CloseButton--sizeL",
-    ".spectrum-CloseButton--sizeM",
-    ".spectrum-CloseButton--sizeS",
-    ".spectrum-CloseButton--sizeXL",
     ".spectrum-CloseButton--staticBlack",
     ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)",
@@ -39,6 +35,12 @@
     ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)",
     ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
+    ".spectrum-CloseButton.spectrum-CloseButton--sizeL",
+    ".spectrum-CloseButton.spectrum-CloseButton--sizeM",
+    ".spectrum-CloseButton.spectrum-CloseButton--sizeS",
+    ".spectrum-CloseButton.spectrum-CloseButton--sizeXL",
+    ".spectrum-CloseButton.spectrum-CloseButton--staticBlack",
+    ".spectrum-CloseButton.spectrum-CloseButton--staticWhite",
     ".spectrum-CloseButton::-moz-focus-inner",
     ".spectrum-CloseButton:after",
     ".spectrum-CloseButton:disabled",
@@ -55,10 +57,6 @@
     ".spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton:not(:disabled):hover",
     ".spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon",
-    ".spectrum-Closebutton--sizeL",
-    ".spectrum-Closebutton--sizeM",
-    ".spectrum-Closebutton--sizeS",
-    ".spectrum-Closebutton--sizeXL",
     "a.spectrum-CloseButton"
   ],
   "modifiers": [
@@ -125,9 +123,8 @@
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
+    "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
     "--spectrum-line-height-100",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
@@ -136,17 +133,23 @@
     "--spectrum-sans-font-family-stack",
     "--spectrum-static-black-focus-indicator-color",
     "--spectrum-static-white-focus-indicator-color",
-    "--spectrum-transparent-black-300",
     "--spectrum-transparent-black-400",
-    "--spectrum-transparent-white-300",
+    "--spectrum-transparent-black-500",
     "--spectrum-transparent-white-400",
+    "--spectrum-transparent-white-500",
     "--spectrum-white"
   ],
   "system-theme": [
     "--system-close-button-background-color-default",
     "--system-close-button-background-color-down",
     "--system-close-button-background-color-focus",
-    "--system-close-button-background-color-hover"
+    "--system-close-button-background-color-hover",
+    "--system-close-button-static-black-static-background-color-down",
+    "--system-close-button-static-black-static-background-color-focus",
+    "--system-close-button-static-black-static-background-color-hover",
+    "--system-close-button-static-white-static-background-color-down",
+    "--system-close-button-static-white-static-background-color-focus",
+    "--system-close-button-static-white-static-background-color-hover"
   ],
   "passthroughs": [
     "--mod-button-animation-duration",
diff --git a/components/closebutton/index.css b/components/closebutton/index.css
index a0149c8b73..14880d3ee6 100644
--- a/components/closebutton/index.css
+++ b/components/closebutton/index.css
@@ -11,75 +11,9 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 @import "@spectrum-css/commons/basebutton.css";
 
-.spectrum-CloseButton {
-	/* Cross icon */
-	--spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
-	--spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover);
-	--spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down);
-	--spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
-	--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);
-
-	/* Focus ring */
-	--spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-	--spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-	--spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
-	--spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
-}
-
-/* @deprecated .spectrum-Closebutton--sizeM */
-.spectrum-CloseButton,
-.spectrum-CloseButton--sizeM,
-.spectrum-Closebutton--sizeM {
-	--spectrum-closebutton-size: var(--spectrum-component-height-100);
-	--spectrum-closebutton-border-radius: var(--spectrum-component-height-100);
-}
-
-/* @deprecated .spectrum-Closebutton--sizeS */
-.spectrum-CloseButton--sizeS,
-.spectrum-Closebutton--sizeS {
-	--spectrum-closebutton-size: var(--spectrum-component-height-75);
-	--spectrum-closebutton-border-radius: var(--spectrum-component-height-75);
-}
-
-/* @deprecated .spectrum-Closebutton--sizeL */
-.spectrum-CloseButton--sizeL,
-.spectrum-Closebutton--sizeL {
-	--spectrum-closebutton-size: var(--spectrum-component-height-200);
-	--spectrum-closebutton-border-radius: var(--spectrum-component-height-200);
-}
-
-/* @deprecated .spectrum-Closebutton--sizeXL */
-.spectrum-CloseButton--sizeXL,
-.spectrum-Closebutton--sizeXL {
-	--spectrum-closebutton-size: var(--spectrum-component-height-300);
-	--spectrum-closebutton-border-radius: var(--spectrum-component-height-300);
-}
-
-.spectrum-CloseButton--staticWhite {
-	--spectrum-closebutton-static-background-color-default: transparent;
-	--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300);
-	--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400);
-	--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300);
-	--spectrum-closebutton-icon-color-default: var(--spectrum-white);
-	--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
-	--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-}
-
-.spectrum-CloseButton--staticBlack {
-	--spectrum-closebutton-static-background-color-default: transparent;
-	--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300);
-	--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400);
-	--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300);
-	--spectrum-closebutton-icon-color-default: var(--spectrum-black);
-	--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
-	--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-}
-
 /* Windows high contrast mode */
 @media (forced-colors: active) {
 	.spectrum-CloseButton {
@@ -114,11 +48,58 @@
 	}
 }
 
-a.spectrum-CloseButton {
-	@extend %spectrum-AnchorButton;
-}
-
 .spectrum-CloseButton {
+	/* Cross icon */
+	--spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
+	--spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down);
+	--spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
+	--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);
+
+	/* Focus ring */
+	--spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+	--spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+	--spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+	--spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
+
+	&.spectrum-CloseButton--sizeS {
+		--spectrum-closebutton-size: var(--spectrum-component-height-75);
+		--spectrum-closebutton-border-radius: var(--spectrum-component-height-75);
+	}
+
+	&,
+	&.spectrum-CloseButton--sizeM {
+		--spectrum-closebutton-size: var(--spectrum-component-height-100);
+		--spectrum-closebutton-border-radius: var(--spectrum-component-height-100);
+	}
+
+	&.spectrum-CloseButton--sizeL {
+		--spectrum-closebutton-size: var(--spectrum-component-height-200);
+		--spectrum-closebutton-border-radius: var(--spectrum-component-height-200);
+	}
+
+	&.spectrum-CloseButton--sizeXL {
+		--spectrum-closebutton-size: var(--spectrum-component-height-300);
+		--spectrum-closebutton-border-radius: var(--spectrum-component-height-300);
+	}
+
+	&.spectrum-CloseButton--staticWhite {
+		--spectrum-closebutton-static-background-color-default: transparent;
+
+		--spectrum-closebutton-icon-color-default: var(--spectrum-white);
+		--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
+		--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+	}
+
+	&.spectrum-CloseButton--staticBlack {
+		--spectrum-closebutton-static-background-color-default: transparent;
+
+		--spectrum-closebutton-icon-color-default: var(--spectrum-black);
+		--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
+		--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+	}
+
 	@extend %spectrum-BaseButton;
 
 	block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size));
@@ -166,55 +147,58 @@ a.spectrum-CloseButton {
 			box-shadow: 0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color)));
 		}
 	}
-}
 
-/* COLORS */
-.spectrum-CloseButton:not(:disabled) {
-	background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)));
+	&:not(:disabled) {
+		background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)));
 
-	&:hover {
-		background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover));
+		&:hover {
+			background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover));
 
-		.spectrum-CloseButton-UIIcon {
-			color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)));
+			.spectrum-CloseButton-UIIcon {
+				color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)));
+			}
 		}
-	}
 
-	&:active {
-		background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down));
+		&:active {
+			background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down));
 
-		.spectrum-CloseButton-UIIcon {
-			color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)));
+			.spectrum-CloseButton-UIIcon {
+				color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)));
+			}
 		}
-	}
 
-	&:focus-visible,
-	&.is-keyboardFocused {
-		background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus));
+		&:focus-visible,
+		&.is-keyboardFocused {
+			background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus));
+
+			.spectrum-CloseButton-UIIcon {
+				color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
+			}
+		}
 
 		.spectrum-CloseButton-UIIcon {
-			color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
+			color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
 		}
-	}
 
-	.spectrum-CloseButton-UIIcon {
-		color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
+		&:focus,
+		&.is-focused {
+			.spectrum-CloseButton-UIIcon {
+				color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
+			}
+		}
 	}
 
-	&:focus,
-	&.is-focused {
+	&:disabled {
+		background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default));
+
 		.spectrum-CloseButton-UIIcon {
-			color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
+			color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
 		}
 	}
 }
 
-.spectrum-CloseButton:disabled {
-	background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default));
-
-	.spectrum-CloseButton-UIIcon {
-		color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
-	}
+a.spectrum-CloseButton {
+	@extend %spectrum-AnchorButton;
 }
 
 /* Modifier Classes */
diff --git a/components/closebutton/metadata/mods.md b/components/closebutton/metadata/mods.md
deleted file mode 100644
index 1c948ad358..0000000000
--- a/components/closebutton/metadata/mods.md
+++ /dev/null
@@ -1,30 +0,0 @@
-| Modifiable custom properties                        |
-| --------------------------------------------------- |
-| `--mod-animation-duration-100`                      |
-| `--mod-closebutton-align-self`                      |
-| `--mod-closebutton-animation-duraction`             |
-| `--mod-closebutton-animation-duration`              |
-| `--mod-closebutton-background-color-default`        |
-| `--mod-closebutton-background-color-down`           |
-| `--mod-closebutton-background-color-focus`          |
-| `--mod-closebutton-background-color-hover`          |
-| `--mod-closebutton-border-radius`                   |
-| `--mod-closebutton-focus-indicator-color`           |
-| `--mod-closebutton-focus-indicator-gap`             |
-| `--mod-closebutton-focus-indicator-thickness`       |
-| `--mod-closebutton-height`                          |
-| `--mod-closebutton-icon-color-default`              |
-| `--mod-closebutton-icon-color-disabled`             |
-| `--mod-closebutton-icon-color-down`                 |
-| `--mod-closebutton-icon-color-focus`                |
-| `--mod-closebutton-icon-color-hover`                |
-| `--mod-closebutton-margin-inline`                   |
-| `--mod-closebutton-margin-top`                      |
-| `--mod-closebutton-size`                            |
-| `--mod-closebutton-static-background-color-default` |
-| `--mod-closebutton-static-background-color-down`    |
-| `--mod-closebutton-static-background-color-focus`   |
-| `--mod-closebutton-static-background-color-hover`   |
-| `--mod-closebutton-width`                           |
-| `--mod-line-height-100`                             |
-| `--mod-sans-font-family-stack`                      |
diff --git a/components/closebutton/package.json b/components/closebutton/package.json
index 732eb5ecc1..0dc332706e 100644
--- a/components/closebutton/package.json
+++ b/components/closebutton/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js
index c2950377b6..f048e3e23b 100644
--- a/components/closebutton/stories/closebutton.stories.js
+++ b/components/closebutton/stories/closebutton.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isHovered, isKeyboardFocused, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CloseButtonGroup } from "./closebutton.test.js";
 import { CloseButtonExample, Template } from "./template.js";
@@ -46,6 +46,10 @@ export default {
 		actions: {
 			handles: ["click .spectrum-CloseButton"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13601-149",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js
index 4e730b8529..644ce705f6 100644
--- a/components/closebutton/stories/template.js
+++ b/components/closebutton/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { capitalize, upperCase } from "lodash-es";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-CloseButton",
diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css
index 6276beedfb..06a90e4fee 100644
--- a/components/closebutton/themes/express.css
+++ b/components/closebutton/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-CloseButton {
 		--spectrum-closebutton-background-color-default: transparent;
 		--spectrum-closebutton-background-color-hover: var(--spectrum-gray-300);
diff --git a/components/closebutton/themes/spectrum-two.css b/components/closebutton/themes/spectrum-two.css
new file mode 100644
index 0000000000..01479c42fd
--- /dev/null
+++ b/components/closebutton/themes/spectrum-two.css
@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-CloseButton {
+		--spectrum-closebutton-background-color-default: transparent;
+		--spectrum-closebutton-background-color-hover: var(--spectrum-gray-100);
+		--spectrum-closebutton-background-color-down: var(--spectrum-gray-200);
+		--spectrum-closebutton-background-color-focus: var(--spectrum-gray-100);
+
+		&.spectrum-CloseButton--staticWhite {
+			--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400);
+			--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500);
+			--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400);
+		}
+
+		&.spectrum-CloseButton--staticBlack {
+			--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400);
+			--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500);
+			--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400);
+		}
+	}
+}
diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css
index 84b1402f85..62e907bae8 100644
--- a/components/closebutton/themes/spectrum.css
+++ b/components/closebutton/themes/spectrum.css
@@ -11,11 +11,26 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-CloseButton {
-		--spectrum-closebutton-background-color-default: transparent;
 		--spectrum-closebutton-background-color-hover: var(--spectrum-gray-200);
 		--spectrum-closebutton-background-color-down: var(--spectrum-gray-300);
 		--spectrum-closebutton-background-color-focus: var(--spectrum-gray-200);
+
+		&.spectrum-CloseButton--staticWhite {
+			--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300);
+			--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400);
+			--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300);
+		}
+
+		&.spectrum-CloseButton--staticBlack {
+			--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300);
+			--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400);
+			--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300);
+		}
 	}
 }
diff --git a/components/coachindicator/animation.css b/components/coachindicator/animation.css
deleted file mode 100644
index 9a025fb13d..0000000000
--- a/components/coachindicator/animation.css
+++ /dev/null
@@ -1,55 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-.spectrum-CoachIndicator {
-	--spectrum-coach-indicator-animation-keyframe-0-scale: 1;
-	--spectrum-coach-indicator-animation-keyframe-0-opacity: 0;
-	--spectrum-coach-indicator-animation-keyframe-50-scale: 1.5;
-	--spectrum-coach-indicator-animation-keyframe-50-opacity: 1;
-	--spectrum-coach-indicator-animation-keyframe-100-scale: 2;
-	--spectrum-coach-indicator-animation-keyframe-100-opacity: 0;
-	--spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8;
-}
-
-@keyframes pulse {
-	0% {
-		transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale));
-		opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
-	}
-
-	50% {
-		transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
-		opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
-	}
-
-	100% {
-		transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
-		opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
-	}
-}
-
-@keyframes pulse-quiet {
-	0% {
-		transform: scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale));
-		opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
-	}
-
-	50% {
-		transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
-		opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
-	}
-
-	100% {
-		transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
-		opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
-	}
-}
diff --git a/components/coachindicator/metadata/metadata.json b/components/coachindicator/dist/metadata.json
similarity index 57%
rename from components/coachindicator/metadata/metadata.json
rename to components/coachindicator/dist/metadata.json
index 91af3d8616..9714f9f1ed 100644
--- a/components/coachindicator/metadata/metadata.json
+++ b/components/coachindicator/dist/metadata.json
@@ -2,14 +2,15 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-CoachIndicator",
-    ".spectrum-CoachIndicator--dark .spectrum-CoachIndicator-ring",
-    ".spectrum-CoachIndicator--light .spectrum-CoachIndicator-ring",
-    ".spectrum-CoachIndicator--quiet",
-    ".spectrum-CoachIndicator--staticWhite .spectrum-CoachIndicator-ring",
     ".spectrum-CoachIndicator-ring",
     ".spectrum-CoachIndicator-ring:first-child",
     ".spectrum-CoachIndicator-ring:nth-child(2)",
     ".spectrum-CoachIndicator-ring:nth-child(3)",
+    ".spectrum-CoachIndicator.spectrum-CoachIndicator--dark",
+    ".spectrum-CoachIndicator.spectrum-CoachIndicator--light",
+    ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet",
+    ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack",
+    ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite",
     "0%",
     "50%",
     "to"
@@ -32,45 +33,32 @@
     "--mod-coach-indicator-ring-border-size",
     "--mod-coach-indicator-ring-dark-color",
     "--mod-coach-indicator-ring-default-color",
+    "--mod-coach-indicator-ring-diameter",
     "--mod-coach-indicator-ring-inline-size",
     "--mod-coach-indicator-ring-light-color",
     "--mod-coach-indicator-top"
   ],
   "component": [
-    "--spectrum-coach-indicator-animation-keyframe-0-opacity",
-    "--spectrum-coach-indicator-animation-keyframe-0-scale",
-    "--spectrum-coach-indicator-animation-keyframe-100-opacity",
-    "--spectrum-coach-indicator-animation-keyframe-100-scale",
-    "--spectrum-coach-indicator-animation-keyframe-50-opacity",
-    "--spectrum-coach-indicator-animation-keyframe-50-scale",
-    "--spectrum-coach-indicator-animation-name",
+    "--spectrum-coach-indicator-animation-keyframe-scale-initial",
+    "--spectrum-coach-indicator-animation-ring-inner-delay-multiple",
     "--spectrum-coach-indicator-block-size",
     "--spectrum-coach-indicator-gap",
     "--spectrum-coach-indicator-inline-size",
-    "--spectrum-coach-indicator-inner-animation-delay-multiple",
-    "--spectrum-coach-indicator-left",
     "--spectrum-coach-indicator-min-block-size",
     "--spectrum-coach-indicator-min-inline-size",
-    "--spectrum-coach-indicator-quiet-animation-keyframe-0-scale",
-    "--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple",
     "--spectrum-coach-indicator-quiet-ring-diameter",
-    "--spectrum-coach-indicator-ring-block-size",
     "--spectrum-coach-indicator-ring-border-size",
-    "--spectrum-coach-indicator-ring-dark-color",
     "--spectrum-coach-indicator-ring-default-color",
     "--spectrum-coach-indicator-ring-diameter",
-    "--spectrum-coach-indicator-ring-inline-size",
-    "--spectrum-coach-indicator-ring-light-color",
-    "--spectrum-coach-indicator-ring-static-white-color",
-    "--spectrum-coach-indicator-top"
+    "--spectrum-coach-indicator-ring-diameter-size",
+    "--spectrum-coach-indicator-sizing-multiple"
   ],
   "global": [
     "--spectrum-animation-duration-6000",
+    "--spectrum-black",
     "--spectrum-border-width-200",
-    "--spectrum-coach-animation-indicator-ring-center-delay-multiple",
     "--spectrum-coach-animation-indicator-ring-duration",
-    "--spectrum-coach-animation-indicator-ring-inner-delay-multiple",
-    "--spectrum-coach-animation-indicator-ring-outer-delay-multiple"
+    "--spectrum-white"
   ],
   "system-theme": [],
   "passthroughs": [],
diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css
index b532486bd4..8cc7bdb8ed 100644
--- a/components/coachindicator/index.css
+++ b/components/coachindicator/index.css
@@ -11,53 +11,56 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./animation.css";
-
 .spectrum-CoachIndicator {
 	--spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
-	--spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
-	--spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
-	--spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size);
-	--spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size);
-	--spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter);
-	--spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter);
+	--spectrum-coach-indicator-sizing-multiple: 3;
+	--spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-ring-diameter, var(--spectrum-coach-indicator-ring-diameter));
+
+	--spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple));
+	--spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple));
 
-	--spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
-	--spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
+	--spectrum-coach-indicator-inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size));
+	--spectrum-coach-indicator-block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size));
 
-	/* animation */
 	--spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
-	--spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
-	--spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66;
-	--spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1;
-	--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
-	--spectrum-coach-indicator-animation-name: pulse;
-	--spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple);
-}
+	--spectrum-coach-indicator-animation-keyframe-scale-initial: 1;
+	--spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-inner-animation-delay-multiple, -0.5);
+
+	&.spectrum-CoachIndicator--quiet {
+		--spectrum-coach-indicator-animation-keyframe-scale-initial: 0.8;
+		--spectrum-coach-indicator-sizing-multiple: 2.75;
+		--spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
+		--spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33);
+	}
 
-.spectrum-CoachIndicator--quiet {
-	--mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
-	--mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
-	--mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
-	--mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
-	--mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
-	--mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
-
-	--mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
-	--mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
-	--mod-coach-indicator-animation-name: pulse-quiet;
-	--mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple));
-}
+	/* @deprecated .spectrum-CoachIndicator--light */
+	&.spectrum-CoachIndicator--light {
+		/* @deprecated --mod-coach-indicator-ring-light-color, use --mod-coach-indicator-ring-default-color instead */
+		--spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white));
+	}
+
+	/* @deprecated .spectrum-CoachIndicator--dark */
+	&.spectrum-CoachIndicator--dark {
+		/* @deprecated --mod-coach-indicator-ring-dark-color, use --mod-coach-indicator-ring-default-color instead */
+		--spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black));
+	}
+
+	&.spectrum-CoachIndicator--staticWhite {
+		--spectrum-coach-indicator-ring-default-color: var(--spectrum-white);
+	}
+
+	&.spectrum-CoachIndicator--staticBlack {
+		--spectrum-coach-indicator-ring-default-color: var(--spectrum-black);
+	}
 
-.spectrum-CoachIndicator {
 	position: relative;
 	margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap));
 
 	min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size));
 	min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size));
 
-	inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size));
-	block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size));
+	inline-size: var(--spectrum-coach-indicator-inline-size);
+	block-size: var(--spectrum-coach-indicator-block-size);
 }
 
 .spectrum-CoachIndicator-ring {
@@ -69,42 +72,45 @@
 	border-radius: 50%;
 	border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color));
 
-	inset-block-start: var(--mod-coach-indicator-top, var(--spectrum-coach-indicator-top));
-	inset-inline-start: var(--mod-coach-indicator-left, var(--spectrum-coach-indicator-left));
+	inset-block-start: var(--mod-coach-indicator-top, calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)));
+	inset-inline-start: var(--mod-coach-indicator-left, calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)));
 
-	inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-inline-size));
-	block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-block-size));
-	animation: var(--mod-coach-indicator-animation-name, var(--spectrum-coach-indicator-animation-name)) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite;
+	inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-diameter-size));
+	block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-diameter-size));
+	animation: var(--mod-coach-indicator-animation-name, pulse) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite;
 
 	&:nth-child(1) {
-		animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-indicator-inner-animation-delay-multiple, var(--spectrum-coach-indicator-inner-animation-delay-multiple)));
+		animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--spectrum-coach-indicator-animation-ring-inner-delay-multiple));
 	}
 
 	&:nth-child(2) {
-		animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, var(--spectrum-coach-animation-indicator-ring-center-delay-multiple)));
+		animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, -0.66));
 	}
 
 	&:nth-child(3) {
-		animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, var(--spectrum-coach-animation-indicator-ring-outer-delay-multiple)));
+		animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, -1));
 	}
+}
 
-	/* @deprecated .spectrum-CoachIndicator--light */
-	.spectrum-CoachIndicator--light & {
-		border-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-coach-indicator-ring-light-color));
+@media (prefers-reduced-motion: reduce) {
+	.spectrum-CoachIndicator-ring {
+		animation: none;
 	}
+}
 
-	.spectrum-CoachIndicator--staticWhite & {
-		border-color: var(--spectrum-coach-indicator-ring-static-white-color);
+@keyframes pulse {
+	0% {
+		transform: scale(var(--spectrum-coach-indicator-animation-keyframe-scale-initial));
+		opacity: 0;
 	}
 
-	/* @deprecated .spectrum-CoachIndicator--dark */
-	.spectrum-CoachIndicator--dark & {
-		border-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-coach-indicator-ring-dark-color));
+	50% {
+		transform: scale(1.5);
+		opacity: 1;
 	}
-}
 
-@media (prefers-reduced-motion: reduce) {
-	.spectrum-CoachIndicator-ring {
-		animation: none;
+	100% {
+		transform: scale(2);
+		opacity: 0;
 	}
 }
diff --git a/components/coachindicator/metadata/mods.md b/components/coachindicator/metadata/mods.md
deleted file mode 100644
index 6524851fae..0000000000
--- a/components/coachindicator/metadata/mods.md
+++ /dev/null
@@ -1,22 +0,0 @@
-| Modifiable custom properties                                      |
-| ----------------------------------------------------------------- |
-| `--mod-coach-animation-indicator-ring-center-delay-multiple`      |
-| `--mod-coach-animation-indicator-ring-duration`                   |
-| `--mod-coach-animation-indicator-ring-outer-delay-multiple`       |
-| `--mod-coach-indicator-animation-name`                            |
-| `--mod-coach-indicator-block-size`                                |
-| `--mod-coach-indicator-gap`                                       |
-| `--mod-coach-indicator-inline-size`                               |
-| `--mod-coach-indicator-inner-animation-delay-multiple`            |
-| `--mod-coach-indicator-left`                                      |
-| `--mod-coach-indicator-min-block-size`                            |
-| `--mod-coach-indicator-min-inline-size`                           |
-| `--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple` |
-| `--mod-coach-indicator-quiet-ring-diameter`                       |
-| `--mod-coach-indicator-ring-block-size`                           |
-| `--mod-coach-indicator-ring-border-size`                          |
-| `--mod-coach-indicator-ring-dark-color`                           |
-| `--mod-coach-indicator-ring-default-color`                        |
-| `--mod-coach-indicator-ring-inline-size`                          |
-| `--mod-coach-indicator-ring-light-color`                          |
-| `--mod-coach-indicator-top`                                       |
diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json
index d0ab53d21d..1bbefa6e6e 100644
--- a/components/coachindicator/package.json
+++ b/components/coachindicator/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js
index bef438a0f5..f206b3bef9 100644
--- a/components/coachindicator/stories/coachindicator.stories.js
+++ b/components/coachindicator/stories/coachindicator.stories.js
@@ -1,9 +1,9 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isQuiet, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CoachIndicatorGroup } from "./coachindicator.test.js";
-import { AllVariantsCoachIndicatorGroup, Template } from "./template.js";
+import { Template } from "./template.js";
 
 /**
  * The coach indicator component can be used to bring added attention to specific parts of a page.
@@ -17,27 +17,17 @@ export default {
 	component: "CoachIndicator",
 	argTypes: {
 		isQuiet,
-		variant: {
-			name: "Variant",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string" },
-				category: "Component",
-			},
-			options: ["default", "dark", "light"],
-			control: "select"
-		},
-		staticColor: {
-			...staticColor,
-			options: ["white"],
-		},
+		staticColor,
 	},
 	args: {
 		rootClass: "spectrum-CoachIndicator",
 		isQuiet: false,
-		variant: "default",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=48600-896",
+		},
 		packageJson,
 		metadata,
 	},
@@ -49,30 +39,17 @@ Default.parameters = {
 	chromatic: {
 		prefersReducedMotion: "reduce",
 		pauseAnimationAtEnd: true,
-		modes: {
-			// Skips the dark mode/RTL b/c no changes are made to the component
-			"Dark | RTL": {
-				disable: true,
-			},
-		},
 	},
 };
 Default.tags = ["!autodocs"];
 
-export const DefaultVariants = AllVariantsCoachIndicatorGroup.bind({});
-DefaultVariants.tags = ["!dev"];
-DefaultVariants.storyName = "Default";
-DefaultVariants.parameters = {
-	chromatic: { disableSnapshot: true }
-};
-
-export const QuietVariants = AllVariantsCoachIndicatorGroup.bind({});
-QuietVariants.tags = ["!dev"];
-QuietVariants.storyName = "Quiet";
-QuietVariants.args = {
+export const Quiet = Template.bind({});
+Quiet.tags = ["!dev"];
+Quiet.storyName = "Quiet";
+Quiet.args = {
 	isQuiet: true,
 };
-QuietVariants.parameters = {
+Quiet.parameters = {
 	chromatic: { disableSnapshot: true }
 };
 
@@ -84,11 +61,24 @@ StaticWhite.args = {
 	staticColor: "white"
 };
 StaticWhite.tags = ["!dev"];
-StaticWhite.storyName = "Static White";
+StaticWhite.storyName = "Static white";
 StaticWhite.parameters = {
 	chromatic: { disableSnapshot: true }
 };
 
+/**
+ * When an indicator needs to be placed on top of a visual, use the static black option. Static black does not change values depending upon the color theme.
+*/
+export const StaticBlack = Template.bind({});
+StaticBlack.args = {
+	staticColor: "black"
+};
+StaticBlack.tags = ["!dev"];
+StaticBlack.storyName = "Static black";
+StaticBlack.parameters = {
+	chromatic: { disableSnapshot: true }
+};
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = CoachIndicatorGroup.bind({});
 WithForcedColors.args = Default.args;
diff --git a/components/coachindicator/stories/coachindicator.test.js b/components/coachindicator/stories/coachindicator.test.js
index 619215be7f..15613e1ea0 100644
--- a/components/coachindicator/stories/coachindicator.test.js
+++ b/components/coachindicator/stories/coachindicator.test.js
@@ -15,22 +15,12 @@ export const CoachIndicatorGroup = Variants({
 			variant: "default",
 		},
 		{
-			testHeading: "Dark",
-			variant: "dark",
-			wrapperStyles: {
-				"background-color": "rgba(255 255 255 / 80%)",
-			},
-		},
-		{
-			testHeading: "Light",
-			variant: "light",
-			wrapperStyles: {
-				"background-color": "rgba(0 0 0 / 80%)",
-			},
+			testHeading: "Static white",
+			staticColor: "white"
 		},
 		{
-			testHeading: "Static White",
-			staticColor: "white"
+			testHeading: "Static black",
+			staticColor: "black"
 		},
 	],
 	stateData: [
diff --git a/components/coachindicator/stories/template.js b/components/coachindicator/stories/template.js
index db6af34db7..f407dc5144 100644
--- a/components/coachindicator/stories/template.js
+++ b/components/coachindicator/stories/template.js
@@ -1,4 +1,3 @@
-import { Container } from "@spectrum-css/preview/decorators";
 import { html } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { styleMap } from "lit-html/directives/style-map.js";
@@ -9,49 +8,23 @@ export const Template = ({
 	rootClass = "spectrum-CoachIndicator",
 	isQuiet = false,
 	staticColor,
-	variant,
 	customClasses = [],
 	customStyles = {},
-}) => html`
-	<div
-		class=${classMap({
-			[`${rootClass}`]: true,
-			[`${rootClass}--quiet`]: isQuiet,
-			[`${rootClass}--${variant}`]: typeof variant !== "undefined" || variant !== "default",
-			[`${rootClass}--overBackground`]: staticColor === "white",
-			[`${rootClass}--staticWhite`]: staticColor === "white",
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-		style=${styleMap(customStyles)}
-	>
-		${Array.from({ length: 3 }).map(() => html`
-			<div class=${classMap({ [`${rootClass}-ring`]: true })}></div>
-		`)}
-	</div>
-`;
-
-/* This template group showcases multiple coach indicator variants at once. */
-export const AllVariantsCoachIndicatorGroup = (args, context) => Container({
-	withBorder: false,
-	content: html`
-		${Container({
-			direction: "column",
-			withBorder: false,
-			heading: "Default",
-			content: Template({ ...args, variant: "default" }, context)
-		}, context)}
-		${Container({
-			direction: "column",
-			withBorder: false,
-			heading: "Dark",
-			content: Template({ ...args, variant: "dark" }, context)
-		}, context)}
-		${Container({
-			direction: "column",
-			withBorder: false,
-			heading: "Light",
-			content: Template({ ...args, variant: "light" }, context)
-
-		}, context)}
-	`
-}, context);
+} = {}) => {
+	return html`
+		<div
+			class=${classMap({
+				[`${rootClass}`]: true,
+				[`${rootClass}--quiet`]: isQuiet,
+				[`${rootClass}--staticWhite`]: staticColor === "white",
+				[`${rootClass}--staticBlack`]: staticColor === "black",
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			style=${styleMap(customStyles)}
+		>
+			${Array.from({ length: 3 }).map(() => html`
+				<div class=${classMap({ [`${rootClass}-ring`]: true })}></div>
+			`)}
+		</div>
+	`;
+};
diff --git a/components/coachmark/metadata/metadata.json b/components/coachmark/dist/metadata.json
similarity index 69%
rename from components/coachmark/metadata/metadata.json
rename to components/coachmark/dist/metadata.json
index c8f2d01346..8bc036d5fc 100644
--- a/components/coachmark/metadata/metadata.json
+++ b/components/coachmark/dist/metadata.json
@@ -7,7 +7,6 @@
     ".spectrum-CoachMark-buttongroup--mobile",
     ".spectrum-CoachMark-content",
     ".spectrum-CoachMark-footer",
-    ".spectrum-CoachMark-footer .spectrum-ButtonGroup",
     ".spectrum-CoachMark-header",
     ".spectrum-CoachMark-image",
     ".spectrum-CoachMark-image-wrapper",
@@ -59,40 +58,12 @@
     "--spectrum-coach-mark-pagination-text-to-bottom-edge",
     "--spectrum-coach-mark-title-size",
     "--spectrum-coach-mark-width",
-    "--spectrum-coachmark-body-to-footer",
     "--spectrum-coachmark-border-radius",
     "--spectrum-coachmark-border-size",
     "--spectrum-coachmark-buttongroup-display",
     "--spectrum-coachmark-buttongroup-mobile-display",
-    "--spectrum-coachmark-content-font-color",
-    "--spectrum-coachmark-content-font-family",
-    "--spectrum-coachmark-content-font-size",
-    "--spectrum-coachmark-content-font-style",
-    "--spectrum-coachmark-content-font-weight",
-    "--spectrum-coachmark-content-line-height",
-    "--spectrum-coachmark-header-to-body",
-    "--spectrum-coachmark-heading-to-action-button",
-    "--spectrum-coachmark-max-width",
-    "--spectrum-coachmark-media-height",
-    "--spectrum-coachmark-media-min-height",
     "--spectrum-coachmark-menu-display",
-    "--spectrum-coachmark-menu-mobile-display",
-    "--spectrum-coachmark-min-width",
-    "--spectrum-coachmark-padding",
-    "--spectrum-coachmark-step-color",
-    "--spectrum-coachmark-step-font-family",
-    "--spectrum-coachmark-step-font-size",
-    "--spectrum-coachmark-step-font-style",
-    "--spectrum-coachmark-step-font-weight",
-    "--spectrum-coachmark-step-line-height",
-    "--spectrum-coachmark-step-to-bottom",
-    "--spectrum-coachmark-title-color",
-    "--spectrum-coachmark-title-font-family",
-    "--spectrum-coachmark-title-font-size",
-    "--spectrum-coachmark-title-font-style",
-    "--spectrum-coachmark-title-text-font-weight",
-    "--spectrum-coachmark-title-text-line-height",
-    "--spectrum-coachmark-width"
+    "--spectrum-coachmark-menu-mobile-display"
   ],
   "global": [
     "--spectrum-body-color",
@@ -114,7 +85,7 @@
   "passthroughs": [
     "--mod-button-edge-to-visual-only",
     "--mod-buttongroup-justify-content",
-    "--mod-buttongroup-spacing-horizontal",
+    "--mod-buttongroup-spacing",
     "--mod-popover-border-width",
     "--mod-popover-content-area-spacing-vertical",
     "--mod-popover-corner-radius"
diff --git a/components/coachmark/index.css b/components/coachmark/index.css
index c2d6b2207f..bd8821b3bb 100644
--- a/components/coachmark/index.css
+++ b/components/coachmark/index.css
@@ -12,154 +12,135 @@
  */
 
 .spectrum-CoachMark {
-	--spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width);
-	--spectrum-coachmark-width: var(--spectrum-coach-mark-width);
-	--spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width);
-
-	--spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height);
-	--spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
-
-	--spectrum-coachmark-border-size: var(--mod-popover-border-width);
-	--spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
-
-	/* layout */
-	--spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content);
-	--spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300);
-	--spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
-	--spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);
-
-	/* font */
-	--spectrum-coachmark-title-color: var(--spectrum-heading-color);
-	--spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font);
-	--spectrum-coachmark-title-font-style: var(--spectrum-heading-serif-font-style);
-	--spectrum-coachmark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-	--spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-size);
-	--spectrum-coachmark-title-text-line-height: var(--spectrum-heading-line-height);
-
-	--spectrum-coachmark-content-font-color: var(--spectrum-body-color);
-	--spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
-	--spectrum-coachmark-content-font-family: var(--spectrum-sans-serif-font);
-	--spectrum-coachmark-content-font-style: var(--spectrum-body-sans-serif-font-style);
-	--spectrum-coachmark-content-line-height: var(--spectrum-body-line-height);
-	--spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-size);
-
-	--spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color);
-	--spectrum-coachmark-step-font-weight: var(--spectrum-body-sans-serif-font-weight);
-	--spectrum-coachmark-step-font-family: var(--spectrum-sans-serif-font);
-	--spectrum-coachmark-step-font-style: var(--spectrum-body-sans-serif-font-style);
-	--spectrum-coachmark-step-line-height: var(--spectrum-body-line-height);
-	--spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-size);
-	--spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
-
-	/* mods */
+	--spectrum-coachmark-border-size: var(--mod-coachmark-border-size, var(--mod-popover-border-width));
+	--spectrum-coachmark-border-radius: var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius));
+
+	/* @passthrough start */
 	--mod-buttongroup-justify-content: flex-end;
 	--mod-popover-border-width: var(--spectrum-border-width-100);
 	--mod-popover-corner-radius: var(--spectrum-corner-radius-100);
 	--mod-popover-content-area-spacing-vertical: 0;
 	--mod-button-edge-to-visual-only: 9px;
+	/* @passthrough end */
 
 	position: relative;
-	min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width));
-	max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width));
-	inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width));
-}
-
-.spectrum-CoachMark-buttongroup {
-	display: var(--spectrum-coachmark-buttongroup-display);
-}
-
-.spectrum-CoachMark-buttongroup--mobile {
-	--mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
-	display: var(--spectrum-coachmark-buttongroup-mobile-display);
-}
-
-.spectrum-CoachMark-menu {
-	display: var(--spectrum-coachmark-menu-display);
-}
-
-.spectrum-CoachMark-menu--mobile {
-	display: var(--spectrum-coachmark-menu-mobile-display);
+	min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coach-mark-minimum-width));
+	max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coach-mark-maximum-width));
+	inline-size: var(--mod-coachmark-width, var(--spectrum-coach-mark-width));
 }
 
+/* Used when the coachmark has an image */
 .spectrum-CoachMark-image-wrapper {
-	block-size: var(--mod-coachmark-media-height, var(--spectrum-coachmark-media-height));
-	min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height));
-	inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - (var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) * 2));
+	block-size: var(--mod-coachmark-media-height, var(--spectrum-coach-mark-media-height));
+	min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coach-mark-media-minimum-height));
+	inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coach-mark-width)) - (var(--spectrum-coachmark-border-size) * 2));
+
 	object-fit: cover;
 	object-position: center;
+
 	border-start-start-radius: inherit;
 	border-start-end-radius: inherit;
 }
 
+/* Class for the image; nested inside image-wrapper */
 .spectrum-CoachMark-image {
 	display: block;
 	inline-size: 100%;
 	block-size: 100%;
 	object-fit: cover;
-	border-start-start-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)));
-	border-start-end-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)));
+	border-start-start-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size));
+	border-start-end-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size));
 }
 
+/* Shared content styles */
 .spectrum-CoachMark-header,
 .spectrum-CoachMark-content,
 .spectrum-CoachMark-footer {
 	padding-block: 0;
-	padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
+	padding-inline: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
 }
 
+/* Wrapper contains title, action-menu */
 .spectrum-CoachMark-header {
-	padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
+	padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body));
+	margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-spacing-200));
+}
+
+/* Text wrapper for the title content; sides besdie action menu if present */
+.spectrum-CoachMark-title {
+	color: var(--mod-coachmark-title-color, var(--spectrum-heading-color));
+	font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coach-mark-title-size));
+	font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-heading-sans-serif-font-weight));
+	font-family: var(--mod-coachmark-title-font-family, var(--spectrum-sans-serif-font));
+	font-style: var(--mod-coachmark-title-font-style, var(--spectrum-heading-serif-font-style));
+	line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-heading-line-height));
+	margin-block-end: 0;
 }
 
+/* Wrapper element around the nested action menu sub-component */
 .spectrum-CoachMark-action-menu {
 	white-space: nowrap;
 	z-index: 1;
-	margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-coachmark-heading-to-action-button));
+	margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-spacing-300));
 }
 
+/* @deprecated not used currently in demos or by SWC */
+.spectrum-CoachMark-menu {
+	display: var(--spectrum-coachmark-menu-display);
+}
+
+/* @deprecated not used currently in demos or by SWC */
+.spectrum-CoachMark-menu--mobile {
+	--spectrum-coachmark-menu-display: var(--spectrum-coachmark-menu-mobile-display);
+}
+
+/* Text wrapper for the content */
 .spectrum-CoachMark-content {
-	margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-coachmark-body-to-footer));
-	color: var(--mod-coachmark-content-font-color, var(--spectrum-coachmark-content-font-color));
-	font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size));
-	font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight));
-	font-family: var(--mod-coachmark-content-font-family, var(--spectrum-coachmark-content-font-family));
-	font-style: var(--mod-coachmark-content-font-style, var(--spectrum-coachmark-content-font-style));
-	line-height: var(--mod-coachmark-content-line-height, var(--spectrum-coachmark-content-line-height));
+	margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-spacing-300));
+	color: var(--mod-coachmark-content-font-color, var(--spectrum-body-color));
+	font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coach-mark-body-size));
+	font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-body-sans-serif-font-weight));
+	font-family: var(--mod-coachmark-content-font-family, var(--spectrum-sans-serif-font));
+	font-style: var(--mod-coachmark-content-font-style, var(--spectrum-body-sans-serif-font-style));
+	line-height: var(--mod-coachmark-content-line-height, var(--spectrum-body-line-height));
 }
 
+/* Footer wrapper for the pagination and button group sub-components */
 .spectrum-CoachMark-footer {
 	display: grid;
 	align-items: end;
 	margin-block-start: 0;
-	padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
-
-	.spectrum-ButtonGroup {
-		grid-column-start: 2;
-	}
-}
-
-.spectrum-CoachMark-title {
-	color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color));
-	font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coachmark-title-font-size));
-	font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-coachmark-title-text-font-weight));
-	font-family: var(--mod-coachmark-title-font-family, var(--spectrum-coachmark-title-font-family));
-	font-style: var(--mod-coachmark-title-font-style, var(--spectrum-coachmark-title-font-style));
-	line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-coachmark-title-text-line-height));
-	margin-block-end: 0;
+	padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
 }
 
+/* Text wrapper for the step count */
 .spectrum-CoachMark-step {
 	justify-self: start;
-	color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color));
-	font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coachmark-step-font-size));
-	font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-font-weight));
-	font-family: var(--spectrum-coachmark-step-font-family);
-	font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style));
-	line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-line-height));
+	margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coach-mark-pagination-text-to-bottom-edge)) - var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)));
+
+	color: var(--mod-coachmark-step-color, var(--spectrum-coach-mark-pagination-color));
+	font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coach-mark-pagination-body-size));
+	font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-body-sans-serif-font-weight));
+	font-family: var(--spectrum-sans-serif-font);
+	font-style: var(--mod-coachmark-step-font-style, var(--spectrum-body-sans-serif-font-style));
+	line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-body-line-height));
 	white-space: nowrap;
-	margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)));
+}
+
+/* Class attached to the ButtonGroup sub-component */
+.spectrum-CoachMark-buttongroup {
+	display: var(--spectrum-coachmark-buttongroup-display);
+	grid-column-start: 2;
+}
+
+/* Variant for mobile */
+/* @todo can we use a media query here or base this on scale? */
+.spectrum-CoachMark-buttongroup--mobile {
+	--spectrum-coachmark-buttongroup-display: var(--spectrum-coachmark-buttongroup-mobile-display);
+
+	/* @passthrough -- ButtonGroup */
+	--mod-buttongroup-spacing: var(--spectrum-spacing-100);
 }
diff --git a/components/coachmark/metadata/mods.md b/components/coachmark/metadata/mods.md
deleted file mode 100644
index 03eefd5a9e..0000000000
--- a/components/coachmark/metadata/mods.md
+++ /dev/null
@@ -1,31 +0,0 @@
-| Modifiable custom properties               |
-| ------------------------------------------ |
-| `--mod-coachmark-body-to-footer`           |
-| `--mod-coachmark-border-radius`            |
-| `--mod-coachmark-border-size`              |
-| `--mod-coachmark-content-font-color`       |
-| `--mod-coachmark-content-font-family`      |
-| `--mod-coachmark-content-font-size`        |
-| `--mod-coachmark-content-font-style`       |
-| `--mod-coachmark-content-font-weight`      |
-| `--mod-coachmark-content-line-height`      |
-| `--mod-coachmark-header-to-body`           |
-| `--mod-coachmark-heading-to-action-button` |
-| `--mod-coachmark-max-width`                |
-| `--mod-coachmark-media-height`             |
-| `--mod-coachmark-media-min-height`         |
-| `--mod-coachmark-min-width`                |
-| `--mod-coachmark-padding`                  |
-| `--mod-coachmark-step-color`               |
-| `--mod-coachmark-step-font-size`           |
-| `--mod-coachmark-step-font-style`          |
-| `--mod-coachmark-step-text-font-weight`    |
-| `--mod-coachmark-step-text-line-height`    |
-| `--mod-coachmark-step-to-bottom`           |
-| `--mod-coachmark-title-color`              |
-| `--mod-coachmark-title-font-family`        |
-| `--mod-coachmark-title-font-size`          |
-| `--mod-coachmark-title-font-style`         |
-| `--mod-coachmark-title-text-font-weight`   |
-| `--mod-coachmark-title-text-line-height`   |
-| `--mod-coachmark-width`                    |
diff --git a/components/coachmark/package.json b/components/coachmark/package.json
index d770ba9628..67de4c8aa9 100644
--- a/components/coachmark/package.json
+++ b/components/coachmark/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/coachmark/stories/coachmark.mdx b/components/coachmark/stories/coachmark.mdx
deleted file mode 100644
index 64ea9ecb30..0000000000
--- a/components/coachmark/stories/coachmark.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as CoachmarkStories from "./coachmark.stories";
-
-<Meta of={CoachmarkStories} title="Docs" />
-
-<Title of={CoachmarkStories} />
-<Subtitle of={CoachmarkStories} />
-<ComponentDetails />
-
-<Description of={CoachmarkStories} />
-
-## Standard
-
-<Canvas of={CoachmarkStories.Default} />
-
-## With media
-
-<Canvas of={CoachmarkStories.WithMedia} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
index d488a33598..e13b70fce2 100644
--- a/components/coachmark/stories/coachmark.stories.js
+++ b/components/coachmark/stories/coachmark.stories.js
@@ -1,13 +1,13 @@
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CoachMarkGroup } from "./coachmark.test.js";
-import { Template } from "./template.js";
+import { CoachmarkMenuStatesTemplate, Template } from "./template.js";
 
 /**
- * The coach mark component can be used to bring added attention to specific parts of a page. It is a separate component from the coach indicator.
+ * The coach mark component can be used to bring added attention to specific parts of a page, like during a tour. It is a separate component from [the coach indicator](/docs/components-coach-indicator--docs) and similar to [a popover](/docs/components-purpose--docs).
  */
 export default {
 	title: "Coach mark",
@@ -54,6 +54,10 @@ export default {
 				...(Menu.parameters?.actions?.handles ?? []),
 			],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=37804-254",
+		},
 		packageJson,
 		metadata,
 		docs: {
@@ -62,12 +66,25 @@ export default {
 			}
 		}
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = CoachMarkGroup.bind({});
+Default.tags = ["!autodocs"];
 Default.args = {};
 
+/**
+ * Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.
+ */
+export const Standard = CoachmarkMenuStatesTemplate.bind({});
+Standard.storyName = "Default";
+Standard.tags = ["!dev"];
+Standard.parameters = {
+	chromatic: {
+		disableSnapshot: true,
+	},
+};
+
+/** Coach marks can contain images or media that relate to their content, such as demonstrations of gestures, the UI being used, or illustrations. */
 export const WithMedia = Template.bind({});
 WithMedia.tags = ["!dev"];
 WithMedia.args = {
diff --git a/components/coachmark/stories/coachmark.test.js b/components/coachmark/stories/coachmark.test.js
index af59f1bd0e..c699803e55 100644
--- a/components/coachmark/stories/coachmark.test.js
+++ b/components/coachmark/stories/coachmark.test.js
@@ -28,7 +28,6 @@ export const CoachMarkGroup = Variants({
 			testHeading: "Default",
 			hasActionMenu: false,
 			hasPagination: false,
-			hasImage: false,
 			wrapperStyles: {
 				"background-color": "var(--spectrum-gray-50, white)",
 			},
@@ -45,18 +44,31 @@ export const CoachMarkGroup = Variants({
 		{
 			testHeading: "With action menu",
 			hasPagination: false,
-			hasActionMenu: true,
-			hasImage: false,
 			isOpen: true,
 			wrapperStyles: {
 				"background-color": "var(--spectrum-gray-50, white)"
 			},
 		},
+		{
+			testHeading: "With action menu + media",
+			hasPagination: false,
+			isOpen: true,
+			hasImage: true,
+			wrapperStyles: {
+				"background-color": "var(--spectrum-gray-50, white)"
+			},
+		},
 		{
 			testHeading: "With pagination",
-			hasPagination: true,
 			hasActionMenu: false,
-			hasImage: false,
+			wrapperStyles: {
+				"background-color": "var(--spectrum-gray-50, white)"
+			},
+		},
+		{
+			testHeading: "With pagination + media",
+			hasActionMenu: false,
+			hasImage: true,
 			wrapperStyles: {
 				"background-color": "var(--spectrum-gray-50, white)"
 			},
diff --git a/components/coachmark/stories/template.js b/components/coachmark/stories/template.js
index 0fe3760e01..5a3f967ce3 100644
--- a/components/coachmark/stories/template.js
+++ b/components/coachmark/stories/template.js
@@ -2,6 +2,7 @@ import { Template as ActionMenu } from "@spectrum-css/actionmenu/stories/templat
 import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
 import { Template as CoachIndicator } from "@spectrum-css/coachindicator/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
+import { Container } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -14,9 +15,14 @@ export const CoachContainer = ({
 	hasActionMenu = false,
 	hasPagination,
 	hasImage,
+	title = "Try playing with a pixel brush",
+	content = "Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.",
+	currentStep = 2,
+	totalStepCount = 8,
 	isOpen = false,
 } = {}, context = {}) => {
 	const { globals = {} } = context;
+
 	const scale = globals.scale ?? "medium";
 
 	return html`
@@ -29,12 +35,10 @@ export const CoachContainer = ({
 			</div>
 		`)}
 		<div class="spectrum-CoachMark-header">
-			<div class="spectrum-CoachMark-title">
-				Try playing with a pixel brush
-			</div>
-			<div class="spectrum-CoachMark-action-menu">
-				${when(hasActionMenu, () =>
-					ActionMenu({
+			<div class="spectrum-CoachMark-title">${title}</div>
+			${when(hasActionMenu, () => html`
+				<div class="spectrum-CoachMark-action-menu">
+					${ActionMenu({
 						isOpen,
 						position: "bottom-start",
 						iconName: "More",
@@ -49,19 +53,15 @@ export const CoachContainer = ({
 						],
 						popoverHeight: 68,
 						popoverWidth: 84,
-					}, context),
-				)}
-			</div>
-		</div>
-		<div class="spectrum-CoachMark-content">
-			Pixel brushes use pixels to create brush strokes, just like in
-			other design and drawing tools. Start drawing, and zoom in to
-			see the pixels in each stroke.
+					}, context)}
+				</div>`
+			)}
 		</div>
+		<div class="spectrum-CoachMark-content">${content}</div>
 		<div class="${rootClass}-footer">
 			${when(hasPagination, () => html`
 				<div class="spectrum-CoachMark-step">
-					<bdo dir="ltr">2 of 8</bdo>
+					<bdo dir="ltr">${currentStep} of ${totalStepCount}</bdo>
 				</div>
 			`)}
 			${ButtonGroup({
@@ -127,3 +127,25 @@ export const Template = (args, context) => {
 		</div>
 	`;
 };
+
+/* Displays open and closed action menus in a single story. */
+export const CoachmarkMenuStatesTemplate = (args, context) => Container({
+	withBorder: false,
+	withHeading: false,
+	wrapperStyles: {
+		columnGap: "100px",
+		rowGap: "200px",
+	},
+	content: [
+		Container({
+			withBorder: false,
+			heading: "With action menu",
+			content: Template({...args, isOpen: true}, context),
+		}),
+		Container({
+			withBorder: false,
+			heading: "Without action menu",
+			content: Template({...args, hasActionMenu: false}, context),
+		})
+	]
+});
diff --git a/components/colorarea/metadata/metadata.json b/components/colorarea/dist/metadata.json
similarity index 80%
rename from components/colorarea/metadata/metadata.json
rename to components/colorarea/dist/metadata.json
index 700f0f3caf..ff86d1c004 100644
--- a/components/colorarea/metadata/metadata.json
+++ b/components/colorarea/dist/metadata.json
@@ -29,14 +29,7 @@
     "--spectrum-color-area-minimum-height",
     "--spectrum-color-area-minimum-width",
     "--spectrum-color-area-width",
-    "--spectrum-colorarea-border-color",
-    "--spectrum-colorarea-border-radius",
-    "--spectrum-colorarea-border-width",
-    "--spectrum-colorarea-disabled-background-color",
-    "--spectrum-colorarea-height",
-    "--spectrum-colorarea-min-height",
-    "--spectrum-colorarea-min-width",
-    "--spectrum-colorarea-width"
+    "--spectrum-colorarea-border-color"
   ],
   "global": ["--spectrum-disabled-background-color"],
   "system-theme": [],
diff --git a/components/colorarea/index.css b/components/colorarea/index.css
index d0244530d5..6887fac339 100644
--- a/components/colorarea/index.css
+++ b/components/colorarea/index.css
@@ -11,17 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-ColorArea {
-	--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
-	--spectrum-colorarea-border-color: rgba(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
-	--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
-	--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
-	--spectrum-colorarea-height: var(--spectrum-color-area-height);
-	--spectrum-colorarea-width: var(--spectrum-color-area-width);
-	--spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
-	--spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
-}
-
 /* Windows High Contrast Mode */
 @media (forced-colors: active) {
 	.spectrum-ColorArea {
@@ -43,17 +32,20 @@
 }
 
 .spectrum-ColorArea {
+	/* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
+	--spectrum-colorarea-border-color: rgb(0 0 0 / 10%);
+
 	position: relative;
 	display: inline-block;
 	cursor: default;
 	user-select: none;
-	min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width));
-	min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height));
-	inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width));
-	block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height));
+	min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-color-area-minimum-width));
+	min-block-size: var(--mod-colorarea-min-height, var(--spectrum-color-area-minimum-height));
+	inline-size: var(--mod-colorarea-width, var(--spectrum-color-area-width));
+	block-size: var(--mod-colorarea-height, var(--spectrum-color-area-height));
 	box-sizing: border-box;
-	border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
-	border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));
+	border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding));
+	border: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));
 
 	&.is-focused {
 		z-index: 2;
@@ -61,8 +53,8 @@
 
 	&.is-disabled {
 		pointer-events: none;
-		background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color)));
-		border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);
+		background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color)));
+		border: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);
 
 		.spectrum-ColorArea-gradient {
 			display: none;
@@ -71,7 +63,7 @@
 }
 
 .spectrum-ColorArea-handle {
-	transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0);
+	transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-color-area-width)) - var(--spectrum-color-area-border-width)), 0);
 	inset-block-start: 0;
 
 	&:dir(rtl) {
@@ -82,7 +74,7 @@
 .spectrum-ColorArea-gradient {
 	inline-size: 100%;
 	block-size: 100%;
-	border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
+	border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding));
 }
 
 .spectrum-ColorArea-slider {
diff --git a/components/colorarea/metadata/mods.md b/components/colorarea/metadata/mods.md
deleted file mode 100644
index f0dfdb9b95..0000000000
--- a/components/colorarea/metadata/mods.md
+++ /dev/null
@@ -1,10 +0,0 @@
-| Modifiable custom properties                |
-| ------------------------------------------- |
-| `--mod-colorarea-border-color`              |
-| `--mod-colorarea-border-radius`             |
-| `--mod-colorarea-border-width`              |
-| `--mod-colorarea-disabled-background-color` |
-| `--mod-colorarea-height`                    |
-| `--mod-colorarea-min-height`                |
-| `--mod-colorarea-min-width`                 |
-| `--mod-colorarea-width`                     |
diff --git a/components/colorarea/package.json b/components/colorarea/package.json
index d77689df75..b700d6935e 100644
--- a/components/colorarea/package.json
+++ b/components/colorarea/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/colorarea/stories/colorarea.mdx b/components/colorarea/stories/colorarea.mdx
deleted file mode 100644
index 2dd6f56f54..0000000000
--- a/components/colorarea/stories/colorarea.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as ColorAreaStories from "./colorarea.stories";
-
-<Meta of={ColorAreaStories} title="Docs" />
-
-<Title of={ColorAreaStories} />
-<Subtitle of={ColorAreaStories} />
-<ComponentDetails />
-
-<Description of={ColorAreaStories} />
-
-## Standard
-
-<Canvas of={ColorAreaStories.Default} />
-
-## Custom size
-
-<Canvas of={ColorAreaStories.CustomSize} />
-
-## Disabled
-
-<Canvas of={ColorAreaStories.Disabled} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js
index 7b60fa3c46..ec418649f0 100644
--- a/components/colorarea/stories/colorarea.stories.js
+++ b/components/colorarea/stories/colorarea.stories.js
@@ -1,18 +1,20 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ColorAreaGroup } from "./colorarea.test.js";
 import { Template } from "./template.js";
 
 /**
- * The color area component allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel. Some usage notes:
- * - The `.spectrum-ColorHandle` should be moved with the `transform: translate(x, y)` style property as the sliders are dragged
- * - Set the background style property of `.spectrum-ColorArea-gradient` to the gradient of the colors to be selected
- * - Set the value attribute of `.spectrum-ColorArea-slider[name=x]` to the currently selected x value (i.e. saturation)
- * - Set the value attribute of `.spectrum-ColorArea-slider[name=y]` to the currently selected y value (i.e. value)
- * - Set the value of the ColorHandle component to the selected color
- * - Marshall focus between the saturation and value sliders according to which keys are pressed (up/down for value, left/right for saturation)
+ * The color area component allows users to visually select two properties of a color simultaneously. It's commonly used together with a [color slider](/docs/components-color-slider--docs) or [color wheel](/docs/components-color-wheel--docs).
+ *
+ * ## Usage notes
+ * - The `.spectrum-ColorArea-handle` element should be moved with the `transform: translate(x, y)` style property as the sliders are dragged.
+ * - Set the background style property of `.spectrum-ColorArea-gradient` to the gradient of the colors to be selected.
+ * - Set the value attribute of `.spectrum-ColorArea-slider[name=x]` to the currently selected x value (i.e. saturation).
+ * - Set the value attribute of `.spectrum-ColorArea-slider[name=y]` to the currently selected y value (i.e. value).
+ * - Set the value of the [color handle component](/docs/components-color-handle--docs) to the selected color.
+ * - Marshall focus between the saturation and value sliders according to which keys are pressed (up/down for value, left/right for saturation).
  */
 export default {
 	title: "Color area",
@@ -41,10 +43,13 @@ export default {
 		selectedColor: "rgba(255, 0, 0, 1)",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36734-2573",
+		},
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = ColorAreaGroup.bind({});
@@ -60,6 +65,7 @@ CustomSize.args = {
 CustomSize.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+CustomSize.storyName = "Custom size";
 
 export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];
diff --git a/components/colorarea/stories/template.js b/components/colorarea/stories/template.js
index 35a66e3cc6..8102251670 100644
--- a/components/colorarea/stories/template.js
+++ b/components/colorarea/stories/template.js
@@ -16,6 +16,7 @@ export const Template = ({
 	selectedColor = "rgba(255, 0, 0, 1)",
 } = {}, context = {}) => {
 	const { updateArgs } = context;
+
 	return html`
 		<div
 			class=${classMap({
diff --git a/components/colorhandle/metadata/metadata.json b/components/colorhandle/dist/metadata.json
similarity index 78%
rename from components/colorhandle/metadata/metadata.json
rename to components/colorhandle/dist/metadata.json
index fbf0e35dd2..4d8589ac1c 100644
--- a/components/colorhandle/metadata/metadata.json
+++ b/components/colorhandle/dist/metadata.json
@@ -33,19 +33,9 @@
     "--spectrum-color-handle-outer-border-width",
     "--spectrum-color-handle-size",
     "--spectrum-color-handle-size-key-focus",
-    "--spectrum-colorhandle-animation-duration",
-    "--spectrum-colorhandle-animation-easing",
-    "--spectrum-colorhandle-border-color",
-    "--spectrum-colorhandle-border-color-disabled",
-    "--spectrum-colorhandle-border-width",
-    "--spectrum-colorhandle-fill-color-disabled",
-    "--spectrum-colorhandle-focused-size",
-    "--spectrum-colorhandle-hitarea-size",
     "--spectrum-colorhandle-inner-border-color",
-    "--spectrum-colorhandle-inner-border-width",
     "--spectrum-colorhandle-outer-border-color",
-    "--spectrum-colorhandle-outer-border-width",
-    "--spectrum-colorhandle-size"
+    "--spectrum-colorhandle-outer-border-width"
   ],
   "global": [
     "--spectrum-animation-duration-100",
diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css
index 8b6f91b178..acc32a9b88 100644
--- a/components/colorhandle/index.css
+++ b/components/colorhandle/index.css
@@ -11,78 +11,76 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-ColorHandle {
-	--spectrum-colorhandle-size: var(--spectrum-color-handle-size);
-	--spectrum-colorhandle-focused-size: var(--spectrum-color-handle-size-key-focus);
-	--spectrum-colorhandle-hitarea-size: var(--spectrum-color-control-track-width);
+@media (forced-colors: active) {
+	.spectrum-ColorHandle {
+		forced-color-adjust: none;
 
-	--spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100);
-	--spectrum-colorhandle-animation-easing: ease-in-out;
+		&.is-disabled {
+			--highcontrast-colorhandle-border-color-disabled: GrayText;
+			--highcontrast-colorhandle-fill-color-disabled: Canvas;
+		}
+	}
+}
 
+.spectrum-ColorHandle {
 	/* outer border as box shadow on the colorhandle */
-	--spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
+	/* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
+	--spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity));
 	--spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);
 
 	/* inner border as inset boxshadow on the colorhandle-inner */
-	--spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */
-	--spectrum-colorhandle-inner-border-width: var(--spectrum-color-handle-inner-border-width);
+	/* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */
+	--spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity));
 
-	/* primary border on color handle */
-	--spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width);
-	--spectrum-colorhandle-border-color: var(--spectrum-white);
-
-	--spectrum-colorhandle-border-color-disabled: var(--spectrum-disabled-content-color);
-	--spectrum-colorhandle-fill-color-disabled: var(--spectrum-disabled-background-color);
+	/* @passthrough -- opacity checkerboard customization */
 	--mod-opacity-checkerboard-position: 50%;
-}
 
-.spectrum-ColorHandle {
 	display: block;
 	position: absolute;
 	z-index: 1; /* Be above */
 	box-sizing: border-box;
-	inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
-	block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
+	inline-size: var(--mod-colorhandle-size, var(--spectrum-color-handle-size));
+	block-size: var(--mod-colorhandle-size, var(--spectrum-color-handle-size));
 
-	margin-inline: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2));
-	margin-block: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2));
+	margin-inline: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) / 2));
+	margin-block: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) / 2));
 
-	border-width: var(--mod-colorhandle-border-width, var(--spectrum-colorhandle-border-width));
-	border-color: var(--mod-colorhandle-border-color, var(--spectrum-colorhandle-border-color));
+	border-width: var(--mod-colorhandle-border-width, var(--spectrum-color-handle-border-width));
+	border-color: var(--mod-colorhandle-border-color, var(--spectrum-white));
 	border-style: solid;
 
 	box-shadow: 0 0 0 var(--mod-colorhandle-outer-border-width, var(--spectrum-colorhandle-outer-border-width)) var(--mod-colorhandle-outer-border-color, var(--spectrum-colorhandle-outer-border-color));
 
 	border-radius: 100%;
 
+	transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-animation-duration-100)) var(--mod-colorhandle-animation-easing, ease-in-out);
+
 	&::after {
 		content: "";
-		inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2));
-		inset-block: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2));
+		inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2));
+		inset-block: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2));
 		position: absolute;
 		display: block;
-		inline-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size));
-		block-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size));
+		inline-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width));
+		block-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width));
 		border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%);
 	}
 
-	transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing));
-
 	&.is-focused,
 	&:focus-visible {
 		/* Bigger handle when focused */
-		inline-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size));
-		block-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size));
+		inline-size: var(--mod-colorhandle-focused-size, var(--spectrum-color-handle-size-key-focus));
+		block-size: var(--mod-colorhandle-focused-size, var(--spectrum-color-handle-size-key-focus));
 
-		margin-inline: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)));
-		margin-block: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)));
+		margin-inline: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-color-handle-size)));
+		margin-block: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-color-handle-size)));
 		outline: none;
 	}
 
 	&.is-disabled {
 		pointer-events: none;
-		border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-colorhandle-border-color-disabled)));
-		background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-colorhandle-fill-color-disabled)));
+		border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color)));
+		background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color)));
 		box-shadow: none;
 
 		.spectrum-ColorHandle-inner {
@@ -95,17 +93,6 @@
 	border-radius: 100%;
 	inline-size: 100%;
 	block-size: 100%;
-	box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-colorhandle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color));
+	box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-color-handle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color));
 	background-color: var(--spectrum-picked-color);
 }
-
-@media (forced-colors: active) {
-	.spectrum-ColorHandle {
-		forced-color-adjust: none;
-
-		&.is-disabled {
-			--highcontrast-colorhandle-border-color-disabled: GrayText;
-			--highcontrast-colorhandle-fill-color-disabled: Canvas;
-		}
-	}
-}
diff --git a/components/colorhandle/metadata/mods.md b/components/colorhandle/metadata/mods.md
deleted file mode 100644
index 2a7b6fbbce..0000000000
--- a/components/colorhandle/metadata/mods.md
+++ /dev/null
@@ -1,16 +0,0 @@
-| Modifiable custom properties              |
-| ----------------------------------------- |
-| `--mod-colorhandle-animation-duration`    |
-| `--mod-colorhandle-animation-easing`      |
-| `--mod-colorhandle-border-color`          |
-| `--mod-colorhandle-border-color-disabled` |
-| `--mod-colorhandle-border-width`          |
-| `--mod-colorhandle-fill-color-disabled`   |
-| `--mod-colorhandle-focused-size`          |
-| `--mod-colorhandle-hitarea-border-radius` |
-| `--mod-colorhandle-hitarea-size`          |
-| `--mod-colorhandle-inner-border-color`    |
-| `--mod-colorhandle-inner-border-width`    |
-| `--mod-colorhandle-outer-border-color`    |
-| `--mod-colorhandle-outer-border-width`    |
-| `--mod-colorhandle-size`                  |
diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json
index a7f5475f7c..fe44eac045 100644
--- a/components/colorhandle/package.json
+++ b/components/colorhandle/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/colorhandle/stories/colorhandle.mdx b/components/colorhandle/stories/colorhandle.mdx
deleted file mode 100644
index 9555652e7c..0000000000
--- a/components/colorhandle/stories/colorhandle.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as ColorHandleStories from "./colorhandle.stories";
-
-<Meta of={ColorHandleStories} title="Docs" />
-
-<Title of={ColorHandleStories} />
-<Subtitle of={ColorHandleStories} />
-<ComponentDetails />
-
-<Description of={ColorHandleStories} />
-
-## Standard
-
-Set the `--spectrum-picked-color` custom property to the color value you want to show.
-
-<Canvas of={ColorHandleStories.Default} />
-
-## Disabled
-
-<Canvas of={ColorHandleStories.Disabled} />
-
-## With color loupe
-
-Nest the color loupe component within the color handle markup and apply `.is-open` to the `.spectrum-ColorLoupe` to display the loupe.
-
-<Canvas of={ColorHandleStories.WithColorLoupe} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js
index cf7efb835f..b3923e6d17 100644
--- a/components/colorhandle/stories/colorhandle.stories.js
+++ b/components/colorhandle/stories/colorhandle.stories.js
@@ -1,12 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ColorHandleGroup } from "./colorhandle.test.js";
 import { Template } from "./template.js";
 
 /**
- * The color handle component is used with color area, color slider and color wheel as the color selector.
+ * The color handle component is used with [color area](/docs/components-color-area--docs), [color slider](/docs/components-color-slider--docs) and [color wheel](/docs/components-color-wheel--docs) as the color selector.
  */
 export default {
 	title: "Color handle",
@@ -46,12 +46,18 @@ export default {
 		}
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13065-162",
+		},
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
+/**
+ * Set the `--spectrum-picked-color` custom property to the color value you want to show.
+ */
 export const Default = ColorHandleGroup.bind({});
 Default.args = {};
 
@@ -65,6 +71,9 @@ Disabled.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * Nest the [color loupe component](/docs/components-color-loupe--docs) within the color handle markup and apply `.is-open` to the `.spectrum-ColorLoupe` to display the loupe.
+ */
 export const WithColorLoupe = Template.bind({});
 WithColorLoupe.args = {
 	isWithColorLoupe: true,
@@ -73,6 +82,7 @@ WithColorLoupe.tags = ["!dev"];
 WithColorLoupe.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+WithColorLoupe.storyName = "With color loupe";
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ColorHandleGroup.bind({});
diff --git a/components/colorloupe/metadata/metadata.json b/components/colorloupe/dist/metadata.json
similarity index 71%
rename from components/colorloupe/metadata/metadata.json
rename to components/colorloupe/dist/metadata.json
index 47ceb16873..245bb476b1 100644
--- a/components/colorloupe/metadata/metadata.json
+++ b/components/colorloupe/dist/metadata.json
@@ -35,21 +35,7 @@
     "--spectrum-color-loupe-outer-border",
     "--spectrum-color-loupe-outer-border-width",
     "--spectrum-color-loupe-width",
-    "--spectrum-colorloupe-animation-distance",
-    "--spectrum-colorloupe-checkerboard-dark-color",
-    "--spectrum-colorloupe-checkerboard-fill",
-    "--spectrum-colorloupe-checkerboard-light-color",
-    "--spectrum-colorloupe-drop-shadow-blur",
-    "--spectrum-colorloupe-drop-shadow-color",
-    "--spectrum-colorloupe-drop-shadow-x",
-    "--spectrum-colorloupe-drop-shadow-y",
-    "--spectrum-colorloupe-height",
-    "--spectrum-colorloupe-inner-border-color",
-    "--spectrum-colorloupe-inner-border-width",
-    "--spectrum-colorloupe-offset",
-    "--spectrum-colorloupe-outer-border-color",
-    "--spectrum-colorloupe-outer-border-width",
-    "--spectrum-colorloupe-width"
+    "--spectrum-colorloupe-checkerboard-fill"
   ],
   "global": [
     "--spectrum-color-handle-outer-border-width",
diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css
index dfa297ab88..f793d2fa6b 100644
--- a/components/colorloupe/index.css
+++ b/components/colorloupe/index.css
@@ -12,46 +12,25 @@
  */
 
 .spectrum-ColorLoupe {
-	--spectrum-colorloupe-width: var(--spectrum-color-loupe-width);
-	--spectrum-colorloupe-height: var(--spectrum-color-loupe-height);
-
-	--spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle);
-	--spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */
-
-	--spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x);
-	--spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y);
-	--spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur);
-	--spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color);
-
-	--spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width);
-	--spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width);
-	--spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border);
-	--spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border);
-
-	--spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
-	--spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
-}
-
-.spectrum-ColorLoupe {
-	inline-size: var(--spectrum-colorloupe-width);
-	block-size: var(--spectrum-colorloupe-height);
+	inline-size: var(--spectrum-color-loupe-width);
+	block-size: var(--spectrum-color-loupe-height);
 
 	position: absolute;
-	transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance)));
+	transform: translate(0, var(--mod-colorloupe-animation-distance, 8px));
 	opacity: 0;
 	transform-origin: bottom center;
-	inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)));
-	inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2));
+	inset-block-end: calc(var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--mod-colorloupe-offset, var(--spectrum-color-loupe-bottom-to-color-handle)));
+	inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2);
 
 	transition:
 		transform 100ms ease-in-out,
 		opacity 125ms ease-in-out;
 	pointer-events: none;
 
-	filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color)));
+	filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-color-loupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-color-loupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-color-loupe-drop-shadow-color)));
 
 	&:dir(rtl) {
-		inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px);
+		inset-inline-end: calc(50% - (var(--spectrum-color-loupe-width) / 2) - 1px);
 	}
 
 	&.is-open {
@@ -66,25 +45,25 @@
 
 .spectrum-ColorLoupe-inner-border {
 	fill: var(--spectrum-picked-color);
-	stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color));
-	stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width));
+	stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-color-loupe-inner-border));
+	stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-color-loupe-inner-border-width));
 }
 
 .spectrum-ColorLoupe-outer-border {
 	fill: none;
-	stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color)));
-	stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px);
+	stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border)));
+	stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-color-loupe-outer-border-width)) + 2px);
 }
 
 /* The checkerboard classes use opacity checkerboard tokens for dark and light color.
  The opacity-checkerboard-square-size token is not able to be used witin the SVG pattern and instead colorloupe docs are using two different patterns toggled by --spectrum-colorloupe-checkerboard-fill */
 
 .spectrum-ColorLoupe-checkerboard-pattern {
-	fill: var(--spectrum-colorloupe-checkerboard-dark-color);
+	fill: var(--spectrum-opacity-checkerboard-square-dark);
 }
 
 .spectrum-ColorLoupe-checkerboard-background {
-	fill: var(--spectrum-colorloupe-checkerboard-light-color);
+	fill: var(--spectrum-opacity-checkerboard-square-light);
 }
 
 .spectrum-ColorLoupe-checkerboard-fill {
diff --git a/components/colorloupe/metadata/mods.md b/components/colorloupe/metadata/mods.md
deleted file mode 100644
index 980052dec8..0000000000
--- a/components/colorloupe/metadata/mods.md
+++ /dev/null
@@ -1,12 +0,0 @@
-| Modifiable custom properties          |
-| ------------------------------------- |
-| `--mod-colorloupe-animation-distance` |
-| `--mod-colorloupe-drop-shadow-blur`   |
-| `--mod-colorloupe-drop-shadow-color`  |
-| `--mod-colorloupe-drop-shadow-x`      |
-| `--mod-colorloupe-drop-shadow-y`      |
-| `--mod-colorloupe-inner-border-color` |
-| `--mod-colorloupe-inner-border-width` |
-| `--mod-colorloupe-offset`             |
-| `--mod-colorloupe-outer-border-color` |
-| `--mod-colorloupe-outer-border-width` |
diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json
index 57e29961ea..7e873d1e59 100644
--- a/components/colorloupe/package.json
+++ b/components/colorloupe/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/colorloupe/stories/colorloupe.mdx b/components/colorloupe/stories/colorloupe.mdx
deleted file mode 100644
index 034afcb7f3..0000000000
--- a/components/colorloupe/stories/colorloupe.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as ColorLoupeStories from "./colorloupe.stories";
-
-<Meta of={ColorLoupeStories} title="Docs" />
-
-<Title of={ColorLoupeStories} />
-<Subtitle of={ColorLoupeStories} />
-<ComponentDetails />
-
-<Description of={ColorLoupeStories} />
-
-## Usage notes
-
-- Set the `--spectrum-picked-color` custom property to the CSS color value you want to show
-- You must apply `.is-open` to display the loupe
-- Color Loupe does not have a disabled style; do not show it when the handle it's attached to is disabled.
-
-## Standard
-
-<Canvas of={ColorLoupeStories.Default} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js
index aae0246b56..f07cdf83ee 100644
--- a/components/colorloupe/stories/colorloupe.stories.js
+++ b/components/colorloupe/stories/colorloupe.stories.js
@@ -1,11 +1,17 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isOpen } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ColorLoupeGroup } from "./colorloupe.test.js";
 
 /**
  * The color loupe component shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.
+ *
+ * ## Usage notes
+ *
+ * - Set the `--spectrum-picked-color` custom property to the CSS color value you want to show.
+ * - Implementations must apply the `.is-open` class to display the loupe.
+ * - Color loupe does not have a disabled style. Do not show it when the handle it's attached to is disabled.
  */
 export default {
 	title: "Color loupe",
diff --git a/components/colorloupe/stories/template.js b/components/colorloupe/stories/template.js
index 0205238614..a5d70dfa7d 100644
--- a/components/colorloupe/stories/template.js
+++ b/components/colorloupe/stories/template.js
@@ -11,7 +11,8 @@ export const Template = ({
 	customStyles = {},
 	customClasses = [],
 	selectedColor = "rgba(255, 0, 0, 0.5)",
-} = {}) => svg`
+} = {}) => {
+	return svg`
     <svg
       class=${classMap({
         [rootClass]: true,
@@ -49,4 +50,5 @@ export const Template = ({
         <use xlink:href="#loupe-path" mask="url(#loupe-mask)" class="spectrum-ColorLoupe-outer-border" />
       </g>
     </svg>
-`;
+  `;
+};
diff --git a/components/colorslider/metadata/metadata.json b/components/colorslider/dist/metadata.json
similarity index 97%
rename from components/colorslider/metadata/metadata.json
rename to components/colorslider/dist/metadata.json
index c28f43e96d..ea202a9f0a 100644
--- a/components/colorslider/metadata/metadata.json
+++ b/components/colorslider/dist/metadata.json
@@ -32,8 +32,8 @@
     "--mod-color-slider-vertical-minimum-height"
   ],
   "component": [
+    "--spectrum-color-slider-border-color-default",
     "--spectrum-color-slider-border-color-local",
-    "--spectrum-color-slider-border-color-rgba",
     "--spectrum-color-slider-border-opacity",
     "--spectrum-color-slider-border-rounding",
     "--spectrum-color-slider-border-width",
diff --git a/components/colorslider/index.css b/components/colorslider/index.css
index 91ce23b436..2876596753 100644
--- a/components/colorslider/index.css
+++ b/components/colorslider/index.css
@@ -22,9 +22,9 @@
 
 .spectrum-ColorSlider {
 	/* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
-	--spectrum-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
+	--spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
 
-	/* Settings for nested Color handle */
+	/* @passthrough -- settings for nested color handle */
 	--mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
 
 	position: relative;
@@ -72,7 +72,7 @@
 }
 
 .spectrum-ColorSlider-checkerboard {
-	--spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color, var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-rgba)));
+	--spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color, var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-default)));
 
 	/* Inset border on top of background, created with box-shadow. */
 	&::before {
diff --git a/components/colorslider/metadata/mods.md b/components/colorslider/metadata/mods.md
deleted file mode 100644
index a35666e043..0000000000
--- a/components/colorslider/metadata/mods.md
+++ /dev/null
@@ -1,15 +0,0 @@
-| Modifiable custom properties                      |
-| ------------------------------------------------- |
-| `--mod-color-slider-background-color-disabled`    |
-| `--mod-color-slider-border-color`                 |
-| `--mod-color-slider-border-color-disabled`        |
-| `--mod-color-slider-border-rounding`              |
-| `--mod-color-slider-border-width`                 |
-| `--mod-color-slider-control-track-height`         |
-| `--mod-color-slider-control-track-width`          |
-| `--mod-color-slider-handle-hitarea-border-radius` |
-| `--mod-color-slider-length`                       |
-| `--mod-color-slider-minimum-length`               |
-| `--mod-color-slider-vertical-control-track-width` |
-| `--mod-color-slider-vertical-height`              |
-| `--mod-color-slider-vertical-minimum-height`      |
diff --git a/components/colorslider/package.json b/components/colorslider/package.json
index 9e5904b98a..ed34c60fb8 100644
--- a/components/colorslider/package.json
+++ b/components/colorslider/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/colorslider/stories/colorslider.mdx b/components/colorslider/stories/colorslider.mdx
deleted file mode 100644
index 7e41a05259..0000000000
--- a/components/colorslider/stories/colorslider.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as ColorSliderStories from "./colorslider.stories";
-
-<Meta of={ColorSliderStories} title="Docs" />
-
-<Title of={ColorSliderStories} />
-<Subtitle of={ColorSliderStories} />
-<ComponentDetails />
-
-<Description of={ColorSliderStories} />
-
-## Usage notes
-
-- Set the color of the nested Color handle component to match Color slider’s currently selected color using its custom property: `--spectrum-picked-color`
-- The `.spectrum-ColorHandle` should be moved with `inset-inline-*` (horizontal) or `inset-block-*` (vertical) style properties as the slider is dragged
-- Ensure that you set the min and max attributes of the `.spectrum-ColorSlider-slider` input to the corresponding scale (i.e. 0 to 1 for a, 0 to 255 for r, etc)
-- Ensure that you set the step attribute of the `.spectrum-ColorSlider-slider` input appropriately (i.e. 0.1 for a, s, v or 1 and h, r, etc)
-- Set the background style property of `.spectrum-ColorSlider-gradient` to the gradient of the colors to be selected. The CSS will automatically reverse the gradient element horizontally when using a RTL (right-to-left) base direction
-  - Alternatively, provide an `<img>` element with the gradient you want to use and apply the `.spectrum-ColorSlider-gradient` class
-
-## Standard
-
-<Canvas of={ColorSliderStories.Default} />
-
-## Alpha
-
-<Canvas of={ColorSliderStories.Alpha} />
-
-## Disabled
-
-<Canvas of={ColorSliderStories.Disabled} />
-
-## Vertical
-
-<Canvas of={ColorSliderStories.Vertical} />
-
-## With image
-
-<Canvas of={ColorSliderStories.WithImage} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js
index 9a700339f4..633fa48b8b 100644
--- a/components/colorslider/stories/colorslider.stories.js
+++ b/components/colorslider/stories/colorslider.stories.js
@@ -1,12 +1,18 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ColorSliderGroup } from "./colorslider.test.js";
 import { Template } from "./template.js";
 
 /**
  * The color slider component lets users visually change an individual channel of a color.
+ *
+ * ## Usage notes
+ * - Set the color of the nested [color handle component](/docs/components-color-handle--docs) to match the color slider’s currently selected color using its custom property, `--spectrum-picked-color`.
+- The `.spectrum-ColorHandle` should be moved with `inset-inline-*` (horizontal) or `inset-block-*` (vertical) style properties as the slider is dragged.
+ * - Ensure that the min and max attributes of the `.spectrum-ColorSlider-slider` input are set to the corresponding scale (i.e. 0 to 1 for a, 0 to 255 for r, etc.).
+ * - Ensure the step attribute of the `.spectrum-ColorSlider-slider` input is set appropriately (i.e. 0.1 for a, s, v or 1 and h, r, etc).
  */
 export default {
 	title: "Color slider",
@@ -50,12 +56,18 @@ export default {
 		selectedColor: "rgba(255, 0, 0, 1)",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36740-137",
+		},
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
+/**
+ * By default, a color slider is horizontal and should be used when vertical space is more limited.  The background style property of `.spectrum-ColorSlider-gradient` can be set to the gradient of the colors to be selected. The CSS will automatically reverse the gradient element horizontally when using a RTL (right-to-left) base direction.
+ */
 export const Default = ColorSliderGroup.bind({});
 Default.args = {
 	gradientStops:
@@ -74,6 +86,9 @@ WithForcedColors.parameters = {
 };
 
 // ********* DOCS ONLY ********* //
+/**
+ * The vertical orientation is used when horizontal space is more limited.
+ */
 export const Vertical = Template.bind({});
 Vertical.args = {
 	vertical: true,
@@ -93,6 +108,9 @@ Alpha.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * Alternatively, implementations can provide an `<img>` element with the gradient desired and apply the `.spectrum-ColorSlider-gradient` class.
+ */
 export const WithImage = Template.bind({});
 WithImage.args = {
 	gradientType: "image",
@@ -101,7 +119,7 @@ WithImage.args = {
 		"inset-inline-start": "50%",
 	},
 };
-WithImage.storyName = "Image";
+WithImage.storyName = "With image";
 WithImage.tags = ["!dev"];
 WithImage.parameters = {
 	chromatic: { disableSnapshot: true },
diff --git a/components/colorslider/stories/template.js b/components/colorslider/stories/template.js
index 821f05c983..f4c1573501 100644
--- a/components/colorslider/stories/template.js
+++ b/components/colorslider/stories/template.js
@@ -28,6 +28,7 @@ export const Template = ({
 	colorHandleStyle = {},
 } = {}, context = {}) => {
 	const { updateArgs } = context;
+
 	return html`
     <div
       class=${classMap({
diff --git a/components/colorwheel/metadata/metadata.json b/components/colorwheel/dist/metadata.json
similarity index 90%
rename from components/colorwheel/metadata/metadata.json
rename to components/colorwheel/dist/metadata.json
index 1be9fe86c0..c321e1aca2 100644
--- a/components/colorwheel/metadata/metadata.json
+++ b/components/colorwheel/dist/metadata.json
@@ -37,11 +37,8 @@
     "--spectrum-colorwheel-border-color",
     "--spectrum-colorwheel-border-width",
     "--spectrum-colorwheel-colorarea-container-size",
-    "--spectrum-colorwheel-colorarea-margin",
-    "--spectrum-colorwheel-colorhandle-position",
     "--spectrum-colorwheel-fill-color-disabled",
     "--spectrum-colorwheel-height",
-    "--spectrum-colorwheel-min-width",
     "--spectrum-colorwheel-path",
     "--spectrum-colorwheel-path-borders",
     "--spectrum-colorwheel-track-width",
@@ -51,9 +48,9 @@
     "--spectrum-border-width-100",
     "--spectrum-color-control-track-width",
     "--spectrum-disabled-background-color",
-    "--spectrum-transparent-black-200"
+    "--spectrum-transparent-black-300"
   ],
-  "system-theme": [],
+  "system-theme": ["--system-color-wheel-border-color"],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-colorwheel-border-color-disabled",
diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css
index 4c1c903860..e44d21045f 100644
--- a/components/colorwheel/index.css
+++ b/components/colorwheel/index.css
@@ -11,41 +11,36 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-ColorWheel {
-	--spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
-	--spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
-	--spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
-	--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200);
-	--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
-	--spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
-	--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
-	--spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
-	--spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2));
-}
+@import "./themes/spectrum-two.css";
 
 /* Windows High Contrast Mode */
 @media (forced-colors: active) {
 	.spectrum-ColorWheel {
 		--highcontrast-colorwheel-border-color-disabled: GrayText;
 		--highcontrast-colorwheel-fill-color-disabled: Canvas;
-	}
 
-	.spectrum-ColorWheel {
 		forced-color-adjust: none;
 	}
 }
 
 .spectrum-ColorWheel {
-	/* stylelint-disable custom-property-pattern -- --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */
-	--track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
-	--border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));
-	/* stylelint-enable custom-property-pattern */
+	--spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width));
+	--spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width));
+	--spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color));
+
+	--spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100));
+	--spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width));
+
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
+	--_track-width: var(--spectrum-colorwheel-track-width);
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
+	--_border-width: var(--spectrum-colorwheel-border-width);
 
 	position: relative;
 	display: block;
-	min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width));
-	inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
-	block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height));
+	min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width));
+	inline-size: var(--spectrum-colorwheel-width);
+	block-size: var(--spectrum-colorwheel-height);
 	user-select: none;
 	cursor: default;
 
@@ -81,7 +76,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin));
+	margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin));
 }
 
 .spectrum-ColorWheel-slider {
@@ -97,7 +92,7 @@
 }
 
 .spectrum-ColorWheel-handle {
-	transform: translate(var(--spectrum-colorwheel-colorhandle-position), 0);
+	transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0);
 	inset-block-start: 50%;
 	inset-inline: 50%;
 }
@@ -115,12 +110,12 @@
 .spectrum-ColorWheel-border {
 	position: relative;
 	background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
-	inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
-	block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height));
+	inline-size: var(--spectrum-colorwheel-width);
+	block-size: var(--spectrum-colorwheel-height);
 	clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders)));
 
 	&.is-disabled {
-		background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
+		background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
 	}
 }
 
@@ -133,6 +128,6 @@
 
 	&.is-disabled {
 		pointer-events: none;
-		background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
+		background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
 	}
 }
diff --git a/components/colorwheel/metadata/mods.md b/components/colorwheel/metadata/mods.md
deleted file mode 100644
index 99cf0c7e1e..0000000000
--- a/components/colorwheel/metadata/mods.md
+++ /dev/null
@@ -1,13 +0,0 @@
-| Modifiable custom properties                |
-| ------------------------------------------- |
-| `--mod-colorwheel-border-color`             |
-| `--mod-colorwheel-border-width`             |
-| `--mod-colorwheel-colorarea-container-size` |
-| `--mod-colorwheel-colorarea-margin`         |
-| `--mod-colorwheel-fill-color-disabled`      |
-| `--mod-colorwheel-height`                   |
-| `--mod-colorwheel-min-width`                |
-| `--mod-colorwheel-path`                     |
-| `--mod-colorwheel-path-borders`             |
-| `--mod-colorwheel-track-width`              |
-| `--mod-colorwheel-width`                    |
diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json
index 1d96d2d428..0300ef74d6 100644
--- a/components/colorwheel/package.json
+++ b/components/colorwheel/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/colorwheel/stories/colorwheel.mdx b/components/colorwheel/stories/colorwheel.mdx
deleted file mode 100644
index 3a850b48f3..0000000000
--- a/components/colorwheel/stories/colorwheel.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as ColorWheelStories from "./colorwheel.stories";
-
-<Meta of={ColorWheelStories} title="Docs" />
-
-<Title of={ColorWheelStories} />
-<Subtitle of={ColorWheelStories} />
-<ComponentDetails />
-
-<Description of={ColorWheelStories} />
-
-## Usage notes:
-
-- For a given rotation on the wheel, X, the `.spectrum-ColorHandle` should be moved by applying the style property `transform: translate(${Y * Math.cos(X)}px, ${Y * Math.sin(X)}px)`, where Y is `((radius - .spectrum-colorwheel-track-width) / 2))`
-- Set the value attribute of `.spectrum-ColorWheel-value` to the currently selected color (i.e. `hsl(326, 100%, 50%)`)
-- Add `.is-dragged` when the handle is being dragged
-
-## Standard
-
-<Canvas of={ColorWheelStories.Default} />
-
-## Disabled
-
-<Canvas of={ColorWheelStories.Disabled} />
-
-## With color area
-
-Usage notes:
-
-- To display with ColorArea inside of ColorWheel, add ColorArea to `.spectrum-ColorWheel-colorarea-container` with `style="--mod-colorarea-width: 70.1%; --mod-colorarea-height: 70.1%"`
-- `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the ColorArea within the ColorWheel using `.spectrum-color-wheel-color-area-margin`. Using JS container size can be calcaulted with `Math.sqrt(2 * R * R)`, where R is the `innerRadius` as calcaulted for the clip paths
-- `.spectrum-colorwheel-path`, `.spectrum-colorwheel-path-borders`, and `.spectrum-colorwheel-colorarea-container` are hard coded in CSS and include token values in custom CSS variables so they can be accessed with JS to and used to calculate these values, `const wheel = document.querySelector(".spectrum-ColorWheel-wheel") getComputedStyle(wheel).getPropertyValue('--track-width'))`
-
-<Canvas of={ColorWheelStories.WithColorArea} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js
index fad4aa9746..15bba48a20 100644
--- a/components/colorwheel/stories/colorwheel.stories.js
+++ b/components/colorwheel/stories/colorwheel.stories.js
@@ -1,12 +1,17 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ColorWheelGroup } from "./colorwheel.test.js";
 import { Template } from "./template.js";
 
 /**
  * The color wheel component lets users visually change an individual channel of a color on a circular track.
+ *
+ * ## Usage notes
+ * - For a given rotation on the wheel, X, the `.spectrum-ColorHandle` should be moved by applying the style property `transform: translate(${Y * Math.cos(X)}px, ${Y * Math.sin(X)}px)`, where Y is `((radius - .spectrum-colorwheel-track-width) / 2))`.
+ * - Set the value attribute of `.spectrum-ColorWheel-value` to the currently selected color (i.e. `hsl(326, 100%, 50%)`).
+ * - Add `.is-dragged` when the handle is being dragged.
  */
 export default {
 	title: "Color wheel",
@@ -42,10 +47,13 @@ export default {
 		selectedColor: "rgba(255, 0, 0, 50%)",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=20606-73",
+		},
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = ColorWheelGroup.bind({});
@@ -61,6 +69,19 @@ Disabled.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * The color wheel is often used together with the [color area component](/docs/components-color-area--docs) for color selection. When placing the color area inside the color wheel, make sure to leave enough of a margin between the two components to ensure there’s enough space for the both handles.
+ *
+ * To display a color area inside of the color wheel, add a color area component to `.spectrum-ColorWheel-colorarea-container` element and define the custom width and height styles with `--mod-colorarea-width` and `--mod-colorarea-height` variables.
+ *
+ * The `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the color area within the color wheel using `.spectrum-color-wheel-color-area-margin`. Implementations using JS can calculate the container size with `Math.sqrt(2 * R * R)`, where `R` is the inner radius as calculated for the clip paths.
+ *
+ * `.spectrum-colorwheel-path`, `.spectrum-colorwheel-path-borders` and `.spectrum-colorwheel-colorarea-container` are hard coded in CSS, and include token values as custom CSS variables so they can be accessed with JS. To use and calculate these values, implementations should consider:
+ * ```
+ * const wheel = document.querySelector(".spectrum-ColorWheel-wheel")
+ * getComputedStyle(wheel).getPropertyValue('--track-width')
+ * ```
+ * */
 export const WithColorArea = Template.bind({});
 WithColorArea.tags = ["!dev"];
 WithColorArea.args = {
@@ -69,6 +90,7 @@ WithColorArea.args = {
 WithColorArea.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+WithColorArea.storyName = "With color area";
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ColorWheelGroup.bind({});
diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js
index 1d02f5e782..851150ffd3 100644
--- a/components/colorwheel/stories/template.js
+++ b/components/colorwheel/stories/template.js
@@ -5,6 +5,9 @@ import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-ColorWheel",
diff --git a/components/colorwheel/themes/express.css b/components/colorwheel/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/colorwheel/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/colorwheel/themes/spectrum-two.css b/components/colorwheel/themes/spectrum-two.css
new file mode 100644
index 0000000000..b80c228ebb
--- /dev/null
+++ b/components/colorwheel/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-ColorWheel {
+		--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
+	}
+}
diff --git a/components/colorwheel/themes/spectrum.css b/components/colorwheel/themes/spectrum.css
new file mode 100644
index 0000000000..9c47a280a6
--- /dev/null
+++ b/components/colorwheel/themes/spectrum.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-ColorWheel {
+		--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200);
+	}
+}
diff --git a/components/combobox/metadata/metadata.json b/components/combobox/dist/metadata.json
similarity index 99%
rename from components/combobox/metadata/metadata.json
rename to components/combobox/dist/metadata.json
index f722230e21..97b38d5f40 100644
--- a/components/combobox/metadata/metadata.json
+++ b/components/combobox/dist/metadata.json
@@ -142,6 +142,7 @@
     "--spectrum-combo-box-visual-to-field-button-medium",
     "--spectrum-combo-box-visual-to-field-button-quiet",
     "--spectrum-combo-box-visual-to-field-button-small",
+    "--spectrum-combobox-background-color-disabled",
     "--spectrum-combobox-block-size",
     "--spectrum-combobox-block-spacing-edge-to-alert",
     "--spectrum-combobox-block-spacing-edge-to-progress-circle",
@@ -231,7 +232,7 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
-    "--spectrum-gray-400",
+    "--spectrum-gray-25",
     "--spectrum-gray-50",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
@@ -249,6 +250,7 @@
     "--spectrum-workflow-icon-size-75"
   ],
   "system-theme": [
+    "--system-combobox-background-color-disabled",
     "--system-combobox-border-color-default",
     "--system-combobox-border-color-focus",
     "--system-combobox-border-color-focus-hover",
diff --git a/components/combobox/index.css b/components/combobox/index.css
index ec39ba6c40..524c396f88 100644
--- a/components/combobox/index.css
+++ b/components/combobox/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Combobox {
 	--spectrum-combobox-inline-size: var(--spectrum-field-width);
@@ -55,7 +54,7 @@
 	--mod-textfield-focus-indicator-color: var(--mod-combobox-focus-indicator-color, var(--spectrum-combobox-focus-indicator-color));
 
 	--mod-textfield-background-color: var(--mod-combobox-background-color-default);
-	--mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled);
+	--mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled, var(--spectrum-combobox-background-color-disabled));
 
 	--mod-textfield-font-family: var(--mod-combobox-font-family);
 	--mod-textfield-font-weight: var(--mod-combobox-font-weight);
@@ -69,7 +68,7 @@
 
 	--mod-textfield-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width));
 	--mod-textfield-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default));
-	--mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled);
+	--mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, transparent);
 	--mod-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus));
 	--mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover));
 	--mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover));
@@ -101,21 +100,7 @@
 	--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
 }
 
-.spectrum-Combobox--sizeS {
-	--spectrum-combobox-block-size: var(--spectrum-component-height-75);
-	--spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75);
-	--spectrum-combobox-font-size: var(--spectrum-font-size-75);
-
-	--spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small);
-	--spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
-	--spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small);
-	--spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small);
-	--spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75);
-	--spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75);
-	--spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75);
-	--spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75);
-}
-
+.spectrum-Combobox,
 .spectrum-Combobox--sizeM {
 	--spectrum-combobox-block-size: var(--spectrum-component-height-100);
 	--spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
@@ -131,6 +116,21 @@
 	--spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100);
 }
 
+.spectrum-Combobox--sizeS {
+	--spectrum-combobox-block-size: var(--spectrum-component-height-75);
+	--spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75);
+	--spectrum-combobox-font-size: var(--spectrum-font-size-75);
+
+	--spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small);
+	--spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
+	--spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small);
+	--spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small);
+	--spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75);
+	--spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75);
+	--spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75);
+	--spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75);
+}
+
 .spectrum-Combobox--sizeL {
 	--spectrum-combobox-block-size: var(--spectrum-component-height-200);
 	--spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200);
@@ -167,6 +167,7 @@
 	--spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet);
 	--spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium);
 	--spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2));
+	--mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, initial);
 
 	&.spectrum-Combobox--sizeS {
 		--spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small);
@@ -370,16 +371,19 @@
 	/* Focus */
 	.spectrum-Combobox-textfield.is-focused &,
 	&:focus {
+		--mod-combobox-border-color-default: var(--spectrum-combobox-border-color-focus);
 		--mod-textfield-background-color: var(--mod-combobox-background-color-focus);
 
 		/* Focus + Hover */
 		&:hover {
+			--mod-combobox-border-color-default: var(--spectrum-combobox-border-color-focus-hover);
 			--mod-textfield-background-color: var(--mod-combobox-background-color-focus-hover);
 		}
 	}
 
 	/* Keyboard Focus */
 	.spectrum-Combobox-textfield.is-keyboardFocused & {
+		--mod-combobox-border-color-default: var(--spectrum-combobox-border-color-key-focus);
 		--mod-textfield-background-color: var(--mod-combobox-background-color-key-focus);
 	}
 
diff --git a/components/combobox/metadata/mods.md b/components/combobox/metadata/mods.md
deleted file mode 100644
index 38f0e27b24..0000000000
--- a/components/combobox/metadata/mods.md
+++ /dev/null
@@ -1,53 +0,0 @@
-| Modifiable custom properties                           |
-| ------------------------------------------------------ |
-| `--mod-combobox-alert-icon-color`                      |
-| `--mod-combobox-background-color-default`              |
-| `--mod-combobox-background-color-disabled`             |
-| `--mod-combobox-background-color-focus`                |
-| `--mod-combobox-background-color-focus-hover`          |
-| `--mod-combobox-background-color-hover`                |
-| `--mod-combobox-background-color-key-focus`            |
-| `--mod-combobox-block-size`                            |
-| `--mod-combobox-block-spacing-edge-to-alert`           |
-| `--mod-combobox-block-spacing-edge-to-progress-circle` |
-| `--mod-combobox-border-color-default`                  |
-| `--mod-combobox-border-color-disabled`                 |
-| `--mod-combobox-border-color-focus`                    |
-| `--mod-combobox-border-color-focus-hover`              |
-| `--mod-combobox-border-color-hover`                    |
-| `--mod-combobox-border-color-invalid-default`          |
-| `--mod-combobox-border-color-invalid-focus`            |
-| `--mod-combobox-border-color-invalid-focus-hover`      |
-| `--mod-combobox-border-color-invalid-hover`            |
-| `--mod-combobox-border-color-invalid-key-focus`        |
-| `--mod-combobox-border-color-key-focus`                |
-| `--mod-combobox-border-radius`                         |
-| `--mod-combobox-border-width`                          |
-| `--mod-combobox-button-inline-offset`                  |
-| `--mod-combobox-button-width`                          |
-| `--mod-combobox-focus-indicator-color`                 |
-| `--mod-combobox-focus-indicator-gap`                   |
-| `--mod-combobox-focus-indicator-thickness`             |
-| `--mod-combobox-font-color-default`                    |
-| `--mod-combobox-font-color-disabled`                   |
-| `--mod-combobox-font-color-focus`                      |
-| `--mod-combobox-font-color-focus-hover`                |
-| `--mod-combobox-font-color-hover`                      |
-| `--mod-combobox-font-color-key-focus`                  |
-| `--mod-combobox-font-color-placeholder`                |
-| `--mod-combobox-font-family`                           |
-| `--mod-combobox-font-size`                             |
-| `--mod-combobox-font-style`                            |
-| `--mod-combobox-font-weight`                           |
-| `--mod-combobox-icon-size`                             |
-| `--mod-combobox-inline-size`                           |
-| `--mod-combobox-line-height`                           |
-| `--mod-combobox-min-inline-size`                       |
-| `--mod-combobox-readonly-input-border-color`           |
-| `--mod-combobox-spacing-block-end-edge-to-text`        |
-| `--mod-combobox-spacing-block-start-edge-to-text`      |
-| `--mod-combobox-spacing-edge-to-menu`                  |
-| `--mod-combobox-spacing-inline-end-edge-to-text`       |
-| `--mod-combobox-spacing-inline-icon-to-button`         |
-| `--mod-combobox-spacing-inline-start-edge-to-text`     |
-| `--mod-combobox-spacing-label-to-combobox`             |
diff --git a/components/combobox/package.json b/components/combobox/package.json
index e8c8470887..9ffc2ed05c 100644
--- a/components/combobox/package.json
+++ b/components/combobox/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js
index 2a4854a0e0..baea4599d0 100644
--- a/components/combobox/stories/combobox.stories.js
+++ b/components/combobox/stories/combobox.stories.js
@@ -2,7 +2,7 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, isReadOnly, size } from "@spectrum-css/preview/types";
 import { within } from "@storybook/test";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ComboBoxGroup } from "./combobox.test.js";
 import { Template, VariantGroup } from "./template.js";
@@ -138,6 +138,10 @@ export default {
 		],
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=727-2550",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js
index 96dfdcf25e..fe68d45cba 100644
--- a/components/combobox/stories/template.js
+++ b/components/combobox/stories/template.js
@@ -10,6 +10,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 const Combobox = ({
 	rootClass = "spectrum-Combobox",
diff --git a/components/combobox/themes/express.css b/components/combobox/themes/express.css
index d621c5af1b..4b554c207d 100644
--- a/components/combobox/themes/express.css
+++ b/components/combobox/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Combobox {
 		--spectrum-combobox-border-color-default: var(--spectrum-gray-400);
 		--spectrum-combobox-border-color-hover: var(--spectrum-gray-500);
diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css
new file mode 100644
index 0000000000..2e6ae24205
--- /dev/null
+++ b/components/combobox/themes/spectrum-two.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Combobox {
+		--spectrum-combobox-border-color-default: var(--spectrum-gray-500);
+		--spectrum-combobox-border-color-hover: var(--spectrum-gray-600);
+		--spectrum-combobox-border-color-focus: var(--spectrum-gray-800);
+		--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900);
+		--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800);
+
+		--spectrum-combobox-background-color-disabled: var(--spectrum-gray-25);
+	}
+}
diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css
index 31c5e848d4..4e5bd9ece6 100644
--- a/components/combobox/themes/spectrum.css
+++ b/components/combobox/themes/spectrum.css
@@ -11,12 +11,16 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: spectrum) {
 	.spectrum-Combobox {
-		--spectrum-combobox-border-color-default: var(--spectrum-gray-500);
-		--spectrum-combobox-border-color-hover: var(--spectrum-gray-600);
 		--spectrum-combobox-border-color-focus: var(--spectrum-gray-500);
 		--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600);
 		--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600);
+
+		--spectrum-combobox-background-color-disabled: var(--spectrum-disabled-background-color);
 	}
 }
diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css
index 8ff7c5e858..fa015bc145 100644
--- a/components/commons/basebutton.css
+++ b/components/commons/basebutton.css
@@ -32,6 +32,11 @@
 	/* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
 	font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
 
+	-webkit-font-smoothing: antialiased;
+
+	/* Font smoothing for Firefox */
+	-moz-osx-font-smoothing: grayscale;
+
 	/* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
 	line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
 	text-decoration: none;
@@ -53,10 +58,7 @@
 		color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
 		box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
 
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-
-	/* Remove the inner border and padding in Firefox (normalize). */
+	/* Fix Firefox */
 	&::-moz-focus-inner {
 		border-style: none;
 		padding: 0;
@@ -89,13 +91,11 @@
 
 		display: block;
 
-		/* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */
-		margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))));
+		margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)));
 
-		/* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
 		transition:
-			opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out,
-			margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out;
+			opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out,
+			margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out;
 	}
 
 	&:focus-visible::after {
diff --git a/components/commons/overlay.css b/components/commons/overlay.css
index 9c025ab46f..fc40b564b0 100644
--- a/components/commons/overlay.css
+++ b/components/commons/overlay.css
@@ -13,7 +13,7 @@
 
 /* TODO: replace legacy animation variables with core tokens when available */
 
-/** @note used in modal, popover, quickaction, tooltip, underlay */
+/** @note used in modal, tooltip, underlay */
 %spectrum-overlay {
 	pointer-events: none;
 	visibility: hidden;
@@ -24,30 +24,10 @@
 		visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
 }
 
-/** @note used in modal, popover, quickaction, tooltip, underlay */
+/** @note used in modal, tooltip, underlay */
 %spectrum-overlay--open {
 	pointer-events: auto;
 	visibility: visible;
 	opacity: 1;
 	transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0ms));
 }
-
-/** @note currently unused */
-%spectrum-overlay--bottom--open {
-	transform: translateY(var(--mod-overlay-animation-distance, 6px));
-}
-
-/** @note currently unused */
-%spectrum-overlay--top--open {
-	transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, 6px)));
-}
-
-/** @note used in quickaction */
-%spectrum-overlay--right--open {
-	transform: translateX(var(--mod-overlay-animation-distance, 6px));
-}
-
-/** @note used in quickaction */
-%spectrum-overlay--left--open {
-	transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, 6px)));
-}
diff --git a/components/commons/package.json b/components/commons/package.json
index 5cb525765d..75d908623e 100644
--- a/components/commons/package.json
+++ b/components/commons/package.json
@@ -13,6 +13,14 @@
 	"bugs": {
 		"url": "https://github.com/adobe/spectrum-css/issues"
 	},
+	"exports": {
+		".": "./index.css",
+		"./*.css": "./*.css",
+		"./CHANGELOG.md": "./CHANGELOG.md",
+		"./README.md": "./README.md",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
 	"main": "index.css",
 	"peerDependencies": {
 		"@spectrum-css/tokens": ">=14 || >=15"
diff --git a/components/contextualhelp/metadata/metadata.json b/components/contextualhelp/dist/metadata.json
similarity index 84%
rename from components/contextualhelp/metadata/metadata.json
rename to components/contextualhelp/dist/metadata.json
index e3952ec708..71d3220dc7 100644
--- a/components/contextualhelp/metadata/metadata.json
+++ b/components/contextualhelp/dist/metadata.json
@@ -19,14 +19,9 @@
     "--mod-spectrum-contextual-help-padding"
   ],
   "component": [
-    "--spectrum-contextual-help-body-color",
     "--spectrum-contextual-help-body-size",
     "--spectrum-contextual-help-content-spacing",
-    "--spectrum-contextual-help-heading-color",
-    "--spectrum-contextual-help-heading-size",
-    "--spectrum-contextual-help-link-spacing",
     "--spectrum-contextual-help-minimum-width",
-    "--spectrum-contextual-help-padding",
     "--spectrum-contextual-help-title-size"
   ],
   "global": [
diff --git a/components/contextualhelp/index.css b/components/contextualhelp/index.css
index fce97c1b0b..194fbc5936 100644
--- a/components/contextualhelp/index.css
+++ b/components/contextualhelp/index.css
@@ -12,15 +12,6 @@
  */
 
 .spectrum-ContextualHelp {
-	/* Layout Variables */
-	--spectrum-contextual-help-padding: var(--spectrum-spacing-400);
-	--spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300);
-
-	/* Typography Variables */
-	--spectrum-contextual-help-heading-size: var(--spectrum-contextual-help-title-size);
-	--spectrum-contextual-help-heading-color: var(--spectrum-heading-color);
-	--spectrum-contextual-help-body-color: var(--spectrum-body-color);
-
 	position: relative;
 	min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width));
 }
@@ -30,10 +21,10 @@
 }
 
 .spectrum-ContextualHelp-popover {
-	padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding));
-	padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding));
+	padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400));
+	padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400));
 	font-size: var(--mod-spectrum-contextual-help-body-size, var(--spectrum-contextual-help-body-size));
-	color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-contextual-help-body-color)));
+	color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-body-color)));
 
 	.spectrum-ContextualHelp-heading,
 	.spectrum-ContextualHelp-body {
@@ -42,13 +33,13 @@
 
 	.spectrum-ContextualHelp-heading {
 		margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing));
-		font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-heading-size));
-		color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-contextual-help-heading-color)));
+		font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-title-size));
+		color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-heading-color)));
 	}
 }
 
 .spectrum-ContextualHelp-link {
-	margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-contextual-help-link-spacing));
+	margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-spacing-300));
 }
 
 @media (forced-colors: active) {
diff --git a/components/contextualhelp/metadata/mods.md b/components/contextualhelp/metadata/mods.md
deleted file mode 100644
index ff5ad9c050..0000000000
--- a/components/contextualhelp/metadata/mods.md
+++ /dev/null
@@ -1,10 +0,0 @@
-| Modifiable custom properties                     |
-| ------------------------------------------------ |
-| `--mod-contextual-help-body-color`               |
-| `--mod-contextual-help-heading-color`            |
-| `--mod-spectrum-contextual-help-body-size`       |
-| `--mod-spectrum-contextual-help-content-spacing` |
-| `--mod-spectrum-contextual-help-heading-size`    |
-| `--mod-spectrum-contextual-help-link-spacing`    |
-| `--mod-spectrum-contextual-help-minimum-width`   |
-| `--mod-spectrum-contextual-help-padding`         |
diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json
index bd6f1513c8..12f4d523cc 100644
--- a/components/contextualhelp/package.json
+++ b/components/contextualhelp/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/contextualhelp/stories/contextualhelp.mdx b/components/contextualhelp/stories/contextualhelp.mdx
deleted file mode 100644
index d9511f7f5c..0000000000
--- a/components/contextualhelp/stories/contextualhelp.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
-  Canvas,
-  ArgTypes,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as ContextualHelpStories from "./contextualhelp.stories";
-
-<Meta of={ContextualHelpStories} title="Docs" />
-
-<Title of={ContextualHelpStories} />
-<Subtitle of={ContextualHelpStories} />
-<ComponentDetails />
-
-<Description of={ContextualHelpStories} />
-
-## Info icon variants
-
-### Info icon - standard
-
-<Canvas of={ContextualHelpStories.Default} />
-
-### Info icon - with link
-
-<Canvas of={ContextualHelpStories.WithLink} />
-
-### Info icon - top popover
-
-<Canvas of={ContextualHelpStories.TopPopover} />
-
-## Help icon variants
-
-### Help icon - standard
-
-<Canvas of={ContextualHelpStories.HelpDefault} />
-
-### Help icon - with link
-
-<Canvas of={ContextualHelpStories.HelpWithLink} />
-
-### Help icon - top popover
-
-<Canvas of={ContextualHelpStories.HelpTopPopover} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js
index 43805455df..b4177d6b82 100644
--- a/components/contextualhelp/stories/contextualhelp.stories.js
+++ b/components/contextualhelp/stories/contextualhelp.stories.js
@@ -1,6 +1,6 @@
 import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ContextualHelpGroup } from "./contextualhelp.test.js";
 import { Template } from "./template.js";
@@ -93,6 +93,10 @@ export default {
 				...(ActionButtonStories?.parameters?.actions?.handles ?? [])
 			],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=49480-1934",
+		},
 		packageJson,
 		metadata,
 		docs: {
@@ -103,10 +107,18 @@ export default {
 	},
 };
 
+/**
+ * The default contextual help component uses an info icon to signify that it represents in-line information, and does not incorporate a link in its content. Specific, brief, and contextual guidance is best for this component's supplemental or nice-to-know content. The default placement of the popover is `bottom-start`.
+ */
 export const Default = ContextualHelpGroup.bind({});
 Default.args = {};
 
 // ********* DOCS ONLY ********* //
+/**
+ * If using a standalone [link](/docs/components-link--docs), do not add punctuation to the end of the link text. Make sure that the landing experience is intuitive, helpful, and naturally builds upon the information being introduced in this component. For example, don’t link to an external sales website unless the information there is directly related to a user being able to do something within the product.
+ *
+ * A generic “Learn more” can be acceptable, but it’s more helpful, particularly for screen reader users, to include another word or two in the link text that gives more context about the link's destination.
+ */
 export const WithLink = Template.bind({});
 WithLink.tags = ["!dev"];
 WithLink.args = {
@@ -118,7 +130,11 @@ WithLink.args = {
 WithLink.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+WithLink.storyName = "Default - info icon with link";
 
+/**
+ * This is an example of the contextual help component within a popover with a placement of `top`. Read more about the 22 available placement positions in the [popover documentation](/docs/components-popover--docs).
+ */
 export const TopPopover = Template.bind({});
 TopPopover.tags = ["!dev"];
 TopPopover.args = {
@@ -138,7 +154,11 @@ TopPopover.parameters = {
 		},
 	},
 };
+TopPopover.storyName = "Default - top popover";
 
+/**
+ * When displaying help or resources to learn more, the contextual help should use the help icon. The content in this variant provides more detailed, in-depth guidance about a task, UI element, tool or keyboard shortcuts.
+ */
 export const HelpDefault = Template.bind({});
 HelpDefault.tags = ["!dev"];
 HelpDefault.args = {
@@ -147,6 +167,7 @@ HelpDefault.args = {
 HelpDefault.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+HelpDefault.storyName = "Help icon";
 
 export const HelpWithLink = Template.bind({});
 HelpWithLink.tags = ["!dev"];
@@ -160,6 +181,7 @@ HelpWithLink.args = {
 HelpWithLink.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+HelpWithLink.storyName = "Help icon - with link";
 
 export const HelpTopPopover = Template.bind({});
 HelpTopPopover.tags = ["!dev"];
@@ -181,6 +203,7 @@ HelpTopPopover.parameters = {
 		},
 	},
 };
+HelpTopPopover.storyName = "Help icon - top popover";
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ContextualHelpGroup.bind({});
diff --git a/components/contextualhelp/stories/contextualhelp.test.js b/components/contextualhelp/stories/contextualhelp.test.js
index 47abc2f463..c58db43a91 100644
--- a/components/contextualhelp/stories/contextualhelp.test.js
+++ b/components/contextualhelp/stories/contextualhelp.test.js
@@ -22,5 +22,13 @@ export const ContextualHelpGroup = Variants({
 				url: "#",
 			},
 		},
+		{
+			testHeading: "Help",
+			iconName: "Help",
+			customStyles: {
+				"inline-size": "275px",
+				"margin-bottom": "170px",
+			},
+		},
 	],
 });
diff --git a/components/datepicker/metadata/metadata.json b/components/datepicker/dist/metadata.json
similarity index 82%
rename from components/datepicker/metadata/metadata.json
rename to components/datepicker/dist/metadata.json
index 1ccf55e67d..f52f1b93cd 100644
--- a/components/datepicker/metadata/metadata.json
+++ b/components/datepicker/dist/metadata.json
@@ -1,25 +1,18 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".is-invalid .spectrum-DatePicker-input",
     ".spectrum-DatePicker",
     ".spectrum-DatePicker--quiet",
-    ".spectrum-DatePicker--quiet .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)",
     ".spectrum-DatePicker--quiet .spectrum-DatePicker-button",
-    ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled",
-    ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:hover",
-    ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:not(.is-open) .spectrum-PickerButton-fill",
-    ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open) .spectrum-PickerButton-fill",
-    ".spectrum-DatePicker--quiet .spectrum-DatePicker-input",
-    ".spectrum-DatePicker--quiet .spectrum-DatePicker-input.spectrum-DatePicker-endField",
-    ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-button",
-    ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input",
-    ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) .spectrum-DatePicker-button",
-    ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) .spectrum-DatePicker-input",
+    ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(.is-open)",
+    ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open)",
+    ".spectrum-DatePicker--quiet.is-disabled",
+    ".spectrum-DatePicker--quiet.is-invalid",
+    ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)",
+    ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid)",
     ".spectrum-DatePicker--range",
     ".spectrum-DatePicker--range .spectrum-DatePicker-textfield",
     ".spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type",
-    ".spectrum-DatePicker--range.is-keyboardFocused.spectrum-DatePicker--quiet:after",
     ".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet) .spectrum-DatePicker-textfield:after",
     ".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after",
     ".spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield",
@@ -29,6 +22,7 @@
     ".spectrum-DatePicker--range.spectrum-DatePicker--quiet",
     ".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield",
     ".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type",
+    ".spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after",
     ".spectrum-DatePicker--range:after",
     ".spectrum-DatePicker-button",
     ".spectrum-DatePicker-input",
@@ -36,9 +30,10 @@
     ".spectrum-DatePicker-input.spectrum-DatePicker-startField",
     ".spectrum-DatePicker-rangeDash",
     ".spectrum-DatePicker-rangeDash:before",
-    ".spectrum-DatePicker.is-disabled .spectrum-DatePicker-rangeDash",
+    ".spectrum-DatePicker.is-disabled",
     ".spectrum-DatePicker.is-invalid",
     ".spectrum-DatePicker.is-invalid:not(.spectrum-DatePicker--quiet, .is-disabled)",
+    ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid",
     ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)"
   ],
   "modifiers": [
@@ -65,9 +60,8 @@
     "--mod-datepicker-invalid-quiet-color",
     "--mod-datepicker-min-width",
     "--mod-datepicker-padding-inline",
-    "--mod-datepicker-padding-inline-end-invalid",
     "--mod-datepicker-padding-inline-end-invalid-quiet",
-    "--mod-datepicker-padding-inline-end-quiet",
+    "--mod-datepicker-padding-inline-quiet",
     "--mod-datepicker-pickerbutton-border-color",
     "--mod-datepicker-pickerbutton-border-color-invalid",
     "--mod-datepicker-quiet-border-color-hover",
@@ -83,7 +77,6 @@
     "--spectrum-datepicker-border-radius-quiet",
     "--spectrum-datepicker-border-width",
     "--spectrum-datepicker-dash-color",
-    "--spectrum-datepicker-dash-color-disabled",
     "--spectrum-datepicker-dash-font-size",
     "--spectrum-datepicker-dash-line-height",
     "--spectrum-datepicker-datetime-input-width",
@@ -99,7 +92,6 @@
     "--spectrum-datepicker-focus-thickness",
     "--spectrum-datepicker-generic-padding",
     "--spectrum-datepicker-icon-size",
-    "--spectrum-datepicker-icon-to-button",
     "--spectrum-datepicker-icon-to-text",
     "--spectrum-datepicker-initial-height",
     "--spectrum-datepicker-initial-width",
@@ -112,7 +104,6 @@
     "--spectrum-datepicker-invalid-quiet-color",
     "--spectrum-datepicker-min-width",
     "--spectrum-datepicker-padding-inline-end",
-    "--spectrum-datepicker-padding-inline-end-invalid",
     "--spectrum-datepicker-padding-inline-end-invalid-quiet",
     "--spectrum-datepicker-padding-inline-end-quiet",
     "--spectrum-datepicker-pickerbutton-border-color",
@@ -133,7 +124,6 @@
     "--spectrum-border-width-100",
     "--spectrum-component-edge-to-text-100",
     "--spectrum-component-height-100",
-    "--spectrum-component-height-75",
     "--spectrum-corner-radius-100",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
@@ -152,15 +142,17 @@
   ],
   "system-theme": ["--system-date-picker-initial-height"],
   "passthroughs": [
+    "--mod-picker-button-background-color",
+    "--mod-picker-button-background-color-hover-disabled",
     "--mod-picker-button-border-color",
+    "--mod-picker-button-border-color-disabled",
+    "--mod-textfield-border-color-disabled",
     "--mod-textfield-icon-spacing-inline-end-invalid",
     "--mod-textfield-icon-spacing-inline-end-quiet-invalid"
   ],
   "high-contrast": [
     "--highcontrast-datepicker-dash-color",
-    "--highcontrast-datepicker-dash-color-disabled",
     "--highcontrast-datepicker-focus-ring-color",
-    "--highcontrast-datepicker-invalid-quiet-color",
     "--highcontrast-datepicker-pickerbutton-border-color"
   ]
 }
diff --git a/components/datepicker/index.css b/components/datepicker/index.css
index 7cb872b4c2..7b20a28ae6 100644
--- a/components/datepicker/index.css
+++ b/components/datepicker/index.css
@@ -11,179 +11,193 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-DatePicker {
-	--spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100);
-	--spectrum-datepicker-border-radius-quiet: 0;
+	--spectrum-datepicker-border-radius: var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100));
+	--spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0);
 	--spectrum-datepicker-border-width: var(--spectrum-border-width-100);
-	--spectrum-datepicker-min-width: var(--spectrum-field-width);
+	--spectrum-datepicker-min-width: var(--mod-datepicker-min-width, var(--spectrum-field-width));
 	--spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);
 
 	/* button */
-	--spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500);
-	--spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default);
-	--spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100));
-	--spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));
-	--spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100);
-	--spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100);
+	--spectrum-datepicker-pickerbutton-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-gray-500)));
+	--spectrum-datepicker-pickerbutton-border-color-invalid: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default)));
+	--spectrum-datepicker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100));
+	--spectrum-datepicker-quiet-button-offset: var(--mod-datepicker-quiet-button-offset, var(--spectrum-text-to-visual-100));
 	--spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100);
 
+	/* Calculated as width minus offset */
+	--spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));
+
 	/* focus */
-	--spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap);
-	--spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness);
-	--spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100);
-	--spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100);
-	--spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color);
-	--spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75);
+	--spectrum-datepicker-focus-ring-gap: var(--mod-datepicker-focus-ring-gap, var(--spectrum-focus-indicator-gap));
+	--spectrum-datepicker-focus-thickness: var(--mod-datepicker-focus-thickness, var(--spectrum-focus-indicator-thickness));
+	--spectrum-datepicker-focus-animation: var(--mod-datepicker-focus-animation, var(--spectrum-animation-duration-100));
+	--spectrum-datepicker-focus-ring-width: var(--mod-datepicker-focus-ring-width, var(--spectrum-border-width-100));
+	--spectrum-datepicker-focus-ring-color: var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color)));
+	--spectrum-datepicker-focus-line-gap: var(--mod-datepicker-focus-line-gap, var(--spectrum-spacing-75));
 
 	/* color */
-	--spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default);
-	--spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500);
-	--spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color);
+	--spectrum-datepicker-invalid-quiet-color: var(--mod-datepicker-invalid-quiet-color, var(--spectrum-negative-border-color-default));
+	--spectrum-datepicker-quiet-border-color-hover: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-gray-500));
+	--spectrum-datepicker-border-color-disabled: var(--mod-datepicker-border-color-disabled, var(--spectrum-disabled-border-color));
 
 	/* dash */
-	--spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100);
-	--spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default);
-	--spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color);
-	--spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size));
-	--spectrum-datepicker-range-dash-padding-top: 0;
+	--spectrum-datepicker-dash-font-size: var(--mod-datepicker-dash-font-size, var(--spectrum-font-size-100));
+	--spectrum-datepicker-dash-color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default)));
+	--spectrum-datepicker-range-dash-padding-top: var(--mod-datepicker-range-dash-padding-top, 0);
+
+	/* Calculated as negative half of font-size */
+	--spectrum-datepicker-range-dash-marin-inline-start: var(--mod-datepicker-range-dash-margin-left, calc(-0.5 * var(--spectrum-datepicker-dash-font-size)));
 
 	/* calculating widths */
-	/* todo: if we add t-shirt sizing, this will be wrong ❤️ */
+	/* initial-width and generic-padding are being served from the global tokens package */
+	--spectrum-datepicker-range-input-width-first: var(--mod-datepicker-range-input-width-first, calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)));
 	--spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));
-	--spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height));
-	--spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
 
-	--spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding));
-	--spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second));
+	--spectrum-datepicker-input-width: var(--mod-datepicker-input-width, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)));
+	--spectrum-datepicker-range-input-width-quiet-first: var(--mod-datepicker-range-input-width-quiet-first, calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)));
+	--spectrum-datepicker-input-width-quiet: var(--mod-datepicker-input-width-quiet, calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)));
 
-	--spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first));
-	--spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
-	--spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width));
-	--spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+	--spectrum-datepicker-datetime-input-width-first: var(--mod-datepicker-datetime-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)));
+	--spectrum-datepicker-datetime-input-width: var(--mod-datepicker-datetime-input-width, calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)));
+	--spectrum-datepicker-datetime-quiet-input-width-first: var(--mod-datepicker-datetime-quiet-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)));
+	--spectrum-datepicker-datetime-quiet-input-width: var(--mod-datepicker-datetime-quiet-input-width, calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)));
 
 	/* padding inline end */
-	--spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2));
-	--spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset));
-	--spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2));
-	--spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
-}
+	--spectrum-datepicker-padding-inline-end: var(--mod-datepicker-padding-inline, calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2));
+	--spectrum-datepicker-padding-inline-end-quiet: var(--mod-datepicker-padding-inline-quiet, calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)));
+	--spectrum-datepicker-padding-inline-end-invalid-quiet: var(--mod-datepicker-padding-inline-end-invalid-quiet, calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)));
 
-.spectrum-DatePicker {
 	position: relative;
 	display: inline-flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
-	min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width));
-	border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
+	min-inline-size: var(--spectrum-datepicker-min-width);
+	border-radius: var(--spectrum-datepicker-border-radius);
 
 	&.is-disabled {
-		.spectrum-DatePicker-rangeDash {
-			color: var(--highcontrast-datepicker-dash-color-disabled, var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled)));
-		}
+		--mod-datepicker-dash-color: var(--mod-datepicker-dash-color-disabled, var(--spectrum-disabled-content-color));
+
+		/* @passthrough -- ensures the textfield border color is hidden when disabled */
+		--mod-textfield-border-color-disabled: transparent;
 	}
 
 	&.is-invalid {
 		--mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button));
 		--mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet));
 	}
-}
 
-.spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled) {
-	/* @passthrough -- ensures picker button border color matches the textfield border color */
-	--mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color)));
+	&:not(.spectrum-DatePicker--quiet, .is-disabled) {
+		/* @passthrough -- ensures picker button border color matches the textfield border color */
+		--mod-picker-button-border-color: var(--spectrum-datepicker-pickerbutton-border-color);
 
-	&.is-invalid {
-		/* @passthrough */
-		--mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid)));
+		&.is-invalid {
+			/* @passthrough */
+			--mod-picker-button-border-color: var(--spectrum-datepicker-pickerbutton-border-color-invalid);
+		}
 	}
 }
 
-/* input padding inline end */
-/* standard and range  */
 .spectrum-DatePicker-input {
-	padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
-
-	&.spectrum-DatePicker-endField {
-		padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
-	}
-}
-
-/* standard and range invalid */
-.is-invalid .spectrum-DatePicker-input {
-	padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid));
-}
+	/* fill space */
+	flex: 1;
+	inline-size: 100%;
+	padding-inline-end: var(--spectrum-datepicker-padding-inline-end);
 
-/* quiet */
-.spectrum-DatePicker--quiet {
-	.spectrum-DatePicker-input {
-		padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
-	}
+	&.spectrum-DatePicker-startField {
+		padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
 
-	/* quiet invalid and quiet range invalid */
-	.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) {
-		padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet));
+		border-inline-end: 0;
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
 	}
-}
 
-/* quiet range */
-.spectrum-DatePicker--quiet .spectrum-DatePicker-input {
 	&.spectrum-DatePicker-endField {
-		padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
+		border-inline-start: 0;
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+		padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
 	}
 }
 
+/* Nested Picker Button */
 .spectrum-DatePicker-button {
 	/* Be above textfield so box shadow shines through */
 	position: absolute;
 	inset-inline-end: 0;
 }
 
-.spectrum-DatePicker--quiet {
-	border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
+/* "-" between inputs */
+.spectrum-DatePicker-rangeDash {
+	color: var(--spectrum-datepicker-dash-color);
+	line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
+	padding-block-start: var(--spectrum-datepicker-range-dash-padding-top);
+	flex: initial;
+	inline-size: 0;
+	z-index: 1;
 
-	.spectrum-DatePicker-button {
-		inline-size: auto;
-		inset-inline-end: calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset)));
+	&::before {
+		content: "–";
+		display: inline-block;
+		margin-block: 0;
+		margin-inline: var(--spectrum-datepicker-range-dash-marin-inline-start);
+		overflow: hidden;
+		text-align: center;
+		vertical-align: middle;
+		inline-size: var(--spectrum-datepicker-dash-font-size);
+	}
+}
 
-		&:disabled,
-		&:disabled:hover {
-			border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled));
-		}
+/* quiet */
+.spectrum-DatePicker--quiet {
+	--mod-datepicker-border-radius: var(--spectrum-datepicker-border-radius-quiet);
+	--mod-datepicker-padding-inline: var(--spectrum-datepicker-padding-inline-end-quiet);
 
-		&:disabled:not(.is-open) {
-			.spectrum-PickerButton-fill {
-				border-color: transparent;
-			}
-		}
+	/* @passthrough start -- quiet variant nested button styles */
+	--mod-picker-button-border-color-disabled: var(--spectrum-datepicker-border-color-disabled);
+	--mod-picker-button-background-color-hover-disabled: var(--spectrum-datepicker-border-color-disabled);
+	/* @passthrough end */
 
-		&:not(:disabled, .is-open) {
-			.spectrum-PickerButton-fill {
-				background-color: transparent;
-			}
-		}
+	/* @passthrough start -- quiet variant nested button styles */
+	&.is-disabled {
+		--mod-textfield-border-color-disabled: var(--spectrum-datepicker-border-color-disabled);
+	}
+	/* @passthrough end */
+
+	/* quiet invalid and quiet range invalid */
+	&.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) {
+		padding-inline-end: var(--spectrum-datepicker-padding-inline-end-invalid-quiet);
 	}
 
 	&:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) {
-		.spectrum-DatePicker-input,
-		.spectrum-DatePicker-button {
-			border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover));
-		}
+		/* @passthrough -- nested border colors */
+		--mod-picker-button-border-color: var(--spectrum-datepicker-quiet-border-color-hover);
 	}
 
-	/* invalid bottom border color */
 	&.is-invalid {
-		.spectrum-DatePicker-input,
-		.spectrum-DatePicker-button {
-			border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color)));
+		/* @passthrough -- invalid bottom border color */
+		--mod-picker-button-border-color: var(--spectrum-datepicker-invalid-quiet-color);
+	}
+
+	/* Nested Picker Button */
+	.spectrum-DatePicker-button {
+		inline-size: auto;
+		inset-inline-end: calc(-1 * var(--spectrum-datepicker-quiet-button-offset));
+
+		&:not(.is-open) {
+			--mod-picker-button-border-color-disabled: transparent;
+		}
+
+		&:not(:disabled, .is-open) {
+			--mod-picker-button-background-color: transparent;
 		}
 	}
 }
 
 .spectrum-DatePicker--range {
-	border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
+	--mod-datepicker-border-radius: var(--spectrum-datepicker-border-radius);
 
 	/* focus-ring */
 	&::after {
@@ -191,17 +205,17 @@
 		content: "";
 		position: absolute;
 		inset: 0;
-		margin: calc(var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)) * -1);
-		border-radius: calc(var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)) + var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)));
+		margin: calc(var(--spectrum-datepicker-focus-ring-gap) * -1);
+		border-radius: calc(var(--spectrum-datepicker-border-radius) + var(--spectrum-datepicker-focus-ring-gap));
 		border-color: transparent;
 		transition:
-			box-shadow var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out,
-			border-color var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out;
+			box-shadow var(--spectrum-datepicker-focus-animation) ease-in-out,
+			border-color var(--spectrum-datepicker-focus-animation) ease-in-out;
 	}
 
 	&.is-keyboardFocused:not(.spectrum-DatePicker--quiet) {
 		&::after {
-			box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
+			box-shadow: 0 0 0 var(--spectrum-datepicker-focus-ring-width) var(--spectrum-datepicker-focus-ring-color);
 		}
 
 		.spectrum-DatePicker-textfield::after {
@@ -209,27 +223,25 @@
 		}
 	}
 
-	&.is-keyboardFocused.spectrum-DatePicker--quiet {
+	/* Input Group */
+	&.spectrum-DatePicker--quiet {
+		--mod-datepicker-border-radius: var(--spectrum-datepicker-border-radius-quiet);
+
 		/* quiet variant bottom border focus indicator */
-		&::after {
+		&.is-keyboardFocused::after {
 			margin: 0;
 			box-shadow: none;
 			border-radius: 0;
-			border-block-end: var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
-			inset-block-end: calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap)));
+			border-block-end: var(--spectrum-datepicker-focus-thickness) solid var(--spectrum-datepicker-focus-ring-color);
+			inset-block-end: calc(-1 * var(--spectrum-datepicker-focus-line-gap));
 		}
-	}
-
-	/* Input Group */
-	&.spectrum-DatePicker--quiet {
-		border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
 
 		.spectrum-DatePicker-textfield {
 			min-inline-size: 0;
-			inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet));
+			inline-size: var(--spectrum-datepicker-input-width-quiet);
 
 			&:first-of-type {
-				inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first));
+				inline-size: var(--spectrum-datepicker-range-input-width-quiet-first);
 			}
 		}
 	}
@@ -238,21 +250,19 @@
 	&.spectrum-DatePicker--datetimeRange {
 		/* Inputs */
 		.spectrum-DatePicker-textfield {
-			inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width));
+			inline-size: var(--spectrum-datepicker-datetime-input-width);
 			min-inline-size: 0;
 
 			&:first-of-type {
-				inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first));
+				inline-size: var(--spectrum-datepicker-datetime-input-width-first);
 			}
 		}
 
-		&.spectrum-DatePicker--quiet {
-			.spectrum-DatePicker-textfield {
-				inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width));
-			}
+		&.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield {
+			inline-size: var(--spectrum-datepicker-datetime-quiet-input-width);
 
-			.spectrum-DatePicker-textfield:first-of-type {
-				inline-size: var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first));
+			&:first-of-type {
+				inline-size: var(--spectrum-datepicker-datetime-quiet-input-width-first);
 			}
 		}
 	}
@@ -261,62 +271,27 @@
 	.spectrum-DatePicker-textfield {
 		flex: initial;
 		min-inline-size: 0;
-		inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width));
+		inline-size: var(--spectrum-datepicker-input-width);
 
 		&:first-of-type {
-			inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first));
+			inline-size: var(--spectrum-datepicker-range-input-width-first);
 		}
 	}
 }
 
-.spectrum-DatePicker-input {
-	/* fill space */
-	flex: 1;
-	inline-size: 100%;
-
-	&.spectrum-DatePicker-startField {
-		border-inline-end: 0;
-		border-start-end-radius: 0;
-		border-end-end-radius: 0;
-		padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
-	}
-
-	&.spectrum-DatePicker-endField {
-		border-inline-start: 0;
-		border-start-start-radius: 0;
-		border-end-start-radius: 0;
-		padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
-	}
-}
-
-/* "-" between inputs */
-.spectrum-DatePicker-rangeDash {
-	color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-datepicker-dash-color)));
-	line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
-	padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top));
-	flex: initial;
-	inline-size: 0;
-	z-index: 1;
-
-	&::before {
-		content: "–";
-		display: inline-block;
-		margin-block: 0;
-		margin-inline: var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start));
-		overflow: hidden;
-		text-align: center;
-		vertical-align: middle;
-		inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size));
-	}
-}
-
 /********* WHCM *********/
 @media (forced-colors: active) {
 	.spectrum-DatePicker {
 		--highcontrast-datepicker-dash-color: CanvasText;
-		--highcontrast-datepicker-dash-color-disabled: GrayText;
 		--highcontrast-datepicker-focus-ring-color: Highlight;
 		--highcontrast-datepicker-pickerbutton-border-color: Highlight;
-		--highcontrast-datepicker-invalid-quiet-color: Highlight;
+
+		&.is-disabled {
+			--highcontrast-datepicker-dash-color: GrayText;
+		}
+
+		&.spectrum-DatePicker--quiet.is-invalid {
+			--highcontrast-datepicker-pickerbutton-border-color: Highlight;
+		}
 	}
 }
diff --git a/components/datepicker/metadata/mods.md b/components/datepicker/metadata/mods.md
deleted file mode 100644
index e92f2d8bad..0000000000
--- a/components/datepicker/metadata/mods.md
+++ /dev/null
@@ -1,36 +0,0 @@
-| Modifiable custom properties                         |
-| ---------------------------------------------------- |
-| `--mod-datepicker-border-color-disabled`             |
-| `--mod-datepicker-border-radius`                     |
-| `--mod-datepicker-border-radius-quiet`               |
-| `--mod-datepicker-dash-color`                        |
-| `--mod-datepicker-dash-color-disabled`               |
-| `--mod-datepicker-dash-font-size`                    |
-| `--mod-datepicker-dash-line-height`                  |
-| `--mod-datepicker-datetime-input-width`              |
-| `--mod-datepicker-datetime-input-width-first`        |
-| `--mod-datepicker-datetime-quiet-input-width`        |
-| `--mod-datepicker-datetime-quiet-input-width-first`  |
-| `--mod-datepicker-focus-animation`                   |
-| `--mod-datepicker-focus-line-gap`                    |
-| `--mod-datepicker-focus-ring-color`                  |
-| `--mod-datepicker-focus-ring-gap`                    |
-| `--mod-datepicker-focus-ring-width`                  |
-| `--mod-datepicker-focus-thickness`                   |
-| `--mod-datepicker-generic-padding`                   |
-| `--mod-datepicker-input-width`                       |
-| `--mod-datepicker-input-width-quiet`                 |
-| `--mod-datepicker-invalid-quiet-color`               |
-| `--mod-datepicker-min-width`                         |
-| `--mod-datepicker-padding-inline`                    |
-| `--mod-datepicker-padding-inline-end-invalid`        |
-| `--mod-datepicker-padding-inline-end-invalid-quiet`  |
-| `--mod-datepicker-padding-inline-end-quiet`          |
-| `--mod-datepicker-pickerbutton-border-color`         |
-| `--mod-datepicker-pickerbutton-border-color-invalid` |
-| `--mod-datepicker-quiet-border-color-hover`          |
-| `--mod-datepicker-quiet-button-offset`               |
-| `--mod-datepicker-range-dash-margin-left`            |
-| `--mod-datepicker-range-dash-padding-top`            |
-| `--mod-datepicker-range-input-width-first`           |
-| `--mod-datepicker-range-input-width-quiet-first`     |
diff --git a/components/datepicker/package.json b/components/datepicker/package.json
index eada82a9a6..25fd2c1a4b 100644
--- a/components/datepicker/package.json
+++ b/components/datepicker/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/datepicker/stories/datepicker.mdx b/components/datepicker/stories/datepicker.mdx
deleted file mode 100644
index e6fd0a9ca4..0000000000
--- a/components/datepicker/stories/datepicker.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
-import {
-  Canvas,
-  ArgTypes,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as DatePickerStories from "./datepicker.stories";
-
-<Meta of={DatePickerStories} title="Docs" />
-
-<Title of={DatePickerStories} />
-<Subtitle of={DatePickerStories} />
-<ComponentDetails />
-
-<Description of={DatePickerStories} />
-
-## Usage notes
-
-### General notes
-
-- Date picker uses `.spectrum-PickerButton` instead of a `.spectrum-Picker`.
-- Workflow icon size is medium. If your markup is still using the small icon, replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
-
-## Standard
-
-<Canvas of={DatePickerStories.Default} />
-
-## Quiet
-
-<Canvas of={DatePickerStories.Quiet} />
-
-## Range
-
-### Standard
-
-<Canvas of={DatePickerStories.Range} />
-
-### Quiet
-
-<Canvas of={DatePickerStories.QuietRange} />
-
-## Invalid
-
-### Standard
-
-<Canvas of={DatePickerStories.Invalid} />
-
-### Quiet
-
-<Canvas of={DatePickerStories.QuietInvalid} />
-
-## Read-only
-
-Read-only displays the same for standard and quiet variants.
-
-<Canvas of={DatePickerStories.ReadOnly} />
-
-## Disabled
-
-### Standard
-
-<Canvas of={DatePickerStories.Disabled} />
-
-### Quiet
-
-<Canvas of={DatePickerStories.QuietDisabled} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js
index bed5800f2c..0d40c56388 100644
--- a/components/datepicker/stories/datepicker.stories.js
+++ b/components/datepicker/stories/datepicker.stories.js
@@ -2,10 +2,10 @@ import { default as CalendarStories } from "@spectrum-css/calendar/stories/calen
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isInvalid, isOpen, isQuiet, isReadOnly, isRequired, isValid } from "@spectrum-css/preview/types";
 import { within } from "@storybook/test";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { DatePickerGroup } from "./datepicker.test.js";
-import { Template } from "./template.js";
+import { OpenClosedTemplate, Template } from "./template.js";
 
 /**
  * A date picker displays a text field input with a button next to it, and can display two text fields next to each other for choosing a date range.
@@ -29,7 +29,7 @@ export default {
 			if: { arg: "isInvalid", truthy: false },
 		},
 		isDateTimeRange: {
-			name: "Date and Time styling",
+			name: "Date and time styling",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
@@ -88,16 +88,31 @@ export default {
 
 export const Default = DatePickerGroup.bind({});
 Default.args = {};
-Default.parameters = {
+Default.tags = ["!autodocs"];
+
+// ********* DOCS ONLY ********* //
+/**
+ * Default styling for date pickers display a visible field button. This style works best in a dense array of controls where the field button helps separate the dropdown from its surroundings.
+ *
+ * The standard implementation for a date picker incorporates the display of a [calendar](/docs/components-calendar--docs) within a [popover component](/docs/components-popover--docs).
+ */
+export const DefaultGroup = OpenClosedTemplate.bind({});
+DefaultGroup.args = {};
+DefaultGroup.tags = [ "!dev"];
+DefaultGroup.storyName = "Default";
+DefaultGroup.parameters = {
 	docs: {
 		story: {
-			height: "300px"
+			height: "350px",
 		}
 	},
+	chromatic: { disableSnapshot: true },
 };
 
-// ********* DOCS ONLY ********* //
-export const Quiet = Template.bind({});
+/**
+ * The quiet style works best when a clear layout (vertical stack, table, grid) makes it easy to parse.
+ */
+export const Quiet = OpenClosedTemplate.bind({});
 Quiet.tags = ["!dev"];
 Quiet.args = {
 	isQuiet: true,
@@ -106,13 +121,15 @@ Quiet.parameters = {
 	chromatic: { disableSnapshot: true },
 	docs: {
 		story: {
-			height: "300px"
+			height: "350px",
 		}
 	},
 };
 
+/**
+ * Date pickers can be used to select a date range (a start date and an end date).
+ */
 export const Range = Template.bind({});
-Range.tags = ["!dev"];
 Range.args = {
 	lastDay: 3,
 	isRange: true,
@@ -133,7 +150,11 @@ QuietRange.args = {
 QuietRange.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+QuietRange.storyName = "Range, quiet";
 
+/**
+ * A date picker can be marked as having an error to show that a value needs to be entered in order to move forward, or that an entered value is invalid.
+ */
 export const Invalid = Template.bind({});
 Invalid.tags = ["!dev"];
 Invalid.args = {
@@ -154,6 +175,7 @@ QuietInvalid.args = {
 QuietInvalid.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+QuietInvalid.storyName = "Invalid, quiet";
 
 export const ReadOnly = Template.bind({});
 ReadOnly.tags = ["!dev"];
@@ -163,6 +185,7 @@ ReadOnly.args = {
 ReadOnly.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+ReadOnly.storyName = "Read-only";
 
 export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];
@@ -182,6 +205,7 @@ QuietDisabled.args = {
 QuietDisabled.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+QuietDisabled.storyName = "Disabled, quiet";
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = DatePickerGroup.bind({});
diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js
index 73311e7f02..2d56102d24 100644
--- a/components/datepicker/stories/template.js
+++ b/components/datepicker/stories/template.js
@@ -1,7 +1,7 @@
 import { Template as Calendar } from "@spectrum-css/calendar/stories/template.js";
 import { Template as PickerButton } from "@spectrum-css/pickerbutton/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
-import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
 import { html } from "lit";
 import { when } from "lit-html/directives/when.js";
@@ -9,6 +9,9 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const DatePicker = ({
 	rootClass = "spectrum-DatePicker",
@@ -27,6 +30,7 @@ export const DatePicker = ({
 	lastDay,
 } = {}, context = {}) => {
 	const { globals = {}, updateArgs } = context;
+
 	const lang = globals.lang ?? "en-US";
 
 	const triggerId = getRandomId("datepicker-trigger");
@@ -72,15 +76,16 @@ export const DatePicker = ({
 				size: "m",
 				isQuiet,
 				isDisabled,
-				isInvalid,
 				isReadOnly,
+				isInvalid,
 				customClasses: [`${rootClass}-textfield`],
 				customInputClasses: [`${rootClass}-input`, `${rootClass}-endField`],
 				placeholder: "Choose a date",
 				name: "field",
-				value: lastDay
-					? new Date(lastDay).toLocaleDateString(lang)
-					: undefined,
+				value: lastDay ? new Date(lastDay).toLocaleDateString(lang) : undefined,
+				onclick: function () {
+					if (!isOpen) updateArgs({ isOpen: true });
+				},
 			}, context))}
 			${PickerButton({
 				customClasses: [`${rootClass}-button`],
@@ -130,3 +135,22 @@ export const Template = ({
 		}, context)}
 	`;
 };
+
+
+/* Displays open and closed date pickers. */
+export const OpenClosedTemplate = (args, context) => Container({
+	withBorder: false,
+	wrapperStyles: { "column-gap": "56px", },
+	content: html`
+		${Container({
+			withBorder: false,
+			heading: "Open",
+			content: Template(args, context),
+		})}
+		${Container({
+			withBorder: false,
+			heading: "Closed",
+			content: Template({...args, isOpen: false}, context),
+		})}
+	`
+});
diff --git a/components/datepicker/themes/express.css b/components/datepicker/themes/express.css
index 6033d366e5..ead071e6f1 100644
--- a/components/datepicker/themes/express.css
+++ b/components/datepicker/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-DatePicker {
 		--spectrum-datepicker-initial-height: var(--spectrum-component-height-75);
 	}
diff --git a/components/datepicker/themes/spectrum-two.css b/components/datepicker/themes/spectrum-two.css
new file mode 100644
index 0000000000..05b3ca88ae
--- /dev/null
+++ b/components/datepicker/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-DatePicker {
+		--spectrum-datepicker-initial-height: var(--spectrum-component-height-100);
+	}
+}
diff --git a/components/datepicker/themes/spectrum.css b/components/datepicker/themes/spectrum.css
index c409dbd2e9..3d81bc564b 100644
--- a/components/datepicker/themes/spectrum.css
+++ b/components/datepicker/themes/spectrum.css
@@ -11,8 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-DatePicker {
-		--spectrum-datepicker-initial-height: var(--spectrum-component-height-100);
-	}
-}
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/dial/metadata/metadata.json b/components/dial/dist/metadata.json
similarity index 95%
rename from components/dial/metadata/metadata.json
rename to components/dial/dist/metadata.json
index 0b599b7609..29e38855d6 100644
--- a/components/dial/metadata/metadata.json
+++ b/components/dial/dist/metadata.json
@@ -4,7 +4,6 @@
     ".js-focus-within .spectrum-Dial-handle[focus-within]",
     ".js-focus-within .spectrum-Dial-handle[focus-within]:after",
     ".spectrum-Dial",
-    ".spectrum-Dial--small",
     ".spectrum-Dial-controls",
     ".spectrum-Dial-controls:after",
     ".spectrum-Dial-controls:before",
@@ -35,6 +34,7 @@
     ".spectrum-Dial.is-disabled .spectrum-Dial-handle:after",
     ".spectrum-Dial.is-disabled .spectrum-Dial-handle:before",
     ".spectrum-Dial.is-disabled .spectrum-Dial-labelContainer",
+    ".spectrum-Dial.spectrum-Dial--small",
     ".u-isGrabbing",
     ".u-isGrabbing .spectrum-Dial .spectrum-Dial-label",
     ".u-isGrabbing .spectrum-Dial .spectrum-Dial-value"
@@ -108,15 +108,18 @@
   "global": [
     "--spectrum-border-width-200",
     "--spectrum-font-size-75",
-    "--spectrum-gray-100",
+    "--spectrum-gray-25",
     "--spectrum-gray-400",
-    "--spectrum-gray-50",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
+    "--spectrum-gray-75",
     "--spectrum-gray-800",
     "--spectrum-line-height-200"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-dial-background-color-default",
+    "--system-dial-handle-marker-color-key-focus"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-dial-border-color",
diff --git a/components/dial/index.css b/components/dial/index.css
index 0cf0d588ea..8aee8cef36 100644
--- a/components/dial/index.css
+++ b/components/dial/index.css
@@ -11,17 +11,15 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-Dial {
-	--spectrum-dial-background-color-default: var(--spectrum-gray-100);
+@import "./themes/spectrum-two.css";
 
+.spectrum-Dial {
 	--spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
 	--spectrum-dial-border-color: var(--spectrum-gray-700);
 
 	--spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
 	--spectrum-dial-border-color-hover: var(--spectrum-gray-800);
 
-	--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
-
 	--spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
 
 	--spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
@@ -49,14 +47,12 @@
 	--spectrum-dial-handle-border-size: var(--spectrum-border-width-200);
 	--spectrum-dial-label-text-size: var(--spectrum-font-size-75);
 	--spectrum-dial-label-line-height: var(--spectrum-line-height-200);
-}
 
-.spectrum-Dial--small {
-	--spectrum-dial-width: 24px;
-	--spectrum-dial-height: 24px;
-}
+	&.spectrum-Dial--small {
+		--spectrum-dial-width: 24px;
+		--spectrum-dial-height: 24px;
+	}
 
-.spectrum-Dial {
 	position: relative;
 
 	/* Don't let z-index'd child elements float above other things on the page */
@@ -68,6 +64,30 @@
 	min-inline-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
 	min-block-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
 	inline-size: var(--mod-dial-container-width, var(--spectrum-dial-container-width));
+
+	&.is-disabled {
+		.spectrum-Dial-labelContainer {
+			color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled)));
+		}
+
+		.spectrum-Dial-controls {
+			&::after,
+			&::before {
+				background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
+			}
+		}
+
+		.spectrum-Dial-handle {
+			cursor: default;
+			border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
+			background: var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default));
+
+			&::after,
+			&::before {
+				background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
+			}
+		}
+	}
 }
 
 .spectrum-Dial-label {
@@ -245,32 +265,7 @@
 	}
 }
 
-.spectrum-Dial {
-	&.is-disabled {
-		.spectrum-Dial-labelContainer {
-			color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled)));
-		}
-
-		.spectrum-Dial-controls {
-			&::after,
-			&::before {
-				background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
-			}
-		}
-
-		.spectrum-Dial-handle {
-			cursor: default;
-			border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
-			background: var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default));
-
-			&::after,
-			&::before {
-				background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
-			}
-		}
-	}
-}
-
+/* @deprecated .u- prefixed states are a legacy implementation still supported */
 .u-isGrabbing {
 	cursor: ns-resize;
 	/* stylelint-disable-next-line -- required for webkit cursor grab/grabbing support */
diff --git a/components/dial/metadata/mods.md b/components/dial/metadata/mods.md
deleted file mode 100644
index 9eadc683d1..0000000000
--- a/components/dial/metadata/mods.md
+++ /dev/null
@@ -1,33 +0,0 @@
-| Modifiable custom properties                 |
-| -------------------------------------------- |
-| `--mod-dial-background-color-default`        |
-| `--mod-dial-border-color`                    |
-| `--mod-dial-border-color-hover`              |
-| `--mod-dial-border-radius`                   |
-| `--mod-dial-container-width`                 |
-| `--mod-dial-controls-margin`                 |
-| `--mod-dial-controls-min-height`             |
-| `--mod-dial-handle-block-margin`             |
-| `--mod-dial-handle-border-color-disabled`    |
-| `--mod-dial-handle-border-size`              |
-| `--mod-dial-handle-inline-margin`            |
-| `--mod-dial-handle-marker-border-radius`     |
-| `--mod-dial-handle-marker-color`             |
-| `--mod-dial-handle-marker-color-hover`       |
-| `--mod-dial-handle-marker-color-key-focus`   |
-| `--mod-dial-handle-marker-color-mouse-focus` |
-| `--mod-dial-handle-marker-height`            |
-| `--mod-dial-handle-marker-width`             |
-| `--mod-dial-handle-position`                 |
-| `--mod-dial-handle-size`                     |
-| `--mod-dial-height`                          |
-| `--mod-dial-label-container-top-to-text`     |
-| `--mod-dial-label-gap-y`                     |
-| `--mod-dial-label-line-height`               |
-| `--mod-dial-label-text-color`                |
-| `--mod-dial-label-text-color-disabled`       |
-| `--mod-dial-label-text-size`                 |
-| `--mod-dial-min-height`                      |
-| `--mod-dial-min-max-tick-angles`             |
-| `--mod-dial-min-max-tick-color`              |
-| `--mod-dial-width`                           |
diff --git a/components/dial/package.json b/components/dial/package.json
index 8a9408fe29..46fdc38efd 100644
--- a/components/dial/package.json
+++ b/components/dial/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js
index 723c93deb4..9e9970e234 100644
--- a/components/dial/stories/dial.stories.js
+++ b/components/dial/stories/dial.stories.js
@@ -1,6 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isDragged, isFocused, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { DialGroup } from "./dial.test.js";
 import { Template } from "./template.js";
diff --git a/components/dial/stories/template.js b/components/dial/stories/template.js
index 547fb97f66..c8f25c2175 100644
--- a/components/dial/stories/template.js
+++ b/components/dial/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Dial",
diff --git a/components/dial/themes/express.css b/components/dial/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/dial/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css
new file mode 100644
index 0000000000..410196c391
--- /dev/null
+++ b/components/dial/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Dial {
+		--spectrum-dial-background-color-default: var(--spectrum-gray-75);
+		--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25);
+	}
+}
diff --git a/components/dial/themes/spectrum.css b/components/dial/themes/spectrum.css
new file mode 100644
index 0000000000..24077607a8
--- /dev/null
+++ b/components/dial/themes/spectrum.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Dial {
+		--spectrum-dial-background-color-default: var(--spectrum-gray-100);
+		--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
+	}
+}
diff --git a/components/dialog/metadata/metadata.json b/components/dialog/dist/metadata.json
similarity index 84%
rename from components/dialog/metadata/metadata.json
rename to components/dialog/dist/metadata.json
index 44cd1a85b8..812542da22 100644
--- a/components/dialog/metadata/metadata.json
+++ b/components/dialog/dist/metadata.json
@@ -18,13 +18,10 @@
     ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer",
     ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading",
     ".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid",
-    ".spectrum-Dialog--large",
-    ".spectrum-Dialog--medium",
     ".spectrum-Dialog--noDivider .spectrum-Dialog-divider",
     ".spectrum-Dialog--noDivider .spectrum-Dialog-heading",
     ".spectrum-Dialog--sizeL",
     ".spectrum-Dialog--sizeS",
-    ".spectrum-Dialog--small",
     ".spectrum-Dialog-buttonGroup",
     ".spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter",
     ".spectrum-Dialog-closeButton",
@@ -66,34 +63,23 @@
     "--mod-dialog-confirm-title-text-size",
     "--mod-dialog-fullscreen-header-text-size",
     "--mod-dialog-heading-font-weight",
-    "--mod-dialog-min-inline-size"
+    "--mod-dialog-min-inline-size",
+    "--mod-dialog-width"
   ],
   "component": [
     "--spectrum-dialog-confirm-border-radius",
     "--spectrum-dialog-confirm-buttongroup-padding-top",
     "--spectrum-dialog-confirm-close-button-padding",
     "--spectrum-dialog-confirm-close-button-size",
-    "--spectrum-dialog-confirm-description-margin",
     "--spectrum-dialog-confirm-description-padding",
     "--spectrum-dialog-confirm-description-text-color",
-    "--spectrum-dialog-confirm-description-text-line-height",
     "--spectrum-dialog-confirm-description-text-size",
     "--spectrum-dialog-confirm-divider-block-spacing-end",
     "--spectrum-dialog-confirm-divider-block-spacing-start",
-    "--spectrum-dialog-confirm-divider-height",
-    "--spectrum-dialog-confirm-footer-padding-top",
     "--spectrum-dialog-confirm-gap-size",
     "--spectrum-dialog-confirm-hero-height",
-    "--spectrum-dialog-confirm-large-width",
-    "--spectrum-dialog-confirm-medium-width",
     "--spectrum-dialog-confirm-padding-grid",
-    "--spectrum-dialog-confirm-small-width",
-    "--spectrum-dialog-confirm-title-text-color",
-    "--spectrum-dialog-confirm-title-text-line-height",
-    "--spectrum-dialog-confirm-title-text-size",
-    "--spectrum-dialog-fullscreen-header-text-size",
-    "--spectrum-dialog-heading-font-weight",
-    "--spectrum-dialog-min-inline-size"
+    "--spectrum-dialog-confirm-title-text-size"
   ],
   "global": [
     "--spectrum-component-bottom-to-text-300",
diff --git a/components/dialog/index.css b/components/dialog/index.css
index 7c98cb0157..39ed5be57c 100644
--- a/components/dialog/index.css
+++ b/components/dialog/index.css
@@ -12,33 +12,15 @@
  */
 
 .spectrum-Dialog {
-	/* The font-size of the fullscreen dialog header */
-	--spectrum-dialog-fullscreen-header-text-size: 28px;
-	--spectrum-dialog-min-inline-size: 288px;
-	--spectrum-dialog-confirm-small-width: 400px;
-	--spectrum-dialog-confirm-medium-width: 480px;
-	--spectrum-dialog-confirm-large-width: 640px;
 	--spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
 	--spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
 	--spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800);
-	--spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900);
-	--spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100);
-	--spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100);
-	--spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-
 	--spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50);
-	--spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1);
-	--spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
 	--spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
 	--spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
 	--spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
 	--spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));
-	--spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50);
-}
 
-/* @deprecated .spectrum-Dialog--medium */
-.spectrum-Dialog,
-.spectrum-Dialog--medium {
 	/* Be a flexbox to allow a full sized content area that scrolls */
 	display: flex;
 
@@ -46,8 +28,8 @@
 	box-sizing: border-box;
 
 	/* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */
-	inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width));
-	min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size));
+	inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px));
+	min-inline-size: var(--mod-dialog-min-inline-size, 288px);
 	max-inline-size: 100%;
 
 	max-block-size: inherit;
@@ -55,16 +37,12 @@
 	outline: none;
 }
 
-/* @deprecated .spectrum-Dialog--small */
-.spectrum-Dialog--sizeS,
-.spectrum-Dialog--small {
-	inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width));
+.spectrum-Dialog--sizeS {
+	--mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px);
 }
 
-/* @deprecated .spectrum-Dialog--large */
-.spectrum-Dialog--sizeL,
-.spectrum-Dialog--large {
-	inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width));
+.spectrum-Dialog--sizeL {
+	--mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px);
 }
 
 .spectrum-Dialog-hero {
@@ -84,7 +62,6 @@
 	grid-template-columns:
 		var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
 		var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-	grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
 	grid-template-areas:
 		"hero hero    hero    hero        hero        hero"
 		".    .       .       .           .           ."
@@ -93,6 +70,7 @@
 		".    content content content     content     ."
 		".    footer  footer  buttonGroup buttonGroup ."
 		".    .       .       .           .           .";
+	grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
 	inline-size: 100%;
 }
 
@@ -102,9 +80,9 @@
 	margin: 0;
 
 	font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size));
-	font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight));
-	line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height));
-	color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color));
+	font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight));
+	line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100));
+	color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900));
 	outline: none; /* Hide focus outline */
 
 	padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size));
@@ -146,7 +124,7 @@
 	}
 
 	.spectrum-Dialog-heading {
-		padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-dialog-confirm-divider-height)));
+		padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50)));
 	}
 }
 
@@ -165,19 +143,19 @@
 
 	font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size));
 	font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight));
-	line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height));
+	line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100));
 	color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));
 
 	/* this is kinda dumb,  but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */
 	padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2);
-	margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin));
+	margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1));
 }
 
 .spectrum-Dialog-footer {
 	grid-area: footer;
 
 	/* this padding isn't built into the grid because it disappears with this footer */
-	padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top));
+	padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600));
 
 	display: flex;
 	flex-wrap: wrap;
@@ -211,7 +189,6 @@
 	grid-template-columns:
 		var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
 		minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-	grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
 	grid-template-areas:
 		"hero hero    hero    hero        hero        hero        hero"
 		".    .       .       .           .           closeButton closeButton"
@@ -220,6 +197,7 @@
 		".    content content content     content     content     ."
 		".    footer  footer  buttonGroup buttonGroup buttonGroup ."
 		".    .       .       .           .           .           .";
+	grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
 
 	.spectrum-Dialog-buttonGroup {
 		display: none;
@@ -272,7 +250,7 @@
 	}
 
 	.spectrum-Dialog-heading {
-		font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size));
+		font-size: var(--mod-dialog-fullscreen-header-text-size, 28px);
 	}
 
 	.spectrum-Dialog-content {
diff --git a/components/dialog/metadata/mods.md b/components/dialog/metadata/mods.md
deleted file mode 100644
index 2be49da8f6..0000000000
--- a/components/dialog/metadata/mods.md
+++ /dev/null
@@ -1,28 +0,0 @@
-| Modifiable custom properties                        |
-| --------------------------------------------------- |
-| `--mod-dialog-confirm-border-radius`                |
-| `--mod-dialog-confirm-buttongroup-padding-top`      |
-| `--mod-dialog-confirm-close-button-padding`         |
-| `--mod-dialog-confirm-close-button-size`            |
-| `--mod-dialog-confirm-description-font-weight`      |
-| `--mod-dialog-confirm-description-margin`           |
-| `--mod-dialog-confirm-description-padding`          |
-| `--mod-dialog-confirm-description-text-color`       |
-| `--mod-dialog-confirm-description-text-line-height` |
-| `--mod-dialog-confirm-description-text-size`        |
-| `--mod-dialog-confirm-divider-block-spacing-end`    |
-| `--mod-dialog-confirm-divider-block-spacing-start`  |
-| `--mod-dialog-confirm-divider-height`               |
-| `--mod-dialog-confirm-footer-padding-top`           |
-| `--mod-dialog-confirm-gap-size`                     |
-| `--mod-dialog-confirm-hero-height`                  |
-| `--mod-dialog-confirm-large-width`                  |
-| `--mod-dialog-confirm-medium-width`                 |
-| `--mod-dialog-confirm-padding-grid`                 |
-| `--mod-dialog-confirm-small-width`                  |
-| `--mod-dialog-confirm-title-text-color`             |
-| `--mod-dialog-confirm-title-text-line-height`       |
-| `--mod-dialog-confirm-title-text-size`              |
-| `--mod-dialog-fullscreen-header-text-size`          |
-| `--mod-dialog-heading-font-weight`                  |
-| `--mod-dialog-min-inline-size`                      |
diff --git a/components/dialog/package.json b/components/dialog/package.json
index 1b043ad007..8ae43f01f3 100644
--- a/components/dialog/package.json
+++ b/components/dialog/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
index 3e40c84888..45bec9bc1d 100644
--- a/components/dialog/stories/dialog.stories.js
+++ b/components/dialog/stories/dialog.stories.js
@@ -1,8 +1,8 @@
 import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isOpen } from "@spectrum-css/preview/types";
+import { isOpen, size } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js";
 import { Template } from "./template.js";
@@ -36,16 +36,7 @@ export default {
 			control: "boolean",
 		},
 		footer: { table: { disable: true } },
-		size: {
-			name: "Size",
-			type: { name: "string", required: true },
-			table: {
-				type: { summary: "string" },
-				category: "Component",
-			},
-			options: ["small", "medium", "large"],
-			control: "select",
-		},
+		size: size(["s", "m", "l"]),
 		layout: {
 			name: "Layout",
 			type: { name: "string" },
@@ -106,7 +97,7 @@ export default {
 		hasDivider: true,
 		isOpen: true,
 		showModal: true,
-		size: "medium",
+		size: "m",
 		layout: "default",
 	},
 	parameters: {
@@ -120,6 +111,10 @@ export default {
 				height: "500px",
 			},
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=839-1128",
+		},
 		packageJson,
 		metadata,
 	},
@@ -155,7 +150,7 @@ DefaultSmall.parameters = {
 };
 DefaultSmall.args = {
 	...Default.args,
-	size: "small",
+	size: "s",
 };
 
 export const DefaultLarge = Template.bind({});
@@ -166,7 +161,7 @@ DefaultLarge.parameters = {
 };
 DefaultLarge.args = {
 	...Default.args,
-	size: "large",
+	size: "l",
 };
 
 /**
@@ -237,6 +232,10 @@ WithScroll.parameters = {
 export const Fullscreen = DialogFullscreen.bind({});
 Fullscreen.parameters = {
 	chromatic: { disableSnapshot: true },
+	design: {
+		type: "figma",
+		url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399",
+	},
 };
 Fullscreen.args = {
 	...Default.args,
@@ -249,6 +248,10 @@ Fullscreen.args = {
 export const FullscreenTakeover = DialogFullscreenTakeover.bind({});
 FullscreenTakeover.parameters = {
 	chromatic: { disableSnapshot: true },
+	design: {
+		type: "figma",
+		url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399",
+	},
 };
 FullscreenTakeover.args = {
 	...Default.args,
diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js
index 860bd6b630..86d2af5d05 100644
--- a/components/dialog/stories/template.js
+++ b/components/dialog/stories/template.js
@@ -23,13 +23,16 @@ export const Template = ({
 	footer = [],
 	customClasses = [],
 	id = getRandomId("dialog"),
-	size = "medium",
+	size = "m",
 	layout,
 	heroImageUrl,
 	customStyles = {},
 } = {}, context = {}) => {
 	const { updateArgs } = context;
-	const toggleOpen = () => updateArgs({ isOpen: !isOpen });
+
+	const toggleOpen = function () {
+		updateArgs({ isOpen: !isOpen });
+	};
 
 	const Dialog = html`
 		<div
@@ -37,7 +40,7 @@ export const Template = ({
 				[rootClass]: true,
 				[`${rootClass}--dismissable`]: isDismissible && ["fullscreen", "fullscreenTakeover"].every(l => layout !== l),
 				[`${rootClass}--${layout}`]: typeof layout !== "undefined",
-				[`${rootClass}--${size}`]: typeof size !== "undefined", 
+				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
 				[`${rootClass}--noDivider`]: !hasDivider,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
@@ -50,7 +53,7 @@ export const Template = ({
 			<div class="${rootClass}-grid">
 				${when(typeof heroImageUrl !== "undefined", () =>
 					html`
-						<div 
+						<div
 							class="spectrum-Dialog-hero"
 							style="background-image:url(${heroImageUrl})">
 						</div>
@@ -119,4 +122,3 @@ export const Template = ({
 		return Dialog;
 	}
 };
-
diff --git a/components/divider/metadata/metadata.json b/components/divider/dist/metadata.json
similarity index 61%
rename from components/divider/metadata/metadata.json
rename to components/divider/dist/metadata.json
index 2c200f1bbf..a485bf25e3 100644
--- a/components/divider/metadata/metadata.json
+++ b/components/divider/dist/metadata.json
@@ -3,13 +3,12 @@
   "selectors": [
     ".spectrum-Divider",
     ".spectrum-Divider--sizeL",
-    ".spectrum-Divider--sizeM",
     ".spectrum-Divider--sizeS",
+    ".spectrum-Divider--staticBlack",
     ".spectrum-Divider--staticBlack.spectrum-Divider--sizeL",
-    ".spectrum-Divider--staticBlack.spectrum-Divider--sizeM",
     ".spectrum-Divider--staticBlack.spectrum-Divider--sizeS",
+    ".spectrum-Divider--staticWhite",
     ".spectrum-Divider--staticWhite.spectrum-Divider--sizeL",
-    ".spectrum-Divider--staticWhite.spectrum-Divider--sizeM",
     ".spectrum-Divider--staticWhite.spectrum-Divider--sizeS",
     ".spectrum-Divider--vertical"
   ],
@@ -28,29 +27,26 @@
   ],
   "component": [
     "--spectrum-divider-background-color",
-    "--spectrum-divider-background-color-large",
-    "--spectrum-divider-background-color-large-static-black",
-    "--spectrum-divider-background-color-large-static-white",
-    "--spectrum-divider-background-color-medium",
-    "--spectrum-divider-background-color-medium-static-black",
-    "--spectrum-divider-background-color-medium-static-white",
-    "--spectrum-divider-background-color-small",
-    "--spectrum-divider-background-color-small-static-black",
-    "--spectrum-divider-background-color-small-static-white",
+    "--spectrum-divider-background-color-static-black",
+    "--spectrum-divider-background-color-static-white",
     "--spectrum-divider-thickness",
     "--spectrum-divider-thickness-large",
     "--spectrum-divider-thickness-medium",
     "--spectrum-divider-thickness-small"
   ],
   "global": [
-    "--spectrum-gray-300",
+    "--spectrum-gray-200",
     "--spectrum-gray-800",
-    "--spectrum-transparent-black-300",
+    "--spectrum-transparent-black-200",
     "--spectrum-transparent-black-800",
-    "--spectrum-transparent-white-300",
+    "--spectrum-transparent-white-200",
     "--spectrum-transparent-white-800"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-divider-background-color",
+    "--system-divider-background-color-static-black",
+    "--system-divider-background-color-static-white"
+  ],
   "passthroughs": [],
-  "high-contrast": []
+  "high-contrast": ["--highcontrast-divider-background-color"]
 }
diff --git a/components/divider/index.css b/components/divider/index.css
index ea5859e45b..188aeea7ec 100644
--- a/components/divider/index.css
+++ b/components/divider/index.css
@@ -11,111 +11,79 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-Divider {
-	/* default thickness no size */
-	--spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
-
-	/* default background color no size */
-	--spectrum-divider-background-color: var(--spectrum-divider-background-color-medium);
-
-	/* background colors */
-	--spectrum-divider-background-color-small: var(--spectrum-gray-300);
-	--spectrum-divider-background-color-medium: var(--spectrum-gray-300);
-	--spectrum-divider-background-color-large: var(--spectrum-gray-800);
+@import "./themes/spectrum-two.css";
 
-	/* static white background colors */
-	--spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-300);
-	--spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300);
-	--spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-800);
+/* windows high contrast mode */
+@media (forced-colors: active) {
+	.spectrum-Divider {
+		--highcontrast-divider-background-color: CanvasText;
+	}
+}
 
-	/* static black background colors */
-	--spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-300);
-	--spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300);
-	--spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-800);
+.spectrum-Divider {
+	--spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
 }
 
-/* small divider */
 .spectrum-Divider--sizeS {
 	--spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
-	--spectrum-divider-background-color: var(--spectrum-divider-background-color-small);
 }
 
-/* medium divider */
-.spectrum-Divider--sizeM {
-	--spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
-	--spectrum-divider-background-color: var(--spectrum-divider-background-color-medium);
-}
-
-/* large divider */
 .spectrum-Divider--sizeL {
 	--spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
-	--spectrum-divider-background-color: var(--spectrum-divider-background-color-large);
-}
-
-/* windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-Divider,
-	.spectrum-Divider--sizeS,
-	.spectrum-Divider--sizeM,
-	.spectrum-Divider--sizeL {
-		--spectrum-divider-background-color: CanvasText;
-		--spectrum-divider-background-color-small-static-white: CanvasText;
-		--spectrum-divider-background-color-medium-static-white: CanvasText;
-		--spectrum-divider-background-color-large-static-white: CanvasText;
-		--spectrum-divider-background-color-small-static-black: CanvasText;
-		--spectrum-divider-background-color-medium-static-black: CanvasText;
-		--spectrum-divider-background-color-large-static-black: CanvasText;
-	}
-}
-
-.spectrum-Divider {
-	block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
-	inline-size: 100%;
-
-	/* Show the overflow for hr in Edge and IE. */
-	overflow: visible;
-
-	border: none;
-	border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
-	border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
-
-	background-color: var(--mod-divider-background-color, var(--spectrum-divider-background-color));
+	--spectrum-divider-background-color: var(--spectrum-gray-800);
 }
 
 /* static white variant colors */
 .spectrum-Divider--staticWhite {
-	&.spectrum-Divider--sizeS {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white));
-	}
+	/** @deprecated --mod-divider-background-color-medium-static-white, use --mod-divider-background-color instead */
+	--mod-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-static-white));
 
-	&.spectrum-Divider--sizeM {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white));
+	&.spectrum-Divider--sizeS {
+		/** @deprecated --mod-divider-background-color-small-static-white, use --mod-divider-background-color instead */
+		--mod-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-static-white));
 	}
 
 	&.spectrum-Divider--sizeL {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white));
+		/** @deprecated --mod-divider-background-color-large-static-white, use --mod-divider-background-color instead */
+		--mod-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-transparent-white-800));
 	}
 }
 
 /* static black variant colors */
 .spectrum-Divider--staticBlack {
-	&.spectrum-Divider--sizeS {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black));
-	}
+	/** @deprecated --mod-divider-background-color-medium-static-black, use --mod-divider-background-color instead */
+	--mod-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-static-black));
 
-	&.spectrum-Divider--sizeM {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black));
+	&.spectrum-Divider--sizeS {
+		/** @deprecated --mod-divider-background-color-small-static-black, use --mod-divider-background-color instead */
+		--mod-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-static-black));
 	}
 
 	&.spectrum-Divider--sizeL {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black));
+		/** @deprecated --mod-divider-background-color-large-static-black, use --mod-divider-background-color instead */
+		--mod-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-transparent-black-800));
 	}
 }
 
+.spectrum-Divider {
+	block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
+	inline-size: 100%;
+
+	/* Show the overflow for hr in Edge and IE. */
+	overflow: visible;
+
+	border: none;
+	border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
+	border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
+
+	background-color: var(--highcontrast-divider-background-color, var(--mod-divider-background-color, var(--spectrum-divider-background-color)));
+}
+
 /* vertical dividers */
 .spectrum-Divider--vertical {
 	inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
-	margin-block: var(--mod-divider-vertical-margin);
 	block-size: var(--mod-divider-vertical-height, 100%);
+
+	margin-block: var(--mod-divider-vertical-margin);
 	align-self: var(--mod-divider-vertical-align);
 }
diff --git a/components/divider/metadata/mods.md b/components/divider/metadata/mods.md
deleted file mode 100644
index f628f3bf22..0000000000
--- a/components/divider/metadata/mods.md
+++ /dev/null
@@ -1,13 +0,0 @@
-| Modifiable custom properties                         |
-| ---------------------------------------------------- |
-| `--mod-divider-background-color`                     |
-| `--mod-divider-background-color-large-static-black`  |
-| `--mod-divider-background-color-large-static-white`  |
-| `--mod-divider-background-color-medium-static-black` |
-| `--mod-divider-background-color-medium-static-white` |
-| `--mod-divider-background-color-small-static-black`  |
-| `--mod-divider-background-color-small-static-white`  |
-| `--mod-divider-thickness`                            |
-| `--mod-divider-vertical-align`                       |
-| `--mod-divider-vertical-height`                      |
-| `--mod-divider-vertical-margin`                      |
diff --git a/components/divider/package.json b/components/divider/package.json
index 9c4c8911a3..2ca9774a30 100644
--- a/components/divider/package.json
+++ b/components/divider/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js
index 45eb6b925c..306e5c0c45 100644
--- a/components/divider/stories/divider.stories.js
+++ b/components/divider/stories/divider.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { DividerGroup } from "./divider.test.js";
 import { Template } from "./template.js";
@@ -34,6 +34,10 @@ export default {
 		minDimensionValues: true,
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13642-334",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js
index cd3d9bc1a6..ac2ffa2a4c 100644
--- a/components/divider/stories/template.js
+++ b/components/divider/stories/template.js
@@ -4,6 +4,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { capitalize, upperCase } from "lodash-es";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Divider",
diff --git a/components/divider/themes/express.css b/components/divider/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/divider/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/divider/themes/spectrum-two.css b/components/divider/themes/spectrum-two.css
new file mode 100644
index 0000000000..58f8de9a76
--- /dev/null
+++ b/components/divider/themes/spectrum-two.css
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Divider {
+		/* background colors */
+		--spectrum-divider-background-color: var(--spectrum-gray-200);
+
+		/* static white background colors */
+		--spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200);
+
+		/* static black background colors */
+		--spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200);
+	}
+}
diff --git a/components/divider/themes/spectrum.css b/components/divider/themes/spectrum.css
new file mode 100644
index 0000000000..ecfe3f3a46
--- /dev/null
+++ b/components/divider/themes/spectrum.css
@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Divider {
+		/* background colors */
+		--spectrum-divider-background-color: var(--spectrum-gray-300);
+
+		/* static white background colors */
+		--spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-300);
+
+		/* static black background colors */
+		--spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-300);
+	}
+}
diff --git a/components/dropindicator/metadata/metadata.json b/components/dropindicator/dist/metadata.json
similarity index 91%
rename from components/dropindicator/metadata/metadata.json
rename to components/dropindicator/dist/metadata.json
index e8c125fbcd..dd3a7a5081 100644
--- a/components/dropindicator/metadata/metadata.json
+++ b/components/dropindicator/dist/metadata.json
@@ -18,9 +18,7 @@
     "--mod-dropindicator-circle-size"
   ],
   "component": [
-    "--spectrum-dropindicator-border-color",
     "--spectrum-dropindicator-border-size",
-    "--spectrum-dropindicator-circle-color",
     "--spectrum-dropindicator-circle-size",
     "--spectrum-dropindicator-color"
   ],
diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css
index 84bff4ead1..c603c785e0 100644
--- a/components/dropindicator/index.css
+++ b/components/dropindicator/index.css
@@ -18,15 +18,11 @@
 }
 
 .spectrum-DropIndicator {
-	--spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color);
-	--spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color);
 	--spectrum-dropindicator-border-size: var(--spectrum-border-width-200);
 	--spectrum-dropindicator-circle-size: 12px;
-}
 
-.spectrum-DropIndicator {
 	position: relative;
-	background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color)));
+	background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-color)));
 
 	&::before,
 	&::after {
@@ -37,7 +33,7 @@
 		border-radius: 50%;
 		border: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) solid;
 		box-sizing: border-box;
-		border-color: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-circle-color)));
+		border-color: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color)));
 	}
 }
 
diff --git a/components/dropindicator/metadata/mods.md b/components/dropindicator/metadata/mods.md
deleted file mode 100644
index aff260beac..0000000000
--- a/components/dropindicator/metadata/mods.md
+++ /dev/null
@@ -1,6 +0,0 @@
-| Modifiable custom properties       |
-| ---------------------------------- |
-| `--mod-dropindicator-border-color` |
-| `--mod-dropindicator-border-size`  |
-| `--mod-dropindicator-circle-color` |
-| `--mod-dropindicator-circle-size`  |
diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json
index 13d745691b..0def8c9011 100644
--- a/components/dropindicator/package.json
+++ b/components/dropindicator/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/dropindicator/stories/dropindicator.stories.js b/components/dropindicator/stories/dropindicator.stories.js
index 19153fa24d..ea28cb3b5f 100644
--- a/components/dropindicator/stories/dropindicator.stories.js
+++ b/components/dropindicator/stories/dropindicator.stories.js
@@ -1,5 +1,5 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { DropIndicatorGroup } from "./dropindicator.test.js";
 import { DocsDropIndicatorGroup } from "./template.js";
diff --git a/components/dropzone/metadata/metadata.json b/components/dropzone/dist/metadata.json
similarity index 78%
rename from components/dropzone/metadata/metadata.json
rename to components/dropzone/dist/metadata.json
index a3bbc3e93e..3044ecfc90 100644
--- a/components/dropzone/metadata/metadata.json
+++ b/components/dropzone/dist/metadata.json
@@ -27,7 +27,6 @@
     "--mod-drop-zone-border-color",
     "--mod-drop-zone-border-color-hover",
     "--mod-drop-zone-border-style",
-    "--mod-drop-zone-border-style--dragged",
     "--mod-drop-zone-border-style-dragged",
     "--mod-drop-zone-border-width",
     "--mod-drop-zone-content-background-color",
@@ -63,42 +62,14 @@
     "--spectrum-drop-zone-background-color-opacity",
     "--spectrum-drop-zone-background-color-opacity-filled",
     "--spectrum-drop-zone-background-color-rgb",
-    "--spectrum-drop-zone-body-color",
-    "--spectrum-drop-zone-body-font-family",
-    "--spectrum-drop-zone-body-font-size",
-    "--spectrum-drop-zone-body-font-style",
-    "--spectrum-drop-zone-body-font-weight",
-    "--spectrum-drop-zone-body-line-height",
     "--spectrum-drop-zone-body-size",
     "--spectrum-drop-zone-border-color",
     "--spectrum-drop-zone-border-color-hover",
     "--spectrum-drop-zone-border-width",
     "--spectrum-drop-zone-cjk-title-size",
     "--spectrum-drop-zone-content-background-color",
-    "--spectrum-drop-zone-content-bottom-to-text",
-    "--spectrum-drop-zone-content-color",
-    "--spectrum-drop-zone-content-edge-to-text",
-    "--spectrum-drop-zone-content-font-family",
-    "--spectrum-drop-zone-content-font-size",
-    "--spectrum-drop-zone-content-font-style",
-    "--spectrum-drop-zone-content-font-weight",
-    "--spectrum-drop-zone-content-height",
-    "--spectrum-drop-zone-content-line-height",
-    "--spectrum-drop-zone-content-max-width",
     "--spectrum-drop-zone-content-maximum-width",
-    "--spectrum-drop-zone-content-top-to-text",
-    "--spectrum-drop-zone-corner-radius",
-    "--spectrum-drop-zone-heading-color",
-    "--spectrum-drop-zone-heading-font-family",
-    "--spectrum-drop-zone-heading-font-size",
-    "--spectrum-drop-zone-heading-font-style",
-    "--spectrum-drop-zone-heading-font-weight",
-    "--spectrum-drop-zone-heading-line-height",
-    "--spectrum-drop-zone-heading-to-body",
     "--spectrum-drop-zone-illustration-color",
-    "--spectrum-drop-zone-illustration-color-hover",
-    "--spectrum-drop-zone-illustration-to-heading",
-    "--spectrum-drop-zone-padding",
     "--spectrum-drop-zone-title-size",
     "--spectrum-drop-zone-width"
   ],
@@ -117,7 +88,7 @@
     "--spectrum-corner-radius-100",
     "--spectrum-default-font-style",
     "--spectrum-font-size-300",
-    "--spectrum-gray-300",
+    "--spectrum-gray-200",
     "--spectrum-heading-color",
     "--spectrum-heading-line-height",
     "--spectrum-heading-sans-serif-font-style",
@@ -129,7 +100,7 @@
     "--spectrum-spacing-75",
     "--spectrum-white"
   ],
-  "system-theme": [],
+  "system-theme": ["--system-drop-zone-border-color"],
   "passthroughs": [
     "--mod-actionbutton-edge-to-text",
     "--mod-actionbutton-font-size",
diff --git a/components/dropzone/index.css b/components/dropzone/index.css
index 4b1f2ea591..2b3fbefe0c 100644
--- a/components/dropzone/index.css
+++ b/components/dropzone/index.css
@@ -11,113 +11,75 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-DropZone {
-	--spectrum-drop-zone-padding: var(--spectrum-spacing-400);
-	--spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400);
-	--spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75);
+@import "./themes/spectrum-two.css";
 
+.spectrum-DropZone {
 	--spectrum-drop-zone-border-width: var(--spectrum-border-width-200);
-	--spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100);
-	--spectrum-drop-zone-border-color: var(--spectrum-gray-300);
-
-	--spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-	--spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
-	--spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size);
-	--spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height);
-	--spectrum-drop-zone-heading-color: var(--spectrum-heading-color);
-
-	--spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
-	--spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style);
-	--spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size);
-	--spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height);
-	--spectrum-drop-zone-body-color: var(--spectrum-body-color);
-
 	--spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb);
 	--spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color);
 	--spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color);
-	--spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color);
-
-	/* Filled styles */
-	--spectrum-drop-zone-content-height: var(--spectrum-component-height-300);
-	--spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width);
-	--spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300);
-	--spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300);
-	--spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
-
-	--spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style);
-	--spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300);
-	--spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100);
-
 	--spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color);
-	--spectrum-drop-zone-content-color: var(--spectrum-white);
 
-	/* @passthrough start -- settings for a nested illustrated message */
+	/* @passthrough start -- IllustratedMessage -- settings for a nested illustrated message */
 	--mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width));
 	--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color));
-	--mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading));
-	--mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body));
-	--mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family));
-	--mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight));
-	--mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style));
-	--mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size));
-	--mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height));
-	--mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color));
+	--mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-spacing-400));
+	--mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-spacing-75));
+	--mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-sans-font-family-stack));
+	--mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight));
+	--mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-heading-sans-serif-font-style));
+	--mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-title-size));
+	--mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-heading-line-height));
+	--mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-heading-color));
 	--mod-illustrated-message-description-position: relative;
 	--mod-illustrated-message-description-z-index: 10;
 	--mod-illustrated-message-heading-to-description: 0;
-	--mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family));
-	--mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight));
-	--mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style));
-	--mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size));
-	--mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height));
-	--mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color));
+	--mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-sans-font-family-stack));
+	--mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-body-sans-serif-font-weight));
+	--mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-body-sans-serif-font-style));
+	--mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-size));
+	--mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-body-line-height));
+	--mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-body-color));
 	/* @passthrough end */
 
-	/* @passthrough start -- settings for a nested actionbutton */
-	--mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size));
-	--mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color));
-	--mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text));
+	/* @passthrough start -- ActionButton settings for a nested actionbutton */
+	--mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-font-size-300));
+	--mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-white));
+	--mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-component-edge-to-text-300));
 	/* @passthrough end */
 
-	/* cjk language support */
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-cjk-title-size);
-	}
-}
-
-.spectrum-DropZone {
 	box-sizing: border-box;
 	inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width));
-	padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)));
+	padding: calc(var(--mod-drop-zone-padding, var(--spectrum-spacing-400)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)));
 	text-align: center;
 	border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color));
 	border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width));
-	border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius));
+	border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-corner-radius-100));
 	border-style: var(--mod-drop-zone-border-style, dashed);
-	background-size: cover;
 	background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color));
+	background-size: cover;
+
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		/* @passthrough -- updated value for cjk font size */
+		--mod-illustrated-message-title-font-size: var(--spectrum-drop-zone-cjk-title-size);
+	}
 
 	&.is-dragged {
-		/* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */
-		--mod-drop-zone-border-style: var(--mod-drop-zone-border-style--dragged, var(--mod-drop-zone-border-style-dragged, solid));
+		--mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid);
 		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity)));
-		--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
+		--mod-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
 
-		/* Updated values for a nested illustrated message when state changes */
-		--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover));
+		/* @passthrough -- Updated values for a nested illustrated message when state changes */
+		--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-accent-visual-color));
 	}
 
 	&.is-filled {
 		/* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */
 		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
 
-		/* Updated values for a nested illustrated message when state changes */
+		/* @passthrough -- Updated values for a nested illustrated message when state changes */
 		--mod-illustrated-message-display: none;
 	}
 
@@ -127,7 +89,8 @@
 
 	&:focus-visible {
 		--mod-drop-zone-border-style: solid;
-		--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
+		--mod-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
+
 		outline: 0;
 	}
 }
@@ -144,16 +107,16 @@
 .spectrum-DropZone-button {
 	box-sizing: border-box;
 	border: none;
-	block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height));
-	max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width));
-	padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text));
-	padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text));
+	block-size: var(--mod-drop-zone-content-height, var(--spectrum-component-height-300));
+	max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-maximum-width));
+	padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-component-top-to-text-300));
+	padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-component-bottom-to-text-300));
 	background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color));
 
-	font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family));
-	font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight));
-	font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-drop-zone-content-font-style));
-	line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-drop-zone-content-line-height));
+	font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-sans-font-family-stack));
+	font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-bold-font-weight));
+	font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-default-font-style));
+	line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-line-height-100));
 
 	&:hover,
 	&:focus {
diff --git a/components/dropzone/metadata/mods.md b/components/dropzone/metadata/mods.md
deleted file mode 100644
index da00c42f33..0000000000
--- a/components/dropzone/metadata/mods.md
+++ /dev/null
@@ -1,44 +0,0 @@
-| Modifiable custom properties                      |
-| ------------------------------------------------- |
-| `--mod-drop-zone-background-color`                |
-| `--mod-drop-zone-background-color-opacity`        |
-| `--mod-drop-zone-background-color-opacity-filled` |
-| `--mod-drop-zone-body-color`                      |
-| `--mod-drop-zone-body-font-family`                |
-| `--mod-drop-zone-body-font-size`                  |
-| `--mod-drop-zone-body-font-style`                 |
-| `--mod-drop-zone-body-font-weight`                |
-| `--mod-drop-zone-body-line-height`                |
-| `--mod-drop-zone-border-color`                    |
-| `--mod-drop-zone-border-color-hover`              |
-| `--mod-drop-zone-border-style`                    |
-| `--mod-drop-zone-border-style--dragged`           |
-| `--mod-drop-zone-border-style-dragged`            |
-| `--mod-drop-zone-border-width`                    |
-| `--mod-drop-zone-content-background-color`        |
-| `--mod-drop-zone-content-bottom-to-text`          |
-| `--mod-drop-zone-content-color`                   |
-| `--mod-drop-zone-content-display`                 |
-| `--mod-drop-zone-content-edge-to-text`            |
-| `--mod-drop-zone-content-font-family`             |
-| `--mod-drop-zone-content-font-size`               |
-| `--mod-drop-zone-content-font-style`              |
-| `--mod-drop-zone-content-font-weight`             |
-| `--mod-drop-zone-content-height`                  |
-| `--mod-drop-zone-content-line-height`             |
-| `--mod-drop-zone-content-max-width`               |
-| `--mod-drop-zone-content-maximum-width`           |
-| `--mod-drop-zone-content-top-to-text`             |
-| `--mod-drop-zone-corner-radius`                   |
-| `--mod-drop-zone-heading-color`                   |
-| `--mod-drop-zone-heading-font-family`             |
-| `--mod-drop-zone-heading-font-size`               |
-| `--mod-drop-zone-heading-font-style`              |
-| `--mod-drop-zone-heading-font-weight`             |
-| `--mod-drop-zone-heading-line-height`             |
-| `--mod-drop-zone-heading-to-body`                 |
-| `--mod-drop-zone-illustration-color`              |
-| `--mod-drop-zone-illustration-color-hover`        |
-| `--mod-drop-zone-illustration-to-heading`         |
-| `--mod-drop-zone-padding`                         |
-| `--mod-drop-zone-width`                           |
diff --git a/components/dropzone/package.json b/components/dropzone/package.json
index da6bdf901b..fa505eebb2 100644
--- a/components/dropzone/package.json
+++ b/components/dropzone/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js
index 7bd644a096..9d0d7e4c3d 100644
--- a/components/dropzone/stories/dropzone.stories.js
+++ b/components/dropzone/stories/dropzone.stories.js
@@ -4,7 +4,7 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDragged } from "@spectrum-css/preview/types";
 import { html } from "lit";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { DropzoneGroup } from "./dropzone.test.js";
 
@@ -35,6 +35,10 @@ export default {
 		isFilled: false,
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13049-185",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js
index 3363790ecc..9eb2dfface 100644
--- a/components/dropzone/stories/template.js
+++ b/components/dropzone/stories/template.js
@@ -7,6 +7,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-DropZone",
diff --git a/components/dropzone/themes/express.css b/components/dropzone/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/dropzone/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/dropzone/themes/spectrum-two.css b/components/dropzone/themes/spectrum-two.css
new file mode 100644
index 0000000000..cf71b766c3
--- /dev/null
+++ b/components/dropzone/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-DropZone {
+		--spectrum-drop-zone-border-color: var(--spectrum-gray-200);
+	}
+}
diff --git a/components/dropzone/themes/spectrum.css b/components/dropzone/themes/spectrum.css
new file mode 100644
index 0000000000..0760508568
--- /dev/null
+++ b/components/dropzone/themes/spectrum.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-DropZone {
+		--spectrum-drop-zone-border-color: var(--spectrum-gray-300);
+	}
+}
diff --git a/components/fieldgroup/metadata/metadata.json b/components/fieldgroup/dist/metadata.json
similarity index 93%
rename from components/fieldgroup/metadata/metadata.json
rename to components/fieldgroup/dist/metadata.json
index 20528391a1..c8875b9d3a 100644
--- a/components/fieldgroup/metadata/metadata.json
+++ b/components/fieldgroup/dist/metadata.json
@@ -11,7 +11,7 @@
     ".spectrum-FieldGroupInputLayout"
   ],
   "modifiers": [],
-  "component": ["--spectrum-fieldgroup-margin"],
+  "component": [],
   "global": ["--spectrum-spacing-300"],
   "system-theme": [],
   "passthroughs": [],
diff --git a/components/fieldgroup/index.css b/components/fieldgroup/index.css
index 6f7cc395f0..6aedccbf08 100644
--- a/components/fieldgroup/index.css
+++ b/components/fieldgroup/index.css
@@ -11,10 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-FieldGroup {
-	--spectrum-fieldgroup-margin: var(--spectrum-spacing-300);
-}
-
 /* field group */
 .spectrum-FieldGroup {
 	display: flex;
@@ -47,7 +43,7 @@
 
 		/* space between horizontal fields */
 		.spectrum-FieldGroup-item:not(:last-child) {
-			margin-inline-end: var(--spectrum-fieldgroup-margin);
+			margin-inline-end: var(--spectrum-spacing-300);
 		}
 
 		/* move help text down to new row */
diff --git a/components/fieldgroup/metadata/mods.md b/components/fieldgroup/metadata/mods.md
deleted file mode 100644
index a98209f6e8..0000000000
--- a/components/fieldgroup/metadata/mods.md
+++ /dev/null
@@ -1,2 +0,0 @@
-| Modifiable custom properties |
-| ---------------------------- |
diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json
index c3a092c408..60e05c8659 100644
--- a/components/fieldgroup/package.json
+++ b/components/fieldgroup/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/fieldgroup/stories/fieldgroup.mdx b/components/fieldgroup/stories/fieldgroup.mdx
deleted file mode 100644
index 4ceef8fd35..0000000000
--- a/components/fieldgroup/stories/fieldgroup.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as FieldGroupStories from "./fieldgroup.stories";
-
-<Meta of={FieldGroupStories} title="Docs" />
-
-<Title of={FieldGroupStories} />
-<Subtitle of={FieldGroupStories} />
-<ComponentDetails />
-
-<Description of={FieldGroupStories} />
-
-## Variants
-
-### Vertical
-
-A vertical group of fields:
-
-#### Vertical Radio
-
-<Canvas of={FieldGroupStories.VerticalRadio} />
-
-#### Vertical Checkbox
-
-<Canvas of={FieldGroupStories.VerticalCheckbox} />
-
-### Horizontal
-
-A horizontal group of fields:
-
-#### Horizontal Radio
-
-<Canvas of={FieldGroupStories.HorizontalRadio} />
-
-#### Horizontal Checkbox
-
-<Canvas of={FieldGroupStories.HorizontalCheckbox} />
-
-### Invalid
-
-An invalid group of radio buttons or checkboxes is signified by negative help text.
-
-#### Invalid Radios
-
-<Canvas of={FieldGroupStories.InvalidRadio} />
-
-#### Invalid Checkboxes
-
-<Canvas of={FieldGroupStories.InvalidCheckbox} />
-
-### Required or optional
-
-<Description of={FieldGroupStories.Required} />
-<Description of={FieldGroupStories.Optional} />
-
-#### Required
-
-<Canvas of={FieldGroupStories.Required} />
-
-#### Required Asterisk
-
-<Canvas of={FieldGroupStories.RequiredAsterisk} />
-
-#### Optional
-
-<Canvas of={FieldGroupStories.Optional} />
-
-### Side label position
-
-<Description of={FieldGroupStories.VerticalSideLabelRadio} />
-
-#### Side Label Vertical Radio
-
-<Canvas of={FieldGroupStories.VerticalSideLabelRadio} />
-
-#### Side Label Horizontal Radio
-
-<Canvas of={FieldGroupStories.HorizontalSideLabelRadio} />
-
-#### Side Label Vertical Checkbox
-
-<Canvas of={FieldGroupStories.VerticalSideLabelCheckbox} />
-
-#### Side Label Horizontal Checkbox
-
-<Canvas of={FieldGroupStories.HorizontalSideLabelCheckbox} />
-
-### Read-only Checkbox
-
-<Description of={FieldGroupStories.ReadOnlyCheckbox} />
-
-<Canvas of={FieldGroupStories.ReadOnlyCheckbox} />
-
-### Read-only Radio
-
-<Description of={FieldGroupStories.ReadOnlyRadio} />
-
-<Canvas of={FieldGroupStories.ReadOnlyRadio} />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-<PropertiesTable />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js
index 9217f3b317..18c06b181f 100644
--- a/components/fieldgroup/stories/fieldgroup.stories.js
+++ b/components/fieldgroup/stories/fieldgroup.stories.js
@@ -1,15 +1,13 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isInvalid, isReadOnly, isRequired } from "@spectrum-css/preview/types";
 import { default as RadioSettings } from "@spectrum-css/radio/stories/radio.stories.js";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { FieldGroupSet } from "./fieldgroup.test.js";
-import { Template } from "./template.js";
+import { InputOptionsFieldGroupTemplate, NecessityIndicatorFieldGroupTemplate, Template } from "./template.js";
 
 /**
- * A field group is a group of fields which are usually radios (also known as a radio group) or checkboxes
- * (also known as a checkbox group). A field group is composed of a field label, a group of radio
- * inputs or checkboxes, and an optional help text component.
+ * A field group is a group of fields which are usually radios (also known as a radio group) or checkboxes (also known as a checkbox group). It is composed of a [field label](/docs/components-field-label--docs), a group of [radio inputs](/docs/components-radio--docs) or [checkboxes](/docs/components-checkbox--docs), and [an optional help text component](/docs/components-help-text--docs).
  *
  * ## Usage notes
  *
@@ -61,7 +59,6 @@ export default {
 		},
 		isInvalid,
 		items: { table: { disable: true } },
-		fieldLabel: { table: { disable: true } },
 		helpText: { table: { disable: true } },
 		isRequired,
 		isReadOnly,
@@ -100,11 +97,11 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = FieldGroupSet.bind({});
 Default.args = {};
+Default.tags = ["!autodocs"];
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = FieldGroupSet.bind({});
@@ -117,155 +114,78 @@ WithForcedColors.parameters = {
 	},
 };
 
-
 // ********* DOCS ONLY ********* //
-export const VerticalRadio = Template.bind({});
-VerticalRadio.tags = ["!dev"];
-VerticalRadio.args = {
-	layout: "vertical",
-	inputType: "radio"
-};
-VerticalRadio.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
-export const VerticalCheckbox = Template.bind({});
-VerticalCheckbox.tags = ["!dev"];
-VerticalCheckbox.args = {
-	layout: "vertical",
-	inputType: "checkbox",
-};
-VerticalCheckbox.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
-export const HorizontalRadio = Template.bind({});
-HorizontalRadio.tags = ["!dev"];
-HorizontalRadio.args = {
-	layout: "horizontal",
-	inputType: "radio"
-};
-HorizontalRadio.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
-export const HorizontalCheckbox = Template.bind({});
-HorizontalCheckbox.tags = ["!dev"];
-HorizontalCheckbox.args = {
-	layout: "horizontal",
-	inputType: "checkbox",
-};
-HorizontalCheckbox.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
-export const InvalidRadio = Template.bind({});
-InvalidRadio.tags = ["!dev"];
-InvalidRadio.args = {
-	layout: "horizontal",
-	inputType: "radio",
-	isInvalid: true
-};
-InvalidRadio.parameters = {
+/**
+ * The default field group orientation is vertical. The field label is positioned at the top with the `spectrum-FieldGroup spectrum-FieldGroup--toplabel` classes.
+ * */
+export const Vertical = InputOptionsFieldGroupTemplate.bind({});
+Vertical.tags = ["!dev"];
+Vertical.args = Default.args;
+Vertical.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+Vertical.storyName = "Default";
 
-export const InvalidCheckbox = Template.bind({});
-InvalidCheckbox.tags = ["!dev"];
-InvalidCheckbox.args = {
+/**
+ * A horizontal group of fields. Use a horizontal field group when vertical space is limited.
+ * */
+export const Horizontal = InputOptionsFieldGroupTemplate.bind({});
+Horizontal.tags = ["!dev"];
+Horizontal.args = {
 	layout: "horizontal",
-	inputType: "checkbox",
-	isInvalid: true,
 };
-InvalidCheckbox.parameters = {
+Horizontal.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
 /**
- * Field groups can be marked as optional or required, depending on the situation.
- * If required, the field group must either contain a "(required)" label or an asterisk. If an asterisk is used, help text must explain what the asterisk means.
+ * An invalid group of radio buttons or checkboxes is signified by negative help text.
  */
-export const Required = Template.bind({});
-Required.tags = ["!dev"];
-Required.args = {
-	inputType: "radio",
-	fieldLabel: "Radio group label (required)"
-};
-Required.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
-export const RequiredAsterisk = Template.bind({});
-RequiredAsterisk.tags = ["!dev"];
-RequiredAsterisk.args = {
-	fieldLabel: "Checkbox group label",
-	inputType: "checkbox",
-	isRequired: true,
+export const InvalidFieldGroups = InputOptionsFieldGroupTemplate.bind({});
+InvalidFieldGroups.tags = ["!dev"];
+InvalidFieldGroups.args = {
+	isInvalid: true
 };
-RequiredAsterisk.parameters = {
+InvalidFieldGroups.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+InvalidFieldGroups.storyName = "Invalid field groups";
 
 /**
- * Optional field groups can be denoted with text added to the end of the label "(optional)" or have no indication at all.
+ * Field groups can be marked as optional or required, depending on the situation.
+ * - If required, the field group must either contain the text "(required)" in its label or an asterisk. If an asterisk is used, help text must explain what the asterisk means.
+ * - Optional field groups can be denoted with the text "(optional)" added to the end of the label or have no indication at all.
  */
-export const Optional = Template.bind({});
-Optional.tags = ["!dev"];
-Optional.args = {
-	fieldLabel: "Checkbox group label (optional)",
-	helpText: "",
-	inputType: "checkbox",
-};
-Optional.parameters = {
+export const RequiredOptional = NecessityIndicatorFieldGroupTemplate.bind({});
+RequiredOptional.tags = ["!dev"];
+RequiredOptional.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+RequiredOptional.storyName = "Indicating required or optional";
 
 /**
- * The field group label has two layout options: the label can be top aligned with `spectrum-FieldGroup spectrum-FieldGroup--toplabel`, or side aligned with `spectrum-FieldGroup spectrum-FieldGroup--sidelabel`.
+ * The alternative layout option has side-aligned labels, and can be achieved with `spectrum-FieldGroup spectrum-FieldGroup--sidelabel`.
  */
-export const VerticalSideLabelRadio = Template.bind({});
-VerticalSideLabelRadio.tags = ["!dev"];
-VerticalSideLabelRadio.args = {
+export const VerticalSideLabels = InputOptionsFieldGroupTemplate.bind({});
+VerticalSideLabels.tags = ["!dev"];
+VerticalSideLabels.args = {
 	labelPosition: "side",
-	inputType: "radio",
-	layout: "vertical"
 };
-VerticalSideLabelRadio.parameters = {
+VerticalSideLabels.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+VerticalSideLabels.storyName = "Default - with side labels";
 
-export const HorizontalSideLabelRadio = Template.bind({});
-HorizontalSideLabelRadio.tags = ["!dev"];
-HorizontalSideLabelRadio.args = {
+export const HorizontalSideLabels = InputOptionsFieldGroupTemplate.bind({});
+HorizontalSideLabels.tags = ["!dev"];
+HorizontalSideLabels.args = {
 	labelPosition: "side",
-	inputType: "radio",
-	layout: "horizontal"
-};
-HorizontalSideLabelRadio.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
-export const VerticalSideLabelCheckbox = Template.bind({});
-VerticalSideLabelCheckbox.tags = ["!dev"];
-VerticalSideLabelCheckbox.args = {
-	labelPosition: "side",
-	inputType: "checkbox",
-	layout: "vertical",
-};
-VerticalSideLabelCheckbox.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
-export const HorizontalSideLabelCheckbox = Template.bind({});
-HorizontalSideLabelCheckbox.tags = ["!dev"];
-HorizontalSideLabelCheckbox.args = {
-	labelPosition: "side",
-	inputType: "checkbox",
 	layout: "horizontal",
 };
-HorizontalSideLabelCheckbox.parameters = {
+HorizontalSideLabels.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+HorizontalSideLabels.storyName = "Horizontal - with side labels";
 
 /**
  * Implementations should include the following behavior for read-only checkboxes:
@@ -282,11 +202,12 @@ ReadOnlyCheckbox.args = {
 ReadOnlyCheckbox.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+ReadOnlyCheckbox.storyName = "Read-only checkbox";
 
 /**
  * A group of read-only radio buttons.
  *
- * Review the individual story for more features of [read-only radio buttons](?path=/docs/components-radio--docs#read-only).
+ * Review the individual story for more features of [read-only radio buttons](/docs/components-radio--docs#read-only).
  */
 export const ReadOnlyRadio = Template.bind({});
 ReadOnlyRadio.tags = ["!dev"];
@@ -297,3 +218,4 @@ ReadOnlyRadio.args = {
 ReadOnlyRadio.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+ReadOnlyRadio.storyName = "Read-only radio";
diff --git a/components/fieldgroup/stories/fieldgroup.test.js b/components/fieldgroup/stories/fieldgroup.test.js
index 5ad730cbc9..42a723babf 100644
--- a/components/fieldgroup/stories/fieldgroup.test.js
+++ b/components/fieldgroup/stories/fieldgroup.test.js
@@ -19,11 +19,9 @@ export const FieldGroupSet = Variants({
 			testHeading: "Horizontal checkboxes",
 			layout: "horizontal",
 			inputType: "checkbox",
-			helpText: "Make a selection.",
 		},
 		{
 			testHeading: "Radios label position: side",
-			label: "Pick one:",
 			labelPosition: "side",
 		},
 		{
@@ -33,14 +31,12 @@ export const FieldGroupSet = Variants({
 		},
 		{
 			testHeading: "Horizontal radios label position: side",
-			label: "Pick one:",
 			labelPosition: "side",
 			layout: "horizontal",
 			inputType: "radio",
 		},
 		{
 			testHeading: "Horizontal checkboxes label position: side",
-			label: "Pick one:",
 			labelPosition: "side",
 			layout: "horizontal",
 			inputType: "checkbox",
diff --git a/components/fieldgroup/stories/template.js b/components/fieldgroup/stories/template.js
index 3c74a2fbdc..1906874754 100644
--- a/components/fieldgroup/stories/template.js
+++ b/components/fieldgroup/stories/template.js
@@ -1,7 +1,7 @@
 import { Template as CheckBox } from "@spectrum-css/checkbox/stories/template.js";
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
 import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
-import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as Radio } from "@spectrum-css/radio/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
@@ -94,3 +94,42 @@ export const Template = (
 		</div>
 	`;
 };
+
+/* Displays a radio group and a checkbox group. */
+export const InputOptionsFieldGroupTemplate = (args, context) => Container({
+	withBorder: false,
+	content: html`
+		${Container({
+			withBorder: false,
+			heading: "Radios",
+			content: Template({...args}, context),
+		})}
+		${Container({
+			withBorder: false,
+			heading: "Checkboxes",
+			content: Template({...args, inputType: "checkbox"}, context),
+		})}
+	`
+});
+
+/* Displays all options for required vs. optional indicators. */
+export const NecessityIndicatorFieldGroupTemplate = (args, context) => Container({
+	withBorder: false,
+	content: html`
+		${Container({
+			withBorder: false,
+			heading: "Required (text)",
+			content: Template({...args, label: "Field label (required)",}, context),
+		})}
+		${Container({
+			withBorder: false,
+			heading: "Required (asterisk)",
+			content: Template({...args, isRequired: true,}, context),
+		})}
+		${Container({
+			withBorder: false,
+			heading: "Optional",
+			content: Template({...args, label: "Field label (optional)", helpText: "",}, context),
+		})}
+	`
+});
diff --git a/components/fieldlabel/metadata/metadata.json b/components/fieldlabel/dist/metadata.json
similarity index 59%
rename from components/fieldlabel/metadata/metadata.json
rename to components/fieldlabel/dist/metadata.json
index 409f73ab3a..cc26c19a02 100644
--- a/components/fieldlabel/metadata/metadata.json
+++ b/components/fieldlabel/dist/metadata.json
@@ -10,19 +10,9 @@
     ".spectrum-FieldLabel--sizeXL",
     ".spectrum-FieldLabel-requiredIcon",
     ".spectrum-FieldLabel.is-disabled",
-    ".spectrum-FieldLabel.is-disabled .spectrum-FieldLabel-requiredIcon",
     ".spectrum-FieldLabel:lang(ja)",
     ".spectrum-FieldLabel:lang(ko)",
-    ".spectrum-FieldLabel:lang(zh)",
-    ".spectrum-Form",
-    ".spectrum-Form--labelsAbove",
-    ".spectrum-Form--labelsAbove .spectrum-Form-item",
-    ".spectrum-Form-item",
-    ".spectrum-Form-itemField",
-    ".spectrum-Form-itemField > *",
-    ".spectrum-Form-itemLabel",
-    ".spectrum-Form-itemLabel.is-disabled",
-    ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon"
+    ".spectrum-FieldLabel:lang(zh)"
   ],
   "modifiers": [
     "--mod-disabled-content-color",
@@ -30,20 +20,29 @@
     "--mod-field-label-bottom-to-text",
     "--mod-field-label-text-to-asterisk",
     "--mod-field-label-top-to-text",
+    "--mod-fieldlabel-color",
     "--mod-fieldlabel-font-size",
     "--mod-fieldlabel-font-weight",
     "--mod-fieldlabel-line-height",
     "--mod-fieldlabel-line-height-cjk",
+    "--mod-fieldlabel-margin-block",
+    "--mod-fieldlabel-margin-block-end",
+    "--mod-fieldlabel-margin-block-start",
+    "--mod-fieldlabel-margin-inline",
+    "--mod-fieldlabel-margin-inline-end",
+    "--mod-fieldlabel-margin-inline-start",
     "--mod-fieldlabel-min-height",
+    "--mod-fieldlabel-padding-block",
+    "--mod-fieldlabel-padding-inline",
     "--mod-fieldlabel-side-margin-block-start",
-    "--mod-fieldlabel-side-padding-right",
-    "--mod-form-grid-template-columns",
-    "--mod-form-grid-template-columns-labels-above",
-    "--mod-form-inline-size",
-    "--mod-form-item-block-spacing",
-    "--mod-form-item-block-spacing-labels-above"
+    "--mod-fieldlabel-side-padding-right"
   ],
   "component": [
+    "--spectrum-field-label-bottom-to-text",
+    "--spectrum-field-label-font-size",
+    "--spectrum-field-label-min-height",
+    "--spectrum-field-label-side-margin-block-start",
+    "--spectrum-field-label-side-padding-right",
     "--spectrum-field-label-text-to-asterisk",
     "--spectrum-field-label-text-to-asterisk-extra-large",
     "--spectrum-field-label-text-to-asterisk-large",
@@ -53,16 +52,7 @@
     "--spectrum-field-label-top-margin-large",
     "--spectrum-field-label-top-margin-medium",
     "--spectrum-field-label-top-margin-small",
-    "--spectrum-fieldlabel-bottom-to-text",
-    "--spectrum-fieldlabel-color",
-    "--spectrum-fieldlabel-font-size",
-    "--spectrum-fieldlabel-font-weight",
-    "--spectrum-fieldlabel-line-height",
-    "--spectrum-fieldlabel-line-height-cjk",
-    "--spectrum-fieldlabel-min-height",
-    "--spectrum-fieldlabel-side-margin-block-start",
-    "--spectrum-fieldlabel-side-padding-right",
-    "--spectrum-fieldlabel-top-to-text"
+    "--spectrum-field-label-top-to-text"
   ],
   "global": [
     "--spectrum-cjk-line-height-100",
@@ -83,14 +73,9 @@
     "--spectrum-neutral-subdued-content-color-default",
     "--spectrum-regular-font-weight",
     "--spectrum-spacing-100",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-300",
-    "--spectrum-tableform-item-block-spacing"
+    "--spectrum-spacing-200"
   ],
   "system-theme": [],
-  "passthroughs": [
-    "--mod-tableform-item-block-spacing",
-    "--mod-tableform-item-block-spacing-labels-above"
-  ],
-  "high-contrast": ["--highcontrast-disabled-content-color"]
+  "passthroughs": [],
+  "high-contrast": ["--highcontrast-field-label-content-color"]
 }
diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css
index f63c9c3b1f..4e5b4653ef 100644
--- a/components/fieldlabel/index.css
+++ b/components/fieldlabel/index.css
@@ -11,61 +11,53 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-FieldLabel {
-	--spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
-	--spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
+/* @todo align modifiers to use field-label or fieldlabel but not both */
 
-	--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
+.spectrum-FieldLabel,
+.spectrum-FieldLabel--sizeM {
+	--spectrum-field-label-min-height: var(--spectrum-component-height-75);
+	--spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75);
+	--spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+	--spectrum-field-label-font-size: var(--spectrum-font-size-75);
+
+	--spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
+	--spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
 
-	--spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
-	--spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
-	--spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
+	--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
 }
 
 .spectrum-FieldLabel--sizeS {
-	--spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
-	--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
-	--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-	--spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
+	--spectrum-field-label-min-height: var(--spectrum-component-height-75);
+	--spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75);
+	--spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+	--spectrum-field-label-font-size: var(--spectrum-font-size-75);
 
-	--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
-	--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
+	--spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
+	--spectrum-field-label-side-padding-right: var(--spectrum-spacing-100);
 
 	--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
 }
 
-.spectrum-FieldLabel--sizeM {
-	--spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
-	--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
-	--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-	--spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
-
-	--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
-	--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
-
-	--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
-}
-
 .spectrum-FieldLabel--sizeL {
-	--spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
-	--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
-	--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-	--spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
+	--spectrum-field-label-min-height: var(--spectrum-component-height-100);
+	--spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-100);
+	--spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+	--spectrum-field-label-font-size: var(--spectrum-font-size-100);
 
-	--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
-	--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+	--spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
+	--spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
 
 	--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
 }
 
 .spectrum-FieldLabel--sizeXL {
-	--spectrum-fieldlabel-min-height: var(--spectrum-component-height-200);
-	--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200);
-	--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
-	--spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
+	--spectrum-field-label-min-height: var(--spectrum-component-height-200);
+	--spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-200);
+	--spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+	--spectrum-field-label-font-size: var(--spectrum-font-size-200);
 
-	--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
-	--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+	--spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
+	--spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
 
 	--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
 }
@@ -73,30 +65,38 @@
 .spectrum-FieldLabel {
 	display: block;
 	box-sizing: border-box;
-	min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
+	min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height));
 
-	padding-block: var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text));
-	padding-inline: 0;
+	padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text)));
+	padding-inline: var(--mod-fieldlabel-padding-inline, 0);
+	margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0));
+	margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0));
 
-	font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size));
-	font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight));
+	font-size: var(--mod-fieldlabel-font-size, var(--spectrum-field-label-font-size));
+	font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-regular-font-weight));
 
-	line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height));
+	line-height: var(--mod-fieldlabel-line-height, var(--spectrum-line-height-100));
 
 	-webkit-font-smoothing: subpixel-antialiased;
 	-moz-osx-font-smoothing: auto;
 
-	color: var(--spectrum-fieldlabel-color);
+	color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default)));
 
 	/* CJK (Chinese, Japanese, and Korean) language support */
 	&:lang(ja),
 	&:lang(zh),
 	&:lang(ko) {
-		line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-fieldlabel-line-height-cjk));
+		--mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100));
+	}
+
+	/********* Disabled state *********/
+	&.is-disabled {
+		--mod-fieldlabel-color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
 	}
 }
 
 .spectrum-FieldLabel-requiredIcon {
+	color: inherit;
 	margin-block: 0;
 	margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
 	vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
@@ -106,9 +106,9 @@
 .spectrum-FieldLabel--right {
 	display: inline-block;
 
-	margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start));
+	margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start));
 	margin-block-end: 0;
-	margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
+	margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right));
 
 	vertical-align: top;
 }
@@ -117,71 +117,9 @@
 	text-align: end;
 }
 
-/********* Form *********/
-.spectrum-Form {
-	--spectrum-tableform-item-block-spacing: var(--spectrum-spacing-300);
-
-	margin: 0;
-	display: grid;
-	grid-template-columns: var(--mod-form-grid-template-columns, auto auto);
-	inline-size: var(--mod-form-inline-size, fit-content);
-	justify-content: start;
-
-	/* @deprecation --mod-tableform-item-block-spacing has been renamed to
-     --mod-form-item-block-spacing. The fallback will be removed in a future version. */
-	row-gap: var(--mod-form-item-block-spacing, var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing)));
-}
-
-/* Row */
-.spectrum-Form-item {
-	display: contents;
-}
-
-@supports (grid-template-columns: subgrid) {
-	.spectrum-Form-item {
-		display: grid;
-		grid-column: span 2;
-		grid-template-columns: subgrid;
-	}
-}
-
-.spectrum-Form-itemLabel,
-.spectrum-Form-itemField {
-	display: block;
-}
-
-/* Fix extra space after inline-flex elements such as stepper. */
-.spectrum-Form-itemField > * {
-	vertical-align: top;
-}
-
-/* Rows with stacked alignment */
-.spectrum-Form--labelsAbove {
-	/* @deprecation --mod-tableform-item-block-spacing-labels-above has been renamed to
-     --mod-form-item-block-spacing-labels-above. The fallback will be removed in a future version. */
-	--mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--mod-tableform-item-block-spacing-labels-above, var(--spectrum-spacing-200)));
-	--mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, auto);
-
-	.spectrum-Form-item {
-		display: block;
-	}
-}
-
-/********* Disabled state *********/
-.spectrum-FieldLabel,
-.spectrum-Form-itemLabel {
-	&.is-disabled {
-		color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
-
-		.spectrum-FieldLabel-requiredIcon {
-			color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
-		}
-	}
-}
-
 /********* WHCM *********/
 @media (forced-colors: active) {
-	.spectrum-FieldLabel {
-		--highcontrast-disabled-content-color: GrayText;
+	.spectrum-FieldLabel.is-disabled {
+		--highcontrast-field-label-content-color: GrayText;
 	}
 }
diff --git a/components/fieldlabel/metadata/mods.md b/components/fieldlabel/metadata/mods.md
deleted file mode 100644
index 35f6422ca6..0000000000
--- a/components/fieldlabel/metadata/mods.md
+++ /dev/null
@@ -1,19 +0,0 @@
-| Modifiable custom properties                    |
-| ----------------------------------------------- |
-| `--mod-disabled-content-color`                  |
-| `--mod-field-label-asterisk-vertical-align`     |
-| `--mod-field-label-bottom-to-text`              |
-| `--mod-field-label-text-to-asterisk`            |
-| `--mod-field-label-top-to-text`                 |
-| `--mod-fieldlabel-font-size`                    |
-| `--mod-fieldlabel-font-weight`                  |
-| `--mod-fieldlabel-line-height`                  |
-| `--mod-fieldlabel-line-height-cjk`              |
-| `--mod-fieldlabel-min-height`                   |
-| `--mod-fieldlabel-side-margin-block-start`      |
-| `--mod-fieldlabel-side-padding-right`           |
-| `--mod-form-grid-template-columns`              |
-| `--mod-form-grid-template-columns-labels-above` |
-| `--mod-form-inline-size`                        |
-| `--mod-form-item-block-spacing`                 |
-| `--mod-form-item-block-spacing-labels-above`    |
diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json
index 60297a628f..566f2aa9ab 100644
--- a/components/fieldlabel/package.json
+++ b/components/fieldlabel/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
@@ -52,9 +53,6 @@
 			"guidelines": "https://spectrum.adobe.com/page/field-label",
 			"rootClass": "spectrum-FieldLabel",
 			"swc": "https://opensource.adobe.com/spectrum-web-components/components/field-label/"
-		},
-		{
-			"rootClass": "spectrum-Form"
 		}
 	]
 }
diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js
index 36669ac1b3..1a268284d7 100644
--- a/components/fieldlabel/stories/fieldlabel.stories.js
+++ b/components/fieldlabel/stories/fieldlabel.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isRequired, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { FieldLabelGroup } from "./fieldlabel.test.js";
 import { Template } from "./template.js";
@@ -45,6 +45,10 @@ export default {
 		label: "Label",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=16090-95",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/fieldlabel/stories/form.template.js b/components/fieldlabel/stories/form.template.js
deleted file mode 100644
index 0b04ff96cb..0000000000
--- a/components/fieldlabel/stories/form.template.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
-import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { repeat } from "lit/directives/repeat.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
-
-import "../index.css";
-
-export const Template = ({
-	rootClass = "spectrum-Form",
-	labelPosition = "top",
-	fieldLabelAlignment = "left",
-	customClasses = [],
-	customStyles = {},
-	id = getRandomId("form"),
-	items = [],
-}, context) => html`
-    <form
-        class=${classMap({
-            [rootClass]: true,
-            [`${rootClass}--labelsAbove`]: labelPosition === "top",
-            ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-        })}
-        id=${ifDefined(id)}
-        style=${styleMap(customStyles)}
-    >
-        ${repeat(items, (item) => item.id, ({ label, content, ...item }) => {
-            if (!content) return;
-
-            return html`
-                <div class=${classMap({
-                    [`${rootClass}-item`]: true,
-                })}>
-                    ${when(label, () => FieldLabel({
-                        label,
-                        forInput: item.id,
-                        alignment: labelPosition === "side" ? fieldLabelAlignment : undefined,
-                    }, context))}
-                    <div class=${classMap({
-                        [`${rootClass}-itemField`]: true,
-                    })}>
-                        ${renderContent(content, { context })}
-                    </div>
-                </div>
-            `;
-        })}
-    </form>
-`;
diff --git a/components/floatingactionbutton/metadata/metadata.json b/components/floatingactionbutton/dist/metadata.json
similarity index 94%
rename from components/floatingactionbutton/metadata/metadata.json
rename to components/floatingactionbutton/dist/metadata.json
index 1f7d5a8c42..7daf062a32 100644
--- a/components/floatingactionbutton/metadata/metadata.json
+++ b/components/floatingactionbutton/dist/metadata.json
@@ -42,11 +42,7 @@
     "--spectrum-floating-action-button-background-color-key-focus",
     "--spectrum-floating-action-button-drop-shadow-blur",
     "--spectrum-floating-action-button-drop-shadow-color",
-    "--spectrum-floating-action-button-drop-shadow-x",
     "--spectrum-floating-action-button-drop-shadow-y",
-    "--spectrum-floating-action-button-focus-ring-color",
-    "--spectrum-floating-action-button-focus-ring-gap",
-    "--spectrum-floating-action-button-focus-ring-width",
     "--spectrum-floating-action-button-icon-color",
     "--spectrum-floating-action-button-icon-color-down",
     "--spectrum-floating-action-button-icon-color-hover",
diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css
index 349c066aa2..fc4d7786fd 100644
--- a/components/floatingactionbutton/index.css
+++ b/components/floatingactionbutton/index.css
@@ -11,21 +11,36 @@
  * governing permissions and limitations under the License.
  */
 
+@media (forced-colors: active) {
+	.spectrum-FloatingActionButton {
+		--highcontrast-floating-action-button-background-color: ButtonText;
+		--highcontrast-floating-action-button-background-color-hover: Highlight;
+		--highcontrast-floating-action-button-background-color-down: Highlight;
+		--highcontrast-floating-action-button-background-color-key-focus: Highlight;
+
+		--highcontrast-floating-action-button-icon-color: ButtonFace;
+		--highcontrast-floating-action-button-icon-color-hover: ButtonFace;
+		--highcontrast-floating-action-button-icon-color-down: ButtonFace;
+		--highcontrast-floating-action-button-icon-color-key-focus: ButtonFace;
+
+		&::after {
+			/* make sure focus-ring renders */
+			forced-color-adjust: none;
+		}
+	}
+}
+
 .spectrum-FloatingActionButton {
 	--spectrum-floating-action-button-size: var(--spectrum-component-height-200);
 	--spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200);
 	--spectrum-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200);
 	--spectrum-floating-action-button-margin: var(--spectrum-spacing-200);
-	--spectrum-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x);
-
-	--spectrum-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness);
-	--spectrum-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
-	--spectrum-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color);
 
 	--spectrum-floating-action-button-background-color: var(--spectrum-accent-background-color-default);
 	--spectrum-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover);
 	--spectrum-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down);
 	--spectrum-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus);
+
 	--spectrum-floating-action-button-icon-color: var(--spectrum-white);
 	--spectrum-floating-action-button-icon-color-hover: var(--spectrum-white);
 	--spectrum-floating-action-button-icon-color-down: var(--spectrum-white);
@@ -37,31 +52,13 @@
 	--spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color);
 	--spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color);
 	--spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color);
+
 	--spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default);
 	--spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
 	--spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
 	--spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
 }
 
-@media (forced-colors: active) {
-	.spectrum-FloatingActionButton {
-		&::after {
-			/* make sure focus-ring renders */
-			forced-color-adjust: none;
-		}
-
-		--highcontrast-floating-action-button-background-color: ButtonText;
-		--highcontrast-floating-action-button-background-color-hover: Highlight;
-		--highcontrast-floating-action-button-background-color-down: Highlight;
-		--highcontrast-floating-action-button-background-color-key-focus: Highlight;
-
-		--highcontrast-floating-action-button-icon-color: ButtonFace;
-		--highcontrast-floating-action-button-icon-color-hover: ButtonFace;
-		--highcontrast-floating-action-button-icon-color-down: ButtonFace;
-		--highcontrast-floating-action-button-icon-color-key-focus: ButtonFace;
-	}
-}
-
 .spectrum-FloatingActionButton {
 	cursor: pointer;
 	block-size: var(--mod-floating-action-button-size, var(--spectrum-floating-action-button-size));
@@ -72,7 +69,7 @@
 	margin-inline-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin));
 	margin-block-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin));
 	border: none;
-	box-shadow: var(--mod-floating-action-button-drop-shadow-x, var(--spectrum-floating-action-button-drop-shadow-x)) var(--mod-floating-action-button-drop-shadow-y, var(--spectrum-floating-action-button-drop-shadow-y)) var(--mod-floating-action-button-drop-shadow-blur, var(--spectrum-floating-action-button-drop-shadow-blur)) var(--mod-floating-action-button-drop-shadow-color, var(--spectrum-floating-action-button-drop-shadow-color));
+	box-shadow: var(--mod-floating-action-button-drop-shadow-x, var(--spectrum-drop-shadow-x)) var(--mod-floating-action-button-drop-shadow-y, var(--spectrum-floating-action-button-drop-shadow-y)) var(--mod-floating-action-button-drop-shadow-blur, var(--spectrum-floating-action-button-drop-shadow-blur)) var(--mod-floating-action-button-drop-shadow-color, var(--spectrum-floating-action-button-drop-shadow-color));
 	position: relative;
 
 	/* default is primary */
@@ -105,8 +102,8 @@
 		&::after {
 			position: absolute;
 			inset: 0;
-			margin: calc(-1 * var(--mod-floating-action-button-focus-ring-gap, var(--spectrum-floating-action-button-focus-ring-gap)));
-			box-shadow: 0 0 0 var(--mod-floating-action-button-focus-ring-width, var(--spectrum-floating-action-button-focus-ring-width)) var(--mod-afloating-action-button-focus-ring-color, var(--spectrum-floating-action-button-focus-ring-color));
+			margin: calc(-1 * var(--mod-floating-action-button-focus-ring-gap, var(--spectrum-focus-indicator-gap)));
+			box-shadow: 0 0 0 var(--mod-floating-action-button-focus-ring-width, var(--spectrum-focus-indicator-thickness)) var(--mod-afloating-action-button-focus-ring-color, var(--spectrum-focus-indicator-color));
 			border-radius: var(--mod-floating-action-button-border-radius, 50%);
 			pointer-events: none;
 			content: "";
diff --git a/components/floatingactionbutton/metadata/mods.md b/components/floatingactionbutton/metadata/mods.md
deleted file mode 100644
index 6c08d819e7..0000000000
--- a/components/floatingactionbutton/metadata/mods.md
+++ /dev/null
@@ -1,22 +0,0 @@
-| Modifiable custom properties                              |
-| --------------------------------------------------------- |
-| `--mod-afloating-action-button-focus-ring-color`          |
-| `--mod-floating-action-button-background-color`           |
-| `--mod-floating-action-button-background-color-down`      |
-| `--mod-floating-action-button-background-color-hover`     |
-| `--mod-floating-action-button-background-color-key-focus` |
-| `--mod-floating-action-button-border-radius`              |
-| `--mod-floating-action-button-drop-shadow-blur`           |
-| `--mod-floating-action-button-drop-shadow-color`          |
-| `--mod-floating-action-button-drop-shadow-x`              |
-| `--mod-floating-action-button-drop-shadow-y`              |
-| `--mod-floating-action-button-focus-ring-gap`             |
-| `--mod-floating-action-button-focus-ring-width`           |
-| `--mod-floating-action-button-icon-color`                 |
-| `--mod-floating-action-button-icon-color-down`            |
-| `--mod-floating-action-button-icon-color-hover`           |
-| `--mod-floating-action-button-icon-color-key-focus`       |
-| `--mod-floating-action-button-icon-size`                  |
-| `--mod-floating-action-button-margin`                     |
-| `--mod-floating-action-button-padding`                    |
-| `--mod-floating-action-button-size`                       |
diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json
index 0de74de3aa..48de6ad28d 100644
--- a/components/floatingactionbutton/package.json
+++ b/components/floatingactionbutton/package.json
@@ -20,15 +20,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js
index 426eab3ff0..3d96790255 100644
--- a/components/floatingactionbutton/stories/floatingactionbutton.stories.js
+++ b/components/floatingactionbutton/stories/floatingactionbutton.stories.js
@@ -1,7 +1,7 @@
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isFocused, isHovered } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { FloatingActionButtonGroup } from "./floatingactionbutton.test.js";
 import { Template } from "./template.js";
diff --git a/components/form/CHANGELOG.md b/components/form/CHANGELOG.md
new file mode 100644
index 0000000000..420e6f23d0
--- /dev/null
+++ b/components/form/CHANGELOG.md
@@ -0,0 +1 @@
+# Change Log
diff --git a/components/form/README.md b/components/form/README.md
new file mode 100644
index 0000000000..7b4cce7b04
--- /dev/null
+++ b/components/form/README.md
@@ -0,0 +1,7 @@
+# @spectrum-css/form
+
+> The Spectrum CSS form component
+
+This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
+
+See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details.
diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json
new file mode 100644
index 0000000000..88655f8edd
--- /dev/null
+++ b/components/form/dist/metadata.json
@@ -0,0 +1,37 @@
+{
+  "sourceFile": "index.css",
+  "selectors": [
+    ".spectrum-Form",
+    ".spectrum-Form--labelsAbove",
+    ".spectrum-Form--labelsAbove .spectrum-Form-item",
+    ".spectrum-Form-item",
+    ".spectrum-Form-itemField",
+    ".spectrum-Form-itemField > *",
+    ".spectrum-Form-itemLabel",
+    ".spectrum-Form-itemLabel.is-disabled",
+    ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon"
+  ],
+  "modifiers": [
+    "--mod-disabled-content-color",
+    "--mod-form-grid-template-columns",
+    "--mod-form-grid-template-columns-labels-above",
+    "--mod-form-inline-size",
+    "--mod-form-item-block-spacing",
+    "--mod-form-item-block-spacing-labels-above"
+  ],
+  "component": [
+    "--spectrum-form-grid-template-columns",
+    "--spectrum-form-grid-template-columns-labels-above",
+    "--spectrum-form-item-block-spacing",
+    "--spectrum-form-item-block-spacing-labels-above",
+    "--spectrum-form-item-disabled-content-color"
+  ],
+  "global": [
+    "--spectrum-disabled-content-color",
+    "--spectrum-spacing-200",
+    "--spectrum-spacing-300"
+  ],
+  "system-theme": [],
+  "passthroughs": [],
+  "high-contrast": ["--highcontrast-form-item-disabled-content-color"]
+}
diff --git a/components/form/index.css b/components/form/index.css
new file mode 100644
index 0000000000..905208b825
--- /dev/null
+++ b/components/form/index.css
@@ -0,0 +1,80 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+.spectrum-Form {
+	--spectrum-form-item-block-spacing: var(--spectrum-spacing-300);
+	--spectrum-form-item-block-spacing-labels-above: var(--spectrum-spacing-200);
+
+	--spectrum-form-grid-template-columns: auto auto;
+	--spectrum-form-grid-template-columns-labels-above: auto;
+
+	--spectrum-form-item-disabled-content-color: var(--spectrum-disabled-content-color);
+
+	margin: 0;
+	display: grid;
+	grid-template-columns: var(--mod-form-grid-template-columns, var(--spectrum-form-grid-template-columns));
+	inline-size: var(--mod-form-inline-size, fit-content);
+	justify-content: start;
+	row-gap: var(--mod-form-item-block-spacing, var(--spectrum-form-item-block-spacing));
+}
+
+/* Row */
+.spectrum-Form-item {
+	display: contents;
+}
+
+@supports (grid-template-columns: subgrid) {
+	.spectrum-Form-item {
+		display: grid;
+		grid-column: span 2;
+		grid-template-columns: subgrid;
+	}
+}
+
+.spectrum-Form-itemLabel,
+.spectrum-Form-itemField {
+	display: block;
+}
+
+/* Fix extra space after inline-flex elements such as stepper. */
+.spectrum-Form-itemField > * {
+	vertical-align: top;
+}
+
+/* Rows with stacked alignment */
+.spectrum-Form--labelsAbove {
+	--mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--spectrum-form-item-block-spacing-labels-above));
+	--mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, var(--spectrum-form-grid-template-columns-labels-above));
+
+	.spectrum-Form-item {
+		display: block;
+	}
+}
+
+/********* Disabled state *********/
+.spectrum-Form-itemLabel {
+	&.is-disabled {
+		color: var(--highcontrast-form-item-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color)));
+
+		.spectrum-FieldLabel-requiredIcon {
+			color: var(--highcontrast-form-item-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color)));
+		}
+	}
+}
+
+/********* WHCM *********/
+@media (forced-colors: active) {
+	.spectrum-Form {
+		--highcontrast-form-item-disabled-content-color: GrayText;
+	}
+}
diff --git a/components/form/package.json b/components/form/package.json
new file mode 100644
index 0000000000..660fa1c8aa
--- /dev/null
+++ b/components/form/package.json
@@ -0,0 +1,54 @@
+{
+	"name": "@spectrum-css/form",
+	"version": "0.0.0",
+	"description": "The Spectrum CSS form component",
+	"license": "Apache-2.0",
+	"author": "Adobe",
+	"homepage": "https://opensource.adobe.com/spectrum-css/form",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/adobe/spectrum-css.git",
+		"directory": "components/form"
+	},
+	"bugs": {
+		"url": "https://github.com/adobe/spectrum-css/issues"
+	},
+	"exports": {
+		".": "./dist/index.css",
+		"./*.md": "./*.md",
+		"./dist/*": "./dist/*",
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
+	"main": "dist/index.css",
+	"files": [
+		"dist/*",
+		"*.md",
+		"package.json",
+		"stories/*",
+		"metadata/*"
+	],
+	"peerDependencies": {
+		"@spectrum-css/tokens": ">=15"
+	},
+	"devDependencies": {
+		"@spectrum-css/tokens": "workspace:^"
+	},
+	"keywords": [
+		"spectrum",
+		"css",
+		"design system",
+		"adobe"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"spectrum": [
+		{
+			"rootClass": "spectrum-Form"
+		}
+	]
+}
diff --git a/components/form/project.json b/components/form/project.json
new file mode 100644
index 0000000000..f419af393e
--- /dev/null
+++ b/components/form/project.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "form",
+	"tags": ["component"],
+	"targets": {
+		"build": {},
+		"clean": {},
+		"compare": {},
+		"format": {},
+		"lint": {},
+		"report": {},
+		"test": {
+			"defaultConfiguration": "scope"
+		},
+		"validate": {}
+	}
+}
diff --git a/components/fieldlabel/stories/form.stories.js b/components/form/stories/form.stories.js
similarity index 97%
rename from components/fieldlabel/stories/form.stories.js
rename to components/form/stories/form.stories.js
index fb26920d53..0d2438b9ab 100644
--- a/components/fieldlabel/stories/form.stories.js
+++ b/components/form/stories/form.stories.js
@@ -4,10 +4,10 @@ import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js";
 import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
-import { Template } from "./form.template.js";
 import { FormGroup } from "./form.test.js";
+import { Template } from "./template.js";
 
 /**
  * The form component is used for aligning multiple inputs and field groups within a form. It provides structure and spacing for your form fields.
diff --git a/components/fieldlabel/stories/form.test.js b/components/form/stories/form.test.js
similarity index 88%
rename from components/fieldlabel/stories/form.test.js
rename to components/form/stories/form.test.js
index bd9fc86224..b2dc7e7432 100644
--- a/components/fieldlabel/stories/form.test.js
+++ b/components/form/stories/form.test.js
@@ -1,5 +1,5 @@
 import { Variants } from "@spectrum-css/preview/decorators";
-import { Template } from "./form.template.js";
+import { Template } from "./template.js";
 
 export const FormGroup = Variants({
 	Template,
diff --git a/components/form/stories/template.js b/components/form/stories/template.js
new file mode 100644
index 0000000000..1b176395bb
--- /dev/null
+++ b/components/form/stories/template.js
@@ -0,0 +1,53 @@
+import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
+import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
+
+import "../index.css";
+
+export const Template = ({
+	rootClass = "spectrum-Form",
+	labelPosition = "top",
+	fieldLabelAlignment = "left",
+	customClasses = [],
+	customStyles = {},
+	id = getRandomId("form"),
+	items = [],
+} = {}, context = {}) => {
+	return html`
+		<form
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--labelsAbove`]: labelPosition === "top",
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			id=${ifDefined(id)}
+			style=${styleMap(customStyles)}
+		>
+			${repeat(items, (item) => item.id, ({ label, content, ...item }) => {
+				if (!content) return;
+
+				return html`
+					<div class=${classMap({
+						[`${rootClass}-item`]: true,
+					})}>
+						${when(label, () => FieldLabel({
+							label,
+							forInput: item.id,
+							alignment: labelPosition === "side" ? fieldLabelAlignment : undefined,
+						}, context))}
+						<div class=${classMap({
+							[`${rootClass}-itemField`]: true,
+						})}>
+							${renderContent(content, { context })}
+						</div>
+					</div>
+				`;
+			})}
+		</form>
+	`;
+};
diff --git a/components/helptext/metadata/metadata.json b/components/helptext/dist/metadata.json
similarity index 86%
rename from components/helptext/metadata/metadata.json
rename to components/helptext/dist/metadata.json
index b660032989..f730c33a67 100644
--- a/components/helptext/metadata/metadata.json
+++ b/components/helptext/dist/metadata.json
@@ -4,10 +4,6 @@
     ".spectrum-HelpText",
     ".spectrum-HelpText .spectrum-HelpText-text",
     ".spectrum-HelpText .spectrum-HelpText-validationIcon",
-    ".spectrum-HelpText--sizeL",
-    ".spectrum-HelpText--sizeM",
-    ".spectrum-HelpText--sizeS",
-    ".spectrum-HelpText--sizeXL",
     ".spectrum-HelpText.is-disabled",
     ".spectrum-HelpText.is-disabled .spectrum-HelpText-text",
     ".spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon",
@@ -17,12 +13,13 @@
     ".spectrum-HelpText.spectrum-HelpText--neutral",
     ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text",
     ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon",
+    ".spectrum-HelpText.spectrum-HelpText--sizeL",
+    ".spectrum-HelpText.spectrum-HelpText--sizeM",
+    ".spectrum-HelpText.spectrum-HelpText--sizeS",
+    ".spectrum-HelpText.spectrum-HelpText--sizeXL",
     ".spectrum-HelpText:lang(ja)",
-    ".spectrum-HelpText:lang(ja) .spectrum-HelpText-text",
     ".spectrum-HelpText:lang(ko)",
-    ".spectrum-HelpText:lang(ko) .spectrum-HelpText-text",
-    ".spectrum-HelpText:lang(zh)",
-    ".spectrum-HelpText:lang(zh) .spectrum-HelpText-text"
+    ".spectrum-HelpText:lang(zh)"
   ],
   "modifiers": [
     "--mod-helptext-bottom-to-text",
@@ -46,12 +43,9 @@
     "--spectrum-helptext-bottom-to-text",
     "--spectrum-helptext-bottom-to-workflow-icon",
     "--spectrum-helptext-content-color-default",
-    "--spectrum-helptext-disabled-content-color",
     "--spectrum-helptext-font-size",
     "--spectrum-helptext-icon-color-default",
     "--spectrum-helptext-icon-size",
-    "--spectrum-helptext-line-height",
-    "--spectrum-helptext-line-height-cjk",
     "--spectrum-helptext-min-height",
     "--spectrum-helptext-text-to-visual",
     "--spectrum-helptext-top-to-text",
diff --git a/components/helptext/index.css b/components/helptext/index.css
index e9ff01d524..607a81e01c 100644
--- a/components/helptext/index.css
+++ b/components/helptext/index.css
@@ -11,11 +11,68 @@
  * governing permissions and limitations under the License.
  */
 
+@media (forced-colors: active) {
+	.spectrum-HelpText {
+		--highcontrast-helptext-content-color-default: CanvasText;
+		--highcontrast-helptext-icon-color-default: CanvasText;
+
+		forced-color-adjust: none;
+
+		.spectrum-HelpText-validationIcon,
+		.spectrum-HelpText-text {
+			forced-color-adjust: none;
+		}
+	}
+}
+
 .spectrum-HelpText {
-	--spectrum-helptext-line-height: var(--spectrum-line-height-100);
 	--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
 	--spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
-	--spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color);
+
+	&.spectrum-HelpText--sizeS {
+		--spectrum-helptext-min-height: var(--spectrum-component-height-75);
+		--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75);
+		--spectrum-helptext-font-size: var(--spectrum-font-size-75);
+		--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
+		--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small);
+		--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
+		--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
+		--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+	}
+
+	&,
+	&.spectrum-HelpText--sizeM {
+		--spectrum-helptext-min-height: var(--spectrum-component-height-75);
+		--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
+		--spectrum-helptext-font-size: var(--spectrum-font-size-75);
+		--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
+		--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium);
+		--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
+		--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
+		--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+	}
+
+	&.spectrum-HelpText--sizeL {
+		--spectrum-helptext-min-height: var(--spectrum-component-height-100);
+		--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
+		--spectrum-helptext-font-size: var(--spectrum-font-size-100);
+		--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
+		--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large);
+		--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
+		--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
+		--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+	}
+
+	&.spectrum-HelpText--sizeXL {
+		--spectrum-helptext-min-height: var(--spectrum-component-height-200);
+		--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
+		--spectrum-helptext-font-size: var(--spectrum-font-size-200);
+		--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200);
+		--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large);
+		--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
+		--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200);
+		--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+	}
 
 	&.spectrum-HelpText--neutral {
 		--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
@@ -28,81 +85,21 @@
 	}
 
 	&.is-disabled {
-		--spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color);
-		--spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color);
-	}
-
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100);
+		--spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color);
+		--spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color);
 	}
-}
-
-.spectrum-HelpText--sizeS {
-	--spectrum-helptext-min-height: var(--spectrum-component-height-75);
-	--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75);
-	--spectrum-helptext-font-size: var(--spectrum-font-size-75);
-	--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
-	--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small);
-	--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
-	--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
-	--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-}
-
-.spectrum-HelpText--sizeM {
-	--spectrum-helptext-min-height: var(--spectrum-component-height-75);
-	--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
-	--spectrum-helptext-font-size: var(--spectrum-font-size-75);
-	--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
-	--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium);
-	--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
-	--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
-	--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-}
 
-.spectrum-HelpText--sizeL {
-	--spectrum-helptext-min-height: var(--spectrum-component-height-100);
-	--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
-	--spectrum-helptext-font-size: var(--spectrum-font-size-100);
-	--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
-	--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large);
-	--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
-	--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
-	--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-}
-
-.spectrum-HelpText--sizeXL {
-	--spectrum-helptext-min-height: var(--spectrum-component-height-200);
-	--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
-	--spectrum-helptext-font-size: var(--spectrum-font-size-200);
-	--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200);
-	--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large);
-	--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
-	--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200);
-	--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
-}
-
-@media (forced-colors: active) {
-	.spectrum-HelpText {
-		--highcontrast-helptext-content-color-default: CanvasText;
-		--highcontrast-helptext-icon-color-default: CanvasText;
-
-		forced-color-adjust: none;
-
-		.spectrum-HelpText-validationIcon,
-		.spectrum-HelpText-text {
-			forced-color-adjust: none;
-		}
-	}
-}
-
-.spectrum-HelpText {
 	color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
 	display: flex;
 	font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size));
 	min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height));
 
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100));
+	}
+
 	.spectrum-HelpText-validationIcon {
 		margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual));
 		padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon));
@@ -115,15 +112,7 @@
 	.spectrum-HelpText-text {
 		padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text));
 		padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text));
-		line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height));
-	}
-
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		.spectrum-HelpText-text {
-			line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-helptext-line-height-cjk));
-		}
+		line-height: var(--mod-helptext-line-height, var(--spectrum-line-height-100));
 	}
 
 	&.spectrum-HelpText--neutral {
diff --git a/components/helptext/metadata/mods.md b/components/helptext/metadata/mods.md
deleted file mode 100644
index 41d2f53905..0000000000
--- a/components/helptext/metadata/mods.md
+++ /dev/null
@@ -1,14 +0,0 @@
-| Modifiable custom properties             |
-| ---------------------------------------- |
-| `--mod-helptext-bottom-to-text`          |
-| `--mod-helptext-bottom-to-workflow-icon` |
-| `--mod-helptext-content-color-default`   |
-| `--mod-helptext-font-size`               |
-| `--mod-helptext-icon-color-default`      |
-| `--mod-helptext-icon-size`               |
-| `--mod-helptext-line-height`             |
-| `--mod-helptext-line-height-cjk`         |
-| `--mod-helptext-min-height`              |
-| `--mod-helptext-text-to-visual`          |
-| `--mod-helptext-top-to-text`             |
-| `--mod-helptext-top-to-workflow-icon`    |
diff --git a/components/helptext/package.json b/components/helptext/package.json
index 9c49835e0c..fb3f56d294 100644
--- a/components/helptext/package.json
+++ b/components/helptext/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js
index e19f0ebef3..5274cec9f7 100644
--- a/components/helptext/stories/helptext.stories.js
+++ b/components/helptext/stories/helptext.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { HelpTextGroup } from "./helptext.test.js";
 import { NegativeTemplate, Template, VariantsTemplate } from "./template.js";
@@ -57,6 +57,10 @@ export default {
 		size: "m",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13653-196",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/icon/metadata/metadata.json b/components/icon/metadata/metadata.json
deleted file mode 100644
index 7f5d27e378..0000000000
--- a/components/icon/metadata/metadata.json
+++ /dev/null
@@ -1,176 +0,0 @@
-{
-  "sourceFile": "index.css",
-  "selectors": [
-    ".spectrum-Icon",
-    ".spectrum-Icon img",
-    ".spectrum-Icon svg",
-    ".spectrum-Icon--sizeL",
-    ".spectrum-Icon--sizeS",
-    ".spectrum-Icon--sizeXL",
-    ".spectrum-Icon--sizeXS",
-    ".spectrum-Icon--sizeXXL",
-    ".spectrum-Icon--sizeXXS",
-    ".spectrum-UIIcon",
-    ".spectrum-UIIcon--large",
-    ".spectrum-UIIcon--medium",
-    ".spectrum-UIIcon-ArrowDown100",
-    ".spectrum-UIIcon-ArrowDown200",
-    ".spectrum-UIIcon-ArrowDown300",
-    ".spectrum-UIIcon-ArrowDown400",
-    ".spectrum-UIIcon-ArrowDown500",
-    ".spectrum-UIIcon-ArrowDown600",
-    ".spectrum-UIIcon-ArrowDown75",
-    ".spectrum-UIIcon-ArrowLeft100",
-    ".spectrum-UIIcon-ArrowLeft200",
-    ".spectrum-UIIcon-ArrowLeft300",
-    ".spectrum-UIIcon-ArrowLeft400",
-    ".spectrum-UIIcon-ArrowLeft500",
-    ".spectrum-UIIcon-ArrowLeft600",
-    ".spectrum-UIIcon-ArrowLeft75",
-    ".spectrum-UIIcon-ArrowRight100",
-    ".spectrum-UIIcon-ArrowRight200",
-    ".spectrum-UIIcon-ArrowRight300",
-    ".spectrum-UIIcon-ArrowRight400",
-    ".spectrum-UIIcon-ArrowRight500",
-    ".spectrum-UIIcon-ArrowRight600",
-    ".spectrum-UIIcon-ArrowRight75",
-    ".spectrum-UIIcon-ArrowUp100",
-    ".spectrum-UIIcon-ArrowUp200",
-    ".spectrum-UIIcon-ArrowUp300",
-    ".spectrum-UIIcon-ArrowUp400",
-    ".spectrum-UIIcon-ArrowUp500",
-    ".spectrum-UIIcon-ArrowUp600",
-    ".spectrum-UIIcon-ArrowUp75",
-    ".spectrum-UIIcon-Asterisk100",
-    ".spectrum-UIIcon-Asterisk200",
-    ".spectrum-UIIcon-Asterisk300",
-    ".spectrum-UIIcon-Asterisk75",
-    ".spectrum-UIIcon-Checkmark100",
-    ".spectrum-UIIcon-Checkmark200",
-    ".spectrum-UIIcon-Checkmark300",
-    ".spectrum-UIIcon-Checkmark400",
-    ".spectrum-UIIcon-Checkmark50",
-    ".spectrum-UIIcon-Checkmark500",
-    ".spectrum-UIIcon-Checkmark600",
-    ".spectrum-UIIcon-Checkmark75",
-    ".spectrum-UIIcon-ChevronDown100",
-    ".spectrum-UIIcon-ChevronDown200",
-    ".spectrum-UIIcon-ChevronDown300",
-    ".spectrum-UIIcon-ChevronDown400",
-    ".spectrum-UIIcon-ChevronDown50",
-    ".spectrum-UIIcon-ChevronDown500",
-    ".spectrum-UIIcon-ChevronDown75",
-    ".spectrum-UIIcon-ChevronLeft100",
-    ".spectrum-UIIcon-ChevronLeft200",
-    ".spectrum-UIIcon-ChevronLeft300",
-    ".spectrum-UIIcon-ChevronLeft400",
-    ".spectrum-UIIcon-ChevronLeft50",
-    ".spectrum-UIIcon-ChevronLeft500",
-    ".spectrum-UIIcon-ChevronLeft75",
-    ".spectrum-UIIcon-ChevronRight100",
-    ".spectrum-UIIcon-ChevronRight200",
-    ".spectrum-UIIcon-ChevronRight300",
-    ".spectrum-UIIcon-ChevronRight400",
-    ".spectrum-UIIcon-ChevronRight50",
-    ".spectrum-UIIcon-ChevronRight500",
-    ".spectrum-UIIcon-ChevronRight75",
-    ".spectrum-UIIcon-ChevronUp100",
-    ".spectrum-UIIcon-ChevronUp200",
-    ".spectrum-UIIcon-ChevronUp300",
-    ".spectrum-UIIcon-ChevronUp400",
-    ".spectrum-UIIcon-ChevronUp50",
-    ".spectrum-UIIcon-ChevronUp500",
-    ".spectrum-UIIcon-ChevronUp75",
-    ".spectrum-UIIcon-CornerTriangle100",
-    ".spectrum-UIIcon-CornerTriangle200",
-    ".spectrum-UIIcon-CornerTriangle300",
-    ".spectrum-UIIcon-CornerTriangle75",
-    ".spectrum-UIIcon-Cross100",
-    ".spectrum-UIIcon-Cross200",
-    ".spectrum-UIIcon-Cross300",
-    ".spectrum-UIIcon-Cross400",
-    ".spectrum-UIIcon-Cross500",
-    ".spectrum-UIIcon-Cross600",
-    ".spectrum-UIIcon-Cross75",
-    ".spectrum-UIIcon-Dash100",
-    ".spectrum-UIIcon-Dash200",
-    ".spectrum-UIIcon-Dash300",
-    ".spectrum-UIIcon-Dash400",
-    ".spectrum-UIIcon-Dash50",
-    ".spectrum-UIIcon-Dash500",
-    ".spectrum-UIIcon-Dash600",
-    ".spectrum-UIIcon-Dash75"
-  ],
-  "modifiers": [
-    "--mod-icon-block-size",
-    "--mod-icon-color",
-    "--mod-icon-inline-size",
-    "--mod-icon-size",
-    "--mod-ui-icon-large-display",
-    "--mod-ui-icon-medium-display"
-  ],
-  "component": [
-    "--spectrum-icon-block-size",
-    "--spectrum-icon-inline-size",
-    "--spectrum-icon-size"
-  ],
-  "global": [
-    "--spectrum-arrow-icon-size-100",
-    "--spectrum-arrow-icon-size-200",
-    "--spectrum-arrow-icon-size-300",
-    "--spectrum-arrow-icon-size-400",
-    "--spectrum-arrow-icon-size-500",
-    "--spectrum-arrow-icon-size-600",
-    "--spectrum-arrow-icon-size-75",
-    "--spectrum-asterisk-icon-size-100",
-    "--spectrum-asterisk-icon-size-200",
-    "--spectrum-asterisk-icon-size-300",
-    "--spectrum-asterisk-icon-size-75",
-    "--spectrum-checkmark-icon-size-100",
-    "--spectrum-checkmark-icon-size-200",
-    "--spectrum-checkmark-icon-size-300",
-    "--spectrum-checkmark-icon-size-400",
-    "--spectrum-checkmark-icon-size-50",
-    "--spectrum-checkmark-icon-size-500",
-    "--spectrum-checkmark-icon-size-600",
-    "--spectrum-checkmark-icon-size-75",
-    "--spectrum-chevron-icon-size-100",
-    "--spectrum-chevron-icon-size-200",
-    "--spectrum-chevron-icon-size-300",
-    "--spectrum-chevron-icon-size-400",
-    "--spectrum-chevron-icon-size-50",
-    "--spectrum-chevron-icon-size-500",
-    "--spectrum-chevron-icon-size-75",
-    "--spectrum-corner-triangle-icon-size-100",
-    "--spectrum-corner-triangle-icon-size-200",
-    "--spectrum-corner-triangle-icon-size-300",
-    "--spectrum-corner-triangle-icon-size-75",
-    "--spectrum-cross-icon-size-100",
-    "--spectrum-cross-icon-size-200",
-    "--spectrum-cross-icon-size-300",
-    "--spectrum-cross-icon-size-400",
-    "--spectrum-cross-icon-size-500",
-    "--spectrum-cross-icon-size-600",
-    "--spectrum-cross-icon-size-75",
-    "--spectrum-dash-icon-size-100",
-    "--spectrum-dash-icon-size-200",
-    "--spectrum-dash-icon-size-300",
-    "--spectrum-dash-icon-size-400",
-    "--spectrum-dash-icon-size-50",
-    "--spectrum-dash-icon-size-500",
-    "--spectrum-dash-icon-size-600",
-    "--spectrum-dash-icon-size-75",
-    "--spectrum-ui-icon-large-display",
-    "--spectrum-ui-icon-medium-display",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-50",
-    "--spectrum-workflow-icon-size-75",
-    "--spectrum-workflow-icon-size-xxl",
-    "--spectrum-workflow-icon-size-xxs"
-  ],
-  "system-theme": [],
-  "passthroughs": [],
-  "high-contrast": []
-}
diff --git a/components/icon/metadata/mods.md b/components/icon/metadata/mods.md
deleted file mode 100644
index bc5f4cf56f..0000000000
--- a/components/icon/metadata/mods.md
+++ /dev/null
@@ -1,8 +0,0 @@
-| Modifiable custom properties   |
-| ------------------------------ |
-| `--mod-icon-block-size`        |
-| `--mod-icon-color`             |
-| `--mod-icon-inline-size`       |
-| `--mod-icon-size`              |
-| `--mod-ui-icon-large-display`  |
-| `--mod-ui-icon-medium-display` |
diff --git a/components/icon/package.json b/components/icon/package.json
index 6ec47bda89..0b520cce5e 100644
--- a/components/icon/package.json
+++ b/components/icon/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/icon/stories/icon.mdx b/components/icon/stories/icon.mdx
index 7a6ad6efac..6425344761 100644
--- a/components/icon/stories/icon.mdx
+++ b/components/icon/stories/icon.mdx
@@ -1,8 +1,8 @@
 import { Canvas, ArgTypes, Meta, Description, Title } from "@storybook/blocks";
 import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
+	ComponentDetails,
+	TaggedReleases,
+	PropertiesTable,
 } from "@spectrum-css/preview/blocks";
 
 import * as IconStories from "./icon.stories";
diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
index ea28140a2c..5411a9d2d0 100644
--- a/components/icon/stories/icon.stories.js
+++ b/components/icon/stories/icon.stories.js
@@ -3,7 +3,7 @@ import { size } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { IconGroup } from "./icon.test.js";
 import { Template } from "./template.js";
@@ -104,7 +104,10 @@ WithForcedColors.tags = ["!autodocs", "!dev"];
 WithForcedColors.parameters = {
 	chromatic: {
 		forcedColors: "active",
-		modes: disableDefaultModes
+		modes: {
+			...disableDefaultModes,
+			"Mobile": { disable: true },
+		},
 	},
 };
 
diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js
index 413f7c0317..408107755e 100644
--- a/components/icon/stories/template.js
+++ b/components/icon/stories/template.js
@@ -111,6 +111,7 @@ export const Template = ({
 	uiIconSizes,
 } = {}, context = {}) => {
 	const { globals = {}, loaded = {} } = context;
+
 	const scale = globals.scale ?? "medium";
 
 	if (!workflowIcons || !uiIcons || !uiIconSizes) {
diff --git a/components/illustratedmessage/metadata/metadata.json b/components/illustratedmessage/dist/metadata.json
similarity index 100%
rename from components/illustratedmessage/metadata/metadata.json
rename to components/illustratedmessage/dist/metadata.json
diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css
index 4663cd886a..6b588504d1 100644
--- a/components/illustratedmessage/index.css
+++ b/components/illustratedmessage/index.css
@@ -11,6 +11,13 @@
  * governing permissions and limitations under the License.
  */
 
+@media (forced-colors: active) {
+	.spectrum-IllustratedMessage {
+		--highcontrast-illustrated-message-illustration-color: CanvasText;
+		--highcontrast-illustrated-message-illustration-accent-color: Highlight;
+	}
+}
+
 .spectrum-IllustratedMessage {
 	/* Size & Spacing */
 	--spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
@@ -38,22 +45,6 @@
 	--spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height);
 	--spectrum-illustrated-message-description-color: var(--spectrum-body-color);
 
-	/* CJK (Chinese, Japanese, and Korean) language support */
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size);
-	}
-}
-
-@media (forced-colors: active) {
-	.spectrum-IllustratedMessage {
-		--highcontrast-illustrated-message-illustration-color: CanvasText;
-		--highcontrast-illustrated-message-illustration-accent-color: Highlight;
-	}
-}
-
-.spectrum-IllustratedMessage {
 	block-size: 100%;
 
 	display: var(--mod-illustrated-message-display, flex);
@@ -64,6 +55,13 @@
 	text-align: center;
 	pointer-events: var(--mod-illustrated-message-pointer-events, auto);
 	max-inline-size: var(--mod-illustrated-message-content-maximum-width);
+
+	/* CJK (Chinese, Japanese, and Korean) language support */
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size);
+	}
 }
 
 .spectrum-IllustratedMessage-illustration {
diff --git a/components/illustratedmessage/metadata/mods.md b/components/illustratedmessage/metadata/mods.md
deleted file mode 100644
index c22bde611e..0000000000
--- a/components/illustratedmessage/metadata/mods.md
+++ /dev/null
@@ -1,27 +0,0 @@
-| Modifiable custom properties                            |
-| ------------------------------------------------------- |
-| `--mod-illustrated-message-content-maximum-width`       |
-| `--mod-illustrated-message-description-color`           |
-| `--mod-illustrated-message-description-font-family`     |
-| `--mod-illustrated-message-description-font-size`       |
-| `--mod-illustrated-message-description-font-style`      |
-| `--mod-illustrated-message-description-font-weight`     |
-| `--mod-illustrated-message-description-line-height`     |
-| `--mod-illustrated-message-description-max-inline-size` |
-| `--mod-illustrated-message-description-pointer-events`  |
-| `--mod-illustrated-message-description-position`        |
-| `--mod-illustrated-message-description-z-index`         |
-| `--mod-illustrated-message-display`                     |
-| `--mod-illustrated-message-heading-max-inline-size`     |
-| `--mod-illustrated-message-heading-to-body`             |
-| `--mod-illustrated-message-heading-to-description`      |
-| `--mod-illustrated-message-illustration-accent-color`   |
-| `--mod-illustrated-message-illustration-color`          |
-| `--mod-illustrated-message-pointer-events`              |
-| `--mod-illustrated-message-title-color`                 |
-| `--mod-illustrated-message-title-font-family`           |
-| `--mod-illustrated-message-title-font-size`             |
-| `--mod-illustrated-message-title-font-style`            |
-| `--mod-illustrated-message-title-font-weight`           |
-| `--mod-illustrated-message-title-line-height`           |
-| `--mod-illustrated-message-title-to-heading`            |
diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json
index 56fbafbed2..8abb75aebd 100644
--- a/components/illustratedmessage/package.json
+++ b/components/illustratedmessage/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js
index 7daaa86e92..2b00b063d3 100644
--- a/components/illustratedmessage/stories/illustratedmessage.stories.js
+++ b/components/illustratedmessage/stories/illustratedmessage.stories.js
@@ -1,7 +1,7 @@
 import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { html } from "lit";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { IllustratedMessageGroup } from "./illustratedmessage.test.js";
 import { Template } from "./template.js";
@@ -44,6 +44,10 @@ export default {
 		useAccentColor: false,
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=20032-601",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/illustratedmessage/stories/template.js b/components/illustratedmessage/stories/template.js
index 58b0a69076..ace824ddae 100644
--- a/components/illustratedmessage/stories/template.js
+++ b/components/illustratedmessage/stories/template.js
@@ -11,34 +11,36 @@ export const Template = ({
 	description,
 	customClasses = [],
 	useAccentColor = false,
-} = {}, context = {}) => html`
-	<div
-		class=${classMap({
-			[rootClass]: true,
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-	>
-		${illustrationSvgMarkup(useAccentColor)}
-		${when(heading, () =>
-			Typography({
-				semantics: "heading",
-				"size": "m",
-				customClasses: [`${rootClass}-heading`],
-				content: [heading],
-			}, context)
-		)}
-		${when(description, () =>
-			Typography({
-				semantics: "body",
-				"size": "s",
-				customClasses: [`${rootClass}-description`],
-				content: [
-					...description.map((c) => (typeof c === "function" ? c({}) : c))
-				],
-			}, context)
-		)}
-	</div>
-`;
+} = {}, context = {}) => {
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+		>
+			${illustrationSvgMarkup(useAccentColor)}
+			${when(heading, () =>
+				Typography({
+					semantics: "heading",
+					"size": "m",
+					customClasses: [`${rootClass}-heading`],
+					content: [heading],
+				}, context)
+			)}
+			${when(description, () =>
+				Typography({
+					semantics: "body",
+					"size": "s",
+					customClasses: [`${rootClass}-description`],
+					content: [
+						...description.map((c) => (typeof c === "function" ? c({}) : c))
+					],
+				}, context)
+			)}
+		</div>
+	`;
+};
 
 const illustrationSvgMarkup = (withAccentColorClass = false) => html`
 	<svg
diff --git a/components/infieldbutton/metadata/metadata.json b/components/infieldbutton/dist/metadata.json
similarity index 86%
rename from components/infieldbutton/metadata/metadata.json
rename to components/infieldbutton/dist/metadata.json
index 57d7c47dc3..0f740ffe77 100644
--- a/components/infieldbutton/metadata/metadata.json
+++ b/components/infieldbutton/dist/metadata.json
@@ -2,11 +2,9 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-InfieldButton",
-    ".spectrum-InfieldButton .spectrum-InfieldButton-fill",
-    ".spectrum-InfieldButton .spectrum-InfieldButton-icon",
-    ".spectrum-InfieldButton--bottom",
     ".spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill",
-    ".spectrum-InfieldButton--top",
+    ".spectrum-InfieldButton--left .spectrum-InfieldButton-fill",
+    ".spectrum-InfieldButton--right .spectrum-InfieldButton-fill",
     ".spectrum-InfieldButton--top .spectrum-InfieldButton-fill",
     ".spectrum-InfieldButton-fill",
     ".spectrum-InfieldButton-icon",
@@ -14,10 +12,8 @@
     ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL",
     ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS",
     ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--left .spectrum-InfieldButton-fill",
     ".spectrum-InfieldButton.spectrum-InfieldButton--quiet",
     ".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--right .spectrum-InfieldButton-fill",
     ".spectrum-InfieldButton.spectrum-InfieldButton--sizeL",
     ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
     ".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL",
@@ -25,17 +21,13 @@
     ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL",
     ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS",
     ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL",
-    ".spectrum-InfieldButton:active .spectrum-InfieldButton-fill",
-    ".spectrum-InfieldButton:active .spectrum-InfieldButton-icon",
-    ".spectrum-InfieldButton:active:not(:disabled)",
+    ".spectrum-InfieldButton:active",
     ".spectrum-InfieldButton:disabled",
     ".spectrum-InfieldButton:focus-visible",
-    ".spectrum-InfieldButton:focus-visible .spectrum-InfieldButton-fill",
-    ".spectrum-InfieldButton:focus-visible .spectrum-InfieldButton-icon",
-    ".spectrum-InfieldButton:focus-visible:not(:disabled)",
-    ".spectrum-InfieldButton:hover .spectrum-InfieldButton-fill",
-    ".spectrum-InfieldButton:hover .spectrum-InfieldButton-icon",
-    ".spectrum-InfieldButton:hover:not(:disabled)"
+    ".spectrum-InfieldButton:hover",
+    ".spectrum-InfieldButton:not(:disabled):active",
+    ".spectrum-InfieldButton:not(:disabled):focus-visible",
+    ".spectrum-InfieldButton:not(:disabled):hover"
   ],
   "modifiers": [
     "--mod-infield-border-color",
@@ -136,13 +128,11 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-corner-radius-100",
-    "--spectrum-corner-radius-75",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
-    "--spectrum-gray-75",
+    "--spectrum-gray-50",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
@@ -161,5 +151,8 @@
     "--system-infield-button-stacked-top-border-radius-start-start"
   ],
   "passthroughs": [],
-  "high-contrast": ["--highcontrast-infield-button-border-color"]
+  "high-contrast": [
+    "--highcontrast-infield-button-border-color",
+    "--highcontrast-infield-button-border-color-active"
+  ]
 }
diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css
index 1fd8536ab2..ab1533eeac 100644
--- a/components/infieldbutton/index.css
+++ b/components/infieldbutton/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-InfieldButton {
 	/* Medium size is the default */
@@ -38,6 +37,7 @@
 		--mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color));
 		--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
 		--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
+
 		--mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color));
 
 		--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
@@ -102,11 +102,35 @@
 		}
 	}
 
-	&:hover:not(:disabled),
-	&:active:not(:disabled),
-	&:focus-visible:not(:disabled) {
-		@media (forced-colors: active) {
-			--highcontrast-infield-button-border-color: Highlight;
+	&:hover {
+		--mod-infield-button-background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover));
+		--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover));
+	}
+
+	&:active {
+		--mod-infield-button-background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down));
+		--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down));
+	}
+
+	&:focus-visible {
+		--mod-infield-button-background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus));
+		--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus));
+	}
+}
+
+@media (forced-colors: active) {
+	.spectrum-InfieldButton {
+		--highcontrast-infield-button-border-color: ButtonText;
+		--highcontrast-infield-button-border-color-active: Highlight;
+
+		&:disabled {
+			--highcontrast-infield-button-border-color: inherit;
+		}
+
+		&:not(:disabled):hover,
+		&:not(:disabled):active,
+		&:not(:disabled):focus-visible {
+			--highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active);
 		}
 	}
 }
@@ -125,104 +149,71 @@
 
 	padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill));
 
-	.spectrum-InfieldButton-fill {
-		block-size: 100%;
-		inline-size: 100%;
-
-		background-color: var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color));
-
-		border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width));
-		border-style: solid;
-		border-color: var(--highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color)));
-		border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
-		border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
-		border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
-		border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
-
-		padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding));
-	}
-
-	.spectrum-InfieldButton-icon {
-		color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color));
+	&:disabled {
+		cursor: auto;
 	}
 
-	&.spectrum-InfieldButton--right {
-		.spectrum-InfieldButton-fill {
-			border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
-			border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
-		}
+	&:focus-visible {
+		outline: none;
 	}
 
-	&.spectrum-InfieldButton--left {
-		.spectrum-InfieldButton-fill {
-			border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
-			border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
-		}
+	/* Stacked in-field buttons */
+	/* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */
+	&.spectrum-InfieldButton--top,
+	&.spectrum-InfieldButton--bottom {
+		block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2);
 	}
 
-	&:disabled {
-		cursor: auto;
+	&.spectrum-InfieldButton--top {
+		padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
 	}
 
-	&:hover {
-		.spectrum-InfieldButton-fill {
-			background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover));
-		}
-
-		.spectrum-InfieldButton-icon {
-			color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover));
-		}
+	&.spectrum-InfieldButton--bottom {
+		padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
 	}
+}
 
-	&:active {
-		.spectrum-InfieldButton-fill {
-			background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down));
-		}
+.spectrum-InfieldButton-fill {
+	block-size: 100%;
+	inline-size: 100%;
 
-		.spectrum-InfieldButton-icon {
-			color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down));
-		}
-	}
+	background-color: var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color));
 
-	&:focus-visible {
-		outline: none;
+	border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width));
+	border-style: solid;
+	border-color: var(--highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color)));
+	border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
+	border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
+	border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
+	border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
 
-		.spectrum-InfieldButton-fill {
-			background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus));
-		}
+	padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding));
 
-		.spectrum-InfieldButton-icon {
-			color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus));
-		}
-	}
-}
-
-.spectrum-InfieldButton-fill {
 	/* center icon */
 	display: flex;
 	align-items: center;
 	justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));
 
 	transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
-}
 
-/* Stacked in-field buttons */
-/* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */
-.spectrum-InfieldButton--top,
-.spectrum-InfieldButton--bottom {
-	block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2);
+	.spectrum-InfieldButton--right & {
+		border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+		border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+	}
+
+	.spectrum-InfieldButton--left & {
+		border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+		border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+	}
 
-	.spectrum-InfieldButton-fill {
+	.spectrum-InfieldButton--top &,
+	.spectrum-InfieldButton--bottom & {
 		box-sizing: border-box;
 		padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
 		padding-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
 	}
-}
-
-.spectrum-InfieldButton--top {
-	padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
 
-	.spectrum-InfieldButton-fill {
+	.spectrum-InfieldButton--top & {
 		padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
 		padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)));
 		border-block-end: none;
@@ -230,12 +221,8 @@
 		border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
 		border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
 	}
-}
-
-.spectrum-InfieldButton--bottom {
-	padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
 
-	.spectrum-InfieldButton-fill {
+	.spectrum-InfieldButton--bottom & {
 		padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
 		padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
 		border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start));
@@ -254,4 +241,6 @@
 
 	/* remove margin used for centering */
 	margin: 0 !important;
+
+	color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color));
 }
diff --git a/components/infieldbutton/metadata/mods.md b/components/infieldbutton/metadata/mods.md
deleted file mode 100644
index b9732dd92f..0000000000
--- a/components/infieldbutton/metadata/mods.md
+++ /dev/null
@@ -1,46 +0,0 @@
-| Modifiable custom properties                                  |
-| ------------------------------------------------------------- |
-| `--mod-infield-border-color`                                  |
-| `--mod-infield-border-color-quiet`                            |
-| `--mod-infield-button-background-color`                       |
-| `--mod-infield-button-background-color-disabled`              |
-| `--mod-infield-button-background-color-down`                  |
-| `--mod-infield-button-background-color-down-disabled`         |
-| `--mod-infield-button-background-color-down-quiet`            |
-| `--mod-infield-button-background-color-hover`                 |
-| `--mod-infield-button-background-color-hover-disabled`        |
-| `--mod-infield-button-background-color-hover-quiet`           |
-| `--mod-infield-button-background-color-key-focus`             |
-| `--mod-infield-button-background-color-key-focus-quiet`       |
-| `--mod-infield-button-background-color-quiet`                 |
-| `--mod-infield-button-background-color-quiet-disabled`        |
-| `--mod-infield-button-border-color`                           |
-| `--mod-infield-button-border-color-disabled`                  |
-| `--mod-infield-button-border-color-quiet-disabled`            |
-| `--mod-infield-button-border-radius`                          |
-| `--mod-infield-button-border-radius-reset`                    |
-| `--mod-infield-button-border-width`                           |
-| `--mod-infield-button-border-width-quiet`                     |
-| `--mod-infield-button-edge-to-fill`                           |
-| `--mod-infield-button-fill-justify-content`                   |
-| `--mod-infield-button-fill-padding`                           |
-| `--mod-infield-button-height`                                 |
-| `--mod-infield-button-icon-color`                             |
-| `--mod-infield-button-icon-color-disabled`                    |
-| `--mod-infield-button-icon-color-down`                        |
-| `--mod-infield-button-icon-color-down-disabled`               |
-| `--mod-infield-button-icon-color-hover`                       |
-| `--mod-infield-button-icon-color-hover-disabled`              |
-| `--mod-infield-button-icon-color-key-focus`                   |
-| `--mod-infield-button-icon-color-key-focus-disabled`          |
-| `--mod-infield-button-inner-edge-to-fill`                     |
-| `--mod-infield-button-stacked-border-radius-reset`            |
-| `--mod-infield-button-stacked-bottom-border-block-end-width`  |
-| `--mod-infield-button-stacked-bottom-border-radius-end-end`   |
-| `--mod-infield-button-stacked-bottom-border-radius-end-start` |
-| `--mod-infield-button-stacked-fill-padding-inline`            |
-| `--mod-infield-button-stacked-fill-padding-inner`             |
-| `--mod-infield-button-stacked-fill-padding-outer`             |
-| `--mod-infield-button-stacked-top-border-radius-start-start`  |
-| `--mod-infield-button-width`                                  |
-| `--mod-infield-button-width-stacked`                          |
diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json
index d539a7006a..eee41acaae 100644
--- a/components/infieldbutton/package.json
+++ b/components/infieldbutton/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js
index 20763450ec..0f43531379 100644
--- a/components/infieldbutton/stories/infieldbutton.stories.js
+++ b/components/infieldbutton/stories/infieldbutton.stories.js
@@ -1,7 +1,7 @@
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isFocused, isHovered, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { InfieldButtonGroup } from "./infieldbutton.test.js";
 import { Template } from "./template.js";
diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js
index 5cc77d4204..7f0b4ee8db 100644
--- a/components/infieldbutton/stories/template.js
+++ b/components/infieldbutton/stories/template.js
@@ -4,6 +4,9 @@ import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = (
 	{
diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css
index 94589be5ed..1d930d4cfe 100644
--- a/components/infieldbutton/themes/express.css
+++ b/components/infieldbutton/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-InfieldButton {
 		--spectrum-infield-button-border-width: 0;
 		--spectrum-infield-button-border-color: transparent;
diff --git a/components/infieldbutton/themes/spectrum-two.css b/components/infieldbutton/themes/spectrum-two.css
new file mode 100644
index 0000000000..69b060d4e0
--- /dev/null
+++ b/components/infieldbutton/themes/spectrum-two.css
@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-InfieldButton {
+		--spectrum-infield-button-border-width: var(--spectrum-border-width-100);
+		--spectrum-infield-button-border-color: inherit;
+
+		--spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100);
+		--spectrum-infield-button-border-radius-reset: 0;
+
+		/* Have to call these out specifically due to Express differences */
+		--spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset);
+		--spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset);
+
+		--spectrum-infield-button-background-color: var(--spectrum-gray-50);
+		--spectrum-infield-button-background-color-hover: var(--spectrum-gray-100);
+		--spectrum-infield-button-background-color-down: var(--spectrum-gray-200);
+		--spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100);
+	}
+}
diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css
index 9bb80540e2..ff95c7c2dc 100644
--- a/components/infieldbutton/themes/spectrum.css
+++ b/components/infieldbutton/themes/spectrum.css
@@ -11,18 +11,12 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-InfieldButton {
-		--spectrum-infield-button-border-width: var(--spectrum-border-width-100);
-		--spectrum-infield-button-border-color: inherit;
-
-		--spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100);
-		--spectrum-infield-button-border-radius-reset: 0;
+/* @combine .spectrum.spectrum--legacy */
 
-		/* Have to call these out specifically due to Express differences */
-		--spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset);
-		--spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset);
+@import "./spectrum-two.css";
 
+@container style(--system: legacy) {
+	.spectrum-InfieldButton {
 		--spectrum-infield-button-background-color: var(--spectrum-gray-75);
 		--spectrum-infield-button-background-color-hover: var(--spectrum-gray-200);
 		--spectrum-infield-button-background-color-down: var(--spectrum-gray-300);
diff --git a/components/inlinealert/metadata/metadata.json b/components/inlinealert/dist/metadata.json
similarity index 100%
rename from components/inlinealert/metadata/metadata.json
rename to components/inlinealert/dist/metadata.json
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 527bdff26d..ad548bab5e 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -46,9 +46,7 @@
 	--spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color);
 	--spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color);
 	--spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color);
-}
 
-.spectrum-InLineAlert {
 	position: relative;
 
 	display: inline-block;
diff --git a/components/inlinealert/metadata/mods.md b/components/inlinealert/metadata/mods.md
deleted file mode 100644
index ae70a4bbf0..0000000000
--- a/components/inlinealert/metadata/mods.md
+++ /dev/null
@@ -1,28 +0,0 @@
-| Modifiable custom properties                       |
-| -------------------------------------------------- |
-| `--mod-inlinealert-background-color`               |
-| `--mod-inlinealert-border-and-icon-color`          |
-| `--mod-inlinealert-border-and-icon-color-info`     |
-| `--mod-inlinealert-border-and-icon-color-negative` |
-| `--mod-inlinealert-border-and-icon-color-notice`   |
-| `--mod-inlinealert-border-and-icon-color-positive` |
-| `--mod-inlinealert-border-radius`                  |
-| `--mod-inlinealert-border-width`                   |
-| `--mod-inlinealert-content-color`                  |
-| `--mod-inlinealert-content-font-family`            |
-| `--mod-inlinealert-content-font-size`              |
-| `--mod-inlinealert-content-font-style`             |
-| `--mod-inlinealert-content-font-weight`            |
-| `--mod-inlinealert-content-line-height`            |
-| `--mod-inlinealert-header-color`                   |
-| `--mod-inlinealert-header-min-block-size`          |
-| `--mod-inlinealert-heading-font-family`            |
-| `--mod-inlinealert-heading-font-size`              |
-| `--mod-inlinealert-heading-font-style`             |
-| `--mod-inlinealert-heading-font-weight`            |
-| `--mod-inlinealert-heading-line-height`            |
-| `--mod-inlinealert-icon-size`                      |
-| `--mod-inlinealert-min-inline-size`                |
-| `--mod-inlinealert-spacing-edge-to-text`           |
-| `--mod-inlinealert-spacing-header-content-button`  |
-| `--mod-inlinealert-spacing-header-to-icon`         |
diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json
index 98ca3497ca..9c2d4eefc5 100644
--- a/components/inlinealert/package.json
+++ b/components/inlinealert/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index 5ef4fb5f44..6ed4d7c5f1 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -1,5 +1,5 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { InlineAlertGroup } from "./inlinealert.test.js";
 import { Template } from "./template.js";
@@ -59,6 +59,10 @@ export default {
 		isClosable: false,
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=2659-4482",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json
new file mode 100644
index 0000000000..9befaceefc
--- /dev/null
+++ b/components/link/dist/metadata.json
@@ -0,0 +1,48 @@
+{
+  "sourceFile": "index.css",
+  "selectors": [
+    ".spectrum-Link",
+    ".spectrum-Link--quiet",
+    ".spectrum-Link--quiet:hover",
+    ".spectrum-Link--secondary",
+    ".spectrum-Link--staticBlack",
+    ".spectrum-Link--staticWhite",
+    ".spectrum-Link:active",
+    ".spectrum-Link:focus-visible",
+    ".spectrum-Link:hover"
+  ],
+  "modifiers": [
+    "--mod-link-animation-duration",
+    "--mod-link-text-color",
+    "--mod-link-text-color-active",
+    "--mod-link-text-color-black",
+    "--mod-link-text-color-focus",
+    "--mod-link-text-color-hover",
+    "--mod-link-text-color-primary-active",
+    "--mod-link-text-color-primary-default",
+    "--mod-link-text-color-primary-focus",
+    "--mod-link-text-color-primary-hover",
+    "--mod-link-text-color-secondary-active",
+    "--mod-link-text-color-secondary-default",
+    "--mod-link-text-color-secondary-focus",
+    "--mod-link-text-color-secondary-hover",
+    "--mod-link-text-color-white"
+  ],
+  "component": [],
+  "global": [
+    "--spectrum-accent-content-color-default",
+    "--spectrum-accent-content-color-down",
+    "--spectrum-accent-content-color-hover",
+    "--spectrum-accent-content-color-key-focus",
+    "--spectrum-animation-duration-100",
+    "--spectrum-black",
+    "--spectrum-neutral-content-color-default",
+    "--spectrum-neutral-content-color-down",
+    "--spectrum-neutral-content-color-hover",
+    "--spectrum-neutral-content-color-key-focus",
+    "--spectrum-white"
+  ],
+  "system-theme": [],
+  "passthroughs": [],
+  "high-contrast": ["--highcontrast-link-text-color"]
+}
diff --git a/components/link/index.css b/components/link/index.css
index 5905149a6e..97a5f29122 100644
--- a/components/link/index.css
+++ b/components/link/index.css
@@ -11,44 +11,20 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-Link {
-	--spectrum-link-animation-duration: var(--spectrum-animation-duration-100);
-
-	/* Colors */
-	/* Primary */
-	--spectrum-link-text-color-primary-default: var(--spectrum-accent-content-color-default);
-	--spectrum-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover);
-	--spectrum-link-text-color-primary-active: var(--spectrum-accent-content-color-down);
-	--spectrum-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus);
-
-	/* Secondary */
-	--spectrum-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default);
-	--spectrum-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover);
-	--spectrum-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down);
-	--spectrum-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus);
-
-	--spectrum-link-text-color-white: var(--spectrum-white);
-	--spectrum-link-text-color-black: var(--spectrum-black);
-}
-
 /* Windows high contrast mode */
 @media (forced-colors: active) {
 	.spectrum-Link {
-		--highcontrast-link-text-color-primary-default: LinkText;
-		--highcontrast-link-text-color-primary-hover: LinkText;
-		--highcontrast-link-text-color-primary-active: LinkText;
-		--highcontrast-link-text-color-primary-focus: LinkText;
-
-		--highcontrast-link-text-color-secondary-default: LinkText;
-		--highcontrast-link-text-color-secondary-hover: LinkText;
-		--highcontrast-link-text-color-secondary-active: LinkText;
-		--highcontrast-link-text-color-secondary-focus: LinkText;
-
-		--highcontrast-link-text-color-white: LinkText;
-		--highcontrast-link-text-color-black: LinkText;
+		--highcontrast-link-text-color: LinkText;
 	}
 }
 
+.spectrum-Link--secondary {
+	--mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
+	--mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
+	--mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
+	--mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
+}
+
 .spectrum-Link {
 	/* Remove the gray background on active links in IE 10. */
 	background-color: transparent;
@@ -56,44 +32,33 @@
 	/* Remove gaps in links underline in iOS 8+ and Safari 8+. */
 	text-decoration-skip: objects;
 	text-decoration: underline;
-	transition: color var(--mod-link-animation-duration, var(--spectrum-link-animation-duration)) ease-in-out;
+	transition: color var(--mod-link-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
 	outline: none;
 	cursor: pointer;
 
-	color: var(--highcontrast-link-text-color-primary-default, var(--mod-link-text-color-primary-default, var(--spectrum-link-text-color-primary-default)));
+	/* @deprecated --mod-link-text-color-primary-default in favor of --mod-link-text-color */
+	color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))));
 
 	&:hover {
-		color: var(--highcontrast-link-text-color-primary-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-link-text-color-primary-hover)));
+		/* @deprecated --mod-link-text-color-primary-hover in favor of --mod-link-text-color-hover */
+		--mod-link-text-color: var(--mod-link-text-color-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover)));
 	}
 
 	&:active {
-		color: var(--highcontrast-link-text-color-primary-active, var(--mod-link-text-color-primary-active, var(--spectrum-link-text-color-primary-active)));
+		/* @deprecated --mod-link-text-color-primary-active in favor of --mod-link-text-color-active */
+		--mod-link-text-color: var(--mod-link-text-color-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down)));
 	}
 
 	&:focus-visible {
-		color: var(--highcontrast-link-text-color-primary-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-link-text-color-primary-focus)));
+		/* @deprecated --mod-link-text-color-primary-focus in favor of --mod-link-text-color-focus */
+		--mod-link-text-color: var(--mod-link-text-color-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus)));
+
 		text-decoration: underline;
 		text-decoration-style: double;
 		text-decoration-color: inherit;
 	}
 }
 
-.spectrum-Link--secondary {
-	color: var(--highcontrast-link-text-color-secondary-default, var(--mod-link-text-color-secondary-default, var(--spectrum-link-text-color-secondary-default)));
-
-	&:hover {
-		color: var(--highcontrast-link-text-color-secondary-hover, var(--mod-link-text-color-secondary-hover, var(--spectrum-link-text-color-secondary-hover)));
-	}
-
-	&:active {
-		color: var(--highcontrast-link-text-color-secondary-active, var(--mod-link-text-color-secondary-active, var(--spectrum-link-text-color-secondary-active)));
-	}
-
-	&:focus {
-		color: var(--highcontrast-link-text-color-secondary-focus, var(--mod-link-text-color-secondary-focus, var(--spectrum-link-text-color-secondary-focus)));
-	}
-}
-
 .spectrum-Link--quiet {
 	text-decoration: none;
 
@@ -103,21 +68,15 @@
 }
 
 .spectrum-Link--staticWhite {
-	color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)));
-
-	&:hover,
-	&:active,
-	&:focus {
-		color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)));
-	}
+	--mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white));
+	--mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white));
+	--mod-link-text-color-active: var(--mod-link-text-color-white, var(--spectrum-white));
+	--mod-link-text-color-focus: var(--mod-link-text-color-white, var(--spectrum-white));
 }
 
 .spectrum-Link--staticBlack {
-	color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black)));
-
-	&:hover,
-	&:active,
-	&:focus {
-		color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black)));
-	}
+	--mod-link-text-color: var(--mod-link-text-color-black, var(--spectrum-black));
+	--mod-link-text-color-hover: var(--mod-link-text-color-black, var(--spectrum-black));
+	--mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black));
+	--mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black));
 }
diff --git a/components/link/metadata/metadata.json b/components/link/metadata/metadata.json
deleted file mode 100644
index fcef4d5df7..0000000000
--- a/components/link/metadata/metadata.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
-  "sourceFile": "index.css",
-  "selectors": [
-    ".spectrum-Link",
-    ".spectrum-Link--quiet",
-    ".spectrum-Link--quiet:hover",
-    ".spectrum-Link--secondary",
-    ".spectrum-Link--secondary:active",
-    ".spectrum-Link--secondary:focus",
-    ".spectrum-Link--secondary:hover",
-    ".spectrum-Link--staticBlack",
-    ".spectrum-Link--staticBlack:active",
-    ".spectrum-Link--staticBlack:focus",
-    ".spectrum-Link--staticBlack:hover",
-    ".spectrum-Link--staticWhite",
-    ".spectrum-Link--staticWhite:active",
-    ".spectrum-Link--staticWhite:focus",
-    ".spectrum-Link--staticWhite:hover",
-    ".spectrum-Link:active",
-    ".spectrum-Link:focus-visible",
-    ".spectrum-Link:hover"
-  ],
-  "modifiers": [
-    "--mod-link-animation-duration",
-    "--mod-link-text-color-black",
-    "--mod-link-text-color-primary-active",
-    "--mod-link-text-color-primary-default",
-    "--mod-link-text-color-primary-focus",
-    "--mod-link-text-color-primary-hover",
-    "--mod-link-text-color-secondary-active",
-    "--mod-link-text-color-secondary-default",
-    "--mod-link-text-color-secondary-focus",
-    "--mod-link-text-color-secondary-hover",
-    "--mod-link-text-color-white"
-  ],
-  "component": [
-    "--spectrum-link-animation-duration",
-    "--spectrum-link-text-color-black",
-    "--spectrum-link-text-color-primary-active",
-    "--spectrum-link-text-color-primary-default",
-    "--spectrum-link-text-color-primary-focus",
-    "--spectrum-link-text-color-primary-hover",
-    "--spectrum-link-text-color-secondary-active",
-    "--spectrum-link-text-color-secondary-default",
-    "--spectrum-link-text-color-secondary-focus",
-    "--spectrum-link-text-color-secondary-hover",
-    "--spectrum-link-text-color-white"
-  ],
-  "global": [
-    "--spectrum-accent-content-color-default",
-    "--spectrum-accent-content-color-down",
-    "--spectrum-accent-content-color-hover",
-    "--spectrum-accent-content-color-key-focus",
-    "--spectrum-animation-duration-100",
-    "--spectrum-black",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-white"
-  ],
-  "system-theme": [],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-link-text-color-black",
-    "--highcontrast-link-text-color-primary-active",
-    "--highcontrast-link-text-color-primary-default",
-    "--highcontrast-link-text-color-primary-focus",
-    "--highcontrast-link-text-color-primary-hover",
-    "--highcontrast-link-text-color-secondary-active",
-    "--highcontrast-link-text-color-secondary-default",
-    "--highcontrast-link-text-color-secondary-focus",
-    "--highcontrast-link-text-color-secondary-hover",
-    "--highcontrast-link-text-color-white"
-  ]
-}
diff --git a/components/link/metadata/mods.md b/components/link/metadata/mods.md
deleted file mode 100644
index 2831c34f71..0000000000
--- a/components/link/metadata/mods.md
+++ /dev/null
@@ -1,13 +0,0 @@
-| Modifiable custom properties              |
-| ----------------------------------------- |
-| `--mod-link-animation-duration`           |
-| `--mod-link-text-color-black`             |
-| `--mod-link-text-color-primary-active`    |
-| `--mod-link-text-color-primary-default`   |
-| `--mod-link-text-color-primary-focus`     |
-| `--mod-link-text-color-primary-hover`     |
-| `--mod-link-text-color-secondary-active`  |
-| `--mod-link-text-color-secondary-default` |
-| `--mod-link-text-color-secondary-focus`   |
-| `--mod-link-text-color-secondary-hover`   |
-| `--mod-link-text-color-white`             |
diff --git a/components/link/package.json b/components/link/package.json
index ec2cebfa77..e15744971a 100644
--- a/components/link/package.json
+++ b/components/link/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js
index ff955ec089..53c71bfacb 100644
--- a/components/link/stories/link.stories.js
+++ b/components/link/stories/link.stories.js
@@ -1,6 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { LinkGroup } from "./link.test.js";
 import { TemplateWithFillerText } from "./template.js";
@@ -70,6 +70,10 @@ export default {
 		actions: {
 			handles: ["click .spectrum-Link"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=18850-110",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/link/stories/template.js b/components/link/stories/template.js
index 2c4cd925c1..a4faba0596 100644
--- a/components/link/stories/template.js
+++ b/components/link/stories/template.js
@@ -19,31 +19,33 @@ export const Template = ({
 	isVisited = false,
 	id = getRandomId("link"),
 	customClasses = [],
-} = {}) => html`
-	<a
-		class=${classMap({
-			[rootClass]: true,
-			[`${rootClass}--quiet`]: isQuiet,
-			[`${rootClass}--${variant}`]: typeof variant !== "undefined",
-			[`${rootClass}--static${capitalize(staticColor)}`]:
-				typeof staticColor !== "undefined",
-			"is-hover": isHovered,
-			"is-active": isActive,
-			"is-focus-visible": isFocused,
-			"is-visited": isVisited,
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-		id=${ifDefined(id)}
-		href=${ifDefined(url)}
-	>
-		${text}
-	</a>
-`;
+} = {}) => {
+	return html`
+		<a
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--quiet`]: isQuiet,
+				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
+				[`${rootClass}--static${capitalize(staticColor)}`]:
+					typeof staticColor !== "undefined",
+				"is-hover": isHovered,
+				"is-active": isActive,
+				"is-focus-visible": isFocused,
+				"is-visited": isVisited,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			id=${ifDefined(id)}
+			href=${ifDefined(url)}
+		>
+			${text}
+		</a>
+	`;
+};
 
 export const TemplateWithFillerText = (args, context) => html`
 	<div>
 		Hello, this is a
-		${Template({...args, context})}
+		${Template(args, context)}
 		. This is just filler text, but if you keep reading maybe something good will happen.
 	</div>
 `;
diff --git a/components/logicbutton/metadata/metadata.json b/components/logicbutton/dist/metadata.json
similarity index 74%
rename from components/logicbutton/metadata/metadata.json
rename to components/logicbutton/dist/metadata.json
index 2d52029719..6adfbf58b2 100644
--- a/components/logicbutton/metadata/metadata.json
+++ b/components/logicbutton/dist/metadata.json
@@ -16,6 +16,8 @@
   ],
   "modifiers": [
     "--mod-animation-duration-100",
+    "--mod-focus-indicator-gap",
+    "--mod-line-height-100",
     "--mod-logic-button-and-background-color",
     "--mod-logic-button-and-background-color-disabled",
     "--mod-logic-button-and-background-color-hover",
@@ -49,24 +51,25 @@
   ],
   "component": [
     "--spectrum-logic-button-and-background-color",
+    "--spectrum-logic-button-and-background-color-disabled",
     "--spectrum-logic-button-and-background-color-hover",
+    "--spectrum-logic-button-and-background-color-hover-disabled",
     "--spectrum-logic-button-and-border-color",
+    "--spectrum-logic-button-and-border-color-disabled",
     "--spectrum-logic-button-and-border-color-hover",
+    "--spectrum-logic-button-and-border-color-hover-disabled",
     "--spectrum-logic-button-and-text-color",
     "--spectrum-logic-button-border-radius",
-    "--spectrum-logic-button-border-width",
-    "--spectrum-logic-button-focus-indicator-color",
-    "--spectrum-logic-button-focus-indicator-gap",
-    "--spectrum-logic-button-focus-indicator-width",
-    "--spectrum-logic-button-font-size",
-    "--spectrum-logic-button-font-weight",
-    "--spectrum-logic-button-height",
     "--spectrum-logic-button-or-background-color",
+    "--spectrum-logic-button-or-background-color-disabled",
     "--spectrum-logic-button-or-background-color-hover",
+    "--spectrum-logic-button-or-background-color-hover-disabled",
     "--spectrum-logic-button-or-border-color",
+    "--spectrum-logic-button-or-border-color-disabled",
     "--spectrum-logic-button-or-border-color-hover",
+    "--spectrum-logic-button-or-border-color-hover-disabled",
     "--spectrum-logic-button-or-text-color",
-    "--spectrum-logic-button-padding"
+    "--spectrum-logic-button-text-color-disabled"
   ],
   "global": [
     "--spectrum-animation-duration-100",
@@ -79,15 +82,27 @@
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-font-size-100",
-    "--spectrum-gray-200",
+    "--spectrum-gray-100",
     "--spectrum-gray-500",
+    "--spectrum-line-height-100",
     "--spectrum-sans-font-family-stack",
     "--spectrum-white"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-logic-button-and-background-color-disabled",
+    "--system-logic-button-and-background-color-hover-disabled",
+    "--system-logic-button-and-border-color-disabled",
+    "--system-logic-button-and-border-color-hover-disabled",
+    "--system-logic-button-or-background-color-disabled",
+    "--system-logic-button-or-background-color-hover-disabled",
+    "--system-logic-button-or-border-color-disabled",
+    "--system-logic-button-or-border-color-hover-disabled"
+  ],
   "passthroughs": [
     "--mod-button-animation-duration",
-    "--mod-button-font-family"
+    "--mod-button-focus-indicator-gap",
+    "--mod-button-font-family",
+    "--mod-button-line-height"
   ],
   "high-contrast": [
     "--highcontrast-logic-button-and-background-color",
diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css
index 7860425cb9..4429907705 100644
--- a/components/logicbutton/index.css
+++ b/components/logicbutton/index.css
@@ -11,138 +11,59 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-LogicButton {
-	--spectrum-logic-button-height: 24px;
-	--spectrum-logic-button-padding: var(--spectrum-component-edge-to-text-50);
-	--spectrum-logic-button-font-size: var(--spectrum-font-size-100);
-	--spectrum-logic-button-font-weight: var(--spectrum-bold-font-weight);
+@import "@spectrum-css/commons/basebutton.css";
+@import "./themes/spectrum-two.css";
 
-	--spectrum-logic-button-border-width: var(--spectrum-border-width-200);
+.spectrum-LogicButton {
 	--spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100);
 
-	--spectrum-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
-	--spectrum-logic-button-focus-indicator-gap: var(--mod-logic-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
-	--spectrum-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
 	--spectrum-logic-button-and-text-color: var(--spectrum-white);
 	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
 	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
 
 	--spectrum-logic-button-or-text-color: var(--spectrum-white);
+	--spectrum-logic-button-text-color-disabled: var(--spectrum-gray-500);
 
-	&:disabled,
-	&.is-disabled {
-		--mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-200));
-		--mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-200));
-		--mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-gray-500));
-		--mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-200));
-		--mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-200));
-
-		--mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-200));
-		--mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-200));
-		--mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-gray-500));
-		--mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-200));
-		--mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-200));
-	}
-}
-
-.spectrum-LogicButton {
-	cursor: pointer;
-	user-select: none;
-
-	/* Contain halo */
-	position: relative;
-
-	/* Show the button overflow in Edge. */
-	overflow: visible;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	box-sizing: border-box;
-
-	/* Remove button the margin in Firefox and Safari. */
-	margin: 0;
-
-	/* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
-	font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
-
-	text-decoration: none;
-
-	/* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
-	text-transform: none;
-
-	/* Adjacent buttons should be aligned correctly */
-	vertical-align: top;
-
-	/* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
-	-webkit-appearance: button;
-
-	border-style: solid;
-
-	transition:
-		background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-		border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-		color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-		box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
+	@extend %spectrum-BaseButton;
+	@extend %spectrum-ButtonWithFocusRing;
 
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+	block-size: var(--mod-logic-button-height, 24px);
+	padding: var(--mod-logic-button-padding, var(--spectrum-component-edge-to-text-50));
 
-	block-size: var(--mod-logic-button-height, var(--spectrum-logic-button-height));
-	padding: var(--mod-logic-button-padding, var(--spectrum-logic-button-padding));
-
-	border-width: var(--mod-logic-button-border-width, var(--spectrum-logic-button-border-width));
+	border-width: var(--mod-logic-button-border-width, var(--spectrum-border-width-200));
 	border-radius: var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius));
 
-	font-size: var(--mod-logic-button-font-size, var(--spectrum-logic-button-font-size));
-	font-weight: var(--mod-logic-button-font-weight, var(--spectrum-logic-button-font-weight));
+	font-size: var(--mod-logic-button-font-size, var(--spectrum-font-size-100));
+	font-weight: var(--mod-logic-button-font-weight, var(--spectrum-bold-font-weight));
 	line-height: 0;
 
 	&::after {
-		border-radius: calc(var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)) + var(--spectrum-logic-button-focus-indicator-gap));
-
-		content: "";
-
-		position: absolute;
-		inset-block-start: 0;
-		inset-block-end: 0;
-		inset-inline-start: 0;
-		inset-inline-end: 0;
-
-		display: block;
-
-		margin: calc(-1 * var(--spectrum-logic-button-focus-indicator-gap));
-
-		/* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
-		transition:
-			opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out,
-			margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out;
-	}
-
-	/* Remove the inner border and padding in Firefox (normalize). */
-	&::-moz-focus-inner {
-		border-style: none;
-		padding: 0;
-	}
-
-	&:focus {
-		outline: none;
-	}
-
-	&:disabled,
-	&.is-disabled {
-		cursor: default;
+		/* Override border-radius set in %spectrum-ButtonWithFocusRing since this is not a pill button */
+		border-radius: calc(var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)) + var(--mod-logic-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)));
 	}
 
 	&:focus-visible {
 		outline: none;
 
 		&::after {
-			margin: calc(-2 * var(--spectrum-logic-button-focus-indicator-gap));
-			box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-logic-button-focus-indicator-width)) var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-logic-button-focus-indicator-color)));
+			box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-focus-indicator-thickness)) var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color)));
 		}
 	}
+
+	&:disabled,
+	&.is-disabled {
+		--mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-logic-button-and-background-color-disabled));
+		--mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-logic-button-and-border-color-disabled));
+		--mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-logic-button-text-color-disabled));
+		--mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-logic-button-and-background-color-hover-disabled));
+		--mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-logic-button-and-border-color-hover-disabled));
+
+		--mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-logic-button-or-background-color-disabled));
+		--mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-logic-button-or-border-color-disabled));
+		--mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-logic-button-text-color-disabled));
+		--mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-logic-button-or-background-color-hover-disabled));
+		--mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-logic-button-or-border-color-hover-disabled));
+	}
 }
 
 .spectrum-LogicButton--and {
@@ -170,6 +91,7 @@
 @media (forced-colors: active) {
 	.spectrum-LogicButton::after {
 		--highcontrast-logic-button-focus-indicator-color: Highlight;
+
 		forced-color-adjust: none;
 	}
 
diff --git a/components/logicbutton/metadata/mods.md b/components/logicbutton/metadata/mods.md
deleted file mode 100644
index 556f1de112..0000000000
--- a/components/logicbutton/metadata/mods.md
+++ /dev/null
@@ -1,33 +0,0 @@
-| Modifiable custom properties                             |
-| -------------------------------------------------------- |
-| `--mod-animation-duration-100`                           |
-| `--mod-logic-button-and-background-color`                |
-| `--mod-logic-button-and-background-color-disabled`       |
-| `--mod-logic-button-and-background-color-hover`          |
-| `--mod-logic-button-and-background-color-hover-disabled` |
-| `--mod-logic-button-and-border-color`                    |
-| `--mod-logic-button-and-border-color-disabled`           |
-| `--mod-logic-button-and-border-color-hover`              |
-| `--mod-logic-button-and-border-color-hover-disabled`     |
-| `--mod-logic-button-and-text-color`                      |
-| `--mod-logic-button-and-text-color-disabled`             |
-| `--mod-logic-button-border-radius`                       |
-| `--mod-logic-button-border-width`                        |
-| `--mod-logic-button-focus-indicator-color`               |
-| `--mod-logic-button-focus-indicator-gap`                 |
-| `--mod-logic-button-focus-indicator-width`               |
-| `--mod-logic-button-font-size`                           |
-| `--mod-logic-button-font-weight`                         |
-| `--mod-logic-button-height`                              |
-| `--mod-logic-button-or-background-color`                 |
-| `--mod-logic-button-or-background-color-disabled`        |
-| `--mod-logic-button-or-background-color-hover`           |
-| `--mod-logic-button-or-background-color-hover-disabled`  |
-| `--mod-logic-button-or-border-color`                     |
-| `--mod-logic-button-or-border-color-disabled`            |
-| `--mod-logic-button-or-border-color-hover`               |
-| `--mod-logic-button-or-border-color-hover-disabled`      |
-| `--mod-logic-button-or-text-color`                       |
-| `--mod-logic-button-or-text-color-disabled`              |
-| `--mod-logic-button-padding`                             |
-| `--mod-sans-font-family-stack`                           |
diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json
index 749bd772a3..7ef2688176 100644
--- a/components/logicbutton/package.json
+++ b/components/logicbutton/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js
index 22a4febf81..6b38a13127 100644
--- a/components/logicbutton/stories/logicbutton.stories.js
+++ b/components/logicbutton/stories/logicbutton.stories.js
@@ -1,6 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { LogicButtonGroup } from "./logicbutton.test.js";
 import { Template, VariantGroup } from "./template.js";
diff --git a/components/logicbutton/stories/template.js b/components/logicbutton/stories/template.js
index 889eda68e3..5b0730616e 100644
--- a/components/logicbutton/stories/template.js
+++ b/components/logicbutton/stories/template.js
@@ -2,28 +2,33 @@ import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-LogicButton",
 	customClasses = [],
 	variant = "and",
 	isDisabled = false,
-} = {}) => html`
-	<button
-		class=${classMap({
-			[rootClass]: true,
-			[`${rootClass}--${variant}`]: typeof variant !== "undefined",
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-		aria-disabled=${isDisabled ? "true" : "false"}
-		?disabled=${isDisabled}
-		type="button"
-	>
-		${variant
-			? variant.charAt(0).toUpperCase() + variant.slice(1)
-			: undefined}
-	</button>
-`;
+} = {}) => {
+	return html`
+		<button
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			aria-disabled=${isDisabled ? "true" : "false"}
+			?disabled=${isDisabled}
+			type="button"
+		>
+			${variant
+				? variant.charAt(0).toUpperCase() + variant.slice(1)
+				: undefined}
+		</button>
+	`;
+};
 
 export const VariantGroup = (args, context) => html`
 	${Template({...args}, context)}
diff --git a/components/logicbutton/themes/express.css b/components/logicbutton/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/logicbutton/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/logicbutton/themes/spectrum-two.css b/components/logicbutton/themes/spectrum-two.css
new file mode 100644
index 0000000000..c0bd0d1b3f
--- /dev/null
+++ b/components/logicbutton/themes/spectrum-two.css
@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-LogicButton {
+		--spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100);
+		--spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100);
+		--spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100);
+		--spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100);
+
+		--spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100);
+		--spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100);
+		--spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100);
+		--spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100);
+	}
+}
diff --git a/components/logicbutton/themes/spectrum.css b/components/logicbutton/themes/spectrum.css
new file mode 100644
index 0000000000..4aa43a0104
--- /dev/null
+++ b/components/logicbutton/themes/spectrum.css
@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-LogicButton {
+		--spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-200);
+		--spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-200);
+		--spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-200);
+		--spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-200);
+
+		--spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-200);
+		--spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-200);
+		--spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200);
+		--spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200);
+	}
+}
diff --git a/components/menu/metadata/metadata.json b/components/menu/dist/metadata.json
similarity index 96%
rename from components/menu/metadata/metadata.json
rename to components/menu/dist/metadata.json
index 2b9470696d..1b65cf37df 100644
--- a/components/menu/metadata/metadata.json
+++ b/components/menu/dist/metadata.json
@@ -8,6 +8,7 @@
     ".spectrum-Menu .spectrum-Menu-backIcon",
     ".spectrum-Menu .spectrum-Menu-checkmark",
     ".spectrum-Menu .spectrum-Menu-chevron",
+    ".spectrum-Menu .spectrum-Menu-chevron:dir(rtl)",
     ".spectrum-Menu .spectrum-Menu-divider",
     ".spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS",
     ".spectrum-Menu .spectrum-Menu-item",
@@ -25,16 +26,12 @@
     ".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon",
     ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
     ".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)",
-    ".spectrum-Menu--sizeL",
-    ".spectrum-Menu--sizeS",
-    ".spectrum-Menu--sizeXL",
     ".spectrum-Menu-back",
     ".spectrum-Menu-back .spectrum-Menu-sectionHeading",
     ".spectrum-Menu-back:focus-visible",
     ".spectrum-Menu-backButton",
     ".spectrum-Menu-backButton:focus-visible",
     ".spectrum-Menu-backHeading",
-    ".spectrum-Menu-chevron:dir(rtl)",
     ".spectrum-Menu-item",
     ".spectrum-Menu-item .spectrum-Menu",
     ".spectrum-Menu-item .spectrum-Menu-item",
@@ -134,10 +131,14 @@
     ".spectrum-Menu.is-selectable .spectrum-Menu-item",
     ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected",
     ".spectrum-Menu.js-focus-within .spectrum-Menu-item--collapsible.is-open[focus-within]",
+    ".spectrum-Menu.spectrum-Menu--sizeL",
+    ".spectrum-Menu.spectrum-Menu--sizeM",
+    ".spectrum-Menu.spectrum-Menu--sizeS",
+    ".spectrum-Menu.spectrum-Menu--sizeXL",
     ".spectrum-Menu:lang(ja)",
     ".spectrum-Menu:lang(ko)",
     ".spectrum-Menu:lang(zh)",
-    "[dir=\"rtl\"] .spectrum-Menu-chevron",
+    "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron",
     "[dir=\"rtl\"] .spectrum-Menu-item"
   ],
   "modifiers": [
@@ -249,6 +250,7 @@
     "--spectrum-menu-item-checkmark-width-medium",
     "--spectrum-menu-item-checkmark-width-small",
     "--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
+    "--spectrum-menu-item-corner-radius",
     "--spectrum-menu-item-description-color-default",
     "--spectrum-menu-item-description-color-disabled",
     "--spectrum-menu-item-description-color-down",
@@ -331,6 +333,7 @@
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
+    "--spectrum-corner-radius-100",
     "--spectrum-disabled-content-color",
     "--spectrum-divider-thickness-medium",
     "--spectrum-divider-thickness-small",
@@ -341,6 +344,7 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-50",
     "--spectrum-font-size-75",
+    "--spectrum-gray-1000-rgb",
     "--spectrum-gray-900",
     "--spectrum-line-height-100",
     "--spectrum-navigational-indicator-top-to-back-icon-extra-large",
@@ -365,15 +369,23 @@
     "--spectrum-text-to-visual-200",
     "--spectrum-text-to-visual-300",
     "--spectrum-text-to-visual-75",
+    "--spectrum-transparent-black-200-opacity",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",
     "--spectrum-workflow-icon-size-75"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-menu-item-background-color-down",
+    "--system-menu-item-background-color-hover",
+    "--system-menu-item-background-color-key-focus",
+    "--system-menu-item-corner-radius"
+  ],
   "passthroughs": [
     "--mod-checkbox-text-to-control",
-    "--mod-checkbox-top-to-text"
+    "--mod-checkbox-top-to-text",
+    "--mod-switch-control-label-spacing",
+    "--mod-switch-spacing-top-to-label"
   ],
   "high-contrast": [
     "--highcontrast-checkbox-highlight-color-default",
diff --git a/components/menu/index.css b/components/menu/index.css
index a19adce067..ddecebcd4e 100644
--- a/components/menu/index.css
+++ b/components/menu/index.css
@@ -11,30 +11,76 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-Menu {
-	--spectrum-menu-item-min-height: var(--spectrum-component-height-100);
-	--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100);
-	--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
-	--spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
-	--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);
+@import "./themes/spectrum-two.css";
 
-	--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
-	--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
-	--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);
+@media (forced-colors: active) {
+	.spectrum-Menu {
+		--highcontrast-menu-item-background-color-default: ButtonFace;
+		--highcontrast-menu-item-color-default: ButtonText;
+
+		--highcontrast-menu-item-background-color-focus: Highlight;
+		--highcontrast-menu-item-color-focus: HighlightText;
+
+		--highcontrast-menu-checkmark-icon-color-default: Highlight;
+
+		--highcontrast-menu-item-color-disabled: GrayText;
+		--highcontrast-menu-item-focus-indicator-color: Highlight;
 
-	--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100);
+		--highcontrast-menu-item-selected-background-color: Highlight;
+		--highcontrast-menu-item-selected-color: HighlightText;
 
-	--spectrum-menu-item-description-font-size: var(--spectrum-font-size-75);
+		@supports (color: SelectedItem) {
+			--highcontrast-menu-item-selected-background-color: SelectedItem;
+			--highcontrast-menu-item-selected-color: SelectedItemText;
+		}
 
-	--spectrum-menu-section-header-font-size: var(--spectrum-font-size-100);
-	--spectrum-menu-section-header-min-width: var(--spectrum-component-height-100);
+		.spectrum-Menu-item {
+			/* Hide unstylable readability backplates. */
+			forced-color-adjust: none;
+		}
 
-	--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);
+		.spectrum-Menu-item:hover,
+		.spectrum-Menu-item:focus {
+			.spectrum-Menu-itemCheckbox {
+				/* @passthrough start */
+				--highcontrast-checkbox-highlight-color-hover: ButtonText;
+				--highcontrast-checkbox-highlight-color-default: ButtonText;
+				/* @passthrough end */
+			}
+
+			.spectrum-Menu-itemSwitch {
+				/* @passthrough start */
+				--highcontrast-switch-handle-border-color-hover: ButtonText;
+				--highcontrast-switch-handle-border-color-selected-default: ButtonText;
+				--highcontrast-switch-handle-border-color-selected-hover: ButtonText;
+				--highcontrast-switch-background-color-selected-default: ButtonText;
+				--highcontrast-switch-background-color-selected-hover: ButtonText;
+				/* @passthrough end */
+			}
+		}
+
+		.spectrum-Menu-item--drillIn.is-open {
+			--highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color);
+			--highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color);
+		}
+
+		.spectrum-Menu-item--collapsible.is-open {
+			&:hover,
+			&:focus-within {
+				box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
+			}
 
-	--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium);
-	--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium);
-	--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium);
+			&:hover,
+			&:active,
+			&:focus,
+			&.is-focused {
+				--highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default);
+			}
+		}
+	}
+}
 
+.spectrum-Menu {
 	--spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
 	--spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
 
@@ -92,161 +138,118 @@
 	--spectrum-menu-checkmark-display-shown: block;
 	--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
 
-	--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium);
-
 	/* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */
 	--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width)));
-}
 
-.spectrum-Menu--sizeS {
-	--spectrum-menu-item-min-height: var(--spectrum-component-height-75);
-	--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75);
-	--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
-	--spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
-	--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);
+	&.spectrum-Menu--sizeS {
+		--spectrum-menu-item-min-height: var(--spectrum-component-height-75);
+		--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75);
+		--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
+		--spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
+		--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);
 
-	--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
-	--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
-	--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);
+		--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
+		--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
+		--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);
 
-	--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75);
+		--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75);
 
-	--spectrum-menu-item-description-font-size: var(--spectrum-font-size-50);
+		--spectrum-menu-item-description-font-size: var(--spectrum-font-size-50);
 
-	--spectrum-menu-section-header-font-size: var(--spectrum-font-size-75);
-	--spectrum-menu-section-header-min-width: var(--spectrum-component-height-75);
+		--spectrum-menu-section-header-font-size: var(--spectrum-font-size-75);
+		--spectrum-menu-section-header-min-width: var(--spectrum-component-height-75);
 
-	--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);
+		--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);
 
-	--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small);
-	--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small);
-	--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small);
+		--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small);
+		--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small);
+		--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small);
 
-	--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small);
-}
+		--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small);
+	}
 
-.spectrum-Menu--sizeL {
-	--spectrum-menu-item-min-height: var(--spectrum-component-height-200);
-	--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200);
-	--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
-	--spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
-	--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);
+	&,
+	&.spectrum-Menu--sizeM {
+		--spectrum-menu-item-min-height: var(--spectrum-component-height-100);
+		--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100);
+		--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
+		--spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
+		--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);
 
-	--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
-	--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
-	--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);
+		--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
+		--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
+		--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);
 
-	--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200);
+		--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100);
 
-	--spectrum-menu-item-description-font-size: var(--spectrum-font-size-100);
+		--spectrum-menu-item-description-font-size: var(--spectrum-font-size-75);
 
-	--spectrum-menu-section-header-font-size: var(--spectrum-font-size-200);
-	--spectrum-menu-section-header-min-width: var(--spectrum-component-height-200);
+		--spectrum-menu-section-header-font-size: var(--spectrum-font-size-100);
+		--spectrum-menu-section-header-min-width: var(--spectrum-component-height-100);
 
-	--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);
+		--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);
 
-	--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large);
-	--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large);
-	--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large);
+		--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium);
+		--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium);
+		--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium);
 
-	--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large);
-}
+		--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium);
+	}
 
-.spectrum-Menu--sizeXL {
-	--spectrum-menu-item-min-height: var(--spectrum-component-height-300);
-	--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300);
-	--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
-	--spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
-	--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);
+	&.spectrum-Menu--sizeL {
+		--spectrum-menu-item-min-height: var(--spectrum-component-height-200);
+		--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200);
+		--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
+		--spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
+		--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);
 
-	--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
-	--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
-	--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);
+		--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
+		--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
+		--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);
 
-	--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300);
+		--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200);
 
-	--spectrum-menu-item-description-font-size: var(--spectrum-font-size-200);
+		--spectrum-menu-item-description-font-size: var(--spectrum-font-size-100);
 
-	--spectrum-menu-section-header-font-size: var(--spectrum-font-size-300);
-	--spectrum-menu-section-header-min-width: var(--spectrum-component-height-300);
+		--spectrum-menu-section-header-font-size: var(--spectrum-font-size-200);
+		--spectrum-menu-section-header-min-width: var(--spectrum-component-height-200);
 
-	--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);
+		--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);
 
-	--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large);
-	--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large);
-	--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large);
+		--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large);
+		--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large);
+		--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large);
 
-	--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
-}
+		--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large);
+	}
 
-@media (forced-colors: active) {
-	.spectrum-Menu {
-		--highcontrast-menu-item-background-color-default: ButtonFace;
-		--highcontrast-menu-item-color-default: ButtonText;
+	&.spectrum-Menu--sizeXL {
+		--spectrum-menu-item-min-height: var(--spectrum-component-height-300);
+		--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300);
+		--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
+		--spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
+		--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);
 
-		--highcontrast-menu-item-background-color-focus: Highlight;
-		--highcontrast-menu-item-color-focus: HighlightText;
+		--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
+		--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
+		--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);
 
-		--highcontrast-menu-checkmark-icon-color-default: Highlight;
+		--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300);
 
-		--highcontrast-menu-item-color-disabled: GrayText;
-		--highcontrast-menu-item-focus-indicator-color: Highlight;
+		--spectrum-menu-item-description-font-size: var(--spectrum-font-size-200);
 
-		--highcontrast-menu-item-selected-background-color: Highlight;
-		--highcontrast-menu-item-selected-color: HighlightText;
+		--spectrum-menu-section-header-font-size: var(--spectrum-font-size-300);
+		--spectrum-menu-section-header-min-width: var(--spectrum-component-height-300);
 
-		@supports (color: SelectedItem) {
-			--highcontrast-menu-item-selected-background-color: SelectedItem;
-			--highcontrast-menu-item-selected-color: SelectedItemText;
-		}
+		--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);
 
-		.spectrum-Menu-item {
-			/* Hide unstylable readability backplates. */
-			forced-color-adjust: none;
-		}
+		--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large);
+		--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large);
+		--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large);
 
-		.spectrum-Menu-item:hover,
-		.spectrum-Menu-item:focus {
-			.spectrum-Menu-itemCheckbox {
-				/* @passthrough start */
-				--highcontrast-checkbox-highlight-color-hover: ButtonText;
-				--highcontrast-checkbox-highlight-color-default: ButtonText;
-				/* @passthrough end */
-			}
-
-			.spectrum-Menu-itemSwitch {
-				/* @passthrough start */
-				--highcontrast-switch-handle-border-color-hover: ButtonText;
-				--highcontrast-switch-handle-border-color-selected-default: ButtonText;
-				--highcontrast-switch-handle-border-color-selected-hover: ButtonText;
-				--highcontrast-switch-background-color-selected-default: ButtonText;
-				--highcontrast-switch-background-color-selected-hover: ButtonText;
-				/* @passthrough end */
-			}
-		}
-
-		.spectrum-Menu-item--drillIn.is-open {
-			--highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color);
-			--highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color);
-		}
-
-		.spectrum-Menu-item--collapsible.is-open {
-			&:hover,
-			&:focus-within {
-				box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
-			}
-
-			&:hover,
-			&:active,
-			&:focus,
-			&.is-focused {
-				--highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default);
-			}
-		}
+		--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
 	}
-}
 
-.spectrum-Menu {
 	display: inline-block;
 	inline-size: var(--mod-menu-inline-size, auto);
 	box-sizing: border-box;
@@ -263,6 +266,23 @@
 		--spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk));
 	}
 
+	/* Menus with "selectable" menu items. */
+	&.is-selectable {
+		/* Provide inline-start spacing for potential checkmarks. */
+		.spectrum-Menu-item {
+			--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden);
+
+			padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected));
+
+			/* Remove inline-start spacing once an item is selected and a checkmark appears. */
+			&.is-selected {
+				--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
+
+				padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
+			}
+		}
+	}
+
 	.spectrum-Menu-divider {
 		--spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium);
 
@@ -275,25 +295,8 @@
 		margin-block: var(--mod-menu-section-divider-margin-block, max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness)) / 2));
 		margin-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
 	}
-}
-
-/* Menus with "selectable" menu items. */
-.spectrum-Menu.is-selectable {
-	/* Provide inline-start spacing for potential checkmarks. */
-	.spectrum-Menu-item {
-		--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden);
-		padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected));
 
-		/* Remove inline-start spacing once an item is selected and a checkmark appears. */
-		&.is-selected {
-			--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
-			padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
-		}
-	}
-}
-
-/* Icons */
-.spectrum-Menu {
+	/* Icons */
 	.spectrum-Menu-itemIcon {
 		fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default)));
 		color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default)));
@@ -329,6 +332,17 @@
 
 		grid-area: chevronArea;
 		align-self: center;
+
+		&:dir(rtl) {
+			transform: rotate(-180deg);
+		}
+	}
+
+	.spectrum-Menu-backIcon {
+		margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin));
+		margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin));
+		fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
+		color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
 	}
 
 	.spectrum-Menu-itemIcon--workflowIcon {
@@ -340,19 +354,15 @@
 		block-size: var(--mod-menu-item-icon-height, var(--spectrum-menu-item-icon-height));
 		inline-size: var(--mod-menu-item-icon-width, var(--spectrum-menu-item-icon-width));
 	}
-}
-
-.spectrum-Menu-chevron:dir(rtl) {
-	transform: rotate(-180deg);
-}
 
-/* Presentational list items for sections and dividers. */
-.spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider) {
-	display: block;
-	position: relative;
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
+	/* Presentational list items for sections and dividers. */
+	li:not(.spectrum-Menu-item, .spectrum-Menu-divider) {
+		display: block;
+		position: relative;
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+	}
 }
 
 .spectrum-Menu-item {
@@ -360,6 +370,8 @@
 	position: relative;
 	align-items: center;
 
+	border-radius: var(--spectrum-menu-item-corner-radius);
+
 	box-sizing: border-box;
 
 	background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
@@ -367,6 +379,7 @@
 	line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height));
 
 	min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height));
+
 	padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text));
 	padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text));
 	padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
@@ -374,14 +387,25 @@
 	margin: 0;
 	text-decoration: none;
 
+	display: grid;
+
+	grid-template-areas:
+		".            chevronAreaCollapsible .             headingIconArea  sectionHeadingArea  .         .           .                 "
+		"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea        valueArea actionsArea chevronAreaDrillIn"
+		".            .                      .             .        descriptionArea  .         .           .                 "
+		".            .                      .             .        submenuArea      .         .           .                 ";
+
+	grid-template-columns: auto auto auto auto 1fr auto auto auto;
+	grid-template-rows: 1fr auto;
+
 	.spectrum-Menu-itemCheckbox {
 		--mod-checkbox-top-to-text: 0;
 		--mod-checkbox-text-to-control: 0;
+
 		min-block-size: 0;
 
 		.spectrum-Checkbox-box {
 			margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
-
 			margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox));
 			margin-block-end: 0;
 		}
@@ -395,161 +419,188 @@
 			margin-block-end: 0;
 		}
 	}
-}
 
-.spectrum-Menu-item {
-	display: grid;
-	grid-template-areas:
-		".            chevronAreaCollapsible .             headingIconArea  sectionHeadingArea  .         .           .                 "
-		"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea        valueArea actionsArea chevronAreaDrillIn"
-		".            .                      .             .        descriptionArea  .         .           .                 "
-		".            .                      .             .        submenuArea      .         .           .                 ";
+	.spectrum-Menu-item {
+		display: grid;
+		grid-template-areas: "submenuItemLabelArea submenuItemValueArea";
+		grid-template-columns: auto auto;
+		grid-template-rows: 1fr auto;
 
-	grid-template-columns: auto auto auto auto 1fr auto auto auto;
-	grid-template-rows: 1fr auto;
-}
+		.spectrum-Menu-itemLabel {
+			grid-area: submenuItemLabelArea;
+		}
 
-.spectrum-Menu-item .spectrum-Menu-item {
-	display: grid;
-	grid-template-areas: "submenuItemLabelArea submenuItemValueArea";
-	grid-template-columns: auto auto;
-	grid-template-rows: 1fr auto;
-}
+		.spectrum-Menu-itemValue {
+			grid-area: submenuItemValueArea;
+		}
+	}
 
-.spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemLabel {
-	grid-area: submenuItemLabelArea;
-}
+	&:focus,
+	&.is-focused {
+		background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus)));
+		outline: none;
 
-.spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemValue {
-	grid-area: submenuItemValueArea;
-}
+		> .spectrum-Menu-itemLabel {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus)));
+		}
 
-.spectrum-Menu-item:focus,
-.spectrum-Menu-item.is-focused {
-	background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus)));
-	outline: none;
+		> .spectrum-Menu-sectionHeading {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
+		}
 
-	> .spectrum-Menu-itemLabel {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus)));
-	}
+		> .spectrum-Menu-itemDescription {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus)));
+		}
 
-	> .spectrum-Menu-sectionHeading {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
-	}
+		> .spectrum-Menu-itemValue {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
+		}
 
-	> .spectrum-Menu-itemDescription {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus)));
-	}
+		> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
+			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
+		}
 
-	> .spectrum-Menu-itemValue {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
-	}
+		> .spectrum-Menu-chevron {
+			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+		}
 
-	> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
-		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
+		> .spectrum-Menu-checkmark {
+			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
+		}
 	}
 
-	> .spectrum-Menu-chevron {
-		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+	&:dir(rtl) {
+		--spectrum-menu-item-focus-indicator-direction-scalar: -1;
 	}
 
-	> .spectrum-Menu-checkmark {
-		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
-	}
-}
+	&:hover {
+		background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
 
-.spectrum-Menu-item:focus-visible,
-.spectrum-Menu-back:focus-visible {
-	box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
-}
+		> .spectrum-Menu-itemLabel {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover)));
+		}
 
-.spectrum-Menu-item:dir(rtl) {
-	--spectrum-menu-item-focus-indicator-direction-scalar: -1;
-}
+		> .spectrum-Menu-sectionHeading {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
+		}
 
-.spectrum-Menu-item:hover {
-	background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
+		> .spectrum-Menu-itemDescription {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover)));
+		}
 
-	> .spectrum-Menu-itemLabel {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover)));
-	}
+		> .spectrum-Menu-itemValue {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
+		}
 
-	> .spectrum-Menu-sectionHeading {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
-	}
+		> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
+			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
+		}
 
-	> .spectrum-Menu-itemDescription {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover)));
-	}
+		> .spectrum-Menu-chevron {
+			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+		}
 
-	> .spectrum-Menu-itemValue {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
+		> .spectrum-Menu-checkmark {
+			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
+		}
 	}
 
-	> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
-		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
-	}
+	&:active {
+		background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down)));
 
-	> .spectrum-Menu-chevron {
-		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
-	}
+		> .spectrum-Menu-itemLabel {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
+		}
 
-	> .spectrum-Menu-checkmark {
-		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
-	}
-}
+		> .spectrum-Menu-sectionHeading {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
+		}
 
-.spectrum-Menu-item:active {
-	background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down)));
+		> .spectrum-Menu-itemDescription {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down)));
+		}
 
-	> .spectrum-Menu-itemLabel {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
-	}
+		> .spectrum-Menu-itemValue {
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
+		}
 
-	> .spectrum-Menu-sectionHeading {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
-	}
+		> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
+			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
+		}
 
-	> .spectrum-Menu-itemDescription {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down)));
-	}
+		> .spectrum-Menu-chevron {
+			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+		}
 
-	> .spectrum-Menu-itemValue {
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
+		> .spectrum-Menu-checkmark {
+			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
+			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
+		}
 	}
 
-	> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
-		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
-	}
+	/* Disabled menu items */
+	&.is-disabled,
+	&[aria-disabled="true"] {
+		background-color: transparent;
 
-	> .spectrum-Menu-chevron {
-		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
-	}
+		.spectrum-Menu-itemLabel,
+		.spectrum-Menu-sectionHeading,
+		.spectrum-Menu-itemValue {
+			color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
+		}
 
-	> .spectrum-Menu-checkmark {
-		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
-		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
+		.spectrum-Menu-itemDescription {
+			color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
+		}
+
+		.spectrum-Menu-itemIcon {
+			color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+			fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+		}
+
+		&:hover {
+			cursor: default;
+			background-color: transparent;
+
+			.spectrum-Menu-itemLabel,
+			.spectrum-Menu-sectionHeading,
+			.spectrum-Menu-itemValue {
+				color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
+			}
+
+			.spectrum-Menu-itemDescription {
+				color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
+			}
+
+			.spectrum-Menu-itemIcon {
+				color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+				fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+			}
+		}
 	}
 }
 
-.spectrum-Menu-item--collapsible .spectrum-Menu-itemIcon {
-	grid-area: headingIconArea;
+.spectrum-Menu-item:focus-visible,
+.spectrum-Menu-back:focus-visible {
+	box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
 }
 
-.is-selectableMultiple .spectrum-Menu-item {
-	align-items: start;
-}
+.is-selectableMultiple {
+	.spectrum-Menu-item {
+		align-items: start;
+	}
 
-.is-selectableMultiple .spectrum-Menu-itemCheckbox {
-	grid-area: checkmarkArea;
+	.spectrum-Menu-itemCheckbox {
+		grid-area: checkmarkArea;
+	}
 }
 
 .spectrum-Menu-itemSelection {
@@ -557,13 +608,26 @@
 }
 
 .spectrum-Menu-itemLabel {
+	/* @passthrough start -- Switch spacing overrides */
+	--mod-switch-control-label-spacing: 0;
+	--mod-switch-spacing-top-to-label: 0;
+	/* @passthrough end */
+
 	grid-area: labelArea;
 	font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
 	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default)));
+
+	hyphens: auto;
+	overflow-wrap: break-word;
 }
 
 .spectrum-Menu-itemValue {
 	grid-area: valueArea;
+	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default)));
+	font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
+	justify-self: end;
+	align-self: start;
+	margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
 }
 
 .spectrum-Menu-itemActions {
@@ -572,39 +636,22 @@
 	margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
 }
 
-.spectrum-Menu-item--collapsible .spectrum-Menu-chevron {
-	grid-area: chevronAreaCollapsible;
-}
-
 .spectrum-Menu-sectionHeading {
 	grid-area: sectionHeadingArea;
 	grid-column: 1 / -1;
-}
-
-.spectrum-Menu-item--collapsible .spectrum-Menu-sectionHeading {
-	/*
-    start at 5th column, to account for icons & match sectionHeadingArea
-    ". chevronAreaCollapsible . iconArea sectionHeadingArea  .  .  ."
-    stretch to last column
-  	*/
-	grid-column: 5 / -1;
+	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
+	display: block;
+	font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size));
+	font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
+	line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
+	min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width));
+	padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
+	padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
+	padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
 }
 
 .spectrum-Menu-itemDescription {
 	grid-area: descriptionArea;
-}
-
-.spectrum-Menu-item--collapsible .spectrum-Menu,
-.spectrum-Menu-item .spectrum-Menu {
-	grid-area: submenuArea;
-	grid-column: 1 / -1;
-}
-
-.spectrum-Menu-item--drillIn .spectrum-Menu-chevron {
-	grid-area: chevronAreaDrillIn;
-}
-
-.spectrum-Menu-itemDescription {
 	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-description-color-default, var(--spectrum-menu-item-description-color-default)));
 	font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size));
 	hyphens: auto;
@@ -613,39 +660,25 @@
 	line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height));
 }
 
-.spectrum-Menu-itemLabel {
-	hyphens: auto;
-	overflow-wrap: break-word;
-}
-
-.spectrum-Menu-itemValue {
-	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default)));
-	font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
-	justify-self: end;
-	align-self: start;
-	margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
-}
-
 .spectrum-Menu-itemLabel--truncate {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 }
 
-.spectrum-Menu-sectionHeading {
-	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
-	display: block;
-	font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size));
-	font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
-	line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
-	min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width));
-	padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
-	padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
-	padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
-}
-
-/* collapsible sub-menus */
 .spectrum-Menu-item--collapsible {
+	.spectrum-Menu-sectionHeading {
+		/*
+		start at 5th column, to account for icons & match sectionHeadingArea
+		". chevronAreaCollapsible . iconArea sectionHeadingArea  .  .  ."
+		stretch to last column
+		*/
+		grid-column: 5 / -1;
+
+		padding-inline: 0;
+	}
+
+	/* collapsible sub-menus */
 	&.is-open {
 		padding-block-end: 0;
 
@@ -661,43 +694,52 @@
 		background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
 	}
 
-	.spectrum-Menu {
-		display: none;
-	}
-
-	.spectrum-Menu.is-open {
-		display: block;
-	}
-
-	.spectrum-Menu-sectionHeading {
-		padding-inline: 0;
+	.spectrum-Menu-itemIcon {
+		grid-area: headingIconArea;
 	}
 
 	> .spectrum-Menu-itemIcon {
 		padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
 		padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
 	}
-}
 
-/*
-  assume that if an item is collapsible, it will
-  have a chevron and we need to adjust position of submenu items to account for that
-*/
-.spectrum-Menu-item--collapsible .spectrum-Menu {
-	/* reposition the entire submenu to be flush left with the parent menu item via negative margins */
-	margin-inline: calc(var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)) * -1);
+	.spectrum-Menu-chevron {
+		grid-area: chevronAreaCollapsible;
+	}
 
-	.spectrum-Menu-item {
-		/*
-		allow item to take up full width of parent,
-		but make the content start where the parent item's label text starts
-		*/
-		padding-inline-start: var(--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start, var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start));
+	/*
+	assume that if an item is collapsible, it will
+	have a chevron and we need to adjust position of submenu items to account for that
+	*/
+	.spectrum-Menu {
+		display: none;
+
+		/* reposition the entire submenu to be flush left with the parent menu item via negative margins */
+		margin-inline: calc(var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)) * -1);
+
+		&.is-open {
+			display: block;
+		}
+
+		.spectrum-Menu-item {
+			/*
+			allow item to take up full width of parent,
+			but make the content start where the parent item's label text starts
+			*/
+			padding-inline-start: var(--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start, var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start));
+		}
 	}
 }
 
+.spectrum-Menu-item--collapsible .spectrum-Menu,
+.spectrum-Menu-item .spectrum-Menu {
+	grid-area: submenuArea;
+	grid-column: 1 / -1;
+}
+
 .spectrum-Menu-item--drillIn {
 	.spectrum-Menu-chevron {
+		grid-area: chevronAreaDrillIn;
 		fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default)));
 		color: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default)));
 		margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
@@ -746,47 +788,6 @@
 	}
 }
 
-/* Disabled menu items */
-.spectrum-Menu-item.is-disabled,
-.spectrum-Menu-item[aria-disabled="true"] {
-	background-color: transparent;
-
-	.spectrum-Menu-itemLabel,
-	.spectrum-Menu-sectionHeading,
-	.spectrum-Menu-itemValue {
-		color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
-	}
-
-	.spectrum-Menu-itemDescription {
-		color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
-	}
-
-	.spectrum-Menu-itemIcon {
-		fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
-		color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
-	}
-
-	&:hover {
-		cursor: default;
-		background-color: transparent;
-
-		.spectrum-Menu-itemLabel,
-		.spectrum-Menu-sectionHeading,
-		.spectrum-Menu-itemValue {
-			color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
-		}
-
-		.spectrum-Menu-itemDescription {
-			color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
-		}
-
-		.spectrum-Menu-itemIcon {
-			fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
-			color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
-		}
-	}
-}
-
 /* Tray submenu */
 .spectrum-Menu-back {
 	display: flex;
@@ -821,10 +822,3 @@
 	font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
 	line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
 }
-
-.spectrum-Menu .spectrum-Menu-backIcon {
-	margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin));
-	margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin));
-	fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default));
-	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default));
-}
diff --git a/components/menu/metadata/mods.md b/components/menu/metadata/mods.md
deleted file mode 100644
index 923927cd3f..0000000000
--- a/components/menu/metadata/mods.md
+++ /dev/null
@@ -1,78 +0,0 @@
-| Modifiable custom properties                                       |
-| ------------------------------------------------------------------ |
-| `--mod-menu-back-heading-color`                                    |
-| `--mod-menu-back-icon-color-default`                               |
-| `--mod-menu-back-icon-margin-block`                                |
-| `--mod-menu-back-icon-margin-inline`                               |
-| `--mod-menu-back-padding-block-end`                                |
-| `--mod-menu-back-padding-block-start`                              |
-| `--mod-menu-back-padding-inline-end`                               |
-| `--mod-menu-back-padding-inline-start`                             |
-| `--mod-menu-checkmark-display`                                     |
-| `--mod-menu-checkmark-icon-color-default`                          |
-| `--mod-menu-checkmark-icon-color-down`                             |
-| `--mod-menu-checkmark-icon-color-focus`                            |
-| `--mod-menu-checkmark-icon-color-hover`                            |
-| `--mod-menu-collapsible-icon-color`                                |
-| `--mod-menu-drillin-icon-color-default`                            |
-| `--mod-menu-drillin-icon-color-down`                               |
-| `--mod-menu-drillin-icon-color-focus`                              |
-| `--mod-menu-drillin-icon-color-hover`                              |
-| `--mod-menu-inline-size`                                           |
-| `--mod-menu-item-background-color-default`                         |
-| `--mod-menu-item-background-color-down`                            |
-| `--mod-menu-item-background-color-hover`                           |
-| `--mod-menu-item-background-color-key-focus`                       |
-| `--mod-menu-item-bottom-edge-to-text`                              |
-| `--mod-menu-item-checkmark-height`                                 |
-| `--mod-menu-item-checkmark-width`                                  |
-| `--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start` |
-| `--mod-menu-item-description-color-default`                        |
-| `--mod-menu-item-description-color-disabled`                       |
-| `--mod-menu-item-description-color-down`                           |
-| `--mod-menu-item-description-color-focus`                          |
-| `--mod-menu-item-description-color-hover`                          |
-| `--mod-menu-item-description-font-size`                            |
-| `--mod-menu-item-description-line-height`                          |
-| `--mod-menu-item-description-line-height-cjk`                      |
-| `--mod-menu-item-focus-indicator-color`                            |
-| `--mod-menu-item-focus-indicator-width`                            |
-| `--mod-menu-item-icon-height`                                      |
-| `--mod-menu-item-icon-width`                                       |
-| `--mod-menu-item-label-content-color-default`                      |
-| `--mod-menu-item-label-content-color-disabled`                     |
-| `--mod-menu-item-label-content-color-down`                         |
-| `--mod-menu-item-label-content-color-focus`                        |
-| `--mod-menu-item-label-content-color-hover`                        |
-| `--mod-menu-item-label-font-size`                                  |
-| `--mod-menu-item-label-icon-color-default`                         |
-| `--mod-menu-item-label-icon-color-disabled`                        |
-| `--mod-menu-item-label-icon-color-down`                            |
-| `--mod-menu-item-label-icon-color-focus`                           |
-| `--mod-menu-item-label-icon-color-hover`                           |
-| `--mod-menu-item-label-inline-edge-to-content`                     |
-| `--mod-menu-item-label-line-height`                                |
-| `--mod-menu-item-label-line-height-cjk`                            |
-| `--mod-menu-item-label-text-to-visual`                             |
-| `--mod-menu-item-label-to-description-spacing`                     |
-| `--mod-menu-item-label-to-value-area-min-spacing`                  |
-| `--mod-menu-item-min-height`                                       |
-| `--mod-menu-item-selectable-edge-to-text-not-selected`             |
-| `--mod-menu-item-text-to-control`                                  |
-| `--mod-menu-item-top-edge-to-text`                                 |
-| `--mod-menu-item-top-to-action`                                    |
-| `--mod-menu-item-top-to-checkbox`                                  |
-| `--mod-menu-item-top-to-checkmark`                                 |
-| `--mod-menu-item-value-color-default`                              |
-| `--mod-menu-item-value-color-down`                                 |
-| `--mod-menu-item-value-color-focus`                                |
-| `--mod-menu-item-value-color-hover`                                |
-| `--mod-menu-section-divider-margin-block`                          |
-| `--mod-menu-section-header-bottom-edge-to-text`                    |
-| `--mod-menu-section-header-color`                                  |
-| `--mod-menu-section-header-font-size`                              |
-| `--mod-menu-section-header-font-weight`                            |
-| `--mod-menu-section-header-line-height`                            |
-| `--mod-menu-section-header-line-height-cjk`                        |
-| `--mod-menu-section-header-min-width`                              |
-| `--mod-menu-section-header-top-edge-to-text`                       |
diff --git a/components/menu/package.json b/components/menu/package.json
index 90fbeb659b..5de81ee742 100644
--- a/components/menu/package.json
+++ b/components/menu/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js
index acf1e41bb9..bb2b83e199 100644
--- a/components/menu/stories/menu.stories.js
+++ b/components/menu/stories/menu.stories.js
@@ -2,7 +2,7 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isFocused, isHovered, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { MenuItemGroup, MenuTraySubmenu, MenuWithVariants } from "./menu.test.js";
 import { DisabledItemGroup, OverflowGroup, SelectionGroup, SubmenuInPopover, Template } from "./template.js";
@@ -82,6 +82,10 @@ export default {
 				height: "300px"
 			}
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=37252-553",
+		},
 		packageJson,
 		metadata,
 	},
@@ -247,6 +251,9 @@ TraySubmenu.parameters = {
 			height: "400px"
 		}
 	},
+	viewport: {
+		defaultViewport: "mobile2"
+	},
 };
 
 export const MenuItem = MenuItemGroup.bind({});
@@ -317,6 +324,12 @@ MenuItem.args = {
 	isSelected: false,
 	hasActions: false,
 };
+MenuItem.parameters = {
+	design: {
+		type: "figma",
+		url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=37252-2242&node-type=frame&t=Kcz7zeePp3PeRusJ-11",
+	},
+};
 
 /**
  * This option will display submenus in a collapsed, nested format within the parent menu’s container. It can be used
diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js
index 45b9668041..88b474b663 100644
--- a/components/menu/stories/template.js
+++ b/components/menu/stories/template.js
@@ -13,6 +13,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 /**
  * Get the tray submenu back arrow name with scale number (defined in design spec).
diff --git a/components/menu/themes/express.css b/components/menu/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/menu/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/tokens/dist/css/express/darkest-vars.css b/components/menu/themes/spectrum-two.css
similarity index 54%
rename from tokens/dist/css/express/darkest-vars.css
rename to components/menu/themes/spectrum-two.css
index 021741c833..644648a5ed 100644
--- a/tokens/dist/css/express/darkest-vars.css
+++ b/components/menu/themes/spectrum-two.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum--express.spectrum--darkest {
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
+@container style(--system: spectrum) {
+	.spectrum-Menu {
+		--spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100);
+	}
 }
diff --git a/tokens/custom-express/large-vars.css b/components/menu/themes/spectrum.css
similarity index 52%
rename from tokens/custom-express/large-vars.css
rename to components/menu/themes/spectrum.css
index 7eb1e1b90c..55f5d32adf 100644
--- a/tokens/custom-express/large-vars.css
+++ b/components/menu/themes/spectrum.css
@@ -11,15 +11,15 @@
  * governing permissions and limitations under the License.
  */
 
-/* This file contains overrides and additions to core tokens */
+/* @combine .spectrum.spectrum--legacy */
 
-.spectrum--express.spectrum--large {
-	--spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
-	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
+@import "./spectrum-two.css";
 
-	--spectrum-dialog-confirm-border-radius: 8px;
-
-	--spectrum-dial-border-radius: 15px;
-
-	--spectrum-assetcard-focus-ring-border-radius: 12px;
+@container style(--system: legacy) {
+	.spectrum-Menu {
+		--spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-corner-radius: 0;
+	}
 }
diff --git a/components/meter/CHANGELOG.md b/components/meter/CHANGELOG.md
new file mode 100644
index 0000000000..420e6f23d0
--- /dev/null
+++ b/components/meter/CHANGELOG.md
@@ -0,0 +1 @@
+# Change Log
diff --git a/components/meter/README.md b/components/meter/README.md
new file mode 100644
index 0000000000..16c36aa919
--- /dev/null
+++ b/components/meter/README.md
@@ -0,0 +1,7 @@
+# @spectrum-css/meter
+
+> The Spectrum CSS meter component
+
+This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
+
+See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details.
diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json
new file mode 100644
index 0000000000..9bfe3424ce
--- /dev/null
+++ b/components/meter/dist/metadata.json
@@ -0,0 +1,43 @@
+{
+  "sourceFile": "index.css",
+  "selectors": [
+    ".spectrum-Meter",
+    ".spectrum-Meter.is-negative",
+    ".spectrum-Meter.is-notice",
+    ".spectrum-Meter.is-positive",
+    ".spectrum-Meter.spectrum-Meter--sizeL",
+    ".spectrum-Meter.spectrum-Meter--sizeS"
+  ],
+  "modifiers": [
+    "--mod-meter-inline-size",
+    "--mod-meter-max-width",
+    "--mod-meter-min-width"
+  ],
+  "component": [
+    "--spectrum-meter-default-width",
+    "--spectrum-meter-maximum-width",
+    "--spectrum-meter-minimum-width",
+    "--spectrum-meter-thickness-large",
+    "--spectrum-meter-thickness-small"
+  ],
+  "global": [
+    "--spectrum-component-top-to-text-200",
+    "--spectrum-component-top-to-text-75",
+    "--spectrum-font-size-100",
+    "--spectrum-font-size-75",
+    "--spectrum-negative-visual-color",
+    "--spectrum-notice-visual-color",
+    "--spectrum-positive-visual-color"
+  ],
+  "system-theme": [],
+  "passthroughs": [
+    "--mod-progressbar-fill-color",
+    "--mod-progressbar-font-size",
+    "--mod-progressbar-max-size",
+    "--mod-progressbar-min-size",
+    "--mod-progressbar-size-default",
+    "--mod-progressbar-spacing-top-to-text",
+    "--mod-progressbar-thickness"
+  ],
+  "high-contrast": []
+}
diff --git a/components/meter/index.css b/components/meter/index.css
new file mode 100644
index 0000000000..b51a393aa7
--- /dev/null
+++ b/components/meter/index.css
@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @passthrough start */
+.spectrum-Meter {
+	--mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-default-width));
+	--mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width));
+	--mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width));
+
+	&,
+	&.spectrum-Meter--sizeS {
+		--mod-progressbar-thickness: var(--spectrum-meter-thickness-small);
+		--mod-progressbar-font-size: var(--spectrum-font-size-75);
+		--mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+	}
+
+	&.spectrum-Meter--sizeL {
+		--mod-progressbar-thickness: var(--spectrum-meter-thickness-large);
+		--mod-progressbar-font-size: var(--spectrum-font-size-100);
+		--mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
+	}
+
+	&.is-positive {
+		--mod-progressbar-fill-color: var(--spectrum-positive-visual-color);
+	}
+
+	&.is-notice {
+		--mod-progressbar-fill-color: var(--spectrum-notice-visual-color);
+	}
+
+	&.is-negative {
+		--mod-progressbar-fill-color: var(--spectrum-negative-visual-color);
+	}
+}
+/* @passthrough end */
diff --git a/components/meter/package.json b/components/meter/package.json
new file mode 100644
index 0000000000..77f52f4905
--- /dev/null
+++ b/components/meter/package.json
@@ -0,0 +1,58 @@
+{
+	"name": "@spectrum-css/meter",
+	"version": "0.0.0",
+	"description": "The Spectrum CSS meter component",
+	"license": "Apache-2.0",
+	"author": "Adobe",
+	"homepage": "https://opensource.adobe.com/spectrum-css/meter",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/adobe/spectrum-css.git",
+		"directory": "components/meter"
+	},
+	"bugs": {
+		"url": "https://github.com/adobe/spectrum-css/issues"
+	},
+	"exports": {
+		".": "./dist/index.css",
+		"./*.md": "./*.md",
+		"./dist/*": "./dist/*",
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
+	"main": "dist/index.css",
+	"files": [
+		"dist/*",
+		"*.md",
+		"package.json",
+		"stories/*",
+		"metadata/*"
+	],
+	"peerDependencies": {
+		"@spectrum-css/progressbar": ">=4",
+		"@spectrum-css/tokens": ">=15"
+	},
+	"devDependencies": {
+		"@spectrum-css/progressbar": "workspace:^",
+		"@spectrum-css/tokens": "workspace:^"
+	},
+	"keywords": [
+		"spectrum",
+		"css",
+		"design system",
+		"adobe"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"spectrum": [
+		{
+			"guidelines": "https://spectrum.adobe.com/page/meter",
+			"rootClass": "spectrum-Meter",
+			"swc": "https://opensource.adobe.com/spectrum-web-components/components/meter/"
+		}
+	]
+}
diff --git a/components/meter/project.json b/components/meter/project.json
new file mode 100644
index 0000000000..480296f64f
--- /dev/null
+++ b/components/meter/project.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "meter",
+	"tags": ["component"],
+	"targets": {
+		"build": {},
+		"clean": {},
+		"compare": {},
+		"format": {},
+		"lint": {},
+		"report": {},
+		"test": {
+			"defaultConfiguration": "scope"
+		},
+		"validate": {}
+	}
+}
diff --git a/components/progressbar/stories/meter.stories.js b/components/meter/stories/meter.stories.js
similarity index 89%
rename from components/progressbar/stories/meter.stories.js
rename to components/meter/stories/meter.stories.js
index 1f7129bdfa..15603bc9d7 100644
--- a/components/progressbar/stories/meter.stories.js
+++ b/components/meter/stories/meter.stories.js
@@ -1,11 +1,11 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import { default as ProgressBar } from "@spectrum-css/progressbar/stories/progressbar.stories.js";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
-import { FillGroup, Template } from "./meter.template.js";
 import { MeterGroup } from "./meter.test.js";
-import { default as ProgressBar } from "./progressbar.stories";
+import { FillGroup, Template } from "./template.js";
 
 /**
  * The meter component is a visual representations of a quantity or an achievement. The progress is determined by user actions, rather than system actions.
@@ -16,7 +16,7 @@ import { default as ProgressBar } from "./progressbar.stories";
  */
 export default {
 	title: "Meter",
-	component: "ProgressBar",
+	component: "Meter",
 	argTypes: {
 		...ProgressBar.argTypes,
 		size: size(["s", "l"]),
@@ -41,6 +41,10 @@ export default {
 		label: "Storage space",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=33840-90",
+		},
 		packageJson,
 		metadata,
 	},
@@ -78,14 +82,9 @@ Sizing.parameters = {
  *
  * By default, the meter has a informative, blue fill to show the value. This can be used to represent a neutral or non-semantic value. The positive variant has a green fill, representing a positive semantic value. The notice variant has an orange fill, and can be used to warn users about a situation that may need to be addressed soon. The negative variant has a red fill, and can be used to warn users about a critical situation that needs their urgent attention.
 */
-export const FillColors = (args, context) => FillGroup({
-	variants: ["info", "positive", "negative", "notice"],
-	...args,
-}, context);
+export const FillColors = FillGroup.bind({});
 FillColors.storyName = "Fill colors";
-FillColors.args = {
-	value: 50,
-};
+FillColors.args = Default.args;
 FillColors.tags = ["!dev"];
 FillColors.parameters = {
 	chromatic: { disableSnapshot: true },
diff --git a/components/progressbar/stories/meter.test.js b/components/meter/stories/meter.test.js
similarity index 91%
rename from components/progressbar/stories/meter.test.js
rename to components/meter/stories/meter.test.js
index 64de9db062..46f60024bf 100644
--- a/components/progressbar/stories/meter.test.js
+++ b/components/meter/stories/meter.test.js
@@ -1,5 +1,5 @@
 import { Variants } from "@spectrum-css/preview/decorators";
-import { Template } from "./meter.template.js";
+import { Template } from "./template.js";
 
 export const MeterGroup = Variants({
 	Template,
@@ -28,7 +28,7 @@ export const MeterGroup = Variants({
 			testHeading: "Without value label",
 			showValueLabel: false,
 		},
-		/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom 
+		/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom
 		linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
 		*/
 		{
diff --git a/components/meter/stories/template.js b/components/meter/stories/template.js
new file mode 100644
index 0000000000..5741adc82a
--- /dev/null
+++ b/components/meter/stories/template.js
@@ -0,0 +1,40 @@
+import { ArgGrid } from "@spectrum-css/preview/decorators";
+import { Template as ProgressBar } from "@spectrum-css/progressbar/stories/template.js";
+import { capitalize } from "lodash-es";
+
+import "../index.css";
+
+export const Template = ({
+	rootClass = "spectrum-Meter",
+	customClasses = [],
+	fill,
+	size = "s",
+	staticColor,
+	...item
+} = {}, context = {}) => {
+	return ProgressBar({
+		...item,
+		customClasses: [
+			...customClasses,
+			rootClass,
+			typeof size !== "undefined" ? `${rootClass}--size${size?.toUpperCase()}` : null,
+			typeof fill !== "undefined" ? `is-${fill}` : null,
+			/*
+			 * The `spectrum-Meter--staticWhite` class is not present in the Meter CSS, as it makes use of
+			 * `spectrum-ProgressBar--staticWhite`, but having this allows for simpler detection of static
+			 * colors when looking at the element using its `rootClass` in our decorators.
+			 */
+			typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null,
+		].filter(Boolean),
+		staticColor,
+	}, context);
+};
+
+/* FillGroup showcases all semantic variants in a single story. */
+export const FillGroup = (args, context) => ArgGrid({
+	Template,
+	argKey: "fill",
+	options: ["info", "positive", "negative", "notice"],
+	withBorder: false,
+	...args,
+}, context);
diff --git a/components/miller/metadata/metadata.json b/components/miller/dist/metadata.json
similarity index 69%
rename from components/miller/metadata/metadata.json
rename to components/miller/dist/metadata.json
index 4d2e62f974..adb2109144 100644
--- a/components/miller/metadata/metadata.json
+++ b/components/miller/dist/metadata.json
@@ -11,12 +11,7 @@
     "--mod-millercolumns-margin-inline-start",
     "--mod-millercolumns-padding"
   ],
-  "component": [
-    "--spectrum-millercolumns-inline-size",
-    "--spectrum-millercolumns-margin-inline-end",
-    "--spectrum-millercolumns-margin-inline-start",
-    "--spectrum-millercolumns-padding"
-  ],
+  "component": [],
   "global": ["--spectrum-spacing-100"],
   "system-theme": [],
   "passthroughs": [],
diff --git a/components/miller/index.css b/components/miller/index.css
index 8093f1bec5..6c78ea3ac3 100644
--- a/components/miller/index.css
+++ b/components/miller/index.css
@@ -11,32 +11,25 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-MillerColumns {
-	--spectrum-millercolumns-inline-size: 272px;
-	--spectrum-millercolumns-padding: var(--spectrum-spacing-100);
-	--spectrum-millercolumns-margin-inline-start: var(--spectrum-spacing-100);
-	--spectrum-millercolumns-margin-inline-end: var(--spectrum-spacing-100);
-}
-
 .spectrum-MillerColumns {
 	overflow-x: auto;
 	white-space: nowrap;
 	user-select: none;
-	padding: var(--mod-millercolumns-padding, var(--spectrum-millercolumns-padding)) 0;
+	padding: var(--mod-millercolumns-padding, var(--spectrum-spacing-100)) 0;
 }
 
 .spectrum-MillerColumns-item {
 	display: inline-block;
-	inline-size: var(--mod-millercolumns-inline-size, var(--spectrum-millercolumns-inline-size));
+	inline-size: var(--mod-millercolumns-inline-size, 272px);
 	vertical-align: top;
 	outline: none;
 	margin: 0;
 	padding: 0;
-	margin-inline-end: var(--mod-millercolumns-margin-inline-end, var(--spectrum-millercolumns-margin-inline-end));
+	margin-inline-end: var(--mod-millercolumns-margin-inline-end, var(--spectrum-spacing-100));
 	overflow: auto;
 	block-size: 100%;
 
 	&:first-child {
-		margin-inline-start: var(--mod-millercolumns-margin-inline-start, var(--spectrum-millercolumns-margin-inline-start));
+		margin-inline-start: var(--mod-millercolumns-margin-inline-start, var(--spectrum-spacing-100));
 	}
 }
diff --git a/components/miller/metadata/mods.md b/components/miller/metadata/mods.md
deleted file mode 100644
index eac5e8574f..0000000000
--- a/components/miller/metadata/mods.md
+++ /dev/null
@@ -1,6 +0,0 @@
-| Modifiable custom properties              |
-| ----------------------------------------- |
-| `--mod-millercolumns-inline-size`         |
-| `--mod-millercolumns-margin-inline-end`   |
-| `--mod-millercolumns-margin-inline-start` |
-| `--mod-millercolumns-padding`             |
diff --git a/components/miller/package.json b/components/miller/package.json
index beb8d8c423..7aced0adb9 100644
--- a/components/miller/package.json
+++ b/components/miller/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js
index 62650faf7b..a255362e89 100644
--- a/components/miller/stories/miller.stories.js
+++ b/components/miller/stories/miller.stories.js
@@ -1,5 +1,5 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { MillerGroup } from "./miller.test.js";
 import { Template } from "./template.js";
diff --git a/components/modal/metadata/metadata.json b/components/modal/dist/metadata.json
similarity index 83%
rename from components/modal/metadata/metadata.json
rename to components/modal/dist/metadata.json
index 43bbdc12da..950d9fca3c 100644
--- a/components/modal/metadata/metadata.json
+++ b/components/modal/dist/metadata.json
@@ -28,15 +28,11 @@
   ],
   "component": [
     "--spectrum-modal-background-color",
-    "--spectrum-modal-confirm-border-radius",
     "--spectrum-modal-confirm-entry-animation-delay",
     "--spectrum-modal-confirm-entry-animation-duration",
     "--spectrum-modal-confirm-exit-animation-delay",
     "--spectrum-modal-confirm-exit-animation-duration",
-    "--spectrum-modal-fullscreen-margin",
-    "--spectrum-modal-max-height",
-    "--spectrum-modal-max-width",
-    "--spectrum-modal-transition-animation-duration"
+    "--spectrum-modal-fullscreen-margin"
   ],
   "global": [
     "--spectrum-animation-duration-0",
@@ -45,11 +41,12 @@
     "--spectrum-animation-duration-500",
     "--spectrum-animation-ease-in",
     "--spectrum-animation-ease-out",
+    "--spectrum-animation-linear",
+    "--spectrum-background-layer-2-color",
     "--spectrum-corner-radius-100",
-    "--spectrum-dialog-confirm-entry-animation-distance",
-    "--spectrum-gray-100"
+    "--spectrum-dialog-confirm-entry-animation-distance"
   ],
-  "system-theme": [],
+  "system-theme": ["--system-modal-background-color"],
   "passthroughs": [],
   "high-contrast": []
 }
diff --git a/components/modal/index.css b/components/modal/index.css
index c70424be1c..8a5e2e9ad9 100644
--- a/components/modal/index.css
+++ b/components/modal/index.css
@@ -12,22 +12,19 @@
  */
 
 @import "@spectrum-css/commons/overlay.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Modal {
-	/* Bug: this must be 0ms, not 0 */
-	--spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
+	--spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500));
+	/* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */
+	--spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)));
+
+	/* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */
+	--spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100)));
+	--spectrum-modal-confirm-exit-animation-delay: var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0));
 
 	/* Distance between top and bottom of modal and edge of window for fullscreen modal */
-	--spectrum-modal-fullscreen-margin: 32px;
-	--spectrum-modal-max-height: 90vh;
-	--spectrum-modal-max-width: 90%;
-
-	--spectrum-modal-background-color: var(--spectrum-gray-100);
-	--spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
-	--spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
-	--spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
-	--spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
-	--spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100);
+	--spectrum-modal-fullscreen-margin: var(--mod-modal-fullscreen-margin, 32px);
 }
 
 /* Used to position the modal */
@@ -63,7 +60,7 @@
 	z-index: 2;
 
 	/* Be invisible by default */
-	transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-modal-transition-animation-duration));
+	transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100));
 
 	&.is-open {
 		visibility: visible;
@@ -71,42 +68,43 @@
 }
 
 .spectrum-Modal {
-	@extend %spectrum-overlay;
+	visibility: hidden;
+	opacity: 0;
 
-	/* Start offset by the animation distance */
+	/* Start offset by the animation distance -- @note this is using the global dialog token */
 	transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance)));
 
 	/* Appear above underlay */
 	z-index: 2;
 
 	/* Don't be bigger than the screen */
-	max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height));
-	max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width));
+	max-block-size: var(--mod-modal-max-height, 90vh);
+	max-inline-size: var(--mod-modal-max-width, 90%);
 
 	background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
-
-	/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
-	border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius));
+	border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100));
 	overflow: hidden;
 	outline: none; /* Firefox shows outline */
 	pointer-events: auto;
 
 	/* Exit animations */
 	transition:
-		opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in) var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)),
-		visibility 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))),
-		transform 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)));
-}
+		opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay),
+		visibility var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)),
+		transform var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration));
 
-.spectrum-Modal.is-open {
-	@extend %spectrum-overlay--open;
+	&.is-open {
+		pointer-events: auto;
+		visibility: visible;
+		opacity: 1;
 
-	/* Entry animations */
-	transition:
-		transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
-		opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
+		/* Entry animations */
+		transition:
+			transform var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay),
+			opacity var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay);
 
-	transform: translateY(0);
+		transform: translateY(0);
+	}
 }
 
 /* Responsive modals will fill the screen on small viewports */
@@ -119,20 +117,18 @@
 		border-radius: 0;
 	}
 
-	.spectrum-Modal-wrapper {
-		.spectrum-Modal--responsive {
-			margin-block-start: 0; /* Prevent the vertical offset bit */
-		}
+	.spectrum-Modal-wrapper .spectrum-Modal--responsive {
+		margin-block-start: 0; /* Prevent the vertical offset bit */
 	}
 }
 
 /** @unofficial */
 .spectrum-Modal--fullscreen {
 	position: fixed;
-	inset-inline-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
-	inset-block-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
-	inset-inline-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
-	inset-block-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
+	inset-inline-start: var(--spectrum-modal-fullscreen-margin);
+	inset-block-start: var(--spectrum-modal-fullscreen-margin);
+	inset-inline-end: var(--spectrum-modal-fullscreen-margin);
+	inset-block-end: var(--spectrum-modal-fullscreen-margin);
 	max-inline-size: none;
 	max-block-size: none;
 }
diff --git a/components/modal/metadata/mods.md b/components/modal/metadata/mods.md
deleted file mode 100644
index 3cd142425f..0000000000
--- a/components/modal/metadata/mods.md
+++ /dev/null
@@ -1,15 +0,0 @@
-| Modifiable custom properties                   |
-| ---------------------------------------------- |
-| `--mod-modal-background-color`                 |
-| `--mod-modal-confirm-border-radius`            |
-| `--mod-modal-confirm-entry-animation-delay`    |
-| `--mod-modal-confirm-entry-animation-distance` |
-| `--mod-modal-confirm-entry-animation-duration` |
-| `--mod-modal-confirm-exit-animation-delay`     |
-| `--mod-modal-confirm-exit-animation-duration`  |
-| `--mod-modal-fullscreen-margin`                |
-| `--mod-modal-max-height`                       |
-| `--mod-modal-max-width`                        |
-| `--mod-modal-transition-animation-duration`    |
-| `--mod-overlay-animation-duration`             |
-| `--mod-overlay-animation-duration-opened`      |
diff --git a/components/modal/package.json b/components/modal/package.json
index 98aef1b300..f51f323a6f 100644
--- a/components/modal/package.json
+++ b/components/modal/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js
index 67ff70be7d..a4ce483de5 100644
--- a/components/modal/stories/modal.stories.js
+++ b/components/modal/stories/modal.stories.js
@@ -2,7 +2,7 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ModalGroup } from "./modal.test.js";
 
diff --git a/components/modal/stories/template.js b/components/modal/stories/template.js
index 9abbf49ebe..07a52b8913 100644
--- a/components/modal/stories/template.js
+++ b/components/modal/stories/template.js
@@ -5,6 +5,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 /**
  * Just the modal markup.
diff --git a/components/modal/themes/express.css b/components/modal/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/modal/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/modal/themes/spectrum-two.css b/components/modal/themes/spectrum-two.css
new file mode 100644
index 0000000000..c31756dcda
--- /dev/null
+++ b/components/modal/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Modal {
+		--spectrum-modal-background-color: var(--spectrum-background-layer-2-color);
+	}
+}
diff --git a/components/modal/themes/spectrum.css b/components/modal/themes/spectrum.css
new file mode 100644
index 0000000000..f637e6f343
--- /dev/null
+++ b/components/modal/themes/spectrum.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Modal {
+		--spectrum-modal-background-color: var(--spectrum-gray-100);
+	}
+}
diff --git a/components/opacitycheckerboard/metadata/metadata.json b/components/opacitycheckerboard/dist/metadata.json
similarity index 74%
rename from components/opacitycheckerboard/metadata/metadata.json
rename to components/opacitycheckerboard/dist/metadata.json
index a47a1f04bb..51c1a15587 100644
--- a/components/opacitycheckerboard/metadata/metadata.json
+++ b/components/opacitycheckerboard/dist/metadata.json
@@ -8,10 +8,6 @@
     "--mod-opacity-checkerboard-size"
   ],
   "component": [
-    "--spectrum-opacity-checkerboard-dark",
-    "--spectrum-opacity-checkerboard-light",
-    "--spectrum-opacity-checkerboard-position",
-    "--spectrum-opacity-checkerboard-size",
     "--spectrum-opacity-checkerboard-square-dark",
     "--spectrum-opacity-checkerboard-square-light",
     "--spectrum-opacity-checkerboard-square-size"
diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css
index 834a15122a..675449dd8d 100644
--- a/components/opacitycheckerboard/index.css
+++ b/components/opacitycheckerboard/index.css
@@ -12,12 +12,7 @@
  */
 
 .spectrum-OpacityCheckerboard {
-	--spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark);
-	--spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light);
-	--spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size);
-	--spectrum-opacity-checkerboard-position: left top;
-
-	background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2);
+	background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, left top) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2);
 }
 
 @media (forced-colors: active) {
diff --git a/components/opacitycheckerboard/metadata/mods.md b/components/opacitycheckerboard/metadata/mods.md
deleted file mode 100644
index da8b3518d5..0000000000
--- a/components/opacitycheckerboard/metadata/mods.md
+++ /dev/null
@@ -1,6 +0,0 @@
-| Modifiable custom properties          |
-| ------------------------------------- |
-| `--mod-opacity-checkerboard-dark`     |
-| `--mod-opacity-checkerboard-light`    |
-| `--mod-opacity-checkerboard-position` |
-| `--mod-opacity-checkerboard-size`     |
diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json
index 7b1c5e9a2c..7cdfaa5a4f 100644
--- a/components/opacitycheckerboard/package.json
+++ b/components/opacitycheckerboard/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
index 80a5925e33..e908a5cd05 100644
--- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
+++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
@@ -1,5 +1,5 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { OpacityCheckboardGroup } from "./opacitycheckerboard.test.js";
 import { Template } from "./template.js";
diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js
index 5327a593cb..733789c5f3 100644
--- a/components/opacitycheckerboard/stories/template.js
+++ b/components/opacitycheckerboard/stories/template.js
@@ -14,18 +14,21 @@ export const Template = ({
 	id = getRandomId("opacity-checkerboard"),
 	content = [],
 	role,
-}) => html`
-	<div
-		class=${classMap({
-			[rootClass]: true,
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-		style=${ifDefined(styleMap({
-			"--mod-opacity-checkerboard-position": backgroundPosition,
-			...customStyles,
-		}))}
-		role=${ifDefined(role)}
-		id=${ifDefined(id)}
-	>
-		${renderContent(content)}
-	</div>`;
+} = {}) => {
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			style=${ifDefined(styleMap({
+				"--mod-opacity-checkerboard-position": backgroundPosition,
+				...customStyles,
+			}))}
+			role=${ifDefined(role)}
+			id=${ifDefined(id)}
+		>
+			${renderContent(content)}
+		</div>
+	`;
+};
diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json
new file mode 100644
index 0000000000..cb8c8163de
--- /dev/null
+++ b/components/page/dist/metadata.json
@@ -0,0 +1,16 @@
+{
+  "sourceFile": "index.css",
+  "selectors": [":root"],
+  "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"],
+  "component": [
+    "--spectrum-page-background-color",
+    "--spectrum-page-content-tap-highlight"
+  ],
+  "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"],
+  "system-theme": [
+    "--system-root-page-background-color",
+    "--system-root-page-content-tap-highlight"
+  ],
+  "passthroughs": [],
+  "high-contrast": []
+}
diff --git a/components/page/index.css b/components/page/index.css
index 28bab4cccc..7a29f49a2e 100644
--- a/components/page/index.css
+++ b/components/page/index.css
@@ -11,9 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 :root {
-	background-color: var(--spectrum-gray-100);
+	background: var(--mod-page-background, var(--spectrum-page-background-color));
 
-	/* Prevent tap highlights */
-	-webkit-tap-highlight-color: var(--spectrum-transparent-black-100);
+	/* The highlight that appears over a link while it's being tapped */
+	-webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight));
 }
diff --git a/components/page/metadata/metadata.json b/components/page/metadata/metadata.json
deleted file mode 100644
index 3ea846415d..0000000000
--- a/components/page/metadata/metadata.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "sourceFile": "index.css",
-  "selectors": [":root"],
-  "modifiers": [],
-  "component": [],
-  "global": ["--spectrum-gray-100", "--spectrum-transparent-black-100"],
-  "system-theme": [],
-  "passthroughs": [],
-  "high-contrast": []
-}
diff --git a/components/page/metadata/mods.md b/components/page/metadata/mods.md
deleted file mode 100644
index a98209f6e8..0000000000
--- a/components/page/metadata/mods.md
+++ /dev/null
@@ -1,2 +0,0 @@
-| Modifiable custom properties |
-| ---------------------------- |
diff --git a/components/page/package.json b/components/page/package.json
index 9b475bfd08..6532844183 100644
--- a/components/page/package.json
+++ b/components/page/package.json
@@ -44,5 +44,10 @@
 	],
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"spectrum": [
+		{
+			"rootClass": ":root"
+		}
+	]
 }
diff --git a/components/page/stories/page.stories.js b/components/page/stories/page.stories.js
new file mode 100644
index 0000000000..7327742970
--- /dev/null
+++ b/components/page/stories/page.stories.js
@@ -0,0 +1,38 @@
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+import { PageGroup } from "./page.test.js";
+
+/**
+ * A page component is...
+ */
+export default {
+	title: "Page",
+	component: "Page",
+	argTypes: {
+		content: { table: { disable: true } },
+	},
+	args: {
+		content: []
+	},
+	parameters: {
+		layout: "fullscreen",
+		docs: {
+			story: {
+				inline: false,
+				height: "400px",
+				width: "800px"
+			},
+		},
+		packageJson,
+		metadata,
+	},
+	tags: ["!autodocs", "!dev"]
+};
+
+export const Default = PageGroup.bind({});
+Default.args = {
+	content: [],
+};
+Default.parameters = {
+	chromatic: { disableSnapshot: true },
+};
diff --git a/components/page/stories/page.test.js b/components/page/stories/page.test.js
new file mode 100644
index 0000000000..66d54f812d
--- /dev/null
+++ b/components/page/stories/page.test.js
@@ -0,0 +1,13 @@
+import { Variants } from "@spectrum-css/preview/decorators";
+import { Template } from "./template.js";
+
+export const PageGroup = Variants({
+	Template,
+	skipBorders: true,
+	testData: [
+		{
+			testHeading: "Standard",
+			skipWrapper: true,
+		},
+	]
+});
diff --git a/components/page/stories/template.js b/components/page/stories/template.js
new file mode 100644
index 0000000000..570ca98b24
--- /dev/null
+++ b/components/page/stories/template.js
@@ -0,0 +1,11 @@
+import { renderContent } from "@spectrum-css/preview/decorators";
+import { html } from "lit";
+
+import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
+
+export const Template = ({ content = [] } = {}, context = {}) => {
+	return html`${renderContent(content, { context })}`;
+};
diff --git a/components/page/themes/express.css b/components/page/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/page/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/page/themes/spectrum-two.css b/components/page/themes/spectrum-two.css
new file mode 100644
index 0000000000..896ecf506c
--- /dev/null
+++ b/components/page/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	:root {
+		--spectrum-page-background-color: var(--spectrum-gray-75);
+		--spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25);
+	}
+}
diff --git a/components/page/themes/spectrum.css b/components/page/themes/spectrum.css
new file mode 100644
index 0000000000..f6c120c2d4
--- /dev/null
+++ b/components/page/themes/spectrum.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	:root {
+		--spectrum-page-background-color: var(--spectrum-gray-100);
+		--spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-100);
+	}
+}
diff --git a/components/pagination/metadata/metadata.json b/components/pagination/dist/metadata.json
similarity index 88%
rename from components/pagination/metadata/metadata.json
rename to components/pagination/dist/metadata.json
index e69042686e..7a0b21fe8d 100644
--- a/components/pagination/metadata/metadata.json
+++ b/components/pagination/dist/metadata.json
@@ -17,17 +17,15 @@
     "--mod-pagination-counter-color",
     "--mod-pagination-counter-font-size",
     "--mod-pagination-counter-line-height",
-    "--mod-pagination-counter-margin-inline-start",
     "--mod-pagination-page-button-inline-spacing",
     "--mod-pagination-textfield-width"
   ],
   "component": [
     "--spectrum-pagination-counter-color",
     "--spectrum-pagination-counter-font-size",
+    "--spectrum-pagination-counter-inline-spacing",
     "--spectrum-pagination-counter-line-height",
-    "--spectrum-pagination-counter-margin-inline-start",
     "--spectrum-pagination-item-inline-spacing",
-    "--spectrum-pagination-page-button-inline-spacing",
     "--spectrum-pagination-textfield-width"
   ],
   "global": [
diff --git a/components/pagination/index.css b/components/pagination/index.css
index c73b5629ec..1c9a9b7f43 100644
--- a/components/pagination/index.css
+++ b/components/pagination/index.css
@@ -12,11 +12,10 @@
  */
 
 .spectrum-Pagination {
-	--spectrum-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing);
-	--spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing);
-	--spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default);
-	--spectrum-pagination-counter-font-size: var(--spectrum-font-size-100);
-	--spectrum-pagination-counter-line-height: var(--spectrum-line-height-100);
+	--spectrum-pagination-counter-color: var(--mod-pagination-counter-color, var(--spectrum-neutral-subdued-content-color-default));
+	--spectrum-pagination-counter-font-size: var(--mod-pagination-counter-font-size, var(--spectrum-font-size-100));
+	--spectrum-pagination-counter-line-height: var(--mod-pagination-counter-line-height, var(--spectrum-line-height-100));
+	--spectrum-pagination-counter-inline-spacing: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-item-inline-spacing));
 
 	&:dir(rtl) {
 		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
@@ -32,31 +31,32 @@
 
 /* Explicit variant elements */
 .spectrum-Pagination-textfield {
+	/* @passthrough start */
 	--mod-textfield-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width));
 	--mod-textfield-min-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width));
+	/* @passthrough end */
 }
 
 .spectrum-Pagination-counter {
-	font-size: var(--mod-pagination-counter-font-size, var(--spectrum-pagination-counter-font-size));
-	line-height: var(--mod-pagination-counter-line-height, var(--spectrum-pagination-counter-line-height));
-	margin-inline-start: var(--mod-pagination-counter-margin-inline-start, var(--spectrum-pagination-counter-margin-inline-start));
-	color: var(--mod-pagination-counter-color, var(--spectrum-pagination-counter-color));
+	font-size: var(--spectrum-pagination-counter-font-size);
+	line-height: var(--spectrum-pagination-counter-line-height);
+	color: var(--spectrum-pagination-counter-color);
+}
+
+.spectrum-Pagination-counter,
+.spectrum-Pagination-nextButton {
+	margin-inline-start: var(--spectrum-pagination-counter-inline-spacing);
 }
 
-/* Previous and next buttons */
 .spectrum-Pagination-prevButton {
-	margin-inline-end: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-page-button-inline-spacing));
+	margin-inline-end: var(--spectrum-pagination-counter-inline-spacing);
 }
 
-.spectrum-Pagination-nextButton {
-	margin-inline-start: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-page-button-inline-spacing));
+/* Correct the direction of the arrows */
+.spectrum-Pagination-nextButton .spectrum-Icon {
+	transform: var(--spectrum-logical-rotation,);
 }
 
-/* Correct the direction of the arrows when viewing right-to-left */
 .spectrum-Pagination-prevButton .spectrum-Icon {
 	transform: var(--spectrum-logical-rotation,) rotate(180deg);
 }
-
-.spectrum-Pagination-nextButton .spectrum-Icon {
-	transform: var(--spectrum-logical-rotation);
-}
diff --git a/components/pagination/metadata/mods.md b/components/pagination/metadata/mods.md
deleted file mode 100644
index b9a493ed37..0000000000
--- a/components/pagination/metadata/mods.md
+++ /dev/null
@@ -1,8 +0,0 @@
-| Modifiable custom properties                   |
-| ---------------------------------------------- |
-| `--mod-pagination-counter-color`               |
-| `--mod-pagination-counter-font-size`           |
-| `--mod-pagination-counter-line-height`         |
-| `--mod-pagination-counter-margin-inline-start` |
-| `--mod-pagination-page-button-inline-spacing`  |
-| `--mod-pagination-textfield-width`             |
diff --git a/components/pagination/package.json b/components/pagination/package.json
index 255bbda510..7cb2a4732a 100644
--- a/components/pagination/package.json
+++ b/components/pagination/package.json
@@ -19,22 +19,22 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
 		"@spectrum-css/actionbutton": ">=6",
 		"@spectrum-css/button": ">=13",
 		"@spectrum-css/icon": ">=7",
-		"@spectrum-css/splitbutton": ">=8",
 		"@spectrum-css/textfield": ">=7",
 		"@spectrum-css/tokens": ">=14 || >=15"
 	},
@@ -42,7 +42,6 @@
 		"@spectrum-css/actionbutton": "workspace:^",
 		"@spectrum-css/button": "workspace:^",
 		"@spectrum-css/icon": "workspace:^",
-		"@spectrum-css/splitbutton": "^8.1.2",
 		"@spectrum-css/textfield": "workspace:^",
 		"@spectrum-css/tokens": "workspace:^"
 	},
diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js
index 5b679b9992..7fa6fa909e 100644
--- a/components/pagination/stories/pagination.stories.js
+++ b/components/pagination/stories/pagination.stories.js
@@ -1,7 +1,7 @@
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { PaginationGroup } from "./pagination.test.js";
 import { Template } from "./template.js";
diff --git a/components/pagination/stories/pagination.test.js b/components/pagination/stories/pagination.test.js
index 43cccd9e9e..b3c7d8c161 100644
--- a/components/pagination/stories/pagination.test.js
+++ b/components/pagination/stories/pagination.test.js
@@ -6,15 +6,12 @@ export const PaginationGroup = Variants({
 	sizeDirection: "column",
 	testData: [
 		{
-			testHeading: "Default",
+			testHeading: "Listing",
+			variant: "listing",
 		},
 		{
 			testHeading: "Explicit",
 			variant: "explicit",
 		},
-		{
-			testHeading: "Button",
-			variant: "button",
-		},
 	]
 });
diff --git a/components/pagination/stories/template.js b/components/pagination/stories/template.js
index 8950cf08fd..3cfb548da8 100644
--- a/components/pagination/stories/template.js
+++ b/components/pagination/stories/template.js
@@ -1,6 +1,5 @@
 import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
 import { Template as Button } from "@spectrum-css/button/stories/template.js";
-import { Default as SplitButton } from "@spectrum-css/preview/deprecated/splitbutton/splitbutton.stories.js";
 import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
@@ -15,7 +14,6 @@ export const Template = ({
 	variant,
 	items
 } = {}, context = {}) => {
-
 	const explicitVariant = html`
 		<nav
 			class=${classMap({
@@ -47,18 +45,6 @@ export const Template = ({
 		</nav>
 	`;
 
-	// @todo This variant should be deprecated, as it uses the deprecated SplitButton component. 
-	const buttonVariant = SplitButton({
-		position: "left",
-		variant: "accent",
-		label: "Next",
-		iconName: "ChevronLeft100",
-		labelIconName: "ChevronRight100",
-		iconSet: "ui",
-		customFirstButtonClasses: ["spectrum-Pagination-prevButton"],
-		customLastButtonClasses: ["spectrum-Pagination-nextButton"]
-	}, context);
-
 	const listingVariant = html`
 		<nav
 			class=${classMap({
@@ -103,8 +89,6 @@ export const Template = ({
 	if (variant === "explicit") {
 		return explicitVariant;
 	}
-	else if (variant == "button") {
-		return buttonVariant;
-	}
+
 	return listingVariant;
 };
diff --git a/components/picker/metadata/metadata.json b/components/picker/dist/metadata.json
similarity index 98%
rename from components/picker/metadata/metadata.json
rename to components/picker/dist/metadata.json
index ef3d5a7f25..8b62a6c4c3 100644
--- a/components/picker/metadata/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -157,6 +157,7 @@
     "--spectrum-picker-border-color-active",
     "--spectrum-picker-border-color-default",
     "--spectrum-picker-border-color-default-open",
+    "--spectrum-picker-border-color-disabled",
     "--spectrum-picker-border-color-error-active",
     "--spectrum-picker-border-color-error-default",
     "--spectrum-picker-border-color-error-default-open",
@@ -274,13 +275,14 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
+    "--spectrum-gray-100",
     "--spectrum-gray-200",
     "--spectrum-gray-300",
-    "--spectrum-gray-400",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
-    "--spectrum-gray-75",
+    "--spectrum-gray-800",
+    "--spectrum-gray-900",
     "--spectrum-line-height-100",
     "--spectrum-negative-border-color-default",
     "--spectrum-negative-border-color-down",
@@ -312,6 +314,7 @@
     "--system-picker-border-color-active",
     "--system-picker-border-color-default",
     "--system-picker-border-color-default-open",
+    "--system-picker-border-color-disabled",
     "--system-picker-border-color-hover",
     "--system-picker-border-color-hover-open",
     "--system-picker-border-color-key-focus",
diff --git a/components/picker/index.css b/components/picker/index.css
index 6760d428c1..53dcb003ce 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 @import "@spectrum-css/commons/basebutton.css";
 
 .spectrum-Picker {
@@ -46,10 +45,6 @@
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100);
 	--spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);
 
-	& + .spectrum-Popover--bottom.is-open {
-		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
-	}
-
 	/* animation */
 	--spectrum-picker-animation-duration: var(--spectrum-animation-duration-100);
 
@@ -85,6 +80,10 @@
 	--spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
 	--spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+	& + .spectrum-Popover--bottom.is-open {
+		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
+	}
 }
 
 .spectrum-Picker--sizeS {
@@ -480,7 +479,7 @@
 .spectrum-Picker.is-disabled {
 	cursor: default;
 	background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled)));
-	border-color: var(--highcontrast-picker-border-color-disabled, transparent);
+	border-color: var(--highcontrast-picker-border-color-disabled, var(--spectrum-picker-border-color-disabled));
 	color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
 
 	.spectrum-Picker-icon,
diff --git a/components/picker/metadata/mods.md b/components/picker/metadata/mods.md
deleted file mode 100644
index d56fb5c224..0000000000
--- a/components/picker/metadata/mods.md
+++ /dev/null
@@ -1,68 +0,0 @@
-| Modifiable custom properties                           |
-| ------------------------------------------------------ |
-| `--mod-animation-duration-100`                         |
-| `--mod-line-height-100`                                |
-| `--mod-picker-animation-duration`                      |
-| `--mod-picker-background-color-active`                 |
-| `--mod-picker-background-color-default`                |
-| `--mod-picker-background-color-default-open`           |
-| `--mod-picker-background-color-disabled`               |
-| `--mod-picker-background-color-hover`                  |
-| `--mod-picker-background-color-hover-open`             |
-| `--mod-picker-background-color-key-focus`              |
-| `--mod-picker-block-size`                              |
-| `--mod-picker-border-active`                           |
-| `--mod-picker-border-color-default`                    |
-| `--mod-picker-border-color-error-active`               |
-| `--mod-picker-border-color-error-default`              |
-| `--mod-picker-border-color-error-default-open`         |
-| `--mod-picker-border-color-error-hover`                |
-| `--mod-picker-border-color-error-hover-open`           |
-| `--mod-picker-border-color-error-key-focus`            |
-| `--mod-picker-border-color-hover`                      |
-| `--mod-picker-border-color-hover-open`                 |
-| `--mod-picker-border-color-key-focus`                  |
-| `--mod-picker-border-default-open`                     |
-| `--mod-picker-border-radius`                           |
-| `--mod-picker-border-width`                            |
-| `--mod-picker-focus-indicator-color`                   |
-| `--mod-picker-focus-indicator-gap`                     |
-| `--mod-picker-focus-indicator-thickness`               |
-| `--mod-picker-font-color-active`                       |
-| `--mod-picker-font-color-default`                      |
-| `--mod-picker-font-color-default-open`                 |
-| `--mod-picker-font-color-disabled`                     |
-| `--mod-picker-font-color-hover`                        |
-| `--mod-picker-font-color-hover-open`                   |
-| `--mod-picker-font-color-key-focus`                    |
-| `--mod-picker-font-size`                               |
-| `--mod-picker-font-weight`                             |
-| `--mod-picker-icon-color-active`                       |
-| `--mod-picker-icon-color-default`                      |
-| `--mod-picker-icon-color-default-open`                 |
-| `--mod-picker-icon-color-disabled`                     |
-| `--mod-picker-icon-color-error`                        |
-| `--mod-picker-icon-color-hover`                        |
-| `--mod-picker-icon-color-hover-open`                   |
-| `--mod-picker-icon-color-key-focus`                    |
-| `--mod-picker-inline-size`                             |
-| `--mod-picker-line-height`                             |
-| `--mod-picker-placeholder-font-style`                  |
-| `--mod-picker-placeholder-font-weight`                 |
-| `--mod-picker-spacing-bottom-to-text`                  |
-| `--mod-picker-spacing-edge-to-disclosure-icon`         |
-| `--mod-picker-spacing-edge-to-disclosure-icon-quiet`   |
-| `--mod-picker-spacing-edge-to-text`                    |
-| `--mod-picker-spacing-edge-to-text-quiet`              |
-| `--mod-picker-spacing-icon-to-disclosure-icon`         |
-| `--mod-picker-spacing-label-to-picker`                 |
-| `--mod-picker-spacing-label-to-picker-quiet`           |
-| `--mod-picker-spacing-picker-to-popover`               |
-| `--mod-picker-spacing-text-to-alert-icon-inline-start` |
-| `--mod-picker-spacing-text-to-icon`                    |
-| `--mod-picker-spacing-text-to-icon-inline-end`         |
-| `--mod-picker-spacing-top-to-alert-icon`               |
-| `--mod-picker-spacing-top-to-disclosure-icon`          |
-| `--mod-picker-spacing-top-to-progress-circle`          |
-| `--mod-picker-spacing-top-to-text`                     |
-| `--mod-sans-font-family-stack`                         |
diff --git a/components/picker/package.json b/components/picker/package.json
index 8e117d657f..84edf6f3df 100644
--- a/components/picker/package.json
+++ b/components/picker/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index 42324ec118..c2fa56e619 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -2,7 +2,7 @@ import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.sto
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { PickerGroup } from "./picker.test.js";
 import { ClosedAndOpenTemplate, DisabledTemplate, Template } from "./template.js";
@@ -133,6 +133,10 @@ export default {
 				height: "400px"
 			}
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=739-1453",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 4be33a2092..5bce15f074 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -11,6 +11,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 /**
  * Template for Picker only (no popover or help text).
diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css
index 77744bea98..bb521933e6 100644
--- a/components/picker/themes/express.css
+++ b/components/picker/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Picker {
 		--spectrum-picker-background-color-default: var(--spectrum-gray-200);
 		--spectrum-picker-background-color-default-open: var(--spectrum-gray-300);
diff --git a/components/picker/themes/spectrum-two.css b/components/picker/themes/spectrum-two.css
new file mode 100644
index 0000000000..3d48151229
--- /dev/null
+++ b/components/picker/themes/spectrum-two.css
@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Picker {
+		--spectrum-picker-background-color-default: var(--spectrum-gray-100);
+		--spectrum-picker-background-color-default-open: var(--spectrum-gray-100);
+		--spectrum-picker-background-color-hover: var(--spectrum-gray-200);
+		--spectrum-picker-background-color-hover-open: var(--spectrum-gray-200);
+		--spectrum-picker-background-color-active: var(--spectrum-gray-200);
+		--spectrum-picker-background-color-key-focus: var(--spectrum-gray-200);
+
+		--spectrum-picker-border-color-default: var(--spectrum-gray-800);
+		--spectrum-picker-border-color-default-open: var(--spectrum-gray-500);
+		--spectrum-picker-border-color-hover: var(--spectrum-gray-600);
+		--spectrum-picker-border-color-hover-open: var(--spectrum-gray-900);
+		--spectrum-picker-border-color-active: var(--spectrum-gray-700);
+		--spectrum-picker-border-color-key-focus: var(--spectrum-gray-900);
+		--spectrum-picker-border-color-disabled: var(--spectrum-gray-300);
+
+		--spectrum-picker-border-width: var(--spectrum-border-width-100);
+	}
+}
diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css
index b98f70f57e..0e15e162fe 100644
--- a/components/picker/themes/spectrum.css
+++ b/components/picker/themes/spectrum.css
@@ -11,7 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-Picker {
 		--spectrum-picker-background-color-default: var(--spectrum-gray-75);
 		--spectrum-picker-background-color-default-open: var(--spectrum-gray-200);
@@ -21,12 +25,8 @@
 		--spectrum-picker-background-color-key-focus: var(--spectrum-gray-200);
 
 		--spectrum-picker-border-color-default: var(--spectrum-gray-500);
-		--spectrum-picker-border-color-default-open: var(--spectrum-gray-500);
-		--spectrum-picker-border-color-hover: var(--spectrum-gray-600);
 		--spectrum-picker-border-color-hover-open: var(--spectrum-gray-600);
-		--spectrum-picker-border-color-active: var(--spectrum-gray-700);
 		--spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
-
-		--spectrum-picker-border-width: var(--spectrum-border-width-100);
+		--spectrum-picker-border-color-disabled: transparent;
 	}
 }
diff --git a/components/pickerbutton/CHANGELOG.md b/components/pickerbutton/CHANGELOG.md
index 0f04727ed1..6e31a519cf 100644
--- a/components/pickerbutton/CHANGELOG.md
+++ b/components/pickerbutton/CHANGELOG.md
@@ -404,9 +404,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - fix(pickerbutton): fix disabled hover
 - fix(searchwithin): pass through mod for picker button border color
 - chore(pickerbutton): update token peer dependency
-- fix(searchwithin): update searchwithin story to match docs site  
+- fix(searchwithin): update searchwithin story to match docs site
   use picker instead of pickerbutton and remove extra border
-- fix(pickerbutton): remove icononly class and remove padding from uiicononly  
+- fix(pickerbutton): remove icononly class and remove padding from uiicononly
   removes padding from uiicononly class to allow for larger icons in slots
 - fix(pickerbutton): explicitly add box-sizing border-box
 - fix(pickerbutton): fix icon size
diff --git a/components/pickerbutton/metadata/metadata.json b/components/pickerbutton/dist/metadata.json
similarity index 78%
rename from components/pickerbutton/metadata/metadata.json
rename to components/pickerbutton/dist/metadata.json
index 3859fd43d0..27643d6fd2 100644
--- a/components/pickerbutton/metadata/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -8,38 +8,24 @@
     ".spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
     ".spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
     ".spectrum-PickerButton--textuiicon .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton--uiicononly",
     ".spectrum-PickerButton--uiicononly .spectrum-PickerButton-fill",
     ".spectrum-PickerButton--uiicononly .spectrum-PickerButton-label",
     ".spectrum-PickerButton-fill",
     ".spectrum-PickerButton-icon",
     ".spectrum-PickerButton-label",
-    ".spectrum-PickerButton.is-focused .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton.is-focused .spectrum-PickerButton-icon",
-    ".spectrum-PickerButton.is-focused .spectrum-PickerButton-label",
-    ".spectrum-PickerButton.is-keyboardFocused .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton.is-keyboardFocused .spectrum-PickerButton-icon",
-    ".spectrum-PickerButton.is-keyboardFocused .spectrum-PickerButton-label",
-    ".spectrum-PickerButton.is-open .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton.is-open .spectrum-PickerButton-icon",
-    ".spectrum-PickerButton.is-open .spectrum-PickerButton-label",
+    ".spectrum-PickerButton.is-focused",
+    ".spectrum-PickerButton.is-keyboardFocused",
+    ".spectrum-PickerButton.is-open",
     ".spectrum-PickerButton.spectrum-PickerButton--quiet",
     ".spectrum-PickerButton.spectrum-PickerButton--sizeL",
     ".spectrum-PickerButton.spectrum-PickerButton--sizeS",
     ".spectrum-PickerButton.spectrum-PickerButton--sizeXL",
-    ".spectrum-PickerButton:active .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton:active .spectrum-PickerButton-icon",
-    ".spectrum-PickerButton:active .spectrum-PickerButton-label",
+    ".spectrum-PickerButton.spectrum-PickerButton--uiicononly",
+    ".spectrum-PickerButton:active",
     ".spectrum-PickerButton:disabled",
-    ".spectrum-PickerButton:focus .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton:focus .spectrum-PickerButton-icon",
-    ".spectrum-PickerButton:focus .spectrum-PickerButton-label",
-    ".spectrum-PickerButton:focus-visible .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton:focus-visible .spectrum-PickerButton-icon",
-    ".spectrum-PickerButton:focus-visible .spectrum-PickerButton-label",
-    ".spectrum-PickerButton:hover .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton:hover .spectrum-PickerButton-icon",
-    ".spectrum-PickerButton:hover .spectrum-PickerButton-label"
+    ".spectrum-PickerButton:focus",
+    ".spectrum-PickerButton:focus-visible",
+    ".spectrum-PickerButton:hover"
   ],
   "modifiers": [
     "--mod-picker-button-background-animation-duration",
@@ -121,12 +107,10 @@
   "global": [
     "--spectrum-animation-duration-100",
     "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-border-width-100",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
     "--spectrum-corner-radius-200",
     "--spectrum-corner-radius-75",
     "--spectrum-default-font-style",
@@ -140,11 +124,9 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
+    "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
-    "--spectrum-gray-75",
-    "--spectrum-in-field-button-edge-to-fill",
+    "--spectrum-gray-50",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
@@ -164,7 +146,8 @@
     "--system-picker-button-border-radius",
     "--system-picker-button-border-radius-rounded-sided",
     "--system-picker-button-border-radius-sided",
-    "--system-picker-button-border-width"
+    "--system-picker-button-border-width",
+    "--system-picker-button-padding"
   ],
   "passthroughs": [],
   "high-contrast": []
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index fce4b0564a..d9404687ac 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -11,20 +11,16 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-PickerButton {
 	--spectrum-picker-button-height: var(--spectrum-component-height-100);
 	--spectrum-picker-button-width: var(--spectrum-component-height-100);
 	--spectrum-picker-button-gap: var(--spectrum-text-to-visual-50);
 
-	--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill);
 	--spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50);
 	--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100);
 
-	--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
-
 	--spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default);
 	--spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
 	--spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down);
@@ -40,8 +36,31 @@
 	--spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
 	--spectrum-picker-button-font-size: var(--spectrum-font-size-100);
 
+	--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
 	--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
 
+	&:hover {
+		--mod-picker-button-background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover));
+		--mod-picker-button-font-color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover));
+		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover));
+	}
+
+	&:active,
+	&.is-open {
+		--mod-picker-button-background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down));
+		--mod-picker-button-font-color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down));
+		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down));
+	}
+
+	&:focus,
+	&.is-focused,
+	&:focus-visible,
+	&.is-keyboardFocused {
+		--mod-picker-button-background-color: var(--mod-picker-button-background-color-key-focus, var(--spectrum-picker-button-background-color-key-focus));
+		--mod-picker-button-font-color: var(--mod-picker-button-font-color-key-focus, var(--spectrum-picker-button-font-color-key-focus));
+		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus));
+	}
+
 	&:disabled {
 		--mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color));
 		--mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
@@ -101,78 +120,8 @@
 	box-sizing: border-box;
 	padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding));
 
-	&:hover {
-		.spectrum-PickerButton-fill {
-			background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover));
-		}
-
-		.spectrum-PickerButton-label {
-			color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover));
-		}
-
-		.spectrum-PickerButton-icon {
-			color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover));
-		}
-	}
-
-	&:active,
-	&.is-open {
-		.spectrum-PickerButton-fill {
-			background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down));
-		}
-
-		.spectrum-PickerButton-label {
-			color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down));
-		}
-
-		.spectrum-PickerButton-icon {
-			color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down));
-		}
-	}
-
-	&:focus,
-	&.is-focused,
-	&:focus-visible,
-	&.is-keyboardFocused {
-		.spectrum-PickerButton-fill {
-			background-color: var(--mod-picker-button-background-color-key-focus, var(--spectrum-picker-button-background-color-key-focus));
-		}
-
-		.spectrum-PickerButton-label {
-			color: var(--mod-picker-button-font-color-key-focus, var(--spectrum-picker-button-font-color-key-focus));
-		}
-
-		.spectrum-PickerButton-icon {
-			color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus));
-		}
-	}
-}
-
-.spectrum-PickerButton--right {
-	.spectrum-PickerButton-fill {
-		border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-		border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-	}
-
-	&.spectrum-PickerButton--rounded {
-		.spectrum-PickerButton-fill {
-			border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-			border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-		}
-	}
-}
-
-.spectrum-PickerButton--left {
-	.spectrum-PickerButton-fill {
-		border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-		border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-	}
-
-	&.spectrum-PickerButton--rounded {
-		.spectrum-PickerButton-fill {
-			border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-			border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-		}
+	&.spectrum-PickerButton--uiicononly {
+		inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height));
 	}
 }
 
@@ -190,6 +139,10 @@
 	font-style: var(--mod-picker-button-font-style, var(--spectrum-picker-button-font-style));
 	font-weight: var(--mod-picker-button-font-weight, var(--spectrum-picker-button-font-weight));
 	font-size: var(--mod-picker-button-font-size, var(--spectrum-picker-button-font-size));
+
+	.spectrum-PickerButton--uiicononly & {
+		display: none;
+	}
 }
 
 .spectrum-PickerButton-fill {
@@ -213,37 +166,45 @@
 	border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
 
 	transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
-}
 
-.spectrum-PickerButton-icon {
-	/* don't be small, ever */
-	flex-shrink: 0;
-	color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
-}
+	.spectrum-PickerButton--right & {
+		border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
+		border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
+	}
 
-.spectrum-PickerButton--rounded {
-	.spectrum-PickerButton-fill {
+	.spectrum-PickerButton--right.spectrum-PickerButton--rounded & {
+		border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
+		border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
+	}
+
+	.spectrum-PickerButton--left & {
+		border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
+		border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
+	}
+
+	.spectrum-PickerButton--left.spectrum-PickerButton--rounded & {
+		border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
+		border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
+	}
+
+	.spectrum-PickerButton--rounded & {
 		border-end-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
 		border-end-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
 		border-start-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
 		border-start-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
 	}
-}
 
-.spectrum-PickerButton--uiicononly {
-	inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height));
-
-	.spectrum-PickerButton-label {
-		display: none;
-	}
-
-	.spectrum-PickerButton-fill {
+	.spectrum-PickerButton--uiicononly & {
 		padding: 0;
 	}
-}
 
-.spectrum-PickerButton--textuiicon {
-	.spectrum-PickerButton-fill {
+	.spectrum-PickerButton--textuiicon & {
 		inline-size: auto;
 	}
 }
+
+.spectrum-PickerButton-icon {
+	/* don't be small, ever */
+	flex-shrink: 0;
+	color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
+}
diff --git a/components/pickerbutton/metadata/mods.md b/components/pickerbutton/metadata/mods.md
deleted file mode 100644
index 2db84b6ed7..0000000000
--- a/components/pickerbutton/metadata/mods.md
+++ /dev/null
@@ -1,46 +0,0 @@
-| Modifiable custom properties                           |
-| ------------------------------------------------------ |
-| `--mod-picker-button-background-animation-duration`    |
-| `--mod-picker-button-background-color`                 |
-| `--mod-picker-button-background-color-disabled`        |
-| `--mod-picker-button-background-color-down`            |
-| `--mod-picker-button-background-color-down-disabled`   |
-| `--mod-picker-button-background-color-down-quiet`      |
-| `--mod-picker-button-background-color-hover`           |
-| `--mod-picker-button-background-color-hover-disabled`  |
-| `--mod-picker-button-background-color-hover-quiet`     |
-| `--mod-picker-button-background-color-key-focus`       |
-| `--mod-picker-button-background-color-key-focus-quiet` |
-| `--mod-picker-button-background-color-quiet`           |
-| `--mod-picker-button-border-color`                     |
-| `--mod-picker-button-border-color-disabled`            |
-| `--mod-picker-button-border-color-quiet`               |
-| `--mod-picker-button-border-radius`                    |
-| `--mod-picker-button-border-radius-rounded`            |
-| `--mod-picker-button-border-radius-rounded-sided`      |
-| `--mod-picker-button-border-radius-sided`              |
-| `--mod-picker-button-border-width`                     |
-| `--mod-picker-button-fill-padding`                     |
-| `--mod-picker-button-font-color`                       |
-| `--mod-picker-button-font-color-disabled`              |
-| `--mod-picker-button-font-color-down`                  |
-| `--mod-picker-button-font-color-down-disabled`         |
-| `--mod-picker-button-font-color-hover`                 |
-| `--mod-picker-button-font-color-hover-disabled`        |
-| `--mod-picker-button-font-color-key-focus`             |
-| `--mod-picker-button-font-family`                      |
-| `--mod-picker-button-font-size`                        |
-| `--mod-picker-button-font-style`                       |
-| `--mod-picker-button-font-weight`                      |
-| `--mod-picker-button-gap`                              |
-| `--mod-picker-button-height`                           |
-| `--mod-picker-button-icon-color`                       |
-| `--mod-picker-button-icon-color-disabled`              |
-| `--mod-picker-button-icon-color-down`                  |
-| `--mod-picker-button-icon-color-down-disabled`         |
-| `--mod-picker-button-icon-color-hover`                 |
-| `--mod-picker-button-icon-color-hover-disabled`        |
-| `--mod-picker-button-icon-color-key-focus`             |
-| `--mod-picker-button-label-padding`                    |
-| `--mod-picker-button-padding`                          |
-| `--mod-picker-button-width`                            |
diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json
index 4857e5d54b..3669f1e4eb 100644
--- a/components/pickerbutton/package.json
+++ b/components/pickerbutton/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index 41a374537a..c01a0f00ee 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -2,7 +2,7 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js";
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { PickerGroup } from "./pickerbutton.test.js";
 import { CustomIconTemplate, Template } from "./template.js";
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 6adcb7398f..3df4f85b63 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-PickerButton",
diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css
index 7871d0d828..9dbd1a7fa4 100644
--- a/components/pickerbutton/themes/express.css
+++ b/components/pickerbutton/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-PickerButton {
 		--spectrum-picker-button-background-color: var(--spectrum-gray-200);
 		--spectrum-picker-button-background-color-hover: var(--spectrum-gray-300);
@@ -27,5 +27,7 @@
 		--spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200);
 		--spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75);
 		--spectrum-picker-button-border-width: 0px;
+
+		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill);
 	}
 }
diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css
new file mode 100644
index 0000000000..fb132a104e
--- /dev/null
+++ b/components/pickerbutton/themes/spectrum-two.css
@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-PickerButton {
+		--spectrum-picker-button-background-color: var(--spectrum-gray-50);
+		--spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
+		--spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
+		--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100);
+
+		--spectrum-picker-button-border-color: none;
+		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75);
+		--spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200);
+		--spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75);
+		--spectrum-picker-button-border-width: 0px;
+
+		/* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */
+		--spectrum-picker-button-padding: 4px;
+	}
+}
diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css
index 1daf4d9af8..85c3b9aaf9 100644
--- a/components/pickerbutton/themes/spectrum.css
+++ b/components/pickerbutton/themes/spectrum.css
@@ -11,7 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-PickerButton {
 		--spectrum-picker-button-background-color: var(--spectrum-gray-75);
 		--spectrum-picker-button-background-color-hover: var(--spectrum-gray-200);
@@ -23,5 +27,7 @@
 		--spectrum-picker-button-border-radius-rounded-sided: 0;
 		--spectrum-picker-button-border-radius-sided: 0;
 		--spectrum-picker-button-border-width: var(--spectrum-border-width-100);
+
+		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill);
 	}
 }
diff --git a/components/popover/metadata/metadata.json b/components/popover/dist/metadata.json
similarity index 100%
rename from components/popover/metadata/metadata.json
rename to components/popover/dist/metadata.json
diff --git a/components/popover/index.css b/components/popover/index.css
index fa5e647ed2..9e6c344390 100644
--- a/components/popover/index.css
+++ b/components/popover/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 @import "@spectrum-css/commons/overlay.css";
 
 .spectrum-Popover {
diff --git a/components/popover/metadata/mods.md b/components/popover/metadata/mods.md
deleted file mode 100644
index 25cb283e78..0000000000
--- a/components/popover/metadata/mods.md
+++ /dev/null
@@ -1,18 +0,0 @@
-| Modifiable custom properties                  |
-| --------------------------------------------- |
-| `--mod-overlay-animation-duration`            |
-| `--mod-overlay-animation-duration-opened`     |
-| `--mod-popover-animation-distance`            |
-| `--mod-popover-background-color`              |
-| `--mod-popover-border-color`                  |
-| `--mod-popover-border-width`                  |
-| `--mod-popover-content-area-spacing-vertical` |
-| `--mod-popover-corner-radius`                 |
-| `--mod-popover-filter`                        |
-| `--mod-popover-pointer-edge-spacing`          |
-| `--mod-popover-pointer-height`                |
-| `--mod-popover-pointer-width`                 |
-| `--mod-popover-shadow-blur`                   |
-| `--mod-popover-shadow-color`                  |
-| `--mod-popover-shadow-horizontal`             |
-| `--mod-popover-shadow-vertical`               |
diff --git a/components/popover/package.json b/components/popover/package.json
index 90d48ff1c0..a276cbac57 100644
--- a/components/popover/package.json
+++ b/components/popover/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
index 967dda2baa..e5e7f98660 100644
--- a/components/popover/stories/popover.stories.js
+++ b/components/popover/stories/popover.stories.js
@@ -5,7 +5,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html } from "lit";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { PopoverGroup } from "./popover.test.js";
 import { FixedWidthSourceTemplate, Template, TipPlacementVariants } from "./template.js";
@@ -91,6 +91,10 @@ export default {
 				height: "200px",
 			}
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=42086-5684",
+		},
 		packageJson,
 		metadata,
 	},
@@ -236,7 +240,7 @@ DialogStyle.args = {
 	content: [
 		(passthroughs, context) => Dialog({
 			showModal: false,
-			size: ["small"],
+			size: "s",
 			isDismissable: false,
 			heading: "Example heading",
 			hasFooter: false,
diff --git a/components/popover/stories/popover.test.js b/components/popover/stories/popover.test.js
index 56bbadaaea..ad179e3b70 100644
--- a/components/popover/stories/popover.test.js
+++ b/components/popover/stories/popover.test.js
@@ -138,7 +138,7 @@ export const PopoverGroup = Variants({
 			content: [
 				(passthroughs, context) => Dialog({
 					showModal: false,
-					size: ["small"],
+					size: "s",
 					isDismissable: false,
 					heading: "Example heading",
 					hasFooter: false,
diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js
index 1be2e30689..6d7e55375e 100644
--- a/components/popover/stories/template.js
+++ b/components/popover/stories/template.js
@@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Popover",
@@ -41,7 +44,10 @@ export const Template = ({
 		setTimeout(() => {
 			// Get the actual height and width of the popover
 			const popover = document.getElementById(id);
+			if (!popover) return;
+
 			const rect = popover.getBoundingClientRect();
+			if (!rect) return;
 
 			let shouldChange = false;
 			if (popoverHeight !== parseInt(rect.height, 10)) {
@@ -186,8 +192,7 @@ export const Template = ({
 				class=${classMap({
 					[rootClass]: true,
 					"is-open": isOpen,
-					[`${rootClass}--size${size?.toUpperCase()}`]:
-						typeof size !== "undefined",
+					[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
 					[`${rootClass}--withTip`]: withTip,
 					[`${rootClass}--${position}`]: typeof position !== "undefined",
 					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -275,7 +280,7 @@ export const TipPlacementVariants = (args, context) => {
 /**
  * Contains a source button with a fixed width, and an always open Popover.
  */
-export const FixedWidthSourceTemplate = (args) => html`
+export const FixedWidthSourceTemplate = (args, context) => html`
 	<div style="min-width: 300px;">
 		${ActionButton({
 			label: "Source",
@@ -283,12 +288,12 @@ export const FixedWidthSourceTemplate = (args) => html`
 				width: "100px",
 				display: "block",
 			},
-		})}
+		}, context)}
 		${Template({
 			...args,
 			position: "bottom-start",
 			isOpen: true,
 			trigger: () => null,
-		})}
+		}, context)}
 	</div>
 `;
diff --git a/components/popover/themes/express.css b/components/popover/themes/express.css
index 12184bc14d..32c92bf71b 100644
--- a/components/popover/themes/express.css
+++ b/components/popover/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Popover {
 		--spectrum-popover-border-width: 0;
 	}
diff --git a/components/popover/themes/spectrum-two.css b/components/popover/themes/spectrum-two.css
new file mode 100644
index 0000000000..80c0cdc94c
--- /dev/null
+++ b/components/popover/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Popover {
+		--spectrum-popover-border-width: var(--spectrum-border-width-100);
+	}
+}
diff --git a/components/popover/themes/spectrum.css b/components/popover/themes/spectrum.css
index 2f0c299326..3d81bc564b 100644
--- a/components/popover/themes/spectrum.css
+++ b/components/popover/themes/spectrum.css
@@ -11,8 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-Popover {
-		--spectrum-popover-border-width: var(--spectrum-border-width-100);
-	}
-}
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/progressbar/README.md b/components/progressbar/README.md
index 0f0acd2bf5..28f221fd08 100644
--- a/components/progressbar/README.md
+++ b/components/progressbar/README.md
@@ -1,6 +1,6 @@
-# @spectrum-css/barloader
+# @spectrum-css/progressbar
 
-> The Spectrum CSS barloader component
+> The Spectrum CSS progressbar component
 
 This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
 
diff --git a/components/progressbar/metadata/metadata.json b/components/progressbar/dist/metadata.json
similarity index 55%
rename from components/progressbar/metadata/metadata.json
rename to components/progressbar/dist/metadata.json
index f49c8b0385..3294d6c477 100644
--- a/components/progressbar/metadata/metadata.json
+++ b/components/progressbar/dist/metadata.json
@@ -1,28 +1,8 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".spectrum-Meter",
-    ".spectrum-Meter--sizeL",
-    ".spectrum-Meter--sizeS",
-    ".spectrum-Meter.is-negative .spectrum-ProgressBar-fill",
-    ".spectrum-Meter.is-notice .spectrum-ProgressBar-fill",
-    ".spectrum-Meter.is-positive .spectrum-ProgressBar-fill",
-    ".spectrum-Meter.spectrum-Meter--sizeL",
-    ".spectrum-Meter.spectrum-Meter--sizeS",
     ".spectrum-ProgressBar",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-fill",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-label",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja)",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko)",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh)",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja)",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko)",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)",
-    ".spectrum-ProgressBar .spectrum-ProgressBar-track",
     ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
-    ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)",
-    ".spectrum-ProgressBar--sideLabel",
     ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label",
     ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage",
     ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track",
@@ -30,25 +10,24 @@
     ".spectrum-ProgressBar--sizeM",
     ".spectrum-ProgressBar--sizeS",
     ".spectrum-ProgressBar--sizeXL",
+    ".spectrum-ProgressBar-fill",
+    ".spectrum-ProgressBar-label",
+    ".spectrum-ProgressBar-percentage",
     ".spectrum-ProgressBar-track",
-    ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill",
-    ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label",
-    ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage",
-    ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track",
+    ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel",
+    ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite",
+    ".spectrum-ProgressBar:dir(rtl)",
+    ".spectrum-ProgressBar:lang(ja)",
+    ".spectrum-ProgressBar:lang(ko)",
+    ".spectrum-ProgressBar:lang(zh)",
     "0%",
-    "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
+    "[dir=\"rtl\"] .spectrum-ProgressBar",
     "to"
   ],
   "modifiers": [
-    "--mod-meter-inline-size",
-    "--mod-meter-max-width",
-    "--mod-meter-min-width",
     "--mod-progressbar-animation-duration-indeterminate",
     "--mod-progressbar-animation-ease-in-out-indeterminate",
     "--mod-progressbar-fill-color",
-    "--mod-progressbar-fill-color-negative",
-    "--mod-progressbar-fill-color-notice",
-    "--mod-progressbar-fill-color-positive",
     "--mod-progressbar-fill-color-white",
     "--mod-progressbar-fill-size-indeterminate",
     "--mod-progressbar-font-size",
@@ -63,23 +42,19 @@
     "--mod-progressbar-spacing-top-to-text",
     "--mod-progressbar-text-color",
     "--mod-progressbar-thickness",
-    "--mod-progressbar-track-color",
-    "--mod-spacing-progressbar-label-to-text"
+    "--mod-progressbar-track-color"
   ],
   "component": [
     "--spectrum-progress-bar-maximum-width",
     "--spectrum-progress-bar-minimum-width",
     "--spectrum-progress-bar-thickness-extra-large",
     "--spectrum-progress-bar-thickness-large",
-    "--spectrum-progress-bar-thickness-medium",
     "--spectrum-progress-bar-thickness-small",
     "--spectrum-progressbar-animation-duration-indeterminate",
     "--spectrum-progressbar-animation-ease-in-out-indeterminate",
     "--spectrum-progressbar-corner-radius",
+    "--spectrum-progressbar-dir-indeterminate-multiplier",
     "--spectrum-progressbar-fill-color",
-    "--spectrum-progressbar-fill-color-negative",
-    "--spectrum-progressbar-fill-color-notice",
-    "--spectrum-progressbar-fill-color-positive",
     "--spectrum-progressbar-fill-color-white",
     "--spectrum-progressbar-fill-size-indeterminate",
     "--spectrum-progressbar-font-size",
@@ -92,12 +67,18 @@
     "--spectrum-progressbar-size-2500",
     "--spectrum-progressbar-size-2800",
     "--spectrum-progressbar-size-default",
+    "--spectrum-progressbar-sized-font-size",
+    "--spectrum-progressbar-sized-size-default",
+    "--spectrum-progressbar-sized-spacing-top-to-text",
+    "--spectrum-progressbar-sized-thickness",
     "--spectrum-progressbar-spacing-label-to-progressbar",
     "--spectrum-progressbar-spacing-label-to-text",
     "--spectrum-progressbar-spacing-top-to-text",
+    "--spectrum-progressbar-static-white-track-color",
     "--spectrum-progressbar-text-color",
     "--spectrum-progressbar-thickness",
     "--spectrum-progressbar-track-color",
+    "--spectrum-progressbar-track-color-default",
     "--spectrum-progressbar-track-color-white"
   ],
   "global": [
@@ -113,29 +94,19 @@
     "--spectrum-font-size-100",
     "--spectrum-font-size-200",
     "--spectrum-font-size-75",
-    "--spectrum-gray-300",
+    "--spectrum-gray-200",
     "--spectrum-line-height-100",
-    "--spectrum-meter-default-width",
-    "--spectrum-meter-inline-size",
-    "--spectrum-meter-max-width",
-    "--spectrum-meter-maximum-width",
-    "--spectrum-meter-min-width",
-    "--spectrum-meter-minimum-width",
-    "--spectrum-meter-thickness-l",
-    "--spectrum-meter-thickness-large",
-    "--spectrum-meter-thickness-s",
-    "--spectrum-meter-thickness-small",
-    "--spectrum-negative-visual-color",
     "--spectrum-neutral-content-color-default",
-    "--spectrum-notice-visual-color",
-    "--spectrum-positive-visual-color",
     "--spectrum-spacing-200",
     "--spectrum-spacing-75",
-    "--spectrum-transparent-white-300",
+    "--spectrum-transparent-white-400",
     "--spectrum-white"
   ],
-  "system-theme": [],
-  "passthroughs": [],
+  "system-theme": [
+    "--system-progress-bar-track-color",
+    "--system-progress-bar-track-color-white"
+  ],
+  "passthroughs": ["--mod-fieldlabel-font-size"],
   "high-contrast": [
     "--highcontrast-progressbar-fill-color",
     "--highcontrast-progressbar-track-color"
diff --git a/components/progressbar/index.css b/components/progressbar/index.css
index 64d127c8b9..648c492df0 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -11,13 +11,50 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
+.spectrum-ProgressBar,
+.spectrum-ProgressBar--sizeM {
+	--spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400);
+	--spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75);
+	/* @todo should this be --spectrum-progress-bar-thickness-medium? */
+	--spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large);
+	--spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
+}
+
+.spectrum-ProgressBar--sizeS {
+	--spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400);
+	--spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75);
+	--spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-small);
+	--spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+}
+
+.spectrum-ProgressBar--sizeL {
+	--spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2500);
+	--spectrum-progressbar-sized-font-size: var(--spectrum-font-size-100);
+	--spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large);
+	--spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
+}
+
+.spectrum-ProgressBar--sizeXL {
+	--spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2800);
+	--spectrum-progressbar-sized-font-size: var(--spectrum-font-size-200);
+	--spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-extra-large);
+	--spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
+}
+
 .spectrum-ProgressBar {
-	/* Static tokens */
-	--spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
-	--spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
+	--spectrum-progressbar-size-default: var(--mod-progressbar-size-default, var(--spectrum-progressbar-sized-size-default));
+	--spectrum-progressbar-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-sized-font-size));
+	--spectrum-progressbar-thickness: var(--mod-progressbar-thickness, var(--spectrum-progressbar-sized-thickness));
+	--spectrum-progressbar-spacing-top-to-text: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-sized-spacing-top-to-text));
+
+	--spectrum-progressbar-animation-ease-in-out-indeterminate: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-animation-ease-in-out));
+	--spectrum-progressbar-animation-duration-indeterminate: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-animation-duration-2000));
 	--spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100);
 
-	--spectrum-progressbar-fill-size-indeterminate: 70%;
+	--spectrum-progressbar-fill-size-indeterminate: var(--mod-progressbar-fill-size-indeterminate, 70%);
+	--spectrum-progressbar-dir-indeterminate-multiplier: 1;
 
 	/* --spectrum-global-dimension-static-size-2400 */
 	--spectrum-progressbar-size-2400: 192px;
@@ -29,102 +66,49 @@
 	--spectrum-progressbar-size-2800: 224px;
 
 	/* Size */
-	--spectrum-progressbar-font-size: var(--spectrum-font-size-75);
-	--spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100);
+	--spectrum-progressbar-line-height-cjk: var(--mod-progressbar-line-height-cjk, var(--spectrum-cjk-line-height-100));
 
-	--spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width);
-	--spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width);
+	--spectrum-progressbar-min-size: var(--mod-progressbar-min-size, var(--spectrum-progress-bar-minimum-width));
+	--spectrum-progressbar-max-size: var(--mod-progressbar-max-size, var(--spectrum-progress-bar-maximum-width));
 
-	--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium);
-	--spectrum-progressbar-line-height: var(--spectrum-line-height-100);
+	--spectrum-progressbar-line-height: var(--mod-progressbar-line-height, var(--spectrum-line-height-100));
 
 	/* Spacing */
-	--spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75);
-	--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
-	--spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200);
+	--spectrum-progressbar-spacing-label-to-progressbar: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-spacing-75));
+	--spectrum-progressbar-spacing-label-to-text: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-spacing-200));
 
 	/* Color */
-	--spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default);
-	--spectrum-progressbar-track-color: var(--spectrum-gray-300);
-	--spectrum-progressbar-fill-color: var(--spectrum-accent-color-900);
-	--spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color);
-	--spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color);
-	--spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color);
-	--spectrum-progressbar-label-and-value-white: var(--spectrum-white);
-	--spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
-	--spectrum-progressbar-fill-color-white: var(--spectrum-white);
-
-	/* Meter */
-	--spectrum-meter-min-width: var(--spectrum-meter-minimum-width);
-	--spectrum-meter-max-width: var(--spectrum-meter-maximum-width);
-	--spectrum-meter-inline-size: var(--spectrum-meter-default-width);
-	--spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small);
-	--spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large);
-}
-
-.spectrum-ProgressBar--sizeS,
-.spectrum-Meter--sizeS {
-	--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
-
-	--spectrum-progressbar-font-size: var(--spectrum-font-size-75);
-	--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small);
+	--spectrum-progressbar-fill-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900)));
+	--spectrum-progressbar-track-color-default: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
 
-	--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-}
-
-.spectrum-ProgressBar--sizeM {
-	--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
+	--spectrum-progressbar-text-color: var(--mod-progressbar-text-color, var(--spectrum-neutral-content-color-default));
+	--spectrum-progressbar-label-and-value-white: var(--mod-progressbar-label-and-value-white, var(--spectrum-white));
+	--spectrum-progressbar-fill-color-white: var(--mod-progressbar-fill-color-white, var(--spectrum-white));
+	--spectrum-progressbar-static-white-track-color: var(--spectrum-progressbar-track-color-white);
 
-	--spectrum-progressbar-font-size: var(--spectrum-font-size-75);
-	--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
-
-	--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-}
+	/* @passthrough */
+	--mod-fieldlabel-font-size: var(--spectrum-progressbar-font-size);
 
-.spectrum-ProgressBar--sizeL,
-.spectrum-Meter--sizeL {
-	--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
-
-	--spectrum-progressbar-font-size: var(--spectrum-font-size-100);
-	--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
-
-	--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
-}
-
-.spectrum-ProgressBar--sizeXL {
-	--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800);
-
-	--spectrum-progressbar-font-size: var(--spectrum-font-size-200);
-	--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large);
-
-	--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
-}
-
-.spectrum-Meter {
-	--spectrum-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size));
-	--spectrum-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width));
-	--spectrum-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width));
-
-	/* Meter only supports size S and L */
-	&.spectrum-Meter--sizeS {
-		--spectrum-progressbar-thickness: var(--spectrum-meter-thickness-s);
+	&:dir(rtl) {
+		--spectrum-progressbar-dir-indeterminate-multiplier: -1;
 	}
 
-	&.spectrum-Meter--sizeL {
-		--spectrum-progressbar-thickness: var(--spectrum-meter-thickness-l);
-		--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-	}
-
-	&.is-positive .spectrum-ProgressBar-fill {
-		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk);
 	}
+}
 
-	&.is-notice .spectrum-ProgressBar-fill {
-		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
+@media (forced-colors: active) {
+	.spectrum-ProgressBar {
+		--highcontrast-progressbar-fill-color: ButtonText;
+		--highcontrast-progressbar-track-color: ButtonFace;
 	}
 
-	&.is-negative .spectrum-ProgressBar-fill {
-		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
+	.spectrum-ProgressBar-track {
+		forced-color-adjust: none;
+		border: 1px solid ButtonText;
 	}
 }
 
@@ -134,144 +118,99 @@
 	flex-flow: row wrap;
 	justify-content: space-between;
 	align-items: center;
-	font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size));
 	vertical-align: top;
 
-	inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
-	max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size));
-	min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size));
+	inline-size: var(--spectrum-progressbar-size-default);
+	max-inline-size: var(--spectrum-progressbar-max-size);
+	min-inline-size: var(--spectrum-progressbar-min-size);
 
-	/* Label and Percentage */
-	.spectrum-ProgressBar-label,
-	.spectrum-ProgressBar-percentage {
-		text-align: start;
-		margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text));
-		margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar));
-
-		line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height));
-
-		&:lang(ja),
-		&:lang(zh),
-		&:lang(ko) {
-			line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk));
-		}
-
-		color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color));
-	}
-
-	/* Label */
-	.spectrum-ProgressBar-label {
-		flex: 1 1 0%;
+	&.spectrum-ProgressBar--sideLabel {
+		flex-flow: row;
+		justify-content: space-between;
 	}
 
-	/* Percentage */
-	.spectrum-ProgressBar-percentage {
-		align-self: flex-start;
-		margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
-	}
-
-	/* Track */
-	.spectrum-ProgressBar-track {
-		/* Visually apply border radius to child elements */
-		overflow: hidden;
-		inline-size: 100%;
-		block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
-		border-radius: var(--spectrum-progressbar-corner-radius);
-
-		background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
-	}
-
-	.spectrum-ProgressBar-fill {
-		border: none;
-		block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
-		transition: width 1s;
-		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
+	&.spectrum-ProgressBar--staticWhite {
+		--mod-progressbar-fill-color: var(--spectrum-progressbar-fill-color-white);
+		--mod-progressbar-text-color: var(--spectrum-progressbar-label-and-value-white);
+		--mod-progressbar-track-color: var(--spectrum-progressbar-static-white-track-color);
 	}
 }
 
-.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill {
-	inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate));
-	position: relative;
-	animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate));
-	will-change: transform;
-}
+/* Label and Percentage */
+.spectrum-ProgressBar-label,
+.spectrum-ProgressBar-percentage {
+	text-align: start;
+	margin-block-start: var(--spectrum-progressbar-spacing-top-to-text);
+	margin-block-end: var(--spectrum-progressbar-spacing-label-to-progressbar);
 
-/* Variants  */
-/* Side Label */
-.spectrum-ProgressBar--sideLabel {
-	display: inline-flex;
-	flex-flow: row;
-	justify-content: space-between;
+	line-height: var(--spectrum-progressbar-line-height);
+	color: var(--spectrum-progressbar-text-color);
+}
 
-	.spectrum-ProgressBar-track {
-		flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
-	}
+/* Label */
+.spectrum-ProgressBar-label {
+	flex: 1 1 0%;
 
-	.spectrum-ProgressBar-label {
+	.spectrum-ProgressBar--sideLabel & {
 		flex-grow: 0;
-		margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
+		margin-inline-end: var(--spectrum-progressbar-spacing-label-to-text);
 		margin-block-end: 0;
 	}
+}
 
-	.spectrum-ProgressBar-percentage {
+/* Percentage */
+.spectrum-ProgressBar-percentage {
+	align-self: flex-start;
+	margin-inline-start: var(--spectrum-progressbar-spacing-label-to-text);
+
+	.spectrum-ProgressBar--sideLabel & {
 		order: 3;
 		text-align: end;
-		margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
 		margin-block-end: 0;
 	}
 }
 
-/* Static White */
-.spectrum-ProgressBar.spectrum-ProgressBar--staticWhite {
-	.spectrum-ProgressBar-fill {
-		color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
-		background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
-	}
+/* Track */
+.spectrum-ProgressBar-track {
+	/* Visually apply border radius to child elements */
+	overflow: hidden;
+	inline-size: 100%;
+	block-size: var(--spectrum-progressbar-thickness);
+	border-radius: var(--spectrum-progressbar-corner-radius);
 
-	.spectrum-ProgressBar-label,
-	.spectrum-ProgressBar-percentage {
-		color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
-	}
+	background: var(--spectrum-progressbar-track-color-default);
 
-	.spectrum-ProgressBar-track {
-		background: var(--spectrum-progressbar-track-color-white);
+	.spectrum-ProgressBar--sideLabel & {
+		flex: 1 1 var(--spectrum-progressbar-size-default);
 	}
 }
 
-/* Animations  */
-.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill {
-	animation: indeterminate-loop-ltr var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite;
-}
+.spectrum-ProgressBar-fill {
+	block-size: var(--spectrum-progressbar-thickness);
 
-.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl) {
-	animation: indeterminate-loop-rtl var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite;
-}
+	border: none;
+	background: var(--spectrum-progressbar-fill-color);
 
-@keyframes indeterminate-loop-ltr {
-	from {
-		transform: translate(calc(-1 * var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate))));
-	}
+	transition: width 1s;
 
-	to {
-		transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)));
+	.spectrum-ProgressBar--indeterminate & {
+		position: relative;
+		inline-size: var(--spectrum-progressbar-fill-size-indeterminate);
+
+		will-change: transform;
+		animation-name: indeterminate-loop;
+		animation-timing-function: var(--spectrum-progressbar-animation-ease-in-out-indeterminate);
+		animation-duration: var(--spectrum-progressbar-animation-duration-indeterminate);
+		animation-iteration-count: infinite;
 	}
 }
 
-@keyframes indeterminate-loop-rtl {
+@keyframes indeterminate-loop {
 	from {
-		transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate)));
+		transform: translate(calc(-1 * var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-fill-size-indeterminate)));
 	}
 
 	to {
-		transform: translate(calc(-1 * var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))));
-	}
-}
-
-@media (forced-colors: active) {
-	.spectrum-ProgressBar-track {
-		--highcontrast-progressbar-fill-color: ButtonText;
-		--highcontrast-progressbar-track-color: ButtonFace;
-		border: 1px solid ButtonText;
-		forced-color-adjust: none;
+		transform: translate(calc(var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-size-default)));
 	}
 }
diff --git a/components/progressbar/metadata/mods.md b/components/progressbar/metadata/mods.md
deleted file mode 100644
index 1a9745a13e..0000000000
--- a/components/progressbar/metadata/mods.md
+++ /dev/null
@@ -1,27 +0,0 @@
-| Modifiable custom properties                            |
-| ------------------------------------------------------- |
-| `--mod-meter-inline-size`                               |
-| `--mod-meter-max-width`                                 |
-| `--mod-meter-min-width`                                 |
-| `--mod-progressbar-animation-duration-indeterminate`    |
-| `--mod-progressbar-animation-ease-in-out-indeterminate` |
-| `--mod-progressbar-fill-color`                          |
-| `--mod-progressbar-fill-color-negative`                 |
-| `--mod-progressbar-fill-color-notice`                   |
-| `--mod-progressbar-fill-color-positive`                 |
-| `--mod-progressbar-fill-color-white`                    |
-| `--mod-progressbar-fill-size-indeterminate`             |
-| `--mod-progressbar-font-size`                           |
-| `--mod-progressbar-label-and-value-white`               |
-| `--mod-progressbar-line-height`                         |
-| `--mod-progressbar-line-height-cjk`                     |
-| `--mod-progressbar-max-size`                            |
-| `--mod-progressbar-min-size`                            |
-| `--mod-progressbar-size-default`                        |
-| `--mod-progressbar-spacing-label-to-progressbar`        |
-| `--mod-progressbar-spacing-label-to-text`               |
-| `--mod-progressbar-spacing-top-to-text`                 |
-| `--mod-progressbar-text-color`                          |
-| `--mod-progressbar-thickness`                           |
-| `--mod-progressbar-track-color`                         |
-| `--mod-spacing-progressbar-label-to-text`               |
diff --git a/components/progressbar/package.json b/components/progressbar/package.json
index 0d8411f050..40615edf6a 100644
--- a/components/progressbar/package.json
+++ b/components/progressbar/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
@@ -57,11 +58,6 @@
 			"guidelines": "https://spectrum.adobe.com/page/progress-bar",
 			"rootClass": "spectrum-ProgressBar",
 			"swc": "https://opensource.adobe.com/spectrum-web-components/components/progress-bar/"
-		},
-		{
-			"guidelines": "https://spectrum.adobe.com/page/meter",
-			"rootClass": "spectrum-Meter",
-			"swc": "https://opensource.adobe.com/spectrum-web-components/components/meter/"
 		}
 	]
 }
diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
deleted file mode 100644
index 8c045d1cf0..0000000000
--- a/components/progressbar/stories/meter.template.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Container } from "@spectrum-css/preview/decorators";
-import { html } from "lit";
-import { capitalize } from "lodash-es";
-import { Template as ProgressBar } from "./template.js";
-
-import "../index.css";
-
-export const Template = ({
-	customClasses = [],
-	fill,
-	size = "s",
-	rootClass = "spectrum-Meter",
-	staticColor,
-	...item
-} = {}, context = {}) => ProgressBar({
-	customClasses: [
-		rootClass,
-		typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null,
-		typeof fill !== "undefined" ? `is-${fill}` : null,
-		/*
-		 * The `spectrum-Meter--staticWhite` class is not present in the Meter CSS, as it makes use of
-		 * `spectrum-ProgressBar--staticWhite`, but having this allows for simpler detection of static
-		 * colors when looking at the element using its `rootClass` in our decorators.
-		 */
-		typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null,
-		...customClasses,
-	].filter(Boolean),
-	size,
-	staticColor,
-	...item,
-}, context);
-
-/* FillGroup showcases all semantic variants in a single story. */
-export const FillGroup = (args, context) => Container({
-	withBorder: false,
-	withHeading: false,
-	content: html`${["info", "positive", "negative", "notice"].map((variant) =>
-		Container({
-			withBorder: false,
-			heading: variant,
-			content: Template({...args, fill: variant}, context),
-		}, context)
-	)}`
-}, context);
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index f6bf0ff90a..4468a70127 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ProgressBarGroup } from "./progressbar.test.js";
 import { IndeterminateGroup, Template } from "./template.js";
@@ -92,6 +92,10 @@ export default {
 		showValueLabel: true,
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13059-181",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index 84fd9506b7..c358879721 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { capitalize } from "lodash-es";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-ProgressBar",
@@ -22,7 +25,8 @@ export const Template = ({
 	progressBarFill,
 	customStyles = {},
 	size = "m",
-} = {}, context = {}) => html`
+} = {}, context = {}) => {
+	return html`
 		<div
 			class=${classMap({
 				[rootClass]: true,
@@ -62,7 +66,8 @@ export const Template = ({
 				></div>
 			</div>
 		</div>
-`;
+	`;
+};
 
 /* This template shows determinate and indeterminate progress bars  */
 export const IndeterminateGroup = (args, context) => Container({
diff --git a/components/progressbar/themes/express.css b/components/progressbar/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/progressbar/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/progressbar/themes/spectrum-two.css b/components/progressbar/themes/spectrum-two.css
new file mode 100644
index 0000000000..3b705ef64c
--- /dev/null
+++ b/components/progressbar/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-ProgressBar {
+		--spectrum-progressbar-track-color: var(--spectrum-gray-200);
+		--spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400);
+	}
+}
diff --git a/components/progressbar/themes/spectrum.css b/components/progressbar/themes/spectrum.css
new file mode 100644
index 0000000000..3760cc4cfc
--- /dev/null
+++ b/components/progressbar/themes/spectrum.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-ProgressBar {
+		--spectrum-progressbar-track-color: var(--spectrum-gray-300);
+		--spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
+	}
+}
diff --git a/components/progresscircle/CHANGELOG.md b/components/progresscircle/CHANGELOG.md
index 77cb473f0d..494bfe022f 100644
--- a/components/progresscircle/CHANGELOG.md
+++ b/components/progresscircle/CHANGELOG.md
@@ -1153,5 +1153,5 @@ Co-authored-by: Patrick Fulton <pfulton@adobe.com>
 
 ### Migration guide
 
-- **Circle loader component renamed**  
+- **Circle loader component renamed**
   Circle loader is now known as Progress circle. Replace all `.spectrum-CircleLoader*` classnames with `.spectrum-ProgressCircle*`.
diff --git a/components/progresscircle/metadata/metadata.json b/components/progresscircle/dist/metadata.json
similarity index 86%
rename from components/progresscircle/metadata/metadata.json
rename to components/progresscircle/dist/metadata.json
index 0d5440aa65..82493f1462 100644
--- a/components/progresscircle/metadata/metadata.json
+++ b/components/progresscircle/dist/metadata.json
@@ -6,9 +6,6 @@
     ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2",
     ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills",
     ".spectrum-ProgressCircle--indeterminate-fill-submask-2",
-    ".spectrum-ProgressCircle--large",
-    ".spectrum-ProgressCircle--medium",
-    ".spectrum-ProgressCircle--small",
     ".spectrum-ProgressCircle-fill",
     ".spectrum-ProgressCircle-fillMask1",
     ".spectrum-ProgressCircle-fillMask2",
@@ -16,6 +13,9 @@
     ".spectrum-ProgressCircle-fillSubMask2",
     ".spectrum-ProgressCircle-fills",
     ".spectrum-ProgressCircle-track",
+    ".spectrum-ProgressCircle.spectrum-ProgressCircle--large",
+    ".spectrum-ProgressCircle.spectrum-ProgressCircle--medium",
+    ".spectrum-ProgressCircle.spectrum-ProgressCircle--small",
     ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill",
     ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track",
     "0%",
@@ -106,11 +106,18 @@
   ],
   "global": [
     "--spectrum-accent-content-color-default",
+    "--spectrum-gray-200",
     "--spectrum-gray-300",
+    "--spectrum-transparent-white-1000",
     "--spectrum-transparent-white-300",
+    "--spectrum-transparent-white-400",
     "--spectrum-transparent-white-900"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-progress-circle-fill-border-color-over-background",
+    "--system-progress-circle-track-border-color",
+    "--system-progress-circle-track-border-color-over-background"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-progress-circle-fill-border-color",
diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css
index 00875abf35..019cbb78bb 100644
--- a/components/progresscircle/index.css
+++ b/components/progresscircle/index.css
@@ -11,7 +11,23 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./animation.css";
+@import "./themes/spectrum-two.css";
+
+/* windows high contrast mode */
+@media (forced-colors: active) {
+	.spectrum-ProgressCircle {
+		/* fill is bright color */
+		--highcontrast-progress-circle-fill-border-color: Highlight;
+
+		/* fill over background is bright color */
+		--highcontrast-progress-circle-fill-border-color-over-background: Highlight;
+	}
+
+	/* track double for visibility */
+	.spectrum-ProgressCircle-track {
+		--spectrum-progress-circle-track-border-style: double;
+	}
+}
 
 .spectrum-ProgressCircle {
 	/* circle unfilled border color */
@@ -26,46 +42,25 @@
 	/* over background progress fill border color */
 	--spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
 
-	/* default size and thickness */
-	--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
-	--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
-
 	/* track border style */
 	--spectrum-progress-circle-track-border-style: solid;
-}
 
-.spectrum-ProgressCircle--small {
-	--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
-	--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
-}
-
-.spectrum-ProgressCircle--medium {
-	--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
-	--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
-}
-
-.spectrum-ProgressCircle--large {
-	--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
-	--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
-}
-
-/* windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-ProgressCircle {
-		/* fill is bright color */
-		--highcontrast-progress-circle-fill-border-color: Highlight;
+	&.spectrum-ProgressCircle--small {
+		--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
+		--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
+	}
 
-		/* fill over background is bright color */
-		--highcontrast-progress-circle-fill-border-color-over-background: Highlight;
+	&,
+	&.spectrum-ProgressCircle--medium {
+		--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
+		--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
 	}
 
-	/* track double for visibility */
-	.spectrum-ProgressCircle-track {
-		--spectrum-progress-circle-track-border-style: double;
+	&.spectrum-ProgressCircle--large {
+		--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
+		--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
 	}
-}
 
-.spectrum-ProgressCircle {
 	display: inline-block;
 	inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
 	block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
@@ -165,3 +160,501 @@
 		animation: 1s infinite linear spectrum-fill-mask-2;
 	}
 }
+
+.spectrum-ProgressCircle--indeterminate-fill-submask-2 {
+	animation: 1s infinite linear spectrum-fill-mask-2;
+}
+
+@keyframes spectrum-fill-mask-1 {
+	0% {
+		transform: rotate(90deg);
+	}
+
+	1.69% {
+		transform: rotate(72.3deg);
+	}
+
+	3.39% {
+		transform: rotate(55.5deg);
+	}
+
+	5.08% {
+		transform: rotate(40.3deg);
+	}
+
+	6.78% {
+		transform: rotate(25deg);
+	}
+
+	8.47% {
+		transform: rotate(10.6deg);
+	}
+
+	10.17% {
+		transform: rotate(0deg);
+	}
+
+	11.86% {
+		transform: rotate(0deg);
+	}
+
+	13.56% {
+		transform: rotate(0deg);
+	}
+
+	15.25% {
+		transform: rotate(0deg);
+	}
+
+	16.95% {
+		transform: rotate(0deg);
+	}
+
+	18.64% {
+		transform: rotate(0deg);
+	}
+
+	20.34% {
+		transform: rotate(0deg);
+	}
+
+	22.03% {
+		transform: rotate(0deg);
+	}
+
+	23.73% {
+		transform: rotate(0deg);
+	}
+
+	25.42% {
+		transform: rotate(0deg);
+	}
+
+	27.12% {
+		transform: rotate(0deg);
+	}
+
+	28.81% {
+		transform: rotate(0deg);
+	}
+
+	30.51% {
+		transform: rotate(0deg);
+	}
+
+	32.2% {
+		transform: rotate(0deg);
+	}
+
+	33.9% {
+		transform: rotate(0deg);
+	}
+
+	35.59% {
+		transform: rotate(0deg);
+	}
+
+	37.29% {
+		transform: rotate(0deg);
+	}
+
+	38.98% {
+		transform: rotate(0deg);
+	}
+
+	40.68% {
+		transform: rotate(0deg);
+	}
+
+	42.37% {
+		transform: rotate(5.3deg);
+	}
+
+	44.07% {
+		transform: rotate(13.4deg);
+	}
+
+	45.76% {
+		transform: rotate(20.6deg);
+	}
+
+	47.46% {
+		transform: rotate(29deg);
+	}
+
+	49.15% {
+		transform: rotate(36.5deg);
+	}
+
+	50.85% {
+		transform: rotate(42.6deg);
+	}
+
+	52.54% {
+		transform: rotate(48.8deg);
+	}
+
+	54.24% {
+		transform: rotate(54.2deg);
+	}
+
+	55.93% {
+		transform: rotate(59.4deg);
+	}
+
+	57.63% {
+		transform: rotate(63.2deg);
+	}
+
+	59.32% {
+		transform: rotate(67.2deg);
+	}
+
+	61.02% {
+		transform: rotate(70.8deg);
+	}
+
+	62.71% {
+		transform: rotate(73.8deg);
+	}
+
+	64.41% {
+		transform: rotate(76.2deg);
+	}
+
+	66.1% {
+		transform: rotate(78.7deg);
+	}
+
+	67.8% {
+		transform: rotate(80.6deg);
+	}
+
+	69.49% {
+		transform: rotate(82.6deg);
+	}
+
+	71.19% {
+		transform: rotate(83.7deg);
+	}
+
+	72.88% {
+		transform: rotate(85deg);
+	}
+
+	74.58% {
+		transform: rotate(86.3deg);
+	}
+
+	76.27% {
+		transform: rotate(87deg);
+	}
+
+	77.97% {
+		transform: rotate(87.7deg);
+	}
+
+	79.66% {
+		transform: rotate(88.3deg);
+	}
+
+	81.36% {
+		transform: rotate(88.6deg);
+	}
+
+	83.05% {
+		transform: rotate(89.2deg);
+	}
+
+	84.75% {
+		transform: rotate(89.2deg);
+	}
+
+	86.44% {
+		transform: rotate(89.5deg);
+	}
+
+	88.14% {
+		transform: rotate(89.9deg);
+	}
+
+	89.83% {
+		transform: rotate(89.7deg);
+	}
+
+	91.53% {
+		transform: rotate(90.1deg);
+	}
+
+	93.22% {
+		transform: rotate(90.2deg);
+	}
+
+	94.92% {
+		transform: rotate(90.1deg);
+	}
+
+	96.61% {
+		transform: rotate(90deg);
+	}
+
+	98.31% {
+		transform: rotate(89.8deg);
+	}
+
+	100% {
+		transform: rotate(90deg);
+	}
+}
+
+@keyframes spectrum-fill-mask-2 {
+	0% {
+		transform: rotate(180deg);
+	}
+
+	1.69% {
+		transform: rotate(180deg);
+	}
+
+	3.39% {
+		transform: rotate(180deg);
+	}
+
+	5.08% {
+		transform: rotate(180deg);
+	}
+
+	6.78% {
+		transform: rotate(180deg);
+	}
+
+	8.47% {
+		transform: rotate(180deg);
+	}
+
+	10.17% {
+		transform: rotate(179.2deg);
+	}
+
+	11.86% {
+		transform: rotate(164deg);
+	}
+
+	13.56% {
+		transform: rotate(151.8deg);
+	}
+
+	15.25% {
+		transform: rotate(140.8deg);
+	}
+
+	16.95% {
+		transform: rotate(130.3deg);
+	}
+
+	18.64% {
+		transform: rotate(120.4deg);
+	}
+
+	20.34% {
+		transform: rotate(110.8deg);
+	}
+
+	22.03% {
+		transform: rotate(101.6deg);
+	}
+
+	23.73% {
+		transform: rotate(93.5deg);
+	}
+
+	25.42% {
+		transform: rotate(85.4deg);
+	}
+
+	27.12% {
+		transform: rotate(78.1deg);
+	}
+
+	28.81% {
+		transform: rotate(71.2deg);
+	}
+
+	30.51% {
+		transform: rotate(89.1deg);
+	}
+
+	32.2% {
+		transform: rotate(105.5deg);
+	}
+
+	33.9% {
+		transform: rotate(121.3deg);
+	}
+
+	35.59% {
+		transform: rotate(135.5deg);
+	}
+
+	37.29% {
+		transform: rotate(148.4deg);
+	}
+
+	38.98% {
+		transform: rotate(161deg);
+	}
+
+	40.68% {
+		transform: rotate(173.5deg);
+	}
+
+	42.37% {
+		transform: rotate(180deg);
+	}
+
+	44.07% {
+		transform: rotate(180deg);
+	}
+
+	45.76% {
+		transform: rotate(180deg);
+	}
+
+	47.46% {
+		transform: rotate(180deg);
+	}
+
+	49.15% {
+		transform: rotate(180deg);
+	}
+
+	50.85% {
+		transform: rotate(180deg);
+	}
+
+	52.54% {
+		transform: rotate(180deg);
+	}
+
+	54.24% {
+		transform: rotate(180deg);
+	}
+
+	55.93% {
+		transform: rotate(180deg);
+	}
+
+	57.63% {
+		transform: rotate(180deg);
+	}
+
+	59.32% {
+		transform: rotate(180deg);
+	}
+
+	61.02% {
+		transform: rotate(180deg);
+	}
+
+	62.71% {
+		transform: rotate(180deg);
+	}
+
+	64.41% {
+		transform: rotate(180deg);
+	}
+
+	66.1% {
+		transform: rotate(180deg);
+	}
+
+	67.8% {
+		transform: rotate(180deg);
+	}
+
+	69.49% {
+		transform: rotate(180deg);
+	}
+
+	71.19% {
+		transform: rotate(180deg);
+	}
+
+	72.88% {
+		transform: rotate(180deg);
+	}
+
+	74.58% {
+		transform: rotate(180deg);
+	}
+
+	76.27% {
+		transform: rotate(180deg);
+	}
+
+	77.97% {
+		transform: rotate(180deg);
+	}
+
+	79.66% {
+		transform: rotate(180deg);
+	}
+
+	81.36% {
+		transform: rotate(180deg);
+	}
+
+	83.05% {
+		transform: rotate(180deg);
+	}
+
+	84.75% {
+		transform: rotate(180deg);
+	}
+
+	86.44% {
+		transform: rotate(180deg);
+	}
+
+	88.14% {
+		transform: rotate(180deg);
+	}
+
+	89.83% {
+		transform: rotate(180deg);
+	}
+
+	91.53% {
+		transform: rotate(180deg);
+	}
+
+	93.22% {
+		transform: rotate(180deg);
+	}
+
+	94.92% {
+		transform: rotate(180deg);
+	}
+
+	96.61% {
+		transform: rotate(180deg);
+	}
+
+	98.31% {
+		transform: rotate(180deg);
+	}
+
+	100% {
+		transform: rotate(180deg);
+	}
+}
+
+@keyframes spectrum-fills-rotate {
+	0% {
+		transform: rotate(-90deg);
+	}
+
+	100% {
+		transform: rotate(270deg);
+	}
+}
diff --git a/components/progresscircle/metadata/mods.md b/components/progresscircle/metadata/mods.md
deleted file mode 100644
index 8c8a757ca6..0000000000
--- a/components/progresscircle/metadata/mods.md
+++ /dev/null
@@ -1,10 +0,0 @@
-| Modifiable custom properties                               |
-| ---------------------------------------------------------- |
-| `--mod-progress-circle-fill-border-color`                  |
-| `--mod-progress-circle-fill-border-color-over-background`  |
-| `--mod-progress-circle-position`                           |
-| `--mod-progress-circle-size`                               |
-| `--mod-progress-circle-thickness`                          |
-| `--mod-progress-circle-track-border-color`                 |
-| `--mod-progress-circle-track-border-color-over-background` |
-| `--mod-progress-circle-track-border-style`                 |
diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json
index 203e3f726f..6aa9022043 100644
--- a/components/progresscircle/package.json
+++ b/components/progresscircle/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js
index f5f7216b3e..f64c2f2780 100644
--- a/components/progresscircle/stories/progresscircle.stories.js
+++ b/components/progresscircle/stories/progresscircle.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ProgressCircleGroup } from "./progresscircle.test.js";
 import { Template } from "./template.js";
@@ -27,6 +27,10 @@ export default {
 		staticColor: undefined,
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13061-181",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js
index a0fa4486e8..2e27221f91 100644
--- a/components/progresscircle/stories/template.js
+++ b/components/progresscircle/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	id = getRandomId("progress-circle"),
@@ -15,7 +18,7 @@ export const Template = ({
 	size = "m",
 	staticColor,
 	isIndeterminate = false,
-}) => {
+} = {}) => {
 	let sizeClassName = "medium";
 	switch (size) {
 		case "s":
diff --git a/components/progresscircle/themes/express.css b/components/progresscircle/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/progresscircle/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/progresscircle/themes/spectrum-two.css b/components/progresscircle/themes/spectrum-two.css
new file mode 100644
index 0000000000..93464f2294
--- /dev/null
+++ b/components/progresscircle/themes/spectrum-two.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-ProgressCircle {
+		/* circle unfilled border color */
+		--spectrum-progress-circle-track-border-color: var(--spectrum-gray-200);
+
+		--spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400);
+		--spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000);
+	}
+}
diff --git a/components/progresscircle/themes/spectrum.css b/components/progresscircle/themes/spectrum.css
new file mode 100644
index 0000000000..2d0e45eece
--- /dev/null
+++ b/components/progresscircle/themes/spectrum.css
@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-ProgressCircle {
+		/* circle unfilled border color */
+		--spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
+
+		--spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
+		--spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
+	}
+}
diff --git a/components/radio/metadata/metadata.json b/components/radio/dist/metadata.json
similarity index 95%
rename from components/radio/metadata/metadata.json
rename to components/radio/dist/metadata.json
index e3879a1ab0..b94c6dfcf9 100644
--- a/components/radio/metadata/metadata.json
+++ b/components/radio/dist/metadata.json
@@ -7,7 +7,6 @@
     ".spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label",
     ".spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before",
     ".spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label",
-    ".spectrum-Radio--emphasized",
     ".spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
     ".spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
     ".spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
@@ -150,11 +149,10 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
+    "--spectrum-gray-50",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
-    "--spectrum-gray-75",
     "--spectrum-gray-800",
-    "--spectrum-gray-900",
     "--spectrum-line-height-100",
     "--spectrum-neutral-background-color-selected-default",
     "--spectrum-neutral-background-color-selected-down",
@@ -170,17 +168,15 @@
     "--spectrum-text-to-control-75"
   ],
   "system-theme": [
+    "--system-radio-button-background-color",
     "--system-radio-button-border-color-default",
     "--system-radio-button-border-color-down",
     "--system-radio-button-border-color-focus",
-    "--system-radio-button-border-color-hover",
-    "--system-radio-emphasized-button-checked-border-color-default",
-    "--system-radio-emphasized-button-checked-border-color-down",
-    "--system-radio-emphasized-button-checked-border-color-focus",
-    "--system-radio-emphasized-button-checked-border-color-hover"
+    "--system-radio-button-border-color-hover"
   ],
   "passthroughs": [],
   "high-contrast": [
+    "--highcontrast-radio-button-background-color",
     "--highcontrast-radio-button-border-color-default",
     "--highcontrast-radio-button-border-color-down",
     "--highcontrast-radio-button-border-color-focus",
diff --git a/components/radio/index.css b/components/radio/index.css
index f5d97a29c6..f531d01f8d 100644
--- a/components/radio/index.css
+++ b/components/radio/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 /*
  * Radio:
@@ -44,7 +43,6 @@
 
 	/* selection indicator all themes */
 	--spectrum-radio-border-width: var(--spectrum-border-width-200);
-	--spectrum-radio-button-background-color: var(--spectrum-gray-75);
 
 	/* checked selection indicator */
 	--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
@@ -52,13 +50,6 @@
 	--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
 	--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
 
-	/* spacing all themes */
-	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
-	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
-	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-
-	/* text styles all themes */
-	--spectrum-radio-font-size: var(--spectrum-font-size-100);
 	--spectrum-radio-line-height: var(--spectrum-line-height-100);
 
 	/* animation all themes */
@@ -70,13 +61,19 @@
 	&:lang(ko) {
 		--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
 	}
+}
 
-	/* default radio size for no t-shirt size */
+.spectrum-Radio,
+.spectrum-Radio--sizeM {
 	--spectrum-radio-height: var(--spectrum-component-height-100);
 	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
 
-	/* default radio spacing for no t-shirt size */
+	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
+	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
+	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
 	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
+
+	--spectrum-radio-font-size: var(--spectrum-font-size-100);
 }
 
 .spectrum-Radio--sizeS {
@@ -91,18 +88,6 @@
 	--spectrum-radio-font-size: var(--spectrum-font-size-75);
 }
 
-.spectrum-Radio--sizeM {
-	--spectrum-radio-height: var(--spectrum-component-height-100);
-	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
-
-	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
-	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
-	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
-
-	--spectrum-radio-font-size: var(--spectrum-font-size-100);
-}
-
 .spectrum-Radio--sizeL {
 	--spectrum-radio-height: var(--spectrum-component-height-200);
 	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large);
@@ -130,6 +115,8 @@
 /* windows high contrast mode */
 @media (forced-colors: active) {
 	.spectrum-Radio {
+		--highcontrast-radio-button-background-color: ButtonFace;
+
 		/* high contrast text */
 		--highcontrast-radio-neutral-content-color: CanvasText;
 		--highcontrast-radio-neutral-content-color-hover: CanvasText;
diff --git a/components/radio/metadata/mods.md b/components/radio/metadata/mods.md
deleted file mode 100644
index 6570df4854..0000000000
--- a/components/radio/metadata/mods.md
+++ /dev/null
@@ -1,32 +0,0 @@
-| Modifiable custom properties                      |
-| ------------------------------------------------- |
-| `--mod-radio-animation-duration`                  |
-| `--mod-radio-border-width`                        |
-| `--mod-radio-button-background-color`             |
-| `--mod-radio-button-border-color-default`         |
-| `--mod-radio-button-border-color-down`            |
-| `--mod-radio-button-border-color-focus`           |
-| `--mod-radio-button-border-color-hover`           |
-| `--mod-radio-button-checked-border-color-default` |
-| `--mod-radio-button-checked-border-color-down`    |
-| `--mod-radio-button-checked-border-color-focus`   |
-| `--mod-radio-button-checked-border-color-hover`   |
-| `--mod-radio-button-control-size`                 |
-| `--mod-radio-button-top-to-control`               |
-| `--mod-radio-disabled-border-color`               |
-| `--mod-radio-disabled-content-color`              |
-| `--mod-radio-emphasized-accent-color`             |
-| `--mod-radio-emphasized-accent-color-down`        |
-| `--mod-radio-emphasized-accent-color-focus`       |
-| `--mod-radio-emphasized-accent-color-hover`       |
-| `--mod-radio-focus-indicator-color`               |
-| `--mod-radio-focus-indicator-thickness`           |
-| `--mod-radio-font-size`                           |
-| `--mod-radio-height`                              |
-| `--mod-radio-line-height`                         |
-| `--mod-radio-line-height-cjk`                     |
-| `--mod-radio-neutral-content-color`               |
-| `--mod-radio-neutral-content-color-down`          |
-| `--mod-radio-neutral-content-color-focus`         |
-| `--mod-radio-neutral-content-color-hover`         |
-| `--mod-radio-text-to-control`                     |
diff --git a/components/radio/package.json b/components/radio/package.json
index 60a40c9e67..4d2f3c04b2 100644
--- a/components/radio/package.json
+++ b/components/radio/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js
index bb2181ea40..1d6ff3d9b1 100644
--- a/components/radio/stories/radio.stories.js
+++ b/components/radio/stories/radio.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isChecked, isDisabled, isEmphasized, isReadOnly, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { RadioGroup } from "./radio.test.js";
 import { BasicGroupTemplate } from "./template.js";
@@ -54,6 +54,10 @@ export default {
 		actions: {
 			handles: ["click input[type=\"radio\"]"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=164-16723",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js
index 50ba8484b2..68c3cbf0e9 100644
--- a/components/radio/stories/template.js
+++ b/components/radio/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Radio",
diff --git a/components/radio/themes/express.css b/components/radio/themes/express.css
index 4763a5dcfd..8565459259 100644
--- a/components/radio/themes/express.css
+++ b/components/radio/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Radio {
 		/* selection indicator */
 		--spectrum-radio-button-border-color-default: var(--spectrum-gray-800);
diff --git a/components/radio/themes/spectrum-two.css b/components/radio/themes/spectrum-two.css
new file mode 100644
index 0000000000..48b980fc0e
--- /dev/null
+++ b/components/radio/themes/spectrum-two.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Radio {
+		/* selection indicator */
+		--spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
+		--spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
+		--spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
+		--spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
+
+		--spectrum-radio-button-background-color: var(--spectrum-gray-50);
+	}
+}
diff --git a/components/radio/themes/spectrum.css b/components/radio/themes/spectrum.css
index 467a880aa5..33772fcc7c 100644
--- a/components/radio/themes/spectrum.css
+++ b/components/radio/themes/spectrum.css
@@ -11,19 +11,12 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-Radio {
-		/* selection indicator */
-		--spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
-		--spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
-		--spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
-		--spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
-	}
+/* @combine .spectrum.spectrum--legacy */
 
-	.spectrum-Radio--emphasized {
-		--spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900);
-		--spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
-		--spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100);
-		--spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Radio {
+		--spectrum-radio-button-background-color: var(--spectrum-gray-75);
 	}
 }
diff --git a/components/rating/metadata/metadata.json b/components/rating/dist/metadata.json
similarity index 95%
rename from components/rating/metadata/metadata.json
rename to components/rating/dist/metadata.json
index 29250c51d1..75ee43e089 100644
--- a/components/rating/metadata/metadata.json
+++ b/components/rating/dist/metadata.json
@@ -91,15 +91,10 @@
     "--spectrum-border-width-200",
     "--spectrum-component-top-to-workflow-icon-100",
     "--spectrum-corner-radius-100",
-    "--spectrum-corner-radius-75",
     "--spectrum-disabled-content-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
     "--spectrum-neutral-subdued-content-color-default",
     "--spectrum-neutral-subdued-content-color-down",
     "--spectrum-neutral-subdued-content-color-hover",
@@ -110,7 +105,8 @@
     "--system-rating-icon-color-default",
     "--system-rating-icon-color-down",
     "--system-rating-icon-color-hover",
-    "--system-rating-icon-color-key-focus"
+    "--system-rating-icon-color-key-focus",
+    "--system-rating-indicator-border-radius"
   ],
   "passthroughs": [],
   "high-contrast": [
diff --git a/components/rating/index.css b/components/rating/index.css
index 9ebad3db61..02c7619491 100644
--- a/components/rating/index.css
+++ b/components/rating/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Rating {
 	/* Icon */
@@ -27,7 +26,6 @@
 
 	/* Spacing (top/bottom edge to icon) */
 	--spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
-	--spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75);
 
 	/* Indicator height */
 	--spectrum-rating-indicator-height: var(--spectrum-border-width-200);
@@ -42,9 +40,20 @@
 	/* Disabled */
 	--spectrum-rating-icon-color-disabled: var(--spectrum-disabled-content-color);
 	--spectrum-rating-icon-count: var(--spectrum-rating-icon-count);
-}
 
-.spectrum-Rating {
+	position: relative;
+	display: inline-flex;
+	flex: 0 0 auto;
+
+	gap: var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing));
+
+	inline-size: calc((var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)) + var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing))) * var(--mod-rating-icon-count, var(--spectrum-rating-icon-count)));
+	border-radius: var(--mod-rating-border-radius, var(--spectrum-rating-border-radius));
+
+	padding-inline: calc((var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing)) + var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap))) - 1.5px);
+
+	cursor: pointer;
+
 	&.is-focused {
 		box-shadow: 0 0 0 var(--mod-rating-focus-indicator-thickness, var(--spectrum-rating-focus-indicator-thickness)) var(--mod-rating-focus-indicator-color, var(--spectrum-rating-focus-indicator-color));
 
@@ -77,31 +86,8 @@
 			/* Match the color of the star */
 			background: currentColor;
 		}
-	}
-}
-
-.spectrum-Rating {
-	position: relative;
-	display: inline-flex;
-	flex: 0 0 auto;
 
-	gap: var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing));
-
-	inline-size: calc((var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)) + var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing))) * var(--mod-rating-icon-count, var(--spectrum-rating-icon-count)));
-	border-radius: var(--mod-rating-border-radius, var(--spectrum-rating-border-radius));
-
-	padding-inline: calc((var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing)) + var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap))) - 1.5px);
-
-	cursor: pointer;
-
-	&.is-disabled,
-	&.is-readOnly {
-		cursor: default;
-		pointer-events: none;
-	}
-
-	/* When the entire component is hovered, show all solid icons */
-	&:hover {
+		/* When the entire component is hovered, show all solid icons */
 		.spectrum-Rating-starActive {
 			display: block;
 		}
@@ -110,6 +96,12 @@
 			display: none;
 		}
 	}
+
+	&.is-disabled,
+	&.is-readOnly {
+		cursor: default;
+		pointer-events: none;
+	}
 }
 
 .spectrum-Rating-input {
diff --git a/components/rating/metadata/mods.md b/components/rating/metadata/mods.md
deleted file mode 100644
index 5a516faf68..0000000000
--- a/components/rating/metadata/mods.md
+++ /dev/null
@@ -1,22 +0,0 @@
-| Modifiable custom properties                   |
-| ---------------------------------------------- |
-| `--mod-rating-border-radius`                   |
-| `--mod-rating-emphasized-icon-color-default`   |
-| `--mod-rating-emphasized-icon-color-down`      |
-| `--mod-rating-emphasized-icon-color-hover`     |
-| `--mod-rating-emphasized-icon-color-key-focus` |
-| `--mod-rating-focus-indicator-color`           |
-| `--mod-rating-focus-indicator-gap`             |
-| `--mod-rating-focus-indicator-thickness`       |
-| `--mod-rating-icon-color-default`              |
-| `--mod-rating-icon-color-disabled`             |
-| `--mod-rating-icon-color-down`                 |
-| `--mod-rating-icon-color-hover`                |
-| `--mod-rating-icon-color-key-focus`            |
-| `--mod-rating-icon-count`                      |
-| `--mod-rating-icon-height`                     |
-| `--mod-rating-icon-spacing`                    |
-| `--mod-rating-icon-spacing-vertical-top`       |
-| `--mod-rating-icon-width`                      |
-| `--mod-rating-indicator-border-radius`         |
-| `--mod-rating-indicator-height`                |
diff --git a/components/rating/package.json b/components/rating/package.json
index f5994539da..6882bb9d00 100644
--- a/components/rating/package.json
+++ b/components/rating/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js
index 79efe8c3b8..e9315f918c 100644
--- a/components/rating/stories/rating.stories.js
+++ b/components/rating/stories/rating.stories.js
@@ -1,6 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isEmphasized, isFocused, isReadOnly } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { RatingGroup } from "./rating.test.js";
 import { Template } from "./template.js";
@@ -53,6 +53,10 @@ export default {
 		value: 3,
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=59953-195",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js
index 245694af8f..47ea5c5f61 100644
--- a/components/rating/stories/template.js
+++ b/components/rating/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Rating",
diff --git a/components/rating/themes/express.css b/components/rating/themes/express.css
index f25aa65164..1a0d5c792b 100644
--- a/components/rating/themes/express.css
+++ b/components/rating/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Rating {
 		--spectrum-rating-icon-color-default: var(--spectrum-neutral-content-color-default);
 		--spectrum-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover);
diff --git a/components/rating/themes/spectrum-two.css b/components/rating/themes/spectrum-two.css
new file mode 100644
index 0000000000..0c2a8df926
--- /dev/null
+++ b/components/rating/themes/spectrum-two.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Rating {
+		--spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+		--spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+		--spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
+		--spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+		--spectrum-rating-indicator-border-radius: 2px;
+	}
+}
diff --git a/components/rating/themes/spectrum.css b/components/rating/themes/spectrum.css
index 87a6e2ee61..c99df8e652 100644
--- a/components/rating/themes/spectrum.css
+++ b/components/rating/themes/spectrum.css
@@ -11,11 +11,12 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-Rating {
-		--spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
-		--spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
-		--spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
-		--spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+		--spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75);
 	}
 }
diff --git a/components/search/metadata/metadata.json b/components/search/dist/metadata.json
similarity index 94%
rename from components/search/metadata/metadata.json
rename to components/search/dist/metadata.json
index a0ea0bc319..5dacd2f6ba 100644
--- a/components/search/metadata/metadata.json
+++ b/components/search/dist/metadata.json
@@ -7,10 +7,8 @@
     ".spectrum-Search .spectrum-Search-textfield",
     ".spectrum-Search .spectrum-Search-textfield .spectrum-Search-input",
     ".spectrum-Search--quiet",
-    ".spectrum-Search--quiet.spectrum-Search",
-    ".spectrum-Search--quiet.spectrum-Search .spectrum-Search-input",
+    ".spectrum-Search--quiet .spectrum-Search-input",
     ".spectrum-Search--sizeL",
-    ".spectrum-Search--sizeM",
     ".spectrum-Search--sizeS",
     ".spectrum-Search--sizeXL",
     ".spectrum-Search-clearButton",
@@ -27,6 +25,10 @@
     ".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon",
     ".spectrum-Search-textfield:hover .spectrum-Search-icon",
     ".spectrum-Search.is-disabled .spectrum-Search-clearButton",
+    ".spectrum-Search.spectrum-Search--sizeL",
+    ".spectrum-Search.spectrum-Search--sizeM",
+    ".spectrum-Search.spectrum-Search--sizeS",
+    ".spectrum-Search.spectrum-Search--sizeXL",
     ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon",
     ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input"
   ],
@@ -113,10 +115,6 @@
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
-    "--spectrum-component-pill-edge-to-visual-100",
-    "--spectrum-component-pill-edge-to-visual-200",
-    "--spectrum-component-pill-edge-to-visual-300",
-    "--spectrum-component-pill-edge-to-visual-75",
     "--spectrum-component-top-to-text-100",
     "--spectrum-corner-radius-100",
     "--spectrum-default-font-style",
@@ -128,8 +126,7 @@
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
-    "--spectrum-gray-400",
-    "--spectrum-gray-50",
+    "--spectrum-gray-25",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-800",
@@ -153,6 +150,7 @@
     "--spectrum-workflow-icon-size-75"
   ],
   "system-theme": [
+    "--system-search-background-color",
     "--system-search-border-color-default",
     "--system-search-border-color-focus",
     "--system-search-border-color-focus-hover",
diff --git a/components/search/index.css b/components/search/index.css
index fc22bdf03e..842123e839 100644
--- a/components/search/index.css
+++ b/components/search/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Search {
 	/* Size / Spacing */
@@ -46,7 +45,6 @@
 
 	/* Background and Border */
 	--spectrum-search-border-width: var(--spectrum-border-width-100);
-	--spectrum-search-background-color: var(--spectrum-gray-50);
 
 	/* Disabled */
 	--spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
@@ -216,12 +214,10 @@
 	--spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
 
 	/* Added specificity, otherwise they are overridden by system specific themes. */
-	&.spectrum-Search {
-		--spectrum-search-border-radius: 0;
-		--spectrum-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet);
-	}
+	--mod-search-border-radius: 0;
+	--mod-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet);
 
-	&.spectrum-Search .spectrum-Search-input {
+	.spectrum-Search-input {
 		border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
 		padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)));
 		padding-inline-end: var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size));
diff --git a/components/search/metadata/mods.md b/components/search/metadata/mods.md
deleted file mode 100644
index adf3394e21..0000000000
--- a/components/search/metadata/mods.md
+++ /dev/null
@@ -1,35 +0,0 @@
-| Modifiable custom properties             |
-| ---------------------------------------- |
-| `--mod-search-background-color`          |
-| `--mod-search-background-color-disabled` |
-| `--mod-search-block-size`                |
-| `--mod-search-border-color-default`      |
-| `--mod-search-border-color-disabled`     |
-| `--mod-search-border-color-focus`        |
-| `--mod-search-border-color-focus-hover`  |
-| `--mod-search-border-color-hover`        |
-| `--mod-search-border-color-key-focus`    |
-| `--mod-search-border-radius`             |
-| `--mod-search-border-width`              |
-| `--mod-search-bottom-to-text`            |
-| `--mod-search-button-inline-size`        |
-| `--mod-search-color-default`             |
-| `--mod-search-color-disabled`            |
-| `--mod-search-color-focus`               |
-| `--mod-search-color-focus-hover`         |
-| `--mod-search-color-hover`               |
-| `--mod-search-color-key-focus`           |
-| `--mod-search-edge-to-visual`            |
-| `--mod-search-focus-indicator-color`     |
-| `--mod-search-focus-indicator-gap`       |
-| `--mod-search-focus-indicator-thickness` |
-| `--mod-search-font-family`               |
-| `--mod-search-font-style`                |
-| `--mod-search-font-weight`               |
-| `--mod-search-icon-size`                 |
-| `--mod-search-inline-size`               |
-| `--mod-search-line-height`               |
-| `--mod-search-min-inline-size`           |
-| `--mod-search-text-to-icon`              |
-| `--mod-search-to-help-text`              |
-| `--mod-search-top-to-text`               |
diff --git a/components/search/package.json b/components/search/package.json
index f0b01dfc05..c2ad0a3ecc 100644
--- a/components/search/package.json
+++ b/components/search/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js
index 6283aae976..fd3e3807c8 100644
--- a/components/search/stories/search.stories.js
+++ b/components/search/stories/search.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SearchGroup } from "./search.test.js";
 import { SearchOptions, Template } from "./template.js";
@@ -56,6 +56,10 @@ export default {
 				"click .spectrum-Search-icon",
 			],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13670-229",
+		},
 		packageJson,
 		metadata,
 	},
@@ -70,8 +74,10 @@ export const Disabled = SearchOptions.bind({});
 Disabled.args = {
 	isDisabled: true,
 };
-
 Disabled.tags = ["!dev"];
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * A search field can have [help text](?path=/docs/components-help-text--docs) below the field to give extra context or instruction about what a user should input. The description communicates a hint or helpful information, such as a search’s scope.
diff --git a/components/search/stories/template.js b/components/search/stories/template.js
index 09570d3358..364c8d8fde 100644
--- a/components/search/stories/template.js
+++ b/components/search/stories/template.js
@@ -7,6 +7,9 @@ import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Search",
diff --git a/components/search/themes/express.css b/components/search/themes/express.css
index b8f5087e88..002ab9cecb 100644
--- a/components/search/themes/express.css
+++ b/components/search/themes/express.css
@@ -11,39 +11,37 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Search {
-		--spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
-
 		--spectrum-search-border-color-default: var(--spectrum-gray-400);
 		--spectrum-search-border-color-hover: var(--spectrum-gray-500);
 		--spectrum-search-border-color-focus: var(--spectrum-gray-800);
 		--spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
 		--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
-	}
-
-	.spectrum-Search--sizeS {
-		--spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75);
-	}
-
-	.spectrum-Search--sizeM {
-		--spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
-	}
-
-	.spectrum-Search--sizeL {
-		--spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200);
-	}
 
-	.spectrum-Search--sizeXL {
-		--spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300);
+		&,
+		&.spectrum-Search--sizeM {
+			--spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
+			--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
+		}
+
+		&.spectrum-Search--sizeS {
+			--spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2);
+			--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75);
+		}
+
+		&.spectrum-Search--sizeL {
+			--spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2);
+			--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200);
+		}
+
+		&.spectrum-Search--sizeXL {
+			--spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2);
+			--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300);
+		}
 	}
 }
diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css
new file mode 100644
index 0000000000..85a34114a0
--- /dev/null
+++ b/components/search/themes/spectrum-two.css
@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Search {
+		--spectrum-search-border-color-default: var(--spectrum-gray-500);
+		--spectrum-search-border-color-hover: var(--spectrum-gray-600);
+		--spectrum-search-border-color-focus: var(--spectrum-gray-800);
+		--spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
+		--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
+
+		--spectrum-search-background-color: var(--spectrum-gray-25);
+
+		&,
+		&.spectrum-Search--sizeM {
+			--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+			--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
+		}
+
+		&.spectrum-Search--sizeS {
+			--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+			--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
+		}
+
+		&.spectrum-Search--sizeL {
+			--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+			--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
+		}
+
+		&.spectrum-Search--sizeXL {
+			--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+			--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
+		}
+	}
+}
diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css
index e4246f817a..4fd1a9aae9 100644
--- a/components/search/themes/spectrum.css
+++ b/components/search/themes/spectrum.css
@@ -11,35 +11,12 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-Search {
-		--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
+/* @combine .spectrum.spectrum--legacy */
 
-		--spectrum-search-border-color-default: var(--spectrum-gray-500);
-		--spectrum-search-border-color-hover: var(--spectrum-gray-600);
-		--spectrum-search-border-color-focus: var(--spectrum-gray-800);
-		--spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
-		--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
-	}
+@import "./spectrum-two.css";
 
-	.spectrum-Search--sizeS {
-		--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
-	}
-
-	.spectrum-Search--sizeM {
-		--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
-	}
-
-	.spectrum-Search--sizeL {
-		--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
-	}
-
-	.spectrum-Search--sizeXL {
-		--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
-		--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
+@container style(--system: legacy) {
+	.spectrum-Search {
+		--spectrum-search-background-color: var(--spectrum-gray-50);
 	}
 }
diff --git a/components/sidenav/metadata/metadata.json b/components/sidenav/dist/metadata.json
similarity index 95%
rename from components/sidenav/metadata/metadata.json
rename to components/sidenav/dist/metadata.json
index 9f94d42316..a0be758aa5 100644
--- a/components/sidenav/metadata/metadata.json
+++ b/components/sidenav/dist/metadata.json
@@ -166,8 +166,8 @@
     "--spectrum-focus-indicator-thickness",
     "--spectrum-font-size-100",
     "--spectrum-font-size-75",
+    "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-300",
     "--spectrum-gray-600",
     "--spectrum-line-height-100",
     "--spectrum-medium-font-weight",
@@ -180,7 +180,15 @@
     "--spectrum-text-to-visual-100",
     "--spectrum-workflow-icon-size-100"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-side-nav-background-hover",
+    "--system-side-nav-background-hover-selected",
+    "--system-side-nav-background-key-focus",
+    "--system-side-nav-background-key-focus-selected",
+    "--system-side-nav-item-background-default-selected",
+    "--system-side-nav-item-background-down",
+    "--system-side-nav-item-background-down-selected"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-sidenav-background-hover",
diff --git a/components/sidenav/index.css b/components/sidenav/index.css
index 612379a598..c0b75855d4 100644
--- a/components/sidenav/index.css
+++ b/components/sidenav/index.css
@@ -11,6 +11,41 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
+@media (forced-colors: active) {
+	/* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */
+	.spectrum-SideNav {
+		.spectrum-Icon {
+			forced-color-adjust: preserve-parent-color;
+		}
+	}
+
+	.spectrum-SideNav-item {
+		--highcontrast-sidenav-content-disabled-color: GrayText;
+
+		--highcontrast-sidenav-focus-ring-color: Highlight;
+
+		--highcontrast-sidenav-content-color-default-selected: SelectedItemText;
+		--highcontrast-sidenav-item-background-default-selected: SelectedItem;
+
+		--highcontrast-sidenav-background-key-focus-selected: Highlight;
+		--highcontrast-sidenav-background-hover-selected: Highlight;
+		--highcontrast-sidenav-item-background-down-selected: Highlight;
+
+		--highcontrast-sidenav-item-background-down: Highlight;
+		--highcontrast-sidenav-background-hover: Highlight;
+		--highcontrast-sidenav-content-color-hover: HighlightText;
+		--highcontrast-sidenav-background-key-focus: Highlight;
+
+		--highcontrast-sidenav-top-level-font-color: ButtonText;
+		--highcontrast-sidenav-content-color-default: ButtonText;
+		--highcontrast-sidenav-content-color-down: HighlightText;
+
+		forced-color-adjust: none;
+	}
+}
+
 .spectrum-SideNav {
 	/* focus indicator */
 	--spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
@@ -43,14 +78,6 @@
 	/* color - background */
 	--spectrum-sidenav-background-disabled: transparent;
 	--spectrum-sidenav-background-default: transparent;
-	--spectrum-sidenav-background-hover: var(--spectrum-gray-200);
-	--spectrum-sidenav-item-background-down: var(--spectrum-gray-300);
-	--spectrum-sidenav-background-key-focus: var(--spectrum-gray-200);
-
-	--spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200);
-	--spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300);
-	--spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300);
-	--spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200);
 
 	/* color font */
 	--spectrum-sidenav-header-color: var(--spectrum-gray-600);
@@ -74,44 +101,32 @@
 	--spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
 	--spectrum-sidenav-text-line-height: var(--spectrum-line-height-100);
 
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100);
-	}
-
 	--spectrum-sidenav-top-level-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style);
 	--spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100);
 	--spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100);
 
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100);
-	}
-
 	--spectrum-sidenav-header-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight);
 	--spectrum-sidenav-header-font-style: var(--spectrum-default-font-style);
 	--spectrum-sidenav-header-font-size: var(--spectrum-font-size-75);
 	--spectrum-sidenav-header-line-height: var(--spectrum-line-height-100);
 
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100);
-	}
-}
-
-.spectrum-SideNav {
 	display: flex;
 	flex-direction: column;
 
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
+
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100);
+		--spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100);
+		--spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100);
+	}
 }
 
 .spectrum-SideNav-item {
@@ -128,27 +143,27 @@
 			pointer-events: none;
 		}
 	}
-}
-
-.spectrum-SideNav-item.is-selected {
-	.spectrum-SideNav-itemLink {
-		background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected)));
-		color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected)));
-
-		&:hover {
-			background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected)));
-			color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected));
-		}
 
-		&:active {
-			background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected)));
-			color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected));
-		}
-
-		&.is-keyboardFocused,
-		&:focus-visible {
-			background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected)));
-			color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected));
+	&.is-selected {
+		.spectrum-SideNav-itemLink {
+			background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected)));
+			color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected)));
+
+			&:hover {
+				background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected)));
+				color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected));
+			}
+
+			&:active {
+				background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected)));
+				color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected));
+			}
+
+			&.is-keyboardFocused,
+			&:focus-visible {
+				background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected)));
+				color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected));
+			}
 		}
 	}
 }
@@ -261,35 +276,3 @@
 		}
 	}
 }
-
-@media (forced-colors: active) {
-	.spectrum-SideNav {
-		.spectrum-Icon {
-			forced-color-adjust: preserve-parent-color;
-		}
-	}
-
-	.spectrum-SideNav-item {
-		--highcontrast-sidenav-content-disabled-color: GrayText;
-
-		--highcontrast-sidenav-focus-ring-color: Highlight;
-
-		--highcontrast-sidenav-content-color-default-selected: SelectedItemText;
-		--highcontrast-sidenav-item-background-default-selected: SelectedItem;
-
-		--highcontrast-sidenav-background-key-focus-selected: Highlight;
-		--highcontrast-sidenav-background-hover-selected: Highlight;
-		--highcontrast-sidenav-item-background-down-selected: Highlight;
-
-		--highcontrast-sidenav-item-background-down: Highlight;
-		--highcontrast-sidenav-background-hover: Highlight;
-		--highcontrast-sidenav-content-color-hover: HighlightText;
-		--highcontrast-sidenav-background-key-focus: Highlight;
-
-		--highcontrast-sidenav-top-level-font-color: ButtonText;
-		--highcontrast-sidenav-content-color-default: ButtonText;
-		--highcontrast-sidenav-content-color-down: HighlightText;
-
-		forced-color-adjust: none;
-	}
-}
diff --git a/components/sidenav/metadata/mods.md b/components/sidenav/metadata/mods.md
deleted file mode 100644
index 97a9c28a46..0000000000
--- a/components/sidenav/metadata/mods.md
+++ /dev/null
@@ -1,56 +0,0 @@
-| Modifiable custom properties                            |
-| ------------------------------------------------------- |
-| `--mod-sidenav-background-default`                      |
-| `--mod-sidenav-background-disabled`                     |
-| `--mod-sidenav-background-hover`                        |
-| `--mod-sidenav-background-hover-selected`               |
-| `--mod-sidenav-background-key-focus`                    |
-| `--mod-sidenav-background-key-focus-selected`           |
-| `--mod-sidenav-border-radius`                           |
-| `--mod-sidenav-bottom-to-label`                         |
-| `--mod-sidenav-content-color-default`                   |
-| `--mod-sidenav-content-color-default-selected`          |
-| `--mod-sidenav-content-color-down`                      |
-| `--mod-sidenav-content-color-down-selected`             |
-| `--mod-sidenav-content-color-hover`                     |
-| `--mod-sidenav-content-color-hover-selected`            |
-| `--mod-sidenav-content-color-key-focus`                 |
-| `--mod-sidenav-content-color-key-focus-selected`        |
-| `--mod-sidenav-content-disabled-color`                  |
-| `--mod-sidenav-focus-ring-color`                        |
-| `--mod-sidenav-focus-ring-gap`                          |
-| `--mod-sidenav-focus-ring-size`                         |
-| `--mod-sidenav-gap`                                     |
-| `--mod-sidenav-header-color`                            |
-| `--mod-sidenav-header-font-size`                        |
-| `--mod-sidenav-header-font-style`                       |
-| `--mod-sidenav-header-font-weight`                      |
-| `--mod-sidenav-header-line-height`                      |
-| `--mod-sidenav-heading-bottom-margin`                   |
-| `--mod-sidenav-heading-top-margin`                      |
-| `--mod-sidenav-icon-size`                               |
-| `--mod-sidenav-icon-spacing`                            |
-| `--mod-sidenav-inline-padding`                          |
-| `--mod-sidenav-item-background-default-selected`        |
-| `--mod-sidenav-item-background-down`                    |
-| `--mod-sidenav-item-background-down-selected`           |
-| `--mod-sidenav-max-width`                               |
-| `--mod-sidenav-min-height`                              |
-| `--mod-sidenav-min-width`                               |
-| `--mod-sidenav-start-to-content-second-level`           |
-| `--mod-sidenav-start-to-content-third-level`            |
-| `--mod-sidenav-start-to-content-with-icon-second-level` |
-| `--mod-sidenav-start-to-content-with-icon-third-level`  |
-| `--mod-sidenav-text-font-family`                        |
-| `--mod-sidenav-text-font-size`                          |
-| `--mod-sidenav-text-font-style`                         |
-| `--mod-sidenav-text-font-weight`                        |
-| `--mod-sidenav-text-line-height`                        |
-| `--mod-sidenav-top-level-font-family`                   |
-| `--mod-sidenav-top-level-font-size`                     |
-| `--mod-sidenav-top-level-font-style`                    |
-| `--mod-sidenav-top-level-font-weight`                   |
-| `--mod-sidenav-top-level-line-height`                   |
-| `--mod-sidenav-top-to-icon`                             |
-| `--mod-sidenav-top-to-label`                            |
-| `--mod-sidenav-width`                                   |
diff --git a/components/sidenav/package.json b/components/sidenav/package.json
index 0a1fb268f9..a602bae675 100644
--- a/components/sidenav/package.json
+++ b/components/sidenav/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js
index 3f1b564843..b5381efd78 100644
--- a/components/sidenav/stories/sidenav.stories.js
+++ b/components/sidenav/stories/sidenav.stories.js
@@ -1,5 +1,5 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SideNavGroup } from "./sidenav.test.js";
 import { Template } from "./template.js";
@@ -63,6 +63,10 @@ export default {
 		],
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21993-665",
+		},
 		packageJson,
 		metadata,
 	},
@@ -142,6 +146,10 @@ Multilevel.args = {
 	]
 };
 Multilevel.parameters = {
+	design: {
+		type: "figma",
+		url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21993-941&node-type=frame&t=YT3sYHqnhqpnjdv9-11",
+	},
 	chromatic: { disableSnapshot: true },
 };
 
@@ -189,6 +197,10 @@ WithHeading.args = {
 	]
 };
 WithHeading.parameters = {
+	design: {
+		type: "figma",
+		url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21993-941&node-type=frame&t=YT3sYHqnhqpnjdv9-11",
+	},
 	chromatic: { disableSnapshot: true },
 };
 
diff --git a/components/sidenav/stories/template.js b/components/sidenav/stories/template.js
index 18ee61a6ad..3aa9960e80 100644
--- a/components/sidenav/stories/template.js
+++ b/components/sidenav/stories/template.js
@@ -7,6 +7,9 @@ import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-SideNav",
@@ -16,69 +19,106 @@ export const Template = ({
 	iconName,
 	iconSet = "workflow",
 	items = [],
-} = {}, context = {}) => html`
-  <nav>
-    <ul class=${classMap({
-      [rootClass]: true,
-      [`${rootClass}--${variant}`]: typeof variant !== "undefined",
-      [`${rootClass}--hasIcon`]: hasIcon,
-      ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-    })}>
-      ${repeat(items, (item) => item.id, (item) => {
-        // First level nav item with second tier of nav items beneath.
-        if (typeof item.levelTwoItems !== "undefined") {
-          return html`
-            <li class=${classMap({
-              [`${rootClass}-item`]: true,
-              "is-selected": item.isSelected,
-              "is-disabled": item.isDisabled,
-            })}>
-            ${item.heading
-              ? html`<h2 class="${rootClass}-heading" id="${item.id}-heading">${item.heading}</h2>`
-              : html`
-              <a
-                class="${rootClass}-itemLink"
-                aria-current=${ifDefined(item.isSelected ? "page" : undefined)}
-              >
-                ${when(hasIcon && iconName, () => Icon({ iconName, setName: iconSet }, context))}
-                <span class="${rootClass}-link-text">${item.title}</span>
-              </a>
-              `
-            }
-            <ul class=${classMap({
-              [rootClass]: true,
-              [`${rootClass}--hasIcon`]: hasIcon,
-              ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-            })}
-            aria-labelledby=${ifDefined(item.heading) ? `${item.id}-heading` : ""}>
-                ${repeat(item.levelTwoItems, (item) => item.id, (item) => {
-                  // Display nav items in second tier, and possibly a third tier.
-                  return SideNavItem({
-                    currentTier: 2,
-                    hasIcon,
-                    iconName,
-                    iconSet,
-                    ...item
-                  }, context);
-                })}
-              </ul>
-            </li>
-          `;
-        }
-        else {
-          // First level nav item only.
-          return SideNavItem({
-            currentTier: 1,
-            hasIcon,
-            iconName,
-            iconSet,
-            ...item
-          }, context);
-        }
-      })}
-    </ul>
-  </nav>
-`;
+} = {}, context = {}) => {
+	return html`
+		<nav>
+			<ul
+				class=${classMap({
+					[rootClass]: true,
+					[`${rootClass}--${variant}`]: typeof variant !== "undefined",
+					[`${rootClass}--hasIcon`]: hasIcon,
+					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+				})}
+			>
+				${repeat(
+					items,
+					(item) => item.id,
+					(item) => {
+						// First level nav item with second tier of nav items beneath.
+						if (typeof item.levelTwoItems !== "undefined") {
+							return html`
+								<li
+									class=${classMap({
+										[`${rootClass}-item`]: true,
+										"is-selected": item.isSelected,
+										"is-disabled": item.isDisabled,
+									})}
+								>
+									${item.heading
+										? html`<h2
+												class="${rootClass}-heading"
+												id="${item.id}-heading"
+											>
+												${item.heading}
+											</h2>`
+										: html`
+												<a
+													class="${rootClass}-itemLink"
+													aria-current=${ifDefined(
+														item.isSelected ? "page" : undefined,
+													)}
+												>
+													${when(hasIcon && iconName, () =>
+														Icon({ iconName, setName: iconSet }, context),
+													)}
+													<span class="${rootClass}-link-text"
+														>${item.title}</span
+													>
+												</a>
+											`}
+									<ul
+										class=${classMap({
+											[rootClass]: true,
+											[`${rootClass}--hasIcon`]: hasIcon,
+											...customClasses.reduce(
+												(a, c) => ({ ...a, [c]: true }),
+												{},
+											),
+										})}
+										aria-labelledby=${ifDefined(item.heading)
+											? `${item.id}-heading`
+											: ""}
+									>
+										${repeat(
+											item.levelTwoItems,
+											(item) => item.id,
+											(item) => {
+												// Display nav items in second tier, and possibly a third tier.
+												return SideNavItem(
+													{
+														currentTier: 2,
+														hasIcon,
+														iconName,
+														iconSet,
+														...item,
+													},
+													context,
+												);
+											},
+										)}
+									</ul>
+								</li>
+							`;
+						}
+						else {
+							// First level nav item only.
+							return SideNavItem(
+								{
+									currentTier: 1,
+									hasIcon,
+									iconName,
+									iconSet,
+									...item,
+								},
+								context,
+							);
+						}
+					},
+				)}
+			</ul>
+		</nav>
+	`;
+};
 
 /**
  * Renders a single navigation item, and an optional third tier of items.
@@ -98,37 +138,53 @@ export const SideNavItem = ({
 	customClasses = [],
 } = {}, context = {}) => {
 	return html`
-    <li
-      id=${ifDefined(id)}
-      class=${classMap({
-        [`${rootClass}-item`]: true,
-        "is-selected": isSelected,
-        "is-disabled": isDisabled,
-        ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-      })}
-    >
-      <a
-        href=${ifDefined(link)}
-        class=${classMap({
-          [`${rootClass}-itemLink`]: true,
-        })}
-      >
-        ${when(hasIcon && iconName && currentTier == 1, () => Icon({ iconName, setName: iconSet }, context))}
-        <span class=${classMap({
-          [`${rootClass}-link-text`]: true,
-        })}>
-          ${title}
-        </span>
-      </a>
-      ${when(levelThreeItems, () => html`
-        <ul class=${classMap({
-          [rootClass]: true,
-        })}>
-			${repeat(levelThreeItems, (item) => item.id, (item) => SideNavItem({
-				...item
-			}, context))}
-        </ul>`
-      )}
-    </li>
-  `;
+		<li
+			id=${ifDefined(id)}
+			class=${classMap({
+				[`${rootClass}-item`]: true,
+				"is-selected": isSelected,
+				"is-disabled": isDisabled,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+		>
+			<a
+				href=${ifDefined(link)}
+				class=${classMap({
+					[`${rootClass}-itemLink`]: true,
+				})}
+			>
+				${when(hasIcon && iconName && currentTier == 1, () =>
+					Icon({ iconName, setName: iconSet }, context),
+				)}
+				<span
+					class=${classMap({
+						[`${rootClass}-link-text`]: true,
+					})}
+				>
+					${title}
+				</span>
+			</a>
+			${when(
+				levelThreeItems,
+				() =>
+					html` <ul
+						class=${classMap({
+							[rootClass]: true,
+						})}
+					>
+						${repeat(
+							levelThreeItems,
+							(item) => item.id,
+							(item) =>
+								SideNavItem(
+									{
+										...item,
+									},
+									context,
+								),
+						)}
+					</ul>`,
+			)}
+		</li>
+	`;
 };
diff --git a/components/sidenav/themes/express.css b/components/sidenav/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/sidenav/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/tokens/custom-express/medium-vars.css b/components/sidenav/themes/spectrum-two.css
similarity index 52%
rename from tokens/custom-express/medium-vars.css
rename to components/sidenav/themes/spectrum-two.css
index 1d6e142a98..85869d92db 100644
--- a/tokens/custom-express/medium-vars.css
+++ b/components/sidenav/themes/spectrum-two.css
@@ -11,15 +11,15 @@
  * governing permissions and limitations under the License.
  */
 
-/* This file contains overrides and additions to core tokens */
+@container style(--system: spectrum) {
+	.spectrum-SideNav {
+		--spectrum-sidenav-background-hover: var(--spectrum-gray-100);
+		--spectrum-sidenav-item-background-down: var(--spectrum-gray-200);
+		--spectrum-sidenav-background-key-focus: var(--spectrum-gray-100);
 
-.spectrum--express.spectrum--medium {
-	--spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
-	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-
-	--spectrum-dialog-confirm-border-radius: 6px;
-
-	--spectrum-dial-border-radius: 12px;
-
-	--spectrum-assetcard-focus-ring-border-radius: 10px;
+		--spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100);
+		--spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200);
+		--spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200);
+		--spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100);
+	}
 }
diff --git a/components/sidenav/themes/spectrum.css b/components/sidenav/themes/spectrum.css
new file mode 100644
index 0000000000..51828a4d8b
--- /dev/null
+++ b/components/sidenav/themes/spectrum.css
@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-SideNav {
+		--spectrum-sidenav-background-hover: var(--spectrum-gray-200);
+		--spectrum-sidenav-item-background-down: var(--spectrum-gray-300);
+		--spectrum-sidenav-background-key-focus: var(--spectrum-gray-200);
+
+		--spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200);
+		--spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300);
+		--spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300);
+		--spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200);
+	}
+}
diff --git a/components/slider/metadata/metadata.json b/components/slider/dist/metadata.json
similarity index 96%
rename from components/slider/metadata/metadata.json
rename to components/slider/dist/metadata.json
index 0a1d541433..9cc5b6e39f 100644
--- a/components/slider/metadata/metadata.json
+++ b/components/slider/dist/metadata.json
@@ -83,6 +83,10 @@
     ".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before",
     ".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before",
     ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle",
+    ".spectrum-Slider.spectrum-Slider--sizeL",
+    ".spectrum-Slider.spectrum-Slider--sizeM",
+    ".spectrum-Slider.spectrum-Slider--sizeS",
+    ".spectrum-Slider.spectrum-Slider--sizeXL",
     ".spectrum-Slider:dir(rtl)",
     ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
     ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused",
@@ -230,8 +234,7 @@
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-200",
-    "--spectrum-corner-radius-75",
+    "--spectrum-corner-radius-500",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
@@ -243,13 +246,10 @@
     "--spectrum-font-size-75",
     "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-300",
     "--spectrum-gray-400",
-    "--spectrum-gray-50",
-    "--spectrum-gray-600",
     "--spectrum-gray-700",
+    "--spectrum-gray-75",
     "--spectrum-gray-800",
-    "--spectrum-gray-900",
     "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
     "--spectrum-neutral-content-color-default",
@@ -266,14 +266,20 @@
     "--system-slider-handle-border-color-down",
     "--system-slider-handle-border-color-hover",
     "--system-slider-handle-border-color-key-focus",
+    "--system-slider-handle-border-radius",
     "--system-slider-handle-disabled-background-color",
     "--system-slider-handle-focus-ring-color-key-focus",
     "--system-slider-ramp-handle-background-color",
     "--system-slider-ramp-track-color",
     "--system-slider-ramp-track-color-disabled",
+    "--system-slider-size-l-handle-border-radius",
+    "--system-slider-size-m-handle-border-radius",
+    "--system-slider-size-s-handle-border-radius",
+    "--system-slider-size-xl-handle-border-radius",
     "--system-slider-tick-mark-color",
     "--system-slider-ticks-handle-background-color",
     "--system-slider-track-color",
+    "--system-slider-track-corner-radius",
     "--system-slider-track-fill-color"
   ],
   "passthroughs": [],
diff --git a/components/slider/index.css b/components/slider/index.css
index 7474dc2a13..b0e907d213 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -11,15 +11,13 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Slider {
 	/* default sizing, matches t-shirt size M */
 	--spectrum-slider-font-size: var(--spectrum-font-size-75);
 	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
 	--spectrum-slider-control-height: var(--spectrum-component-height-100);
-	--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
 	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
 	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
 	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
@@ -28,57 +26,10 @@
 	/* TODO: placeholder value for sideLabel variant value width */
 	--spectrum-slider-value-inline-size: 18px;
 
-	&:dir(rtl),
-	&:dir(rtl) {
-		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-	}
-}
-
-.spectrum-Slider--sizeS {
-	--spectrum-slider-font-size: var(--spectrum-font-size-75);
-	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
-	--spectrum-slider-control-height: var(--spectrum-component-height-75);
-	--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
-	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
-	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
-	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
-	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
-}
-
-.spectrum-Slider--sizeL {
-	--spectrum-slider-font-size: var(--spectrum-font-size-100);
-	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
-	--spectrum-slider-control-height: var(--spectrum-component-height-200);
-	--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
-	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
-	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
-	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
-	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-
-	/* TODO: placeholder value for sideLabel variant value width */
-	--spectrum-slider-value-inline-size: 18px;
-}
-
-.spectrum-Slider--sizeXL {
-	--spectrum-slider-font-size: var(--spectrum-font-size-200);
-	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
-	--spectrum-slider-control-height: var(--spectrum-component-height-300);
-	--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
-	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
-	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
-	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
-	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-
-	/* TODO: placeholder value for sideLabel variant value width */
-	--spectrum-slider-value-inline-size: 22px;
-}
-
-.spectrum-Slider {
 	--spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
 
 	--spectrum-slider-min-size: var(--spectrum-spacing-900);
 
-	--spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
 	--spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
 	--spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
 	--spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
@@ -116,11 +67,52 @@
 
 	user-select: none;
 
+	&:dir(rtl),
+	&:dir(rtl) {
+		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+	}
+
 	&:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp) {
 		margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
 	}
 }
 
+.spectrum-Slider--sizeS {
+	--spectrum-slider-font-size: var(--spectrum-font-size-75);
+	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
+	--spectrum-slider-control-height: var(--spectrum-component-height-75);
+	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
+	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
+	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
+	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
+}
+
+.spectrum-Slider--sizeL {
+	--spectrum-slider-font-size: var(--spectrum-font-size-100);
+	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
+	--spectrum-slider-control-height: var(--spectrum-component-height-200);
+	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
+	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
+	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
+	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+
+	/* TODO: placeholder value for sideLabel variant value width */
+	--spectrum-slider-value-inline-size: 18px;
+}
+
+.spectrum-Slider--sizeXL {
+	--spectrum-slider-font-size: var(--spectrum-font-size-200);
+	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
+	--spectrum-slider-control-height: var(--spectrum-component-height-300);
+	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
+	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
+	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
+	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+
+	/* TODO: placeholder value for sideLabel variant value width */
+	--spectrum-slider-value-inline-size: 22px;
+}
+
 .spectrum-Slider--sideLabel {
 	display: flex;
 	align-items: center;
@@ -303,7 +295,7 @@
 		block-size: 100%;
 
 		/* Flip the ramp automatically for RTL */
-		transform: var(--spectrum-logical-rotation);
+		transform: var(--spectrum-logical-rotation,);
 	}
 }
 
@@ -656,6 +648,7 @@
 
 		&:hover,
 		&:active {
+			/* @todo need to update --mod with a component-specific prefix */
 			border-color: var(--mod-disabled-border-color, var(--spectrum-disabled-border-color));
 			background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled)));
 		}
diff --git a/components/slider/metadata/mods.md b/components/slider/metadata/mods.md
deleted file mode 100644
index 0c6f4dfe93..0000000000
--- a/components/slider/metadata/mods.md
+++ /dev/null
@@ -1,58 +0,0 @@
-| Modifiable custom properties                           |
-| ------------------------------------------------------ |
-| `--mod-animation-duration-100`                         |
-| `--mod-disabled-border-color`                          |
-| `--mod-focus-indicator-gap`                            |
-| `--mod-font-size-75`                                   |
-| `--mod-line-height-100`                                |
-| `--mod-sectrum-slider-ramp-handle-border-color-active` |
-| `--mod-slider-cjk-line-height`                         |
-| `--mod-slider-control-height`                          |
-| `--mod-slider-controls-margin`                         |
-| `--mod-slider-font-size`                               |
-| `--mod-slider-handle-background-color`                 |
-| `--mod-slider-handle-background-color-disabled`        |
-| `--mod-slider-handle-border-color`                     |
-| `--mod-slider-handle-border-color-disabled`            |
-| `--mod-slider-handle-border-color-down`                |
-| `--mod-slider-handle-border-color-hover`               |
-| `--mod-slider-handle-border-color-key-focus`           |
-| `--mod-slider-handle-border-radius`                    |
-| `--mod-slider-handle-border-width`                     |
-| `--mod-slider-handle-border-width-down`                |
-| `--mod-slider-handle-disabled-background-color`        |
-| `--mod-slider-handle-focus-ring-color-key-focus`       |
-| `--mod-slider-handle-gap`                              |
-| `--mod-slider-handle-size`                             |
-| `--mod-slider-input-left`                              |
-| `--mod-slider-input-top-size`                          |
-| `--mod-slider-label-margin-start`                      |
-| `--mod-slider-label-text-color`                        |
-| `--mod-slider-label-text-color-disabled`               |
-| `--mod-slider-label-top-to-text`                       |
-| `--mod-slider-min-size`                                |
-| `--mod-slider-ramp-handle-background-color`            |
-| `--mod-slider-ramp-track-color`                        |
-| `--mod-slider-ramp-track-color-disabled`               |
-| `--mod-slider-ramp-track-height`                       |
-| `--mod-slider-range-track-reset`                       |
-| `--mod-slider-tick-handle-background-color`            |
-| `--mod-slider-tick-label-color`                        |
-| `--mod-slider-tick-mark-border-radius`                 |
-| `--mod-slider-tick-mark-color`                         |
-| `--mod-slider-tick-mark-color-disabled`                |
-| `--mod-slider-tick-mark-height`                        |
-| `--mod-slider-tick-mark-width`                         |
-| `--mod-slider-ticks-handle-background-color`           |
-| `--mod-slider-track-color`                             |
-| `--mod-slider-track-color-disabled`                    |
-| `--mod-slider-track-corner-radius`                     |
-| `--mod-slider-track-fill-color`                        |
-| `--mod-slider-track-fill-color-disabled`               |
-| `--mod-slider-track-fill-thickness`                    |
-| `--mod-slider-track-handleoffset`                      |
-| `--mod-slider-track-margin-offset`                     |
-| `--mod-slider-track-middle-handleoffset`               |
-| `--mod-slider-track-thickness`                         |
-| `--mod-slider-value-inline-size`                       |
-| `--mod-slider-value-side-padding-inline`               |
diff --git a/components/slider/package.json b/components/slider/package.json
index 5e01211fdf..fc7f5834e3 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js
index 2c2c498458..1d6f5b9d47 100644
--- a/components/slider/stories/slider.stories.js
+++ b/components/slider/stories/slider.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SliderGroup } from "./slider.test.js";
 import { Template } from "./template.js";
@@ -140,6 +140,10 @@ export default {
 				"change .spectrum-Slider-input",
 			],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=842-1056",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js
index bc62545285..becef6ade9 100644
--- a/components/slider/stories/template.js
+++ b/components/slider/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Slider",
diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css
index ce76f969df..f9f149f4d9 100644
--- a/components/slider/themes/express.css
+++ b/components/slider/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Slider {
 		--spectrum-slider-track-color: var(--spectrum-gray-200);
 		--spectrum-slider-track-fill-color: var(--spectrum-gray-600);
diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css
new file mode 100644
index 0000000000..b118d77cff
--- /dev/null
+++ b/components/slider/themes/spectrum-two.css
@@ -0,0 +1,54 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Slider {
+		--spectrum-slider-track-color: var(--spectrum-gray-200);
+		--spectrum-slider-track-fill-color: var(--spectrum-gray-700);
+		--spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
+		--spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100);
+
+		--spectrum-slider-handle-background-color: transparent;
+		--spectrum-slider-handle-background-color-disabled: transparent;
+		--spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75);
+		--spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75);
+		--spectrum-slider-handle-border-color: var(--spectrum-gray-700);
+		--spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75);
+
+		--spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
+
+		--spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
+		--spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
+		--spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
+		--spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
+
+		--spectrum-slider-track-corner-radius: 2px;
+
+		&,
+		&.spectrum-Slider--sizeM {
+			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
+		}
+
+		&.spectrum-Slider--sizeS {
+			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
+		}
+
+		&.spectrum-Slider--sizeL {
+			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
+		}
+
+		&.spectrum-Slider--sizeXL {
+			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
+		}
+	}
+}
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
index 1beab05efd..f411427cc8 100644
--- a/components/slider/themes/spectrum.css
+++ b/components/slider/themes/spectrum.css
@@ -11,25 +11,35 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-Slider {
 		--spectrum-slider-track-color: var(--spectrum-gray-300);
-		--spectrum-slider-track-fill-color: var(--spectrum-gray-700);
-		--spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
 		--spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200);
-
-		--spectrum-slider-handle-background-color: transparent;
-		--spectrum-slider-handle-background-color-disabled: transparent;
 		--spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100);
 		--spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100);
-		--spectrum-slider-handle-border-color: var(--spectrum-gray-700);
 		--spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
-
 		--spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
+		--spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
+
+		&,
+		&.spectrum-Slider--sizeM {
+			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+		}
+
+		&.spectrum-Slider--sizeS {
+			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+		}
+
+		&.spectrum-Slider--sizeL {
+			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+		}
 
-		--spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
-		--spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
-		--spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
-		--spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
+		&.spectrum-Slider--sizeXL {
+			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+		}
 	}
 }
diff --git a/components/splitview/metadata/metadata.json b/components/splitview/dist/metadata.json
similarity index 95%
rename from components/splitview/metadata/metadata.json
rename to components/splitview/dist/metadata.json
index b8f8fa5031..4902e8e236 100644
--- a/components/splitview/metadata/metadata.json
+++ b/components/splitview/dist/metadata.json
@@ -75,14 +75,17 @@
     "--spectrum-body-color",
     "--spectrum-border-width-200",
     "--spectrum-border-width-400",
-    "--spectrum-corner-radius-75",
     "--spectrum-focus-indicator-color",
-    "--spectrum-gray-100",
-    "--spectrum-gray-300",
+    "--spectrum-gray-200",
     "--spectrum-gray-400",
+    "--spectrum-gray-75",
     "--spectrum-gray-800"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-split-view-background-color",
+    "--system-split-view-gripper-border-radius",
+    "--system-split-view-handle-background-color"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-splitview-handle-background-color",
diff --git a/components/splitview/index.css b/components/splitview/index.css
index 748e9faf33..81ca706a34 100644
--- a/components/splitview/index.css
+++ b/components/splitview/index.css
@@ -11,29 +11,26 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 .spectrum-SplitView {
 	--spectrum-splitview-vertical-width: 100%;
 	--spectrum-splitview-vertical-gripper-width: 50%;
 	--spectrum-splitview-vertical-gripper-outer-width: 100%;
 	--spectrum-splitview-vertical-gripper-reset: 0;
 
-	--spectrum-splitview-background-color: var(--spectrum-gray-100);
 	--spectrum-splitview-content-color: var(--spectrum-body-color);
 
-	--spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
 	--spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
 	--spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
 	--spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
 	--spectrum-splitview-handle-width: var(--spectrum-border-width-200);
 
-	--spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
 	--spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
-	--spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
-	--spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
+	--spectrum-splitview-gripper-height: 16px;
+	--spectrum-splitview-gripper-border-width-horizontal: 3px;
 	--spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
-}
 
-.spectrum-SplitView {
 	display: flex;
 	overflow: hidden;
 }
@@ -109,51 +106,51 @@
 			inset-inline-start: auto;
 		}
 	}
-}
-
-.spectrum-SplitView-splitter.is-draggable {
-	&:hover,
-	&.is-hovered {
-		background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
 
-		.spectrum-SplitView-gripper {
-			border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-		}
-
-		.spectrum-SplitView-gripper::before {
+	&.is-draggable {
+		&:hover,
+		&.is-hovered {
 			background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-		}
-	}
 
-	&:active,
-	&.is-active {
-		background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+			.spectrum-SplitView-gripper {
+				border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+			}
 
-		.spectrum-SplitView-gripper {
-			border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+			.spectrum-SplitView-gripper::before {
+				background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+			}
 		}
 
-		/* Center line of gripper */
-		.spectrum-SplitView-gripper::before {
+		&:active,
+		&.is-active {
 			background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
-		}
-	}
 
-	&:focus {
-		outline: none;
-	}
+			.spectrum-SplitView-gripper {
+				border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+			}
 
-	&:focus-visible {
-		outline: none;
-		background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+			/* Center line of gripper */
+			.spectrum-SplitView-gripper::before {
+				background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+			}
+		}
 
-		.spectrum-SplitView-gripper {
-			border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
-			box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+		&:focus {
+			outline: none;
 		}
 
-		.spectrum-SplitView-gripper::before {
+		&:focus-visible {
+			outline: none;
 			background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+
+			.spectrum-SplitView-gripper {
+				border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+				box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+			}
+
+			.spectrum-SplitView-gripper::before {
+				background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+			}
 		}
 	}
 }
diff --git a/components/splitview/metadata/mods.md b/components/splitview/metadata/mods.md
deleted file mode 100644
index 4bc870ef41..0000000000
--- a/components/splitview/metadata/mods.md
+++ /dev/null
@@ -1,18 +0,0 @@
-| Modifiable custom properties                      |
-| ------------------------------------------------- |
-| `--mod-splitview-background-color`                |
-| `--mod-splitview-content-color`                   |
-| `--mod-splitview-gripper-border-radius`           |
-| `--mod-splitview-gripper-border-width-horizontal` |
-| `--mod-splitview-gripper-border-width-vertical`   |
-| `--mod-splitview-gripper-height`                  |
-| `--mod-splitview-gripper-width`                   |
-| `--mod-splitview-handle-background-color`         |
-| `--mod-splitview-handle-background-color-down`    |
-| `--mod-splitview-handle-background-color-focus`   |
-| `--mod-splitview-handle-background-color-hover`   |
-| `--mod-splitview-handle-width`                    |
-| `--mod-splitview-vertical-gripper-outer-width`    |
-| `--mod-splitview-vertical-gripper-reset`          |
-| `--mod-splitview-vertical-gripper-width`          |
-| `--mod-splitview-vertical-width`                  |
diff --git a/components/splitview/package.json b/components/splitview/package.json
index 93b34cde16..f952e8d3db 100644
--- a/components/splitview/package.json
+++ b/components/splitview/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js
index f760b1739d..1c615f12b9 100644
--- a/components/splitview/stories/splitview.stories.js
+++ b/components/splitview/stories/splitview.stories.js
@@ -1,6 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SplitViewGroup } from "./splitview.test.js";
 import { Template } from "./template.js";
diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js
index aacdd00a3e..4fb08b911d 100644
--- a/components/splitview/stories/template.js
+++ b/components/splitview/stories/template.js
@@ -3,6 +3,9 @@ import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-SplitView",
diff --git a/components/splitview/themes/express.css b/components/splitview/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/splitview/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/splitview/themes/spectrum-two.css b/components/splitview/themes/spectrum-two.css
new file mode 100644
index 0000000000..14ef6131e5
--- /dev/null
+++ b/components/splitview/themes/spectrum-two.css
@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-SplitView {
+		--spectrum-splitview-background-color: var(--spectrum-gray-75);
+		--spectrum-splitview-handle-background-color: var(--spectrum-gray-200);
+		--spectrum-splitview-gripper-border-radius: 2px;
+	}
+}
diff --git a/components/splitview/themes/spectrum.css b/components/splitview/themes/spectrum.css
new file mode 100644
index 0000000000..209e46a4b3
--- /dev/null
+++ b/components/splitview/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-SplitView {
+		--spectrum-splitview-background-color: var(--spectrum-gray-100);
+		--spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
+		--spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
+	}
+}
diff --git a/components/statuslight/metadata/metadata.json b/components/statuslight/dist/metadata.json
similarity index 100%
rename from components/statuslight/metadata/metadata.json
rename to components/statuslight/dist/metadata.json
diff --git a/components/statuslight/index.css b/components/statuslight/index.css
index be7eec6586..aed7e351d8 100644
--- a/components/statuslight/index.css
+++ b/components/statuslight/index.css
@@ -11,49 +11,17 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-StatusLight {
-	/* Static tokens */
-	--spectrum-statuslight-corner-radius: 50%;
-	--spectrum-statuslight-font-weight: 400;
-	--spectrum-statuslight-border-width: var(--spectrum-border-width-100);
-
-	/* Size */
+.spectrum-StatusLight,
+.spectrum-StatusLight--sizeM {
 	--spectrum-statuslight-height: var(--spectrum-component-height-100);
 	--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
-	--spectrum-statuslight-line-height: var(--spectrum-line-height-100);
-	--spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
 	--spectrum-statuslight-font-size: var(--spectrum-font-size-100);
 
-	/* Space */
 	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
 	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
 	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
 	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
-
-	/* Color */
-	--spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
-	--spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
-	--spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
-	--spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color);
-	--spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
-	--spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
-	--spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
-	--spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
-	--spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
-	--spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
-	--spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
-	--spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color);
-	--spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color);
-	--spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color);
-	--spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color);
-	--spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color);
-	--spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color);
-	--spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color);
-	--spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color);
-	--spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
-	--spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
-	--spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
 }
 
 .spectrum-StatusLight--sizeS {
@@ -68,18 +36,6 @@
 	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
 }
 
-.spectrum-StatusLight--sizeM {
-	--spectrum-statuslight-height: var(--spectrum-component-height-100);
-	--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
-
-	--spectrum-statuslight-font-size: var(--spectrum-font-size-100);
-
-	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
-	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
-	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
-	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
-}
-
 .spectrum-StatusLight--sizeL {
 	--spectrum-statuslight-height: var(--spectrum-component-height-200);
 	--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large);
@@ -105,6 +61,36 @@
 }
 
 .spectrum-StatusLight {
+	--spectrum-statuslight-corner-radius: 50%;
+	--spectrum-statuslight-font-weight: 400;
+	--spectrum-statuslight-border-width: var(--spectrum-border-width-100);
+
+	--spectrum-statuslight-line-height: var(--spectrum-line-height-100);
+	--spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+	--spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
+	--spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
+	--spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
+	--spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color);
+	--spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
+	--spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
+	--spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
+	--spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
+	--spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
+	--spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
+	--spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
+	--spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color);
+	--spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color);
+	--spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color);
+	--spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color);
+	--spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color);
+	--spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color);
+	--spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color);
+	--spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color);
+	--spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
+	--spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
+	--spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
+
 	display: flex;
 	flex-direction: row;
 	align-items: flex-start;
@@ -146,13 +132,10 @@
 	}
 }
 
+/* Semantic Colors */
 .spectrum-StatusLight--neutral {
 	font-style: italic;
-}
 
-/* Semantic Colors */
-
-.spectrum-StatusLight--neutral {
 	color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));
 
 	&::before {
@@ -181,7 +164,6 @@
 }
 
 /* Non-Semantic Colors */
-
 .spectrum-StatusLight--gray::before {
 	background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color));
 }
diff --git a/components/statuslight/metadata/mods.md b/components/statuslight/metadata/mods.md
deleted file mode 100644
index bc3b415f90..0000000000
--- a/components/statuslight/metadata/mods.md
+++ /dev/null
@@ -1,36 +0,0 @@
-| Modifiable custom properties                      |
-| ------------------------------------------------- |
-| `--mod-statuslight-border-width`                  |
-| `--mod-statuslight-content-color-default`         |
-| `--mod-statuslight-corner-radius`                 |
-| `--mod-statuslight-dot-size`                      |
-| `--mod-statuslight-font-size`                     |
-| `--mod-statuslight-font-weight`                   |
-| `--mod-statuslight-height`                        |
-| `--mod-statuslight-line-height`                   |
-| `--mod-statuslight-line-height-cjk`               |
-| `--mod-statuslight-nonsemantic-blue-color`        |
-| `--mod-statuslight-nonsemantic-celery-color`      |
-| `--mod-statuslight-nonsemantic-chartreuse-color`  |
-| `--mod-statuslight-nonsemantic-cyan-color`        |
-| `--mod-statuslight-nonsemantic-fuchsia-color`     |
-| `--mod-statuslight-nonsemantic-gray-color`        |
-| `--mod-statuslight-nonsemantic-green-color`       |
-| `--mod-statuslight-nonsemantic-indigo-color`      |
-| `--mod-statuslight-nonsemantic-magenta-color`     |
-| `--mod-statuslight-nonsemantic-orange-color`      |
-| `--mod-statuslight-nonsemantic-purple-color`      |
-| `--mod-statuslight-nonsemantic-red-color`         |
-| `--mod-statuslight-nonsemantic-seafoam-color`     |
-| `--mod-statuslight-nonsemantic-yellow-color`      |
-| `--mod-statuslight-semantic-accent-color`         |
-| `--mod-statuslight-semantic-info-color`           |
-| `--mod-statuslight-semantic-negative-color`       |
-| `--mod-statuslight-semantic-neutral-color`        |
-| `--mod-statuslight-semantic-notice-color`         |
-| `--mod-statuslight-semantic-positive-color`       |
-| `--mod-statuslight-spacing-bottom-to-label`       |
-| `--mod-statuslight-spacing-dot-to-label`          |
-| `--mod-statuslight-spacing-top-to-dot`            |
-| `--mod-statuslight-spacing-top-to-label`          |
-| `--mod-statuslight-subdued-content-color-default` |
diff --git a/components/statuslight/package.json b/components/statuslight/package.json
index 171f2f6aa6..b264699fa3 100644
--- a/components/statuslight/package.json
+++ b/components/statuslight/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js
index fdd4f7224d..b385bcc9da 100644
--- a/components/statuslight/stories/statuslight.stories.js
+++ b/components/statuslight/stories/statuslight.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { StatusLightGroup } from "./statuslight.test.js";
 import { NonsemanticGroup, SemanticGroup, Template } from "./template.js";
@@ -65,6 +65,10 @@ export default {
 		isDisabled: false,
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36797-954",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/steplist/metadata/metadata.json b/components/steplist/dist/metadata.json
similarity index 96%
rename from components/steplist/metadata/metadata.json
rename to components/steplist/dist/metadata.json
index 3f2c92091b..3e4e5dc0be 100644
--- a/components/steplist/metadata/metadata.json
+++ b/components/steplist/dist/metadata.json
@@ -86,12 +86,15 @@
     "--spectrum-steplist-topPadding"
   ],
   "global": [
-    "--spectrum-gray-300",
+    "--spectrum-gray-200",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
     "--spectrum-gray-800"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-steplist-incomplete-marker-border-color",
+    "--system-steplist-incomplete-segment-border-block-end-color"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-steplist-complete-marker-background-color",
diff --git a/components/steplist/index.css b/components/steplist/index.css
index dd68da6277..7fc5709191 100644
--- a/components/steplist/index.css
+++ b/components/steplist/index.css
@@ -11,6 +11,8 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 .spectrum-Steplist {
 	/* The width of a step */
 	--spectrum-steplist-step-width: 80px;
@@ -38,23 +40,12 @@
 	--spectrum-steplist-label-text-size: 12px;
 
 	--spectrum-steplist-current-label-text-color: var(--spectrum-gray-800);
-
 	--spectrum-steplist-current-marker-color: var(--spectrum-gray-800);
-
 	--spectrum-steplist-complete-label-text-color: var(--spectrum-gray-700);
-
-	--spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600);
-
 	--spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600);
-
-	--spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300);
-
-	--spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300);
-
 	--spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600);
-}
+	--spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600);
 
-.spectrum-Steplist {
 	/* Contain child elements with positive z-index */
 	z-index: 0;
 	position: relative;
diff --git a/components/steplist/metadata/mods.md b/components/steplist/metadata/mods.md
deleted file mode 100644
index 71bc456f27..0000000000
--- a/components/steplist/metadata/mods.md
+++ /dev/null
@@ -1,20 +0,0 @@
-| Modifiable custom properties                               |
-| ---------------------------------------------------------- |
-| `--mod-steplist-complete-label-text-color`                 |
-| `--mod-steplist-complete-marker-background-color`          |
-| `--mod-steplist-complete-segment-border-block-end-color`   |
-| `--mod-steplist-current-label-text-color`                  |
-| `--mod-steplist-current-marker-color`                      |
-| `--mod-steplist-current-marker-color-key-focus`            |
-| `--mod-steplist-incomplete-label-color`                    |
-| `--mod-steplist-incomplete-marker-border-color`            |
-| `--mod-steplist-incomplete-segment-border-block-end-color` |
-| `--mod-steplist-label-labelOffset`                         |
-| `--mod-steplist-label-text-size`                           |
-| `--mod-steplist-marker-diameter`                           |
-| `--mod-steplist-marker-hitArea`                            |
-| `--mod-steplist-segment-height`                            |
-| `--mod-steplist-sidePadding`                               |
-| `--mod-steplist-small-topPadding`                          |
-| `--mod-steplist-step-width`                                |
-| `--mod-steplist-topPadding`                                |
diff --git a/components/steplist/package.json b/components/steplist/package.json
index 5fa990014d..3d4c2e61bb 100644
--- a/components/steplist/package.json
+++ b/components/steplist/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js
index ca75354471..9266631e64 100644
--- a/components/steplist/stories/steplist.stories.js
+++ b/components/steplist/stories/steplist.stories.js
@@ -1,5 +1,5 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SteplistGroup } from "./steplist.test.js";
 import { DocsSteplistGroup } from "./template.js";
diff --git a/components/steplist/stories/template.js b/components/steplist/stories/template.js
index 7edfdf8199..ea9a57ef42 100644
--- a/components/steplist/stories/template.js
+++ b/components/steplist/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const SteplistItem = ({
 	rootClass = "spectrum-Steplist-item",
diff --git a/components/steplist/themes/express.css b/components/steplist/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/steplist/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/steplist/themes/spectrum-two.css b/components/steplist/themes/spectrum-two.css
new file mode 100644
index 0000000000..649e9fb4d3
--- /dev/null
+++ b/components/steplist/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Steplist {
+		--spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200);
+		--spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200);
+	}
+}
diff --git a/components/steplist/themes/spectrum.css b/components/steplist/themes/spectrum.css
new file mode 100644
index 0000000000..bfe1e5f6f8
--- /dev/null
+++ b/components/steplist/themes/spectrum.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Steplist {
+		--spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300);
+		--spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300);
+	}
+}
diff --git a/components/stepper/metadata/metadata.json b/components/stepper/dist/metadata.json
similarity index 69%
rename from components/stepper/metadata/metadata.json
rename to components/stepper/dist/metadata.json
index 34771bca93..3d08677cea 100644
--- a/components/stepper/metadata/metadata.json
+++ b/components/stepper/dist/metadata.json
@@ -2,16 +2,17 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Stepper",
-    ".spectrum-Stepper .spectrum-Stepper-input",
+    ".spectrum-Stepper--quiet",
+    ".spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input",
+    ".spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)",
+    ".spectrum-Stepper--quiet:after",
+    ".spectrum-Stepper-button",
     ".spectrum-Stepper-buttons",
+    ".spectrum-Stepper-input",
     ".spectrum-Stepper.hide-stepper .spectrum-Stepper-input",
     ".spectrum-Stepper.is-disabled",
-    ".spectrum-Stepper.is-focused",
-    ".spectrum-Stepper.is-focused:hover",
-    ".spectrum-Stepper.is-focused:hover .spectrum-Stepper-buttons",
-    ".spectrum-Stepper.is-focused:hover .spectrum-Stepper-input",
-    ".spectrum-Stepper.is-focused:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper.is-focused:not(.is-disabled) .spectrum-Stepper-input",
+    ".spectrum-Stepper.is-focused:not(.is-disabled)",
+    ".spectrum-Stepper.is-focused:not(.is-disabled):hover",
     ".spectrum-Stepper.is-invalid",
     ".spectrum-Stepper.is-invalid.is-focused",
     ".spectrum-Stepper.is-invalid.is-focused:hover",
@@ -20,43 +21,29 @@
     ".spectrum-Stepper.is-invalid:focus-visible",
     ".spectrum-Stepper.is-invalid:focus:hover",
     ".spectrum-Stepper.is-invalid:hover",
-    ".spectrum-Stepper.is-keyboardFocused",
     ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled)",
-    ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled) .spectrum-Stepper-input",
     ".spectrum-Stepper.spectrum-Stepper--quiet",
-    ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-button",
-    ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-buttons",
-    ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-input",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:hover",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused",
+    ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled)",
+    ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled):hover",
+    ".spectrum-Stepper.spectrum-Stepper--quiet.is-invalid",
     ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):after",
     ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):hover",
-    ".spectrum-Stepper.spectrum-Stepper--quiet:after",
-    ".spectrum-Stepper.spectrum-Stepper--quiet:focus",
-    ".spectrum-Stepper.spectrum-Stepper--quiet:focus:hover",
+    ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus",
+    ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover",
     ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover",
-    ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover .spectrum-Stepper-buttons",
     ".spectrum-Stepper.spectrum-Stepper--sizeL",
+    ".spectrum-Stepper.spectrum-Stepper--sizeM",
     ".spectrum-Stepper.spectrum-Stepper--sizeS",
     ".spectrum-Stepper.spectrum-Stepper--sizeXL",
     ".spectrum-Stepper:before",
-    ".spectrum-Stepper:focus",
-    ".spectrum-Stepper:focus-visible",
-    ".spectrum-Stepper:focus-visible:not(.is-disabled)",
-    ".spectrum-Stepper:focus-visible:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper:focus-visible:not(.is-disabled) .spectrum-Stepper-input",
-    ".spectrum-Stepper:focus:hover",
-    ".spectrum-Stepper:focus:hover .spectrum-Stepper-buttons",
-    ".spectrum-Stepper:focus:hover .spectrum-Stepper-input",
-    ".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-input",
-    ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-input",
-    ".spectrum-Stepper:hover:not(.is-invalid)"
+    ".spectrum-Stepper:hover:not(.is-invalid, .is-disabled)",
+    ".spectrum-Stepper:not(.is-disabled) .is-focused",
+    ".spectrum-Stepper:not(.is-disabled) .is-focused:hover",
+    ".spectrum-Stepper:not(.is-disabled):focus",
+    ".spectrum-Stepper:not(.is-disabled):focus-visible",
+    ".spectrum-Stepper:not(.is-disabled):focus:hover",
+    ".spectrum-Stepper:not(.is-disabled):hover",
+    ".spectrum-Stepper:not(.spectrum-Stepper--quiet)"
   ],
   "modifiers": [
     "--mod-stepper-animation-duration",
@@ -85,6 +72,7 @@
     "--mod-stepper-buttons-border-width",
     "--mod-stepper-focus-indicator-color",
     "--mod-stepper-focus-indicator-gap",
+    "--mod-stepper-focus-indicator-visibility",
     "--mod-stepper-focus-indicator-width",
     "--mod-stepper-height",
     "--mod-stepper-min-width-multiplier",
@@ -93,6 +81,8 @@
   "component": [
     "--spectrum-stepper-animation-duration",
     "--spectrum-stepper-border-color",
+    "--spectrum-stepper-border-color-default",
+    "--spectrum-stepper-border-color-disabled",
     "--spectrum-stepper-border-color-focus",
     "--spectrum-stepper-border-color-focus-hover",
     "--spectrum-stepper-border-color-focus-hover-invalid",
@@ -103,12 +93,12 @@
     "--spectrum-stepper-border-color-keyboard-focus-invalid",
     "--spectrum-stepper-border-radius",
     "--spectrum-stepper-border-width",
-    "--spectrum-stepper-button-background-color-focus",
-    "--spectrum-stepper-button-background-color-keyboard-focus",
-    "--spectrum-stepper-button-border-radius-reset",
     "--spectrum-stepper-button-border-width",
+    "--spectrum-stepper-button-border-width-disabled",
+    "--spectrum-stepper-button-edge-to-fill",
     "--spectrum-stepper-button-width",
     "--spectrum-stepper-buttons-background-color",
+    "--spectrum-stepper-buttons-background-color-disabled",
     "--spectrum-stepper-buttons-border-color",
     "--spectrum-stepper-buttons-border-color-focus",
     "--spectrum-stepper-buttons-border-color-focus-hover",
@@ -131,20 +121,17 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-corner-radius-100",
-    "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
-    "--spectrum-gray-200",
+    "--spectrum-gray-25",
     "--spectrum-gray-300",
-    "--spectrum-gray-400",
     "--spectrum-gray-50",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-800",
     "--spectrum-gray-900",
-    "--spectrum-in-field-button-fill-stacked-inner-border-rounding",
     "--spectrum-in-field-button-width-stacked-extra-large",
     "--spectrum-in-field-button-width-stacked-large",
     "--spectrum-in-field-button-width-stacked-medium",
@@ -157,7 +144,8 @@
     "--spectrum-text-field-minimum-width-multiplier"
   ],
   "system-theme": [
-    "--system-stepper-border-color",
+    "--system-stepper-border-color-default",
+    "--system-stepper-border-color-disabled",
     "--system-stepper-border-color-focus",
     "--system-stepper-border-color-focus-hover",
     "--system-stepper-border-color-focus-hover-invalid",
@@ -167,41 +155,51 @@
     "--system-stepper-border-color-keyboard-focus",
     "--system-stepper-border-color-keyboard-focus-invalid",
     "--system-stepper-border-width",
-    "--system-stepper-button-background-color-focus",
-    "--system-stepper-button-background-color-keyboard-focus",
-    "--system-stepper-button-border-radius-reset",
     "--system-stepper-button-border-width",
+    "--system-stepper-button-border-width-disabled",
     "--system-stepper-buttons-background-color",
+    "--system-stepper-buttons-background-color-disabled",
     "--system-stepper-buttons-border-color",
     "--system-stepper-buttons-border-color-focus",
     "--system-stepper-buttons-border-color-hover",
     "--system-stepper-buttons-border-color-keyboard-focus",
     "--system-stepper-buttons-border-style",
     "--system-stepper-buttons-border-width",
-    "--system-stepper-disabled-buttons-background-color",
-    "--system-stepper-disabled-buttons-border-width"
+    "--system-stepper-quiet-button-edge-to-fill",
+    "--system-stepper-quiet-buttons-border-style"
   ],
   "passthroughs": [
     "--mod-infield-button-border-block-end-width",
     "--mod-infield-button-border-color",
+    "--mod-infield-button-border-color-quiet",
     "--mod-infield-button-border-color-quiet-disabled",
     "--mod-infield-button-border-width",
+    "--mod-infield-button-edge-to-fill",
     "--mod-infield-button-fill-justify-content",
+    "--mod-infield-button-inner-edge-to-fill",
     "--mod-infield-button-stacked-bottom-border-block-end-width",
     "--mod-infield-button-stacked-bottom-border-radius-end-end",
     "--mod-infield-button-stacked-bottom-border-radius-end-start",
     "--mod-infield-button-width-stacked",
+    "--mod-textfield-background-color",
+    "--mod-textfield-border-color",
+    "--mod-textfield-border-color-disabled",
+    "--mod-textfield-border-color-hover",
     "--mod-textfield-border-width",
     "--mod-textfield-focus-indicator-color",
+    "--mod-textfield-focus-indicator-width",
     "--mod-textfield-icon-spacing-inline-start-invalid"
   ],
   "high-contrast": [
+    "--highcontrast-infield-button-border-color",
+    "--highcontrast-infield-button-border-color-active",
     "--highcontrast-stepper-border-color",
     "--highcontrast-stepper-border-color-focus",
     "--highcontrast-stepper-border-color-focus-hover",
     "--highcontrast-stepper-border-color-hover",
     "--highcontrast-stepper-border-color-keyboard-focus",
     "--highcontrast-stepper-buttons-border-width",
-    "--highcontrast-stepper-focus-indicator-color"
+    "--highcontrast-stepper-focus-indicator-color",
+    "--highcontrast-textfield-border-color"
   ]
 }
diff --git a/components/stepper/index.css b/components/stepper/index.css
index 047fba6a60..e7654a6de4 100644
--- a/components/stepper/index.css
+++ b/components/stepper/index.css
@@ -11,248 +11,288 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
-.spectrum-Stepper {
-	/* Set defaults to medium size */
-	--spectrum-stepper-height: var(--spectrum-component-height-100);
-	--spectrum-stepper-border-radius: var(--spectrum-corner-radius-100);
+/* --- High contrast settings --- */
+@media (forced-colors: active) {
+	.spectrum-Stepper {
+		--highcontrast-stepper-border-color: CanvasText;
+		--highcontrast-stepper-border-color-hover: Highlight;
+		--highcontrast-stepper-border-color-focus: Highlight;
+		--highcontrast-stepper-border-color-focus-hover: Highlight;
+		--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
+		--highcontrast-stepper-focus-indicator-color: Highlight;
 
-	--spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium);
+		&.is-invalid {
+			--highcontrast-stepper-border-color: Highlight;
+			--highcontrast-stepper-border-color-hover: Highlight;
+			--highcontrast-stepper-border-color-focus: Highlight;
+			--highcontrast-stepper-border-color-focus-hover: Highlight;
+			--highcontrast-stepper-border-color-keyboard-focus: Highlight;
+		}
 
-	--spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2));
+		&.is-disabled {
+			--highcontrast-stepper-border-color: GrayText;
+			--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+		}
 
-	/*** Focus Indicator ***/
-	--spectrum-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
-	--spectrum-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-	--spectrum-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color);
+		&:not(.is-disabled) {
+			&:hover {
+				--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
+			}
 
-	--spectrum-stepper-animation-duration: var(--spectrum-animation-duration-100);
+			&.is-focused,
+			&:focus {
+				--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
 
-	/*** MODS for sub components ***/
-	--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color)));
-	--mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width));
-	--mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+				&:hover {
+					--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
+				}
+			}
+
+			&.is-keyboardFocused,
+			&:focus-visible {
+				--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
+			}
+		}
+	}
+
+	/* @passthrough start */
+	.spectrum-Stepper-input {
+		--highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
+	}
+	/* @passthrough end */
+
+	/* @passthrough start */
+	.spectrum-Stepper-button {
+		--highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
+		--highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
+	}
+	/* @passthrough end */
+}
+
+/* --- Component-level definitions --- */
+.spectrum-Stepper {
+	--spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default)));
+	--spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100));
+
+	--spectrum-stepper-focus-indicator-width: var(--mod-stepper-focus-indicator-width, var(--spectrum-focus-indicator-thickness));
+	--spectrum-stepper-focus-indicator-gap: var(--mod-stepper-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
+	--spectrum-stepper-focus-indicator-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color)));
+
+	--spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100));
+
+	&,
+	&.spectrum-Stepper--sizeM {
+		--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium));
+		--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100));
+	}
 
 	&.spectrum-Stepper--sizeS {
-		--spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-small);
-		--spectrum-stepper-height: var(--spectrum-component-height-75);
+		--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small));
+		--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-75));
 	}
 
 	&.spectrum-Stepper--sizeL {
-		--spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-large);
-		--spectrum-stepper-height: var(--spectrum-component-height-200);
+		--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-large));
+		--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-200));
 	}
 
 	&.spectrum-Stepper--sizeXL {
-		--spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-extra-large);
-		--spectrum-stepper-height: var(--spectrum-component-height-300);
-	}
-
-	/*** Quiet ***/
-	&.spectrum-Stepper--quiet {
-		--mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width));
-		--mod-textfield-focus-indicator-color: transparent;
+		--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-extra-large));
+		--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-300));
 	}
 
 	&.is-disabled {
-		--mod-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color);
+		--spectrum-stepper-buttons-border-width: var(--spectrum-stepper-button-border-width-disabled);
+		--spectrum-stepper-buttons-background-color: var(--spectrum-stepper-buttons-background-color-disabled);
 	}
 
-	/*** Invalid ***/
 	&.is-invalid {
 		--mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default));
 		--mod-stepper-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover));
 		--mod-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-negative-border-color-focus));
 		--mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover));
 		--mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus));
-		--mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid));
-		--mod-textfield-icon-spacing-inline-start-invalid: 0;
+	}
+
+	&:not(.is-disabled):hover {
+		--mod-stepper-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
+	}
+
+	&:not(.is-disabled).is-focused,
+	&:not(.is-disabled):focus {
+		--mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
+		--mod-stepper-buttons-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
 
 		&:hover {
-			--mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover));
+			--mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
+			--mod-stepper-buttons-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
 		}
+	}
 
-		&.is-focused,
-		&:focus {
-			--mod-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid));
+	&:not(.is-disabled).is-keyboardFocused {
+		--mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
+	}
+
+	&.spectrum-Stepper--quiet {
+		--mod-stepper-buttons-background-color: transparent;
 
+		/* quiet hover */
+		&:not(.is-disabled) {
 			&:hover {
-				--mod-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid));
+				--mod-stepper-buttons-background-color: transparent;
+			}
+
+			&.is-keyboardFocused {
+				/* quiet focus indicator only on bottom border */
+				--mod-stepper-focus-indicator-visibility: visible;
 			}
 		}
 
-		&.is-keyboardFocused,
-		&:focus-visible {
-			--mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid));
+		&.is-invalid {
+			--mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default));
 		}
 	}
 }
 
+/* --- Component-level passthroughs for nested components --- */
+/* @passthrough start -- MODS for sub components */
 .spectrum-Stepper {
-	position: relative;
-	display: inline-flex;
-	flex-flow: row nowrap;
-
-	inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
-	block-size: var(--mod-stepper-height, var(--spectrum-stepper-height));
-	border-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
-	border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
+	--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color));
+	--mod-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color);
+	--mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width));
 
-	.spectrum-Stepper-input {
-		border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
-		border-start-end-radius: 0;
-		border-end-end-radius: 0;
-		border-inline-end-width: 0;
-	}
+	--mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+	--mod-textfield-border-color: var(--spectrum-stepper-border-color);
 
-	/*** Hover ***/
-	&:hover:not(.is-invalid) {
-		--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover)));
+	&:not(.spectrum-Stepper--quiet) {
+		--mod-textfield-border-color-disabled: var(--spectrum-stepper-border-color-disabled);
 	}
 
-	&:hover:not(.is-disabled) {
-		.spectrum-Stepper-input,
-		.spectrum-Stepper-buttons {
-			border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
-		}
+	&:hover:not(.is-invalid, .is-disabled) {
+		--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover));
 	}
 
-	/*** Focused ***/
-	&.is-focused,
-	&:focus {
-		--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus)));
-
-		&:not(.is-disabled) {
-			.spectrum-Stepper-input {
-				outline: none;
-			}
+	&:not(.is-disabled) {
+		.is-focused,
+		&:focus {
+			--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus)));
+			--mod-textfield-focus-indicator-width: 0;
 
-			.spectrum-Stepper-input,
-			.spectrum-Stepper-buttons {
-				border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
+			&:hover {
+				/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- allows for --spectrum-stepper-buttons-border-color-focus-hover to be defined outside of current context */
+				--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover));
+				--mod-textfield-focus-indicator-width: 0;
+				--mod-textfield-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
 			}
 		}
 
-		&:hover {
-			/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- allows for --spectrum-stepper-buttons-border-color-focus-hover to be defined outside of current context */
-			--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover)));
+		&.is-keyboardFocused,
+		&:focus-visible {
+			--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
+			--mod-textfield-focus-indicator-width: 0;
+			--mod-textfield-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
 
-			.spectrum-Stepper-input,
-			.spectrum-Stepper-buttons {
-				border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
-			}
+			/* keyboard focus indicator is visible */
+			outline: var(--spectrum-stepper-focus-indicator-width) solid;
+			outline-color: var(--spectrum-stepper-focus-indicator-color);
+			outline-offset: var(--spectrum-stepper-focus-indicator-gap);
 		}
 	}
 
-	/*** Keyboard Focused ***/
-	&.is-keyboardFocused,
-	&:focus-visible {
-		--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
+	&.is-invalid {
+		--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)));
+		--mod-textfield-icon-spacing-inline-start-invalid: 0;
 
-		&:not(.is-disabled) {
-			/* keyboard focus indicator is visible */
-			outline: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)) solid;
-			outline-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-stepper-focus-indicator-color)));
-			outline-offset: var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap));
+		&:hover {
+			--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)));
+		}
 
-			.spectrum-Stepper-input {
-				outline: none;
-			}
+		&.is-focused,
+		&:focus {
+			--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid)));
 
-			.spectrum-Stepper-input,
-			.spectrum-Stepper-buttons {
-				border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
+			&:hover {
+				--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)));
 			}
 		}
-	}
-}
-
-/*** Quiet ***/
-
-/* stylelint-disable-next-line selector-class-pattern -- .hide-stepper class is deprecated for S2 */
-.spectrum-Stepper.spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input {
-	border-inline-end-width: 0;
-	border-end-end-radius: 0;
-}
-
-.spectrum-Stepper.spectrum-Stepper--quiet {
-	--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
-
-	/* quiet corners are not rounded */
-	border-start-start-radius: 0;
-	border-start-end-radius: 0;
-	border-end-start-radius: 0;
-	border-end-end-radius: 0;
-
-	&::after {
-		content: "";
-		position: absolute;
-		inset-block-end: calc(-1 * (var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap)) + var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width))));
-		inset-inline-start: 0;
-		inline-size: 100%;
-		block-size: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width));
-	}
 
-	.spectrum-Stepper-buttons {
-		border: none;
+		&.is-keyboardFocused,
+		&:focus-visible {
+			--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)));
+		}
 	}
 
-	.spectrum-Stepper-button {
+	&.spectrum-Stepper--quiet {
+		--mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width));
+		--mod-infield-button-border-color: var(--spectrum-stepper-border-color);
+		--mod-infield-button-border-color-quiet: var(--spectrum-stepper-border-color);
 		--mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
 		--mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
 		--mod-infield-button-stacked-bottom-border-radius-end-end: 0;
 		--mod-infield-button-stacked-bottom-border-radius-end-start: 0;
 		--mod-infield-button-fill-justify-content: flex-end;
-		padding: 0;
-	}
+		--mod-infield-button-inner-edge-to-fill: var(--spectrum-stepper-button-edge-to-fill);
+		--mod-infield-button-edge-to-fill: var(--spectrum-stepper-button-edge-to-fill);
 
-	.spectrum-Stepper-input,
-	.spectrum-Stepper-buttons {
-		background-color: transparent;
-	}
+		--mod-textfield-focus-indicator-color: transparent;
+		--mod-textfield-background-color: transparent;
+		--mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
 
-	/* quiet hover */
-	&:not(.is-disabled):hover {
-		--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
+		&:not(.is-disabled) {
+			&:hover {
+				--mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
+				--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
+			}
 
-		.spectrum-Stepper-buttons {
-			background-color: transparent;
-		}
-	}
+			/* quiet focus */
+			&.is-focused,
+			&:focus {
+				--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
 
-	/* quiet focus */
-	&.is-focused,
-	&:focus {
-		--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
+				/* stylelint-disable-next-line max-nesting-depth -- @todo reduce complexity of selectors */
+				&:hover {
+					--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
+				}
+			}
 
-		&:hover {
-			--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
+			&.is-keyboardFocused {
+				--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
+
+				/* stylelint-disable-next-line max-nesting-depth -- @todo reduce complexity of selectors */
+				&:hover {
+					--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
+				}
+			}
 		}
 	}
+}
+/* @passthrough end */
 
-	/* quiet keyboard focused */
-	&.is-keyboardFocused {
-		--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
+/* --- Component styles --- */
+.spectrum-Stepper {
+	--spectrum-stepper-width: var(--mod-stepper-width, calc(var(--spectrum-stepper-height) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2)));
 
-		&:not(.is-disabled) {
-			outline: none;
+	position: relative;
+	display: inline-flex;
+	flex-flow: row nowrap;
 
-			/* quiet focus indicator only on bottom border */
-			&::after {
-				background-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-stepper-focus-indicator-color)));
-			}
+	inline-size: var(--spectrum-stepper-width);
+	block-size: var(--spectrum-stepper-height);
 
-			&:hover {
-				--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
-			}
-		}
+	border-radius: var(--spectrum-stepper-border-radius);
+
+	&::before {
+		content: "";
 	}
 }
 
-.spectrum-Stepper::before {
-	content: "";
+/* Nested textfield subcomponent */
+.spectrum-Stepper-input {
+	border-start-end-radius: 0;
+	border-end-end-radius: 0;
+	border-inline-end-width: 0;
 }
 
 /* container for stepUp and stepDown buttons */
@@ -262,49 +302,57 @@
 	justify-content: center;
 	box-sizing: border-box;
 
-	block-size: var(--mod-stepper-height, var(--spectrum-stepper-height));
-	inline-size: var(--mod-stepper-button-width, var(--spectrum-stepper-button-width));
+	block-size: var(--spectrum-stepper-height);
+	inline-size: var(--spectrum-stepper-button-width);
 
-	border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
+	border-color: var(--spectrum-stepper-border-color);
 	border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style));
 	border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width)));
 	border-inline-start-width: 0;
 
 	/* Have to add border radius here to avoid overlapping textfield border */
-	border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
-	border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
+	border-start-end-radius: var(--spectrum-stepper-border-radius);
+	border-end-end-radius: var(--spectrum-stepper-border-radius);
 
 	background-color: var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color));
-	transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out;
+	transition: border-color var(--spectrum-stepper-animation-duration) ease-in-out;
 }
 
-/* stylelint-disable-next-line selector-class-pattern -- .hide-stepper class is deprecated for S2 */
+/* stylelint-disable-next-line selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */
 .spectrum-Stepper.hide-stepper .spectrum-Stepper-input {
-	border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
-	border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
+	border-start-end-radius: var(--spectrum-stepper-border-radius);
+	border-end-end-radius: var(--spectrum-stepper-border-radius);
 	border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
 }
 
-@media (forced-colors: active) {
-	.spectrum-Stepper {
-		--highcontrast-stepper-border-color: CanvasText;
-		--highcontrast-stepper-border-color-hover: Highlight;
-		--highcontrast-stepper-border-color-focus: Highlight;
-		--highcontrast-stepper-border-color-focus-hover: Highlight;
-		--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
-		--highcontrast-stepper-focus-indicator-color: Highlight;
+/* --- Quiet variant styles --- */
+.spectrum-Stepper--quiet {
+	/* quiet corners are not rounded */
+	border-start-start-radius: 0;
+	border-start-end-radius: 0;
+	border-end-start-radius: 0;
+	border-end-end-radius: 0;
 
-		&.is-invalid {
-			--highcontrast-stepper-border-color: Highlight;
-			--highcontrast-stepper-border-color-hover: Highlight;
-			--highcontrast-stepper-border-color-focus: Highlight;
-			--highcontrast-stepper-border-color-focus-hover: Highlight;
-			--highcontrast-stepper-border-color-keyboard-focus: Highlight;
-		}
+	/* stylelint-disable selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */
+	&.hide-stepper .spectrum-Stepper-input {
+		border-inline-end-width: 0;
+		border-end-end-radius: 0;
+	}
+	/* stylelint-enable selector-class-pattern */
 
-		&.is-disabled {
-			--highcontrast-stepper-border-color: GrayText;
-			--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
-		}
+	&::after {
+		visibility: var(--mod-stepper-focus-indicator-visibility, hidden);
+		content: "";
+		position: absolute;
+		inset-block-end: calc(-1 * (var(--spectrum-stepper-focus-indicator-gap) + var(--spectrum-stepper-focus-indicator-width)));
+		inset-inline-start: 0;
+		inline-size: 100%;
+		block-size: var(--spectrum-stepper-focus-indicator-width);
+		background-color: var(--spectrum-stepper-focus-indicator-color);
+	}
+
+	/* quiet hover */
+	&.is-keyboardFocused:not(.is-disabled) {
+		outline: none;
 	}
 }
diff --git a/components/stepper/metadata/mods.md b/components/stepper/metadata/mods.md
deleted file mode 100644
index bdec6a209a..0000000000
--- a/components/stepper/metadata/mods.md
+++ /dev/null
@@ -1,32 +0,0 @@
-| Modifiable custom properties                        |
-| --------------------------------------------------- |
-| `--mod-stepper-animation-duration`                  |
-| `--mod-stepper-border-color`                        |
-| `--mod-stepper-border-color-focus`                  |
-| `--mod-stepper-border-color-focus-hover`            |
-| `--mod-stepper-border-color-focus-hover-invalid`    |
-| `--mod-stepper-border-color-focus-invalid`          |
-| `--mod-stepper-border-color-hover`                  |
-| `--mod-stepper-border-color-hover-invalid`          |
-| `--mod-stepper-border-color-invalid`                |
-| `--mod-stepper-border-color-keyboard-focus`         |
-| `--mod-stepper-border-color-keyboard-focus-invalid` |
-| `--mod-stepper-border-radius`                       |
-| `--mod-stepper-border-width`                        |
-| `--mod-stepper-button-border-width`                 |
-| `--mod-stepper-button-width`                        |
-| `--mod-stepper-button-width-quiet`                  |
-| `--mod-stepper-buttons-background-color`            |
-| `--mod-stepper-buttons-border-color`                |
-| `--mod-stepper-buttons-border-color-focus`          |
-| `--mod-stepper-buttons-border-color-focus-hover`    |
-| `--mod-stepper-buttons-border-color-hover`          |
-| `--mod-stepper-buttons-border-color-keyboard-focus` |
-| `--mod-stepper-buttons-border-style`                |
-| `--mod-stepper-buttons-border-width`                |
-| `--mod-stepper-focus-indicator-color`               |
-| `--mod-stepper-focus-indicator-gap`                 |
-| `--mod-stepper-focus-indicator-width`               |
-| `--mod-stepper-height`                              |
-| `--mod-stepper-min-width-multiplier`                |
-| `--mod-stepper-width`                               |
diff --git a/components/stepper/package.json b/components/stepper/package.json
index 438f8d0f15..1b1d019c92 100644
--- a/components/stepper/package.json
+++ b/components/stepper/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js
index cbd0c044e1..8775574a34 100644
--- a/components/stepper/stories/stepper.stories.js
+++ b/components/stepper/stories/stepper.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { StepperGroup } from "./stepper.test.js";
 import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template.js";
@@ -42,6 +42,10 @@ export default {
 		hideStepper: false
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=67507-450",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js
index fb14155af8..fbb818b72f 100644
--- a/components/stepper/stories/template.js
+++ b/components/stepper/stories/template.js
@@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Stepper",
diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css
index 05953f0a25..724f4e973f 100644
--- a/components/stepper/themes/express.css
+++ b/components/stepper/themes/express.css
@@ -11,13 +11,19 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Stepper {
 		--spectrum-stepper-border-width: var(--spectrum-border-width-200);
+		--spectrum-stepper-border-color-default: var(--spectrum-gray-400);
+		--spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
+		--spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
+		--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900);
+		--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+		--spectrum-stepper-border-color-disabled: var(--spectrum-disabled-background-color);
 
 		--spectrum-stepper-buttons-border-style: solid;
 		--spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200);
@@ -27,26 +33,21 @@
 		--spectrum-stepper-buttons-border-color-focus: transparent;
 		--spectrum-stepper-buttons-border-color-keyboard-focus: transparent;
 
-		--spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
 		--spectrum-stepper-button-border-width: 0;
 
-		--spectrum-stepper-border-color: var(--spectrum-gray-400);
-		--spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
-		--spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
-		--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900);
-		--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
-
+		/** Invalid **/
 		--spectrum-stepper-border-color-invalid: transparent;
 		--spectrum-stepper-border-color-focus-invalid: transparent;
 		--spectrum-stepper-border-color-focus-hover-invalid: transparent;
 		--spectrum-stepper-border-color-keyboard-focus-invalid: transparent;
 
-		--spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400);
-		--spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300);
+		/** Disabled **/
+		--spectrum-stepper-button-border-width-disabled: 0;
+		--spectrum-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color);
+	}
 
-		&.is-disabled {
-			--spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color);
-			--spectrum-stepper-buttons-border-width: 0;
-		}
+	.spectrum-Stepper--quiet {
+		--spectrum-stepper-buttons-border-style: none;
+		--spectrum-stepper-button-edge-to-fill: 0;
 	}
 }
diff --git a/components/stepper/themes/spectrum-two.css b/components/stepper/themes/spectrum-two.css
new file mode 100644
index 0000000000..5fc7af36ca
--- /dev/null
+++ b/components/stepper/themes/spectrum-two.css
@@ -0,0 +1,49 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Stepper {
+		--spectrum-stepper-border-width: var(--spectrum-border-width-100);
+		--spectrum-stepper-border-color-default: var(--spectrum-gray-500);
+		--spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
+		--spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
+		--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
+		--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+
+		--spectrum-stepper-buttons-border-style: none;
+		--spectrum-stepper-buttons-border-width: 0;
+		--spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
+		--spectrum-stepper-buttons-background-color: var(--spectrum-gray-25);
+		--spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
+		--spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
+		--spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
+
+		--spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
+
+		/** Invalid **/
+		--spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
+		--spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
+		--spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
+		--spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
+
+		/** Disabled **/
+		--spectrum-stepper-border-color-disabled: var(--spectrum-gray-300);
+		--spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200);
+		--spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
+	}
+
+	.spectrum-Stepper--quiet {
+		--spectrum-stepper-buttons-border-style: none;
+		--spectrum-stepper-button-edge-to-fill: 0;
+	}
+}
diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css
index 8d9c9c4485..1b904f9f95 100644
--- a/components/stepper/themes/spectrum.css
+++ b/components/stepper/themes/spectrum.css
@@ -11,38 +11,15 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-Stepper {
-		--spectrum-stepper-border-width: var(--spectrum-border-width-100);
-
-		--spectrum-stepper-buttons-border-style: none;
-		--spectrum-stepper-buttons-border-width: 0;
-		--spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
-		--spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
-		--spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
-		--spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
-		--spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
-
-		--spectrum-stepper-button-border-radius-reset: 0px;
-		--spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
+/* @combine .spectrum.spectrum--legacy */
 
-		--spectrum-stepper-border-color: var(--spectrum-gray-500);
-		--spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
-		--spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
-		--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
-		--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+@import "./spectrum-two.css";
 
-		--spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
-		--spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
-		--spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
-		--spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
-
-		--spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300);
-		--spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200);
-
-		&.is-disabled {
-			--spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
-			--spectrum-stepper-buttons-border-width: 0;
-		}
+@container style(--system: legacy) {
+	.spectrum-Stepper {
+		--spectrum-stepper-border-color-disabled: transparent;
+		--spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100);
+		--spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
+		--spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-100);
 	}
 }
diff --git a/components/swatch/metadata/metadata.json b/components/swatch/dist/metadata.json
similarity index 95%
rename from components/swatch/metadata/metadata.json
rename to components/swatch/dist/metadata.json
index cde218504a..d982d68bbd 100644
--- a/components/swatch/metadata/metadata.json
+++ b/components/swatch/dist/metadata.json
@@ -73,12 +73,12 @@
   "component": [
     "--spectrum-swatch-border-color",
     "--spectrum-swatch-border-color-light",
+    "--spectrum-swatch-border-color-opacity",
     "--spectrum-swatch-border-color-selected",
     "--spectrum-swatch-border-radius",
     "--spectrum-swatch-border-thickness",
     "--spectrum-swatch-border-thickness-selected",
     "--spectrum-swatch-dash-icon-color",
-    "--spectrum-swatch-disabled-icon-border-color",
     "--spectrum-swatch-disabled-icon-color",
     "--spectrum-swatch-disabled-icon-size",
     "--spectrum-swatch-focus-indicator-border-radius",
@@ -107,18 +107,22 @@
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
-    "--spectrum-gray-50",
+    "--spectrum-gray-1000-rgb",
+    "--spectrum-gray-25",
     "--spectrum-gray-800",
     "--spectrum-gray-900",
     "--spectrum-picked-color",
     "--spectrum-red-900",
-    "--spectrum-white",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-50",
     "--spectrum-workflow-icon-size-75"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-swatch-border-color",
+    "--system-swatch-disabled-icon-color",
+    "--system-swatch-inner-border-color-selected"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-swatch-background-color-selected",
diff --git a/components/swatch/index.css b/components/swatch/index.css
index 19a4e28323..14f706be43 100644
--- a/components/swatch/index.css
+++ b/components/swatch/index.css
@@ -11,30 +11,34 @@
  * governing permissions and limitations under the License.
  */
 
-/* Swatch tokens */
-.spectrum-Swatch {
-	/* Placeholder tokens */
-	--spectrum-swatch-focus-indicator-border-radius: 8px;
-	--spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%);
+@import "./themes/spectrum-two.css";
+
+/* Windows high contrast mode */
+@media (forced-colors: active) {
+	.spectrum-Swatch {
+		--highcontrast-swatch-disabled-icon-color: GrayText;
+		--highcontrast-swatch-focus-indicator-color: ButtonText;
+		--highcontrast-swatch-background-color-selected: Background;
+		--highcontrast-swatch-border-color-selected: Highlight;
+		--highcontrast-swatch-border-color: ButtonText;
+		--highcontrast-swatch-fill-foreground-color: ButtonText;
+
+		.spectrum-Swatch-fill {
+			forced-color-adjust: none;
+		}
+	}
 
-	/* Size */
+	.spectrum-Swatch[disabled],
+	.spectrum-Swatch.is-disabled {
+		--highcontrast-swatch-border-color: GrayText;
+	}
+}
+
+.spectrum-Swatch,
+.spectrum-Swatch--sizeS {
 	--spectrum-swatch-size: var(--spectrum-swatch-size-small);
-	--spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
-	--spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
-	--spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
 	--spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
 	--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
-	--spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-	--spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-
-	/* Color */
-	--spectrum-swatch-border-color-selected: var(--spectrum-gray-900);
-	--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
-	--spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color);
-	--spectrum-swatch-disabled-icon-color: var(--spectrum-white);
-	--spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
-	--spectrum-swatch-slash-icon-color: var(--spectrum-red-900);
-	--spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
 }
 
 .spectrum-Swatch--sizeXS {
@@ -43,12 +47,6 @@
 	--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small);
 }
 
-.spectrum-Swatch--sizeS {
-	--spectrum-swatch-size: var(--spectrum-swatch-size-small);
-	--spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
-	--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
-}
-
 .spectrum-Swatch--sizeM {
 	--spectrum-swatch-size: var(--spectrum-swatch-size-medium);
 	--spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
@@ -61,29 +59,19 @@
 	--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large);
 }
 
-/* Windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-Swatch {
-		--highcontrast-swatch-disabled-icon-color: GrayText;
-		--highcontrast-swatch-focus-indicator-color: ButtonText;
-		--highcontrast-swatch-background-color-selected: Background;
-		--highcontrast-swatch-border-color-selected: Highlight;
-		--highcontrast-swatch-border-color: ButtonText;
-		--highcontrast-swatch-fill-foreground-color: ButtonText;
-
-		.spectrum-Swatch-fill {
-			forced-color-adjust: none;
-		}
-	}
-
-	.spectrum-Swatch[disabled],
-	.spectrum-Swatch.is-disabled {
-		--highcontrast-swatch-border-color: GrayText;
-	}
-}
-
-/* Swatch styles */
 .spectrum-Swatch {
+	--spectrum-swatch-focus-indicator-border-radius: 8px;
+	--spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%);
+	--spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
+	--spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
+	--spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
+	--spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+	--spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+	--spectrum-swatch-border-color-selected: var(--spectrum-gray-900);
+	--spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
+	--spectrum-swatch-slash-icon-color: var(--spectrum-red-900);
+	--spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
 	inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
 	block-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
 
@@ -239,7 +227,6 @@
 		position: absolute;
 		inset: 0;
 		z-index: 0;
-
 		background: var(--spectrum-picked-color, transparent);
 
 		/* Swatch border */
@@ -253,7 +240,6 @@
 	.spectrum-Swatch-fill {
 		&::before {
 			box-shadow: none;
-
 			background: var(--spectrum-picked-color, transparent);
 		}
 	}
@@ -270,7 +256,6 @@
 .spectrum-Swatch-mixedValueIcon {
 	display: none;
 	pointer-events: none;
-
 	color: var(--spectrum-picked-color, transparent);
 }
 
diff --git a/components/swatch/metadata/mods.md b/components/swatch/metadata/mods.md
deleted file mode 100644
index 06d5eefd24..0000000000
--- a/components/swatch/metadata/mods.md
+++ /dev/null
@@ -1,20 +0,0 @@
-| Modifiable custom properties                 |
-| -------------------------------------------- |
-| `--mod-animation-duration-100`               |
-| `--mod-swatch-border-color`                  |
-| `--mod-swatch-border-color-light`            |
-| `--mod-swatch-border-color-selected`         |
-| `--mod-swatch-border-radius`                 |
-| `--mod-swatch-border-thickness`              |
-| `--mod-swatch-border-thickness-selected`     |
-| `--mod-swatch-disabled-icon-color`           |
-| `--mod-swatch-disabled-icon-size`            |
-| `--mod-swatch-focus-indicator-border-radius` |
-| `--mod-swatch-focus-indicator-color`         |
-| `--mod-swatch-focus-indicator-gap`           |
-| `--mod-swatch-focus-indicator-thickness`     |
-| `--mod-swatch-icon-border-color`             |
-| `--mod-swatch-inner-border-color-selected`   |
-| `--mod-swatch-size`                          |
-| `--mod-swatch-slash-icon-color`              |
-| `--mod-swatch-slash-thickness`               |
diff --git a/components/swatch/package.json b/components/swatch/package.json
index 8c8e425711..679b245482 100644
--- a/components/swatch/package.json
+++ b/components/swatch/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js
index 433e426137..d3d1b44b1c 100644
--- a/components/swatch/stories/swatch.stories.js
+++ b/components/swatch/stories/swatch.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SwatchGroup } from "./swatch.test.js";
 import { BorderGroup, DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template.js";
@@ -99,6 +99,10 @@ export default {
 		isMixedValue: false,
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=57008-1092",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js
index 836dd20d36..2556fc3da7 100644
--- a/components/swatch/stories/template.js
+++ b/components/swatch/stories/template.js
@@ -9,6 +9,9 @@ import { when } from "lit/directives/when.js";
 import { capitalize, lowerCase } from "lodash-es";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Swatch",
diff --git a/components/swatch/themes/express.css b/components/swatch/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/swatch/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css
new file mode 100644
index 0000000000..e753d50ca0
--- /dev/null
+++ b/components/swatch/themes/spectrum-two.css
@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	/* Swatch tokens */
+	.spectrum-Swatch {
+		--spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity));
+		--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25);
+		--spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25);
+	}
+}
diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css
new file mode 100644
index 0000000000..d82cd4c9c0
--- /dev/null
+++ b/components/swatch/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Swatch {
+		--spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity));
+		--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
+		--spectrum-swatch-disabled-icon-color: var(--spectrum-gray-50);
+	}
+}
diff --git a/components/swatchgroup/metadata/metadata.json b/components/swatchgroup/dist/metadata.json
similarity index 74%
rename from components/swatchgroup/metadata/metadata.json
rename to components/swatchgroup/dist/metadata.json
index b03c96ca87..74adf019d5 100644
--- a/components/swatchgroup/metadata/metadata.json
+++ b/components/swatchgroup/dist/metadata.json
@@ -10,11 +10,7 @@
     "--mod-swatchgroup-spacing-regular",
     "--mod-swatchgroup-spacing-spacious"
   ],
-  "component": [
-    "--spectrum-swatchgroup-spacing-compact",
-    "--spectrum-swatchgroup-spacing-regular",
-    "--spectrum-swatchgroup-spacing-spacious"
-  ],
+  "component": ["--spectrum-swatchgroup-spacing"],
   "global": [
     "--spectrum-spacing-100",
     "--spectrum-spacing-50",
diff --git a/components/swatchgroup/index.css b/components/swatchgroup/index.css
index feb0b25ec7..78485c7752 100644
--- a/components/swatchgroup/index.css
+++ b/components/swatchgroup/index.css
@@ -12,9 +12,7 @@
  */
 
 .spectrum-SwatchGroup {
-	--spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50);
-	--spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75);
-	--spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100);
+	--spectrum-swatchgroup-spacing: var(--spectrum-spacing-75);
 
 	display: inline-flex;
 	flex-flow: row wrap;
@@ -22,15 +20,17 @@
 	justify-content: flex-start;
 
 	/* Regular (Default) */
-	gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular));
+	gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing));
 }
 
 /* Compact */
 .spectrum-SwatchGroup--compact {
-	gap: var(--mod-swatchgroup-spacing-compact, var(--spectrum-swatchgroup-spacing-compact));
+	--mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-compact);
+	--spectrum-swatchgroup-spacing: var(--spectrum-spacing-50);
 }
 
 /* Spacious */
 .spectrum-SwatchGroup--spacious {
-	gap: var(--mod-swatchgroup-spacing-spacious, var(--spectrum-swatchgroup-spacing-spacious));
+	--mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-spacious);
+	--spectrum-swatchgroup-spacing: var(--spectrum-spacing-100);
 }
diff --git a/components/swatchgroup/metadata/mods.md b/components/swatchgroup/metadata/mods.md
deleted file mode 100644
index 61adf34355..0000000000
--- a/components/swatchgroup/metadata/mods.md
+++ /dev/null
@@ -1,5 +0,0 @@
-| Modifiable custom properties         |
-| ------------------------------------ |
-| `--mod-swatchgroup-spacing-compact`  |
-| `--mod-swatchgroup-spacing-regular`  |
-| `--mod-swatchgroup-spacing-spacious` |
diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json
index 1e7611c6ff..9148a06ea0 100644
--- a/components/swatchgroup/package.json
+++ b/components/swatchgroup/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js
index 1b33f6c0de..2a842f0669 100644
--- a/components/swatchgroup/stories/swatchgroup.stories.js
+++ b/components/swatchgroup/stories/swatchgroup.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { default as Swatch } from "@spectrum-css/swatch/stories/swatch.stories.js";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SwatchgroupGroup } from "./swatchgroup.test.js";
 import { RoundingTemplate, Template } from "./template.js";
@@ -112,6 +112,10 @@ export default {
 				...(Swatch.parameters?.actions?.handles ?? []),
 			],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=57008-1093",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/switch/metadata/metadata.json b/components/switch/dist/metadata.json
similarity index 98%
rename from components/switch/metadata/metadata.json
rename to components/switch/dist/metadata.json
index 2a5df2c7e7..00a47cdd79 100644
--- a/components/switch/metadata/metadata.json
+++ b/components/switch/dist/metadata.json
@@ -182,10 +182,10 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
-    "--spectrum-gray-300",
+    "--spectrum-gray-200",
+    "--spectrum-gray-50",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
-    "--spectrum-gray-75",
     "--spectrum-gray-800",
     "--spectrum-gray-900",
     "--spectrum-line-height-100",
@@ -203,6 +203,9 @@
     "--spectrum-text-to-control-75"
   ],
   "system-theme": [
+    "--system-switch-background-color",
+    "--system-switch-background-color-disabled",
+    "--system-switch-handle-background-color",
     "--system-switch-handle-border-color-default",
     "--system-switch-handle-border-color-down",
     "--system-switch-handle-border-color-focus",
diff --git a/components/switch/index.css b/components/switch/index.css
index 3551b3bd26..763ad359ab 100644
--- a/components/switch/index.css
+++ b/components/switch/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Switch {
 	--spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default);
@@ -21,19 +20,14 @@
 	--spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus);
 	--spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color);
 
-	--spectrum-switch-background-color: var(--spectrum-gray-300);
-	--spectrum-switch-background-color-disabled: var(--spectrum-gray-300);
-	--spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
-
 	--spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default);
 	--spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
 	--spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
 	--spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
+	--spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
 
 	--spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
 	--spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
-	--spectrum-switch-handle-background-color: var(--spectrum-gray-75);
 	--spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color);
 }
 
@@ -59,17 +53,7 @@
 	--spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000);
 }
 
-.spectrum-Switch--sizeS {
-	--spectrum-switch-min-height: var(--spectrum-component-height-75);
-	--spectrum-switch-control-width: var(--spectrum-switch-control-width-small);
-	--spectrum-switch-control-height: var(--spectrum-switch-control-height-small);
-	--spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75);
-	--spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small);
-	--spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
-
-	--spectrum-switch-font-size: var(--spectrum-font-size-75);
-}
-
+.spectrum-Switch,
 .spectrum-Switch--sizeM {
 	--spectrum-switch-min-height: var(--spectrum-component-height-100);
 	--spectrum-switch-control-width: var(--spectrum-switch-control-width-medium);
@@ -81,6 +65,17 @@
 	--spectrum-switch-font-size: var(--spectrum-font-size-100);
 }
 
+.spectrum-Switch--sizeS {
+	--spectrum-switch-min-height: var(--spectrum-component-height-75);
+	--spectrum-switch-control-width: var(--spectrum-switch-control-width-small);
+	--spectrum-switch-control-height: var(--spectrum-switch-control-height-small);
+	--spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75);
+	--spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small);
+	--spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
+
+	--spectrum-switch-font-size: var(--spectrum-font-size-75);
+}
+
 .spectrum-Switch--sizeL {
 	--spectrum-switch-min-height: var(--spectrum-component-height-200);
 	--spectrum-switch-control-width: var(--spectrum-switch-control-width-large);
diff --git a/components/switch/metadata/mods.md b/components/switch/metadata/mods.md
deleted file mode 100644
index 1ddbb10543..0000000000
--- a/components/switch/metadata/mods.md
+++ /dev/null
@@ -1,39 +0,0 @@
-| Modifiable custom properties                        |
-| --------------------------------------------------- |
-| `--mod-animation-duration-100`                      |
-| `--mod-animation-duration-200`                      |
-| `--mod-border-width-200`                            |
-| `--mod-focus-indicator-gap`                         |
-| `--mod-focus-indicator-thickness`                   |
-| `--mod-line-height-100`                             |
-| `--mod-switch-background-color`                     |
-| `--mod-switch-background-color-disabled`            |
-| `--mod-switch-background-color-selected-default`    |
-| `--mod-switch-background-color-selected-disabled`   |
-| `--mod-switch-background-color-selected-down`       |
-| `--mod-switch-background-color-selected-focus`      |
-| `--mod-switch-background-color-selected-hover`      |
-| `--mod-switch-control-height`                       |
-| `--mod-switch-control-label-spacing`                |
-| `--mod-switch-control-width`                        |
-| `--mod-switch-focus-indicator-color`                |
-| `--mod-switch-focus-indicator-thickness`            |
-| `--mod-switch-font-size`                            |
-| `--mod-switch-handle-background-color`              |
-| `--mod-switch-handle-border-color-default`          |
-| `--mod-switch-handle-border-color-disabled`         |
-| `--mod-switch-handle-border-color-down`             |
-| `--mod-switch-handle-border-color-focus`            |
-| `--mod-switch-handle-border-color-hover`            |
-| `--mod-switch-handle-border-color-selected-default` |
-| `--mod-switch-handle-border-color-selected-down`    |
-| `--mod-switch-handle-border-color-selected-focus`   |
-| `--mod-switch-handle-border-color-selected-hover`   |
-| `--mod-switch-height`                               |
-| `--mod-switch-label-color-default`                  |
-| `--mod-switch-label-color-disabled`                 |
-| `--mod-switch-label-color-down`                     |
-| `--mod-switch-label-color-focus`                    |
-| `--mod-switch-label-color-hover`                    |
-| `--mod-switch-spacing-top-to-control`               |
-| `--mod-switch-spacing-top-to-label`                 |
diff --git a/components/switch/package.json b/components/switch/package.json
index 88c27b050e..7c517668a8 100644
--- a/components/switch/package.json
+++ b/components/switch/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js
index 561518c4c3..5286b30788 100644
--- a/components/switch/stories/switch.stories.js
+++ b/components/switch/stories/switch.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isChecked, isDisabled, isEmphasized, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SwitchGroup } from "./switch.test.js";
 import { DocsSwitchGroup, Template } from "./template.js";
@@ -39,6 +39,10 @@ export default {
 		size: "m",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=164-16761",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js
index 4f0877d5c8..5e67a3cc8b 100644
--- a/components/switch/stories/template.js
+++ b/components/switch/stories/template.js
@@ -6,6 +6,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Switch",
diff --git a/components/switch/themes/express.css b/components/switch/themes/express.css
index a8266050a9..ac5198ba73 100644
--- a/components/switch/themes/express.css
+++ b/components/switch/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Switch {
 		--spectrum-switch-handle-border-color-default: var(--spectrum-gray-800);
 		--spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900);
diff --git a/components/switch/themes/spectrum-two.css b/components/switch/themes/spectrum-two.css
new file mode 100644
index 0000000000..c2ed1a192a
--- /dev/null
+++ b/components/switch/themes/spectrum-two.css
@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Switch {
+		--spectrum-switch-handle-border-color-default: var(--spectrum-gray-600);
+		--spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700);
+		--spectrum-switch-handle-border-color-down: var(--spectrum-gray-800);
+		--spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700);
+
+		--spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700);
+		--spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800);
+		--spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
+		--spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800);
+
+		--spectrum-switch-background-color: var(--spectrum-gray-200);
+		--spectrum-switch-background-color-disabled: var(--spectrum-gray-200);
+		--spectrum-switch-handle-background-color: var(--spectrum-gray-50);
+	}
+}
diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css
index 755d004ae6..8b32e03d8f 100644
--- a/components/switch/themes/spectrum.css
+++ b/components/switch/themes/spectrum.css
@@ -11,16 +11,14 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-Switch {
-		--spectrum-switch-handle-border-color-default: var(--spectrum-gray-600);
-		--spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700);
-		--spectrum-switch-handle-border-color-down: var(--spectrum-gray-800);
-		--spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700);
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
 
-		--spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700);
-		--spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800);
-		--spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
-		--spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800);
+@container style(--system: legacy) {
+	.spectrum-Switch {
+		--spectrum-switch-background-color: var(--spectrum-gray-300);
+		--spectrum-switch-background-color-disabled: var(--spectrum-gray-300);
+		--spectrum-switch-handle-background-color: var(--spectrum-gray-75);
 	}
 }
diff --git a/components/table/metadata/metadata.json b/components/table/dist/metadata.json
similarity index 97%
rename from components/table/metadata/metadata.json
rename to components/table/dist/metadata.json
index 11b5b87040..e319678fb1 100644
--- a/components/table/metadata/metadata.json
+++ b/components/table/dist/metadata.json
@@ -9,6 +9,7 @@
     ".spectrum-Table--emphasized",
     ".spectrum-Table--quiet",
     ".spectrum-Table--sizeL",
+    ".spectrum-Table--sizeM",
     ".spectrum-Table--sizeS",
     ".spectrum-Table--sizeXL",
     ".spectrum-Table--spacious",
@@ -406,9 +407,11 @@
     "--spectrum-font-size-75",
     "--spectrum-gray-100",
     "--spectrum-gray-200",
+    "--spectrum-gray-25",
     "--spectrum-gray-300",
     "--spectrum-gray-50",
     "--spectrum-gray-700-rgb",
+    "--spectrum-gray-75",
     "--spectrum-gray-900-rgb",
     "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
@@ -429,9 +432,21 @@
     "--spectrum-thumbnail-size-500",
     "--spectrum-thumbnail-size-700",
     "--spectrum-thumbnail-size-800",
-    "--spectrum-transparent-white-100"
+    "--spectrum-transparent-white-100",
+    "--spectrum-transparent-white-25"
+  ],
+  "system-theme": [
+    "--system-table-border-color",
+    "--system-table-divider-color",
+    "--system-table-header-background-color",
+    "--system-table-icon-color-focus",
+    "--system-table-icon-color-focus-hover",
+    "--system-table-quiet-header-background-color",
+    "--system-table-quiet-row-background-color",
+    "--system-table-row-background-color",
+    "--system-table-section-header-background-color",
+    "--system-table-summary-row-background-color"
   ],
-  "system-theme": [],
   "passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"],
   "high-contrast": [
     "--highcontrast-table-border-color",
diff --git a/components/table/index.css b/components/table/index.css
index 978ef5b16e..830e1528ff 100644
--- a/components/table/index.css
+++ b/components/table/index.css
@@ -11,69 +11,105 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-Table {
-	/* Size and Spacing */
-	--spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium);
-	--spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium);
+@import "./themes/spectrum-two.css";
 
-	--spectrum-table-min-header-height: var(--spectrum-component-height-100);
-	--spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular);
-	--spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular);
-	--spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular);
+/********* HIGH CONTRAST *********/
+@media (forced-colors: active) {
+	.spectrum-Table {
+		--highcontrast-table-row-background-color: Canvas;
+		--highcontrast-table-row-text-color: CanvasText;
+		--highcontrast-table-divider-color: CanvasText;
+		--highcontrast-table-border-color: CanvasText;
+		--highcontrast-table-icon-color: CanvasText;
+		--highcontrast-table-icon-color-focus: Highlight;
+
+		--highcontrast-table-selected-row-background-color: Highlight;
+		--highcontrast-table-selected-row-text-color: HighlightText;
+
+		@supports (color: SelectedItem) {
+			--highcontrast-table-selected-row-background-color: SelectedItem;
+			--highcontrast-table-selected-row-text-color: SelectedItemText;
+		}
+
+		--highcontrast-table-selected-row-background-color-focus: Highlight;
+		--highcontrast-table-selected-row-text-color-focus: HighlightText;
+		--highcontrast-table-row-background-color-hover: Highlight;
+		--highcontrast-table-row-text-color-hover: HighlightText;
 
+		--highcontrast-table-section-header-text-color: Canvas;
+		--highcontrast-table-section-header-background-color: CanvasText;
+
+		--highcontrast-table-focus-indicator-color: Highlight;
+		--highcontrast-table-transition-duration: 0;
+	}
+
+	.spectrum-Table-cell {
+		/* Removes unstylable readability backplate. */
+		forced-color-adjust: none;
+	}
+
+	.spectrum-Table-row {
+		&:hover,
+		&:focus-visible,
+		&.is-focused {
+			.spectrum-Table-checkbox .spectrum-Checkbox-box::before {
+				outline: var(--highcontrast-table-row-text-color-hover) 1px solid;
+			}
+		}
+	}
+
+	.spectrum-Table-row.is-selected,
+	.spectrum-Table-row.is-drop-target,
+	.spectrum-Table-body.is-drop-target .spectrum-Table-row {
+		/* Ensure negative offset outline contrasts on top of SelectedItem background. */
+		--highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color);
+		--highcontrast-table-cell-focus-extra-offset: 1px;
+
+		.spectrum-Table-checkbox .spectrum-Checkbox-box::before {
+			outline: var(--highcontrast-table-selected-row-text-color) 1px solid;
+		}
+	}
+}
+
+.spectrum-Table {
 	--spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content);
 
 	--spectrum-table-border-radius: var(--spectrum-corner-radius-100);
 	--spectrum-table-border-width: var(--spectrum-table-border-divider-width);
 	--spectrum-table-outer-border-inline-width: var(--spectrum-table-border-divider-width);
 
-	--spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
-
 	--spectrum-table-default-vertical-align: top;
 	--spectrum-table-header-vertical-align: middle;
 
-	/* Typography */
 	--spectrum-table-header-font-weight: var(--spectrum-bold-font-weight);
 
 	--spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-table-row-font-weight: var(--spectrum-regular-font-weight);
 	--spectrum-table-row-font-style: var(--spectrum-default-font-style);
-	--spectrum-table-row-font-size: var(--spectrum-font-size-100);
 	--spectrum-table-row-line-height: var(--spectrum-line-height-100);
 
-	/* General Colors */
 	--spectrum-table-border-color: var(--spectrum-gray-300);
 	--spectrum-table-divider-color: var(--spectrum-gray-300);
-
 	--spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
 	--spectrum-table-header-text-color: var(--spectrum-body-color);
-
 	--spectrum-table-row-background-color: var(--spectrum-gray-50);
 	--spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default);
 
-	/* ----- *
-  @todo Refactor or remove these properties once the RGB stripped value is available. */
+	/* @todo Refactor or remove these properties once the RGB stripped value is available. */
 	--spectrum-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity));
 	--spectrum-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized));
 	--spectrum-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity));
-
 	--spectrum-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity));
 	--spectrum-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover));
 	--spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover));
 
-	/* ----- */
-
 	--spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
 	--spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
 	--spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down);
 	--spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-	--spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover);
+	--spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-key-focus);
 	--spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
 
-	/* Row Selection */
-	--spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium);
-	--spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular);
-
 	--spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color);
 
@@ -86,30 +122,19 @@
 	--spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-table-summary-row-background-color: var(--spectrum-gray-200);
 
-	--spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium);
-	--spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100);
-	--spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100);
-
 	--spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-table-section-header-background-color: var(--spectrum-gray-200);
 
-	/* Collapsible and Thumbnails */
+	/* Collapsible and thumbnails */
 	--spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300);
 	--spectrum-table-collapsible-disclosure-inline-spacing: 0px;
-	--spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100);
 	--spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100);
 
-	--spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
-	--spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular);
-	--spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
-
-	/* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341
-     and for modifying emphasized/non-emphasized background colors from the root element. */
 	--spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color)));
 	--spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized)));
 	--spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus)));
 
-	/* Passthrough for nested component(s) */
+	/* @passthrough */
 	--mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size));
 
 	&:dir(rtl) {
@@ -117,7 +142,38 @@
 	}
 }
 
-/********* T-SHIRT SIZES (Regular Density) *********/
+.spectrum-Table,
+.spectrum-Table--sizeM {
+	--spectrum-table-min-header-height: var(--spectrum-component-height-100);
+	--spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium);
+	--spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium);
+
+	--spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular);
+	--spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular);
+	--spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular);
+
+	--spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
+
+	/* Typography */
+	--spectrum-table-row-font-size: var(--spectrum-font-size-100);
+
+	/* Row Selection */
+	--spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium);
+	--spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular);
+
+	/* Summary Row and Section Header Row */
+	--spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium);
+	--spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100);
+	--spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100);
+
+	/* Collapsible and Thumbnails */
+	--spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100);
+
+	--spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular);
+	--spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
+	--spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
+}
+
 .spectrum-Table--sizeS {
 	/* Size and Spacing */
 	--spectrum-table-min-header-height: var(--spectrum-component-height-100);
@@ -339,69 +395,12 @@
 	--mod-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100));
 }
 
-/********* HIGH CONTRAST *********/
-@media (forced-colors: active) {
-	.spectrum-Table {
-		--highcontrast-table-row-background-color: Canvas;
-		--highcontrast-table-row-text-color: CanvasText;
-		--highcontrast-table-divider-color: CanvasText;
-		--highcontrast-table-border-color: CanvasText;
-		--highcontrast-table-icon-color: CanvasText;
-		--highcontrast-table-icon-color-focus: Highlight;
-
-		--highcontrast-table-selected-row-background-color: Highlight;
-		--highcontrast-table-selected-row-text-color: HighlightText;
-
-		@supports (color: SelectedItem) {
-			--highcontrast-table-selected-row-background-color: SelectedItem;
-			--highcontrast-table-selected-row-text-color: SelectedItemText;
-		}
-
-		--highcontrast-table-selected-row-background-color-focus: Highlight;
-		--highcontrast-table-selected-row-text-color-focus: HighlightText;
-		--highcontrast-table-row-background-color-hover: Highlight;
-		--highcontrast-table-row-text-color-hover: HighlightText;
-
-		--highcontrast-table-section-header-text-color: Canvas;
-		--highcontrast-table-section-header-background-color: CanvasText;
-
-		--highcontrast-table-focus-indicator-color: Highlight;
-		--highcontrast-table-transition-duration: 0;
-	}
-
-	.spectrum-Table-cell {
-		/* Removes unstylable readability backplate. */
-		forced-color-adjust: none;
-	}
-
-	.spectrum-Table-row {
-		&:hover,
-		&:focus-visible,
-		&.is-focused {
-			.spectrum-Table-checkbox .spectrum-Checkbox-box::before {
-				outline: var(--highcontrast-table-row-text-color-hover) 1px solid;
-			}
-		}
-	}
-
-	.spectrum-Table-row.is-selected,
-	.spectrum-Table-row.is-drop-target,
-	.spectrum-Table-body.is-drop-target .spectrum-Table-row {
-		/* Ensure negative offset outline contrasts on top of SelectedItem background. */
-		--highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color);
-		--highcontrast-table-cell-focus-extra-offset: 1px;
-
-		.spectrum-Table-checkbox .spectrum-Checkbox-box::before {
-			outline: var(--highcontrast-table-selected-row-text-color) 1px solid;
-		}
-	}
-}
-
 /********* REGULAR / DEFAULT *********/
 .spectrum-Table:not(.spectrum-Table-scroller),
 .spectrum-Table-main {
 	border-collapse: separate;
 	border-spacing: 0;
+	display: table;
 }
 
 .spectrum-Table-sortedIcon {
@@ -504,6 +503,7 @@
 	position: relative;
 	border: none;
 	border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+	display: table-row-group;
 
 	&.is-drop-target {
 		/* Make sure negative offset outline is not covered by borders. */
@@ -522,6 +522,22 @@
 /* Row divider lines */
 .spectrum-Table-cell {
 	border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
+
+	/* Cells within table body */
+	box-sizing: border-box;
+	font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size));
+	font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight));
+	line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height));
+	vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align));
+	color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)));
+	background-color: var(--spectrum-table-cell-background-color);
+
+	/* block-size functions as min-block-size when using display table-cell. */
+	block-size: var(--mod-table-min-row-height, var(--spectrum-table-min-row-height));
+
+	padding-block-start: calc(var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
+	padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text));
+	padding-inline: calc(var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)));
 }
 
 /* Outside border */
@@ -545,6 +561,12 @@
 
 /* Rounded corners */
 .spectrum-Table-row {
+	/* Rows within table body */
+	position: relative;
+	transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
+	cursor: var(--mod-table-cursor-row-default, pointer);
+	border-block-start: none;
+
 	&:first-child .spectrum-Table-cell:first-child {
 		border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
 	}
@@ -560,51 +582,6 @@
 	&:last-child .spectrum-Table-cell:last-child {
 		border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
 	}
-}
-
-/* Cells within table body */
-.spectrum-Table-cell {
-	box-sizing: border-box;
-	font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size));
-	font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight));
-	line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height));
-	vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align));
-	color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)));
-	background-color: var(--spectrum-table-cell-background-color);
-
-	/* block-size functions as min-block-size when using display table-cell. */
-	block-size: var(--mod-table-min-row-height, var(--spectrum-table-min-row-height));
-
-	padding-block-start: calc(var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
-	padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text));
-	padding-inline: calc(var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)));
-}
-
-/* Focus Indicator (Ring) */
-.spectrum-Table-cell,
-.spectrum-Table-headCell {
-	position: relative;
-
-	&:focus-visible,
-	&.is-focused {
-		outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
-		outline-style: solid;
-		outline-color: var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))));
-		outline-offset: calc((-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - var(--highcontrast-table-cell-focus-extra-offset, 0px));
-	}
-}
-
-/* Cells that display a column divider (vertical border). */
-.spectrum-Table-cell--divider {
-	border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
-}
-
-/* Rows within table body */
-.spectrum-Table-row {
-	position: relative;
-	transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
-	cursor: var(--mod-table-cursor-row-default, pointer);
-	border-block-start: none;
 
 	&:first-child {
 		/* Ensure that 'outline' will match the border-radius, when used on rows. */
@@ -638,14 +615,14 @@
 	&.is-selected {
 		--highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color);
 		--highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color);
-		--spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color);
+		--spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-cell-background-color));
 
 		&:hover,
 		&:focus-visible,
 		&.is-focused {
 			--highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color-focus);
 			--highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color-focus);
-			--spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color-focus);
+			--spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus));
 		}
 	}
 
@@ -671,6 +648,26 @@
 	}
 }
 
+/* Focus Indicator (Ring) */
+.spectrum-Table-cell,
+.spectrum-Table-headCell {
+	position: relative;
+	display: table-cell;
+
+	&:focus-visible,
+	&.is-focused {
+		outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
+		outline-style: solid;
+		outline-color: var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))));
+		outline-offset: calc((-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - var(--highcontrast-table-cell-focus-extra-offset, 0px));
+	}
+}
+
+/* Cells that display a column divider (vertical border). */
+.spectrum-Table-cell--divider {
+	border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
+}
+
 .spectrum-Table-row--summary {
 	--spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color)));
 
@@ -719,7 +716,7 @@
 	inline-size: var(--spectrum-checkbox-control-size-small);
 
 	/* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value
-     includes the inline start padding in the adjacent cell. */
+	includes the inline start padding in the adjacent cell. */
 	padding-inline-end: calc(var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)));
 
 	/* Block spacing must be moved to calculated margin on the checkbox element. */
@@ -727,6 +724,7 @@
 
 	.spectrum-Table-checkbox {
 		--mod-checkbox-spacing: 0px;
+
 		min-block-size: initial;
 	}
 
@@ -743,33 +741,19 @@
 
 /********* DIVS *********/
 /* Make sure markup that uses divs instead of <table> elements displays like a regular table. */
-.spectrum-Table:not(.spectrum-Table-scroller),
-.spectrum-Table-main {
-	display: table;
-}
-
 .spectrum-Table-head {
 	display: table-header-group;
 }
 
-.spectrum-Table-body {
-	display: table-row-group;
-}
-
 .spectrum-Table-row,
 .spectrum-Table-head [role="row"] {
 	display: table-row;
 }
 
-.spectrum-Table-cell,
-.spectrum-Table-headCell {
-	display: table-cell;
-}
-
 /********* SCROLLABLE *********/
 /* Wrapper that allows a scrollable body and sticky column header. */
 .spectrum-Table-scroller {
-	--spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100)));
+	--spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75)));
 
 	box-sizing: border-box;
 	display: inline-block;
@@ -780,15 +764,14 @@
 	border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
 	border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
 
-	&.spectrum-Table--quiet {
-		--mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100)));
-		border-block-start: none;
-	}
-
 	/* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus.
      --mod-table-current-header-height should be dynamically updated with JS to match the table header height. */
 	scroll-padding-top: var(--mod-table-current-header-height, calc((var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width))));
 
+	&.spectrum-Table--quiet {
+		border-block-start: none;
+	}
+
 	.spectrum-Table-head {
 		position: sticky;
 		inset-block-start: 0;
@@ -906,7 +889,7 @@
 	border: 0;
 	color: var(--spectrum-table-icon-color);
 
-	transform: var(--spectrum-logical-rotation);
+	transform: var(--spectrum-logical-rotation,);
 
 	&[aria-expanded="true"] {
 		transform: var(--spectrum-logical-rotation,) rotate(90deg);
diff --git a/components/table/metadata/mods.md b/components/table/metadata/mods.md
deleted file mode 100644
index fafb0b5749..0000000000
--- a/components/table/metadata/mods.md
+++ /dev/null
@@ -1,97 +0,0 @@
-| Modifiable custom properties                                     |
-| ---------------------------------------------------------------- |
-| `--mod-table-border-color`                                       |
-| `--mod-table-border-radius`                                      |
-| `--mod-table-border-radius--quiet`                               |
-| `--mod-table-border-width`                                       |
-| `--mod-table-cell-inline-space`                                  |
-| `--mod-table-checkbox-to-text`                                   |
-| `--mod-table-collapsible-disclosure-inline-spacing`              |
-| `--mod-table-collapsible-icon-animation-duration`                |
-| `--mod-table-current-header-height`                              |
-| `--mod-table-cursor-header-default`                              |
-| `--mod-table-cursor-header-sortable`                             |
-| `--mod-table-cursor-row-default`                                 |
-| `--mod-table-cursor-section-header`                              |
-| `--mod-table-default-vertical-align`                             |
-| `--mod-table-disclosure-icon-size`                               |
-| `--mod-table-divider-color`                                      |
-| `--mod-table-drop-zone-background-color`                         |
-| `--mod-table-drop-zone-outline-color`                            |
-| `--mod-table-edge-to-content`                                    |
-| `--mod-table-focus-indicator-color`                              |
-| `--mod-table-focus-indicator-thickness`                          |
-| `--mod-table-header-background-color`                            |
-| `--mod-table-header-background-color--quiet`                     |
-| `--mod-table-header-background-color-scrollable`                 |
-| `--mod-table-header-bottom-to-text`                              |
-| `--mod-table-header-checkbox-block-spacing`                      |
-| `--mod-table-header-font-family`                                 |
-| `--mod-table-header-font-size`                                   |
-| `--mod-table-header-font-weight`                                 |
-| `--mod-table-header-line-height`                                 |
-| `--mod-table-header-text-color`                                  |
-| `--mod-table-header-text-transform`                              |
-| `--mod-table-header-top-to-text`                                 |
-| `--mod-table-header-vertical-align`                              |
-| `--mod-table-icon-color-active`                                  |
-| `--mod-table-icon-color-default`                                 |
-| `--mod-table-icon-color-focus`                                   |
-| `--mod-table-icon-color-focus-hover`                             |
-| `--mod-table-icon-color-hover`                                   |
-| `--mod-table-icon-color-key-focus`                               |
-| `--mod-table-icon-to-text`                                       |
-| `--mod-table-min-header-height`                                  |
-| `--mod-table-min-row-height`                                     |
-| `--mod-table-min-row-height--compact`                            |
-| `--mod-table-min-row-height--spacious`                           |
-| `--mod-table-outer-border-inline-width`                          |
-| `--mod-table-outer-border-inline-width--quiet`                   |
-| `--mod-table-row-active-color`                                   |
-| `--mod-table-row-background-color`                               |
-| `--mod-table-row-background-color--quiet`                        |
-| `--mod-table-row-background-color-hover`                         |
-| `--mod-table-row-bottom-to-text`                                 |
-| `--mod-table-row-bottom-to-text--compact`                        |
-| `--mod-table-row-bottom-to-text--spacious`                       |
-| `--mod-table-row-checkbox-block-spacing`                         |
-| `--mod-table-row-checkbox-block-spacing--compact`                |
-| `--mod-table-row-checkbox-block-spacing--spacious`               |
-| `--mod-table-row-font-size`                                      |
-| `--mod-table-row-font-weight`                                    |
-| `--mod-table-row-line-height`                                    |
-| `--mod-table-row-text-color`                                     |
-| `--mod-table-row-top-to-text`                                    |
-| `--mod-table-row-top-to-text--compact`                           |
-| `--mod-table-row-top-to-text--spacious`                          |
-| `--mod-table-section-header-background-color`                    |
-| `--mod-table-section-header-block-end-spacing`                   |
-| `--mod-table-section-header-block-start-spacing`                 |
-| `--mod-table-section-header-font-family`                         |
-| `--mod-table-section-header-font-size`                           |
-| `--mod-table-section-header-font-style`                          |
-| `--mod-table-section-header-font-weight`                         |
-| `--mod-table-section-header-line-height`                         |
-| `--mod-table-section-header-min-height`                          |
-| `--mod-table-section-header-text-color`                          |
-| `--mod-table-selected-row-background-color`                      |
-| `--mod-table-selected-row-background-color-focus`                |
-| `--mod-table-selected-row-background-color-non-emphasized`       |
-| `--mod-table-selected-row-background-color-non-emphasized-focus` |
-| `--mod-table-sort-icon-inline-end-spacing`                       |
-| `--mod-table-sort-icon-inline-start-spacing`                     |
-| `--mod-table-summary-row-background-color`                       |
-| `--mod-table-summary-row-font-family`                            |
-| `--mod-table-summary-row-font-size`                              |
-| `--mod-table-summary-row-font-style`                             |
-| `--mod-table-summary-row-font-weight`                            |
-| `--mod-table-summary-row-line-height`                            |
-| `--mod-table-summary-row-text-color`                             |
-| `--mod-table-thumbnail-block-spacing`                            |
-| `--mod-table-thumbnail-block-spacing-compact`                    |
-| `--mod-table-thumbnail-block-spacing-spacious`                   |
-| `--mod-table-thumbnail-size`                                     |
-| `--mod-table-thumbnail-size-compact`                             |
-| `--mod-table-thumbnail-size-spacious`                            |
-| `--mod-table-thumbnail-to-text`                                  |
-| `--mod-table-transition-duration`                                |
diff --git a/components/table/package.json b/components/table/package.json
index 65e3acf3c1..04fb218519 100644
--- a/components/table/package.json
+++ b/components/table/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js
index 6612a875fd..834a90f463 100644
--- a/components/table/stories/table.stories.js
+++ b/components/table/stories/table.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { TableGroup } from "./table.test.js";
 import { Template } from "./template.js";
@@ -111,6 +111,10 @@ export default {
 		],
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=54024-574",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/table/stories/template.js b/components/table/stories/template.js
index 8487cca716..662a6e3206 100644
--- a/components/table/stories/template.js
+++ b/components/table/stories/template.js
@@ -9,6 +9,9 @@ import { when } from "lit/directives/when.js";
 import { html, literal } from "lit/static-html.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const TableRowItem = ({
 	rootClass = "spectrum-Table",
diff --git a/components/table/themes/express.css b/components/table/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/table/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/table/themes/spectrum-two.css b/components/table/themes/spectrum-two.css
new file mode 100644
index 0000000000..1c0a468407
--- /dev/null
+++ b/components/table/themes/spectrum-two.css
@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Table {
+		--spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
+		--spectrum-table-border-color: var(--spectrum-gray-200);
+		--spectrum-table-divider-color: var(--spectrum-gray-200);
+		--spectrum-table-row-background-color: var(--spectrum-gray-25);
+		--spectrum-table-summary-row-background-color: var(--spectrum-gray-100);
+		--spectrum-table-section-header-background-color: var(--spectrum-gray-100);
+		--spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+		--spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover);
+	}
+
+	.spectrum-Table--quiet {
+		--spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
+		--spectrum-table-row-background-color: var(--spectrum-transparent-white-25);
+	}
+}
diff --git a/components/table/themes/spectrum.css b/components/table/themes/spectrum.css
new file mode 100644
index 0000000000..a40d7fabde
--- /dev/null
+++ b/components/table/themes/spectrum.css
@@ -0,0 +1,34 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Table {
+		--spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
+		--spectrum-table-border-color: var(--spectrum-gray-300);
+		--spectrum-table-divider-color: var(--spectrum-gray-300);
+		--spectrum-table-row-background-color: var(--spectrum-gray-50);
+		--spectrum-table-summary-row-background-color: var(--spectrum-gray-200);
+		--spectrum-table-section-header-background-color: var(--spectrum-gray-200);
+		--spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+		--spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-down);
+	}
+
+	.spectrum-Table--quiet {
+		--spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
+		--spectrum-table-row-background-color: var(--spectrum-transparent-white-100);
+	}
+}
diff --git a/components/tabs/metadata/metadata.json b/components/tabs/dist/metadata.json
similarity index 98%
rename from components/tabs/metadata/metadata.json
rename to components/tabs/dist/metadata.json
index 673adc24cf..544295ef04 100644
--- a/components/tabs/metadata/metadata.json
+++ b/components/tabs/dist/metadata.json
@@ -135,7 +135,6 @@
     "--spectrum-accent-content-color-key-focus",
     "--spectrum-animation-duration-100",
     "--spectrum-animation-ease-in-out",
-    "--spectrum-bold-font-weight",
     "--spectrum-border-width-200",
     "--spectrum-corner-radius-100",
     "--spectrum-default-font-style",
@@ -145,7 +144,7 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
-    "--spectrum-gray-300",
+    "--spectrum-gray-200",
     "--spectrum-gray-500",
     "--spectrum-line-height-100",
     "--spectrum-neutral-subdued-content-color-default",
@@ -207,7 +206,10 @@
     "--spectrum-workflow-icon-size-50",
     "--spectrum-workflow-icon-size-75"
   ],
-  "system-theme": ["--system-tabs-font-weight"],
+  "system-theme": [
+    "--system-tabs-divider-background-color",
+    "--system-tabs-font-weight"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-tabs-color",
diff --git a/components/tabs/index.css b/components/tabs/index.css
index 6d72614377..6727243f38 100644
--- a/components/tabs/index.css
+++ b/components/tabs/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Tabs {
 	/* Default is Medium sizing */
@@ -46,7 +45,6 @@
 	--spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down);
 
 	--spectrum-tabs-list-background-direction: top;
-	--spectrum-tabs-divider-background-color: var(--spectrum-gray-300);
 	--spectrum-tabs-divider-size: var(--spectrum-border-width-200);
 	--spectrum-tabs-divider-border-radius: 1px;
 
diff --git a/components/tabs/metadata/mods.md b/components/tabs/metadata/mods.md
deleted file mode 100644
index cae5ab4188..0000000000
--- a/components/tabs/metadata/mods.md
+++ /dev/null
@@ -1,43 +0,0 @@
-| Modifiable custom properties                          |
-| ----------------------------------------------------- |
-| `--mod-tabs-animation-duration`                       |
-| `--mod-tabs-animation-ease`                           |
-| `--mod-tabs-bottom-to-text`                           |
-| `--mod-tabs-bottom-to-text-compact`                   |
-| `--mod-tabs-color`                                    |
-| `--mod-tabs-color-disabled`                           |
-| `--mod-tabs-color-hover`                              |
-| `--mod-tabs-color-hover-emphasized`                   |
-| `--mod-tabs-color-key-focus`                          |
-| `--mod-tabs-color-key-focus-emphasized`               |
-| `--mod-tabs-color-selected`                           |
-| `--mod-tabs-color-selected-emphasized`                |
-| `--mod-tabs-divider-background-color`                 |
-| `--mod-tabs-divider-border-radius`                    |
-| `--mod-tabs-divider-size`                             |
-| `--mod-tabs-focus-indicator-border-radius`            |
-| `--mod-tabs-focus-indicator-color`                    |
-| `--mod-tabs-focus-indicator-gap`                      |
-| `--mod-tabs-focus-indicator-width`                    |
-| `--mod-tabs-font-family`                              |
-| `--mod-tabs-font-size`                                |
-| `--mod-tabs-font-style`                               |
-| `--mod-tabs-font-weight`                              |
-| `--mod-tabs-icon-size`                                |
-| `--mod-tabs-icon-to-text`                             |
-| `--mod-tabs-item-height`                              |
-| `--mod-tabs-item-height-compact`                      |
-| `--mod-tabs-item-horizontal-spacing`                  |
-| `--mod-tabs-item-vertical-spacing`                    |
-| `--mod-tabs-line-height`                              |
-| `--mod-tabs-list-background-direction`                |
-| `--mod-tabs-list-background-direction-vertical`       |
-| `--mod-tabs-list-background-direction-vertical-right` |
-| `--mod-tabs-selection-indicator-color`                |
-| `--mod-tabs-selection-indicator-color-emphasized`     |
-| `--mod-tabs-start-to-edge`                            |
-| `--mod-tabs-start-to-item-quiet`                      |
-| `--mod-tabs-top-to-icon`                              |
-| `--mod-tabs-top-to-icon-compact`                      |
-| `--mod-tabs-top-to-text`                              |
-| `--mod-tabs-top-to-text-compact`                      |
diff --git a/components/tabs/package.json b/components/tabs/package.json
index 419ea0c9d6..1cf547c4a8 100644
--- a/components/tabs/package.json
+++ b/components/tabs/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js
index 38589d8e2f..1b26856e13 100644
--- a/components/tabs/stories/tabs.stories.js
+++ b/components/tabs/stories/tabs.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { TabsGroups } from "./tabs.test.js";
 import { CompactGroup, OverflowGroup, QuietGroup, Template, VerticalGroup } from "./template.js";
@@ -113,6 +113,10 @@ export default {
 		actions: {
 			handles: [".spectrum-Tabs-item"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=48979-4695",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js
index 387683f1ae..716f45ea2e 100644
--- a/components/tabs/stories/template.js
+++ b/components/tabs/stories/template.js
@@ -10,6 +10,9 @@ import { when } from "lit/directives/when.js";
 import { html, literal } from "lit/static-html.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Tabs",
diff --git a/components/tabs/themes/express.css b/components/tabs/themes/express.css
index ce263635df..83b105f4ac 100644
--- a/components/tabs/themes/express.css
+++ b/components/tabs/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Tabs {
 		--spectrum-tabs-font-weight: var(--spectrum-bold-font-weight);
 	}
diff --git a/components/tabs/themes/spectrum-two.css b/components/tabs/themes/spectrum-two.css
new file mode 100644
index 0000000000..71d71c3c71
--- /dev/null
+++ b/components/tabs/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Tabs {
+		--spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
+		--spectrum-tabs-divider-background-color: var(--spectrum-gray-200);
+	}
+}
diff --git a/components/tabs/themes/spectrum.css b/components/tabs/themes/spectrum.css
index c09d1c7718..97cb90cac5 100644
--- a/components/tabs/themes/spectrum.css
+++ b/components/tabs/themes/spectrum.css
@@ -11,8 +11,13 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-Tabs {
 		--spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
+		--spectrum-tabs-divider-background-color: var(--spectrum-gray-300);
 	}
 }
diff --git a/components/tag/metadata/metadata.json b/components/tag/dist/metadata.json
similarity index 94%
rename from components/tag/metadata/metadata.json
rename to components/tag/dist/metadata.json
index 806aa2d801..10a87e4aa2 100644
--- a/components/tag/metadata/metadata.json
+++ b/components/tag/dist/metadata.json
@@ -226,12 +226,6 @@
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-75",
-    "--spectrum-component-pill-edge-to-text-100",
-    "--spectrum-component-pill-edge-to-text-200",
-    "--spectrum-component-pill-edge-to-text-75",
-    "--spectrum-component-pill-edge-to-visual-100",
-    "--spectrum-component-pill-edge-to-visual-200",
-    "--spectrum-component-pill-edge-to-visual-75",
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-75",
@@ -240,7 +234,6 @@
     "--spectrum-component-top-to-workflow-icon-75",
     "--spectrum-corner-radius-100",
     "--spectrum-disabled-background-color",
-    "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
@@ -248,13 +241,10 @@
     "--spectrum-font-size-100",
     "--spectrum-font-size-200",
     "--spectrum-font-size-75",
-    "--spectrum-gray-200",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
+    "--spectrum-gray-100",
+    "--spectrum-gray-25",
     "--spectrum-gray-50",
-    "--spectrum-gray-500",
     "--spectrum-gray-700",
-    "--spectrum-gray-75",
     "--spectrum-gray-800",
     "--spectrum-gray-900",
     "--spectrum-line-height-100",
@@ -269,18 +259,10 @@
     "--spectrum-negative-content-color-down",
     "--spectrum-negative-content-color-hover",
     "--spectrum-negative-content-color-key-focus",
-    "--spectrum-neutral-background-color-default",
-    "--spectrum-neutral-background-color-down",
-    "--spectrum-neutral-background-color-hover",
-    "--spectrum-neutral-background-color-key-focus",
     "--spectrum-neutral-background-color-selected-default",
     "--spectrum-neutral-background-color-selected-down",
     "--spectrum-neutral-background-color-selected-hover",
     "--spectrum-neutral-background-color-selected-key-focus",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
     "--spectrum-neutral-subdued-background-color-default",
     "--spectrum-neutral-subdued-background-color-down",
     "--spectrum-neutral-subdued-background-color-hover",
@@ -317,6 +299,7 @@
     "--system-tag-content-color-active",
     "--system-tag-content-color-focus",
     "--system-tag-content-color-hover",
+    "--system-tag-content-color-selected",
     "--system-tag-size-large-clear-button-spacing-inline-end",
     "--system-tag-size-large-corner-radius",
     "--system-tag-size-large-label-spacing-inline-end",
diff --git a/components/tag/index.css b/components/tag/index.css
index ed50a2e5c7..9385b432e6 100644
--- a/components/tag/index.css
+++ b/components/tag/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Tag {
 	/* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */
@@ -30,8 +29,6 @@
 	--spectrum-tag-label-line-height: var(--spectrum-line-height-100);
 	--spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight);
 
-	/* selected */
-	--spectrum-tag-content-color-selected: var(--spectrum-gray-50);
 	--spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
 	--spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
 	--spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down);
@@ -77,33 +74,32 @@
 
 	/* disabled variant content */
 	--spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color);
+}
 
-	/* ↧↧↧ Fallback defaults in case of no t-shirt size - set to Medium styles ↧↧↧ */
-	/* icon spacing fallback if no t-shirt size */
-	--spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
+.spectrum-Tag,
+.spectrum-Tag--sizeM {
+	--spectrum-tag-height: var(--spectrum-component-height-100);
+	--spectrum-tag-font-size: var(--spectrum-font-size-100);
 	--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
+
+	--spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100);
+	--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
+
 	--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
 	--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
+	--spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
 
-	/* avatar spacing fallback if no t-shirt size */
-	--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium);
+	--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */
 	--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
 	--spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100);
 
-	/* label spacing fallback if no t-shirt size */
 	--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
 
-	/* clear button inline spacing fallback if no t-shirt size */
-	--spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100);
-
-	/* tag defaults if no t-shirt size */
-	--spectrum-tag-height: var(--spectrum-component-height-100);
-
-	/* text defaults if no t-shirt size */
-	--spectrum-tag-font-size: var(--spectrum-font-size-100);
-
-	/* clear button spacing if no t-shirt size */
-	--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
+	/* tokens based on theme and t-shirt size */
+	--spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius);
+	--spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start);
+	--spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end);
+	--spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end);
 }
 
 /* t-shirt sizes */
@@ -132,31 +128,6 @@
 	--spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end);
 }
 
-.spectrum-Tag--sizeM {
-	--spectrum-tag-height: var(--spectrum-component-height-100);
-	--spectrum-tag-font-size: var(--spectrum-font-size-100);
-	--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
-
-	--spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100);
-	--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
-
-	--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
-	--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
-	--spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
-
-	--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */
-	--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
-	--spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100);
-
-	--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
-
-	/* tokens based on theme and t-shirt size */
-	--spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius);
-	--spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start);
-	--spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end);
-	--spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end);
-}
-
 .spectrum-Tag--sizeL {
 	--spectrum-tag-height: var(--spectrum-component-height-200);
 	--spectrum-tag-font-size: var(--spectrum-font-size-200);
diff --git a/components/tag/metadata/mods.md b/components/tag/metadata/mods.md
deleted file mode 100644
index bdd95322d5..0000000000
--- a/components/tag/metadata/mods.md
+++ /dev/null
@@ -1,75 +0,0 @@
-| Modifiable custom properties                         |
-| ---------------------------------------------------- |
-| `--mod-tag-animation-duration`                       |
-| `--mod-tag-avatar-spacing-block-end`                 |
-| `--mod-tag-avatar-spacing-block-start`               |
-| `--mod-tag-avatar-spacing-inline-end`                |
-| `--mod-tag-background-color`                         |
-| `--mod-tag-background-color-active`                  |
-| `--mod-tag-background-color-disabled`                |
-| `--mod-tag-background-color-emphasized`              |
-| `--mod-tag-background-color-emphasized-active`       |
-| `--mod-tag-background-color-emphasized-focus`        |
-| `--mod-tag-background-color-emphasized-hover`        |
-| `--mod-tag-background-color-focus`                   |
-| `--mod-tag-background-color-hover`                   |
-| `--mod-tag-background-color-invalid-selected`        |
-| `--mod-tag-background-color-invalid-selected-active` |
-| `--mod-tag-background-color-invalid-selected-focus`  |
-| `--mod-tag-background-color-invalid-selected-hover`  |
-| `--mod-tag-background-color-selected`                |
-| `--mod-tag-background-color-selected-active`         |
-| `--mod-tag-background-color-selected-focus`          |
-| `--mod-tag-background-color-selected-hover`          |
-| `--mod-tag-border-color`                             |
-| `--mod-tag-border-color-active`                      |
-| `--mod-tag-border-color-disabled`                    |
-| `--mod-tag-border-color-emphasized`                  |
-| `--mod-tag-border-color-emphasized-active`           |
-| `--mod-tag-border-color-emphasized-focus`            |
-| `--mod-tag-border-color-emphasized-hover`            |
-| `--mod-tag-border-color-focus`                       |
-| `--mod-tag-border-color-hover`                       |
-| `--mod-tag-border-color-invalid`                     |
-| `--mod-tag-border-color-invalid-active`              |
-| `--mod-tag-border-color-invalid-focus`               |
-| `--mod-tag-border-color-invalid-hover`               |
-| `--mod-tag-border-color-invalid-selected`            |
-| `--mod-tag-border-color-invalid-selected-active`     |
-| `--mod-tag-border-color-invalid-selected-focus`      |
-| `--mod-tag-border-color-invalid-selected-hover`      |
-| `--mod-tag-border-color-selected`                    |
-| `--mod-tag-border-color-selected-active`             |
-| `--mod-tag-border-color-selected-focus`              |
-| `--mod-tag-border-color-selected-hover`              |
-| `--mod-tag-border-width`                             |
-| `--mod-tag-clear-button-spacing-block`               |
-| `--mod-tag-clear-button-spacing-inline-end`          |
-| `--mod-tag-clear-button-spacing-inline-start`        |
-| `--mod-tag-content-color`                            |
-| `--mod-tag-content-color-active`                     |
-| `--mod-tag-content-color-disabled`                   |
-| `--mod-tag-content-color-emphasized`                 |
-| `--mod-tag-content-color-focus`                      |
-| `--mod-tag-content-color-hover`                      |
-| `--mod-tag-content-color-invalid`                    |
-| `--mod-tag-content-color-invalid-active`             |
-| `--mod-tag-content-color-invalid-focus`              |
-| `--mod-tag-content-color-invalid-hover`              |
-| `--mod-tag-content-color-invalid-selected`           |
-| `--mod-tag-content-color-selected`                   |
-| `--mod-tag-corner-radius`                            |
-| `--mod-tag-focus-ring-color`                         |
-| `--mod-tag-focus-ring-gap`                           |
-| `--mod-tag-focus-ring-thickness`                     |
-| `--mod-tag-font-size`                                |
-| `--mod-tag-height`                                   |
-| `--mod-tag-icon-size`                                |
-| `--mod-tag-icon-spacing-block-end`                   |
-| `--mod-tag-icon-spacing-block-start`                 |
-| `--mod-tag-icon-spacing-inline-end`                  |
-| `--mod-tag-label-font-weight`                        |
-| `--mod-tag-label-line-height`                        |
-| `--mod-tag-label-spacing-block`                      |
-| `--mod-tag-label-spacing-inline-end`                 |
-| `--mod-tag-spacing-inline-start`                     |
diff --git a/components/tag/package.json b/components/tag/package.json
index 671e421948..0f1f475b92 100644
--- a/components/tag/package.json
+++ b/components/tag/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js
index 9192961cbf..6061c450e7 100644
--- a/components/tag/stories/tag.stories.js
+++ b/components/tag/stories/tag.stories.js
@@ -2,7 +2,7 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isEmphasized, isInvalid, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { TagGroups } from "./tag.test.js";
 import { SelectedTemplate, TagsDefaultOptions } from "./template.js";
@@ -94,6 +94,10 @@ export default {
 		actions: {
 			handles: [],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=715-2687",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js
index ee4b244dd4..90c72435ba 100644
--- a/components/tag/stories/template.js
+++ b/components/tag/stories/template.js
@@ -9,6 +9,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Tag",
diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css
index be374cf651..7c2c2e6730 100644
--- a/components/tag/themes/express.css
+++ b/components/tag/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Tag {
 		/* border */
 		--spectrum-tag-background-color: transparent;
diff --git a/components/tag/themes/spectrum-two.css b/components/tag/themes/spectrum-two.css
new file mode 100644
index 0000000000..f9c51730f4
--- /dev/null
+++ b/components/tag/themes/spectrum-two.css
@@ -0,0 +1,56 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Tag {
+		--spectrum-tag-background-color: var(--spectrum-gray-50);
+		--spectrum-tag-background-color-hover: var(--spectrum-gray-50);
+		--spectrum-tag-background-color-active: var(--spectrum-gray-100);
+		--spectrum-tag-background-color-focus: var(--spectrum-gray-50);
+
+		--spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
+		--spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
+		--spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
+
+		--spectrum-tag-border-color: var(--spectrum-gray-700);
+		--spectrum-tag-border-color-hover: var(--spectrum-gray-800);
+		--spectrum-tag-border-color-active: var(--spectrum-gray-900);
+		--spectrum-tag-border-color-focus: var(--spectrum-gray-800);
+
+		--spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
+		--spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+		--spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
+		--spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+		--spectrum-tag-content-color-selected: var(--spectrum-gray-25);
+
+		--spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
+		--spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
+		--spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
+		--spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
+
+		/* disabled variant */
+		--spectrum-tag-border-color-disabled: transparent;
+		--spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
+
+		/* tokens based on theme and t-shirt size */
+		--spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
+		--spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
+		--spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
+		--spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
+		--spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
+		--spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
+		--spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
+		--spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
+		--spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
+	}
+}
diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css
index 27c05be7bd..171968e1f5 100644
--- a/components/tag/themes/spectrum.css
+++ b/components/tag/themes/spectrum.css
@@ -11,50 +11,17 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-Tag {
-		/* border */
-		--spectrum-tag-border-color: var(--spectrum-gray-700);
-		--spectrum-tag-border-color-hover: var(--spectrum-gray-800);
-		--spectrum-tag-border-color-active: var(--spectrum-gray-900);
-		--spectrum-tag-border-color-focus: var(--spectrum-gray-800);
+/* @combine .spectrum.spectrum--legacy */
 
-		/* corner border radius */
-		--spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
-		--spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
-		--spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
+@import "./spectrum-two.css";
 
-		/* background */
+@container style(--system: legacy) {
+	.spectrum-Tag {
 		--spectrum-tag-background-color: var(--spectrum-gray-75);
 		--spectrum-tag-background-color-hover: var(--spectrum-gray-75);
 		--spectrum-tag-background-color-active: var(--spectrum-gray-200);
 		--spectrum-tag-background-color-focus: var(--spectrum-gray-75);
 
-		/* content color */
-		--spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
-		--spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
-		--spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
-		--spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-
-		/* selected variant */
-		--spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
-		--spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
-		--spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
-		--spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-
-		/* disabled variant */
-		--spectrum-tag-border-color-disabled: transparent;
-		--spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
-
-		/* tokens based on theme and t-shirt size */
-		--spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
-		--spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
-		--spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
-		--spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
-		--spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
-		--spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
-		--spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
-		--spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
-		--spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
+		--spectrum-tag-content-color-selected: var(--spectrum-gray-50);
 	}
 }
diff --git a/components/taggroup/metadata/metadata.json b/components/taggroup/dist/metadata.json
similarity index 100%
rename from components/taggroup/metadata/metadata.json
rename to components/taggroup/dist/metadata.json
diff --git a/components/taggroup/index.css b/components/taggroup/index.css
index 4b022b0e1c..e3b323bb91 100644
--- a/components/taggroup/index.css
+++ b/components/taggroup/index.css
@@ -14,9 +14,7 @@
 .spectrum-TagGroup {
 	--spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75);
 	--spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75);
-}
 
-.spectrum-TagGroup {
 	display: inline-flex;
 	flex-wrap: wrap;
 	margin: 0;
diff --git a/components/taggroup/metadata/mods.md b/components/taggroup/metadata/mods.md
deleted file mode 100644
index 59ebf6b234..0000000000
--- a/components/taggroup/metadata/mods.md
+++ /dev/null
@@ -1,4 +0,0 @@
-| Modifiable custom properties         |
-| ------------------------------------ |
-| `--mod-tag-group-item-margin-block`  |
-| `--mod-tag-group-item-margin-inline` |
diff --git a/components/taggroup/package.json b/components/taggroup/package.json
index 382eeae08f..5a5e2235dd 100644
--- a/components/taggroup/package.json
+++ b/components/taggroup/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js
index 9b78a490d9..66ef23e885 100644
--- a/components/taggroup/stories/taggroup.stories.js
+++ b/components/taggroup/stories/taggroup.stories.js
@@ -1,6 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { default as TagStories } from "@spectrum-css/tag/stories/tag.stories.js";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { TagGroups } from "./taggroup.test.js";
 import { Template } from "./template.js";
@@ -55,6 +55,10 @@ export default {
 				...(TagStories.parameters.actions.handles ?? [])
 			],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=45924-645",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/taggroup/stories/template.js b/components/taggroup/stories/template.js
index 20035de5cd..34bf5d50f7 100644
--- a/components/taggroup/stories/template.js
+++ b/components/taggroup/stories/template.js
@@ -15,22 +15,24 @@ export const Template = ({
 	customStyles = {},
 	size = "m",
 	...args
-} = {}, context = {}) => html`
-	<div
-		class=${classMap({
-			[rootClass]: true,
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-		style=${styleMap(customStyles)}
-		role="list"
-		aria-label=${ifDefined(ariaLabel)}
-	>
-		${items.map((i) => Tag({
-			...i,
-			...args,
-			size,
-			hasClearButton: isRemovable,
-			customClasses: [`${rootClass}-item`],
-		}, context))}
-	</div>
-`;
+} = {}, context = {}) => {
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			style=${styleMap(customStyles)}
+			role="list"
+			aria-label=${ifDefined(ariaLabel)}
+		>
+			${items.map((i) => Tag({
+				...i,
+				...args,
+				size,
+				hasClearButton: isRemovable,
+				customClasses: [`${rootClass}-item`],
+			}, context))}
+		</div>
+	`;
+};
diff --git a/components/textfield/metadata/metadata.json b/components/textfield/dist/metadata.json
similarity index 96%
rename from components/textfield/metadata/metadata.json
rename to components/textfield/dist/metadata.json
index e181cd1f5c..f60b3e0319 100644
--- a/components/textfield/metadata/metadata.json
+++ b/components/textfield/dist/metadata.json
@@ -1,7 +1,6 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".is-disabled .spectrum-FieldLabel",
     ".is-focused .spectrum-Textfield-input",
     ".is-focused .spectrum-Textfield-input::placeholder",
     ".is-focused .spectrum-Textfield-input:hover",
@@ -38,8 +37,12 @@
     ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder",
     ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input",
     ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder",
+    ".spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input",
     ".spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon",
+    ".spectrum-Textfield--quiet.is-keyboardFocused:after",
+    ".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input",
     ".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon",
+    ".spectrum-Textfield--quiet:after",
     ".spectrum-Textfield--sideLabel",
     ".spectrum-Textfield--sideLabel .spectrum-FieldLabel",
     ".spectrum-Textfield--sideLabel .spectrum-HelpText",
@@ -48,7 +51,6 @@
     ".spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield--sideLabel:after",
     ".spectrum-Textfield--sizeL",
-    ".spectrum-Textfield--sizeM",
     ".spectrum-Textfield--sizeS",
     ".spectrum-Textfield--sizeXL",
     ".spectrum-Textfield-characterCount",
@@ -71,6 +73,7 @@
     ".spectrum-Textfield-input[type=\"number\"]",
     ".spectrum-Textfield-input[type=\"number\"]::-webkit-inner-spin-button",
     ".spectrum-Textfield-input[type=\"number\"]::-webkit-outer-spin-button",
+    ".spectrum-Textfield.is-disabled .spectrum-FieldLabel",
     ".spectrum-Textfield.is-disabled .spectrum-Textfield-input",
     ".spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder",
     ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon",
@@ -83,10 +86,7 @@
     ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input",
     ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder",
     ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input",
-    ".spectrum-Textfield.spectrum-Textfield--quiet.is-keyboardFocused:after",
-    ".spectrum-Textfield.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input",
-    ".spectrum-Textfield.spectrum-Textfield--quiet:after",
+    ".spectrum-Textfield.spectrum-Textfield--quiet",
     ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield:hover .spectrum-Textfield-input",
     ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder"
@@ -228,7 +228,6 @@
   "global": [
     "--spectrum-animation-duration-100",
     "--spectrum-border-width-100",
-    "--spectrum-border-width-200",
     "--spectrum-character-count-to-field-quiet-extra-large",
     "--spectrum-character-count-to-field-quiet-large",
     "--spectrum-character-count-to-field-quiet-medium",
@@ -249,8 +248,6 @@
     "--spectrum-component-height-75",
     "--spectrum-component-top-to-text-100",
     "--spectrum-corner-radius-100",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
     "--spectrum-field-edge-to-alert-icon-extra-large",
     "--spectrum-field-edge-to-alert-icon-large",
@@ -292,8 +289,8 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
-    "--spectrum-gray-400",
-    "--spectrum-gray-50",
+    "--spectrum-gray-25",
+    "--spectrum-gray-300",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-800",
@@ -332,15 +329,20 @@
     "--spectrum-workflow-icon-size-75"
   ],
   "system-theme": [
+    "--system-textfield-background-color",
+    "--system-textfield-background-color-disabled",
     "--system-textfield-border-color",
+    "--system-textfield-border-color-disabled",
     "--system-textfield-border-color-focus",
     "--system-textfield-border-color-focus-hover",
     "--system-textfield-border-color-hover",
     "--system-textfield-border-color-keyboard-focus",
-    "--system-textfield-border-width"
+    "--system-textfield-border-width",
+    "--system-textfield-quiet-border-color-disabled"
   ],
   "passthroughs": [],
   "high-contrast": [
+    "--highcontrast-textfield-border-color",
     "--highcontrast-textfield-border-color-focus",
     "--highcontrast-textfield-border-color-hover",
     "--highcontrast-textfield-border-color-invalid-default",
diff --git a/components/textfield/index.css b/components/textfield/index.css
index 6261f41cad..87ab606476 100644
--- a/components/textfield/index.css
+++ b/components/textfield/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Textfield {
 	/* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */
@@ -24,11 +23,7 @@
 	--spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier);
 	--spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100);
 
-	/* default height */
-	--spectrum-textfield-height: var(--spectrum-component-height-100);
-
 	/* default spacing */
-	--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100);
 	--spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet);
 	--spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);
 	--spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100);
@@ -36,49 +31,30 @@
 
 	/* default label spacing */
 	--spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component);
-	--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium);
-	--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100);
 
 	/* default help text spacing */
 	--spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component);
 
-	/* default icon size */
-	--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100);
-	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
-
 	/* default icon spacing - invalid */
-	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium);
-	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
 	--spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet);
-	--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
 
 	/* default icon spacing - valid */
-	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium);
-	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
 	--spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet);
-	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium);
 
 	/* font styles */
 	--spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-textfield-font-weight: var(--spectrum-regular-font-weight);
-	--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
 
 	/* character count */
 	--spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight);
-	--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
 	--spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200);
-	--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
 	--spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field);
-	--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium);
 
 	/* focus indicator */
 	--spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
 	--spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
 
-	/*** Colors ***/
-	--spectrum-textfield-background-color: var(--spectrum-gray-50);
-
 	/* Text Colors */
 	--spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default);
 	--spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover);
@@ -90,8 +66,6 @@
 	--spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default);
 
 	/* Disabled Colors */
-	--spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
-	--spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color);
 	--spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color);
 
 	/* Invalid Colors */
@@ -114,6 +88,27 @@
 	/* Text Area / Multiline */
 	--spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width);
 	--spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height);
+
+	/* Default sizing values: Medium */
+	--spectrum-textfield-height: var(--spectrum-component-height-100);
+	--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium);
+	--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
+	--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
+	--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100);
+	--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100);
+	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
+	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
+	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
+	--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
+	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium);
+	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium);
+	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium);
+	--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
+	--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
+	--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium);
+	--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium);
+
+	/* Text Area / Multiline size medium */
 	--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100);
 }
 
@@ -141,29 +136,6 @@
 	--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75);
 }
 
-.spectrum-Textfield--sizeM {
-	--spectrum-textfield-height: var(--spectrum-component-height-100);
-	--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium);
-	--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
-	--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
-	--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100);
-	--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100);
-	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
-	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
-	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
-	--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
-	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium);
-	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium);
-	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium);
-	--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
-	--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
-	--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium);
-	--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium);
-
-	/* Text Area / Multiline size medium */
-	--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100);
-}
-
 .spectrum-Textfield--sizeL {
 	--spectrum-textfield-height: var(--spectrum-component-height-200);
 	--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large);
@@ -231,38 +203,6 @@
 	margin: 0;
 }
 
-.spectrum-Textfield.spectrum-Textfield--quiet {
-	&::after {
-		content: "";
-		pointer-events: none;
-		position: absolute;
-		inset-block-end: calc(-1 * (var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width))));
-		inset-inline-start: 0;
-		inline-size: 100%;
-		block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width));
-	}
-
-	&.is-keyboardFocused {
-		&::after {
-			background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
-		}
-	}
-
-	/*** Quiet Input Invalid ⚠️ ***/
-	&.is-invalid {
-		.spectrum-Textfield-input {
-			padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)));
-		}
-	}
-
-	/*** Quiet Input Valid ✅ ***/
-	&.is-valid {
-		.spectrum-Textfield-input {
-			padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)));
-		}
-	}
-}
-
 /********* Child Element - Validation Icons - ⚠️ ✅ *********/
 .spectrum-Textfield-validationIcon {
 	/* specify validation class or web components will apply this to all icons */
@@ -330,18 +270,16 @@
 		margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet));
 	}
 
-	.is-disabled & {
+	.spectrum-Textfield.is-disabled & {
 		color: var(--spectrum-textfield-text-color-disabled);
 	}
 }
 
 /********* Child Component - Help Text *********/
-.spectrum-HelpText {
-	.spectrum-Textfield & {
-		margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block));
-		grid-row: 3;
-		grid-column: 1 / span 2;
-	}
+.spectrum-Textfield .spectrum-HelpText {
+	margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block));
+	grid-row: 3;
+	grid-column: 1 / span 2;
 }
 
 /********* Child Element - Character Count *********/
@@ -381,7 +319,9 @@
 	vertical-align: top; /* used to align them correctly in forms. */
 	outline: none;
 	background-color: var(--mod-textfield-background-color, var(--spectrum-textfield-background-color));
-	border: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) solid var(--mod-textfield-border-color, var(--spectrum-textfield-border-color));
+	border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width));
+	border-style: solid;
+	border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color)));
 	border-radius: var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius));
 	transition: border-color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out;
 
@@ -526,7 +466,7 @@
 	.spectrum-Textfield.is-disabled:hover &,
 	&:disabled {
 		background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled));
-		border-color: transparent;
+		border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
 		color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
 
 		/* Disable the resize functionality when disabled */
@@ -647,20 +587,45 @@
 		}
 	}
 
-	&.spectrum-Textfield--quiet {
-		.spectrum-Textfield-input {
-			min-block-size: var(--mod-text-area-min-block-size-quiet, var(--spectrum-text-area-min-block-size-quiet));
+	&.spectrum-Textfield--quiet .spectrum-Textfield-input {
+		min-block-size: var(--mod-text-area-min-block-size-quiet, var(--spectrum-text-area-min-block-size-quiet));
 
-			/* Treat all quiet inputs and text areas the same */
-			resize: none;
-			overflow-y: hidden;
-		}
+		/* Treat all quiet inputs and text areas the same */
+		resize: none;
+		overflow-y: hidden;
+	}
+}
+
+.spectrum-Textfield--quiet {
+	&::after {
+		content: "";
+		pointer-events: none;
+		position: absolute;
+		inset-block-end: calc(-1 * (var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width))));
+		inset-inline-start: 0;
+		inline-size: 100%;
+		block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width));
+	}
+
+	&.is-keyboardFocused::after {
+		background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
+	}
+
+	/*** Quiet Input Invalid ⚠️ ***/
+	&.is-invalid .spectrum-Textfield-input {
+		padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)));
+	}
+
+	/*** Quiet Input Valid ✅ ***/
+	&.is-valid .spectrum-Textfield-input {
+		padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)));
 	}
 }
 
 /********* WHCM *********/
 @media (forced-colors: active) {
 	.spectrum-Textfield {
+		--highcontrast-textfield-border-color: CanvasText;
 		--highcontrast-textfield-border-color-hover: Highlight;
 		--highcontrast-textfield-border-color-focus: Highlight;
 		--highcontrast-textfield-border-color-keyboard-focus: CanvasText;
diff --git a/components/textfield/metadata/mods.md b/components/textfield/metadata/mods.md
deleted file mode 100644
index 246f118f70..0000000000
--- a/components/textfield/metadata/mods.md
+++ /dev/null
@@ -1,68 +0,0 @@
-| Modifiable custom properties                            |
-| ------------------------------------------------------- |
-| `--mod-texfield-animation-duration`                     |
-| `--mod-text-area-min-block-size`                        |
-| `--mod-text-area-min-block-size-quiet`                  |
-| `--mod-text-area-min-inline-size`                       |
-| `--mod-textfield-background-color`                      |
-| `--mod-textfield-background-color-disabled`             |
-| `--mod-textfield-border-color`                          |
-| `--mod-textfield-border-color-disabled`                 |
-| `--mod-textfield-border-color-focus`                    |
-| `--mod-textfield-border-color-focus-hover`              |
-| `--mod-textfield-border-color-hover`                    |
-| `--mod-textfield-border-color-invalid-default`          |
-| `--mod-textfield-border-color-invalid-focus`            |
-| `--mod-textfield-border-color-invalid-focus-hover`      |
-| `--mod-textfield-border-color-invalid-hover`            |
-| `--mod-textfield-border-color-invalid-keyboard-focus`   |
-| `--mod-textfield-border-color-keyboard-focus`           |
-| `--mod-textfield-border-width`                          |
-| `--mod-textfield-character-count-font-family`           |
-| `--mod-textfield-character-count-font-size`             |
-| `--mod-textfield-character-count-font-weight`           |
-| `--mod-textfield-character-count-spacing-block`         |
-| `--mod-textfield-character-count-spacing-block-quiet`   |
-| `--mod-textfield-character-count-spacing-block-side`    |
-| `--mod-textfield-character-count-spacing-inline`        |
-| `--mod-textfield-character-count-spacing-inline-side`   |
-| `--mod-textfield-corner-radius`                         |
-| `--mod-textfield-focus-indicator-color`                 |
-| `--mod-textfield-focus-indicator-gap`                   |
-| `--mod-textfield-focus-indicator-width`                 |
-| `--mod-textfield-font-family`                           |
-| `--mod-textfield-font-weight`                           |
-| `--mod-textfield-height`                                |
-| `--mod-textfield-helptext-spacing-block`                |
-| `--mod-textfield-icon-color-invalid`                    |
-| `--mod-textfield-icon-color-valid`                      |
-| `--mod-textfield-icon-size-invalid`                     |
-| `--mod-textfield-icon-size-valid`                       |
-| `--mod-textfield-icon-spacing-block-invalid`            |
-| `--mod-textfield-icon-spacing-block-valid`              |
-| `--mod-textfield-icon-spacing-inline-end-invalid`       |
-| `--mod-textfield-icon-spacing-inline-end-quiet-invalid` |
-| `--mod-textfield-icon-spacing-inline-end-quiet-valid`   |
-| `--mod-textfield-icon-spacing-inline-end-valid`         |
-| `--mod-textfield-icon-spacing-inline-start-invalid`     |
-| `--mod-textfield-icon-spacing-inline-start-valid`       |
-| `--mod-textfield-label-spacing-block`                   |
-| `--mod-textfield-label-spacing-block-quiet`             |
-| `--mod-textfield-label-spacing-inline-side-label`       |
-| `--mod-textfield-min-width`                             |
-| `--mod-textfield-placeholder-font-size`                 |
-| `--mod-textfield-spacing-block-end`                     |
-| `--mod-textfield-spacing-block-quiet`                   |
-| `--mod-textfield-spacing-block-start`                   |
-| `--mod-textfield-spacing-inline`                        |
-| `--mod-textfield-spacing-inline-quiet`                  |
-| `--mod-textfield-text-color-default`                    |
-| `--mod-textfield-text-color-disabled`                   |
-| `--mod-textfield-text-color-focus`                      |
-| `--mod-textfield-text-color-focus-hover`                |
-| `--mod-textfield-text-color-hover`                      |
-| `--mod-textfield-text-color-invalid`                    |
-| `--mod-textfield-text-color-keyboard-focus`             |
-| `--mod-textfield-text-color-readonly`                   |
-| `--mod-textfield-text-color-valid`                      |
-| `--mod-textfield-width`                                 |
diff --git a/components/textfield/package.json b/components/textfield/package.json
index 7349da715c..2a7e5f6928 100644
--- a/components/textfield/package.json
+++ b/components/textfield/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js
index cdb23da0a8..5f20b0abb8 100644
--- a/components/textfield/stories/template.js
+++ b/components/textfield/stories/template.js
@@ -10,6 +10,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 /**
  * @typedef API
@@ -148,6 +151,7 @@ export const Template = ({
 		${when(displayLabel, () => FieldLabel({
 			size,
 			label: labelText,
+			isDisabled,
 		}, context))}
 		${when(typeof characterCount !== "undefined", () => html`
 			<span class="${rootClass}-characterCount">${characterCount}</span>`)}
diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js
index 6ab8b75a63..340820af2d 100644
--- a/components/textfield/stories/textarea.stories.js
+++ b/components/textfield/stories/textarea.stories.js
@@ -1,6 +1,6 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { HelpTextOptionsTextArea, KeyboardFocusTemplate, Template, TextAreaOptions } from "./textarea.template.js";
 import { TextAreaGroup } from "./textarea.test.js";
@@ -23,6 +23,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=725-2579",
+		},
 	}
 };
 
diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js
index e86ce3a5d4..79f5ec0415 100644
--- a/components/textfield/stories/textfield.stories.js
+++ b/components/textfield/stories/textfield.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isQuiet, isReadOnly, isRequired, isValid, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { HelpTextOptions, KeyboardFocusTemplate, Template, TextFieldOptions } from "./template.js";
 import { TextFieldGroup } from "./textfield.test.js";
@@ -136,6 +136,10 @@ export default {
 				"focusout .spectrum-Textfield"
 			],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=717-2629",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/textfield/themes/express.css b/components/textfield/themes/express.css
index 8261031d5c..31de0c5779 100644
--- a/components/textfield/themes/express.css
+++ b/components/textfield/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Textfield {
 		--spectrum-textfield-border-color: var(--spectrum-gray-400);
 		--spectrum-textfield-border-color-hover: var(--spectrum-gray-500);
diff --git a/components/textfield/themes/spectrum-two.css b/components/textfield/themes/spectrum-two.css
new file mode 100644
index 0000000000..d7da353ad7
--- /dev/null
+++ b/components/textfield/themes/spectrum-two.css
@@ -0,0 +1,32 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Textfield {
+		--spectrum-textfield-background-color: var(--spectrum-gray-25);
+		--spectrum-textfield-background-color-disabled: var(--spectrum-gray-25);
+
+		--spectrum-textfield-border-color: var(--spectrum-gray-500);
+		--spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
+		--spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
+		--spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
+		--spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
+		--spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
+
+		--spectrum-textfield-border-width: var(--spectrum-border-width-100);
+
+		&.spectrum-Textfield--quiet {
+			--spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
+		}
+	}
+}
diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css
index a4854e0235..8f337bcaf8 100644
--- a/components/textfield/themes/spectrum.css
+++ b/components/textfield/themes/spectrum.css
@@ -11,14 +11,19 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-Textfield {
-		--spectrum-textfield-border-color: var(--spectrum-gray-500);
-		--spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
-		--spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
-		--spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
-		--spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
+		--spectrum-textfield-background-color: var(--spectrum-gray-50);
+		--spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
+
+		--spectrum-textfield-border-color-disabled: var(--spectrum-gray-200);
 
-		--spectrum-textfield-border-width: var(--spectrum-border-width-100);
+		&.spectrum-Textfield--quiet {
+			--spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
+		}
 	}
 }
diff --git a/components/thumbnail/metadata/metadata.json b/components/thumbnail/dist/metadata.json
similarity index 94%
rename from components/thumbnail/metadata/metadata.json
rename to components/thumbnail/dist/metadata.json
index 3aa25c510f..067259ff6a 100644
--- a/components/thumbnail/metadata/metadata.json
+++ b/components/thumbnail/dist/metadata.json
@@ -45,10 +45,11 @@
     "--mod-thumbnail-size"
   ],
   "component": [
-    "--spectrum-thumbnail-border-color-rgba",
+    "--spectrum-thumbnail-border-color",
     "--spectrum-thumbnail-border-color-selected",
     "--spectrum-thumbnail-border-opacity",
     "--spectrum-thumbnail-border-radius",
+    "--spectrum-thumbnail-border-radius-default",
     "--spectrum-thumbnail-border-width",
     "--spectrum-thumbnail-border-width-selected",
     "--spectrum-thumbnail-color-opacity-disabled",
@@ -72,14 +73,14 @@
     "--spectrum-thumbnail-size-700",
     "--spectrum-thumbnail-size-75",
     "--spectrum-thumbnail-size-800",
-    "--spectrum-thumbnail-size-900"
+    "--spectrum-thumbnail-size-900",
+    "--spectrum-thumbnail-sized-size"
   ],
   "global": [
     "--spectrum-accent-color-800",
     "--spectrum-border-width-100",
     "--spectrum-border-width-200",
     "--spectrum-border-width-400",
-    "--spectrum-corner-radius-75",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
@@ -87,7 +88,7 @@
     "--spectrum-gray-800-rgb",
     "--spectrum-white"
   ],
-  "system-theme": [],
+  "system-theme": ["--system-thumbnail-border-radius"],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-thumbnail-border-color",
diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css
index 5062fa0464..62e4466551 100644
--- a/components/thumbnail/index.css
+++ b/components/thumbnail/index.css
@@ -11,87 +11,90 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-Thumbnail {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
-
-	--spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75);
-	--spectrum-thumbnail-border-width: var(--spectrum-border-width-100);
-
-	/* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
-	--spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity));
-	--spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400);
-	--spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white);
-	--spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100);
-	--spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500);
+@import "./themes/spectrum-two.css";
 
-	--spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200);
-	--spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800);
-
-	--spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-	--spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-	--spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
-	--spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
+.spectrum-Thumbnail,
+.spectrum-Thumbnail--size500 {
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500);
 }
 
 .spectrum-Thumbnail--size50 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50);
 }
 
 .spectrum-Thumbnail--size75 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75);
 }
 
 .spectrum-Thumbnail--size100 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100);
 }
 
 .spectrum-Thumbnail--size200 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200);
 }
 
 .spectrum-Thumbnail--size300 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300);
 }
 
 .spectrum-Thumbnail--size400 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400);
-}
-
-.spectrum-Thumbnail--size500 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400);
 }
 
 .spectrum-Thumbnail--size600 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600);
 }
 
 .spectrum-Thumbnail--size700 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700);
 }
 
 .spectrum-Thumbnail--size800 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800);
 }
 
 .spectrum-Thumbnail--size900 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900);
 }
 
 .spectrum-Thumbnail--size1000 {
-	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000);
+	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000);
 }
 
 .spectrum-Thumbnail {
+	--spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size));
+
+	/* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
+	--spectrum-thumbnail-border-color: var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity))));
+	--spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800)));
+	--spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100));
+	--spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200));
+	--spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+
+	--spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white)));
+	--spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500)));
+	--spectrum-thumbnail-layer-border-width-inner: var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400));
+	--spectrum-thumbnail-layer-border-width-outer: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100));
+
+	--spectrum-thumbnail-focus-indicator-thickness: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
+	--spectrum-thumbnail-focus-indicator-gap: var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
+	--spectrum-thumbnail-focus-indicator-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color)));
+
+	--spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
+
 	position: relative;
 	margin: 0;
 	padding: 0;
 	display: block;
 
-	inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size));
-	block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size));
+	inline-size: var(--spectrum-thumbnail-size);
+	block-size: var(--spectrum-thumbnail-size);
 
-	border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+	border-radius: var(--spectrum-thumbnail-border-radius-default);
+
+	overflow: hidden;
+	z-index: 0;
 
 	&::before {
 		content: "";
@@ -99,8 +102,8 @@
 		position: absolute;
 		inline-size: 100%;
 		block-size: 100%;
-		border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
-		box-shadow: inset 0 0 0 var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color-rgba)));
+		border-radius: var(--spectrum-thumbnail-border-radius-default);
+		box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color);
 	}
 
 	&.is-disabled {
@@ -113,30 +116,27 @@
 		&::after {
 			content: "";
 			border-style: solid;
-			border-width: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness));
-			border-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color)));
-			border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+			border-width: var(--spectrum-thumbnail-focus-indicator-thickness);
+			border-color: var(--spectrum-thumbnail-focus-indicator-color);
+			border-radius: var(--spectrum-thumbnail-border-radius-default);
 			position: absolute;
-			inset-inline-start: calc((var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness))) * -1);
-			inset-inline-end: calc((var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness))) * -1);
-			inset-block-end: calc((var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness))) * -1);
-			inset-block-start: calc((var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness))) * -1);
+			inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
+			inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
+			inset-block-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
+			inset-block-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
 		}
 
 		.spectrum-Thumbnail-image-wrapper {
 			overflow: hidden;
-			border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+			border-radius: var(--spectrum-thumbnail-border-radius-default);
 		}
 	}
-
-	overflow: hidden;
-	z-index: 0;
 }
 
 .spectrum-Thumbnail-layer {
 	border-style: solid;
-	border-width: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer));
-	border-color: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer)));
+	border-width: var(--spectrum-thumbnail-layer-border-width-outer);
+	border-color: var(--spectrum-thumbnail-layer-border-color-outer);
 	box-sizing: border-box;
 
 	display: flex;
@@ -149,9 +149,9 @@
 
 	&.is-selected {
 		outline-style: solid;
-		outline-color: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected)));
-		outline-width: var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected));
-		outline-offset: calc(var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)));
+		outline-color: var(--spectrum-thumbnail-border-color-selected);
+		outline-width: var(--spectrum-thumbnail-border-width-selected);
+		outline-offset: calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner));
 	}
 }
 
@@ -160,11 +160,11 @@
 	align-items: center;
 	justify-content: center;
 
-	inline-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2);
-	block-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2);
+	inline-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
+	block-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
 	outline-style: solid;
-	outline-color: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner)));
-	outline-width: calc(var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer)));
+	outline-color: var(--spectrum-thumbnail-layer-border-color-inner);
+	outline-width: calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));
 }
 
 .spectrum-Thumbnail-image-wrapper {
@@ -177,8 +177,8 @@
 
 .spectrum-Thumbnail-image {
 	position: relative;
-	max-block-size: 100%;
 	max-inline-size: 100%;
+	max-block-size: 100%;
 	z-index: 1;
 }
 
@@ -202,7 +202,7 @@
 	inline-size: 100%;
 	background-size: cover;
 	background-position: center center;
-	border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+	border-radius: var(--spectrum-thumbnail-border-radius-default);
 }
 
 /* Windows High Contrast Mode */
diff --git a/components/thumbnail/metadata/mods.md b/components/thumbnail/metadata/mods.md
deleted file mode 100644
index 99c8cd111c..0000000000
--- a/components/thumbnail/metadata/mods.md
+++ /dev/null
@@ -1,16 +0,0 @@
-| Modifiable custom properties                |
-| ------------------------------------------- |
-| `--mod-thumbnail-border-color`              |
-| `--mod-thumbnail-border-color-selected`     |
-| `--mod-thumbnail-border-radius`             |
-| `--mod-thumbnail-border-width`              |
-| `--mod-thumbnail-border-width-selected`     |
-| `--mod-thumbnail-color-opacity-disabled`    |
-| `--mod-thumbnail-focus-indicator-color`     |
-| `--mod-thumbnail-focus-indicator-gap`       |
-| `--mod-thumbnail-focus-indicator-thickness` |
-| `--mod-thumbnail-layer-border-color-inner`  |
-| `--mod-thumbnail-layer-border-color-outer`  |
-| `--mod-thumbnail-layer-border-width-inner`  |
-| `--mod-thumbnail-layer-border-width-outer`  |
-| `--mod-thumbnail-size`                      |
diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json
index 8e11b6fb6f..d33aae7d19 100644
--- a/components/thumbnail/package.json
+++ b/components/thumbnail/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js
index 2b40d8e101..aa476ea722 100644
--- a/components/thumbnail/stories/template.js
+++ b/components/thumbnail/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Thumbnail",
diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js
index f68d07e1c4..cf32fab1db 100644
--- a/components/thumbnail/stories/thumbnail.stories.js
+++ b/components/thumbnail/stories/thumbnail.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { Template } from "./template.js";
 import { ThumbnailGroup } from "./thumbnail.test.js";
@@ -88,6 +88,10 @@ export default {
 		actions: {
 			handles: [],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=29951-634",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/thumbnail/themes/express.css b/components/thumbnail/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/thumbnail/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/thumbnail/themes/spectrum-two.css b/components/thumbnail/themes/spectrum-two.css
new file mode 100644
index 0000000000..4cd647afd8
--- /dev/null
+++ b/components/thumbnail/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Thumbnail {
+		--spectrum-thumbnail-border-radius: 2px;
+	}
+}
diff --git a/components/thumbnail/themes/spectrum.css b/components/thumbnail/themes/spectrum.css
new file mode 100644
index 0000000000..b1abf32465
--- /dev/null
+++ b/components/thumbnail/themes/spectrum.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Thumbnail {
+		--spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75);
+	}
+}
diff --git a/components/toast/metadata/metadata.json b/components/toast/dist/metadata.json
similarity index 96%
rename from components/toast/metadata/metadata.json
rename to components/toast/dist/metadata.json
index 4934603560..8721a98ef8 100644
--- a/components/toast/metadata/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -90,17 +90,19 @@
     "--spectrum-informative-background-color-default",
     "--spectrum-line-height-100",
     "--spectrum-negative-background-color-default",
-    "--spectrum-neutral-background-color-default",
     "--spectrum-neutral-subdued-background-color-default",
     "--spectrum-positive-background-color-default",
     "--spectrum-regular-font-weight",
     "--spectrum-spacing-100",
     "--spectrum-spacing-300",
     "--spectrum-text-to-visual-100",
-    "--spectrum-transparent-white-300",
+    "--spectrum-transparent-white-400",
     "--spectrum-white"
   ],
-  "system-theme": ["--system-toast-background-color-default"],
+  "system-theme": [
+    "--system-toast-background-color-default",
+    "--system-toast-divider-color"
+  ],
   "passthroughs": [],
   "high-contrast": ["--highcontrast-toast-border-color"]
 }
diff --git a/components/toast/index.css b/components/toast/index.css
index 7ef1e869de..8b3793de9a 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 
 .spectrum-Toast {
 	/* Hardcoded variables */
@@ -51,14 +50,11 @@
 	--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
 
 	/* Color */
-
 	--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
 	--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
 	--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
 
 	--spectrum-toast-text-and-icon-color: var(--spectrum-white);
-
-	--spectrum-toast-divider-color: var(--spectrum-transparent-white-300);
 }
 
 @media (forced-colors: active) {
@@ -87,7 +83,6 @@
 
 	-webkit-font-smoothing: antialiased;
 
-	/** @todo Why are the background color and text color properties the same? */
 	background-color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default));
 	color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default));
 	overflow-wrap: anywhere;
diff --git a/components/toast/metadata/mods.md b/components/toast/metadata/mods.md
deleted file mode 100644
index 388983a16a..0000000000
--- a/components/toast/metadata/mods.md
+++ /dev/null
@@ -1,28 +0,0 @@
-| Modifiable custom properties                            |
-| ------------------------------------------------------- |
-| `--mod-toast-background-color-default`                  |
-| `--mod-toast-block-size`                                |
-| `--mod-toast-border-width`                              |
-| `--mod-toast-corner-radius`                             |
-| `--mod-toast-divider-color`                             |
-| `--mod-toast-font-size`                                 |
-| `--mod-toast-font-weight`                               |
-| `--mod-toast-informative-background-color-default`      |
-| `--mod-toast-line-height`                               |
-| `--mod-toast-line-height-cjk`                           |
-| `--mod-toast-max-inline-size`                           |
-| `--mod-toast-negative-background-color-default`         |
-| `--mod-toast-positive-background-color-default`         |
-| `--mod-toast-spacing-block-end`                         |
-| `--mod-toast-spacing-block-start`                       |
-| `--mod-toast-spacing-bottom-edge-to-divider`            |
-| `--mod-toast-spacing-bottom-edge-to-text`               |
-| `--mod-toast-spacing-close-button`                      |
-| `--mod-toast-spacing-icon-to-text`                      |
-| `--mod-toast-spacing-start-edge-to-text-and-icon`       |
-| `--mod-toast-spacing-text-and-action-button-to-divider` |
-| `--mod-toast-spacing-text-to-action-button-horizontal`  |
-| `--mod-toast-spacing-top-edge-to-divider`               |
-| `--mod-toast-spacing-top-edge-to-icon`                  |
-| `--mod-toast-spacing-top-edge-to-text`                  |
-| `--mod-toast-text-and-icon-color`                       |
diff --git a/components/toast/package.json b/components/toast/package.json
index 886cf6f985..541d60aaf1 100644
--- a/components/toast/package.json
+++ b/components/toast/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js
index 6bf4321540..89d459dbf0 100644
--- a/components/toast/stories/template.js
+++ b/components/toast/stories/template.js
@@ -9,6 +9,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Toast",
diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js
index 3359f4ad69..9271ef7022 100644
--- a/components/toast/stories/toast.stories.js
+++ b/components/toast/stories/toast.stories.js
@@ -1,5 +1,5 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ActionTemplate, Template, ToastWrapOptions } from "./template.js";
 import { ToastGroup } from "./toast.test.js";
@@ -49,6 +49,10 @@ export default {
 			handles: ["click .spectrum-Toast button"],
 		},
 		packageJson,
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=2666-4482",
+		},
 		metadata,
 	},
 };
diff --git a/components/toast/themes/express.css b/components/toast/themes/express.css
index f415e2b530..2de113b03e 100644
--- a/components/toast/themes/express.css
+++ b/components/toast/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Toast {
 		--spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default);
 	}
diff --git a/components/toast/themes/spectrum-two.css b/components/toast/themes/spectrum-two.css
new file mode 100644
index 0000000000..1097d45729
--- /dev/null
+++ b/components/toast/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Toast {
+		--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+		--spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
+	}
+}
diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css
index e741ff3c6c..3f6e05c5d7 100644
--- a/components/toast/themes/spectrum.css
+++ b/components/toast/themes/spectrum.css
@@ -11,8 +11,12 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
 	.spectrum-Toast {
-		--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+		--spectrum-toast-divider-color: var(--spectrum-transparent-white-300);
 	}
 }
diff --git a/components/tooltip/metadata/metadata.json b/components/tooltip/dist/metadata.json
similarity index 99%
rename from components/tooltip/metadata/metadata.json
rename to components/tooltip/dist/metadata.json
index 0f66072a3d..7f6d6d0b94 100644
--- a/components/tooltip/metadata/metadata.json
+++ b/components/tooltip/dist/metadata.json
@@ -384,7 +384,6 @@
     "--spectrum-informative-background-color-default",
     "--spectrum-line-height-100",
     "--spectrum-negative-background-color-default",
-    "--spectrum-neutral-background-color-default",
     "--spectrum-neutral-subdued-background-color-default",
     "--spectrum-positive-background-color-default",
     "--spectrum-regular-font-weight",
diff --git a/components/tooltip/index.css b/components/tooltip/index.css
index 96367aa458..f488b9cbf4 100644
--- a/components/tooltip/index.css
+++ b/components/tooltip/index.css
@@ -11,8 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
 @import "@spectrum-css/commons/overlay.css";
 
 .spectrum-Tooltip {
diff --git a/components/tooltip/metadata/mods.md b/components/tooltip/metadata/mods.md
deleted file mode 100644
index 7931ae6657..0000000000
--- a/components/tooltip/metadata/mods.md
+++ /dev/null
@@ -1,31 +0,0 @@
-| Modifiable custom properties                 |
-| -------------------------------------------- |
-| `--mod-overlay-animation-duration`           |
-| `--mod-overlay-animation-duration-opened`    |
-| `--mod-tooltip-animation-distance`           |
-| `--mod-tooltip-background-color-default`     |
-| `--mod-tooltip-background-color-informative` |
-| `--mod-tooltip-background-color-negative`    |
-| `--mod-tooltip-background-color-positive`    |
-| `--mod-tooltip-border-radius`                |
-| `--mod-tooltip-cjk-line-height`              |
-| `--mod-tooltip-content-color`                |
-| `--mod-tooltip-font-size`                    |
-| `--mod-tooltip-font-weight`                  |
-| `--mod-tooltip-height`                       |
-| `--mod-tooltip-icon-height`                  |
-| `--mod-tooltip-icon-spacing-block-start`     |
-| `--mod-tooltip-icon-spacing-inline-end`      |
-| `--mod-tooltip-icon-spacing-inline-start`    |
-| `--mod-tooltip-icon-width`                   |
-| `--mod-tooltip-line-height`                  |
-| `--mod-tooltip-margin`                       |
-| `--mod-tooltip-max-inline-size`              |
-| `--mod-tooltip-pointer-corner-spacing`       |
-| `--mod-tooltip-spacing-block-end`            |
-| `--mod-tooltip-spacing-block-start`          |
-| `--mod-tooltip-spacing-inline`               |
-| `--mod-tooltip-tip-antialiasing-inset`       |
-| `--mod-tooltip-tip-block-size`               |
-| `--mod-tooltip-tip-height-percentage`        |
-| `--mod-tooltip-tip-square-size`              |
diff --git a/components/tooltip/package.json b/components/tooltip/package.json
index c04fb1d01b..49f352a236 100644
--- a/components/tooltip/package.json
+++ b/components/tooltip/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js
index 4098beb8b7..5c5c260f4d 100644
--- a/components/tooltip/stories/template.js
+++ b/components/tooltip/stories/template.js
@@ -7,6 +7,9 @@ import { when } from "lit/directives/when.js";
 import { capitalize } from "lodash-es";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Tooltip",
diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js
index 7cff3e7e3d..a594409e4b 100644
--- a/components/tooltip/stories/tooltip.stories.js
+++ b/components/tooltip/stories/tooltip.stories.js
@@ -1,6 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused, isOpen } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SemanticVariantGroup, TooltipPlacementGroup, TooltipShowOnHover } from "./template.js";
 import { PlacementVariants } from "./tooltip.test.js";
@@ -90,6 +90,10 @@ export default {
 		label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=2591-4482",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/tooltip/themes/express.css b/components/tooltip/themes/express.css
index 6db95f8213..ec00162e91 100644
--- a/components/tooltip/themes/express.css
+++ b/components/tooltip/themes/express.css
@@ -11,11 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-/* @combine .spectrum--express */
+/* @combine .spectrum.spectrum--express */
 
 @import "./spectrum.css";
 
-@container (--system: express) {
+@container style(--system: express) {
 	.spectrum-Tooltip {
 		--spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default);
 	}
diff --git a/components/tooltip/themes/spectrum-two.css b/components/tooltip/themes/spectrum-two.css
new file mode 100644
index 0000000000..42b423e344
--- /dev/null
+++ b/components/tooltip/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Tooltip {
+		--spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
+	}
+}
diff --git a/components/tooltip/themes/spectrum.css b/components/tooltip/themes/spectrum.css
index e0a5550482..3d81bc564b 100644
--- a/components/tooltip/themes/spectrum.css
+++ b/components/tooltip/themes/spectrum.css
@@ -11,8 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-@container (--system: spectrum) {
-	.spectrum-Tooltip {
-		--spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
-	}
-}
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/tray/metadata/metadata.json b/components/tray/dist/metadata.json
similarity index 100%
rename from components/tray/metadata/metadata.json
rename to components/tray/dist/metadata.json
diff --git a/components/tray/index.css b/components/tray/index.css
index 0734755371..4915050ab9 100644
--- a/components/tray/index.css
+++ b/components/tray/index.css
@@ -11,24 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-Tray {
-	/* Placeholder tokens */
-	--spectrum-tray-exit-animation-delay: 0ms;
-	--spectrum-tray-entry-animation-delay: 160ms;
-
-	/* Maximum width for landscape */
-	--spectrum-tray-max-inline-size: 375px;
-
-	/* https://spectrum.adobe.com/page/tray/#Maximum-height */
-	--spectrum-tray-spacing-edge-to-tray-safe-zone: 64px;
-
-	--spectrum-tray-entry-animation-duration: var(--spectrum-animation-duration-500);
-	--spectrum-tray-exit-animation-duration: var(--spectrum-animation-duration-100);
-
-	--spectrum-tray-corner-radius: var(--spectrum-corner-radius-100);
-	--spectrum-tray-background-color: var(--spectrum-background-layer-2-color);
-}
-
 .spectrum-Tray-wrapper {
 	inset-inline-start: 0;
 
@@ -41,14 +23,28 @@
 }
 
 .spectrum-Tray {
+	/* Maximum width for landscape */
+	--spectrum-tray-max-inline-size: var(--mod-tray-max-inline-size, 375px);
+
+	/* https://spectrum.adobe.com/page/tray/#Maximum-height */
+	--spectrum-tray-spacing-edge-to-tray-safe-zone: var(--mod-tray-spacing-edge-to-tray-safe-zone, 64px);
+
+	--spectrum-tray-entry-animation-delay: var(--mod-tray-entry-animation-delay, 160ms);
+	--spectrum-tray-entry-animation-duration: var(--mod-tray-entry-animation-duration, var(--spectrum-animation-duration-500));
+	--spectrum-tray-exit-animation-delay: var(--mod-tray-exit-animation-delay, 0ms);
+	--spectrum-tray-exit-animation-duration: var(--mod-tray-exit-animation-duration, var(--spectrum-animation-duration-100));
+
+	--spectrum-tray-corner-radius: var(--mod-tray-corner-radius, var(--spectrum-corner-radius-100));
+	--spectrum-tray-background-color: var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-background-layer-2-color)));
+
 	--mod-modal-max-width: 100%;
 
 	/* Default to full width when the viewport is in portrait orientation */
 	inline-size: 100%;
 	max-inline-size: 100%;
 
-	max-block-size: calc(100vh - var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone)));
-	margin-block-start: var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone));
+	max-block-size: calc(100vh - var(--spectrum-tray-spacing-edge-to-tray-safe-zone));
+	margin-block-start: var(--spectrum-tray-spacing-edge-to-tray-safe-zone);
 	padding-block-start: var(--mod-tray-top-to-content-area, var(--spectrum-tray-top-to-content-area));
 	padding-block-end: var(--mod-tray-bottom-to-content-area, var(--spectrum-tray-top-to-content-area));
 	box-sizing: border-box;
@@ -61,26 +57,27 @@
 
 	/* Exit animations */
 	transition:
-		opacity var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(0.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)),
-		visibility var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) linear calc(var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)) + var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration))),
-		transform var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(0.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay));
+		opacity var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-tray-exit-animation-delay),
+		visibility var(--spectrum-tray-exit-animation-duration) linear calc(var(--spectrum-tray-exit-animation-delay) + var(--spectrum-tray-exit-animation-duration)),
+		transform var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-tray-exit-animation-delay);
 
-	background-color: var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-tray-background-color)));
+	background-color: var(--spectrum-tray-background-color);
 
 	&.is-open {
+		transform: translateY(0);
+
 		/* Entry animations */
 		transition:
-			transform var(--mod-tray-entry-animation-duration, var(--spectrum-tray-entry-animation-duration)) cubic-bezier(0, 0, 0.4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay)),
-			opacity var(--spectrum-tray-entry-animation-duration, var(--mod-tray-entry-animation-duration)) cubic-bezier(0, 0, 0.4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay));
-		transform: translateY(0);
+			transform var(--spectrum-tray-entry-animation-duration) cubic-bezier(0, 0, 0.4, 1) var(--spectrum-tray-entry-animation-delay),
+			opacity var(--spectrum-tray-entry-animation-duration) cubic-bezier(0, 0, 0.4, 1) var(--spectrum-tray-entry-animation-delay);
 	}
 }
 
 @media screen and (orientation: landscape) {
 	.spectrum-Tray {
-		border-start-start-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius));
-		border-start-end-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius));
-		max-inline-size: var(--mod-tray-max-inline-size, var(--spectrum-tray-max-inline-size));
+		border-start-start-radius: var(--spectrum-tray-corner-radius);
+		border-start-end-radius: var(--spectrum-tray-corner-radius);
+		max-inline-size: var(--spectrum-tray-max-inline-size);
 	}
 }
 
diff --git a/components/tray/metadata/mods.md b/components/tray/metadata/mods.md
deleted file mode 100644
index 9bff6baff4..0000000000
--- a/components/tray/metadata/mods.md
+++ /dev/null
@@ -1,13 +0,0 @@
-| Modifiable custom properties                |
-| ------------------------------------------- |
-| `--mod-tray-background-color`               |
-| `--mod-tray-bottom-to-content-area`         |
-| `--mod-tray-corner-radius`                  |
-| `--mod-tray-corner-radius-portrait`         |
-| `--mod-tray-entry-animation-delay`          |
-| `--mod-tray-entry-animation-duration`       |
-| `--mod-tray-exit-animation-delay`           |
-| `--mod-tray-exit-animation-duration`        |
-| `--mod-tray-max-inline-size`                |
-| `--mod-tray-spacing-edge-to-tray-safe-zone` |
-| `--mod-tray-top-to-content-area`            |
diff --git a/components/tray/package.json b/components/tray/package.json
index 89ebe7c5a6..fa7e790618 100644
--- a/components/tray/package.json
+++ b/components/tray/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js
index deda4258f1..2f9221df9f 100644
--- a/components/tray/stories/tray.stories.js
+++ b/components/tray/stories/tray.stories.js
@@ -1,7 +1,7 @@
 import { Template as Dialog } from "@spectrum-css/dialog/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { TrayGroup } from "./tray.test.js";
 
@@ -67,5 +67,6 @@ WithForcedColors.parameters = {
 	chromatic: {
 		forcedColors: "active",
 		modes: disableDefaultModes,
+		viewport: "mobile2",
 	},
 };
diff --git a/components/treeview/metadata/metadata.json b/components/treeview/dist/metadata.json
similarity index 94%
rename from components/treeview/metadata/metadata.json
rename to components/treeview/dist/metadata.json
index 9902324dd1..0e5af23858 100644
--- a/components/treeview/metadata/metadata.json
+++ b/components/treeview/dist/metadata.json
@@ -3,12 +3,10 @@
   "selectors": [
     ".spectrum-TreeView",
     ".spectrum-TreeView .spectrum-TreeView",
-    ".spectrum-TreeView--detached",
-    ".spectrum-TreeView--quiet",
     ".spectrum-TreeView--sizeL",
+    ".spectrum-TreeView--sizeM",
     ".spectrum-TreeView--sizeS",
     ".spectrum-TreeView--sizeXL",
-    ".spectrum-TreeView--thumbnail",
     ".spectrum-TreeView--thumbnail .spectrum-TreeView-itemThumbnail",
     ".spectrum-TreeView-heading",
     ".spectrum-TreeView-item",
@@ -48,6 +46,9 @@
     ".spectrum-TreeView-itemLink:hover:before",
     ".spectrum-TreeView-section > .spectrum-TreeView",
     ".spectrum-TreeView-section:not(:first-child)",
+    ".spectrum-TreeView.spectrum-TreeView--detached",
+    ".spectrum-TreeView.spectrum-TreeView--quiet",
+    ".spectrum-TreeView.spectrum-TreeView--thumbnail",
     ".spectrum-TreeView:dir(rtl)",
     "[dir=\"rtl\"] .spectrum-TreeView"
   ],
@@ -95,7 +96,6 @@
     "--spectrum-treeview-font-size",
     "--spectrum-treeview-heading-bottom-to-text",
     "--spectrum-treeview-heading-color",
-    "--spectrum-treeview-heading-font-weight",
     "--spectrum-treeview-indicator-animation-duration",
     "--spectrum-treeview-indicator-margin-inline-start",
     "--spectrum-treeview-indicator-padding",
@@ -125,13 +125,13 @@
     "--spectrum-treeview-item-min-block-size-thumbnail-offset-medium",
     "--spectrum-treeview-item-padding-inline-end",
     "--spectrum-treeview-item-padding-inline-start",
+    "--spectrum-treeview-item-sized-indentation",
+    "--spectrum-treeview-item-sized-min-block-size",
     "--spectrum-treeview-item-text-color",
     "--spectrum-treeview-item-text-color-disabled",
     "--spectrum-treeview-item-text-color-focus",
     "--spectrum-treeview-item-text-color-hover",
     "--spectrum-treeview-item-text-color-selected",
-    "--spectrum-treeview-line-height",
-    "--spectrum-treeview-margin-block",
     "--spectrum-treeview-section-spacing"
   ],
   "global": [
@@ -158,7 +158,7 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
-    "--spectrum-gray-200",
+    "--spectrum-gray-100",
     "--spectrum-gray-500",
     "--spectrum-gray-700",
     "--spectrum-gray-900",
@@ -168,7 +168,10 @@
     "--spectrum-neutral-content-color-default",
     "--spectrum-text-to-visual-75"
   ],
-  "system-theme": [],
+  "system-theme": [
+    "--system-tree-view-item-background-color-focus",
+    "--system-tree-view-item-background-color-hover"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-treeview-heading-color",
diff --git a/components/treeview/index.css b/components/treeview/index.css
index f9991a2623..2c55ebea3b 100644
--- a/components/treeview/index.css
+++ b/components/treeview/index.css
@@ -11,175 +11,174 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-TreeView {
-	--spectrum-treeview-line-height: var(--spectrum-line-height-200);
-	--spectrum-treeview-margin-block: 1em;
-	--spectrum-treeview-font-size: var(--spectrum-font-size-100);
-
-	--spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100);
-	--spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium);
+@import "./themes/spectrum-two.css";
 
-	--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100);
-	--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100);
+@media (forced-colors: active) {
+	.spectrum-TreeView {
+		--highcontrast-treeview-item-background-color-selected: Highlight;
+		--highcontrast-treeview-item-border-color-selected: Highlight;
+		--highcontrast-treeview-item-text-color-selected: HighlightText;
+		--highcontrast-treeview-item-icon-color-selected: HighlightText;
 
-	--spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium);
-	--spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100);
-	--spectrum-treeview-heading-color: var(--spectrum-heading-color);
+		--highcontrast-treeview-item-icon-color: LinkText;
+		--highcontrast-treeview-item-text-color: LinkText;
 
-	--spectrum-treeview-item-border-size: var(--spectrum-border-width-200);
-	--spectrum-treeview-item-border-size-selected: 1px;
-	--spectrum-treeview-item-border-radius: 0px;
+		--highcontrast-treeview-item-background-color-focus: Highlight;
+		--highcontrast-treeview-item-text-color-focus: HighlightText;
+		--highcontrast-treeview-item-border-color-focus: CanvasText;
+		--highcontrast-treeview-item-icon-color-focus: HighlightText;
 
-	--spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800);
-	--spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700);
+		--highcontrast-treeview-item-background-color-disabled: Canvas;
+		--highcontrast-treeview-item-text-color-disabled: GrayText;
+		--highcontrast-treeview-item-icon-color-disabled: GrayText;
 
-	--spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200);
-	--spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200);
+		--highcontrast-treeview-heading-color: CanvasText;
+	}
 
-	--spectrum-treeview-item-border-color-quiet-selected: transparent;
+	@supports (color: SelectedItem) {
+		.spectrum-TreeView {
+			--highcontrast-treeview-item-background-color-selected: SelectedItem;
+			--highcontrast-treeview-item-border-color-selected: SelectedItem;
+			--highcontrast-treeview-item-text-color-selected: SelectedItemText;
+			--highcontrast-treeview-item-icon-color-selected: SelectedItemText;
+		}
+	}
 
-	--spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75);
-	--spectrum-treeview-item-icon-color: var(--spectrum-gray-700);
-	--spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900);
-	--spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900);
-	--spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900);
-	--spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color);
+	.spectrum-TreeView-itemLabel {
+		forced-color-adjust: none;
+		background: transparent;
+	}
 
-	--spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default);
-	--spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900);
-	--spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500);
-	--spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900);
-	--spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900);
+	.spectrum-TreeView-itemLink::before {
+		forced-color-adjust: none;
+	}
+}
 
-	--spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100));
-	--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium);
+.spectrum-TreeView,
+.spectrum-TreeView--sizeM {
+	--spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-100));
 
-	--spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px);
+	--spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-100));
+	--spectrum-treeview-item-sized-indentation: var(--spectrum-treeview-item-indentation-medium);
+	--spectrum-treeview-heading-bottom-to-text: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-100));
 
-	--spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100);
+	--spectrum-treeview-item-padding-inline-start: var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-100));
+	--spectrum-treeview-item-padding-inline-end: var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-100));
+	--spectrum-treeview-indicator-margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, calc(-1 * var(--spectrum-component-height-100)));
+	--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium);
 
-	&:dir(rtl) {
-		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-	}
+	--spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0);
 }
 
 .spectrum-TreeView--sizeS {
-	--spectrum-treeview-font-size: var(--spectrum-font-size-75);
+	--spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-75));
 
-	--spectrum-treeview-item-min-block-size: var(--spectrum-component-height-75);
-	--spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-small);
-	--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75);
+	--spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-75));
+	--spectrum-treeview-item-sized-indentation: var(--spectrum-treeview-item-indentation-small);
+	--spectrum-treeview-heading-bottom-to-text: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-75));
 
-	--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75);
-	--spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75));
-	--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75);
+	--spectrum-treeview-item-padding-inline-start: var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-75));
+	--spectrum-treeview-item-padding-inline-end: var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-75));
+	--spectrum-treeview-indicator-margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, calc(-1 * var(--spectrum-component-height-75)));
 	--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small);
 
 	--spectrum-treeview-item-min-block-size-thumbnail-offset: 6px;
 }
 
 .spectrum-TreeView--sizeL {
-	--spectrum-treeview-font-size: var(--spectrum-font-size-200);
+	--spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-200));
 
-	--spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-large);
-	--spectrum-treeview-item-min-block-size: var(--spectrum-component-height-200);
-	--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200);
+	--spectrum-treeview-item-sized-indentation: var(--spectrum-treeview-item-indentation-large);
+	--spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-200));
+	--spectrum-treeview-heading-bottom-to-text: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-200));
 
-	--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200);
-	--spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200));
-	--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200);
+	--spectrum-treeview-item-padding-inline-start: var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-200));
+	--spectrum-treeview-item-padding-inline-end: var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-200));
+	--spectrum-treeview-indicator-margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, calc(-1 * var(--spectrum-component-height-200)));
 	--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large);
 
-	--spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
+	--spectrum-treeview-item-min-block-size-thumbnail-offset: 0;
 }
 
 .spectrum-TreeView--sizeXL {
-	--spectrum-treeview-font-size: var(--spectrum-font-size-300);
+	--spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-300));
 
-	--spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-extra-large);
-	--spectrum-treeview-item-min-block-size: var(--spectrum-component-height-300);
-	--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300);
+	--spectrum-treeview-item-sized-indentation: var(--spectrum-treeview-item-indentation-extra-large);
+	--spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-300));
+	--spectrum-treeview-heading-bottom-to-text: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-300));
 
-	--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300);
-	--spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300));
-	--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300);
+	--spectrum-treeview-item-padding-inline-start: var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-300));
+	--spectrum-treeview-item-padding-inline-end: var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-300));
+	--spectrum-treeview-indicator-margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, calc(-1 * var(--spectrum-component-height-300)));
 	--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large);
 
-	--spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
+	--spectrum-treeview-item-min-block-size-thumbnail-offset: 0;
 }
 
-.spectrum-TreeView--quiet {
-	--mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected)));
-	--mod-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, var(--spectrum-treeview-item-border-color-quiet-selected)));
-}
+.spectrum-TreeView {
+	--spectrum-treeview-item-indentation: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-sized-indentation));
+	--spectrum-treeview-section-spacing: var(--mod-treeview-section-spacing, var(--spectrum-treeview-item-indentation));
+	--spectrum-treeview-heading-color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-heading-color)));
 
-.spectrum-TreeView--thumbnail {
-	--mod-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)));
-}
+	--spectrum-treeview-item-border-size: var(--mod-treeview-item-border-size, var(--spectrum-border-width-200));
+	--spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px);
+	--spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px);
 
-.spectrum-TreeView--detached {
-	--mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100));
-}
+	--spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800)));
+	--spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700)));
 
-@media (forced-colors: active) {
-	.spectrum-TreeView {
-		--highcontrast-treeview-item-background-color-selected: Highlight;
-		--highcontrast-treeview-item-border-color-selected: Highlight;
-		--highcontrast-treeview-item-text-color-selected: HighlightText;
-		--highcontrast-treeview-item-icon-color-selected: HighlightText;
+	--spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent));
 
-		--highcontrast-treeview-item-icon-color: LinkText;
-		--highcontrast-treeview-item-text-color: LinkText;
+	--spectrum-treeview-item-icon-gap: var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75));
+	--spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700)));
+	--spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900)));
+	--spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900)));
+	--spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900)));
+	--spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color)));
 
-		--highcontrast-treeview-item-background-color-focus: Highlight;
-		--highcontrast-treeview-item-text-color-focus: HighlightText;
-		--highcontrast-treeview-item-border-color-focus: CanvasText;
-		--highcontrast-treeview-item-icon-color-focus: HighlightText;
+	--spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default)));
+	--spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900)));
+	--spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500)));
+	--spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900)));
+	--spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900)));
 
-		--highcontrast-treeview-item-background-color-disabled: Canvas;
-		--highcontrast-treeview-item-text-color-disabled: GrayText;
-		--highcontrast-treeview-item-icon-color-disabled: GrayText;
+	--spectrum-treeview-indicator-animation-duration: var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100));
 
-		--highcontrast-treeview-heading-color: CanvasText;
-	}
+	--spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-sized-min-block-size));
 
-	@supports (color: SelectedItem) {
-		.spectrum-TreeView {
-			--highcontrast-treeview-item-background-color-selected: SelectedItem;
-			--highcontrast-treeview-item-border-color-selected: SelectedItem;
-			--highcontrast-treeview-item-text-color-selected: SelectedItemText;
-			--highcontrast-treeview-item-icon-color-selected: SelectedItemText;
-		}
+	&.spectrum-TreeView--quiet {
+		--mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected)));
+		--mod-treeview-item-border-color-selected: var(--spectrum-treeview-item-border-color-quiet-selected);
 	}
 
-	.spectrum-TreeView-itemLabel {
-		forced-color-adjust: none;
-		background: transparent;
+	&.spectrum-TreeView--thumbnail {
+		--spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-sized-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)));
 	}
 
-	.spectrum-TreeView-itemLink::before {
-		forced-color-adjust: none;
+	&.spectrum-TreeView--detached {
+		--mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100));
 	}
-}
 
-.spectrum-TreeView {
 	display: block;
 	position: relative;
 	padding: 0;
 	list-style: none;
 	outline: none;
 	user-select: none;
-	line-height: var(--mod-treeview-line-height, var(--spectrum-treeview-line-height));
-	margin-block: var(--mod-treeview-margin-block, var(--spectrum-treeview-margin-block));
-	font-size: var(--mod-treeview-font-size, var(--spectrum-treeview-font-size));
+	line-height: var(--mod-treeview-line-height, var(--spectrum-line-height-200));
+	margin-block: var(--mod-treeview-margin-block, 1em);
+	font-size: var(--spectrum-treeview-font-size);
+
+	&:dir(rtl) {
+		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+	}
 
 	/* Close (hide) nested treeviews by default. */
 	.spectrum-TreeView {
 		position: static;
 		block-size: 0;
 		display: none;
-		padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
+		padding-inline-start: var(--spectrum-treeview-item-indentation);
 		margin-block: 0;
 	}
 }
@@ -189,12 +188,12 @@
 	overflow: hidden;
 
 	&.is-open {
-		> .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator {
+		& > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator {
 			/* Rotate the chevron */
 			transform: var(--spectrum-logical-rotation,) rotate(90deg);
 		}
 
-		> .spectrum-TreeView {
+		& > .spectrum-TreeView {
 			/* Open the treeview */
 			block-size: auto;
 			display: block;
@@ -203,52 +202,40 @@
 
 	&.is-selected,
 	&.is-drop-target {
-		> .spectrum-TreeView-itemLink {
-			color: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-treeview-item-text-color-selected)));
+		& > .spectrum-TreeView-itemLink {
+			color: var(--spectrum-treeview-item-text-color-selected);
 
 			&::before {
 				background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected)));
 			}
 
-			.spectrum-TreeView-itemIcon {
-				color: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-treeview-item-icon-color-selected)));
+			& .spectrum-TreeView-itemIcon {
+				color: var(--spectrum-treeview-item-icon-color-selected);
 			}
 		}
 
-		> .spectrum-TreeView-itemLink:not(:focus-visible) {
-			&::before {
-				border-color: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-treeview-item-border-color-selected)));
-			}
+		& > .spectrum-TreeView-itemLink:not(:focus-visible)::before {
+			border-color: var(--spectrum-treeview-item-border-color-selected);
 		}
 	}
 
-	&.is-selected {
-		> .spectrum-TreeView-itemLink:not(:focus-visible) {
-			&::before {
-				border-width: var(--mod-treeview-item-border-size-selected, var(--spectrum-treeview-item-border-size-selected));
-			}
-		}
+	&.is-selected > .spectrum-TreeView-itemLink:not(:focus-visible)::before {
+		border-width: var(--spectrum-treeview-item-border-size-selected);
 	}
 
-	&.is-drop-target {
-		> .spectrum-TreeView-itemLink {
-			&::before {
-				border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
-			}
-		}
+	&.is-drop-target > .spectrum-TreeView-itemLink::before {
+		border-width: var(--spectrum-treeview-item-border-size);
 	}
 
-	&.is-disabled {
-		> .spectrum-TreeView-itemLink {
-			color: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-treeview-item-text-color-disabled)));
+	&.is-disabled > .spectrum-TreeView-itemLink {
+		color: var(--spectrum-treeview-item-text-color-disabled);
 
-			&::before {
-				background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent);
-			}
+		&::before {
+			background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent);
+		}
 
-			.spectrum-Icon {
-				color: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-treeview-item-icon-color-disabled)));
-			}
+		& .spectrum-Icon {
+			color: var(--spectrum-treeview-item-icon-color-disabled);
 		}
 	}
 }
@@ -265,10 +252,11 @@
 	flex-flow: row nowrap;
 	align-items: center;
 
-	min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
-	padding-inline: var(--mod-treeview-item-padding-inline-start, var(--spectrum-treeview-item-padding-inline-start)) var(--mod-treeview-item-padding-inline-end, var(--spectrum-treeview-item-padding-inline-end));
+	min-block-size: var(--spectrum-treeview-item-min-block-size);
+	padding-inline-start: var(--spectrum-treeview-item-padding-inline-start);
+	padding-inline-end: var(--spectrum-treeview-item-padding-inline-end);
 
-	color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-treeview-item-text-color)));
+	color: var(--spectrum-treeview-item-text-color);
 
 	text-decoration: none;
 	outline: none;
@@ -284,39 +272,39 @@
 		box-sizing: border-box;
 		position: absolute;
 		inset-inline: 0;
-		min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
+		min-block-size: var(--spectrum-treeview-item-min-block-size);
 
 		border-style: solid;
 		border-color: transparent;
-		border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)) 0;
-		border-radius: var(--mod-treeview-item-border-radius, var(--spectrum-treeview-item-border-radius));
+		border-width: var(--spectrum-treeview-item-border-size) 0;
+		border-radius: var(--spectrum-treeview-item-border-radius);
 		background-color: transparent;
 		color: transparent;
 	}
 
 	&:focus-visible {
-		color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-treeview-item-text-color-focus)));
+		color: var(--spectrum-treeview-item-text-color-focus);
 
 		&::before {
 			background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus)));
-			border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
-			border-color: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-treeview-item-border-color-focus)));
+			border-width: var(--spectrum-treeview-item-border-size);
+			border-color: var(--spectrum-treeview-item-border-color-focus);
 		}
 
-		.spectrum-TreeView-itemIcon {
-			color: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-treeview-item-icon-color-focus)));
+		& .spectrum-TreeView-itemIcon {
+			color: var(--spectrum-treeview-item-icon-color-focus);
 		}
 	}
 
 	&:hover {
-		color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-treeview-item-text-color-hover)));
+		color: var(--spectrum-treeview-item-text-color-hover);
 
 		&::before {
 			background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover)));
 		}
 
-		.spectrum-TreeView-itemIcon {
-			color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-treeview-item-icon-color-hover)));
+		& .spectrum-TreeView-itemIcon {
+			color: var(--spectrum-treeview-item-icon-color-hover);
 		}
 	}
 }
@@ -325,8 +313,8 @@
 	position: relative;
 	vertical-align: top;
 	flex-shrink: 0;
-	margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
-	color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-treeview-item-icon-color)));
+	margin-inline-end: var(--spectrum-treeview-item-icon-gap);
+	color: var(--spectrum-treeview-item-icon-color);
 }
 
 .spectrum-TreeView-itemIndicator {
@@ -340,11 +328,11 @@
 
 	padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding));
 	padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding));
-	margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start));
+	margin-inline-start: var(--spectrum-treeview-indicator-margin-inline-start);
 
-	transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration));
+	transition: transform ease var(--spectrum-treeview-indicator-animation-duration);
 	pointer-events: all;
-	transform: var(--spectrum-logical-rotation);
+	transform: var(--spectrum-logical-rotation,);
 }
 
 /* Section headings */
@@ -355,60 +343,58 @@
 }
 
 .spectrum-TreeView-section:not(:first-child) {
-	margin-block-start: var(--mod-treeview-section-spacing, var(--spectrum-treeview-section-spacing));
+	margin-block-start: var(--spectrum-treeview-section-spacing);
 }
 
 .spectrum-TreeView-heading {
-	padding-block-end: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-treeview-heading-bottom-to-text));
-	font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-treeview-heading-font-weight));
-	color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-treeview-heading-color)));
+	padding-block-end: var(--spectrum-treeview-heading-bottom-to-text);
+	font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-bold-font-weight));
+	color: var(--spectrum-treeview-heading-color);
 }
 
 /* Indentation levels used with Flat structure variant. */
 .spectrum-TreeView-item--indent1 {
-	padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
+	padding-inline-start: calc(1 * var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent2 {
-	padding-inline-start: calc(2 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(2 * var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent3 {
-	padding-inline-start: calc(3 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(3 * var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent4 {
-	padding-inline-start: calc(4 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(4 * var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent5 {
-	padding-inline-start: calc(5 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(5 * var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent6 {
-	padding-inline-start: calc(6 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(6 * var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent7 {
-	padding-inline-start: calc(7 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(7 * var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent8 {
-	padding-inline-start: calc(8 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(8 * var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent9 {
-	padding-inline-start: calc(9 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(9 * var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent10 {
-	padding-inline-start: calc(10 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(10 * var(--spectrum-treeview-item-indentation));
 }
 
 /* ***** VARIANTS ***** */
-.spectrum-TreeView--thumbnail {
-	.spectrum-TreeView-itemThumbnail {
-		flex-shrink: 0;
-		margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
-	}
+.spectrum-TreeView--thumbnail .spectrum-TreeView-itemThumbnail {
+	flex-shrink: 0;
+	margin-inline-end: var(--spectrum-treeview-item-icon-gap);
 }
diff --git a/components/treeview/metadata/mods.md b/components/treeview/metadata/mods.md
deleted file mode 100644
index 28ce9a4b24..0000000000
--- a/components/treeview/metadata/mods.md
+++ /dev/null
@@ -1,40 +0,0 @@
-| Modifiable custom properties                          |
-| ----------------------------------------------------- |
-| `--mod-treeview-font-size`                            |
-| `--mod-treeview-heading-bottom-to-text`               |
-| `--mod-treeview-heading-color`                        |
-| `--mod-treeview-heading-font-weight`                  |
-| `--mod-treeview-indicator-animation-duration`         |
-| `--mod-treeview-indicator-margin-inline-start`        |
-| `--mod-treeview-indicator-padding-block`              |
-| `--mod-treeview-indicator-padding-inline`             |
-| `--mod-treeview-item-background-color-focus`          |
-| `--mod-treeview-item-background-color-hover`          |
-| `--mod-treeview-item-background-color-quiet-selected` |
-| `--mod-treeview-item-background-color-selected`       |
-| `--mod-treeview-item-border-color-focus`              |
-| `--mod-treeview-item-border-color-selected`           |
-| `--mod-treeview-item-border-color-selected-quiet`     |
-| `--mod-treeview-item-border-radius`                   |
-| `--mod-treeview-item-border-radius-detached`          |
-| `--mod-treeview-item-border-size`                     |
-| `--mod-treeview-item-border-size-selected`            |
-| `--mod-treeview-item-icon-color`                      |
-| `--mod-treeview-item-icon-color-disabled`             |
-| `--mod-treeview-item-icon-color-focus`                |
-| `--mod-treeview-item-icon-color-hover`                |
-| `--mod-treeview-item-icon-color-selected`             |
-| `--mod-treeview-item-icon-gap`                        |
-| `--mod-treeview-item-indentation`                     |
-| `--mod-treeview-item-min-block-size`                  |
-| `--mod-treeview-item-min-block-size-thumbnail`        |
-| `--mod-treeview-item-padding-inline-end`              |
-| `--mod-treeview-item-padding-inline-start`            |
-| `--mod-treeview-item-text-color`                      |
-| `--mod-treeview-item-text-color-disabled`             |
-| `--mod-treeview-item-text-color-focus`                |
-| `--mod-treeview-item-text-color-hover`                |
-| `--mod-treeview-item-text-color-selected`             |
-| `--mod-treeview-line-height`                          |
-| `--mod-treeview-margin-block`                         |
-| `--mod-treeview-section-spacing`                      |
diff --git a/components/treeview/package.json b/components/treeview/package.json
index 7cc08c520d..cb9dac05ee 100644
--- a/components/treeview/package.json
+++ b/components/treeview/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/treeview/stories/template.js b/components/treeview/stories/template.js
index 6c15ccdacd..df31e3ed46 100644
--- a/components/treeview/stories/template.js
+++ b/components/treeview/stories/template.js
@@ -9,6 +9,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const TreeViewItem = ({
 	rootClass = "spectrum-TreeView",
diff --git a/components/treeview/stories/treeview.stories.js b/components/treeview/stories/treeview.stories.js
index f83b838589..1962195427 100644
--- a/components/treeview/stories/treeview.stories.js
+++ b/components/treeview/stories/treeview.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { Template } from "./template.js";
 import { TreeViewGroup } from "./treeview.test.js";
@@ -37,6 +37,10 @@ export default {
 		actions: {
 			handles: ["click .spectrum-TreeView-itemLink"],
 		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=64762-1960",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/treeview/themes/express.css b/components/treeview/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/treeview/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/treeview/themes/spectrum-two.css b/components/treeview/themes/spectrum-two.css
new file mode 100644
index 0000000000..215290b3b6
--- /dev/null
+++ b/components/treeview/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-TreeView {
+		--spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100);
+		--spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100);
+	}
+}
diff --git a/components/treeview/themes/spectrum.css b/components/treeview/themes/spectrum.css
new file mode 100644
index 0000000000..7698b2b4c3
--- /dev/null
+++ b/components/treeview/themes/spectrum.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-TreeView {
+		--spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200);
+		--spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200);
+	}
+}
diff --git a/components/typography/metadata/metadata.json b/components/typography/dist/metadata.json
similarity index 99%
rename from components/typography/metadata/metadata.json
rename to components/typography/dist/metadata.json
index 9235bb411b..5d45be326d 100644
--- a/components/typography/metadata/metadata.json
+++ b/components/typography/dist/metadata.json
@@ -291,11 +291,12 @@
     ".spectrum-Heading:lang(zh) em strong",
     ".spectrum-Heading:lang(zh) strong",
     ".spectrum-Heading:lang(zh) strong em",
+    ".spectrum-Typography",
     ".spectrum-Typography .spectrum-Body",
     ".spectrum-Typography .spectrum-Detail",
     ".spectrum-Typography .spectrum-Heading",
-    ".spectrum:lang(ar)",
-    ".spectrum:lang(he)"
+    ".spectrum-Typography:lang(ar)",
+    ".spectrum-Typography:lang(he)"
   ],
   "modifiers": [
     "--mod-body-cjk-emphasized-font-style",
@@ -313,6 +314,8 @@
     "--mod-body-font-size",
     "--mod-body-line-height",
     "--mod-body-margin",
+    "--mod-body-margin-end",
+    "--mod-body-margin-start",
     "--mod-body-sans-serif-emphasized-font-style",
     "--mod-body-sans-serif-emphasized-font-weight",
     "--mod-body-sans-serif-font-family",
@@ -350,6 +353,8 @@
     "--mod-code-font-style",
     "--mod-code-font-weight",
     "--mod-code-line-height",
+    "--mod-code-margin-end",
+    "--mod-code-margin-start",
     "--mod-code-strong-emphasized-font-style",
     "--mod-code-strong-emphasized-font-weight",
     "--mod-code-strong-font-style",
@@ -512,7 +517,7 @@
     "--spectrum-body-font-color",
     "--spectrum-body-font-size",
     "--spectrum-body-line-height",
-    "--spectrum-body-margin",
+    "--spectrum-body-margin-end",
     "--spectrum-body-margin-multiplier",
     "--spectrum-body-sans-serif-emphasized-font-style",
     "--spectrum-body-sans-serif-emphasized-font-weight",
@@ -571,7 +576,6 @@
     "--spectrum-code-strong-emphasized-font-weight",
     "--spectrum-code-strong-font-style",
     "--spectrum-code-strong-font-weight",
-    "--spectrum-default-font-style",
     "--spectrum-detail-cjk-emphasized-font-style",
     "--spectrum-detail-cjk-emphasized-font-weight",
     "--spectrum-detail-cjk-font-family",
@@ -641,7 +645,6 @@
     "--spectrum-font-family-ar",
     "--spectrum-font-family-he",
     "--spectrum-font-size",
-    "--spectrum-font-size-100",
     "--spectrum-font-style",
     "--spectrum-heading-cjk-emphasized-font-style",
     "--spectrum-heading-cjk-emphasized-font-weight",
diff --git a/components/typography/index.css b/components/typography/index.css
index c7ec710b78..25ffeaa8a2 100644
--- a/components/typography/index.css
+++ b/components/typography/index.css
@@ -12,15 +12,7 @@
  */
 
 /* Typography - Default */
-/* stylelint-disable selector-class-pattern -- @todo update this in a future breaking change to :root or .spectrum-Typography */
-.spectrum {
-	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-
-	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-font-style: var(--spectrum-default-font-style);
-	--spectrum-font-size: var(--spectrum-font-size-100);
-
+.spectrum-Typography {
 	font-family: var(--spectrum-font-family);
 	font-style: var(--spectrum-font-style);
 	font-size: var(--spectrum-font-size);
@@ -32,23 +24,21 @@
 	&:lang(he) {
 		font-family: var(--spectrum-font-family-he);
 	}
-}
-/* stylelint-enable selector-class-pattern */
-
-/* Typography - Heading */
-
-/* Heading tokens */
-.spectrum-Heading {
-	--spectrum-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-heading-serif-font-family: var(--spectrum-serif-font-family-stack);
-	--spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack);
 
-	--spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
+	/* Add margin when inside a Typography component */
+	.spectrum-Heading {
+		--spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier));
+		--spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier));
+	}
 
-	--spectrum-heading-font-color: var(--spectrum-heading-color);
+	.spectrum-Body {
+		--spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
+	}
 
-	--spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier));
-	--spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier));
+	.spectrum-Detail {
+		--spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier));
+		--spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier));
+	}
 }
 
 /* Windows high contrast mode */
@@ -56,9 +46,27 @@
 	.spectrum-Heading {
 		--highcontrast-heading-font-color: Text;
 	}
+
+	.spectrum-Body {
+		--highcontrast-body-font-color: Text;
+	}
+
+	.spectrum-Detail {
+		--highcontrast-detail-font-color: Text;
+	}
+
+	.spectrum-Code {
+		--highcontrast-code-font-color: Text;
+	}
+}
+
+/* Heading */
+.spectrum-Heading,
+.spectrum-Heading--sizeM {
+	--spectrum-heading-font-size: var(--spectrum-heading-size-m);
+	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m);
 }
 
-/* Heading t-shirt sizes */
 .spectrum-Heading--sizeXXS {
 	--spectrum-heading-font-size: var(--spectrum-heading-size-xxs);
 	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs);
@@ -74,11 +82,6 @@
 	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s);
 }
 
-.spectrum-Heading--sizeM {
-	--spectrum-heading-font-size: var(--spectrum-heading-size-m);
-	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m);
-}
-
 .spectrum-Heading--sizeL {
 	--spectrum-heading-font-size: var(--spectrum-heading-size-l);
 	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l);
@@ -99,16 +102,26 @@
 	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl);
 }
 
-/* Heading styles */
 .spectrum-Heading {
+	--spectrum-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-heading-serif-font-family: var(--spectrum-serif-font-family-stack);
+
+	--spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack);
+	--spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
+
+	--spectrum-heading-font-color: var(--spectrum-heading-color);
+
+	--spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier));
+	--spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier));
+
 	font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family));
 	font-style: var(--mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style));
 	font-weight: var(--mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight));
 	font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size));
 	color: var(--highcontrast-heading-font-color, var(--mod-heading-font-color, var(--spectrum-heading-font-color)));
 	line-height: var(--mod-heading-line-height, var(--spectrum-heading-line-height));
-	margin-block-start: 0;
-	margin-block-end: 0;
+	margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start, 0));
+	margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end, 0));
 
 	strong,
 	.spectrum-Heading-strong {
@@ -339,35 +352,12 @@
 	}
 }
 
-/* Add margin when inside a Typography component */
-.spectrum-Typography .spectrum-Heading {
-	margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start));
-	margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end));
-}
-
 /* Body */
-
-/* Body tokens */
-.spectrum-Body {
-	--spectrum-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack);
-	--spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack);
-
-	--spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
-
-	--spectrum-body-margin: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
-
-	--spectrum-body-font-color: var(--spectrum-body-color);
-}
-
-/* Windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-Body {
-		--highcontrast-body-font-color: Text;
-	}
+.spectrum-Body,
+.spectrum-Body--sizeM {
+	--spectrum-body-font-size: var(--spectrum-body-size-m);
 }
 
-/* Body t-shirt sizes */
 .spectrum-Body--sizeXS {
 	--spectrum-body-font-size: var(--spectrum-body-size-xs);
 }
@@ -376,10 +366,6 @@
 	--spectrum-body-font-size: var(--spectrum-body-size-s);
 }
 
-.spectrum-Body--sizeM {
-	--spectrum-body-font-size: var(--spectrum-body-size-m);
-}
-
 .spectrum-Body--sizeL {
 	--spectrum-body-font-size: var(--spectrum-body-size-l);
 }
@@ -396,17 +382,23 @@
 	--spectrum-body-font-size: var(--spectrum-body-size-xxxl);
 }
 
-/* Body styles */
-
-/* Body - Default */
 .spectrum-Body {
+	--spectrum-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack);
+
+	--spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack);
+	--spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
+
+	--spectrum-body-font-color: var(--spectrum-body-color);
+
 	font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family));
 	font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style));
 	font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight));
 	font-size: var(--mod-body-font-size, var(--spectrum-body-font-size));
 	color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color)));
-	margin-block-start: 0;
-	margin-block-end: 0;
+
+	margin-block-start: var(--mod-body-margin-start, var(--mod-body-margin, 0));
+	margin-block-end: var(--mod-body-margin-end, var(--mod-body-margin, var(--spectrum-body-margin-end, 0)));
 
 	line-height: var(--mod-body-line-height, var(--spectrum-body-line-height));
 
@@ -461,6 +453,7 @@
 	}
 }
 
+/* Body - Serif */
 .spectrum-Body--serif {
 	font-family: var(--mod-body-serif-font-family, var(--spectrum-body-serif-font-family));
 	font-weight: var(--mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight));
@@ -486,41 +479,16 @@
 	}
 }
 
-/* Add margin when inside a Typography component */
-.spectrum-Typography .spectrum-Body {
-	margin-block-end: var(--mod-body-margin, var(--spectrum-body-margin));
-}
-
 /* Detail */
-
-/* Detail tokens */
-.spectrum-Detail {
-	--spectrum-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-detail-serif-font-family: var(--spectrum-serif-font-family-stack);
-	--spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack);
-
-	--spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier));
-	--spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier));
-
-	--spectrum-detail-font-color: var(--spectrum-detail-color);
-}
-
-/* Windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-Detail {
-		--highcontrast-detail-font-color: Text;
-	}
+.spectrum-Detail,
+.spectrum-Detail--sizeM {
+	--spectrum-detail-font-size: var(--spectrum-detail-size-m);
 }
 
-/* Detail t-shirt sizes */
 .spectrum-Detail--sizeS {
 	--spectrum-detail-font-size: var(--spectrum-detail-size-s);
 }
 
-.spectrum-Detail--sizeM {
-	--spectrum-detail-font-size: var(--spectrum-detail-size-m);
-}
-
 .spectrum-Detail--sizeL {
 	--spectrum-detail-font-size: var(--spectrum-detail-size-l);
 }
@@ -529,14 +497,22 @@
 	--spectrum-detail-font-size: var(--spectrum-detail-size-xl);
 }
 
-/* Detail styles */
 .spectrum-Detail {
+	--spectrum-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-detail-serif-font-family: var(--spectrum-serif-font-family-stack);
+	--spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack);
+
+	--spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier));
+	--spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier));
+
+	--spectrum-detail-font-color: var(--spectrum-detail-color);
+
 	font-family: var(--mod-detail-sans-serif-font-family, var(--spectrum-detail-sans-serif-font-family));
 	font-style: var(--mod-detail-sans-serif-font-style, var(--spectrum-detail-sans-serif-font-style));
 	font-weight: var(--mod-detail-sans-serif-font-weight, var(--spectrum-detail-sans-serif-font-weight));
 	font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size));
-	margin-block-start: 0;
-	margin-block-end: 0;
+	margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start, 0));
+	margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end, 0));
 
 	color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color)));
 
@@ -593,6 +569,7 @@
 	}
 }
 
+/* Detail - Serif */
 .spectrum-Detail--serif {
 	font-family: var(--mod-detail-serif-font-family, var(--spectrum-detail-serif-font-family));
 	font-style: var(--mod-detail-serif-font-style, var(--spectrum-detail-serif-font-style));
@@ -618,7 +595,7 @@
 	}
 }
 
-/* Detail - Light  */
+/* Detail - Light */
 .spectrum-Detail--light {
 	font-style: var(--mod-detail-sans-serif-light-font-style, var(--spectrum-detail-sans-serif-light-font-style));
 	font-weight: var(--spectrum-detail-sans-serif-light-font-weight, var(--spectrum-detail-sans-serif-light-font-weight));
@@ -667,6 +644,7 @@
 	}
 }
 
+/* Detail - Serif - Light */
 .spectrum-Detail--serif.spectrum-Detail--light {
 	font-style: var(--mod-detail-serif-light-font-style, var(--spectrum-detail-serif-light-font-style));
 	font-weight: var(--mod-detail-serif-light-font-weight, var(--spectrum-detail-serif-light-font-weight));
@@ -691,29 +669,12 @@
 	}
 }
 
-/* Add margin when inside a Typography component */
-.spectrum-Typography .spectrum-Detail {
-	margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start));
-	margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end));
-}
-
 /* Code */
-
-/* Code tokens */
-.spectrum-Code {
-	--spectrum-code-font-family: var(--spectrum-code-font-family-stack);
-	--spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
-	--spectrum-code-font-color: var(--spectrum-code-color);
-}
-
-/* Windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-Code {
-		--highcontrast-code-font-color: Text;
-	}
+.spectrum-Code,
+.spectrum-Code--sizeM {
+	--spectrum-code-font-size: var(--spectrum-code-size-m);
 }
 
-/* Code t-shirt sizes */
 .spectrum-Code--sizeXS {
 	--spectrum-code-font-size: var(--spectrum-code-size-xs);
 }
@@ -722,10 +683,6 @@
 	--spectrum-code-font-size: var(--spectrum-code-size-s);
 }
 
-.spectrum-Code--sizeM {
-	--spectrum-code-font-size: var(--spectrum-code-size-m);
-}
-
 .spectrum-Code--sizeL {
 	--spectrum-code-font-size: var(--spectrum-code-size-l);
 }
@@ -734,14 +691,17 @@
 	--spectrum-code-font-size: var(--spectrum-code-size-xl);
 }
 
-/* Code styles */
 .spectrum-Code {
+	--spectrum-code-font-family: var(--spectrum-code-font-family-stack);
+	--spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
+	--spectrum-code-font-color: var(--spectrum-code-color);
+
 	font-family: var(--mod-code-font-family, var(--spectrum-code-font-family));
 	font-style: var(--mod-code-font-style, var(--spectrum-code-font-style));
 	font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight));
 	font-size: var(--mod-code-font-size, var(--spectrum-code-font-size));
-	margin-block-start: 0;
-	margin-block-end: 0;
+	margin-block-start: var(--mod-code-margin-start, 0);
+	margin-block-end: var(--mod-code-margin-end, 0);
 
 	line-height: var(--mod-code-line-height, var(--spectrum-code-line-height));
 
diff --git a/components/typography/metadata/mods.md b/components/typography/metadata/mods.md
deleted file mode 100644
index 25bd5b5f0e..0000000000
--- a/components/typography/metadata/mods.md
+++ /dev/null
@@ -1,198 +0,0 @@
-| Modifiable custom properties                                   |
-| -------------------------------------------------------------- |
-| `--mod-body-cjk-emphasized-font-style`                         |
-| `--mod-body-cjk-emphasized-font-weight`                        |
-| `--mod-body-cjk-font-family`                                   |
-| `--mod-body-cjk-font-style`                                    |
-| `--mod-body-cjk-font-weight`                                   |
-| `--mod-body-cjk-letter-spacing`                                |
-| `--mod-body-cjk-line-height`                                   |
-| `--mod-body-cjk-strong-emphasized-font-style`                  |
-| `--mod-body-cjk-strong-emphasized-font-weight`                 |
-| `--mod-body-cjk-strong-font-style`                             |
-| `--mod-body-cjk-strong-font-weight`                            |
-| `--mod-body-font-color`                                        |
-| `--mod-body-font-size`                                         |
-| `--mod-body-line-height`                                       |
-| `--mod-body-margin`                                            |
-| `--mod-body-sans-serif-emphasized-font-style`                  |
-| `--mod-body-sans-serif-emphasized-font-weight`                 |
-| `--mod-body-sans-serif-font-family`                            |
-| `--mod-body-sans-serif-font-style`                             |
-| `--mod-body-sans-serif-font-weight`                            |
-| `--mod-body-sans-serif-strong-emphasized-font-style`           |
-| `--mod-body-sans-serif-strong-emphasized-font-weight`          |
-| `--mod-body-sans-serif-strong-font-style`                      |
-| `--mod-body-sans-serif-strong-font-weight`                     |
-| `--mod-body-serif-emphasized-font-style`                       |
-| `--mod-body-serif-emphasized-font-weight`                      |
-| `--mod-body-serif-font-family`                                 |
-| `--mod-body-serif-font-style`                                  |
-| `--mod-body-serif-font-weight`                                 |
-| `--mod-body-serif-strong-emphasized-font-style`                |
-| `--mod-body-serif-strong-emphasized-font-weight`               |
-| `--mod-body-serif-strong-font-style`                           |
-| `--mod-body-serif-strong-font-weight`                          |
-| `--mod-code-cjk-emphasized-font-style`                         |
-| `--mod-code-cjk-emphasized-font-weight`                        |
-| `--mod-code-cjk-font-family`                                   |
-| `--mod-code-cjk-font-style`                                    |
-| `--mod-code-cjk-font-weight`                                   |
-| `--mod-code-cjk-letter-spacing`                                |
-| `--mod-code-cjk-line-height`                                   |
-| `--mod-code-cjk-strong-emphasized-font-style`                  |
-| `--mod-code-cjk-strong-emphasized-font-weight`                 |
-| `--mod-code-cjk-strong-font-style`                             |
-| `--mod-code-cjk-strong-font-weight`                            |
-| `--mod-code-emphasized-font-style`                             |
-| `--mod-code-emphasized-font-weight`                            |
-| `--mod-code-font-color`                                        |
-| `--mod-code-font-family`                                       |
-| `--mod-code-font-size`                                         |
-| `--mod-code-font-style`                                        |
-| `--mod-code-font-weight`                                       |
-| `--mod-code-line-height`                                       |
-| `--mod-code-strong-emphasized-font-style`                      |
-| `--mod-code-strong-emphasized-font-weight`                     |
-| `--mod-code-strong-font-style`                                 |
-| `--mod-code-strong-font-weight`                                |
-| `--mod-detail-cjk-emphasized-font-style`                       |
-| `--mod-detail-cjk-emphasized-font-weight`                      |
-| `--mod-detail-cjk-font-family`                                 |
-| `--mod-detail-cjk-font-style`                                  |
-| `--mod-detail-cjk-font-weight`                                 |
-| `--mod-detail-cjk-light-emphasized-font-style`                 |
-| `--mod-detail-cjk-light-emphasized-font-weight`                |
-| `--mod-detail-cjk-light-font-style`                            |
-| `--mod-detail-cjk-light-font-weight`                           |
-| `--mod-detail-cjk-light-strong-emphasized-font-style`          |
-| `--mod-detail-cjk-light-strong-emphasized-font-weight`         |
-| `--mod-detail-cjk-light-strong-font-style`                     |
-| `--mod-detail-cjk-light-strong-font-weight`                    |
-| `--mod-detail-cjk-line-height`                                 |
-| `--mod-detail-cjk-strong-emphasized-font-style`                |
-| `--mod-detail-cjk-strong-emphasized-font-weight`               |
-| `--mod-detail-cjk-strong-font-style`                           |
-| `--mod-detail-cjk-strong-font-weight`                          |
-| `--mod-detail-font-color`                                      |
-| `--mod-detail-font-size`                                       |
-| `--mod-detail-letter-spacing`                                  |
-| `--mod-detail-line-height`                                     |
-| `--mod-detail-margin-end`                                      |
-| `--mod-detail-margin-start`                                    |
-| `--mod-detail-sans-serif-emphasized-font-style`                |
-| `--mod-detail-sans-serif-emphasized-font-weight`               |
-| `--mod-detail-sans-serif-font-family`                          |
-| `--mod-detail-sans-serif-font-style`                           |
-| `--mod-detail-sans-serif-font-weight`                          |
-| `--mod-detail-sans-serif-light-emphasized-font-style`          |
-| `--mod-detail-sans-serif-light-emphasized-font-weight`         |
-| `--mod-detail-sans-serif-light-font-style`                     |
-| `--mod-detail-sans-serif-light-strong-emphasized-font-style`   |
-| `--mod-detail-sans-serif-light-strong-emphasized-font-weight`  |
-| `--mod-detail-sans-serif-light-strong-font-style`              |
-| `--mod-detail-sans-serif-light-strong-font-weight`             |
-| `--mod-detail-sans-serif-strong-emphasized-font-style`         |
-| `--mod-detail-sans-serif-strong-emphasized-font-weight`        |
-| `--mod-detail-sans-serif-strong-font-style`                    |
-| `--mod-detail-sans-serif-strong-font-weight`                   |
-| `--mod-detail-serif-emphasized-font-style`                     |
-| `--mod-detail-serif-emphasized-font-weight`                    |
-| `--mod-detail-serif-font-family`                               |
-| `--mod-detail-serif-font-style`                                |
-| `--mod-detail-serif-font-weight`                               |
-| `--mod-detail-serif-light-emphasized-font-style`               |
-| `--mod-detail-serif-light-emphasized-font-weight`              |
-| `--mod-detail-serif-light-font-style`                          |
-| `--mod-detail-serif-light-font-weight`                         |
-| `--mod-detail-serif-light-strong-emphasized-font-style`        |
-| `--mod-detail-serif-light-strong-emphasized-font-weight`       |
-| `--mod-detail-serif-light-strong-font-style`                   |
-| `--mod-detail-serif-light-strong-font-weight`                  |
-| `--mod-detail-serif-strong-emphasized-font-style`              |
-| `--mod-detail-serif-strong-emphasized-font-weight`             |
-| `--mod-detail-serif-strong-font-style`                         |
-| `--mod-detail-serif-strong-font-weight`                        |
-| `--mod-heading-cjk-emphasized-font-style`                      |
-| `--mod-heading-cjk-emphasized-font-weight`                     |
-| `--mod-heading-cjk-font-family`                                |
-| `--mod-heading-cjk-font-size`                                  |
-| `--mod-heading-cjk-font-style`                                 |
-| `--mod-heading-cjk-font-weight`                                |
-| `--mod-heading-cjk-heavy-emphasized-font-style`                |
-| `--mod-heading-cjk-heavy-emphasized-font-weight`               |
-| `--mod-heading-cjk-heavy-font-style`                           |
-| `--mod-heading-cjk-heavy-font-weight`                          |
-| `--mod-heading-cjk-heavy-strong-emphasized-font-style`         |
-| `--mod-heading-cjk-heavy-strong-emphasized-font-weight`        |
-| `--mod-heading-cjk-heavy-strong-font-style`                    |
-| `--mod-heading-cjk-heavy-strong-font-weight`                   |
-| `--mod-heading-cjk-letter-spacing`                             |
-| `--mod-heading-cjk-light-emphasized-font-style`                |
-| `--mod-heading-cjk-light-emphasized-font-weight`               |
-| `--mod-heading-cjk-light-font-style`                           |
-| `--mod-heading-cjk-light-font-weight`                          |
-| `--mod-heading-cjk-light-strong-emphasized-font-style`         |
-| `--mod-heading-cjk-light-strong-emphasized-font-weight`        |
-| `--mod-heading-cjk-light-strong-font-style`                    |
-| `--mod-heading-cjk-light-strong-font-weight`                   |
-| `--mod-heading-cjk-line-height`                                |
-| `--mod-heading-cjk-strong-emphasized-font-style`               |
-| `--mod-heading-cjk-strong-emphasized-font-weight`              |
-| `--mod-heading-cjk-strong-font-style`                          |
-| `--mod-heading-cjk-strong-font-weight`                         |
-| `--mod-heading-font-color`                                     |
-| `--mod-heading-font-size`                                      |
-| `--mod-heading-line-height`                                    |
-| `--mod-heading-margin-end`                                     |
-| `--mod-heading-margin-start`                                   |
-| `--mod-heading-sans-serif-emphasized-font-style`               |
-| `--mod-heading-sans-serif-emphasized-font-weight`              |
-| `--mod-heading-sans-serif-font-family`                         |
-| `--mod-heading-sans-serif-font-style`                          |
-| `--mod-heading-sans-serif-font-weight`                         |
-| `--mod-heading-sans-serif-heavy-emphasized-font-style`         |
-| `--mod-heading-sans-serif-heavy-emphasized-font-weight`        |
-| `--mod-heading-sans-serif-heavy-font-style`                    |
-| `--mod-heading-sans-serif-heavy-font-weight`                   |
-| `--mod-heading-sans-serif-heavy-strong-emphasized-font-style`  |
-| `--mod-heading-sans-serif-heavy-strong-emphasized-font-weight` |
-| `--mod-heading-sans-serif-heavy-strong-font-style`             |
-| `--mod-heading-sans-serif-heavy-strong-font-weight`            |
-| `--mod-heading-sans-serif-light-emphasized-font-style`         |
-| `--mod-heading-sans-serif-light-emphasized-font-weight`        |
-| `--mod-heading-sans-serif-light-font-style`                    |
-| `--mod-heading-sans-serif-light-font-weight`                   |
-| `--mod-heading-sans-serif-light-strong-emphasized-font-style`  |
-| `--mod-heading-sans-serif-light-strong-emphasized-font-weight` |
-| `--mod-heading-sans-serif-light-strong-font-style`             |
-| `--mod-heading-sans-serif-light-strong-font-weight`            |
-| `--mod-heading-sans-serif-strong-emphasized-font-style`        |
-| `--mod-heading-sans-serif-strong-emphasized-font-weight`       |
-| `--mod-heading-sans-serif-strong-font-style`                   |
-| `--mod-heading-sans-serif-strong-font-weight`                  |
-| `--mod-heading-serif-emphasized-font-style`                    |
-| `--mod-heading-serif-emphasized-font-weight`                   |
-| `--mod-heading-serif-font-family`                              |
-| `--mod-heading-serif-font-style`                               |
-| `--mod-heading-serif-font-weight`                              |
-| `--mod-heading-serif-heavy-emphasized-font-style`              |
-| `--mod-heading-serif-heavy-emphasized-font-weight`             |
-| `--mod-heading-serif-heavy-font-style`                         |
-| `--mod-heading-serif-heavy-font-weight`                        |
-| `--mod-heading-serif-heavy-strong-emphasized-font-style`       |
-| `--mod-heading-serif-heavy-strong-emphasized-font-weight`      |
-| `--mod-heading-serif-heavy-strong-font-style`                  |
-| `--mod-heading-serif-heavy-strong-font-weight`                 |
-| `--mod-heading-serif-light-emphasized-font-style`              |
-| `--mod-heading-serif-light-emphasized-font-weight`             |
-| `--mod-heading-serif-light-font-style`                         |
-| `--mod-heading-serif-light-font-weight`                        |
-| `--mod-heading-serif-light-strong-emphasized-font-style`       |
-| `--mod-heading-serif-light-strong-emphasized-font-weight`      |
-| `--mod-heading-serif-light-strong-font-style`                  |
-| `--mod-heading-serif-light-strong-font-weight`                 |
-| `--mod-heading-serif-strong-emphasized-font-style`             |
-| `--mod-heading-serif-strong-emphasized-font-weight`            |
-| `--mod-heading-serif-strong-font-style`                        |
-| `--mod-heading-serif-strong-font-weight`                       |
diff --git a/components/typography/package.json b/components/typography/package.json
index 9be0845005..a218794d99 100644
--- a/components/typography/package.json
+++ b/components/typography/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/typography/stories/typography.mdx b/components/typography/stories/typography.mdx
index fe2358db43..c6c198de12 100644
--- a/components/typography/stories/typography.mdx
+++ b/components/typography/stories/typography.mdx
@@ -1,17 +1,17 @@
 import {
-  Meta,
-  Title,
-  Subtitle,
-  Description,
-  ArgTypes,
-  Canvas,
-  Source,
-  Story,
+	Meta,
+	Title,
+	Subtitle,
+	Description,
+	ArgTypes,
+	Canvas,
+	Source,
+	Story,
 } from "@storybook/blocks";
 import {
-  ComponentDetails,
-  TaggedReleases,
-  PropertiesTable,
+	ComponentDetails,
+	TaggedReleases,
+	PropertiesTable,
 } from "@spectrum-css/preview/blocks";
 
 import * as TypographyStories from "./typography.stories";
diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js
index ae6c313705..044a76bc5b 100644
--- a/components/typography/stories/typography.stories.js
+++ b/components/typography/stories/typography.stories.js
@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import {
 	DocsBodyVariants,
@@ -77,6 +77,10 @@ export default {
 		semantics: "body",
 	},
 	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=1-3",
+		},
 		packageJson,
 		metadata,
 	},
diff --git a/components/underlay/metadata/metadata.json b/components/underlay/dist/metadata.json
similarity index 94%
rename from components/underlay/metadata/metadata.json
rename to components/underlay/dist/metadata.json
index d093127754..6b35fb4f7f 100644
--- a/components/underlay/metadata/metadata.json
+++ b/components/underlay/dist/metadata.json
@@ -2,7 +2,6 @@
   "sourceFile": "index.css",
   "selectors": [".spectrum-Underlay", ".spectrum-Underlay.is-open"],
   "modifiers": [
-    "--mod-overlay-animation-duration",
     "--mod-overlay-animation-duration-opened",
     "--mod-underlay-background-color",
     "--mod-underlay-background-entry-animation-delay",
@@ -23,7 +22,6 @@
   ],
   "global": [
     "--spectrum-animation-duration-0",
-    "--spectrum-animation-duration-100",
     "--spectrum-animation-duration-200",
     "--spectrum-animation-duration-300",
     "--spectrum-animation-duration-600",
diff --git a/components/underlay/index.css b/components/underlay/index.css
index ff93c86a8c..42effdc418 100644
--- a/components/underlay/index.css
+++ b/components/underlay/index.css
@@ -11,28 +11,27 @@
  * governing permissions and limitations under the License.
  */
 
-@import "@spectrum-css/commons/overlay.css";
-
 .spectrum-Underlay {
-	--spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
-	--spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in);
-	--spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out);
-	--spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
-	--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300);
-	--spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
+	--spectrum-underlay-background-exit-animation-duration: var(--mod-underlay-background-exit-animation-duration, var(--spectrum-animation-duration-300));
+	--spectrum-underlay-background-exit-animation-ease: var(--mod-underlay-background-exit-animation-ease, var(--spectrum-animation-ease-in));
+	--spectrum-underlay-background-exit-animation-delay: var(--mod-underlay-background-exit-animation-delay, var(--spectrum-animation-duration-200));
+	--spectrum-underlay-background-entry-animation-duration: var(--mod-underlay-background-entry-animation-duration, var(--spectrum-animation-duration-600));
+	--spectrum-underlay-background-entry-animation-ease: var(--mod-underlay-background-entry-animation-ease, var(--spectrum-animation-ease-out));
+	/* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-underlay-background-entry-animation-delay */
+	--spectrum-underlay-background-entry-animation-delay: var(--mod-underlay-background-entry-animation-delay, var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0)));
 
 	/* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */
-	--spectrum-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
-}
+	--spectrum-underlay-background-color: var(--mod-underlay-background-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)));
 
-.spectrum-Underlay {
-	@extend %spectrum-overlay;
+	pointer-events: none;
+	visibility: hidden;
+	opacity: 0;
 
 	position: fixed;
 	inset-block: 0;
 	inset-inline: 0;
 
-	background-color: var(--mod-underlay-background-color, var(--spectrum-underlay-background-color));
+	background-color: var(--spectrum-underlay-background-color);
 
 	/* Float above things by default */
 	z-index: 1;
@@ -41,13 +40,16 @@
 
 	/* Exit animations */
 	transition:
-		opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)) var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease)) var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)),
-		visibility 0ms linear calc(var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) + var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)));
-}
-
-.spectrum-Underlay.is-open {
-	@extend %spectrum-overlay--open;
-
-	/* Entry animations */
-	transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration)) var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease)) var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay));
+		opacity var(--spectrum-underlay-background-exit-animation-duration) var(--spectrum-underlay-background-exit-animation-ease) var(--spectrum-underlay-background-exit-animation-delay),
+		visibility 0ms linear calc(var(--spectrum-underlay-background-exit-animation-delay) + var(--spectrum-underlay-background-exit-animation-duration));
+
+	&.is-open {
+		pointer-events: auto;
+		visibility: visible;
+		opacity: 1;
+
+		/* Entry animations */
+		transition: opacity var(--spectrum-underlay-background-entry-animation-duration) var(--spectrum-underlay-background-entry-animation-ease) var(--spectrum-underlay-background-entry-animation-delay);
+		transition-delay: var(--spectrum-underlay-background-entry-animation-delay);
+	}
 }
diff --git a/components/underlay/metadata/mods.md b/components/underlay/metadata/mods.md
deleted file mode 100644
index e66baf3d55..0000000000
--- a/components/underlay/metadata/mods.md
+++ /dev/null
@@ -1,11 +0,0 @@
-| Modifiable custom properties                         |
-| ---------------------------------------------------- |
-| `--mod-overlay-animation-duration`                   |
-| `--mod-overlay-animation-duration-opened`            |
-| `--mod-underlay-background-color`                    |
-| `--mod-underlay-background-entry-animation-delay`    |
-| `--mod-underlay-background-entry-animation-duration` |
-| `--mod-underlay-background-entry-animation-ease`     |
-| `--mod-underlay-background-exit-animation-delay`     |
-| `--mod-underlay-background-exit-animation-duration`  |
-| `--mod-underlay-background-exit-animation-ease`      |
diff --git a/components/underlay/package.json b/components/underlay/package.json
index 0b6aad44aa..971fd836d9 100644
--- a/components/underlay/package.json
+++ b/components/underlay/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/underlay/stories/underlay.stories.js b/components/underlay/stories/underlay.stories.js
index 9abe083eb4..4b9a61662b 100644
--- a/components/underlay/stories/underlay.stories.js
+++ b/components/underlay/stories/underlay.stories.js
@@ -1,7 +1,7 @@
 import { Default as ModalStory } from "@spectrum-css/modal/stories/modal.stories.js";
 import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
 import { isOpen } from "@spectrum-css/preview/types";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { Template } from "./template.js";
 
diff --git a/components/well/metadata/metadata.json b/components/well/dist/metadata.json
similarity index 86%
rename from components/well/metadata/metadata.json
rename to components/well/dist/metadata.json
index 3d2c12b361..3587fa73f7 100644
--- a/components/well/metadata/metadata.json
+++ b/components/well/dist/metadata.json
@@ -12,6 +12,7 @@
     "--mod-well-padding"
   ],
   "component": [
+    "--spectrum-well-background-color",
     "--spectrum-well-border-color",
     "--spectrum-well-border-radius",
     "--spectrum-well-border-width",
@@ -23,9 +24,10 @@
   "global": [
     "--spectrum-body-color",
     "--spectrum-border-width-100",
+    "--spectrum-gray-1000-rgb",
     "--spectrum-gray-800-rgb"
   ],
-  "system-theme": [],
+  "system-theme": ["--system-well-border-color"],
   "passthroughs": [],
   "high-contrast": []
 }
diff --git a/components/well/index.css b/components/well/index.css
index f93a1f32f9..26abcff003 100644
--- a/components/well/index.css
+++ b/components/well/index.css
@@ -11,12 +11,13 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/spectrum-two.css";
+
 .spectrum-Well {
 	--spectrum-well-border-width: var(--spectrum-border-width-100);
 	--spectrum-well-content-color: var(--spectrum-body-color);
-}
+	--spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02);
 
-.spectrum-Well {
 	text-align: start;
 	display: block;
 	min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width));
@@ -25,7 +26,7 @@
 	border-width: var(--mod-well-border-width, var(--spectrum-well-border-width));
 	border-style: solid;
 	border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius));
-	background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02));
+	background-color: var(--mod-well-background-color, var(--spectrum-well-background-color));
 	border-color: var(--mod-well-border-color, var(--spectrum-well-border-color));
 	color: var(--mod-well-content-color, var(--spectrum-well-content-color));
 }
diff --git a/components/well/metadata/mods.md b/components/well/metadata/mods.md
deleted file mode 100644
index 99f96fddca..0000000000
--- a/components/well/metadata/mods.md
+++ /dev/null
@@ -1,10 +0,0 @@
-| Modifiable custom properties  |
-| ----------------------------- |
-| `--mod-well-background-color` |
-| `--mod-well-border-color`     |
-| `--mod-well-border-radius`    |
-| `--mod-well-border-width`     |
-| `--mod-well-content-color`    |
-| `--mod-well-margin-top`       |
-| `--mod-well-min-width`        |
-| `--mod-well-padding`          |
diff --git a/components/well/package.json b/components/well/package.json
index c67a3a0d95..7216e9b701 100644
--- a/components/well/package.json
+++ b/components/well/package.json
@@ -19,15 +19,16 @@
 		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
 		"./index.css": "./dist/index.css",
-		"./metadata.json": "./metadata/metadata.json",
-		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json"
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {
diff --git a/components/well/stories/template.js b/components/well/stories/template.js
index 033c5b014f..c9645cfdcd 100644
--- a/components/well/stories/template.js
+++ b/components/well/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-Well",
@@ -13,16 +16,18 @@ export const Template = ({
 	id = getRandomId("well"),
 	testId,
 	content = [],
-}, context) => html`
-	<span
-		class=${classMap({
-			[rootClass]: true,
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-		style=${styleMap(customStyles)}
-		id=${ifDefined(id)}
-		data-testid=${ifDefined(testId)}
-	>
-		${renderContent(content, { context })}
-	</span>
-`;
+} = {}, context = {}) => {
+	return html`
+		<span
+			class=${classMap({
+				[rootClass]: true,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			style=${styleMap(customStyles)}
+			id=${ifDefined(id)}
+			data-testid=${ifDefined(testId)}
+		>
+			${renderContent(content, { context })}
+		</span>
+	`;
+};
diff --git a/components/well/stories/well.stories.js b/components/well/stories/well.stories.js
index 843cf9136e..0858075e6e 100644
--- a/components/well/stories/well.stories.js
+++ b/components/well/stories/well.stories.js
@@ -1,7 +1,7 @@
 import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { WellGroup } from "./well.test.js";
 
diff --git a/components/well/themes/express.css b/components/well/themes/express.css
new file mode 100644
index 0000000000..9fd550418f
--- /dev/null
+++ b/components/well/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/well/themes/spectrum-two.css b/components/well/themes/spectrum-two.css
new file mode 100644
index 0000000000..f4a2ef0983
--- /dev/null
+++ b/components/well/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+	.spectrum-Well {
+		--spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05);
+	}
+}
diff --git a/components/well/themes/spectrum.css b/components/well/themes/spectrum.css
new file mode 100644
index 0000000000..5cfe712039
--- /dev/null
+++ b/components/well/themes/spectrum.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+	.spectrum-Well {
+		--spectrum-well-border-color: rgba(var(--spectrum-gray-900-rgb), 0.05);
+	}
+}
diff --git a/lint-staged.config.js b/lint-staged.config.js
index 1d1329387e..74aad2050c 100644
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -9,7 +9,7 @@ module.exports = {
 	"dist/*.css": [
 		"prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write --config .prettierrc"
 	],
-	"components/*/metadata/metadata.json": (files) => {
+	"components/*/dist/metadata.json": (files) => {
 		return [
 			...(files.map(file => `pajv test --valid -s ./schemas/metadata.schema.json -d "${file}"`) ?? []),
 		];
diff --git a/nx.json b/nx.json
index 27f171ffc3..49c5ac2afa 100644
--- a/nx.json
+++ b/nx.json
@@ -34,7 +34,8 @@
 			"cache": true,
 			"dependsOn": [
 				"^build",
-				"clean"
+				"clean",
+				{ "projects": "tokens", "target": "build" }
 			],
 			"executor": "nx:run-commands",
 			"inputs": [
@@ -48,7 +49,7 @@
 			],
 			"options": {
 				"commands": [
-					"node --no-warnings -e 'require(\"./tasks/component-builder.js\").default()'"
+					"cross-env NODE_OPTIONS=\"--no-warnings\" node -e 'require(\"./tasks/component-builder.js\").default()'"
 				]
 			},
 			"outputs": [
@@ -70,8 +71,7 @@
 			],
 			"options": {
 				"commands": [
-					"rimraf {projectRoot}/dist",
-					"test -d {projectRoot}/dist && echo \"Error: dist directory could not be removed\" && exit 1 || exit 0"
+					"rimraf {projectRoot}/dist/*.css {projectRoot}/dist/themes/*.css"
 				],
 				"parallel": false
 			},
@@ -120,7 +120,7 @@
 			],
 			"options": {
 				"commands": [
-					"prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.css {projectRoot}/**/*.css && stylelint --fix --cache --allow-empty-input {projectRoot}/*.css {projectRoot}/**/*.css",
+					"stylelint --fix --cache --allow-empty-input {projectRoot}/*.css {projectRoot}/**/*.css",
 					"eslint --fix --cache --no-error-on-unmatched-pattern {projectRoot}/*.json {projectRoot}/stories/*.js",
 					"prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{md,mdx} {projectRoot}/**/*.{md,mdx}"
 				]
@@ -160,8 +160,7 @@
 				]
 			},
 			"outputs": [
-				"{projectRoot}/metadata/mods.md",
-				"{projectRoot}/metadata/metadata.json"
+				"{projectRoot}/dist/metadata.json"
 			]
 		},
 		"test": {
@@ -201,7 +200,7 @@
 			],
 			"options": {
 				"commands": [
-					"test -e {projectRoot}/metadata && pajv validate -s ./schemas/metadata.schema.json -d \"{projectRoot}/metadata/metadata.json\" || exit 0"
+					"test -e {projectRoot}/metadata && pajv validate -s ./schemas/metadata.schema.json -d \"{projectRoot}/dist/metadata.json\" || exit 0"
 				]
 			}
 		}
diff --git a/package.json b/package.json
index 2fa540effb..7b8462abd1 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
 		"builder": "nx run-many --target build report --projects",
 		"bundle": "nx build bundle",
 		"changeset": "changeset",
-		"ci": "cross-env NODE_ENV=production yarn build --skip-nx-cache",
+		"ci": "cross-env NODE_ENV=production yarn builder tag:component,ui-icons --skip-nx-cache",
 		"ci:storybook": "cross-env NODE_ENV=development nx run storybook:build:ci --skip-nx-cache",
 		"clean": "yarn cleaner tag:component --skip-nx-cache",
 		"clean:bundle": "nx clean bundle --skip-nx-cache",
@@ -62,15 +62,13 @@
 		"tools/*"
 	],
 	"devDependencies": {
+		"@adobe/token-diff-generator": "^1.3.0",
 		"@changesets/changelog-github": "^0.5.0",
 		"@changesets/cli": "^2.27.11",
 		"@commitlint/cli": "^19.6.1",
 		"@commitlint/config-conventional": "^19.6.0",
 		"@nx/devkit": "^19.8.2",
-		"@spectrum-css/cyclebutton": "^3.1.3",
-		"@spectrum-css/quickaction": "^3.1.1",
-		"@spectrum-css/searchwithin": "^5.1.3",
-		"@spectrum-css/splitbutton": "^8.1.2",
+		"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.6.0",
 		"@spectrum-tools/postcss-add-theming-layer": "workspace:^",
 		"@spectrum-tools/postcss-property-rollup": "workspace:^",
 		"@spectrum-tools/postcss-rgb-mapping": "workspace:^",
diff --git a/plugins/postcss-property-rollup/CHANGELOG.md b/plugins/postcss-property-rollup/CHANGELOG.md
index 420e6f23d0..ae0dcf9971 100644
--- a/plugins/postcss-property-rollup/CHANGELOG.md
+++ b/plugins/postcss-property-rollup/CHANGELOG.md
@@ -1 +1,44 @@
 # Change Log
+
+## 2.0.1
+
+### Patch Changes
+
+- [#2775](https://github.com/adobe/spectrum-css/pull/2775) [`2452637`](https://github.com/adobe/spectrum-css/commit/2452637d1179b9b2b025dafeb5834720712413d7) Thanks [@castastrophe](https://github.com/castastrophe)! - Dependency minor and patch updates to support new features in tools leveraged
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+<a name="2.0.0"></a>
+
+## 2.0.0
+
+🗓 2024-01-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.2...postcss-combininator@2.0.0)
+
+### 🛑 BREAKING CHANGES
+
+Upgrade to PostCSS v8 [bd6c40e](https://github.com/adobe/spectrum-css/commit/bd6c40eb5a4b43df94dff1f325502e5cd08b7f5f)
+
+<a name="1.0.2"></a>
+
+## 1.0.2
+
+🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.0...postcss-combininator@1.0.2)
+
+**Note:** Version bump only for package postcss-combininator
+
+<a name="1.0.1"></a>
+
+## 1.0.1
+
+🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.0...postcss-combininator@1.0.1)
+
+**Note:** Version bump only for package postcss-combininator
+
+<a name="1.0.0"></a>
+
+## 1.0.0
+
+🗓 2023-03-27 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.0-beta.1...postcss-combininator@1.0.0)
+
+**Note:** Version bump only for package postcss-combininator
diff --git a/stylelint.config.js b/stylelint.config.js
index f12c5d3d1f..2761f849ca 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -159,7 +159,7 @@ module.exports = {
 	 * -------------------------------------------------------------- */
 	overrides: [
 		{
-			files: ["components/*/index.css"],
+			files: ["components/*/index.css", "components/*/themes/spectrum.css"],
 			rules: {
 				"selector-class-pattern": [
 					"^(spectrum-|is-|u-)[A-Za-z0-9-]+", {
@@ -217,8 +217,13 @@ module.exports = {
 			files: ["components/*/themes/*.css", "!components/*/themes/spectrum.css"],
 			rules: {
 				"spectrum-tools/no-unused-custom-properties": null,
+				"selector-class-pattern": [
+					"^(spectrum-|is-|u-)[A-Za-z0-9-]+", {
+						resolveNestedSelectors: true
+					}
+				],
 				"spectrum-tools/theme-alignment": [true, {
-					baseFilename: "spectrum",
+					baseFilename: "spectrum-two",
 				}],
 			},
 		},
diff --git a/tasks/component-builder.js b/tasks/component-builder.js
index 5081f5d5d4..d291d238d0 100644
--- a/tasks/component-builder.js
+++ b/tasks/component-builder.js
@@ -29,7 +29,6 @@ const {
 	getPackageFromPath,
 	validateComponentName,
 	fetchContent,
-	copy,
 	writeAndReport,
 } = require("./utilities.js");
 
@@ -81,6 +80,7 @@ async function processCSS(
 		to: output,
 		verbose: false,
 		minify,
+		shouldCombine: true,
 		...postCSSOptions,
 	};
 
@@ -168,20 +168,14 @@ async function build({ cwd = process.cwd(), clean = false, componentName } = {})
 		fs.mkdirSync(path.join(cwd, "dist"));
 	}
 
-	return Promise.all([
-		processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index.css"), {
-			cwd,
-			clean,
-			skipMapping: false,
-			referencesOnly: false,
-			preserveVariables: true,
-			stripLocalSelectors: false,
-		}).then(async (reports) => {
-			/** @deprecated Copy index.css to index-vars.css for backwards compatibility */
-			return copy(path.join(cwd, "dist", "index.css"), path.join(cwd, "dist", "index-vars.css"), { cwd })
-				.then(r => [r, ...reports]);
-		}),
-	]);
+	return processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index.css"), {
+		cwd,
+		clean,
+		skipMapping: true,
+		referencesOnly: false,
+		preserveVariables: true,
+		stripLocalSelectors: false,
+	});
 }
 
 /**
@@ -234,7 +228,7 @@ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) {
 				skipMapping: false,
 				referencesOnly: true,
 				preserveVariables: true,
-				stripLocalSelectors: false,
+				stripLocalSelectors: true,
 			},
 		),
 		// Expect this file to have component-specific selectors mapping to the system tokens but not the system tokens themselves
@@ -249,6 +243,7 @@ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) {
 				skipMapping: false,
 				stripLocalSelectors: true,
 				referencesOnly: false,
+				shouldCombine: false,
 				map: false,
 			},
 		),
diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js
index 4c8469ef48..3dee0268cc 100644
--- a/tasks/component-reporter.js
+++ b/tasks/component-reporter.js
@@ -195,23 +195,11 @@ async function main({
 	);
 
 	// Create the metadata directory if it doesn't exist
-	if (!fs.existsSync(path.join(cwd, "metadata"))) {
-		fs.mkdirSync(path.join(cwd, "metadata"));
+	if (!fs.existsSync(path.join(cwd, "dist"))) {
+		fs.mkdirSync(path.join(cwd, "dist"));
 	}
 
 	return Promise.all([
-		writeAndReport(
-			await prettier.format(
-				`${[
-					"| Modifiable custom properties |",
-					"| --- |",
-					...(meta?.modifiers ?? []).map((mod) => `| \`${mod}\` |`),
-				].join("\n")}\n`,
-				{ parser: "markdown" },
-			),
-			path.join(cwd, "metadata/mods.md"),
-			{ cwd, isDeprecated: true },
-		),
 		writeAndReport(
 			await prettier.format(
 				JSON.stringify({
@@ -226,7 +214,7 @@ async function main({
 				}, null, 2),
 				{ parser: "json" },
 			),
-			path.join(cwd, "metadata/metadata.json"),
+			path.join(cwd, "dist", "metadata.json"),
 			{ cwd },
 		),
 	])
diff --git a/tasks/utilities.js b/tasks/utilities.js
index 100969bd57..5e71357f5b 100644
--- a/tasks/utilities.js
+++ b/tasks/utilities.js
@@ -84,9 +84,14 @@ function getAllComponentNames(includeDeprecated = true) {
 	// Get a list of all the component names in the components directory that have a package.json file
 	// and a list of all the deprecated components in the storybook directory
 	// then combine and deduplicate the lists to get a full list of all components
+	let deprecated = [];
+	if (includeDeprecated && fs.existsSync(path.join(dirs.storybook, "deprecated"))) {
+		deprecated = fs.readdirSync(path.join(dirs.storybook, "deprecated"));
+	}
+
 	return [...new Set([
 		...fs.readdirSync(dirs.components).filter((file) => fs.existsSync(path.join(dirs.components, file, "package.json"))),
-		...(includeDeprecated ? fs.readdirSync(path.join(dirs.storybook, "deprecated")) : []),
+		...deprecated,
 	])];
 }
 
@@ -159,19 +164,6 @@ function extractProperties(
 	return found;
 }
 
-/**
- * Remove all files and folders from the provided directory's dist folder
- * @param {object} config
- * @param {string} config.cwd - Current working directory for the component being built
- * @returns Promise<void>
- */
-async function cleanFolder({ cwd = process.cwd() } = {}) {
-	// Nothing to do if there's no input file
-	if (!fs.existsSync(path.join(cwd, "dist"))) return Promise.resolve();
-
-	return fsp.rm(path.join(cwd, "dist"), { recursive: true, force: true }).then(() => fsp.mkdir(path.join(cwd, "dist")));
-}
-
 /**
  * Fetch content from glob input and optionally combine results
  * @param {(string|RegExp)[]} globs
@@ -183,7 +175,11 @@ async function cleanFolder({ cwd = process.cwd() } = {}) {
  */
 async function fetchContent(
 	globs = [],
-	{ cwd, shouldCombine = false, ...fastGlobOptions } = {},
+	{
+		cwd,
+		shouldCombine = false,
+		...fastGlobOptions
+	} = {},
 ) {
 	const files = await fg(globs, {
 		onlyFiles: true,
@@ -203,8 +199,12 @@ async function fetchContent(
 	// Combine the content into 1 file; @todo do this in future using CSS imports
 	if (shouldCombine) {
 		let content = "";
-		fileData.forEach((dataset) => {
-			if (dataset.content) content += "\n\n" + dataset.content;
+		fileData.forEach((dataset, idx) => {
+			if (dataset.content) {
+				if (idx > 0) content += "\n\n";
+				content += `/* Sourced from ${relativePrint(dataset.input, { cwd })} */\n`;
+				content += dataset.content;
+			}
 		});
 
 		return Promise.resolve([
@@ -244,14 +244,34 @@ async function copy(from, to, { cwd, isDeprecated = true } = {}) {
 		});
 	}
 
+	// Check if the input is a file or a directory
+	const stats = fs.statSync(from);
+	if (stats.isDirectory()) {
+		return fsp
+			.cp(from, to, { recursive: true, force: true })
+			.then(async () => {
+				// Determine the number of files and the size of the copied files
+				const stats = await fg(path.join(cwd, "components") + "/**/*", { onlyFiles: true, stats: true });
+				return `${"✓".green}  ${relativePrint(from, { cwd }).yellow} -> ${relativePrint(to, { cwd }).padEnd(20, " ").yellow} ${`copied ${stats.length >= 0 ? stats.length : "0"} files (${bytesToSize(stats.reduce((acc, details) => acc + details.stats.size, 0))})`.gray}`;
+			})
+			.catch((err) => {
+				if (!err) return;
+				console.log(
+					`${"✗".red}  ${relativePrint(from, { cwd }).yellow} could not be copied to ${relativePrint(to, { cwd }).yellow}`,
+				);
+				return Promise.reject(err);
+			});
+	}
+
 	const content = await fsp.readFile(from, { encoding: "utf-8" });
 	if (!content) return;
+
 	/** @todo add support for injecting a deprecation notice as a comment after the copyright */
 	return fsp
 		.writeFile(to, content, { encoding: "utf-8" })
 		.then(
 			() =>
-				`${"✓".green}  ${relativePrint(to, { cwd }).padEnd(20, " ").yellow}  ${isDeprecated ? "-- deprecated --".gray : ""}`,
+				`${"✓".green}  ${relativePrint(from, { cwd }).yellow} -> ${relativePrint(to, { cwd }).padEnd(20, " ").yellow}  ${(isDeprecated ? "-- deprecated --" : `copied ${stats.size ? `(${bytesToSize(stats.size)})` : ""}`).gray}`,
 		)
 		.catch((err) => {
 			if (!err) return;
@@ -294,7 +314,6 @@ async function writeAndReport(content, output, { cwd = process.cwd(), encoding =
 
 module.exports = {
 	bytesToSize,
-	cleanFolder,
 	copy,
 	dirs,
 	extractProperties,
diff --git a/tokens/README.md b/tokens/README.md
index 1fea950345..a0e99bf238 100644
--- a/tokens/README.md
+++ b/tokens/README.md
@@ -4,24 +4,64 @@
 
 This package uses StyleDictionary to build Spectrum core tokens for CSS.
 
-## Output
+## Glossary
 
-The output is concatenated into a single `dist/index.css` for use in Spectrum CSS. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens.
+- **Core tokens**: The base set of design data that define the system. These are the key-value pairs that are used to build the design system and are sourced from the design team via @adobe/spectrum-tokens. You can find the relevant versioning information in the `package.json` file.
+- **Custom properties**: These are CSS variables generated from the core tokens using the StyleDictionary build process. These are used in the CSS base styles to apply the design system to the components in a way that can respond to changes in color, scale, or context.
+- **Context**: This terms refers to the design language an application wants to use. Contexts previously supported were Spectrum and Express. The current system supports only Spectrum but has committed to offering backward compatibility through at least December 2024.
+- **Color**: This term refers to the color mode. The current system supports light and dark only. The lightest and darkest color modes were deprecated in the final version for **14.x**.
+- **Scale**: This term refers to the scale of the design system. The current system supports medium and large scales. The large scale is used for mobile applications and the medium scale is used for desktop applications.
+- **System variables**: These are randomly generated variable names (prefixed with `--system`) that are used to map the component-level class styles to the core tokens from the desired context. These are generated by the `postcss-add-theming-layer` plugin as part of the build and should not be relied upon for naming consistency across releases. **Do not attempt to overwrite or extend these variables in your application.**
 
-On the `<html>` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to Express, add `.spectrum--express`.
+## Backwards compatibility for Spectrum 1 and Express
+
+Though the token data in this package focus on only the current context (Spectrum 2), our team is committed to offering backwards compatibility for Spectrum 1 and Express through at least December of 2024.
+
+To this end, every component that requires backward mapping support will include:
+
+- Spectrum 1: `dist/themes/spectrum.css`
+- Express: `dist/themes/express.css`
+- Spectrum 2: `dist/themes/spectrum-two.css`
+
+Consumers should load only the mappings for the components they are using in their application. This will ensure that the component-level mappings are aligned with the base CSS for each component. Spectrum 1 and Express component mappings should be loaded with the `global-vars.css` and appropriate color and scale assets from the last version of the tokens package: **v14.x**. Loading the Spectrum 1 or Express component-level mappings with the Spectrum 2 global variables will result in incorrect values being applied to the components and will break the desired design for the component.
+
+## Usage
+
+The output is concatenated into a single `dist/index.css` for use in a vanilla HTML application. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens.
+
+On the `<body>` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to another context, add `.spectrum--legacy` or `.spectrum--express`.
+
+For additional guidance on which assets to load, see the architecture section below.
+
+## Architecture
+
+All compiled assets are shipped from the `dist` folder. Most of the assets are available in the `dist/css` folder. The component-level mappings for Spectrum 1, Express, and Spectrum 2 exist in the components output as theme assets. These should be loaded with the appropriate global variables and color and scale assets from the last version of the tokens package: **v14.x**.
+
+### Global core tokens
+
+- `global-vars.css`: Shared global, unchanging tokens.
+- `light-vars.css`: Tokens specific to the light color.
+- `dark-vars.css`: Tokens specific to the dark color.
+- `medium-vars.css`: Tokens specific to the medium (desktop) scale.
+- `large-vars.css`: Tokens specific to the large (mobile) scale.
+- `index.css`: The above files rolled up into 1 css file for convenience; best for use in a vanilla HTML application.
 
 ## Overrides and additions
 
-Overrides and additions to core tokens can be added to `custom.css`.
+Overrides and additions to core tokens can be added to `custom/*-vars.css`.
+
+Ensure that you add new values to the appropriate color, or scale file:
+
+- `global-vars.css` - Shared global, unchanging tokens
+- `light-vars.css` - Tokens specific to the light color
+- `dark-vars.css` - Tokens specific to the dark color
+- `medium-vars.css` - Tokens specific to the medium (desktop) scale
+- `large-vars.css` - Tokens specific to the large (mobile) scale
+
+Values added here will be copied over and concatenated with the custom properties being generated from the core tokens by StyleDictionary.
+
+## Breaking changes from v14 to v15
 
-Ensure that you correctly scope any added tokens:
+There are no additional contextual folders (i.e., `dist/css/spectrum/`) because this package supports no other theming systems outside of the component token mappings. All global tokens are found in the `dist/css` folder.
 
-- `.spectrum` - Global, unchanging tokens or tokens specific to the Spectrum flavor
-- `.spectrum--express` - Tokens specific to the Express flavor
-- `.spectrum--lightest` - Tokens specific to the light color stop (soon to be deprecated)
-- `.spectrum--light` - Tokens specific to the light color stop
-- `.spectrum--dark` - Tokens specific to the dark color stop
-- `.spectrum--darkest` - Tokens specific to the darkest color stop
-- `.spectrum--medium` - Tokens specific to the medium (desktop) scale
-- `.spectrum--large` - Tokens specific to the large (mobile) scale
-- `.spectrum--express.spectrum--*` - Tokens specific to the Express flavor for any of the above color stops and scales
+For more notes on how the token data has changed, see the [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens/releases) release documentation.
diff --git a/tokens/custom-express/dark-vars.css b/tokens/custom-express/dark-vars.css
deleted file mode 100644
index 25accff5f6..0000000000
--- a/tokens/custom-express/dark-vars.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express.spectrum--dark {
-	/* Drop Zone background color rgb */
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
-}
diff --git a/tokens/custom-express/darkest-vars.css b/tokens/custom-express/darkest-vars.css
deleted file mode 100644
index 36ef601d70..0000000000
--- a/tokens/custom-express/darkest-vars.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express.spectrum--darkest {
-	/* Drop Zone background color rgb */
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
-}
diff --git a/tokens/custom-express/light-vars.css b/tokens/custom-express/light-vars.css
deleted file mode 100644
index b82ab862f4..0000000000
--- a/tokens/custom-express/light-vars.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express.spectrum--light,
-.spectrum--express.spectrum--lightest {
-	/* Drop Zone background color rgb */
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); /* var(--spectrum-accent-color-800);*/
-	--spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
-
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900);
-}
diff --git a/tokens/custom-spectrum/darkest-vars.css b/tokens/custom-spectrum/darkest-vars.css
deleted file mode 100644
index 54278af3c6..0000000000
--- a/tokens/custom-spectrum/darkest-vars.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--darkest {
-	--spectrum-menu-item-background-color-default: rgba(255, 255, 255, 0); /* --spectrum-gray-900 */
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
-
-	/* Drop Zone background color rgb */
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
-
-	/* Drop Indicator color rgb */
-	--spectrum-dropindicator-color: var(--spectrum-blue-700);
-
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-down: rgba(var(--spectrum-white-rgb), 0.15);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
-
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-
-	--spectrum-swatch-border-color: rgba(255, 255, 255, 51%);
-	--spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%);
-}
diff --git a/tokens/custom-spectrum/dark-vars.css b/tokens/custom/dark-vars.css
similarity index 80%
rename from tokens/custom-spectrum/dark-vars.css
rename to tokens/custom/dark-vars.css
index 295917dab1..df53227a15 100644
--- a/tokens/custom-spectrum/dark-vars.css
+++ b/tokens/custom/dark-vars.css
@@ -14,16 +14,21 @@
 /* This file contains overrides and additions to core tokens */
 
 .spectrum--dark {
-	--spectrum-menu-item-background-color-default: rgba(255, 255, 255, 0); /* --spectrum-gray-900 */
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--color-scheme: dark;
 
-	/* Drop Zone background color rgb */
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
+	/** COMPONENT-SPECIFIC OVERRIDES **/
+	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
+	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
+	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
+	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
+	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
 
-	/* Drop Indicator color rgb */
-	--spectrum-dropindicator-color: var(--spectrum-blue-700);
+	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
+
+	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
 
 	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
 	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
@@ -33,42 +38,28 @@
 	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
 	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
 	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-
 	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
 
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-
 	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
 
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900); */
 
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+	--spectrum-dropindicator-color: var(--spectrum-blue-700);
 
 	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
 	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
 	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
 	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-
 	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
 	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
 	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
 	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
 
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
+	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
 
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-swatch-border-color: rgb(255 255 255 / 51%);
+	--spectrum-swatch-border-color-light: rgb(255 255 255 / 20%);
 
-	--spectrum-swatch-border-color: rgba(255, 255, 255, 51%);
-	--spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%);
+	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
+	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
 }
diff --git a/tokens/custom-spectrum/global-vars.css b/tokens/custom/global-vars.css
similarity index 88%
rename from tokens/custom-spectrum/global-vars.css
rename to tokens/custom/global-vars.css
index 22398c3c24..55cad6984b 100644
--- a/tokens/custom-spectrum/global-vars.css
+++ b/tokens/custom/global-vars.css
@@ -14,7 +14,7 @@
 /* This file contains overrides and additions to core tokens */
 .spectrum {
 	--system: spectrum;
-	--spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
+
 	--spectrum-animation-duration-0: 0ms;
 	--spectrum-animation-duration-100: 130ms;
 	--spectrum-animation-duration-200: 160ms;
@@ -29,6 +29,9 @@
 	--spectrum-animation-duration-2000: 1000ms;
 	--spectrum-animation-duration-4000: 2000ms;
 	--spectrum-animation-duration-6000: 3000ms;
+
+	--spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
+
 	--spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
 	--spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
 	--spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
@@ -43,8 +46,8 @@
 
 	--spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
 
-	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
 	/* stylelint-enable value-keyword-case */
 
 	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
@@ -55,8 +58,8 @@
 	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
 
 	/* static white / black background color for docs containers */
-	--spectrum-docs-static-white-background-color: rgb(15, 121, 125);
-	--spectrum-docs-static-black-background-color: rgb(181, 209, 211);
+	--spectrum-docs-static-white-background-color: rgb(15 121 125);
+	--spectrum-docs-static-black-background-color: rgb(181 209 211);
 
 	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
 }
diff --git a/tokens/custom-spectrum/large-vars.css b/tokens/custom/large-vars.css
similarity index 96%
rename from tokens/custom-spectrum/large-vars.css
rename to tokens/custom/large-vars.css
index d27039667c..358ad3404c 100644
--- a/tokens/custom-spectrum/large-vars.css
+++ b/tokens/custom/large-vars.css
@@ -14,33 +14,22 @@
 /* This file contains overrides and additions to core tokens */
 
 .spectrum--large {
-	--spectrum-slider-tick-mark-height: 13px;
-	--spectrum-slider-ramp-track-height: 20px;
-
-	--spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
-	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-	--spectrum-colorwheel-colorarea-container-size: 182px;
-
-	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
-
-	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
-
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--scale: large;
 
-	--spectrum-menu-item-checkmark-height-small: 12px;
-	--spectrum-menu-item-checkmark-height-medium: 14px;
-	--spectrum-menu-item-checkmark-height-large: 16px;
-	--spectrum-menu-item-checkmark-height-extra-large: 16px;
+	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
 
-	--spectrum-menu-item-checkmark-width-small: 12px;
-	--spectrum-menu-item-checkmark-width-medium: 14px;
-	--spectrum-menu-item-checkmark-width-large: 16px;
-	--spectrum-menu-item-checkmark-width-extra-large: 16px;
+	--spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
+	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
 
-	--spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+	--spectrum-assetcard-focus-ring-border-radius: 9px;
+	--spectrum-assetcard-selectionindicator-margin: 15px;
+	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
+	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
+	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
 
 	--spectrum-button-top-to-text-small: 6px;
 	--spectrum-button-bottom-to-text-small: 5px;
@@ -51,45 +40,21 @@
 	--spectrum-button-top-to-text-extra-large: 16px;
 	--spectrum-button-bottom-to-text-extra-large: 17px;
 
-	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
-
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
-	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
-
 	--spectrum-coach-indicator-gap: 8px;
 	--spectrum-coach-indicator-ring-diameter: 20px;
 	--spectrum-coach-indicator-quiet-ring-diameter: 10px;
-
 	--spectrum-coachmark-buttongroup-display: none;
 	--spectrum-coachmark-buttongroup-mobile-display: flex;
 	--spectrum-coachmark-menu-display: none;
 	--spectrum-coachmark-menu-mobile-display: inline-flex;
 
-	--spectrum-well-padding: 20px;
-	--spectrum-well-margin-top: 5px;
-	--spectrum-well-min-width: 300px;
-	--spectrum-well-border-radius: 5px;
-
-	/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
-	--spectrum-workflow-icon-size-xxl: 40px;
-	--spectrum-workflow-icon-size-xxs: 15px;
+	--spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
+	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
+	--spectrum-colorwheel-colorarea-container-size: 182px;
 
-	--spectrum-treeview-item-indentation-medium: 20px;
-	--spectrum-treeview-item-indentation-small: 15px;
-	--spectrum-treeview-item-indentation-large: 25px;
-	--spectrum-treeview-item-indentation-extra-large: 30px;
-	--spectrum-treeview-indicator-inset-block-start: 6px;
-	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
+	--spectrum-colorloupe-checkerboard-fill: url("#checkerboard-secondary");
 
-	--spectrum-dialog-confirm-entry-animation-distance: 25px;
-	--spectrum-dialog-confirm-hero-height: 160px;
-	--spectrum-dialog-confirm-border-radius: 5px;
-	--spectrum-dialog-confirm-title-text-size: 19px;
-	--spectrum-dialog-confirm-description-text-size: 15px;
-	--spectrum-dialog-confirm-padding-grid: 24px;
+	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
 
 	--spectrum-datepicker-initial-width: 160px;
 	--spectrum-datepicker-generic-padding: 15px;
@@ -101,9 +66,6 @@
 	--spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
 	--spectrum-datepicker-input-datetime-width: 30px;
 
-	--spectrum-pagination-textfield-width: 60px;
-	--spectrum-pagination-item-inline-spacing: 6px;
-
 	--spectrum-dial-border-radius: 20px;
 	--spectrum-dial-handle-position: 10px;
 	--spectrum-dial-handle-block-margin: 20px;
@@ -112,14 +74,53 @@
 	--spectrum-dial-label-gap-y: 6px;
 	--spectrum-dial-label-container-top-to-text: 5px;
 
-	--spectrum-assetcard-focus-ring-border-radius: 9px;
-	--spectrum-assetcard-selectionindicator-margin: 15px;
-	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
-	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
-	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
+	--spectrum-dialog-confirm-entry-animation-distance: 25px;
+	--spectrum-dialog-confirm-hero-height: 160px;
+	--spectrum-dialog-confirm-border-radius: 5px;
+	--spectrum-dialog-confirm-title-text-size: 19px;
+	--spectrum-dialog-confirm-description-text-size: 15px;
+	--spectrum-dialog-confirm-padding-grid: 24px;
 
-	--spectrum-tooltip-animation-distance: 5px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
+
+	--spectrum-menu-item-checkmark-height-small: 12px;
+	--spectrum-menu-item-checkmark-height-medium: 14px;
+	--spectrum-menu-item-checkmark-height-large: 16px;
+	--spectrum-menu-item-checkmark-height-extra-large: 16px;
 
+	--spectrum-menu-item-checkmark-width-small: 12px;
+	--spectrum-menu-item-checkmark-width-medium: 14px;
+	--spectrum-menu-item-checkmark-width-large: 16px;
+	--spectrum-menu-item-checkmark-width-extra-large: 16px;
+
+	--spectrum-pagination-textfield-width: 60px;
+	--spectrum-pagination-item-inline-spacing: 6px;
+
+	--spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+
+	--spectrum-slider-tick-mark-height: 13px;
+	--spectrum-slider-ramp-track-height: 20px;
+
+	--spectrum-treeview-item-indentation-medium: 20px;
+	--spectrum-treeview-item-indentation-small: 15px;
+	--spectrum-treeview-item-indentation-large: 25px;
+	--spectrum-treeview-item-indentation-extra-large: 30px;
+	--spectrum-treeview-indicator-inset-block-start: 6px;
+	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
+
+	--spectrum-tooltip-animation-distance: 5px;
 	--spectrum-ui-icon-medium-display: none;
 	--spectrum-ui-icon-large-display: block;
+
+	--spectrum-well-border-radius: 5px;
+	--spectrum-well-margin-top: 5px;
+	--spectrum-well-min-width: 300px;
+	--spectrum-well-padding: 20px;
+
+	/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
+	--spectrum-workflow-icon-size-xxl: 40px;
+	--spectrum-workflow-icon-size-xxs: 15px;
 }
diff --git a/tokens/custom-spectrum/light-vars.css b/tokens/custom/light-vars.css
similarity index 80%
rename from tokens/custom-spectrum/light-vars.css
rename to tokens/custom/light-vars.css
index a6e8be58d0..131f3951b1 100644
--- a/tokens/custom-spectrum/light-vars.css
+++ b/tokens/custom/light-vars.css
@@ -12,19 +12,21 @@
  */
 
 /* This file contains overrides and additions to core tokens */
+.spectrum--light {
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--color-scheme: light;
 
-.spectrum--light,
-.spectrum--lightest {
-	--spectrum-menu-item-background-color-default: rgba(0, 0, 0, 0); /* --spectrum-gray-900 */
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200);
+	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
+	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
+	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
+	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
+	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
 
-	/* Drop Zone background color rgb */
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/
+	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
 
-	/* Drop Indicator color rgb */
-	--spectrum-dropindicator-color: var(--spectrum-blue-800);
+	--spectrum-badge-label-icon-color-primary: var(--spectrum-white);
 
 	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
 	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
@@ -34,42 +36,28 @@
 	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
 	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
 	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
-
 	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
 
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-white);
-
 	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-
-	--spectrum-well-border-color: var(--spectrum-black);
 
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800); */
 
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+	--spectrum-dropindicator-color: var(--spectrum-blue-800);
 
 	--spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
 	--spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
 	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
 	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
-
 	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
 	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
 	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
 	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
 
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
+	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
 
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-swatch-border-color: rgb(0 0 0 / 51%);
+	--spectrum-swatch-border-color-light: rgb(0 0 0 / 20%);
 
-	--spectrum-swatch-border-color: rgba(0, 0, 0, 51%);
-	--spectrum-swatch-border-color-light: rgba(0, 0, 0, 20%);
+	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
+	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
 }
diff --git a/tokens/custom-spectrum/medium-vars.css b/tokens/custom/medium-vars.css
similarity index 97%
rename from tokens/custom-spectrum/medium-vars.css
rename to tokens/custom/medium-vars.css
index 7adc56b286..5221e74999 100644
--- a/tokens/custom-spectrum/medium-vars.css
+++ b/tokens/custom/medium-vars.css
@@ -14,111 +14,111 @@
 /* This file contains overrides and additions to core tokens */
 
 .spectrum--medium {
-	--spectrum-slider-tick-mark-height: 10px;
-	--spectrum-slider-ramp-track-height: 16px;
-
-	--spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
-	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-	--spectrum-colorwheel-colorarea-container-size: 144px;
-
-	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
-
-	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--scale: medium;
 
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
-
-	--spectrum-menu-item-checkmark-height-small: 10px;
-	--spectrum-menu-item-checkmark-height-medium: 10px;
-	--spectrum-menu-item-checkmark-height-large: 12px;
-	--spectrum-menu-item-checkmark-height-extra-large: 14px;
+	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
 
-	--spectrum-menu-item-checkmark-width-small: 10px;
-	--spectrum-menu-item-checkmark-width-medium: 10px;
-	--spectrum-menu-item-checkmark-width-large: 12px;
-	--spectrum-menu-item-checkmark-width-extra-large: 14px;
+	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
+	--spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
 
-	--spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
+	--spectrum-assetcard-focus-ring-border-radius: 8px;
+	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
+	--spectrum-assetcard-selectionindicator-margin: 12px;
+	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
 
-	--spectrum-button-top-to-text-small: 5px;
 	--spectrum-button-bottom-to-text-small: 4px;
-	--spectrum-button-top-to-text-medium: 7px;
 	--spectrum-button-bottom-to-text-medium: 8px;
-	--spectrum-button-top-to-text-large: 10px;
 	--spectrum-button-bottom-to-text-large: 10px;
-	--spectrum-button-top-to-text-extra-large: 13px;
 	--spectrum-button-bottom-to-text-extra-large: 13px;
-
-	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
-
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
-	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
+	--spectrum-button-top-to-text-small: 5px;
+	--spectrum-button-top-to-text-medium: 7px;
+	--spectrum-button-top-to-text-large: 10px;
+	--spectrum-button-top-to-text-extra-large: 13px;
 
 	--spectrum-coach-indicator-gap: 6px;
 	--spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
 	--spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
-
 	--spectrum-coachmark-buttongroup-display: flex;
 	--spectrum-coachmark-buttongroup-mobile-display: none;
 	--spectrum-coachmark-menu-display: inline-flex;
 	--spectrum-coachmark-menu-mobile-display: none;
-	--spectrum-well-padding: var(--spectrum-spacing-300);
-	--spectrum-well-margin-top: var(--spectrum-spacing-75);
-	--spectrum-well-min-width: 240px;
-	--spectrum-well-border-radius: var(--spectrum-spacing-75);
 
-	/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
-	--spectrum-workflow-icon-size-xxl: 32px;
-	--spectrum-workflow-icon-size-xxs: 12px;
+	--spectrum-colorloupe-checkerboard-fill: url("#checkerboard-primary");
 
-	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
-	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
-	--spectrum-treeview-item-indentation-large: 20px;
-	--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
-	--spectrum-treeview-indicator-inset-block-start: 5px;
-	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
+	--spectrum-colorwheel-colorarea-container-size: 144px;
+	--spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
+	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
 
-	--spectrum-dialog-confirm-entry-animation-distance: 20px;
-	--spectrum-dialog-confirm-hero-height: 128px;
-	--spectrum-dialog-confirm-border-radius: 4px;
-	--spectrum-dialog-confirm-title-text-size: 18px;
-	--spectrum-dialog-confirm-description-text-size: 14px;
-	--spectrum-dialog-confirm-padding-grid: 40px;
+	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
 
-	--spectrum-datepicker-initial-width: 128px;
-	--spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
 	--spectrum-datepicker-dash-line-height: 24px;
-	--spectrum-datepicker-width-quiet-first: 72px;
-	--spectrum-datepicker-width-quiet-second: 16px;
 	--spectrum-datepicker-datetime-width-first: 36px;
+	--spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
+	--spectrum-datepicker-initial-width: 128px;
+	--spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
 	--spectrum-datepicker-invalid-icon-to-button: 8px;
 	--spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
-	--spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
-
-	--spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
-	--spectrum-pagination-item-inline-spacing: 5px;
+	--spectrum-datepicker-width-quiet-first: 72px;
+	--spectrum-datepicker-width-quiet-second: 16px;
 
 	--spectrum-dial-border-radius: 16px;
-	--spectrum-dial-handle-position: 8px;
+	--spectrum-dial-controls-margin: 8px;
 	--spectrum-dial-handle-block-margin: 16px;
 	--spectrum-dial-handle-inline-margin: 16px;
-	--spectrum-dial-controls-margin: 8px;
-	--spectrum-dial-label-gap-y: 5px;
+	--spectrum-dial-handle-position: 8px;
 	--spectrum-dial-label-container-top-to-text: 4px;
+	--spectrum-dial-label-gap-y: 5px;
 
-	--spectrum-assetcard-focus-ring-border-radius: 8px;
-	--spectrum-assetcard-selectionindicator-margin: 12px;
-	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
-	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
-	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
+	--spectrum-dialog-confirm-border-radius: 4px;
+	--spectrum-dialog-confirm-description-text-size: 14px;
+	--spectrum-dialog-confirm-entry-animation-distance: 20px;
+	--spectrum-dialog-confirm-hero-height: 128px;
+	--spectrum-dialog-confirm-padding-grid: 40px;
+	--spectrum-dialog-confirm-title-text-size: 18px;
 
-	--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
+	--spectrum-menu-item-checkmark-height-small: 10px;
+	--spectrum-menu-item-checkmark-height-medium: 10px;
+	--spectrum-menu-item-checkmark-height-large: 12px;
+	--spectrum-menu-item-checkmark-height-extra-large: 14px;
+	--spectrum-menu-item-checkmark-width-small: 10px;
+	--spectrum-menu-item-checkmark-width-medium: 10px;
+	--spectrum-menu-item-checkmark-width-large: 12px;
+	--spectrum-menu-item-checkmark-width-extra-large: 14px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
+
+	--spectrum-pagination-item-inline-spacing: 5px;
+	--spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
+
+	--spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+
+	--spectrum-slider-ramp-track-height: 16px;
+	--spectrum-slider-tick-mark-height: 10px;
 
+	--spectrum-treeview-indicator-inset-block-start: 5px;
+	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
+	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
+	--spectrum-treeview-item-indentation-large: 20px;
+	--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
+	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
+
+	--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
 	--spectrum-ui-icon-medium-display: block;
 	--spectrum-ui-icon-large-display: none;
+
+	--spectrum-well-border-radius: var(--spectrum-spacing-75);
+	--spectrum-well-margin-top: var(--spectrum-spacing-75);
+	--spectrum-well-min-width: 240px;
+	--spectrum-well-padding: var(--spectrum-spacing-300);
+
+	/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
+	--spectrum-workflow-icon-size-xxl: 32px;
+	--spectrum-workflow-icon-size-xxs: 12px;
 }
diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css
index 19eba1895b..b67f662ddd 100644
--- a/tokens/dist/css/dark-vars.css
+++ b/tokens/dist/css/dark-vars.css
@@ -12,58 +12,49 @@
  */
 
 .spectrum--dark {
-	--spectrum-overlay-opacity: 0.5;
-	--spectrum-drop-shadow-color-rgb: 0, 0, 0;
-	--spectrum-drop-shadow-color-opacity: 0.5;
-	--spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
-	--spectrum-background-base-color: var(--spectrum-gray-50);
-	--spectrum-background-layer-1-color: var(--spectrum-gray-75);
-	--spectrum-background-layer-2-color: var(--spectrum-gray-100);
-	--spectrum-neutral-background-color-default: var(--spectrum-gray-400);
-	--spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
-	--spectrum-neutral-background-color-down: var(--spectrum-gray-200);
-	--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300);
-	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400);
-	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300);
-	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200);
-	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-300);
-	--spectrum-accent-background-color-default: var(--spectrum-accent-color-500);
-	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-400);
-	--spectrum-accent-background-color-down: var(--spectrum-accent-color-300);
-	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-400);
-	--spectrum-informative-background-color-default: var(--spectrum-informative-color-500);
-	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-400);
-	--spectrum-informative-background-color-down: var(--spectrum-informative-color-300);
-	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-400);
-	--spectrum-negative-background-color-default: var(--spectrum-negative-color-500);
-	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-400);
-	--spectrum-negative-background-color-down: var(--spectrum-negative-color-300);
-	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-400);
-	--spectrum-positive-background-color-default: var(--spectrum-positive-color-500);
-	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-400);
-	--spectrum-positive-background-color-down: var(--spectrum-positive-color-300);
-	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-400);
-	--spectrum-notice-background-color-default: var(--spectrum-notice-color-800);
-	--spectrum-gray-background-color-default: var(--spectrum-gray-700);
-	--spectrum-red-background-color-default: var(--spectrum-red-700);
-	--spectrum-orange-background-color-default: var(--spectrum-orange-800);
-	--spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
-	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-900);
-	--spectrum-celery-background-color-default: var(--spectrum-celery-800);
-	--spectrum-green-background-color-default: var(--spectrum-green-700);
-	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
-	--spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
-	--spectrum-blue-background-color-default: var(--spectrum-blue-700);
-	--spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
-	--spectrum-purple-background-color-default: var(--spectrum-purple-700);
-	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
-	--spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
+	--spectrum-overlay-opacity: 0.6;
+	--spectrum-background-layer-2-color: var(--spectrum-gray-75);
+	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-500);
+	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400);
+	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400);
+	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-400);
+	--spectrum-accent-background-color-default: var(--spectrum-accent-color-800);
+	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-700);
+	--spectrum-accent-background-color-down: var(--spectrum-accent-color-700);
+	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-700);
+	--spectrum-informative-background-color-default: var(--spectrum-informative-color-800);
+	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-700);
+	--spectrum-informative-background-color-down: var(--spectrum-informative-color-700);
+	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-700);
+	--spectrum-negative-background-color-default: var(--spectrum-negative-color-800);
+	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-700);
+	--spectrum-negative-background-color-down: var(--spectrum-negative-color-700);
+	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-700);
+	--spectrum-positive-background-color-default: var(--spectrum-positive-color-800);
+	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-700);
+	--spectrum-positive-background-color-down: var(--spectrum-positive-color-700);
+	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-700);
+	--spectrum-notice-background-color-default: var(--spectrum-notice-color-900);
+	--spectrum-gray-background-color-default: var(--spectrum-gray-500);
+	--spectrum-red-background-color-default: var(--spectrum-red-800);
+	--spectrum-orange-background-color-default: var(--spectrum-orange-900);
+	--spectrum-yellow-background-color-default: var(--spectrum-yellow-1100);
+	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-1000);
+	--spectrum-celery-background-color-default: var(--spectrum-celery-900);
+	--spectrum-green-background-color-default: var(--spectrum-green-800);
+	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800);
+	--spectrum-cyan-background-color-default: var(--spectrum-cyan-800);
+	--spectrum-blue-background-color-default: var(--spectrum-blue-800);
+	--spectrum-indigo-background-color-default: var(--spectrum-indigo-800);
+	--spectrum-purple-background-color-default: var(--spectrum-purple-800);
+	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-800);
+	--spectrum-magenta-background-color-default: var(--spectrum-magenta-800);
 	--spectrum-neutral-visual-color: var(--spectrum-gray-600);
 	--spectrum-accent-visual-color: var(--spectrum-accent-color-900);
 	--spectrum-informative-visual-color: var(--spectrum-informative-color-900);
-	--spectrum-negative-visual-color: var(--spectrum-negative-color-700);
+	--spectrum-negative-visual-color: var(--spectrum-negative-color-900);
 	--spectrum-notice-visual-color: var(--spectrum-notice-color-900);
-	--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
+	--spectrum-positive-visual-color: var(--spectrum-positive-color-900);
 	--spectrum-gray-visual-color: var(--spectrum-gray-600);
 	--spectrum-red-visual-color: var(--spectrum-red-700);
 	--spectrum-orange-visual-color: var(--spectrum-orange-900);
@@ -78,395 +69,774 @@
 	--spectrum-purple-visual-color: var(--spectrum-purple-900);
 	--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
 	--spectrum-magenta-visual-color: var(--spectrum-magenta-900);
+	--spectrum-background-elevated-color: var(--spectrum-gray-75);
+	--spectrum-background-pasteboard-color: var(--spectrum-gray-25);
+	--spectrum-brown-visual-color: var(--spectrum-brown-900);
+	--spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900);
+	--spectrum-pink-visual-color: var(--spectrum-pink-900);
+	--spectrum-silver-visual-color: var(--spectrum-silver-900);
+	--spectrum-turquoise-visual-color: var(--spectrum-turquoise-900);
+	--spectrum-brown-background-color-default: var(--spectrum-brown-800);
+	--spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800);
+	--spectrum-pink-background-color-default: var(--spectrum-pink-800);
+	--spectrum-silver-background-color-default: var(--spectrum-silver-800);
+	--spectrum-turquoise-background-color-default: var(--spectrum-turquoise-800);
+	--spectrum-drop-shadow-color-100-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-100-opacity: 0.36;
+	--spectrum-drop-shadow-color-100: rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+	--spectrum-drop-shadow-color-200-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-200-opacity: 0.48;
+	--spectrum-drop-shadow-color-200: rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
+	--spectrum-drop-shadow-color-300-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-300-opacity: 0.6;
+	--spectrum-drop-shadow-color-300: rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity));
+	--spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-300);
+	--spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300);
+	--spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300);
+	--spectrum-green-subtle-background-color-default: var(--spectrum-green-300);
+	--spectrum-orange-subtle-background-color-default: var(--spectrum-orange-300);
+	--spectrum-red-subtle-background-color-default: var(--spectrum-red-300);
+	--spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300);
+	--spectrum-cinnamon-subtle-background-color-default: var(--spectrum-cinnamon-300);
+	--spectrum-celery-subtle-background-color-default: var(--spectrum-celery-300);
+	--spectrum-chartreuse-subtle-background-color-default: var(--spectrum-chartreuse-300);
+	--spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300);
+	--spectrum-fuchsia-subtle-background-color-default: var(--spectrum-fuchsia-300);
+	--spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-300);
+	--spectrum-magenta-subtle-background-color-default: var(--spectrum-magenta-300);
+	--spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300);
+	--spectrum-purple-subtle-background-color-default: var(--spectrum-purple-300);
+	--spectrum-seafoam-subtle-background-color-default: var(--spectrum-seafoam-300);
+	--spectrum-silver-subtle-background-color-default: var(--spectrum-silver-300);
+	--spectrum-turquoise-subtle-background-color-default: var(--spectrum-turquoise-300);
+	--spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-300);
 	--spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800);
-	--spectrum-gray-50-rgb: 29, 29, 29;
+	--spectrum-white-rgb: 255, 255, 255;
+	--spectrum-white: rgba(var(--spectrum-white-rgb));
+	--spectrum-transparent-white-25-rgb: 255, 255, 255;
+	--spectrum-transparent-white-25-opacity: 0;
+	--spectrum-transparent-white-25: rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity));
+	--spectrum-transparent-white-50-rgb: 255, 255, 255;
+	--spectrum-transparent-white-50-opacity: 0.04;
+	--spectrum-transparent-white-50: rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity));
+	--spectrum-transparent-white-75-rgb: 255, 255, 255;
+	--spectrum-transparent-white-75-opacity: 0.07;
+	--spectrum-transparent-white-75: rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity));
+	--spectrum-transparent-white-100-rgb: 255, 255, 255;
+	--spectrum-transparent-white-100-opacity: 0.11;
+	--spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+	--spectrum-transparent-white-200-rgb: 255, 255, 255;
+	--spectrum-transparent-white-200-opacity: 0.14;
+	--spectrum-transparent-white-200: rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
+	--spectrum-transparent-white-300-rgb: 255, 255, 255;
+	--spectrum-transparent-white-300-opacity: 0.17;
+	--spectrum-transparent-white-300: rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
+	--spectrum-transparent-white-400-rgb: 255, 255, 255;
+	--spectrum-transparent-white-400-opacity: 0.21;
+	--spectrum-transparent-white-400: rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
+	--spectrum-transparent-white-500-rgb: 255, 255, 255;
+	--spectrum-transparent-white-500-opacity: 0.39;
+	--spectrum-transparent-white-500: rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
+	--spectrum-transparent-white-600-rgb: 255, 255, 255;
+	--spectrum-transparent-white-600-opacity: 0.51;
+	--spectrum-transparent-white-600: rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
+	--spectrum-transparent-white-700-rgb: 255, 255, 255;
+	--spectrum-transparent-white-700-opacity: 0.66;
+	--spectrum-transparent-white-700: rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
+	--spectrum-transparent-white-800-rgb: 255, 255, 255;
+	--spectrum-transparent-white-800-opacity: 0.85;
+	--spectrum-transparent-white-800: rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
+	--spectrum-transparent-white-900-rgb: 255, 255, 255;
+	--spectrum-transparent-white-900-opacity: 0.94;
+	--spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity));
+	--spectrum-transparent-white-1000-rgb: 255, 255, 255;
+	--spectrum-transparent-white-1000: rgba(var(--spectrum-transparent-white-1000-rgb));
+	--spectrum-transparent-black-25-rgb: 0, 0, 0;
+	--spectrum-transparent-black-25-opacity: 0;
+	--spectrum-transparent-black-25: rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity));
+	--spectrum-transparent-black-50-rgb: 0, 0, 0;
+	--spectrum-transparent-black-50-opacity: 0.03;
+	--spectrum-transparent-black-50: rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity));
+	--spectrum-transparent-black-75-rgb: 0, 0, 0;
+	--spectrum-transparent-black-75-opacity: 0.05;
+	--spectrum-transparent-black-75: rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity));
+	--spectrum-transparent-black-100-rgb: 0, 0, 0;
+	--spectrum-transparent-black-100-opacity: 0.09;
+	--spectrum-transparent-black-100: rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
+	--spectrum-transparent-black-200-rgb: 0, 0, 0;
+	--spectrum-transparent-black-200-opacity: 0.12;
+	--spectrum-transparent-black-200: rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
+	--spectrum-transparent-black-300-rgb: 0, 0, 0;
+	--spectrum-transparent-black-300-opacity: 0.15;
+	--spectrum-transparent-black-300: rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
+	--spectrum-transparent-black-400-rgb: 0, 0, 0;
+	--spectrum-transparent-black-400-opacity: 0.22;
+	--spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
+	--spectrum-transparent-black-500-rgb: 0, 0, 0;
+	--spectrum-transparent-black-500-opacity: 0.44;
+	--spectrum-transparent-black-500: rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
+	--spectrum-transparent-black-600-rgb: 0, 0, 0;
+	--spectrum-transparent-black-600-opacity: 0.56;
+	--spectrum-transparent-black-600: rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
+	--spectrum-transparent-black-700-rgb: 0, 0, 0;
+	--spectrum-transparent-black-700-opacity: 0.69;
+	--spectrum-transparent-black-700: rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
+	--spectrum-transparent-black-800-rgb: 0, 0, 0;
+	--spectrum-transparent-black-800-opacity: 0.84;
+	--spectrum-transparent-black-800: rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
+	--spectrum-transparent-black-900-rgb: 0, 0, 0;
+	--spectrum-transparent-black-900-opacity: 0.93;
+	--spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity));
+	--spectrum-gray-25-rgb: 17, 17, 17;
+	--spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb));
+	--spectrum-gray-50-rgb: 27, 27, 27;
 	--spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-	--spectrum-gray-75-rgb: 38, 38, 38;
+	--spectrum-gray-75-rgb: 34, 34, 34;
 	--spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-	--spectrum-gray-100-rgb: 50, 50, 50;
+	--spectrum-gray-100-rgb: 44, 44, 44;
 	--spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-	--spectrum-gray-200-rgb: 63, 63, 63;
+	--spectrum-gray-200-rgb: 50, 50, 50;
 	--spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-	--spectrum-gray-300-rgb: 84, 84, 84;
+	--spectrum-gray-300-rgb: 57, 57, 57;
 	--spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-	--spectrum-gray-400-rgb: 112, 112, 112;
+	--spectrum-gray-400-rgb: 68, 68, 68;
 	--spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-	--spectrum-gray-500-rgb: 144, 144, 144;
+	--spectrum-gray-500-rgb: 109, 109, 109;
 	--spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-	--spectrum-gray-600-rgb: 178, 178, 178;
+	--spectrum-gray-600-rgb: 138, 138, 138;
 	--spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-	--spectrum-gray-700-rgb: 209, 209, 209;
+	--spectrum-gray-700-rgb: 175, 175, 175;
 	--spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
-	--spectrum-gray-800-rgb: 235, 235, 235;
+	--spectrum-gray-800-rgb: 219, 219, 219;
 	--spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
-	--spectrum-gray-900-rgb: 255, 255, 255;
+	--spectrum-gray-900-rgb: 242, 242, 242;
 	--spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
-	--spectrum-blue-100-rgb: 0, 56, 119;
+	--spectrum-gray-1000-rgb: 255, 255, 255;
+	--spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb));
+	--spectrum-blue-100-rgb: 14, 23, 63;
 	--spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-	--spectrum-blue-200-rgb: 0, 65, 138;
+	--spectrum-blue-200-rgb: 15, 28, 82;
 	--spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-	--spectrum-blue-300-rgb: 0, 77, 163;
+	--spectrum-blue-300-rgb: 12, 33, 117;
 	--spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-	--spectrum-blue-400-rgb: 0, 89, 194;
+	--spectrum-blue-400-rgb: 18, 45, 154;
 	--spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-	--spectrum-blue-500-rgb: 3, 103, 224;
+	--spectrum-blue-500-rgb: 26, 58, 195;
 	--spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-	--spectrum-blue-600-rgb: 19, 121, 243;
+	--spectrum-blue-600-rgb: 37, 73, 229;
 	--spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-	--spectrum-blue-700-rgb: 52, 143, 244;
+	--spectrum-blue-700-rgb: 52, 91, 248;
 	--spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-	--spectrum-blue-800-rgb: 84, 163, 246;
+	--spectrum-blue-800-rgb: 64, 105, 253;
 	--spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-	--spectrum-blue-900-rgb: 114, 183, 249;
+	--spectrum-blue-900-rgb: 86, 129, 255;
 	--spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-	--spectrum-blue-1000-rgb: 143, 202, 252;
+	--spectrum-blue-1000-rgb: 105, 149, 254;
 	--spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-	--spectrum-blue-1100-rgb: 174, 219, 254;
+	--spectrum-blue-1100-rgb: 124, 169, 252;
 	--spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-	--spectrum-blue-1200-rgb: 204, 233, 255;
+	--spectrum-blue-1200-rgb: 152, 192, 252;
 	--spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-	--spectrum-blue-1300-rgb: 232, 246, 255;
+	--spectrum-blue-1300-rgb: 181, 213, 253;
 	--spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-	--spectrum-blue-1400-rgb: 255, 255, 255;
+	--spectrum-blue-1400-rgb: 213, 231, 254;
 	--spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-	--spectrum-red-100-rgb: 123, 0, 0;
+	--spectrum-blue-1500-rgb: 238, 245, 255;
+	--spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb));
+	--spectrum-blue-1600-rgb: 255, 255, 255;
+	--spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb));
+	--spectrum-red-100-rgb: 54, 10, 3;
 	--spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-	--spectrum-red-200-rgb: 141, 0, 0;
+	--spectrum-red-200-rgb: 68, 13, 5;
 	--spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-	--spectrum-red-300-rgb: 165, 0, 0;
+	--spectrum-red-300-rgb: 87, 17, 7;
 	--spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-	--spectrum-red-400-rgb: 190, 4, 3;
+	--spectrum-red-400-rgb: 115, 24, 11;
 	--spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-	--spectrum-red-500-rgb: 215, 25, 19;
+	--spectrum-red-500-rgb: 147, 31, 17;
 	--spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-	--spectrum-red-600-rgb: 234, 56, 41;
+	--spectrum-red-600-rgb: 177, 38, 23;
 	--spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-	--spectrum-red-700-rgb: 246, 88, 67;
+	--spectrum-red-700-rgb: 205, 46, 29;
 	--spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-	--spectrum-red-800-rgb: 255, 117, 94;
+	--spectrum-red-800-rgb: 223, 52, 34;
 	--spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-	--spectrum-red-900-rgb: 255, 149, 129;
+	--spectrum-red-900-rgb: 252, 67, 46;
 	--spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-	--spectrum-red-1000-rgb: 255, 176, 161;
+	--spectrum-red-1000-rgb: 255, 103, 86;
 	--spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-	--spectrum-red-1100-rgb: 255, 201, 189;
+	--spectrum-red-1100-rgb: 255, 134, 120;
 	--spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-	--spectrum-red-1200-rgb: 255, 222, 216;
+	--spectrum-red-1200-rgb: 255, 167, 157;
 	--spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-	--spectrum-red-1300-rgb: 255, 241, 238;
+	--spectrum-red-1300-rgb: 255, 196, 189;
 	--spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-	--spectrum-red-1400-rgb: 255, 255, 255;
+	--spectrum-red-1400-rgb: 255, 222, 219;
 	--spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-	--spectrum-orange-100-rgb: 102, 37, 0;
+	--spectrum-red-1500-rgb: 255, 242, 240;
+	--spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb));
+	--spectrum-red-1600-rgb: 255, 255, 255;
+	--spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb));
+	--spectrum-orange-100-rgb: 49, 16, 0;
 	--spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-	--spectrum-orange-200-rgb: 117, 45, 0;
+	--spectrum-orange-200-rgb: 61, 21, 0;
 	--spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-	--spectrum-orange-300-rgb: 137, 55, 0;
+	--spectrum-orange-300-rgb: 80, 27, 0;
 	--spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-	--spectrum-orange-400-rgb: 158, 66, 0;
+	--spectrum-orange-400-rgb: 106, 36, 0;
 	--spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-	--spectrum-orange-500-rgb: 180, 78, 0;
+	--spectrum-orange-500-rgb: 135, 47, 0;
 	--spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-	--spectrum-orange-600-rgb: 202, 93, 0;
+	--spectrum-orange-600-rgb: 162, 59, 0;
 	--spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-	--spectrum-orange-700-rgb: 225, 109, 0;
+	--spectrum-orange-700-rgb: 185, 73, 0;
 	--spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-	--spectrum-orange-800-rgb: 244, 129, 12;
+	--spectrum-orange-800-rgb: 199, 82, 0;
 	--spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-	--spectrum-orange-900-rgb: 254, 154, 46;
+	--spectrum-orange-900-rgb: 224, 100, 0;
 	--spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-	--spectrum-orange-1000-rgb: 255, 181, 88;
+	--spectrum-orange-1000-rgb: 243, 117, 0;
 	--spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-	--spectrum-orange-1100-rgb: 253, 206, 136;
+	--spectrum-orange-1100-rgb: 255, 137, 0;
 	--spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-	--spectrum-orange-1200-rgb: 255, 225, 179;
+	--spectrum-orange-1200-rgb: 255, 173, 45;
 	--spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-	--spectrum-orange-1300-rgb: 255, 242, 221;
+	--spectrum-orange-1300-rgb: 255, 201, 116;
 	--spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-	--spectrum-orange-1400-rgb: 255, 253, 249;
+	--spectrum-orange-1400-rgb: 255, 225, 178;
 	--spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-	--spectrum-yellow-100-rgb: 76, 54, 0;
+	--spectrum-orange-1500-rgb: 255, 243, 225;
+	--spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb));
+	--spectrum-orange-1600-rgb: 255, 255, 255;
+	--spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb));
+	--spectrum-yellow-100-rgb: 37, 23, 0;
 	--spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-	--spectrum-yellow-200-rgb: 88, 64, 0;
+	--spectrum-yellow-200-rgb: 47, 29, 0;
 	--spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-	--spectrum-yellow-300-rgb: 103, 76, 0;
+	--spectrum-yellow-300-rgb: 61, 39, 0;
 	--spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-	--spectrum-yellow-400-rgb: 119, 89, 0;
+	--spectrum-yellow-400-rgb: 83, 52, 0;
 	--spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-	--spectrum-yellow-500-rgb: 136, 104, 0;
+	--spectrum-yellow-500-rgb: 107, 67, 0;
 	--spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-	--spectrum-yellow-600-rgb: 155, 120, 0;
+	--spectrum-yellow-600-rgb: 130, 82, 0;
 	--spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-	--spectrum-yellow-700-rgb: 174, 137, 0;
+	--spectrum-yellow-700-rgb: 151, 97, 0;
 	--spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-	--spectrum-yellow-800-rgb: 192, 156, 0;
+	--spectrum-yellow-800-rgb: 164, 106, 0;
 	--spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-	--spectrum-yellow-900-rgb: 211, 174, 0;
+	--spectrum-yellow-900-rgb: 186, 124, 0;
 	--spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-	--spectrum-yellow-1000-rgb: 228, 194, 0;
+	--spectrum-yellow-1000-rgb: 203, 141, 0;
 	--spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-	--spectrum-yellow-1100-rgb: 244, 213, 0;
+	--spectrum-yellow-1100-rgb: 218, 159, 0;
 	--spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-	--spectrum-yellow-1200-rgb: 249, 232, 92;
+	--spectrum-yellow-1200-rgb: 235, 183, 0;
 	--spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-	--spectrum-yellow-1300-rgb: 252, 246, 187;
+	--spectrum-yellow-1300-rgb: 249, 206, 0;
 	--spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-	--spectrum-yellow-1400-rgb: 255, 255, 255;
+	--spectrum-yellow-1400-rgb: 255, 230, 86;
 	--spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-	--spectrum-chartreuse-100-rgb: 48, 64, 0;
+	--spectrum-yellow-1500-rgb: 255, 246, 195;
+	--spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb));
+	--spectrum-yellow-1600-rgb: 255, 255, 255;
+	--spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb));
+	--spectrum-chartreuse-100-rgb: 23, 28, 0;
 	--spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-	--spectrum-chartreuse-200-rgb: 55, 74, 0;
+	--spectrum-chartreuse-200-rgb: 30, 36, 0;
 	--spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-	--spectrum-chartreuse-300-rgb: 65, 87, 0;
+	--spectrum-chartreuse-300-rgb: 39, 47, 0;
 	--spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-	--spectrum-chartreuse-400-rgb: 76, 102, 0;
+	--spectrum-chartreuse-400-rgb: 53, 63, 0;
 	--spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-	--spectrum-chartreuse-500-rgb: 89, 118, 0;
+	--spectrum-chartreuse-500-rgb: 68, 82, 0;
 	--spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-	--spectrum-chartreuse-600-rgb: 102, 136, 0;
+	--spectrum-chartreuse-600-rgb: 83, 100, 0;
 	--spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-	--spectrum-chartreuse-700-rgb: 117, 154, 0;
+	--spectrum-chartreuse-700-rgb: 97, 116, 0;
 	--spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-	--spectrum-chartreuse-800-rgb: 132, 173, 1;
+	--spectrum-chartreuse-800-rgb: 106, 127, 0;
 	--spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-	--spectrum-chartreuse-900-rgb: 148, 192, 8;
+	--spectrum-chartreuse-900-rgb: 122, 147, 0;
 	--spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-	--spectrum-chartreuse-1000-rgb: 166, 211, 18;
+	--spectrum-chartreuse-1000-rgb: 136, 164, 0;
 	--spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-	--spectrum-chartreuse-1100-rgb: 184, 229, 37;
+	--spectrum-chartreuse-1100-rgb: 151, 181, 0;
 	--spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-	--spectrum-chartreuse-1200-rgb: 205, 245, 71;
+	--spectrum-chartreuse-1200-rgb: 169, 203, 0;
 	--spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-	--spectrum-chartreuse-1300-rgb: 231, 254, 154;
+	--spectrum-chartreuse-1300-rgb: 187, 225, 0;
 	--spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-	--spectrum-chartreuse-1400-rgb: 255, 255, 255;
+	--spectrum-chartreuse-1400-rgb: 219, 240, 117;
 	--spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-	--spectrum-celery-100-rgb: 0, 69, 10;
+	--spectrum-chartreuse-1500-rgb: 242, 249, 206;
+	--spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb));
+	--spectrum-chartreuse-1600-rgb: 255, 255, 255;
+	--spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb));
+	--spectrum-celery-100-rgb: 11, 31, 0;
 	--spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-	--spectrum-celery-200-rgb: 0, 80, 12;
+	--spectrum-celery-200-rgb: 15, 38, 0;
 	--spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-	--spectrum-celery-300-rgb: 0, 94, 14;
+	--spectrum-celery-300-rgb: 21, 51, 1;
 	--spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-	--spectrum-celery-400-rgb: 0, 109, 15;
+	--spectrum-celery-400-rgb: 31, 67, 4;
 	--spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-	--spectrum-celery-500-rgb: 0, 127, 15;
+	--spectrum-celery-500-rgb: 41, 86, 8;
 	--spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-	--spectrum-celery-600-rgb: 0, 145, 18;
+	--spectrum-celery-600-rgb: 50, 105, 11;
 	--spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-	--spectrum-celery-700-rgb: 4, 165, 30;
+	--spectrum-celery-700-rgb: 60, 122, 15;
 	--spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-	--spectrum-celery-800-rgb: 34, 184, 51;
+	--spectrum-celery-800-rgb: 66, 134, 18;
 	--spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-	--spectrum-celery-900-rgb: 68, 202, 73;
+	--spectrum-celery-900-rgb: 78, 154, 23;
 	--spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-	--spectrum-celery-1000-rgb: 105, 220, 99;
+	--spectrum-celery-1000-rgb: 88, 172, 28;
 	--spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-	--spectrum-celery-1100-rgb: 142, 235, 127;
+	--spectrum-celery-1100-rgb: 100, 190, 35;
 	--spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-	--spectrum-celery-1200-rgb: 180, 247, 162;
+	--spectrum-celery-1200-rgb: 116, 213, 46;
 	--spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-	--spectrum-celery-1300-rgb: 221, 253, 211;
+	--spectrum-celery-1300-rgb: 136, 234, 65;
 	--spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-	--spectrum-celery-1400-rgb: 255, 255, 255;
+	--spectrum-celery-1400-rgb: 170, 251, 112;
 	--spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-	--spectrum-green-100-rgb: 4, 67, 41;
+	--spectrum-celery-1500-rgb: 222, 255, 198;
+	--spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb));
+	--spectrum-celery-1600-rgb: 255, 255, 255;
+	--spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb));
+	--spectrum-green-100-rgb: 0, 30, 23;
 	--spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-	--spectrum-green-200-rgb: 0, 78, 47;
+	--spectrum-green-200-rgb: 0, 38, 29;
 	--spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-	--spectrum-green-300-rgb: 0, 92, 56;
+	--spectrum-green-300-rgb: 0, 51, 38;
 	--spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-	--spectrum-green-400-rgb: 0, 108, 67;
+	--spectrum-green-400-rgb: 0, 68, 48;
 	--spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-	--spectrum-green-500-rgb: 0, 125, 78;
+	--spectrum-green-500-rgb: 2, 87, 58;
 	--spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-	--spectrum-green-600-rgb: 0, 143, 93;
+	--spectrum-green-600-rgb: 3, 106, 67;
 	--spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-	--spectrum-green-700-rgb: 18, 162, 108;
+	--spectrum-green-700-rgb: 4, 124, 75;
 	--spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-	--spectrum-green-800-rgb: 43, 180, 125;
+	--spectrum-green-800-rgb: 6, 136, 80;
 	--spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-	--spectrum-green-900-rgb: 67, 199, 143;
+	--spectrum-green-900-rgb: 9, 157, 89;
 	--spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-	--spectrum-green-1000-rgb: 94, 217, 162;
+	--spectrum-green-1000-rgb: 14, 175, 98;
 	--spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-	--spectrum-green-1100-rgb: 129, 233, 184;
+	--spectrum-green-1100-rgb: 24, 193, 110;
 	--spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-	--spectrum-green-1200-rgb: 177, 244, 209;
+	--spectrum-green-1200-rgb: 57, 215, 134;
 	--spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-	--spectrum-green-1300-rgb: 223, 250, 234;
+	--spectrum-green-1300-rgb: 126, 231, 172;
 	--spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-	--spectrum-green-1400-rgb: 254, 255, 252;
+	--spectrum-green-1400-rgb: 189, 241, 208;
 	--spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-	--spectrum-seafoam-100-rgb: 18, 65, 63;
+	--spectrum-green-1500-rgb: 229, 250, 236;
+	--spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb));
+	--spectrum-green-1600-rgb: 255, 255, 255;
+	--spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb));
+	--spectrum-seafoam-100-rgb: 0, 30, 27;
 	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-	--spectrum-seafoam-200-rgb: 14, 76, 73;
+	--spectrum-seafoam-200-rgb: 0, 39, 35;
 	--spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-	--spectrum-seafoam-300-rgb: 4, 90, 87;
+	--spectrum-seafoam-300-rgb: 0, 50, 44;
 	--spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-	--spectrum-seafoam-400-rgb: 0, 105, 101;
+	--spectrum-seafoam-400-rgb: 0, 67, 59;
 	--spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-	--spectrum-seafoam-500-rgb: 0, 122, 117;
+	--spectrum-seafoam-500-rgb: 2, 86, 75;
 	--spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-	--spectrum-seafoam-600-rgb: 0, 140, 135;
+	--spectrum-seafoam-600-rgb: 4, 105, 89;
 	--spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-	--spectrum-seafoam-700-rgb: 0, 158, 152;
+	--spectrum-seafoam-700-rgb: 6, 122, 103;
 	--spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-	--spectrum-seafoam-800-rgb: 3, 178, 171;
+	--spectrum-seafoam-800-rgb: 8, 134, 112;
 	--spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-	--spectrum-seafoam-900-rgb: 54, 197, 189;
+	--spectrum-seafoam-900-rgb: 10, 154, 128;
 	--spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-	--spectrum-seafoam-1000-rgb: 93, 214, 207;
+	--spectrum-seafoam-1000-rgb: 12, 173, 142;
 	--spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-	--spectrum-seafoam-1100-rgb: 132, 230, 223;
+	--spectrum-seafoam-1100-rgb: 14, 190, 156;
 	--spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-	--spectrum-seafoam-1200-rgb: 176, 242, 236;
+	--spectrum-seafoam-1200-rgb: 29, 214, 176;
 	--spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-	--spectrum-seafoam-1300-rgb: 223, 249, 246;
+	--spectrum-seafoam-1300-rgb: 122, 229, 203;
 	--spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-	--spectrum-seafoam-1400-rgb: 254, 255, 254;
+	--spectrum-seafoam-1400-rgb: 186, 241, 222;
 	--spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-	--spectrum-cyan-100-rgb: 0, 61, 98;
+	--spectrum-seafoam-1500-rgb: 229, 249, 243;
+	--spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb));
+	--spectrum-seafoam-1600-rgb: 255, 255, 255;
+	--spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb));
+	--spectrum-cyan-100-rgb: 0, 29, 39;
 	--spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-	--spectrum-cyan-200-rgb: 0, 71, 111;
+	--spectrum-cyan-200-rgb: 0, 36, 49;
 	--spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-	--spectrum-cyan-300-rgb: 0, 85, 127;
+	--spectrum-cyan-300-rgb: 0, 48, 65;
 	--spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-	--spectrum-cyan-400-rgb: 0, 100, 145;
+	--spectrum-cyan-400-rgb: 0, 64, 88;
 	--spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-	--spectrum-cyan-500-rgb: 0, 116, 162;
+	--spectrum-cyan-500-rgb: 0, 82, 113;
 	--spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-	--spectrum-cyan-600-rgb: 0, 134, 180;
+	--spectrum-cyan-600-rgb: 3, 99, 140;
 	--spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-	--spectrum-cyan-700-rgb: 0, 153, 198;
+	--spectrum-cyan-700-rgb: 8, 115, 168;
 	--spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-	--spectrum-cyan-800-rgb: 14, 173, 215;
+	--spectrum-cyan-800-rgb: 13, 125, 186;
 	--spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-	--spectrum-cyan-900-rgb: 44, 193, 230;
+	--spectrum-cyan-900-rgb: 24, 142, 220;
 	--spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-	--spectrum-cyan-1000-rgb: 84, 211, 241;
+	--spectrum-cyan-1000-rgb: 38, 159, 244;
 	--spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-	--spectrum-cyan-1100-rgb: 127, 228, 249;
+	--spectrum-cyan-1100-rgb: 63, 177, 255;
 	--spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-	--spectrum-cyan-1200-rgb: 167, 241, 255;
+	--spectrum-cyan-1200-rgb: 107, 199, 255;
 	--spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-	--spectrum-cyan-1300-rgb: 215, 250, 255;
+	--spectrum-cyan-1300-rgb: 152, 219, 255;
 	--spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-	--spectrum-cyan-1400-rgb: 255, 255, 255;
+	--spectrum-cyan-1400-rgb: 195, 236, 252;
 	--spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-	--spectrum-indigo-100-rgb: 40, 44, 140;
+	--spectrum-cyan-1500-rgb: 230, 248, 253;
+	--spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb));
+	--spectrum-cyan-1600-rgb: 255, 255, 255;
+	--spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb));
+	--spectrum-indigo-100-rgb: 30, 0, 93;
 	--spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-	--spectrum-indigo-200-rgb: 47, 52, 163;
+	--spectrum-indigo-200-rgb: 35, 0, 110;
 	--spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-	--spectrum-indigo-300-rgb: 57, 63, 187;
+	--spectrum-indigo-300-rgb: 47, 0, 140;
 	--spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-	--spectrum-indigo-400-rgb: 70, 75, 211;
+	--spectrum-indigo-400-rgb: 62, 12, 174;
 	--spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-	--spectrum-indigo-500-rgb: 85, 91, 231;
+	--spectrum-indigo-500-rgb: 79, 30, 209;
 	--spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-	--spectrum-indigo-600-rgb: 104, 109, 244;
+	--spectrum-indigo-600-rgb: 95, 52, 235;
 	--spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-	--spectrum-indigo-700-rgb: 124, 129, 251;
+	--spectrum-indigo-700-rgb: 109, 75, 248;
 	--spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-	--spectrum-indigo-800-rgb: 145, 149, 255;
+	--spectrum-indigo-800-rgb: 116, 91, 252;
 	--spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-	--spectrum-indigo-900-rgb: 167, 170, 255;
+	--spectrum-indigo-900-rgb: 128, 119, 254;
 	--spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-	--spectrum-indigo-1000-rgb: 188, 190, 255;
+	--spectrum-indigo-1000-rgb: 139, 141, 254;
 	--spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-	--spectrum-indigo-1100-rgb: 208, 210, 255;
+	--spectrum-indigo-1100-rgb: 153, 161, 255;
 	--spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-	--spectrum-indigo-1200-rgb: 226, 228, 255;
+	--spectrum-indigo-1200-rgb: 176, 186, 255;
 	--spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-	--spectrum-indigo-1300-rgb: 243, 243, 254;
+	--spectrum-indigo-1300-rgb: 199, 208, 255;
 	--spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-	--spectrum-indigo-1400-rgb: 255, 255, 255;
+	--spectrum-indigo-1400-rgb: 223, 228, 255;
 	--spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-	--spectrum-purple-100-rgb: 76, 13, 157;
+	--spectrum-indigo-1500-rgb: 243, 244, 255;
+	--spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb));
+	--spectrum-indigo-1600-rgb: 255, 255, 255;
+	--spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb));
+	--spectrum-purple-100-rgb: 41, 0, 79;
 	--spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-	--spectrum-purple-200-rgb: 89, 17, 177;
+	--spectrum-purple-200-rgb: 50, 0, 96;
 	--spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-	--spectrum-purple-300-rgb: 105, 28, 200;
+	--spectrum-purple-300-rgb: 64, 0, 122;
 	--spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-	--spectrum-purple-400-rgb: 122, 45, 218;
+	--spectrum-purple-400-rgb: 83, 0, 159;
 	--spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-	--spectrum-purple-500-rgb: 140, 65, 233;
+	--spectrum-purple-500-rgb: 107, 6, 195;
 	--spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-	--spectrum-purple-600-rgb: 157, 87, 243;
+	--spectrum-purple-600-rgb: 130, 34, 215;
 	--spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-	--spectrum-purple-700-rgb: 172, 111, 249;
+	--spectrum-purple-700-rgb: 148, 62, 224;
 	--spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-	--spectrum-purple-800-rgb: 187, 135, 251;
+	--spectrum-purple-800-rgb: 157, 78, 228;
 	--spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-	--spectrum-purple-900-rgb: 202, 159, 252;
+	--spectrum-purple-900-rgb: 173, 105, 233;
 	--spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-	--spectrum-purple-1000-rgb: 215, 182, 254;
+	--spectrum-purple-1000-rgb: 186, 127, 237;
 	--spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-	--spectrum-purple-1100-rgb: 228, 204, 254;
+	--spectrum-purple-1100-rgb: 197, 149, 240;
 	--spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-	--spectrum-purple-1200-rgb: 239, 223, 255;
+	--spectrum-purple-1200-rgb: 212, 176, 244;
 	--spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-	--spectrum-purple-1300-rgb: 249, 240, 255;
+	--spectrum-purple-1300-rgb: 225, 201, 247;
 	--spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-	--spectrum-purple-1400-rgb: 255, 253, 255;
+	--spectrum-purple-1400-rgb: 238, 224, 250;
 	--spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-	--spectrum-fuchsia-100-rgb: 107, 3, 106;
+	--spectrum-purple-1500-rgb: 248, 243, 253;
+	--spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb));
+	--spectrum-purple-1600-rgb: 255, 255, 255;
+	--spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb));
+	--spectrum-fuchsia-100-rgb: 50, 0, 61;
 	--spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-	--spectrum-fuchsia-200-rgb: 123, 0, 123;
+	--spectrum-fuchsia-200-rgb: 61, 0, 74;
 	--spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-	--spectrum-fuchsia-300-rgb: 144, 0, 145;
+	--spectrum-fuchsia-300-rgb: 79, 0, 95;
 	--spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-	--spectrum-fuchsia-400-rgb: 165, 13, 166;
+	--spectrum-fuchsia-400-rgb: 102, 9, 120;
 	--spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-	--spectrum-fuchsia-500-rgb: 185, 37, 185;
+	--spectrum-fuchsia-500-rgb: 127, 23, 146;
 	--spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-	--spectrum-fuchsia-600-rgb: 205, 57, 206;
+	--spectrum-fuchsia-600-rgb: 151, 38, 170;
 	--spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-	--spectrum-fuchsia-700-rgb: 223, 81, 224;
+	--spectrum-fuchsia-700-rgb: 173, 51, 192;
 	--spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-	--spectrum-fuchsia-800-rgb: 235, 110, 236;
+	--spectrum-fuchsia-800-rgb: 186, 60, 206;
 	--spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-	--spectrum-fuchsia-900-rgb: 244, 140, 242;
+	--spectrum-fuchsia-900-rgb: 213, 73, 235;
 	--spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-	--spectrum-fuchsia-1000-rgb: 250, 168, 245;
+	--spectrum-fuchsia-1000-rgb: 232, 91, 253;
 	--spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-	--spectrum-fuchsia-1100-rgb: 254, 194, 248;
+	--spectrum-fuchsia-1100-rgb: 240, 122, 255;
 	--spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-	--spectrum-fuchsia-1200-rgb: 255, 219, 250;
+	--spectrum-fuchsia-1200-rgb: 245, 159, 255;
 	--spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-	--spectrum-fuchsia-1300-rgb: 255, 239, 252;
+	--spectrum-fuchsia-1300-rgb: 248, 191, 255;
 	--spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-	--spectrum-fuchsia-1400-rgb: 255, 253, 255;
+	--spectrum-fuchsia-1400-rgb: 251, 219, 255;
 	--spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-	--spectrum-magenta-100-rgb: 118, 0, 58;
+	--spectrum-fuchsia-1500-rgb: 253, 241, 255;
+	--spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb));
+	--spectrum-fuchsia-1600-rgb: 255, 255, 255;
+	--spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb));
+	--spectrum-magenta-100-rgb: 59, 0, 22;
 	--spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-	--spectrum-magenta-200-rgb: 137, 0, 66;
+	--spectrum-magenta-200-rgb: 74, 0, 27;
 	--spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-	--spectrum-magenta-300-rgb: 160, 0, 77;
+	--spectrum-magenta-300-rgb: 93, 0, 34;
 	--spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-	--spectrum-magenta-400-rgb: 182, 18, 90;
+	--spectrum-magenta-400-rgb: 123, 0, 45;
 	--spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-	--spectrum-magenta-500-rgb: 203, 38, 109;
+	--spectrum-magenta-500-rgb: 152, 7, 60;
 	--spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-	--spectrum-magenta-600-rgb: 222, 61, 130;
+	--spectrum-magenta-600-rgb: 181, 19, 76;
 	--spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-	--spectrum-magenta-700-rgb: 237, 87, 149;
+	--spectrum-magenta-700-rgb: 207, 31, 92;
 	--spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-	--spectrum-magenta-800-rgb: 249, 114, 167;
+	--spectrum-magenta-800-rgb: 224, 38, 101;
 	--spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-	--spectrum-magenta-900-rgb: 255, 143, 185;
+	--spectrum-magenta-900-rgb: 255, 51, 119;
 	--spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-	--spectrum-magenta-1000-rgb: 255, 172, 202;
+	--spectrum-magenta-1000-rgb: 255, 96, 149;
 	--spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-	--spectrum-magenta-1100-rgb: 255, 198, 218;
+	--spectrum-magenta-1100-rgb: 255, 128, 171;
 	--spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-	--spectrum-magenta-1200-rgb: 255, 221, 233;
+	--spectrum-magenta-1200-rgb: 255, 163, 194;
 	--spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-	--spectrum-magenta-1300-rgb: 255, 240, 245;
+	--spectrum-magenta-1300-rgb: 255, 193, 214;
 	--spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
-	--spectrum-magenta-1400-rgb: 255, 252, 253;
+	--spectrum-magenta-1400-rgb: 255, 220, 232;
 	--spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
+	--spectrum-magenta-1500-rgb: 255, 241, 246;
+	--spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb));
+	--spectrum-magenta-1600-rgb: 255, 255, 255;
+	--spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb));
+	--spectrum-pink-100-rgb: 58, 0, 37;
+	--spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb));
+	--spectrum-pink-200-rgb: 71, 0, 44;
+	--spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb));
+	--spectrum-pink-300-rgb: 90, 0, 57;
+	--spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb));
+	--spectrum-pink-400-rgb: 115, 7, 75;
+	--spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb));
+	--spectrum-pink-500-rgb: 143, 18, 97;
+	--spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb));
+	--spectrum-pink-600-rgb: 171, 29, 119;
+	--spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb));
+	--spectrum-pink-700-rgb: 196, 39, 138;
+	--spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb));
+	--spectrum-pink-800-rgb: 213, 45, 151;
+	--spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb));
+	--spectrum-pink-900-rgb: 236, 67, 175;
+	--spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb));
+	--spectrum-pink-1000-rgb: 251, 90, 196;
+	--spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb));
+	--spectrum-pink-1100-rgb: 255, 122, 210;
+	--spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb));
+	--spectrum-pink-1200-rgb: 255, 159, 223;
+	--spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb));
+	--spectrum-pink-1300-rgb: 255, 191, 234;
+	--spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb));
+	--spectrum-pink-1400-rgb: 255, 219, 243;
+	--spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb));
+	--spectrum-pink-1500-rgb: 255, 241, 250;
+	--spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb));
+	--spectrum-pink-1600-rgb: 255, 255, 255;
+	--spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb));
+	--spectrum-turquoise-100-rgb: 0, 30, 33;
+	--spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb));
+	--spectrum-turquoise-200-rgb: 0, 37, 41;
+	--spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb));
+	--spectrum-turquoise-300-rgb: 0, 49, 54;
+	--spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb));
+	--spectrum-turquoise-400-rgb: 0, 66, 72;
+	--spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb));
+	--spectrum-turquoise-500-rgb: 3, 84, 92;
+	--spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb));
+	--spectrum-turquoise-600-rgb: 5, 103, 112;
+	--spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb));
+	--spectrum-turquoise-700-rgb: 7, 120, 131;
+	--spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb));
+	--spectrum-turquoise-800-rgb: 9, 131, 142;
+	--spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb));
+	--spectrum-turquoise-900-rgb: 11, 151, 164;
+	--spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb));
+	--spectrum-turquoise-1000-rgb: 13, 168, 182;
+	--spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb));
+	--spectrum-turquoise-1100-rgb: 16, 186, 202;
+	--spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb));
+	--spectrum-turquoise-1200-rgb: 64, 208, 220;
+	--spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb));
+	--spectrum-turquoise-1300-rgb: 128, 225, 231;
+	--spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb));
+	--spectrum-turquoise-1400-rgb: 183, 240, 240;
+	--spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb));
+	--spectrum-turquoise-1500-rgb: 228, 249, 249;
+	--spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb));
+	--spectrum-turquoise-1600-rgb: 255, 255, 255;
+	--spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb));
+	--spectrum-brown-100-rgb: 35, 24, 8;
+	--spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb));
+	--spectrum-brown-200-rgb: 44, 31, 11;
+	--spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb));
+	--spectrum-brown-300-rgb: 58, 40, 14;
+	--spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb));
+	--spectrum-brown-400-rgb: 78, 55, 19;
+	--spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb));
+	--spectrum-brown-500-rgb: 98, 71, 30;
+	--spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb));
+	--spectrum-brown-600-rgb: 115, 88, 47;
+	--spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb));
+	--spectrum-brown-700-rgb: 132, 104, 61;
+	--spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb));
+	--spectrum-brown-800-rgb: 143, 114, 69;
+	--spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb));
+	--spectrum-brown-900-rgb: 163, 132, 84;
+	--spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb));
+	--spectrum-brown-1000-rgb: 181, 147, 98;
+	--spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb));
+	--spectrum-brown-1100-rgb: 199, 163, 112;
+	--spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb));
+	--spectrum-brown-1200-rgb: 222, 185, 130;
+	--spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb));
+	--spectrum-brown-1300-rgb: 232, 207, 169;
+	--spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb));
+	--spectrum-brown-1400-rgb: 242, 227, 206;
+	--spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb));
+	--spectrum-brown-1500-rgb: 250, 244, 236;
+	--spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb));
+	--spectrum-brown-1600-rgb: 255, 255, 255;
+	--spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb));
+	--spectrum-silver-100-rgb: 26, 26, 26;
+	--spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb));
+	--spectrum-silver-200-rgb: 33, 33, 33;
+	--spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb));
+	--spectrum-silver-300-rgb: 44, 44, 44;
+	--spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb));
+	--spectrum-silver-400-rgb: 59, 59, 59;
+	--spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb));
+	--spectrum-silver-500-rgb: 76, 76, 76;
+	--spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb));
+	--spectrum-silver-600-rgb: 92, 92, 92;
+	--spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb));
+	--spectrum-silver-700-rgb: 108, 108, 108;
+	--spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb));
+	--spectrum-silver-800-rgb: 118, 118, 118;
+	--spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb));
+	--spectrum-silver-900-rgb: 137, 137, 137;
+	--spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb));
+	--spectrum-silver-1000-rgb: 152, 152, 152;
+	--spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb));
+	--spectrum-silver-1100-rgb: 169, 169, 169;
+	--spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb));
+	--spectrum-silver-1200-rgb: 190, 190, 190;
+	--spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb));
+	--spectrum-silver-1300-rgb: 211, 211, 211;
+	--spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb));
+	--spectrum-silver-1400-rgb: 229, 229, 229;
+	--spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb));
+	--spectrum-silver-1500-rgb: 244, 244, 244;
+	--spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb));
+	--spectrum-silver-1600-rgb: 255, 255, 255;
+	--spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb));
+	--spectrum-cinnamon-100-rgb: 48, 17, 4;
+	--spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb));
+	--spectrum-cinnamon-200-rgb: 59, 21, 5;
+	--spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb));
+	--spectrum-cinnamon-300-rgb: 79, 28, 7;
+	--spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb));
+	--spectrum-cinnamon-400-rgb: 100, 41, 15;
+	--spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb));
+	--spectrum-cinnamon-500-rgb: 122, 57, 28;
+	--spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb));
+	--spectrum-cinnamon-600-rgb: 143, 74, 40;
+	--spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb));
+	--spectrum-cinnamon-700-rgb: 163, 88, 52;
+	--spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb));
+	--spectrum-cinnamon-800-rgb: 176, 98, 59;
+	--spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb));
+	--spectrum-cinnamon-900-rgb: 192, 119, 80;
+	--spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb));
+	--spectrum-cinnamon-1000-rgb: 206, 136, 99;
+	--spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb));
+	--spectrum-cinnamon-1100-rgb: 220, 154, 118;
+	--spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb));
+	--spectrum-cinnamon-1200-rgb: 232, 179, 149;
+	--spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb));
+	--spectrum-cinnamon-1300-rgb: 239, 203, 183;
+	--spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb));
+	--spectrum-cinnamon-1400-rgb: 246, 225, 214;
+	--spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb));
+	--spectrum-cinnamon-1500-rgb: 252, 244, 239;
+	--spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb));
+	--spectrum-cinnamon-1600-rgb: 255, 255, 255;
+	--spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb));
 	--spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800);
 	--spectrum-icon-color-green-primary-default: var(--spectrum-green-800);
 	--spectrum-icon-color-red-primary-default: var(--spectrum-red-700);
 	--spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000);
+	--spectrum-negative-subdued-background-color-default: var(--spectrum-negative-subtle-background-color-default);
+	--spectrum-accent-subtle-background-color-default: var(--spectrum-accent-color-300);
+	--spectrum-informative-subtle-background-color-default: var(--spectrum-informative-color-300);
+	--spectrum-positive-subtle-background-color-default: var(--spectrum-positive-color-300);
+	--spectrum-notice-subtle-background-color-default: var(--spectrum-notice-color-300);
+	--spectrum-negative-subtle-background-color-default: var(--spectrum-negative-color-300);
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--color-scheme: dark;
+	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
+	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
+	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
+	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
+	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
+	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
+	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
+	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200);
+	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
+	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
+	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
+	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
+	--spectrum-dropindicator-color: var(--spectrum-blue-700);
+	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
+	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
+	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
+	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
+	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
+	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
+	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
+	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
+	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-swatch-border-color-rgb: 255, 255, 255;
+	--spectrum-swatch-border-color-opacity: 0.51;
+	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
+	--spectrum-swatch-border-color-light-rgb: 255, 255, 255;
+	--spectrum-swatch-border-color-light-opacity: 0.2;
+	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
+	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
+	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
 }
diff --git a/tokens/dist/css/darkest-vars.css b/tokens/dist/css/darkest-vars.css
deleted file mode 100644
index 0e7ea3b7d8..0000000000
--- a/tokens/dist/css/darkest-vars.css
+++ /dev/null
@@ -1,472 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--darkest {
-	--spectrum-overlay-opacity: 0.6;
-	--spectrum-drop-shadow-color-rgb: 0, 0, 0;
-	--spectrum-drop-shadow-color-opacity: 0.8;
-	--spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
-	--spectrum-background-base-color: var(--spectrum-gray-50);
-	--spectrum-background-layer-1-color: var(--spectrum-gray-75);
-	--spectrum-background-layer-2-color: var(--spectrum-gray-100);
-	--spectrum-neutral-background-color-default: var(--spectrum-gray-400);
-	--spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
-	--spectrum-neutral-background-color-down: var(--spectrum-gray-200);
-	--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300);
-	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400);
-	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300);
-	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200);
-	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-300);
-	--spectrum-accent-background-color-default: var(--spectrum-accent-color-600);
-	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-500);
-	--spectrum-accent-background-color-down: var(--spectrum-accent-color-400);
-	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-500);
-	--spectrum-informative-background-color-default: var(--spectrum-informative-color-600);
-	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-500);
-	--spectrum-informative-background-color-down: var(--spectrum-informative-color-400);
-	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-500);
-	--spectrum-negative-background-color-default: var(--spectrum-negative-color-600);
-	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-500);
-	--spectrum-negative-background-color-down: var(--spectrum-negative-color-400);
-	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-500);
-	--spectrum-positive-background-color-default: var(--spectrum-positive-color-600);
-	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-500);
-	--spectrum-positive-background-color-down: var(--spectrum-positive-color-400);
-	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-500);
-	--spectrum-notice-background-color-default: var(--spectrum-notice-color-800);
-	--spectrum-gray-background-color-default: var(--spectrum-gray-700);
-	--spectrum-red-background-color-default: var(--spectrum-red-700);
-	--spectrum-orange-background-color-default: var(--spectrum-orange-800);
-	--spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
-	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-900);
-	--spectrum-celery-background-color-default: var(--spectrum-celery-800);
-	--spectrum-green-background-color-default: var(--spectrum-green-700);
-	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
-	--spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
-	--spectrum-blue-background-color-default: var(--spectrum-blue-700);
-	--spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
-	--spectrum-purple-background-color-default: var(--spectrum-purple-700);
-	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
-	--spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
-	--spectrum-neutral-visual-color: var(--spectrum-gray-600);
-	--spectrum-accent-visual-color: var(--spectrum-accent-color-900);
-	--spectrum-informative-visual-color: var(--spectrum-informative-color-900);
-	--spectrum-negative-visual-color: var(--spectrum-negative-color-700);
-	--spectrum-notice-visual-color: var(--spectrum-notice-color-900);
-	--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
-	--spectrum-gray-visual-color: var(--spectrum-gray-600);
-	--spectrum-red-visual-color: var(--spectrum-red-700);
-	--spectrum-orange-visual-color: var(--spectrum-orange-900);
-	--spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
-	--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
-	--spectrum-celery-visual-color: var(--spectrum-celery-800);
-	--spectrum-green-visual-color: var(--spectrum-green-800);
-	--spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
-	--spectrum-cyan-visual-color: var(--spectrum-cyan-900);
-	--spectrum-blue-visual-color: var(--spectrum-blue-900);
-	--spectrum-indigo-visual-color: var(--spectrum-indigo-900);
-	--spectrum-purple-visual-color: var(--spectrum-purple-900);
-	--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
-	--spectrum-magenta-visual-color: var(--spectrum-magenta-900);
-	--spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800);
-	--spectrum-gray-50-rgb: 0, 0, 0;
-	--spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-	--spectrum-gray-75-rgb: 14, 14, 14;
-	--spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-	--spectrum-gray-100-rgb: 29, 29, 29;
-	--spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-	--spectrum-gray-200-rgb: 48, 48, 48;
-	--spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-	--spectrum-gray-300-rgb: 75, 75, 75;
-	--spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-	--spectrum-gray-400-rgb: 106, 106, 106;
-	--spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-	--spectrum-gray-500-rgb: 141, 141, 141;
-	--spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-	--spectrum-gray-600-rgb: 176, 176, 176;
-	--spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-	--spectrum-gray-700-rgb: 208, 208, 208;
-	--spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
-	--spectrum-gray-800-rgb: 235, 235, 235;
-	--spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
-	--spectrum-gray-900-rgb: 255, 255, 255;
-	--spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
-	--spectrum-blue-100-rgb: 0, 38, 81;
-	--spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-	--spectrum-blue-200-rgb: 0, 50, 106;
-	--spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-	--spectrum-blue-300-rgb: 0, 64, 135;
-	--spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-	--spectrum-blue-400-rgb: 0, 78, 166;
-	--spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-	--spectrum-blue-500-rgb: 0, 92, 200;
-	--spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-	--spectrum-blue-600-rgb: 6, 108, 231;
-	--spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-	--spectrum-blue-700-rgb: 29, 128, 245;
-	--spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-	--spectrum-blue-800-rgb: 64, 150, 243;
-	--spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-	--spectrum-blue-900-rgb: 94, 170, 247;
-	--spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-	--spectrum-blue-1000-rgb: 124, 189, 250;
-	--spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-	--spectrum-blue-1100-rgb: 152, 206, 253;
-	--spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-	--spectrum-blue-1200-rgb: 179, 222, 254;
-	--spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-	--spectrum-blue-1300-rgb: 206, 234, 255;
-	--spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-	--spectrum-blue-1400-rgb: 227, 243, 255;
-	--spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-	--spectrum-red-100-rgb: 87, 0, 0;
-	--spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-	--spectrum-red-200-rgb: 110, 0, 0;
-	--spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-	--spectrum-red-300-rgb: 138, 0, 0;
-	--spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-	--spectrum-red-400-rgb: 167, 0, 0;
-	--spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-	--spectrum-red-500-rgb: 196, 7, 6;
-	--spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-	--spectrum-red-600-rgb: 221, 33, 24;
-	--spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-	--spectrum-red-700-rgb: 238, 67, 49;
-	--spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-	--spectrum-red-800-rgb: 249, 99, 76;
-	--spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-	--spectrum-red-900-rgb: 255, 129, 107;
-	--spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-	--spectrum-red-1000-rgb: 255, 158, 140;
-	--spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-	--spectrum-red-1100-rgb: 255, 183, 169;
-	--spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-	--spectrum-red-1200-rgb: 255, 205, 195;
-	--spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-	--spectrum-red-1300-rgb: 255, 223, 217;
-	--spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-	--spectrum-red-1400-rgb: 255, 237, 234;
-	--spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-	--spectrum-orange-100-rgb: 72, 24, 1;
-	--spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-	--spectrum-orange-200-rgb: 92, 32, 0;
-	--spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-	--spectrum-orange-300-rgb: 115, 43, 0;
-	--spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-	--spectrum-orange-400-rgb: 138, 55, 0;
-	--spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-	--spectrum-orange-500-rgb: 162, 68, 0;
-	--spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-	--spectrum-orange-600-rgb: 186, 82, 0;
-	--spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-	--spectrum-orange-700-rgb: 210, 98, 0;
-	--spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-	--spectrum-orange-800-rgb: 232, 116, 0;
-	--spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-	--spectrum-orange-900-rgb: 249, 137, 23;
-	--spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-	--spectrum-orange-1000-rgb: 255, 162, 59;
-	--spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-	--spectrum-orange-1100-rgb: 255, 188, 102;
-	--spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-	--spectrum-orange-1200-rgb: 253, 210, 145;
-	--spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-	--spectrum-orange-1300-rgb: 255, 226, 181;
-	--spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-	--spectrum-orange-1400-rgb: 255, 239, 213;
-	--spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-	--spectrum-yellow-100-rgb: 53, 36, 0;
-	--spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-	--spectrum-yellow-200-rgb: 68, 47, 0;
-	--spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-	--spectrum-yellow-300-rgb: 86, 62, 0;
-	--spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-	--spectrum-yellow-400-rgb: 103, 77, 0;
-	--spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-	--spectrum-yellow-500-rgb: 122, 92, 0;
-	--spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-	--spectrum-yellow-600-rgb: 141, 108, 0;
-	--spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-	--spectrum-yellow-700-rgb: 161, 126, 0;
-	--spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-	--spectrum-yellow-800-rgb: 180, 144, 0;
-	--spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-	--spectrum-yellow-900-rgb: 199, 162, 0;
-	--spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-	--spectrum-yellow-1000-rgb: 216, 181, 0;
-	--spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-	--spectrum-yellow-1100-rgb: 233, 199, 0;
-	--spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-	--spectrum-yellow-1200-rgb: 247, 216, 4;
-	--spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-	--spectrum-yellow-1300-rgb: 249, 233, 97;
-	--spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-	--spectrum-yellow-1400-rgb: 252, 243, 170;
-	--spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-	--spectrum-chartreuse-100-rgb: 32, 43, 0;
-	--spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-	--spectrum-chartreuse-200-rgb: 42, 56, 0;
-	--spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-	--spectrum-chartreuse-300-rgb: 54, 72, 0;
-	--spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-	--spectrum-chartreuse-400-rgb: 66, 88, 0;
-	--spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-	--spectrum-chartreuse-500-rgb: 79, 105, 0;
-	--spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-	--spectrum-chartreuse-600-rgb: 93, 123, 0;
-	--spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-	--spectrum-chartreuse-700-rgb: 107, 142, 0;
-	--spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-	--spectrum-chartreuse-800-rgb: 122, 161, 0;
-	--spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-	--spectrum-chartreuse-900-rgb: 138, 180, 3;
-	--spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-	--spectrum-chartreuse-1000-rgb: 154, 198, 11;
-	--spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-	--spectrum-chartreuse-1100-rgb: 170, 216, 22;
-	--spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-	--spectrum-chartreuse-1200-rgb: 187, 232, 41;
-	--spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-	--spectrum-chartreuse-1300-rgb: 205, 246, 72;
-	--spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-	--spectrum-chartreuse-1400-rgb: 225, 253, 132;
-	--spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-	--spectrum-celery-100-rgb: 0, 47, 7;
-	--spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-	--spectrum-celery-200-rgb: 0, 61, 9;
-	--spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-	--spectrum-celery-300-rgb: 0, 77, 12;
-	--spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-	--spectrum-celery-400-rgb: 0, 95, 15;
-	--spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-	--spectrum-celery-500-rgb: 0, 113, 15;
-	--spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-	--spectrum-celery-600-rgb: 0, 132, 15;
-	--spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-	--spectrum-celery-700-rgb: 0, 151, 20;
-	--spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-	--spectrum-celery-800-rgb: 13, 171, 37;
-	--spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-	--spectrum-celery-900-rgb: 45, 191, 58;
-	--spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-	--spectrum-celery-1000-rgb: 80, 208, 82;
-	--spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-	--spectrum-celery-1100-rgb: 115, 224, 107;
-	--spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-	--spectrum-celery-1200-rgb: 147, 237, 131;
-	--spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-	--spectrum-celery-1300-rgb: 180, 247, 162;
-	--spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-	--spectrum-celery-1400-rgb: 213, 252, 202;
-	--spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-	--spectrum-green-100-rgb: 10, 44, 28;
-	--spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-	--spectrum-green-200-rgb: 7, 59, 36;
-	--spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-	--spectrum-green-300-rgb: 0, 76, 46;
-	--spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-	--spectrum-green-400-rgb: 0, 93, 57;
-	--spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-	--spectrum-green-500-rgb: 0, 111, 69;
-	--spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-	--spectrum-green-600-rgb: 0, 130, 82;
-	--spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-	--spectrum-green-700-rgb: 0, 149, 98;
-	--spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-	--spectrum-green-800-rgb: 28, 168, 114;
-	--spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-	--spectrum-green-900-rgb: 52, 187, 132;
-	--spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-	--spectrum-green-1000-rgb: 75, 205, 149;
-	--spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-	--spectrum-green-1100-rgb: 103, 222, 168;
-	--spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-	--spectrum-green-1200-rgb: 137, 236, 188;
-	--spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-	--spectrum-green-1300-rgb: 177, 244, 209;
-	--spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-	--spectrum-green-1400-rgb: 214, 249, 228;
-	--spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-	--spectrum-seafoam-100-rgb: 18, 43, 42;
-	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-	--spectrum-seafoam-200-rgb: 19, 57, 55;
-	--spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-	--spectrum-seafoam-300-rgb: 16, 73, 70;
-	--spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-	--spectrum-seafoam-400-rgb: 3, 91, 88;
-	--spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-	--spectrum-seafoam-500-rgb: 0, 108, 104;
-	--spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-	--spectrum-seafoam-600-rgb: 0, 127, 121;
-	--spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-	--spectrum-seafoam-700-rgb: 0, 146, 140;
-	--spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-	--spectrum-seafoam-800-rgb: 0, 165, 159;
-	--spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-	--spectrum-seafoam-900-rgb: 26, 185, 178;
-	--spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-	--spectrum-seafoam-1000-rgb: 66, 202, 195;
-	--spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-	--spectrum-seafoam-1100-rgb: 102, 218, 211;
-	--spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-	--spectrum-seafoam-1200-rgb: 139, 232, 225;
-	--spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-	--spectrum-seafoam-1300-rgb: 179, 242, 237;
-	--spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-	--spectrum-seafoam-1400-rgb: 215, 248, 244;
-	--spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-	--spectrum-cyan-100-rgb: 0, 41, 68;
-	--spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-	--spectrum-cyan-200-rgb: 0, 54, 88;
-	--spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-	--spectrum-cyan-300-rgb: 0, 69, 108;
-	--spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-	--spectrum-cyan-400-rgb: 0, 86, 128;
-	--spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-	--spectrum-cyan-500-rgb: 0, 103, 147;
-	--spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-	--spectrum-cyan-600-rgb: 0, 121, 167;
-	--spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-	--spectrum-cyan-700-rgb: 0, 140, 186;
-	--spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-	--spectrum-cyan-800-rgb: 4, 160, 205;
-	--spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-	--spectrum-cyan-900-rgb: 23, 180, 221;
-	--spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-	--spectrum-cyan-1000-rgb: 57, 199, 234;
-	--spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-	--spectrum-cyan-1100-rgb: 96, 216, 243;
-	--spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-	--spectrum-cyan-1200-rgb: 134, 230, 250;
-	--spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-	--spectrum-cyan-1300-rgb: 170, 242, 255;
-	--spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-	--spectrum-cyan-1400-rgb: 206, 249, 255;
-	--spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-	--spectrum-indigo-100-rgb: 26, 29, 97;
-	--spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-	--spectrum-indigo-200-rgb: 35, 39, 125;
-	--spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-	--spectrum-indigo-300-rgb: 46, 50, 158;
-	--spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-	--spectrum-indigo-400-rgb: 58, 63, 189;
-	--spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-	--spectrum-indigo-500-rgb: 73, 78, 216;
-	--spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-	--spectrum-indigo-600-rgb: 90, 96, 235;
-	--spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-	--spectrum-indigo-700-rgb: 110, 115, 246;
-	--spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-	--spectrum-indigo-800-rgb: 132, 136, 253;
-	--spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-	--spectrum-indigo-900-rgb: 153, 157, 255;
-	--spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-	--spectrum-indigo-1000-rgb: 174, 177, 255;
-	--spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-	--spectrum-indigo-1100-rgb: 194, 196, 255;
-	--spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-	--spectrum-indigo-1200-rgb: 212, 213, 255;
-	--spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-	--spectrum-indigo-1300-rgb: 227, 228, 255;
-	--spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-	--spectrum-indigo-1400-rgb: 240, 240, 255;
-	--spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-	--spectrum-purple-100-rgb: 50, 16, 104;
-	--spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-	--spectrum-purple-200-rgb: 67, 13, 140;
-	--spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-	--spectrum-purple-300-rgb: 86, 16, 173;
-	--spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-	--spectrum-purple-400-rgb: 106, 29, 200;
-	--spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-	--spectrum-purple-500-rgb: 126, 49, 222;
-	--spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-	--spectrum-purple-600-rgb: 145, 70, 236;
-	--spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-	--spectrum-purple-700-rgb: 162, 94, 246;
-	--spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-	--spectrum-purple-800-rgb: 178, 119, 250;
-	--spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-	--spectrum-purple-900-rgb: 192, 143, 252;
-	--spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-	--spectrum-purple-1000-rgb: 206, 166, 253;
-	--spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-	--spectrum-purple-1100-rgb: 219, 188, 254;
-	--spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-	--spectrum-purple-1200-rgb: 230, 207, 255;
-	--spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-	--spectrum-purple-1300-rgb: 240, 224, 255;
-	--spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-	--spectrum-purple-1400-rgb: 248, 237, 255;
-	--spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-	--spectrum-fuchsia-100-rgb: 70, 14, 68;
-	--spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-	--spectrum-fuchsia-200-rgb: 93, 9, 92;
-	--spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-	--spectrum-fuchsia-300-rgb: 120, 0, 120;
-	--spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-	--spectrum-fuchsia-400-rgb: 146, 0, 147;
-	--spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-	--spectrum-fuchsia-500-rgb: 169, 19, 170;
-	--spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-	--spectrum-fuchsia-600-rgb: 191, 43, 191;
-	--spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-	--spectrum-fuchsia-700-rgb: 211, 65, 213;
-	--spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-	--spectrum-fuchsia-800-rgb: 228, 91, 229;
-	--spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-	--spectrum-fuchsia-900-rgb: 239, 120, 238;
-	--spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-	--spectrum-fuchsia-1000-rgb: 246, 149, 243;
-	--spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-	--spectrum-fuchsia-1100-rgb: 251, 175, 246;
-	--spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-	--spectrum-fuchsia-1200-rgb: 254, 199, 248;
-	--spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-	--spectrum-fuchsia-1300-rgb: 255, 220, 250;
-	--spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-	--spectrum-fuchsia-1400-rgb: 255, 235, 252;
-	--spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-	--spectrum-magenta-100-rgb: 83, 3, 41;
-	--spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-	--spectrum-magenta-200-rgb: 106, 0, 52;
-	--spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-	--spectrum-magenta-300-rgb: 133, 0, 65;
-	--spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-	--spectrum-magenta-400-rgb: 161, 0, 78;
-	--spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-	--spectrum-magenta-500-rgb: 186, 22, 93;
-	--spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-	--spectrum-magenta-600-rgb: 209, 43, 114;
-	--spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-	--spectrum-magenta-700-rgb: 227, 69, 137;
-	--spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-	--spectrum-magenta-800-rgb: 241, 97, 156;
-	--spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-	--spectrum-magenta-900-rgb: 252, 124, 173;
-	--spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-	--spectrum-magenta-1000-rgb: 255, 152, 191;
-	--spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-	--spectrum-magenta-1100-rgb: 255, 179, 207;
-	--spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-	--spectrum-magenta-1200-rgb: 255, 202, 221;
-	--spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-	--spectrum-magenta-1300-rgb: 255, 221, 233;
-	--spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
-	--spectrum-magenta-1400-rgb: 255, 236, 243;
-	--spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
-	--spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800);
-	--spectrum-icon-color-green-primary-default: var(--spectrum-green-800);
-	--spectrum-icon-color-red-primary-default: var(--spectrum-red-700);
-	--spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000);
-}
diff --git a/tokens/dist/css/express/global-vars.css b/tokens/dist/css/express/global-vars.css
deleted file mode 100644
index d4b92e545c..0000000000
--- a/tokens/dist/css/express/global-vars.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express {
-	--spectrum-neutral-background-color-selected-default: var(--spectrum-gray-800);
-	--spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-900);
-	--spectrum-slider-track-thickness: 4px;
-	--spectrum-slider-handle-gap: 0px;
-	--spectrum-picker-border-width: 0;
-	--spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px;
-	--spectrum-in-field-button-edge-to-fill: 4px;
-	--spectrum-in-field-button-stacked-inner-edge-to-fill: 1px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px;
-	--spectrum-border-width-100: 2px;
-	--spectrum-accent-color-100: var(--spectrum-indigo-100);
-	--spectrum-accent-color-200: var(--spectrum-indigo-200);
-	--spectrum-accent-color-300: var(--spectrum-indigo-300);
-	--spectrum-accent-color-400: var(--spectrum-indigo-400);
-	--spectrum-accent-color-500: var(--spectrum-indigo-500);
-	--spectrum-accent-color-600: var(--spectrum-indigo-600);
-	--spectrum-accent-color-700: var(--spectrum-indigo-700);
-	--spectrum-accent-color-800: var(--spectrum-indigo-800);
-	--spectrum-accent-color-900: var(--spectrum-indigo-900);
-	--spectrum-accent-color-1000: var(--spectrum-indigo-1000);
-	--spectrum-accent-color-1100: var(--spectrum-indigo-1100);
-	--spectrum-accent-color-1200: var(--spectrum-indigo-1200);
-	--spectrum-accent-color-1300: var(--spectrum-indigo-1300);
-	--spectrum-accent-color-1400: var(--spectrum-indigo-1400);
-	--spectrum-heading-sans-serif-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-serif-emphasized-font-weight: var(--spectrum-black-font-weight);
-	--system: express;
-}
diff --git a/tokens/dist/css/express/index.css b/tokens/dist/css/express/index.css
deleted file mode 100644
index 0b9cacec0f..0000000000
--- a/tokens/dist/css/express/index.css
+++ /dev/null
@@ -1,187 +0,0 @@
-/* Token version: v15.2.0 */
-
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--dark,
-.spectrum--express.spectrum--darkest {
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
-}
-.spectrum--express {
-	--spectrum-neutral-background-color-selected-default: var(--spectrum-gray-800);
-	--spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-900);
-	--spectrum-slider-track-thickness: 4px;
-	--spectrum-slider-handle-gap: 0px;
-	--spectrum-picker-border-width: 0;
-	--spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px;
-	--spectrum-in-field-button-edge-to-fill: 4px;
-	--spectrum-in-field-button-stacked-inner-edge-to-fill: 1px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px;
-	--spectrum-border-width-100: 2px;
-	--spectrum-accent-color-100: var(--spectrum-indigo-100);
-	--spectrum-accent-color-200: var(--spectrum-indigo-200);
-	--spectrum-accent-color-300: var(--spectrum-indigo-300);
-	--spectrum-accent-color-400: var(--spectrum-indigo-400);
-	--spectrum-accent-color-500: var(--spectrum-indigo-500);
-	--spectrum-accent-color-600: var(--spectrum-indigo-600);
-	--spectrum-accent-color-700: var(--spectrum-indigo-700);
-	--spectrum-accent-color-800: var(--spectrum-indigo-800);
-	--spectrum-accent-color-900: var(--spectrum-indigo-900);
-	--spectrum-accent-color-1000: var(--spectrum-indigo-1000);
-	--spectrum-accent-color-1100: var(--spectrum-indigo-1100);
-	--spectrum-accent-color-1200: var(--spectrum-indigo-1200);
-	--spectrum-accent-color-1300: var(--spectrum-indigo-1300);
-	--spectrum-accent-color-1400: var(--spectrum-indigo-1400);
-	--spectrum-heading-sans-serif-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-serif-emphasized-font-weight: var(--spectrum-black-font-weight);
-	--system: express;
-}
-.spectrum--express.spectrum--large {
-	--spectrum-checkbox-control-size-small: 18px;
-	--spectrum-checkbox-control-size-medium: 20px;
-	--spectrum-checkbox-control-size-large: 22px;
-	--spectrum-checkbox-control-size-extra-large: 26px;
-	--spectrum-checkbox-top-to-control-small: 6px;
-	--spectrum-checkbox-top-to-control-medium: 10px;
-	--spectrum-checkbox-top-to-control-large: 14px;
-	--spectrum-checkbox-top-to-control-extra-large: 17px;
-	--spectrum-switch-control-width-small: 32px;
-	--spectrum-switch-control-width-medium: 36px;
-	--spectrum-switch-control-width-large: 41px;
-	--spectrum-switch-control-width-extra-large: 46px;
-	--spectrum-switch-control-height-small: 18px;
-	--spectrum-switch-control-height-medium: 20px;
-	--spectrum-switch-control-height-large: 22px;
-	--spectrum-switch-control-height-extra-large: 26px;
-	--spectrum-switch-top-to-control-small: 6px;
-	--spectrum-switch-top-to-control-medium: 10px;
-	--spectrum-switch-top-to-control-large: 14px;
-	--spectrum-switch-top-to-control-extra-large: 17px;
-	--spectrum-radio-button-control-size-small: 18px;
-	--spectrum-radio-button-control-size-medium: 20px;
-	--spectrum-radio-button-control-size-large: 22px;
-	--spectrum-radio-button-control-size-extra-large: 26px;
-	--spectrum-radio-button-top-to-control-small: 6px;
-	--spectrum-radio-button-top-to-control-medium: 10px;
-	--spectrum-radio-button-top-to-control-large: 14px;
-	--spectrum-radio-button-top-to-control-extra-large: 17px;
-	--spectrum-slider-control-height-small: 22px;
-	--spectrum-slider-control-height-medium: 24px;
-	--spectrum-slider-control-height-large: 28px;
-	--spectrum-slider-control-height-extra-large: 30px;
-	--spectrum-slider-handle-size-small: 22px;
-	--spectrum-slider-handle-size-medium: 24px;
-	--spectrum-slider-handle-size-large: 28px;
-	--spectrum-slider-handle-size-extra-large: 30px;
-	--spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200);
-	--spectrum-slider-bottom-to-handle-small: 4px;
-	--spectrum-slider-bottom-to-handle-medium: 8px;
-	--spectrum-slider-bottom-to-handle-large: 12px;
-	--spectrum-slider-bottom-to-handle-extra-large: 15px;
-	--spectrum-corner-radius-75: 4px;
-	--spectrum-corner-radius-100: 8px;
-	--spectrum-corner-radius-200: 16px;
-	--spectrum-drop-shadow-x: 0px;
-	--spectrum-drop-shadow-y: 4px;
-	--spectrum-drop-shadow-blur: 16px;
-	--spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
-	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-	--spectrum-dialog-confirm-border-radius: 8px;
-	--spectrum-dial-border-radius: 15px;
-	--spectrum-assetcard-focus-ring-border-radius: 12px;
-}
-.spectrum--express.spectrum--light,
-.spectrum--express.spectrum--lightest {
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb);
-	--spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900);
-}
-.spectrum--express.spectrum--medium {
-	--spectrum-checkbox-control-size-small: 14px;
-	--spectrum-checkbox-control-size-medium: 16px;
-	--spectrum-checkbox-control-size-large: 18px;
-	--spectrum-checkbox-control-size-extra-large: 20px;
-	--spectrum-checkbox-top-to-control-small: 5px;
-	--spectrum-checkbox-top-to-control-medium: 8px;
-	--spectrum-checkbox-top-to-control-large: 11px;
-	--spectrum-checkbox-top-to-control-extra-large: 14px;
-	--spectrum-switch-control-width-small: 25px;
-	--spectrum-switch-control-width-medium: 28px;
-	--spectrum-switch-control-width-large: 32px;
-	--spectrum-switch-control-width-extra-large: 35px;
-	--spectrum-switch-control-height-small: 14px;
-	--spectrum-switch-control-height-medium: 16px;
-	--spectrum-switch-control-height-large: 18px;
-	--spectrum-switch-control-height-extra-large: 20px;
-	--spectrum-switch-top-to-control-small: 5px;
-	--spectrum-switch-top-to-control-medium: 8px;
-	--spectrum-switch-top-to-control-large: 11px;
-	--spectrum-switch-top-to-control-extra-large: 14px;
-	--spectrum-radio-button-control-size-small: 14px;
-	--spectrum-radio-button-control-size-medium: 16px;
-	--spectrum-radio-button-control-size-large: 18px;
-	--spectrum-radio-button-control-size-extra-large: 20px;
-	--spectrum-radio-button-top-to-control-small: 5px;
-	--spectrum-radio-button-top-to-control-medium: 8px;
-	--spectrum-radio-button-top-to-control-large: 11px;
-	--spectrum-radio-button-top-to-control-extra-large: 14px;
-	--spectrum-slider-control-height-small: 18px;
-	--spectrum-slider-control-height-medium: 20px;
-	--spectrum-slider-control-height-large: 22px;
-	--spectrum-slider-control-height-extra-large: 24px;
-	--spectrum-slider-handle-size-small: 18px;
-	--spectrum-slider-handle-size-medium: 20px;
-	--spectrum-slider-handle-size-large: 22px;
-	--spectrum-slider-handle-size-extra-large: 24px;
-	--spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200);
-	--spectrum-slider-bottom-to-handle-small: 3px;
-	--spectrum-slider-bottom-to-handle-medium: 6px;
-	--spectrum-slider-bottom-to-handle-large: 9px;
-	--spectrum-slider-bottom-to-handle-extra-large: 12px;
-	--spectrum-corner-radius-75: 3px;
-	--spectrum-corner-radius-100: 6px;
-	--spectrum-corner-radius-200: 12px;
-	--spectrum-drop-shadow-x: 0px;
-	--spectrum-drop-shadow-y: 4px;
-	--spectrum-drop-shadow-blur: 16px;
-	--spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
-	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-	--spectrum-dialog-confirm-border-radius: 6px;
-	--spectrum-dial-border-radius: 12px;
-	--spectrum-assetcard-focus-ring-border-radius: 10px;
-}
diff --git a/tokens/dist/css/express/large-vars.css b/tokens/dist/css/express/large-vars.css
deleted file mode 100644
index 163b83014d..0000000000
--- a/tokens/dist/css/express/large-vars.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--large {
-	--spectrum-checkbox-control-size-small: 18px;
-	--spectrum-checkbox-control-size-medium: 20px;
-	--spectrum-checkbox-control-size-large: 22px;
-	--spectrum-checkbox-control-size-extra-large: 26px;
-	--spectrum-checkbox-top-to-control-small: 6px;
-	--spectrum-checkbox-top-to-control-medium: 10px;
-	--spectrum-checkbox-top-to-control-large: 14px;
-	--spectrum-checkbox-top-to-control-extra-large: 17px;
-	--spectrum-switch-control-width-small: 32px;
-	--spectrum-switch-control-width-medium: 36px;
-	--spectrum-switch-control-width-large: 41px;
-	--spectrum-switch-control-width-extra-large: 46px;
-	--spectrum-switch-control-height-small: 18px;
-	--spectrum-switch-control-height-medium: 20px;
-	--spectrum-switch-control-height-large: 22px;
-	--spectrum-switch-control-height-extra-large: 26px;
-	--spectrum-switch-top-to-control-small: 6px;
-	--spectrum-switch-top-to-control-medium: 10px;
-	--spectrum-switch-top-to-control-large: 14px;
-	--spectrum-switch-top-to-control-extra-large: 17px;
-	--spectrum-radio-button-control-size-small: 18px;
-	--spectrum-radio-button-control-size-medium: 20px;
-	--spectrum-radio-button-control-size-large: 22px;
-	--spectrum-radio-button-control-size-extra-large: 26px;
-	--spectrum-radio-button-top-to-control-small: 6px;
-	--spectrum-radio-button-top-to-control-medium: 10px;
-	--spectrum-radio-button-top-to-control-large: 14px;
-	--spectrum-radio-button-top-to-control-extra-large: 17px;
-	--spectrum-slider-control-height-small: 22px;
-	--spectrum-slider-control-height-medium: 24px;
-	--spectrum-slider-control-height-large: 28px;
-	--spectrum-slider-control-height-extra-large: 30px;
-	--spectrum-slider-handle-size-small: 22px;
-	--spectrum-slider-handle-size-medium: 24px;
-	--spectrum-slider-handle-size-large: 28px;
-	--spectrum-slider-handle-size-extra-large: 30px;
-	--spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200);
-	--spectrum-slider-bottom-to-handle-small: 4px;
-	--spectrum-slider-bottom-to-handle-medium: 8px;
-	--spectrum-slider-bottom-to-handle-large: 12px;
-	--spectrum-slider-bottom-to-handle-extra-large: 15px;
-	--spectrum-corner-radius-75: 4px;
-	--spectrum-corner-radius-100: 8px;
-	--spectrum-corner-radius-200: 16px;
-	--spectrum-drop-shadow-x: 0px;
-	--spectrum-drop-shadow-y: 4px;
-	--spectrum-drop-shadow-blur: 16px;
-	--spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
-	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-	--spectrum-dialog-confirm-border-radius: 8px;
-	--spectrum-dial-border-radius: 15px;
-	--spectrum-assetcard-focus-ring-border-radius: 12px;
-}
diff --git a/tokens/dist/css/express/light-vars.css b/tokens/dist/css/express/light-vars.css
deleted file mode 100644
index 7a60aecb90..0000000000
--- a/tokens/dist/css/express/light-vars.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--light,
-.spectrum--express.spectrum--lightest {
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb);
-	--spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900);
-}
diff --git a/tokens/dist/css/express/medium-vars.css b/tokens/dist/css/express/medium-vars.css
deleted file mode 100644
index 11ce62832f..0000000000
--- a/tokens/dist/css/express/medium-vars.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--medium {
-	--spectrum-checkbox-control-size-small: 14px;
-	--spectrum-checkbox-control-size-medium: 16px;
-	--spectrum-checkbox-control-size-large: 18px;
-	--spectrum-checkbox-control-size-extra-large: 20px;
-	--spectrum-checkbox-top-to-control-small: 5px;
-	--spectrum-checkbox-top-to-control-medium: 8px;
-	--spectrum-checkbox-top-to-control-large: 11px;
-	--spectrum-checkbox-top-to-control-extra-large: 14px;
-	--spectrum-switch-control-width-small: 25px;
-	--spectrum-switch-control-width-medium: 28px;
-	--spectrum-switch-control-width-large: 32px;
-	--spectrum-switch-control-width-extra-large: 35px;
-	--spectrum-switch-control-height-small: 14px;
-	--spectrum-switch-control-height-medium: 16px;
-	--spectrum-switch-control-height-large: 18px;
-	--spectrum-switch-control-height-extra-large: 20px;
-	--spectrum-switch-top-to-control-small: 5px;
-	--spectrum-switch-top-to-control-medium: 8px;
-	--spectrum-switch-top-to-control-large: 11px;
-	--spectrum-switch-top-to-control-extra-large: 14px;
-	--spectrum-radio-button-control-size-small: 14px;
-	--spectrum-radio-button-control-size-medium: 16px;
-	--spectrum-radio-button-control-size-large: 18px;
-	--spectrum-radio-button-control-size-extra-large: 20px;
-	--spectrum-radio-button-top-to-control-small: 5px;
-	--spectrum-radio-button-top-to-control-medium: 8px;
-	--spectrum-radio-button-top-to-control-large: 11px;
-	--spectrum-radio-button-top-to-control-extra-large: 14px;
-	--spectrum-slider-control-height-small: 18px;
-	--spectrum-slider-control-height-medium: 20px;
-	--spectrum-slider-control-height-large: 22px;
-	--spectrum-slider-control-height-extra-large: 24px;
-	--spectrum-slider-handle-size-small: 18px;
-	--spectrum-slider-handle-size-medium: 20px;
-	--spectrum-slider-handle-size-large: 22px;
-	--spectrum-slider-handle-size-extra-large: 24px;
-	--spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200);
-	--spectrum-slider-bottom-to-handle-small: 3px;
-	--spectrum-slider-bottom-to-handle-medium: 6px;
-	--spectrum-slider-bottom-to-handle-large: 9px;
-	--spectrum-slider-bottom-to-handle-extra-large: 12px;
-	--spectrum-corner-radius-75: 3px;
-	--spectrum-corner-radius-100: 6px;
-	--spectrum-corner-radius-200: 12px;
-	--spectrum-drop-shadow-x: 0px;
-	--spectrum-drop-shadow-y: 4px;
-	--spectrum-drop-shadow-blur: 16px;
-	--spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
-	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-	--spectrum-dialog-confirm-border-radius: 6px;
-	--spectrum-dial-border-radius: 12px;
-	--spectrum-assetcard-focus-ring-border-radius: 10px;
-}
diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css
index df089b5fe7..975686e094 100644
--- a/tokens/dist/css/global-vars.css
+++ b/tokens/dist/css/global-vars.css
@@ -16,12 +16,23 @@
 	--spectrum-static-white-focus-indicator-color: var(--spectrum-white);
 	--spectrum-static-black-focus-indicator-color: var(--spectrum-black);
 	--spectrum-overlay-color: var(--spectrum-black);
+	--spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100);
 	--spectrum-opacity-disabled: 0.3;
+	--spectrum-background-base-color: var(--spectrum-gray-25);
+	--spectrum-background-layer-1-color: var(--spectrum-gray-50);
+	--spectrum-neutral-background-color-default: var(--spectrum-gray-800);
+	--spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-down: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-selected-default: var(--spectrum-gray-800);
+	--spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-900);
 	--spectrum-neutral-subdued-content-color-selected: var(--spectrum-neutral-subdued-content-color-down);
 	--spectrum-accent-content-color-selected: var(--spectrum-accent-content-color-down);
-	--spectrum-disabled-background-color: var(--spectrum-gray-200);
-	--spectrum-disabled-static-white-background-color: var(--spectrum-transparent-white-200);
-	--spectrum-disabled-static-black-background-color: var(--spectrum-transparent-black-200);
+	--spectrum-disabled-background-color: var(--spectrum-gray-100);
+	--spectrum-disabled-static-white-background-color: var(--spectrum-transparent-white-100);
+	--spectrum-disabled-static-black-background-color: var(--spectrum-transparent-black-100);
 	--spectrum-background-opacity-default: 0;
 	--spectrum-background-opacity-hover: 0.1;
 	--spectrum-background-opacity-down: 0.1;
@@ -34,19 +45,19 @@
 	--spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900);
 	--spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700);
 	--spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800);
-	--spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900);
+	--spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800);
 	--spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800);
 	--spectrum-accent-content-color-default: var(--spectrum-accent-color-900);
 	--spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000);
-	--spectrum-accent-content-color-down: var(--spectrum-accent-color-1100);
+	--spectrum-accent-content-color-down: var(--spectrum-accent-color-1000);
 	--spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000);
 	--spectrum-negative-content-color-default: var(--spectrum-negative-color-900);
 	--spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000);
-	--spectrum-negative-content-color-down: var(--spectrum-negative-color-1100);
+	--spectrum-negative-content-color-down: var(--spectrum-negative-color-1000);
 	--spectrum-negative-content-color-key-focus: var(--spectrum-negative-color-1000);
 	--spectrum-disabled-content-color: var(--spectrum-gray-400);
-	--spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-500);
-	--spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-500);
+	--spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-400);
+	--spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-400);
 	--spectrum-disabled-border-color: var(--spectrum-gray-300);
 	--spectrum-disabled-static-white-border-color: var(--spectrum-transparent-white-300);
 	--spectrum-disabled-static-black-border-color: var(--spectrum-transparent-black-300);
@@ -56,6 +67,18 @@
 	--spectrum-negative-border-color-focus-hover: var(--spectrum-negative-border-color-down);
 	--spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000);
 	--spectrum-negative-border-color-key-focus: var(--spectrum-negative-color-1000);
+	--spectrum-title-color: var(--spectrum-gray-900);
+	--spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
+	--spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
+	--spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
+	--spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300);
+	--spectrum-static-black-text-color: var(--spectrum-black);
+	--spectrum-static-white-text-color: var(--spectrum-white);
+	--spectrum-track-color: var(--spectrum-gray-300);
+	--spectrum-static-black-track-color: var(--spectrum-transparent-black-300);
+	--spectrum-static-white-track-color: var(--spectrum-transparent-white-300);
+	--spectrum-static-black-track-indicator-color: var(--spectrum-transparent-black-900);
+	--spectrum-static-white-track-indicator-color: var(--spectrum-transparent-white-900);
 	--spectrum-swatch-border-color: var(--spectrum-gray-900);
 	--spectrum-swatch-border-opacity: 0.51;
 	--spectrum-swatch-disabled-icon-border-color: var(--spectrum-black);
@@ -94,62 +117,10 @@
 	--spectrum-table-row-down-opacity: 0.1;
 	--spectrum-table-selected-row-background-opacity-hover: 0.15;
 	--spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15;
-	--spectrum-white-rgb: 255, 255, 255;
-	--spectrum-white: rgba(var(--spectrum-white-rgb));
-	--spectrum-transparent-white-100-rgb: 255, 255, 255;
-	--spectrum-transparent-white-100-opacity: 0;
-	--spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
-	--spectrum-transparent-white-200-rgb: 255, 255, 255;
-	--spectrum-transparent-white-200-opacity: 0.1;
-	--spectrum-transparent-white-200: rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
-	--spectrum-transparent-white-300-rgb: 255, 255, 255;
-	--spectrum-transparent-white-300-opacity: 0.25;
-	--spectrum-transparent-white-300: rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
-	--spectrum-transparent-white-400-rgb: 255, 255, 255;
-	--spectrum-transparent-white-400-opacity: 0.4;
-	--spectrum-transparent-white-400: rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
-	--spectrum-transparent-white-500-rgb: 255, 255, 255;
-	--spectrum-transparent-white-500-opacity: 0.55;
-	--spectrum-transparent-white-500: rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
-	--spectrum-transparent-white-600-rgb: 255, 255, 255;
-	--spectrum-transparent-white-600-opacity: 0.7;
-	--spectrum-transparent-white-600: rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
-	--spectrum-transparent-white-700-rgb: 255, 255, 255;
-	--spectrum-transparent-white-700-opacity: 0.8;
-	--spectrum-transparent-white-700: rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
-	--spectrum-transparent-white-800-rgb: 255, 255, 255;
-	--spectrum-transparent-white-800-opacity: 0.9;
-	--spectrum-transparent-white-800: rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
-	--spectrum-transparent-white-900-rgb: 255, 255, 255;
-	--spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb));
 	--spectrum-black-rgb: 0, 0, 0;
 	--spectrum-black: rgba(var(--spectrum-black-rgb));
-	--spectrum-transparent-black-100-rgb: 0, 0, 0;
-	--spectrum-transparent-black-100-opacity: 0;
-	--spectrum-transparent-black-100: rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
-	--spectrum-transparent-black-200-rgb: 0, 0, 0;
-	--spectrum-transparent-black-200-opacity: 0.1;
-	--spectrum-transparent-black-200: rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
-	--spectrum-transparent-black-300-rgb: 0, 0, 0;
-	--spectrum-transparent-black-300-opacity: 0.25;
-	--spectrum-transparent-black-300: rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
-	--spectrum-transparent-black-400-rgb: 0, 0, 0;
-	--spectrum-transparent-black-400-opacity: 0.4;
-	--spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
-	--spectrum-transparent-black-500-rgb: 0, 0, 0;
-	--spectrum-transparent-black-500-opacity: 0.55;
-	--spectrum-transparent-black-500: rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
-	--spectrum-transparent-black-600-rgb: 0, 0, 0;
-	--spectrum-transparent-black-600-opacity: 0.7;
-	--spectrum-transparent-black-600: rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
-	--spectrum-transparent-black-700-rgb: 0, 0, 0;
-	--spectrum-transparent-black-700-opacity: 0.8;
-	--spectrum-transparent-black-700: rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
-	--spectrum-transparent-black-800-rgb: 0, 0, 0;
-	--spectrum-transparent-black-800-opacity: 0.9;
-	--spectrum-transparent-black-800: rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
-	--spectrum-transparent-black-900-rgb: 0, 0, 0;
-	--spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb));
+	--spectrum-transparent-black-1000-rgb: 0, 0, 0;
+	--spectrum-transparent-black-1000: rgba(var(--spectrum-transparent-black-1000-rgb));
 	--spectrum-icon-color-inverse: var(--spectrum-gray-50);
 	--spectrum-icon-color-primary-default: var(--spectrum-neutral-content-color-default);
 	--spectrum-asterisk-icon-size-75: 8px;
@@ -179,7 +150,10 @@
 	--spectrum-popover-tip-height: 8px;
 	--spectrum-menu-item-label-to-description: 1px;
 	--spectrum-menu-item-section-divider-height: 8px;
+	--spectrum-slider-track-thickness: 2px;
+	--spectrum-slider-handle-gap: 4px;
 	--spectrum-picker-minimum-width-multiplier: 2;
+	--spectrum-picker-border-width: var(--spectrum-border-width-100);
 	--spectrum-picker-end-edge-to-disclousure-icon-quiet: var(--spectrum-picker-end-edge-to-disclosure-icon-quiet);
 	--spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px;
 	--spectrum-text-field-minimum-width-multiplier: 1.5;
@@ -199,10 +173,10 @@
 	--spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text);
 	--spectrum-alert-banner-to-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
 	--spectrum-color-area-border-width: var(--spectrum-border-width-100);
-	--spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100);
+	--spectrum-color-area-border-rounding: var(--spectrum-corner-radius-medium-size-small);
 	--spectrum-color-wheel-color-area-margin: 12px;
 	--spectrum-color-slider-border-width: 1px;
-	--spectrum-color-slider-border-rounding: 4px;
+	--spectrum-color-slider-border-rounding: var(--spectrum-corner-radius-medium-size-small);
 	--spectrum-floating-action-button-drop-shadow-blur: 12px;
 	--spectrum-floating-action-button-drop-shadow-y: 4px;
 	--spectrum-illustrated-message-maximum-width: 380px;
@@ -263,11 +237,48 @@
 	--spectrum-in-field-button-width-stacked-medium: 28px;
 	--spectrum-in-field-button-width-stacked-large: 36px;
 	--spectrum-in-field-button-width-stacked-extra-large: 44px;
+	--spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
+	--spectrum-in-field-button-edge-to-fill: 0px;
+	--spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
 	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px;
 	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px;
 	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px;
 	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px;
 	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
+	--spectrum-corner-radius-0: 0px;
+	--spectrum-corner-radius-75: 4px;
+	--spectrum-corner-radius-100: 8px;
+	--spectrum-corner-radius-200: 10px;
+	--spectrum-corner-radius-300: 6px;
+	--spectrum-corner-radius-400: 7px;
+	--spectrum-corner-radius-500: 8px;
+	--spectrum-corner-radius-600: 9px;
+	--spectrum-corner-radius-700: 10px;
+	--spectrum-corner-radius-800: 16px;
+	--spectrum-corner-radius-1000: 0.5;
+	--spectrum-corner-radius-none: var(--spectrum-corner-radius-0);
+	--spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100);
+	--spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500);
+	--spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700);
+	--spectrum-corner-radius-extra-large-default: var(--spectrum-corner-radius-800);
+	--spectrum-corner-radius-full: var(--spectrum-corner-radius-1000);
+	--spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75);
+	--spectrum-corner-radius-small-size-medium: var(--spectrum-corner-radius-100);
+	--spectrum-corner-radius-small-size-large: var(--spectrum-corner-radius-200);
+	--spectrum-corner-radius-small-size-extra-large: var(--spectrum-corner-radius-300);
+	--spectrum-corner-radius-medium-size-extra-small: var(--spectrum-corner-radius-300);
+	--spectrum-corner-radius-medium-size-small: var(--spectrum-corner-radius-400);
+	--spectrum-corner-radius-medium-size-medium: var(--spectrum-corner-radius-500);
+	--spectrum-corner-radius-medium-size-large: var(--spectrum-corner-radius-600);
+	--spectrum-corner-radius-medium-size-extra-large: var(--spectrum-corner-radius-700);
+	--spectrum-drop-shadow-x: 0px;
 	--spectrum-spacing-50: 2px;
 	--spectrum-spacing-75: 4px;
 	--spectrum-spacing-100: 8px;
@@ -282,6 +293,7 @@
 	--spectrum-spacing-1000: 96px;
 	--spectrum-focus-indicator-thickness: 2px;
 	--spectrum-focus-indicator-gap: 2px;
+	--spectrum-border-width-100: 1px;
 	--spectrum-border-width-200: 2px;
 	--spectrum-border-width-400: 4px;
 	--spectrum-field-edge-to-text-quiet: 0px;
@@ -291,6 +303,22 @@
 	--spectrum-field-edge-to-validation-icon-quiet: 0px;
 	--spectrum-text-underline-thickness: 1px;
 	--spectrum-text-underline-gap: 1px;
+	--spectrum-accent-color-100: var(--spectrum-blue-100);
+	--spectrum-accent-color-200: var(--spectrum-blue-200);
+	--spectrum-accent-color-300: var(--spectrum-blue-300);
+	--spectrum-accent-color-400: var(--spectrum-blue-400);
+	--spectrum-accent-color-500: var(--spectrum-blue-500);
+	--spectrum-accent-color-600: var(--spectrum-blue-600);
+	--spectrum-accent-color-700: var(--spectrum-blue-700);
+	--spectrum-accent-color-800: var(--spectrum-blue-800);
+	--spectrum-accent-color-900: var(--spectrum-blue-900);
+	--spectrum-accent-color-1000: var(--spectrum-blue-1000);
+	--spectrum-accent-color-1100: var(--spectrum-blue-1100);
+	--spectrum-accent-color-1200: var(--spectrum-blue-1200);
+	--spectrum-accent-color-1300: var(--spectrum-blue-1300);
+	--spectrum-accent-color-1400: var(--spectrum-blue-1400);
+	--spectrum-accent-color-1500: var(--spectrum-blue-1500);
+	--spectrum-accent-color-1600: var(--spectrum-blue-1600);
 	--spectrum-informative-color-100: var(--spectrum-blue-100);
 	--spectrum-informative-color-200: var(--spectrum-blue-200);
 	--spectrum-informative-color-300: var(--spectrum-blue-300);
@@ -305,6 +333,8 @@
 	--spectrum-informative-color-1200: var(--spectrum-blue-1200);
 	--spectrum-informative-color-1300: var(--spectrum-blue-1300);
 	--spectrum-informative-color-1400: var(--spectrum-blue-1400);
+	--spectrum-informative-color-1500: var(--spectrum-blue-1500);
+	--spectrum-informative-color-1600: var(--spectrum-blue-1600);
 	--spectrum-negative-color-100: var(--spectrum-red-100);
 	--spectrum-negative-color-200: var(--spectrum-red-200);
 	--spectrum-negative-color-300: var(--spectrum-red-300);
@@ -319,6 +349,8 @@
 	--spectrum-negative-color-1200: var(--spectrum-red-1200);
 	--spectrum-negative-color-1300: var(--spectrum-red-1300);
 	--spectrum-negative-color-1400: var(--spectrum-red-1400);
+	--spectrum-negative-color-1500: var(--spectrum-red-1500);
+	--spectrum-negative-color-1600: var(--spectrum-red-1600);
 	--spectrum-notice-color-100: var(--spectrum-orange-100);
 	--spectrum-notice-color-200: var(--spectrum-orange-200);
 	--spectrum-notice-color-300: var(--spectrum-orange-300);
@@ -333,6 +365,8 @@
 	--spectrum-notice-color-1200: var(--spectrum-orange-1200);
 	--spectrum-notice-color-1300: var(--spectrum-orange-1300);
 	--spectrum-notice-color-1400: var(--spectrum-orange-1400);
+	--spectrum-notice-color-1500: var(--spectrum-orange-1500);
+	--spectrum-notice-color-1600: var(--spectrum-orange-1600);
 	--spectrum-positive-color-100: var(--spectrum-green-100);
 	--spectrum-positive-color-200: var(--spectrum-green-200);
 	--spectrum-positive-color-300: var(--spectrum-green-300);
@@ -347,6 +381,11 @@
 	--spectrum-positive-color-1200: var(--spectrum-green-1200);
 	--spectrum-positive-color-1300: var(--spectrum-green-1300);
 	--spectrum-positive-color-1400: var(--spectrum-green-1400);
+	--spectrum-positive-color-1500: var(--spectrum-green-1500);
+	--spectrum-positive-color-1600: var(--spectrum-green-1600);
+	--spectrum-negative-subdued-background-color-hover: var(--spectrum-negative-color-300);
+	--spectrum-negative-subdued-background-color-down: var(--spectrum-negative-color-300);
+	--spectrum-negative-subdued-background-color-key-focus: var(--spectrum-negative-color-300);
 	--spectrum-default-font-family: var(--spectrum-sans-serif-font-family);
 	--spectrum-sans-serif-font-family: Adobe Clean;
 	--spectrum-serif-font-family: Adobe Clean Serif;
@@ -373,8 +412,11 @@
 	--spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style);
 	--spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight);
 	--spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-heading-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
 	--spectrum-heading-cjk-font-style: var(--spectrum-default-font-style);
 	--spectrum-heading-sans-serif-heavy-font-weight: var(--spectrum-black-font-weight);
 	--spectrum-heading-sans-serif-heavy-font-style: var(--spectrum-default-font-style);
@@ -406,7 +448,9 @@
 	--spectrum-heading-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
 	--spectrum-heading-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
 	--spectrum-heading-cjk-light-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-heading-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-heading-serif-emphasized-font-style: var(--spectrum-italic-font-style);
 	--spectrum-heading-cjk-emphasized-font-weight: var(--spectrum-black-font-weight);
 	--spectrum-heading-cjk-emphasized-font-style: var(--spectrum-default-font-style);
@@ -582,4 +626,44 @@
 	--spectrum-code-line-height: var(--spectrum-line-height-200);
 	--spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200);
 	--spectrum-code-color: var(--spectrum-gray-800);
+	--system: spectrum;
+	--spectrum-animation-duration-0: 0ms;
+	--spectrum-animation-duration-100: 130ms;
+	--spectrum-animation-duration-200: 160ms;
+	--spectrum-animation-duration-300: 190ms;
+	--spectrum-animation-duration-400: 220ms;
+	--spectrum-animation-duration-500: 250ms;
+	--spectrum-animation-duration-600: 300ms;
+	--spectrum-animation-duration-700: 350ms;
+	--spectrum-animation-duration-800: 400ms;
+	--spectrum-animation-duration-900: 450ms;
+	--spectrum-animation-duration-1000: 500ms;
+	--spectrum-animation-duration-2000: 1000ms;
+	--spectrum-animation-duration-4000: 2000ms;
+	--spectrum-animation-duration-6000: 3000ms;
+	--spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
+	--spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
+	--spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
+	--spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
+	--spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
+
+	/* stylelint-disable value-keyword-case -- typography names should use their appropriate cases */
+	--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	--spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
+	--spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
+	--spectrum-serif-font: var(--spectrum-serif-font-family-stack);
+	--spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
+	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	/* stylelint-enable value-keyword-case */
+	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-font-style: var(--spectrum-default-font-style);
+	--spectrum-font-size: var(--spectrum-font-size-100);
+	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
+	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
+	--spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
+	--spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
+	--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
+	--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
+	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
 }
diff --git a/tokens/dist/css/index.css b/tokens/dist/css/index.css
new file mode 100644
index 0000000000..b0a07d4b3f
--- /dev/null
+++ b/tokens/dist/css/index.css
@@ -0,0 +1,3579 @@
+/* Token version: v15.2.0 */
+
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+.spectrum--dark {
+	--spectrum-overlay-opacity: 0.6;
+	--spectrum-background-layer-2-color: var(--spectrum-gray-75);
+	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-500);
+	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400);
+	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400);
+	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-400);
+	--spectrum-accent-background-color-default: var(--spectrum-accent-color-800);
+	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-700);
+	--spectrum-accent-background-color-down: var(--spectrum-accent-color-700);
+	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-700);
+	--spectrum-informative-background-color-default: var(--spectrum-informative-color-800);
+	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-700);
+	--spectrum-informative-background-color-down: var(--spectrum-informative-color-700);
+	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-700);
+	--spectrum-negative-background-color-default: var(--spectrum-negative-color-800);
+	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-700);
+	--spectrum-negative-background-color-down: var(--spectrum-negative-color-700);
+	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-700);
+	--spectrum-positive-background-color-default: var(--spectrum-positive-color-800);
+	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-700);
+	--spectrum-positive-background-color-down: var(--spectrum-positive-color-700);
+	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-700);
+	--spectrum-notice-background-color-default: var(--spectrum-notice-color-900);
+	--spectrum-gray-background-color-default: var(--spectrum-gray-500);
+	--spectrum-red-background-color-default: var(--spectrum-red-800);
+	--spectrum-orange-background-color-default: var(--spectrum-orange-900);
+	--spectrum-yellow-background-color-default: var(--spectrum-yellow-1100);
+	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-1000);
+	--spectrum-celery-background-color-default: var(--spectrum-celery-900);
+	--spectrum-green-background-color-default: var(--spectrum-green-800);
+	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800);
+	--spectrum-cyan-background-color-default: var(--spectrum-cyan-800);
+	--spectrum-blue-background-color-default: var(--spectrum-blue-800);
+	--spectrum-indigo-background-color-default: var(--spectrum-indigo-800);
+	--spectrum-purple-background-color-default: var(--spectrum-purple-800);
+	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-800);
+	--spectrum-magenta-background-color-default: var(--spectrum-magenta-800);
+	--spectrum-neutral-visual-color: var(--spectrum-gray-600);
+	--spectrum-accent-visual-color: var(--spectrum-accent-color-900);
+	--spectrum-informative-visual-color: var(--spectrum-informative-color-900);
+	--spectrum-negative-visual-color: var(--spectrum-negative-color-900);
+	--spectrum-notice-visual-color: var(--spectrum-notice-color-900);
+	--spectrum-positive-visual-color: var(--spectrum-positive-color-900);
+	--spectrum-gray-visual-color: var(--spectrum-gray-600);
+	--spectrum-red-visual-color: var(--spectrum-red-700);
+	--spectrum-orange-visual-color: var(--spectrum-orange-900);
+	--spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
+	--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
+	--spectrum-celery-visual-color: var(--spectrum-celery-800);
+	--spectrum-green-visual-color: var(--spectrum-green-800);
+	--spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
+	--spectrum-cyan-visual-color: var(--spectrum-cyan-900);
+	--spectrum-blue-visual-color: var(--spectrum-blue-900);
+	--spectrum-indigo-visual-color: var(--spectrum-indigo-900);
+	--spectrum-purple-visual-color: var(--spectrum-purple-900);
+	--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
+	--spectrum-magenta-visual-color: var(--spectrum-magenta-900);
+	--spectrum-background-elevated-color: var(--spectrum-gray-75);
+	--spectrum-background-pasteboard-color: var(--spectrum-gray-25);
+	--spectrum-brown-visual-color: var(--spectrum-brown-900);
+	--spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900);
+	--spectrum-pink-visual-color: var(--spectrum-pink-900);
+	--spectrum-silver-visual-color: var(--spectrum-silver-900);
+	--spectrum-turquoise-visual-color: var(--spectrum-turquoise-900);
+	--spectrum-brown-background-color-default: var(--spectrum-brown-800);
+	--spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800);
+	--spectrum-pink-background-color-default: var(--spectrum-pink-800);
+	--spectrum-silver-background-color-default: var(--spectrum-silver-800);
+	--spectrum-turquoise-background-color-default: var(--spectrum-turquoise-800);
+	--spectrum-drop-shadow-color-100-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-100-opacity: 0.36;
+	--spectrum-drop-shadow-color-100: rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+	--spectrum-drop-shadow-color-200-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-200-opacity: 0.48;
+	--spectrum-drop-shadow-color-200: rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
+	--spectrum-drop-shadow-color-300-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-300-opacity: 0.6;
+	--spectrum-drop-shadow-color-300: rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity));
+	--spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-300);
+	--spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300);
+	--spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300);
+	--spectrum-green-subtle-background-color-default: var(--spectrum-green-300);
+	--spectrum-orange-subtle-background-color-default: var(--spectrum-orange-300);
+	--spectrum-red-subtle-background-color-default: var(--spectrum-red-300);
+	--spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300);
+	--spectrum-cinnamon-subtle-background-color-default: var(--spectrum-cinnamon-300);
+	--spectrum-celery-subtle-background-color-default: var(--spectrum-celery-300);
+	--spectrum-chartreuse-subtle-background-color-default: var(--spectrum-chartreuse-300);
+	--spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300);
+	--spectrum-fuchsia-subtle-background-color-default: var(--spectrum-fuchsia-300);
+	--spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-300);
+	--spectrum-magenta-subtle-background-color-default: var(--spectrum-magenta-300);
+	--spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300);
+	--spectrum-purple-subtle-background-color-default: var(--spectrum-purple-300);
+	--spectrum-seafoam-subtle-background-color-default: var(--spectrum-seafoam-300);
+	--spectrum-silver-subtle-background-color-default: var(--spectrum-silver-300);
+	--spectrum-turquoise-subtle-background-color-default: var(--spectrum-turquoise-300);
+	--spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-300);
+	--spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800);
+	--spectrum-white-rgb: 255, 255, 255;
+	--spectrum-white: rgba(var(--spectrum-white-rgb));
+	--spectrum-transparent-white-25-rgb: 255, 255, 255;
+	--spectrum-transparent-white-25-opacity: 0;
+	--spectrum-transparent-white-25: rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity));
+	--spectrum-transparent-white-50-rgb: 255, 255, 255;
+	--spectrum-transparent-white-50-opacity: 0.04;
+	--spectrum-transparent-white-50: rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity));
+	--spectrum-transparent-white-75-rgb: 255, 255, 255;
+	--spectrum-transparent-white-75-opacity: 0.07;
+	--spectrum-transparent-white-75: rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity));
+	--spectrum-transparent-white-100-rgb: 255, 255, 255;
+	--spectrum-transparent-white-100-opacity: 0.11;
+	--spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+	--spectrum-transparent-white-200-rgb: 255, 255, 255;
+	--spectrum-transparent-white-200-opacity: 0.14;
+	--spectrum-transparent-white-200: rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
+	--spectrum-transparent-white-300-rgb: 255, 255, 255;
+	--spectrum-transparent-white-300-opacity: 0.17;
+	--spectrum-transparent-white-300: rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
+	--spectrum-transparent-white-400-rgb: 255, 255, 255;
+	--spectrum-transparent-white-400-opacity: 0.21;
+	--spectrum-transparent-white-400: rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
+	--spectrum-transparent-white-500-rgb: 255, 255, 255;
+	--spectrum-transparent-white-500-opacity: 0.39;
+	--spectrum-transparent-white-500: rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
+	--spectrum-transparent-white-600-rgb: 255, 255, 255;
+	--spectrum-transparent-white-600-opacity: 0.51;
+	--spectrum-transparent-white-600: rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
+	--spectrum-transparent-white-700-rgb: 255, 255, 255;
+	--spectrum-transparent-white-700-opacity: 0.66;
+	--spectrum-transparent-white-700: rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
+	--spectrum-transparent-white-800-rgb: 255, 255, 255;
+	--spectrum-transparent-white-800-opacity: 0.85;
+	--spectrum-transparent-white-800: rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
+	--spectrum-transparent-white-900-rgb: 255, 255, 255;
+	--spectrum-transparent-white-900-opacity: 0.94;
+	--spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity));
+	--spectrum-transparent-white-1000-rgb: 255, 255, 255;
+	--spectrum-transparent-white-1000: rgba(var(--spectrum-transparent-white-1000-rgb));
+	--spectrum-transparent-black-25-rgb: 0, 0, 0;
+	--spectrum-transparent-black-25-opacity: 0;
+	--spectrum-transparent-black-25: rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity));
+	--spectrum-transparent-black-50-rgb: 0, 0, 0;
+	--spectrum-transparent-black-50-opacity: 0.03;
+	--spectrum-transparent-black-50: rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity));
+	--spectrum-transparent-black-75-rgb: 0, 0, 0;
+	--spectrum-transparent-black-75-opacity: 0.05;
+	--spectrum-transparent-black-75: rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity));
+	--spectrum-transparent-black-100-rgb: 0, 0, 0;
+	--spectrum-transparent-black-100-opacity: 0.09;
+	--spectrum-transparent-black-100: rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
+	--spectrum-transparent-black-200-rgb: 0, 0, 0;
+	--spectrum-transparent-black-200-opacity: 0.12;
+	--spectrum-transparent-black-200: rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
+	--spectrum-transparent-black-300-rgb: 0, 0, 0;
+	--spectrum-transparent-black-300-opacity: 0.15;
+	--spectrum-transparent-black-300: rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
+	--spectrum-transparent-black-400-rgb: 0, 0, 0;
+	--spectrum-transparent-black-400-opacity: 0.22;
+	--spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
+	--spectrum-transparent-black-500-rgb: 0, 0, 0;
+	--spectrum-transparent-black-500-opacity: 0.44;
+	--spectrum-transparent-black-500: rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
+	--spectrum-transparent-black-600-rgb: 0, 0, 0;
+	--spectrum-transparent-black-600-opacity: 0.56;
+	--spectrum-transparent-black-600: rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
+	--spectrum-transparent-black-700-rgb: 0, 0, 0;
+	--spectrum-transparent-black-700-opacity: 0.69;
+	--spectrum-transparent-black-700: rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
+	--spectrum-transparent-black-800-rgb: 0, 0, 0;
+	--spectrum-transparent-black-800-opacity: 0.84;
+	--spectrum-transparent-black-800: rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
+	--spectrum-transparent-black-900-rgb: 0, 0, 0;
+	--spectrum-transparent-black-900-opacity: 0.93;
+	--spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity));
+	--spectrum-gray-25-rgb: 17, 17, 17;
+	--spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb));
+	--spectrum-gray-50-rgb: 27, 27, 27;
+	--spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
+	--spectrum-gray-75-rgb: 34, 34, 34;
+	--spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
+	--spectrum-gray-100-rgb: 44, 44, 44;
+	--spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
+	--spectrum-gray-200-rgb: 50, 50, 50;
+	--spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
+	--spectrum-gray-300-rgb: 57, 57, 57;
+	--spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
+	--spectrum-gray-400-rgb: 68, 68, 68;
+	--spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
+	--spectrum-gray-500-rgb: 109, 109, 109;
+	--spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
+	--spectrum-gray-600-rgb: 138, 138, 138;
+	--spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
+	--spectrum-gray-700-rgb: 175, 175, 175;
+	--spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
+	--spectrum-gray-800-rgb: 219, 219, 219;
+	--spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
+	--spectrum-gray-900-rgb: 242, 242, 242;
+	--spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
+	--spectrum-gray-1000-rgb: 255, 255, 255;
+	--spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb));
+	--spectrum-blue-100-rgb: 14, 23, 63;
+	--spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
+	--spectrum-blue-200-rgb: 15, 28, 82;
+	--spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
+	--spectrum-blue-300-rgb: 12, 33, 117;
+	--spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
+	--spectrum-blue-400-rgb: 18, 45, 154;
+	--spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
+	--spectrum-blue-500-rgb: 26, 58, 195;
+	--spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
+	--spectrum-blue-600-rgb: 37, 73, 229;
+	--spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
+	--spectrum-blue-700-rgb: 52, 91, 248;
+	--spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
+	--spectrum-blue-800-rgb: 64, 105, 253;
+	--spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
+	--spectrum-blue-900-rgb: 86, 129, 255;
+	--spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
+	--spectrum-blue-1000-rgb: 105, 149, 254;
+	--spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
+	--spectrum-blue-1100-rgb: 124, 169, 252;
+	--spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
+	--spectrum-blue-1200-rgb: 152, 192, 252;
+	--spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
+	--spectrum-blue-1300-rgb: 181, 213, 253;
+	--spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
+	--spectrum-blue-1400-rgb: 213, 231, 254;
+	--spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
+	--spectrum-blue-1500-rgb: 238, 245, 255;
+	--spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb));
+	--spectrum-blue-1600-rgb: 255, 255, 255;
+	--spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb));
+	--spectrum-red-100-rgb: 54, 10, 3;
+	--spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
+	--spectrum-red-200-rgb: 68, 13, 5;
+	--spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
+	--spectrum-red-300-rgb: 87, 17, 7;
+	--spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
+	--spectrum-red-400-rgb: 115, 24, 11;
+	--spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
+	--spectrum-red-500-rgb: 147, 31, 17;
+	--spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
+	--spectrum-red-600-rgb: 177, 38, 23;
+	--spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
+	--spectrum-red-700-rgb: 205, 46, 29;
+	--spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
+	--spectrum-red-800-rgb: 223, 52, 34;
+	--spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
+	--spectrum-red-900-rgb: 252, 67, 46;
+	--spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
+	--spectrum-red-1000-rgb: 255, 103, 86;
+	--spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
+	--spectrum-red-1100-rgb: 255, 134, 120;
+	--spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
+	--spectrum-red-1200-rgb: 255, 167, 157;
+	--spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
+	--spectrum-red-1300-rgb: 255, 196, 189;
+	--spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
+	--spectrum-red-1400-rgb: 255, 222, 219;
+	--spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
+	--spectrum-red-1500-rgb: 255, 242, 240;
+	--spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb));
+	--spectrum-red-1600-rgb: 255, 255, 255;
+	--spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb));
+	--spectrum-orange-100-rgb: 49, 16, 0;
+	--spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
+	--spectrum-orange-200-rgb: 61, 21, 0;
+	--spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
+	--spectrum-orange-300-rgb: 80, 27, 0;
+	--spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
+	--spectrum-orange-400-rgb: 106, 36, 0;
+	--spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
+	--spectrum-orange-500-rgb: 135, 47, 0;
+	--spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
+	--spectrum-orange-600-rgb: 162, 59, 0;
+	--spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
+	--spectrum-orange-700-rgb: 185, 73, 0;
+	--spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
+	--spectrum-orange-800-rgb: 199, 82, 0;
+	--spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
+	--spectrum-orange-900-rgb: 224, 100, 0;
+	--spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
+	--spectrum-orange-1000-rgb: 243, 117, 0;
+	--spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
+	--spectrum-orange-1100-rgb: 255, 137, 0;
+	--spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
+	--spectrum-orange-1200-rgb: 255, 173, 45;
+	--spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
+	--spectrum-orange-1300-rgb: 255, 201, 116;
+	--spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
+	--spectrum-orange-1400-rgb: 255, 225, 178;
+	--spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
+	--spectrum-orange-1500-rgb: 255, 243, 225;
+	--spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb));
+	--spectrum-orange-1600-rgb: 255, 255, 255;
+	--spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb));
+	--spectrum-yellow-100-rgb: 37, 23, 0;
+	--spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
+	--spectrum-yellow-200-rgb: 47, 29, 0;
+	--spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
+	--spectrum-yellow-300-rgb: 61, 39, 0;
+	--spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
+	--spectrum-yellow-400-rgb: 83, 52, 0;
+	--spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
+	--spectrum-yellow-500-rgb: 107, 67, 0;
+	--spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
+	--spectrum-yellow-600-rgb: 130, 82, 0;
+	--spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
+	--spectrum-yellow-700-rgb: 151, 97, 0;
+	--spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
+	--spectrum-yellow-800-rgb: 164, 106, 0;
+	--spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
+	--spectrum-yellow-900-rgb: 186, 124, 0;
+	--spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
+	--spectrum-yellow-1000-rgb: 203, 141, 0;
+	--spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
+	--spectrum-yellow-1100-rgb: 218, 159, 0;
+	--spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
+	--spectrum-yellow-1200-rgb: 235, 183, 0;
+	--spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
+	--spectrum-yellow-1300-rgb: 249, 206, 0;
+	--spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
+	--spectrum-yellow-1400-rgb: 255, 230, 86;
+	--spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
+	--spectrum-yellow-1500-rgb: 255, 246, 195;
+	--spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb));
+	--spectrum-yellow-1600-rgb: 255, 255, 255;
+	--spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb));
+	--spectrum-chartreuse-100-rgb: 23, 28, 0;
+	--spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
+	--spectrum-chartreuse-200-rgb: 30, 36, 0;
+	--spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
+	--spectrum-chartreuse-300-rgb: 39, 47, 0;
+	--spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
+	--spectrum-chartreuse-400-rgb: 53, 63, 0;
+	--spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
+	--spectrum-chartreuse-500-rgb: 68, 82, 0;
+	--spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
+	--spectrum-chartreuse-600-rgb: 83, 100, 0;
+	--spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
+	--spectrum-chartreuse-700-rgb: 97, 116, 0;
+	--spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
+	--spectrum-chartreuse-800-rgb: 106, 127, 0;
+	--spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
+	--spectrum-chartreuse-900-rgb: 122, 147, 0;
+	--spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
+	--spectrum-chartreuse-1000-rgb: 136, 164, 0;
+	--spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
+	--spectrum-chartreuse-1100-rgb: 151, 181, 0;
+	--spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
+	--spectrum-chartreuse-1200-rgb: 169, 203, 0;
+	--spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
+	--spectrum-chartreuse-1300-rgb: 187, 225, 0;
+	--spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
+	--spectrum-chartreuse-1400-rgb: 219, 240, 117;
+	--spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
+	--spectrum-chartreuse-1500-rgb: 242, 249, 206;
+	--spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb));
+	--spectrum-chartreuse-1600-rgb: 255, 255, 255;
+	--spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb));
+	--spectrum-celery-100-rgb: 11, 31, 0;
+	--spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
+	--spectrum-celery-200-rgb: 15, 38, 0;
+	--spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
+	--spectrum-celery-300-rgb: 21, 51, 1;
+	--spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
+	--spectrum-celery-400-rgb: 31, 67, 4;
+	--spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
+	--spectrum-celery-500-rgb: 41, 86, 8;
+	--spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
+	--spectrum-celery-600-rgb: 50, 105, 11;
+	--spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
+	--spectrum-celery-700-rgb: 60, 122, 15;
+	--spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
+	--spectrum-celery-800-rgb: 66, 134, 18;
+	--spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
+	--spectrum-celery-900-rgb: 78, 154, 23;
+	--spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
+	--spectrum-celery-1000-rgb: 88, 172, 28;
+	--spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
+	--spectrum-celery-1100-rgb: 100, 190, 35;
+	--spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
+	--spectrum-celery-1200-rgb: 116, 213, 46;
+	--spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
+	--spectrum-celery-1300-rgb: 136, 234, 65;
+	--spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
+	--spectrum-celery-1400-rgb: 170, 251, 112;
+	--spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
+	--spectrum-celery-1500-rgb: 222, 255, 198;
+	--spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb));
+	--spectrum-celery-1600-rgb: 255, 255, 255;
+	--spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb));
+	--spectrum-green-100-rgb: 0, 30, 23;
+	--spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
+	--spectrum-green-200-rgb: 0, 38, 29;
+	--spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
+	--spectrum-green-300-rgb: 0, 51, 38;
+	--spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
+	--spectrum-green-400-rgb: 0, 68, 48;
+	--spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
+	--spectrum-green-500-rgb: 2, 87, 58;
+	--spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
+	--spectrum-green-600-rgb: 3, 106, 67;
+	--spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
+	--spectrum-green-700-rgb: 4, 124, 75;
+	--spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
+	--spectrum-green-800-rgb: 6, 136, 80;
+	--spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
+	--spectrum-green-900-rgb: 9, 157, 89;
+	--spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
+	--spectrum-green-1000-rgb: 14, 175, 98;
+	--spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
+	--spectrum-green-1100-rgb: 24, 193, 110;
+	--spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
+	--spectrum-green-1200-rgb: 57, 215, 134;
+	--spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
+	--spectrum-green-1300-rgb: 126, 231, 172;
+	--spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
+	--spectrum-green-1400-rgb: 189, 241, 208;
+	--spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
+	--spectrum-green-1500-rgb: 229, 250, 236;
+	--spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb));
+	--spectrum-green-1600-rgb: 255, 255, 255;
+	--spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb));
+	--spectrum-seafoam-100-rgb: 0, 30, 27;
+	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
+	--spectrum-seafoam-200-rgb: 0, 39, 35;
+	--spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
+	--spectrum-seafoam-300-rgb: 0, 50, 44;
+	--spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
+	--spectrum-seafoam-400-rgb: 0, 67, 59;
+	--spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
+	--spectrum-seafoam-500-rgb: 2, 86, 75;
+	--spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
+	--spectrum-seafoam-600-rgb: 4, 105, 89;
+	--spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
+	--spectrum-seafoam-700-rgb: 6, 122, 103;
+	--spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
+	--spectrum-seafoam-800-rgb: 8, 134, 112;
+	--spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
+	--spectrum-seafoam-900-rgb: 10, 154, 128;
+	--spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
+	--spectrum-seafoam-1000-rgb: 12, 173, 142;
+	--spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
+	--spectrum-seafoam-1100-rgb: 14, 190, 156;
+	--spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
+	--spectrum-seafoam-1200-rgb: 29, 214, 176;
+	--spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
+	--spectrum-seafoam-1300-rgb: 122, 229, 203;
+	--spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
+	--spectrum-seafoam-1400-rgb: 186, 241, 222;
+	--spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
+	--spectrum-seafoam-1500-rgb: 229, 249, 243;
+	--spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb));
+	--spectrum-seafoam-1600-rgb: 255, 255, 255;
+	--spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb));
+	--spectrum-cyan-100-rgb: 0, 29, 39;
+	--spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
+	--spectrum-cyan-200-rgb: 0, 36, 49;
+	--spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
+	--spectrum-cyan-300-rgb: 0, 48, 65;
+	--spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
+	--spectrum-cyan-400-rgb: 0, 64, 88;
+	--spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
+	--spectrum-cyan-500-rgb: 0, 82, 113;
+	--spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
+	--spectrum-cyan-600-rgb: 3, 99, 140;
+	--spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
+	--spectrum-cyan-700-rgb: 8, 115, 168;
+	--spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
+	--spectrum-cyan-800-rgb: 13, 125, 186;
+	--spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
+	--spectrum-cyan-900-rgb: 24, 142, 220;
+	--spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
+	--spectrum-cyan-1000-rgb: 38, 159, 244;
+	--spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
+	--spectrum-cyan-1100-rgb: 63, 177, 255;
+	--spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
+	--spectrum-cyan-1200-rgb: 107, 199, 255;
+	--spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
+	--spectrum-cyan-1300-rgb: 152, 219, 255;
+	--spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
+	--spectrum-cyan-1400-rgb: 195, 236, 252;
+	--spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
+	--spectrum-cyan-1500-rgb: 230, 248, 253;
+	--spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb));
+	--spectrum-cyan-1600-rgb: 255, 255, 255;
+	--spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb));
+	--spectrum-indigo-100-rgb: 30, 0, 93;
+	--spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
+	--spectrum-indigo-200-rgb: 35, 0, 110;
+	--spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
+	--spectrum-indigo-300-rgb: 47, 0, 140;
+	--spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
+	--spectrum-indigo-400-rgb: 62, 12, 174;
+	--spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
+	--spectrum-indigo-500-rgb: 79, 30, 209;
+	--spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
+	--spectrum-indigo-600-rgb: 95, 52, 235;
+	--spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
+	--spectrum-indigo-700-rgb: 109, 75, 248;
+	--spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
+	--spectrum-indigo-800-rgb: 116, 91, 252;
+	--spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
+	--spectrum-indigo-900-rgb: 128, 119, 254;
+	--spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
+	--spectrum-indigo-1000-rgb: 139, 141, 254;
+	--spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
+	--spectrum-indigo-1100-rgb: 153, 161, 255;
+	--spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
+	--spectrum-indigo-1200-rgb: 176, 186, 255;
+	--spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
+	--spectrum-indigo-1300-rgb: 199, 208, 255;
+	--spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
+	--spectrum-indigo-1400-rgb: 223, 228, 255;
+	--spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
+	--spectrum-indigo-1500-rgb: 243, 244, 255;
+	--spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb));
+	--spectrum-indigo-1600-rgb: 255, 255, 255;
+	--spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb));
+	--spectrum-purple-100-rgb: 41, 0, 79;
+	--spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
+	--spectrum-purple-200-rgb: 50, 0, 96;
+	--spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
+	--spectrum-purple-300-rgb: 64, 0, 122;
+	--spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
+	--spectrum-purple-400-rgb: 83, 0, 159;
+	--spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
+	--spectrum-purple-500-rgb: 107, 6, 195;
+	--spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
+	--spectrum-purple-600-rgb: 130, 34, 215;
+	--spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
+	--spectrum-purple-700-rgb: 148, 62, 224;
+	--spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
+	--spectrum-purple-800-rgb: 157, 78, 228;
+	--spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
+	--spectrum-purple-900-rgb: 173, 105, 233;
+	--spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
+	--spectrum-purple-1000-rgb: 186, 127, 237;
+	--spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
+	--spectrum-purple-1100-rgb: 197, 149, 240;
+	--spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
+	--spectrum-purple-1200-rgb: 212, 176, 244;
+	--spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
+	--spectrum-purple-1300-rgb: 225, 201, 247;
+	--spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
+	--spectrum-purple-1400-rgb: 238, 224, 250;
+	--spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
+	--spectrum-purple-1500-rgb: 248, 243, 253;
+	--spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb));
+	--spectrum-purple-1600-rgb: 255, 255, 255;
+	--spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb));
+	--spectrum-fuchsia-100-rgb: 50, 0, 61;
+	--spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
+	--spectrum-fuchsia-200-rgb: 61, 0, 74;
+	--spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
+	--spectrum-fuchsia-300-rgb: 79, 0, 95;
+	--spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
+	--spectrum-fuchsia-400-rgb: 102, 9, 120;
+	--spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
+	--spectrum-fuchsia-500-rgb: 127, 23, 146;
+	--spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
+	--spectrum-fuchsia-600-rgb: 151, 38, 170;
+	--spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
+	--spectrum-fuchsia-700-rgb: 173, 51, 192;
+	--spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
+	--spectrum-fuchsia-800-rgb: 186, 60, 206;
+	--spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
+	--spectrum-fuchsia-900-rgb: 213, 73, 235;
+	--spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
+	--spectrum-fuchsia-1000-rgb: 232, 91, 253;
+	--spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
+	--spectrum-fuchsia-1100-rgb: 240, 122, 255;
+	--spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
+	--spectrum-fuchsia-1200-rgb: 245, 159, 255;
+	--spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
+	--spectrum-fuchsia-1300-rgb: 248, 191, 255;
+	--spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
+	--spectrum-fuchsia-1400-rgb: 251, 219, 255;
+	--spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
+	--spectrum-fuchsia-1500-rgb: 253, 241, 255;
+	--spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb));
+	--spectrum-fuchsia-1600-rgb: 255, 255, 255;
+	--spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb));
+	--spectrum-magenta-100-rgb: 59, 0, 22;
+	--spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
+	--spectrum-magenta-200-rgb: 74, 0, 27;
+	--spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
+	--spectrum-magenta-300-rgb: 93, 0, 34;
+	--spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
+	--spectrum-magenta-400-rgb: 123, 0, 45;
+	--spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
+	--spectrum-magenta-500-rgb: 152, 7, 60;
+	--spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
+	--spectrum-magenta-600-rgb: 181, 19, 76;
+	--spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
+	--spectrum-magenta-700-rgb: 207, 31, 92;
+	--spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
+	--spectrum-magenta-800-rgb: 224, 38, 101;
+	--spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
+	--spectrum-magenta-900-rgb: 255, 51, 119;
+	--spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
+	--spectrum-magenta-1000-rgb: 255, 96, 149;
+	--spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
+	--spectrum-magenta-1100-rgb: 255, 128, 171;
+	--spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
+	--spectrum-magenta-1200-rgb: 255, 163, 194;
+	--spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
+	--spectrum-magenta-1300-rgb: 255, 193, 214;
+	--spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
+	--spectrum-magenta-1400-rgb: 255, 220, 232;
+	--spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
+	--spectrum-magenta-1500-rgb: 255, 241, 246;
+	--spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb));
+	--spectrum-magenta-1600-rgb: 255, 255, 255;
+	--spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb));
+	--spectrum-pink-100-rgb: 58, 0, 37;
+	--spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb));
+	--spectrum-pink-200-rgb: 71, 0, 44;
+	--spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb));
+	--spectrum-pink-300-rgb: 90, 0, 57;
+	--spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb));
+	--spectrum-pink-400-rgb: 115, 7, 75;
+	--spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb));
+	--spectrum-pink-500-rgb: 143, 18, 97;
+	--spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb));
+	--spectrum-pink-600-rgb: 171, 29, 119;
+	--spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb));
+	--spectrum-pink-700-rgb: 196, 39, 138;
+	--spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb));
+	--spectrum-pink-800-rgb: 213, 45, 151;
+	--spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb));
+	--spectrum-pink-900-rgb: 236, 67, 175;
+	--spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb));
+	--spectrum-pink-1000-rgb: 251, 90, 196;
+	--spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb));
+	--spectrum-pink-1100-rgb: 255, 122, 210;
+	--spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb));
+	--spectrum-pink-1200-rgb: 255, 159, 223;
+	--spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb));
+	--spectrum-pink-1300-rgb: 255, 191, 234;
+	--spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb));
+	--spectrum-pink-1400-rgb: 255, 219, 243;
+	--spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb));
+	--spectrum-pink-1500-rgb: 255, 241, 250;
+	--spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb));
+	--spectrum-pink-1600-rgb: 255, 255, 255;
+	--spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb));
+	--spectrum-turquoise-100-rgb: 0, 30, 33;
+	--spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb));
+	--spectrum-turquoise-200-rgb: 0, 37, 41;
+	--spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb));
+	--spectrum-turquoise-300-rgb: 0, 49, 54;
+	--spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb));
+	--spectrum-turquoise-400-rgb: 0, 66, 72;
+	--spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb));
+	--spectrum-turquoise-500-rgb: 3, 84, 92;
+	--spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb));
+	--spectrum-turquoise-600-rgb: 5, 103, 112;
+	--spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb));
+	--spectrum-turquoise-700-rgb: 7, 120, 131;
+	--spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb));
+	--spectrum-turquoise-800-rgb: 9, 131, 142;
+	--spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb));
+	--spectrum-turquoise-900-rgb: 11, 151, 164;
+	--spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb));
+	--spectrum-turquoise-1000-rgb: 13, 168, 182;
+	--spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb));
+	--spectrum-turquoise-1100-rgb: 16, 186, 202;
+	--spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb));
+	--spectrum-turquoise-1200-rgb: 64, 208, 220;
+	--spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb));
+	--spectrum-turquoise-1300-rgb: 128, 225, 231;
+	--spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb));
+	--spectrum-turquoise-1400-rgb: 183, 240, 240;
+	--spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb));
+	--spectrum-turquoise-1500-rgb: 228, 249, 249;
+	--spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb));
+	--spectrum-turquoise-1600-rgb: 255, 255, 255;
+	--spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb));
+	--spectrum-brown-100-rgb: 35, 24, 8;
+	--spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb));
+	--spectrum-brown-200-rgb: 44, 31, 11;
+	--spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb));
+	--spectrum-brown-300-rgb: 58, 40, 14;
+	--spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb));
+	--spectrum-brown-400-rgb: 78, 55, 19;
+	--spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb));
+	--spectrum-brown-500-rgb: 98, 71, 30;
+	--spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb));
+	--spectrum-brown-600-rgb: 115, 88, 47;
+	--spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb));
+	--spectrum-brown-700-rgb: 132, 104, 61;
+	--spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb));
+	--spectrum-brown-800-rgb: 143, 114, 69;
+	--spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb));
+	--spectrum-brown-900-rgb: 163, 132, 84;
+	--spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb));
+	--spectrum-brown-1000-rgb: 181, 147, 98;
+	--spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb));
+	--spectrum-brown-1100-rgb: 199, 163, 112;
+	--spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb));
+	--spectrum-brown-1200-rgb: 222, 185, 130;
+	--spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb));
+	--spectrum-brown-1300-rgb: 232, 207, 169;
+	--spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb));
+	--spectrum-brown-1400-rgb: 242, 227, 206;
+	--spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb));
+	--spectrum-brown-1500-rgb: 250, 244, 236;
+	--spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb));
+	--spectrum-brown-1600-rgb: 255, 255, 255;
+	--spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb));
+	--spectrum-silver-100-rgb: 26, 26, 26;
+	--spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb));
+	--spectrum-silver-200-rgb: 33, 33, 33;
+	--spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb));
+	--spectrum-silver-300-rgb: 44, 44, 44;
+	--spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb));
+	--spectrum-silver-400-rgb: 59, 59, 59;
+	--spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb));
+	--spectrum-silver-500-rgb: 76, 76, 76;
+	--spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb));
+	--spectrum-silver-600-rgb: 92, 92, 92;
+	--spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb));
+	--spectrum-silver-700-rgb: 108, 108, 108;
+	--spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb));
+	--spectrum-silver-800-rgb: 118, 118, 118;
+	--spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb));
+	--spectrum-silver-900-rgb: 137, 137, 137;
+	--spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb));
+	--spectrum-silver-1000-rgb: 152, 152, 152;
+	--spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb));
+	--spectrum-silver-1100-rgb: 169, 169, 169;
+	--spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb));
+	--spectrum-silver-1200-rgb: 190, 190, 190;
+	--spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb));
+	--spectrum-silver-1300-rgb: 211, 211, 211;
+	--spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb));
+	--spectrum-silver-1400-rgb: 229, 229, 229;
+	--spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb));
+	--spectrum-silver-1500-rgb: 244, 244, 244;
+	--spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb));
+	--spectrum-silver-1600-rgb: 255, 255, 255;
+	--spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb));
+	--spectrum-cinnamon-100-rgb: 48, 17, 4;
+	--spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb));
+	--spectrum-cinnamon-200-rgb: 59, 21, 5;
+	--spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb));
+	--spectrum-cinnamon-300-rgb: 79, 28, 7;
+	--spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb));
+	--spectrum-cinnamon-400-rgb: 100, 41, 15;
+	--spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb));
+	--spectrum-cinnamon-500-rgb: 122, 57, 28;
+	--spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb));
+	--spectrum-cinnamon-600-rgb: 143, 74, 40;
+	--spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb));
+	--spectrum-cinnamon-700-rgb: 163, 88, 52;
+	--spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb));
+	--spectrum-cinnamon-800-rgb: 176, 98, 59;
+	--spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb));
+	--spectrum-cinnamon-900-rgb: 192, 119, 80;
+	--spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb));
+	--spectrum-cinnamon-1000-rgb: 206, 136, 99;
+	--spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb));
+	--spectrum-cinnamon-1100-rgb: 220, 154, 118;
+	--spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb));
+	--spectrum-cinnamon-1200-rgb: 232, 179, 149;
+	--spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb));
+	--spectrum-cinnamon-1300-rgb: 239, 203, 183;
+	--spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb));
+	--spectrum-cinnamon-1400-rgb: 246, 225, 214;
+	--spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb));
+	--spectrum-cinnamon-1500-rgb: 252, 244, 239;
+	--spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb));
+	--spectrum-cinnamon-1600-rgb: 255, 255, 255;
+	--spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb));
+	--spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800);
+	--spectrum-icon-color-green-primary-default: var(--spectrum-green-800);
+	--spectrum-icon-color-red-primary-default: var(--spectrum-red-700);
+	--spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000);
+	--spectrum-negative-subdued-background-color-default: var(--spectrum-negative-subtle-background-color-default);
+	--spectrum-accent-subtle-background-color-default: var(--spectrum-accent-color-300);
+	--spectrum-informative-subtle-background-color-default: var(--spectrum-informative-color-300);
+	--spectrum-positive-subtle-background-color-default: var(--spectrum-positive-color-300);
+	--spectrum-notice-subtle-background-color-default: var(--spectrum-notice-color-300);
+	--spectrum-negative-subtle-background-color-default: var(--spectrum-negative-color-300);
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--color-scheme: dark;
+	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
+	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
+	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
+	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
+	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
+	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
+	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
+	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200);
+	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
+	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
+	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
+	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
+	--spectrum-dropindicator-color: var(--spectrum-blue-700);
+	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
+	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
+	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
+	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
+	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
+	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
+	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
+	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
+	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-swatch-border-color-rgb: 255, 255, 255;
+	--spectrum-swatch-border-color-opacity: 0.51;
+	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
+	--spectrum-swatch-border-color-light-rgb: 255, 255, 255;
+	--spectrum-swatch-border-color-light-opacity: 0.2;
+	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
+	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
+	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+}
+.spectrum {
+	--spectrum-focus-indicator-color: var(--spectrum-blue-800);
+	--spectrum-static-white-focus-indicator-color: var(--spectrum-white);
+	--spectrum-static-black-focus-indicator-color: var(--spectrum-black);
+	--spectrum-overlay-color: var(--spectrum-black);
+	--spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100);
+	--spectrum-opacity-disabled: 0.3;
+	--spectrum-background-base-color: var(--spectrum-gray-25);
+	--spectrum-background-layer-1-color: var(--spectrum-gray-50);
+	--spectrum-neutral-background-color-default: var(--spectrum-gray-800);
+	--spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-down: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-selected-default: var(--spectrum-gray-800);
+	--spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-900);
+	--spectrum-neutral-subdued-content-color-selected: var(--spectrum-neutral-subdued-content-color-down);
+	--spectrum-accent-content-color-selected: var(--spectrum-accent-content-color-down);
+	--spectrum-disabled-background-color: var(--spectrum-gray-100);
+	--spectrum-disabled-static-white-background-color: var(--spectrum-transparent-white-100);
+	--spectrum-disabled-static-black-background-color: var(--spectrum-transparent-black-100);
+	--spectrum-background-opacity-default: 0;
+	--spectrum-background-opacity-hover: 0.1;
+	--spectrum-background-opacity-down: 0.1;
+	--spectrum-background-opacity-key-focus: 0.1;
+	--spectrum-neutral-content-color-default: var(--spectrum-gray-800);
+	--spectrum-neutral-content-color-hover: var(--spectrum-gray-900);
+	--spectrum-neutral-content-color-down: var(--spectrum-gray-900);
+	--spectrum-neutral-content-color-focus-hover: var(--spectrum-neutral-content-color-down);
+	--spectrum-neutral-content-color-focus: var(--spectrum-neutral-content-color-down);
+	--spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900);
+	--spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700);
+	--spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800);
+	--spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800);
+	--spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800);
+	--spectrum-accent-content-color-default: var(--spectrum-accent-color-900);
+	--spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000);
+	--spectrum-accent-content-color-down: var(--spectrum-accent-color-1000);
+	--spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000);
+	--spectrum-negative-content-color-default: var(--spectrum-negative-color-900);
+	--spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000);
+	--spectrum-negative-content-color-down: var(--spectrum-negative-color-1000);
+	--spectrum-negative-content-color-key-focus: var(--spectrum-negative-color-1000);
+	--spectrum-disabled-content-color: var(--spectrum-gray-400);
+	--spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-400);
+	--spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-400);
+	--spectrum-disabled-border-color: var(--spectrum-gray-300);
+	--spectrum-disabled-static-white-border-color: var(--spectrum-transparent-white-300);
+	--spectrum-disabled-static-black-border-color: var(--spectrum-transparent-black-300);
+	--spectrum-negative-border-color-default: var(--spectrum-negative-color-900);
+	--spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000);
+	--spectrum-negative-border-color-down: var(--spectrum-negative-color-1100);
+	--spectrum-negative-border-color-focus-hover: var(--spectrum-negative-border-color-down);
+	--spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000);
+	--spectrum-negative-border-color-key-focus: var(--spectrum-negative-color-1000);
+	--spectrum-title-color: var(--spectrum-gray-900);
+	--spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
+	--spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
+	--spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
+	--spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300);
+	--spectrum-static-black-text-color: var(--spectrum-black);
+	--spectrum-static-white-text-color: var(--spectrum-white);
+	--spectrum-track-color: var(--spectrum-gray-300);
+	--spectrum-static-black-track-color: var(--spectrum-transparent-black-300);
+	--spectrum-static-white-track-color: var(--spectrum-transparent-white-300);
+	--spectrum-static-black-track-indicator-color: var(--spectrum-transparent-black-900);
+	--spectrum-static-white-track-indicator-color: var(--spectrum-transparent-white-900);
+	--spectrum-swatch-border-color: var(--spectrum-gray-900);
+	--spectrum-swatch-border-opacity: 0.51;
+	--spectrum-swatch-disabled-icon-border-color: var(--spectrum-black);
+	--spectrum-swatch-disabled-icon-border-opacity: 0.51;
+	--spectrum-thumbnail-border-color: var(--spectrum-gray-800);
+	--spectrum-thumbnail-border-opacity: 0.1;
+	--spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled);
+	--spectrum-opacity-checkerboard-square-light: var(--spectrum-white);
+	--spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled);
+	--spectrum-color-area-border-color: var(--spectrum-gray-900);
+	--spectrum-color-area-border-opacity: 0.1;
+	--spectrum-color-slider-border-color: var(--spectrum-gray-900);
+	--spectrum-color-slider-border-opacity: 0.1;
+	--spectrum-color-loupe-drop-shadow-color: var(--spectrum-transparent-black-300);
+	--spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200);
+	--spectrum-color-loupe-outer-border: var(--spectrum-white);
+	--spectrum-card-selection-background-color: var(--spectrum-gray-100);
+	--spectrum-card-selection-background-color-opacity: 0.95;
+	--spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color);
+	--spectrum-drop-zone-background-color-opacity: 0.1;
+	--spectrum-drop-zone-background-color-opacity-filled: 0.3;
+	--spectrum-coach-mark-pagination-color: var(--spectrum-gray-600);
+	--spectrum-color-handle-inner-border-color: var(--spectrum-black);
+	--spectrum-color-handle-inner-border-opacity: 0.42;
+	--spectrum-color-handle-outer-border-color: var(--spectrum-black);
+	--spectrum-color-handle-outer-border-opacity: var(--spectrum-color-handle-inner-border-opacity);
+	--spectrum-color-handle-drop-shadow-color: var(--spectrum-drop-shadow-color);
+	--spectrum-floating-action-button-drop-shadow-color: var(--spectrum-transparent-black-300);
+	--spectrum-floating-action-button-shadow-color: var(--spectrum-floating-action-button-drop-shadow-color);
+	--spectrum-table-row-hover-color: var(--spectrum-gray-900);
+	--spectrum-table-row-hover-opacity: 0.07;
+	--spectrum-table-selected-row-background-color: var(--spectrum-informative-background-color-default);
+	--spectrum-table-selected-row-background-opacity: 0.1;
+	--spectrum-table-selected-row-background-color-non-emphasized: var(--spectrum-neutral-background-color-selected-default);
+	--spectrum-table-selected-row-background-opacity-non-emphasized: 0.1;
+	--spectrum-table-row-down-opacity: 0.1;
+	--spectrum-table-selected-row-background-opacity-hover: 0.15;
+	--spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15;
+	--spectrum-black-rgb: 0, 0, 0;
+	--spectrum-black: rgba(var(--spectrum-black-rgb));
+	--spectrum-transparent-black-1000-rgb: 0, 0, 0;
+	--spectrum-transparent-black-1000: rgba(var(--spectrum-transparent-black-1000-rgb));
+	--spectrum-icon-color-inverse: var(--spectrum-gray-50);
+	--spectrum-icon-color-primary-default: var(--spectrum-neutral-content-color-default);
+	--spectrum-asterisk-icon-size-75: 8px;
+	--spectrum-radio-button-selection-indicator: 4px;
+	--spectrum-field-label-top-margin-small: 0px;
+	--spectrum-field-label-to-component: 0px;
+	--spectrum-help-text-to-component: 0px;
+	--spectrum-status-light-dot-size-small: 8px;
+	--spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
+	--spectrum-action-button-edge-to-hold-icon-small: 3px;
+	--spectrum-button-minimum-width-multiplier: 2.25;
+	--spectrum-divider-thickness-small: 1px;
+	--spectrum-divider-thickness-medium: 2px;
+	--spectrum-divider-thickness-large: 4px;
+	--spectrum-swatch-rectangle-width-multiplier: 2;
+	--spectrum-swatch-slash-thickness-extra-small: 2px;
+	--spectrum-swatch-slash-thickness-small: 3px;
+	--spectrum-swatch-slash-thickness-medium: 4px;
+	--spectrum-swatch-slash-thickness-large: 5px;
+	--spectrum-progress-bar-minimum-width: 48px;
+	--spectrum-progress-bar-maximum-width: 768px;
+	--spectrum-meter-minimum-width: 48px;
+	--spectrum-meter-maximum-width: 768px;
+	--spectrum-meter-default-width: var(--spectrum-meter-width);
+	--spectrum-in-line-alert-minimum-width: 240px;
+	--spectrum-popover-tip-width: 16px;
+	--spectrum-popover-tip-height: 8px;
+	--spectrum-menu-item-label-to-description: 1px;
+	--spectrum-menu-item-section-divider-height: 8px;
+	--spectrum-slider-track-thickness: 2px;
+	--spectrum-slider-handle-gap: 4px;
+	--spectrum-picker-minimum-width-multiplier: 2;
+	--spectrum-picker-border-width: var(--spectrum-border-width-100);
+	--spectrum-picker-end-edge-to-disclousure-icon-quiet: var(--spectrum-picker-end-edge-to-disclosure-icon-quiet);
+	--spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px;
+	--spectrum-text-field-minimum-width-multiplier: 1.5;
+	--spectrum-combo-box-minimum-width-multiplier: 2.5;
+	--spectrum-combo-box-quiet-minimum-width-multiplier: 2;
+	--spectrum-combo-box-visual-to-field-button-quiet: 0px;
+	--spectrum-alert-dialog-minimum-width: 288px;
+	--spectrum-alert-dialog-maximum-width: 480px;
+	--spectrum-contextual-help-minimum-width: 268px;
+	--spectrum-breadcrumbs-height: var(--spectrum-component-height-300);
+	--spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200);
+	--spectrum-breadcrumbs-end-edge-to-text: 0px;
+	--spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px;
+	--spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px;
+	--spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px;
+	--spectrum-alert-banner-to-top-workflow-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
+	--spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text);
+	--spectrum-alert-banner-to-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
+	--spectrum-color-area-border-width: var(--spectrum-border-width-100);
+	--spectrum-color-area-border-rounding: var(--spectrum-corner-radius-medium-size-small);
+	--spectrum-color-wheel-color-area-margin: 12px;
+	--spectrum-color-slider-border-width: 1px;
+	--spectrum-color-slider-border-rounding: var(--spectrum-corner-radius-medium-size-small);
+	--spectrum-floating-action-button-drop-shadow-blur: 12px;
+	--spectrum-floating-action-button-drop-shadow-y: 4px;
+	--spectrum-illustrated-message-maximum-width: 380px;
+	--spectrum-search-field-minimum-width-multiplier: 3;
+	--spectrum-color-loupe-height: 64px;
+	--spectrum-color-loupe-width: 48px;
+	--spectrum-color-loupe-bottom-to-color-handle: 12px;
+	--spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200);
+	--spectrum-color-loupe-inner-border-width: 1px;
+	--spectrum-color-loupe-drop-shadow-y: 2px;
+	--spectrum-color-loupe-drop-shadow-blur: 8px;
+	--spectrum-card-minimum-width: 100px;
+	--spectrum-card-preview-minimum-height: 130px;
+	--spectrum-card-selection-background-size: 40px;
+	--spectrum-drop-zone-width: 428px;
+	--spectrum-drop-zone-content-maximum-width: var(--spectrum-illustrated-message-maximum-width);
+	--spectrum-drop-zone-border-dash-length: 8px;
+	--spectrum-drop-zone-border-dash-gap: 4px;
+	--spectrum-drop-zone-title-size: var(--spectrum-illustrated-message-title-size);
+	--spectrum-drop-zone-cjk-title-size: var(--spectrum-illustrated-message-cjk-title-size);
+	--spectrum-drop-zone-body-size: var(--spectrum-illustrated-message-body-size);
+	--spectrum-accordion-top-to-text-compact-small: 2px;
+	--spectrum-accordion-top-to-text-compact-medium: 4px;
+	--spectrum-accordion-disclosure-indicator-to-text: 0px;
+	--spectrum-accordion-edge-to-disclosure-indicator: 0px;
+	--spectrum-accordion-edge-to-text: 0px;
+	--spectrum-accordion-focus-indicator-gap: 0px;
+	--spectrum-color-handle-border-width: var(--spectrum-border-width-200);
+	--spectrum-color-handle-inner-border-width: 1px;
+	--spectrum-color-handle-outer-border-width: 1px;
+	--spectrum-color-handle-drop-shadow-x: 0;
+	--spectrum-color-handle-drop-shadow-y: 0;
+	--spectrum-color-handle-drop-shadow-blur: 0;
+	--spectrum-table-row-height-small-compact: var(--spectrum-component-height-75);
+	--spectrum-table-row-height-medium-compact: var(--spectrum-component-height-100);
+	--spectrum-table-row-height-large-compact: var(--spectrum-component-height-200);
+	--spectrum-table-row-height-extra-large-compact: var(--spectrum-component-height-300);
+	--spectrum-table-row-top-to-text-small-compact: var(--spectrum-component-top-to-text-75);
+	--spectrum-table-row-top-to-text-medium-compact: var(--spectrum-component-top-to-text-100);
+	--spectrum-table-row-top-to-text-large-compact: var(--spectrum-component-top-to-text-200);
+	--spectrum-table-row-top-to-text-extra-large-compact: var(--spectrum-component-top-to-text-300);
+	--spectrum-table-row-bottom-to-text-small-compact: var(--spectrum-component-bottom-to-text-75);
+	--spectrum-table-row-bottom-to-text-medium-compact: var(--spectrum-component-bottom-to-text-100);
+	--spectrum-table-row-bottom-to-text-large-compact: var(--spectrum-component-bottom-to-text-200);
+	--spectrum-table-row-bottom-to-text-extra-large-compact: var(--spectrum-component-bottom-to-text-300);
+	--spectrum-table-edge-to-content: 16px;
+	--spectrum-table-border-divider-width: 1px;
+	--spectrum-tab-item-height-small: var(--spectrum-component-height-200);
+	--spectrum-tab-item-height-medium: var(--spectrum-component-height-300);
+	--spectrum-tab-item-height-large: var(--spectrum-component-height-400);
+	--spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500);
+	--spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75);
+	--spectrum-tab-item-compact-height-medium: var(--spectrum-component-height-100);
+	--spectrum-tab-item-compact-height-large: var(--spectrum-component-height-200);
+	--spectrum-tab-item-compact-height-extra-large: var(--spectrum-component-height-300);
+	--spectrum-tab-item-start-to-edge-quiet: 0px;
+	--spectrum-in-field-button-width-stacked-small: 20px;
+	--spectrum-in-field-button-width-stacked-medium: 28px;
+	--spectrum-in-field-button-width-stacked-large: 36px;
+	--spectrum-in-field-button-width-stacked-extra-large: 44px;
+	--spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
+	--spectrum-in-field-button-edge-to-fill: 0px;
+	--spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
+	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px;
+	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px;
+	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px;
+	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
+	--spectrum-corner-radius-0: 0px;
+	--spectrum-corner-radius-75: 4px;
+	--spectrum-corner-radius-100: 8px;
+	--spectrum-corner-radius-200: 10px;
+	--spectrum-corner-radius-300: 6px;
+	--spectrum-corner-radius-400: 7px;
+	--spectrum-corner-radius-500: 8px;
+	--spectrum-corner-radius-600: 9px;
+	--spectrum-corner-radius-700: 10px;
+	--spectrum-corner-radius-800: 16px;
+	--spectrum-corner-radius-1000: 0.5;
+	--spectrum-corner-radius-none: var(--spectrum-corner-radius-0);
+	--spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100);
+	--spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500);
+	--spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700);
+	--spectrum-corner-radius-extra-large-default: var(--spectrum-corner-radius-800);
+	--spectrum-corner-radius-full: var(--spectrum-corner-radius-1000);
+	--spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75);
+	--spectrum-corner-radius-small-size-medium: var(--spectrum-corner-radius-100);
+	--spectrum-corner-radius-small-size-large: var(--spectrum-corner-radius-200);
+	--spectrum-corner-radius-small-size-extra-large: var(--spectrum-corner-radius-300);
+	--spectrum-corner-radius-medium-size-extra-small: var(--spectrum-corner-radius-300);
+	--spectrum-corner-radius-medium-size-small: var(--spectrum-corner-radius-400);
+	--spectrum-corner-radius-medium-size-medium: var(--spectrum-corner-radius-500);
+	--spectrum-corner-radius-medium-size-large: var(--spectrum-corner-radius-600);
+	--spectrum-corner-radius-medium-size-extra-large: var(--spectrum-corner-radius-700);
+	--spectrum-drop-shadow-x: 0px;
+	--spectrum-spacing-50: 2px;
+	--spectrum-spacing-75: 4px;
+	--spectrum-spacing-100: 8px;
+	--spectrum-spacing-200: 12px;
+	--spectrum-spacing-300: 16px;
+	--spectrum-spacing-400: 24px;
+	--spectrum-spacing-500: 32px;
+	--spectrum-spacing-600: 40px;
+	--spectrum-spacing-700: 48px;
+	--spectrum-spacing-800: 64px;
+	--spectrum-spacing-900: 80px;
+	--spectrum-spacing-1000: 96px;
+	--spectrum-focus-indicator-thickness: 2px;
+	--spectrum-focus-indicator-gap: 2px;
+	--spectrum-border-width-100: 1px;
+	--spectrum-border-width-200: 2px;
+	--spectrum-border-width-400: 4px;
+	--spectrum-field-edge-to-text-quiet: 0px;
+	--spectrum-field-edge-to-visual-quiet: 0px;
+	--spectrum-field-edge-to-border-quiet: 0px;
+	--spectrum-field-edge-to-alert-icon-quiet: 0px;
+	--spectrum-field-edge-to-validation-icon-quiet: 0px;
+	--spectrum-text-underline-thickness: 1px;
+	--spectrum-text-underline-gap: 1px;
+	--spectrum-accent-color-100: var(--spectrum-blue-100);
+	--spectrum-accent-color-200: var(--spectrum-blue-200);
+	--spectrum-accent-color-300: var(--spectrum-blue-300);
+	--spectrum-accent-color-400: var(--spectrum-blue-400);
+	--spectrum-accent-color-500: var(--spectrum-blue-500);
+	--spectrum-accent-color-600: var(--spectrum-blue-600);
+	--spectrum-accent-color-700: var(--spectrum-blue-700);
+	--spectrum-accent-color-800: var(--spectrum-blue-800);
+	--spectrum-accent-color-900: var(--spectrum-blue-900);
+	--spectrum-accent-color-1000: var(--spectrum-blue-1000);
+	--spectrum-accent-color-1100: var(--spectrum-blue-1100);
+	--spectrum-accent-color-1200: var(--spectrum-blue-1200);
+	--spectrum-accent-color-1300: var(--spectrum-blue-1300);
+	--spectrum-accent-color-1400: var(--spectrum-blue-1400);
+	--spectrum-accent-color-1500: var(--spectrum-blue-1500);
+	--spectrum-accent-color-1600: var(--spectrum-blue-1600);
+	--spectrum-informative-color-100: var(--spectrum-blue-100);
+	--spectrum-informative-color-200: var(--spectrum-blue-200);
+	--spectrum-informative-color-300: var(--spectrum-blue-300);
+	--spectrum-informative-color-400: var(--spectrum-blue-400);
+	--spectrum-informative-color-500: var(--spectrum-blue-500);
+	--spectrum-informative-color-600: var(--spectrum-blue-600);
+	--spectrum-informative-color-700: var(--spectrum-blue-700);
+	--spectrum-informative-color-800: var(--spectrum-blue-800);
+	--spectrum-informative-color-900: var(--spectrum-blue-900);
+	--spectrum-informative-color-1000: var(--spectrum-blue-1000);
+	--spectrum-informative-color-1100: var(--spectrum-blue-1100);
+	--spectrum-informative-color-1200: var(--spectrum-blue-1200);
+	--spectrum-informative-color-1300: var(--spectrum-blue-1300);
+	--spectrum-informative-color-1400: var(--spectrum-blue-1400);
+	--spectrum-informative-color-1500: var(--spectrum-blue-1500);
+	--spectrum-informative-color-1600: var(--spectrum-blue-1600);
+	--spectrum-negative-color-100: var(--spectrum-red-100);
+	--spectrum-negative-color-200: var(--spectrum-red-200);
+	--spectrum-negative-color-300: var(--spectrum-red-300);
+	--spectrum-negative-color-400: var(--spectrum-red-400);
+	--spectrum-negative-color-500: var(--spectrum-red-500);
+	--spectrum-negative-color-600: var(--spectrum-red-600);
+	--spectrum-negative-color-700: var(--spectrum-red-700);
+	--spectrum-negative-color-800: var(--spectrum-red-800);
+	--spectrum-negative-color-900: var(--spectrum-red-900);
+	--spectrum-negative-color-1000: var(--spectrum-red-1000);
+	--spectrum-negative-color-1100: var(--spectrum-red-1100);
+	--spectrum-negative-color-1200: var(--spectrum-red-1200);
+	--spectrum-negative-color-1300: var(--spectrum-red-1300);
+	--spectrum-negative-color-1400: var(--spectrum-red-1400);
+	--spectrum-negative-color-1500: var(--spectrum-red-1500);
+	--spectrum-negative-color-1600: var(--spectrum-red-1600);
+	--spectrum-notice-color-100: var(--spectrum-orange-100);
+	--spectrum-notice-color-200: var(--spectrum-orange-200);
+	--spectrum-notice-color-300: var(--spectrum-orange-300);
+	--spectrum-notice-color-400: var(--spectrum-orange-400);
+	--spectrum-notice-color-500: var(--spectrum-orange-500);
+	--spectrum-notice-color-600: var(--spectrum-orange-600);
+	--spectrum-notice-color-700: var(--spectrum-orange-700);
+	--spectrum-notice-color-800: var(--spectrum-orange-800);
+	--spectrum-notice-color-900: var(--spectrum-orange-900);
+	--spectrum-notice-color-1000: var(--spectrum-orange-1000);
+	--spectrum-notice-color-1100: var(--spectrum-orange-1100);
+	--spectrum-notice-color-1200: var(--spectrum-orange-1200);
+	--spectrum-notice-color-1300: var(--spectrum-orange-1300);
+	--spectrum-notice-color-1400: var(--spectrum-orange-1400);
+	--spectrum-notice-color-1500: var(--spectrum-orange-1500);
+	--spectrum-notice-color-1600: var(--spectrum-orange-1600);
+	--spectrum-positive-color-100: var(--spectrum-green-100);
+	--spectrum-positive-color-200: var(--spectrum-green-200);
+	--spectrum-positive-color-300: var(--spectrum-green-300);
+	--spectrum-positive-color-400: var(--spectrum-green-400);
+	--spectrum-positive-color-500: var(--spectrum-green-500);
+	--spectrum-positive-color-600: var(--spectrum-green-600);
+	--spectrum-positive-color-700: var(--spectrum-green-700);
+	--spectrum-positive-color-800: var(--spectrum-green-800);
+	--spectrum-positive-color-900: var(--spectrum-green-900);
+	--spectrum-positive-color-1000: var(--spectrum-green-1000);
+	--spectrum-positive-color-1100: var(--spectrum-green-1100);
+	--spectrum-positive-color-1200: var(--spectrum-green-1200);
+	--spectrum-positive-color-1300: var(--spectrum-green-1300);
+	--spectrum-positive-color-1400: var(--spectrum-green-1400);
+	--spectrum-positive-color-1500: var(--spectrum-green-1500);
+	--spectrum-positive-color-1600: var(--spectrum-green-1600);
+	--spectrum-negative-subdued-background-color-hover: var(--spectrum-negative-color-300);
+	--spectrum-negative-subdued-background-color-down: var(--spectrum-negative-color-300);
+	--spectrum-negative-subdued-background-color-key-focus: var(--spectrum-negative-color-300);
+	--spectrum-default-font-family: var(--spectrum-sans-serif-font-family);
+	--spectrum-sans-serif-font-family: adobe clean;
+	--spectrum-serif-font-family: adobe clean serif;
+	--spectrum-cjk-font-family: adobe clean han;
+	--spectrum-light-font-weight: 300;
+	--spectrum-regular-font-weight: 400;
+	--spectrum-medium-font-weight: 500;
+	--spectrum-bold-font-weight: 700;
+	--spectrum-extra-bold-font-weight: 800;
+	--spectrum-black-font-weight: 900;
+	--spectrum-italic-font-style: italic;
+	--spectrum-default-font-style: normal;
+	--spectrum-line-height-100: 1.3;
+	--spectrum-line-height-200: 1.5;
+	--spectrum-cjk-line-height-100: 1.5;
+	--spectrum-cjk-line-height-200: 1.7;
+	--spectrum-cjk-letter-spacing: 0.05em;
+	--spectrum-heading-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
+	--spectrum-heading-serif-font-family: var(--spectrum-serif-font-family);
+	--spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family);
+	--spectrum-heading-sans-serif-light-font-weight: var(--spectrum-light-font-weight);
+	--spectrum-heading-sans-serif-light-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-serif-light-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight);
+	--spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-heading-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
+	--spectrum-heading-cjk-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-heavy-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-sans-serif-heavy-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-light-strong-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-heading-sans-serif-light-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-serif-light-strong-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-heading-serif-light-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight);
+	--spectrum-heading-cjk-light-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-strong-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-sans-serif-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-serif-strong-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-serif-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-sans-serif-heavy-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-serif-heavy-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-cjk-heavy-strong-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-cjk-heavy-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-light-emphasized-font-weight: var(--spectrum-light-font-weight);
+	--spectrum-heading-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-heading-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-heading-cjk-light-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-heading-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-heading-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-cjk-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-cjk-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-heavy-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-sans-serif-heavy-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-serif-heavy-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-serif-heavy-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-cjk-heavy-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-cjk-heavy-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-heading-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-heading-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+	--spectrum-heading-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-serif-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-serif-heavy-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-heading-cjk-heavy-strong-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-size-xxxl: var(--spectrum-font-size-1300);
+	--spectrum-heading-size-xxl: var(--spectrum-font-size-1100);
+	--spectrum-heading-size-xl: var(--spectrum-font-size-900);
+	--spectrum-heading-size-l: var(--spectrum-font-size-700);
+	--spectrum-heading-size-m: var(--spectrum-font-size-500);
+	--spectrum-heading-size-s: var(--spectrum-font-size-300);
+	--spectrum-heading-size-xs: var(--spectrum-font-size-200);
+	--spectrum-heading-size-xxs: var(--spectrum-font-size-100);
+	--spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300);
+	--spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900);
+	--spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800);
+	--spectrum-heading-cjk-size-l: var(--spectrum-font-size-600);
+	--spectrum-heading-cjk-size-m: var(--spectrum-font-size-400);
+	--spectrum-heading-cjk-size-s: var(--spectrum-font-size-300);
+	--spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200);
+	--spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100);
+	--spectrum-heading-line-height: var(--spectrum-line-height-100);
+	--spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100);
+	--spectrum-heading-margin-top-multiplier: 0.88888889;
+	--spectrum-heading-margin-bottom-multiplier: 0.25;
+	--spectrum-heading-color: var(--spectrum-gray-900);
+	--spectrum-body-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
+	--spectrum-body-serif-font-family: var(--spectrum-serif-font-family);
+	--spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family);
+	--spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-body-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-body-cjk-font-style: var(--spectrum-default-font-style);
+	--spectrum-body-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-body-sans-serif-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-body-sans-serif-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-body-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-body-serif-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-body-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-body-cjk-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+	--spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-body-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-body-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-body-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-body-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-body-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-body-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-body-size-xxxl: var(--spectrum-font-size-600);
+	--spectrum-body-size-xxl: var(--spectrum-font-size-500);
+	--spectrum-body-size-xl: var(--spectrum-font-size-400);
+	--spectrum-body-size-l: var(--spectrum-font-size-300);
+	--spectrum-body-size-m: var(--spectrum-font-size-200);
+	--spectrum-body-size-s: var(--spectrum-font-size-100);
+	--spectrum-body-size-xs: var(--spectrum-font-size-75);
+	--spectrum-body-line-height: var(--spectrum-line-height-200);
+	--spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200);
+	--spectrum-body-margin-multiplier: 0.75;
+	--spectrum-body-color: var(--spectrum-gray-800);
+	--spectrum-detail-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
+	--spectrum-detail-serif-font-family: var(--spectrum-serif-font-family);
+	--spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family);
+	--spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-detail-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
+	--spectrum-detail-cjk-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-sans-serif-light-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-detail-sans-serif-light-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-serif-light-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight);
+	--spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-detail-sans-serif-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-sans-serif-light-strong-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-detail-sans-serif-light-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-serif-light-strong-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-detail-serif-light-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight);
+	--spectrum-detail-cjk-light-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-detail-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-detail-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-detail-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-detail-cjk-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-detail-cjk-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-sans-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-detail-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-detail-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-detail-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-detail-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-detail-cjk-light-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-detail-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-detail-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-detail-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-detail-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-detail-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-detail-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-detail-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-detail-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-detail-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+	--spectrum-detail-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-detail-size-xl: var(--spectrum-font-size-200);
+	--spectrum-detail-size-l: var(--spectrum-font-size-100);
+	--spectrum-detail-size-m: var(--spectrum-font-size-75);
+	--spectrum-detail-size-s: var(--spectrum-font-size-50);
+	--spectrum-detail-line-height: var(--spectrum-line-height-100);
+	--spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100);
+	--spectrum-detail-margin-top-multiplier: 0.88888889;
+	--spectrum-detail-margin-bottom-multiplier: 0.25;
+	--spectrum-detail-letter-spacing: 0.06em;
+	--spectrum-detail-sans-serif-text-transform: uppercase;
+	--spectrum-detail-serif-text-transform: uppercase;
+	--spectrum-detail-color: var(--spectrum-gray-900);
+	--spectrum-code-font-family: source code pro;
+	--spectrum-code-cjk-font-family: var(--spectrum-code-font-family);
+	--spectrum-code-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-code-font-style: var(--spectrum-default-font-style);
+	--spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-code-cjk-font-style: var(--spectrum-default-font-style);
+	--spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-code-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style);
+	--spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-code-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-code-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-code-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+	--spectrum-code-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-code-size-xl: var(--spectrum-font-size-400);
+	--spectrum-code-size-l: var(--spectrum-font-size-300);
+	--spectrum-code-size-m: var(--spectrum-font-size-200);
+	--spectrum-code-size-s: var(--spectrum-font-size-100);
+	--spectrum-code-size-xs: var(--spectrum-font-size-75);
+	--spectrum-code-line-height: var(--spectrum-line-height-200);
+	--spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200);
+	--spectrum-code-color: var(--spectrum-gray-800);
+	--system: spectrum;
+	--spectrum-animation-duration-0: 0ms;
+	--spectrum-animation-duration-100: 130ms;
+	--spectrum-animation-duration-200: 160ms;
+	--spectrum-animation-duration-300: 190ms;
+	--spectrum-animation-duration-400: 220ms;
+	--spectrum-animation-duration-500: 250ms;
+	--spectrum-animation-duration-600: 300ms;
+	--spectrum-animation-duration-700: 350ms;
+	--spectrum-animation-duration-800: 400ms;
+	--spectrum-animation-duration-900: 450ms;
+	--spectrum-animation-duration-1000: 500ms;
+	--spectrum-animation-duration-2000: 1000ms;
+	--spectrum-animation-duration-4000: 2000ms;
+	--spectrum-animation-duration-6000: 3000ms;
+	--spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
+	--spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
+	--spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
+	--spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
+	--spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
+
+	/* stylelint-disable value-keyword-case -- typography names should use their appropriate cases */
+	--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	--spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
+	--spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
+	--spectrum-serif-font: var(--spectrum-serif-font-family-stack);
+	--spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
+	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	/* stylelint-enable value-keyword-case */
+	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-font-style: var(--spectrum-default-font-style);
+	--spectrum-font-size: var(--spectrum-font-size-100);
+	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
+	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
+	--spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
+	--spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
+	--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
+	--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
+	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
+}
+.spectrum--large {
+	--spectrum-workflow-icon-size-50: 16px;
+	--spectrum-workflow-icon-size-75: 18px;
+	--spectrum-workflow-icon-size-100: 24px;
+	--spectrum-workflow-icon-size-200: 28px;
+	--spectrum-workflow-icon-size-300: 30px;
+	--spectrum-arrow-icon-size-75: 12px;
+	--spectrum-arrow-icon-size-100: 14px;
+	--spectrum-arrow-icon-size-200: 16px;
+	--spectrum-arrow-icon-size-300: 16px;
+	--spectrum-arrow-icon-size-400: 18px;
+	--spectrum-arrow-icon-size-500: 22px;
+	--spectrum-arrow-icon-size-600: 24px;
+	--spectrum-asterisk-icon-size-100: 10px;
+	--spectrum-asterisk-icon-size-200: 12px;
+	--spectrum-asterisk-icon-size-300: 12px;
+	--spectrum-checkmark-icon-size-50: 12px;
+	--spectrum-checkmark-icon-size-75: 12px;
+	--spectrum-checkmark-icon-size-100: 14px;
+	--spectrum-checkmark-icon-size-200: 14px;
+	--spectrum-checkmark-icon-size-300: 16px;
+	--spectrum-checkmark-icon-size-400: 18px;
+	--spectrum-checkmark-icon-size-500: 20px;
+	--spectrum-checkmark-icon-size-600: 24px;
+	--spectrum-chevron-icon-size-50: 8px;
+	--spectrum-chevron-icon-size-75: 12px;
+	--spectrum-chevron-icon-size-100: 14px;
+	--spectrum-chevron-icon-size-200: 14px;
+	--spectrum-chevron-icon-size-300: 16px;
+	--spectrum-chevron-icon-size-400: 18px;
+	--spectrum-chevron-icon-size-500: 20px;
+	--spectrum-chevron-icon-size-600: 24px;
+	--spectrum-corner-triangle-icon-size-75: 6px;
+	--spectrum-corner-triangle-icon-size-100: 7px;
+	--spectrum-corner-triangle-icon-size-200: 8px;
+	--spectrum-corner-triangle-icon-size-300: 8px;
+	--spectrum-cross-icon-size-75: 10px;
+	--spectrum-cross-icon-size-100: 10px;
+	--spectrum-cross-icon-size-200: 12px;
+	--spectrum-cross-icon-size-300: 14px;
+	--spectrum-cross-icon-size-400: 16px;
+	--spectrum-cross-icon-size-500: 16px;
+	--spectrum-cross-icon-size-600: 18px;
+	--spectrum-dash-icon-size-50: 10px;
+	--spectrum-dash-icon-size-75: 10px;
+	--spectrum-dash-icon-size-100: 12px;
+	--spectrum-dash-icon-size-200: 14px;
+	--spectrum-dash-icon-size-300: 16px;
+	--spectrum-dash-icon-size-400: 18px;
+	--spectrum-dash-icon-size-500: 20px;
+	--spectrum-dash-icon-size-600: 22px;
+	--spectrum-checkbox-control-size-small: 16px;
+	--spectrum-checkbox-control-size-medium: 18px;
+	--spectrum-checkbox-control-size-large: 20px;
+	--spectrum-checkbox-control-size-extra-large: 22px;
+	--spectrum-checkbox-top-to-control-small: 7px;
+	--spectrum-checkbox-top-to-control-medium: 11px;
+	--spectrum-checkbox-top-to-control-large: 15px;
+	--spectrum-checkbox-top-to-control-extra-large: 19px;
+	--spectrum-switch-control-width-small: 32px;
+	--spectrum-switch-control-width-medium: 36px;
+	--spectrum-switch-control-width-large: 41px;
+	--spectrum-switch-control-width-extra-large: 46px;
+	--spectrum-switch-control-height-small: 16px;
+	--spectrum-switch-control-height-medium: 18px;
+	--spectrum-switch-control-height-large: 20px;
+	--spectrum-switch-control-height-extra-large: 22px;
+	--spectrum-switch-top-to-control-small: 7px;
+	--spectrum-switch-top-to-control-medium: 11px;
+	--spectrum-switch-top-to-control-large: 15px;
+	--spectrum-switch-top-to-control-extra-large: 19px;
+	--spectrum-radio-button-control-size-small: 16px;
+	--spectrum-radio-button-control-size-medium: 18px;
+	--spectrum-radio-button-control-size-large: 20px;
+	--spectrum-radio-button-control-size-extra-large: 22px;
+	--spectrum-radio-button-top-to-control-small: 7px;
+	--spectrum-radio-button-top-to-control-medium: 11px;
+	--spectrum-radio-button-top-to-control-large: 15px;
+	--spectrum-radio-button-top-to-control-extra-large: 19px;
+	--spectrum-field-label-text-to-asterisk-small: 5px;
+	--spectrum-field-label-text-to-asterisk-medium: 5px;
+	--spectrum-field-label-text-to-asterisk-large: 6px;
+	--spectrum-field-label-text-to-asterisk-extra-large: 6px;
+	--spectrum-field-label-top-to-asterisk-small: 11px;
+	--spectrum-field-label-top-to-asterisk-medium: 15px;
+	--spectrum-field-label-top-to-asterisk-large: 19px;
+	--spectrum-field-label-top-to-asterisk-extra-large: 24px;
+	--spectrum-field-label-top-margin-medium: 5px;
+	--spectrum-field-label-top-margin-large: 6px;
+	--spectrum-field-label-top-margin-extra-large: 6px;
+	--spectrum-field-label-to-component-quiet-small: -10px;
+	--spectrum-field-label-to-component-quiet-medium: -10px;
+	--spectrum-field-label-to-component-quiet-large: -15px;
+	--spectrum-field-label-to-component-quiet-extra-large: -19px;
+	--spectrum-help-text-top-to-workflow-icon-small: 5px;
+	--spectrum-help-text-top-to-workflow-icon-medium: 4px;
+	--spectrum-help-text-top-to-workflow-icon-large: 8px;
+	--spectrum-help-text-top-to-workflow-icon-extra-large: 11px;
+	--spectrum-status-light-dot-size-medium: 10px;
+	--spectrum-status-light-dot-size-large: 12px;
+	--spectrum-status-light-dot-size-extra-large: 12px;
+	--spectrum-status-light-top-to-dot-small: 11px;
+	--spectrum-status-light-top-to-dot-medium: 15px;
+	--spectrum-status-light-top-to-dot-large: 19px;
+	--spectrum-status-light-top-to-dot-extra-large: 24px;
+	--spectrum-action-button-edge-to-hold-icon-medium: 5px;
+	--spectrum-action-button-edge-to-hold-icon-large: 6px;
+	--spectrum-action-button-edge-to-hold-icon-extra-large: 7px;
+	--spectrum-tooltip-tip-width: 10px;
+	--spectrum-tooltip-tip-height: 5px;
+	--spectrum-tooltip-maximum-width: 200px;
+	--spectrum-progress-circle-size-small: 20px;
+	--spectrum-progress-circle-size-medium: 40px;
+	--spectrum-progress-circle-size-large: 80px;
+	--spectrum-progress-circle-thickness-small: 3px;
+	--spectrum-progress-circle-thickness-medium: 4px;
+	--spectrum-progress-circle-thickness-large: 5px;
+	--spectrum-toast-height: 56px;
+	--spectrum-toast-maximum-width: 420px;
+	--spectrum-toast-top-to-workflow-icon: 17px;
+	--spectrum-toast-top-to-text: 16px;
+	--spectrum-toast-bottom-to-text: 19px;
+	--spectrum-action-bar-height: 56px;
+	--spectrum-action-bar-top-to-item-counter: 16px;
+	--spectrum-swatch-size-extra-small: 20px;
+	--spectrum-swatch-size-small: 30px;
+	--spectrum-swatch-size-medium: 40px;
+	--spectrum-swatch-size-large: 50px;
+	--spectrum-progress-bar-thickness-small: 5px;
+	--spectrum-progress-bar-thickness-medium: 8px;
+	--spectrum-progress-bar-thickness-large: 10px;
+	--spectrum-progress-bar-thickness-extra-large: 13px;
+	--spectrum-meter-width: 240px;
+	--spectrum-meter-thickness-small: 5px;
+	--spectrum-meter-thickness-large: 8px;
+	--spectrum-tag-top-to-avatar-small: 5px;
+	--spectrum-tag-top-to-avatar-medium: 7px;
+	--spectrum-tag-top-to-avatar-large: 11px;
+	--spectrum-tag-top-to-cross-icon-small: 10px;
+	--spectrum-tag-top-to-cross-icon-medium: 15px;
+	--spectrum-tag-top-to-cross-icon-large: 19px;
+	--spectrum-popover-top-to-content-area: 5px;
+	--spectrum-menu-item-edge-to-content-not-selected-small: 24px;
+	--spectrum-menu-item-edge-to-content-not-selected-medium: 42px;
+	--spectrum-menu-item-edge-to-content-not-selected-large: 47px;
+	--spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px;
+	--spectrum-menu-item-top-to-disclosure-icon-small: 9px;
+	--spectrum-menu-item-top-to-disclosure-icon-medium: 13px;
+	--spectrum-menu-item-top-to-disclosure-icon-large: 17px;
+	--spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px;
+	--spectrum-menu-item-top-to-selected-icon-small: 9px;
+	--spectrum-menu-item-top-to-selected-icon-medium: 13px;
+	--spectrum-menu-item-top-to-selected-icon-large: 17px;
+	--spectrum-menu-item-top-to-selected-icon-extra-large: 22px;
+	--spectrum-slider-control-height-small: 18px;
+	--spectrum-slider-control-height-medium: 20px;
+	--spectrum-slider-control-height-large: 22px;
+	--spectrum-slider-control-height-extra-large: 26px;
+	--spectrum-slider-handle-size-small: 18px;
+	--spectrum-slider-handle-size-medium: 20px;
+	--spectrum-slider-handle-size-large: 22px;
+	--spectrum-slider-handle-size-extra-large: 26px;
+	--spectrum-slider-handle-border-width-down-small: 7px;
+	--spectrum-slider-handle-border-width-down-medium: 8px;
+	--spectrum-slider-handle-border-width-down-large: 9px;
+	--spectrum-slider-handle-border-width-down-extra-large: 11px;
+	--spectrum-slider-bottom-to-handle-small: 6px;
+	--spectrum-slider-bottom-to-handle-medium: 10px;
+	--spectrum-slider-bottom-to-handle-large: 14px;
+	--spectrum-slider-bottom-to-handle-extra-large: 17px;
+	--spectrum-slider-control-to-field-label-small: 6px;
+	--spectrum-slider-control-to-field-label-medium: 10px;
+	--spectrum-slider-control-to-field-label-large: 14px;
+	--spectrum-slider-control-to-field-label-extra-large: 17px;
+	--spectrum-picker-visual-to-disclosure-icon-small: 9px;
+	--spectrum-picker-visual-to-disclosure-icon-medium: 10px;
+	--spectrum-picker-visual-to-disclosure-icon-large: 11px;
+	--spectrum-picker-visual-to-disclosure-icon-extra-large: 13px;
+	--spectrum-text-area-minimum-width: 140px;
+	--spectrum-text-area-minimum-height: 70px;
+	--spectrum-combo-box-visual-to-field-button-small: 9px;
+	--spectrum-combo-box-visual-to-field-button-medium: 10px;
+	--spectrum-combo-box-visual-to-field-button-large: 11px;
+	--spectrum-combo-box-visual-to-field-button-extra-large: 13px;
+	--spectrum-thumbnail-size-50: 20px;
+	--spectrum-thumbnail-size-75: 22px;
+	--spectrum-thumbnail-size-100: 26px;
+	--spectrum-thumbnail-size-200: 28px;
+	--spectrum-thumbnail-size-300: 32px;
+	--spectrum-thumbnail-size-400: 36px;
+	--spectrum-thumbnail-size-500: 40px;
+	--spectrum-thumbnail-size-600: 46px;
+	--spectrum-thumbnail-size-700: 50px;
+	--spectrum-thumbnail-size-800: 55px;
+	--spectrum-thumbnail-size-900: 62px;
+	--spectrum-thumbnail-size-1000: 70px;
+	--spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs);
+	--spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs);
+	--spectrum-opacity-checkerboard-square-size: 10px;
+	--spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs);
+	--spectrum-contextual-help-body-size: var(--spectrum-body-size-xs);
+	--spectrum-breadcrumbs-height-multiline: 84px;
+	--spectrum-breadcrumbs-top-to-text: 17px;
+	--spectrum-breadcrumbs-top-to-text-compact: 16px;
+	--spectrum-breadcrumbs-top-to-text-multiline: 15px;
+	--spectrum-breadcrumbs-bottom-to-text: 19px;
+	--spectrum-breadcrumbs-bottom-to-text-compact: 19px;
+	--spectrum-breadcrumbs-bottom-to-text-multiline: 10px;
+	--spectrum-breadcrumbs-start-edge-to-text: 9px;
+	--spectrum-breadcrumbs-top-text-to-bottom-text: 11px;
+	--spectrum-breadcrumbs-top-to-separator-icon: 25px;
+	--spectrum-breadcrumbs-top-to-separator-icon-compact: 23px;
+	--spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px;
+	--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px;
+	--spectrum-breadcrumbs-top-to-truncated-menu: 10px;
+	--spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px;
+	--spectrum-avatar-size-50: 20px;
+	--spectrum-avatar-size-75: 22px;
+	--spectrum-avatar-size-100: 26px;
+	--spectrum-avatar-size-200: 28px;
+	--spectrum-avatar-size-300: 32px;
+	--spectrum-avatar-size-400: 36px;
+	--spectrum-avatar-size-500: 40px;
+	--spectrum-avatar-size-600: 46px;
+	--spectrum-avatar-size-700: 50px;
+	--spectrum-alert-banner-minimum-height: 64px;
+	--spectrum-alert-banner-width: 680px;
+	--spectrum-alert-banner-top-to-workflow-icon: 21px;
+	--spectrum-alert-banner-top-to-text: 21px;
+	--spectrum-alert-banner-bottom-to-text: 22px;
+	--spectrum-rating-indicator-width: 22px;
+	--spectrum-rating-indicator-to-icon: 5px;
+	--spectrum-color-area-width: 240px;
+	--spectrum-color-area-minimum-width: 80px;
+	--spectrum-color-area-height: 240px;
+	--spectrum-color-area-minimum-height: 80px;
+	--spectrum-color-wheel-width: 240px;
+	--spectrum-color-wheel-minimum-width: 219px;
+	--spectrum-color-slider-length: 240px;
+	--spectrum-color-slider-minimum-length: 100px;
+	--spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s);
+	--spectrum-illustrated-message-cjk-title-size: var(--spectrum-heading-cjk-size-s);
+	--spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs);
+	--spectrum-coach-mark-width: 216px;
+	--spectrum-coach-mark-minimum-width: 216px;
+	--spectrum-coach-mark-maximum-width: 248px;
+	--spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300);
+	--spectrum-coach-mark-pagination-text-to-bottom-edge: 22px;
+	--spectrum-coach-mark-media-height: 162px;
+	--spectrum-coach-mark-media-minimum-height: 121px;
+	--spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs);
+	--spectrum-coach-mark-body-size: var(--spectrum-body-size-xs);
+	--spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs);
+	--spectrum-accordion-top-to-text-regular-small: 7px;
+	--spectrum-accordion-small-top-to-text-spacious: 12px;
+	--spectrum-accordion-top-to-text-regular-medium: 9px;
+	--spectrum-accordion-top-to-text-spacious-medium: 14px;
+	--spectrum-accordion-top-to-text-compact-large: 7px;
+	--spectrum-accordion-top-to-text-regular-large: 12px;
+	--spectrum-accordion-top-to-text-spacious-large: 14px;
+	--spectrum-accordion-top-to-text-compact-extra-large: 7px;
+	--spectrum-accordion-top-to-text-regular-extra-large: 12px;
+	--spectrum-accordion-top-to-text-spacious-extra-large: 14px;
+	--spectrum-accordion-bottom-to-text-compact-small: 4px;
+	--spectrum-accordion-bottom-to-text-regular-small: 9px;
+	--spectrum-accordion-bottom-to-text-spacious-small: 14px;
+	--spectrum-accordion-bottom-to-text-compact-medium: 8px;
+	--spectrum-accordion-bottom-to-text-regular-medium: 13px;
+	--spectrum-accordion-bottom-to-text-spacious-medium: 18px;
+	--spectrum-accordion-bottom-to-text-compact-large: 9px;
+	--spectrum-accordion-bottom-to-text-regular-large: 14px;
+	--spectrum-accordion-bottom-to-text-spacious-large: 19px;
+	--spectrum-accordion-bottom-to-text-compact-extra-large: 10px;
+	--spectrum-accordion-bottom-to-text-regular-extra-large: 15px;
+	--spectrum-accordion-bottom-to-text-spacious-extra-large: 21px;
+	--spectrum-accordion-minimum-width: 250px;
+	--spectrum-accordion-content-area-top-to-content: 10px;
+	--spectrum-accordion-content-area-bottom-to-content: 20px;
+	--spectrum-color-handle-size: 20px;
+	--spectrum-color-handle-size-key-focus: 40px;
+	--spectrum-table-column-header-row-top-to-text-small: 10px;
+	--spectrum-table-column-header-row-top-to-text-medium: 9px;
+	--spectrum-table-column-header-row-top-to-text-large: 13px;
+	--spectrum-table-column-header-row-top-to-text-extra-large: 16px;
+	--spectrum-table-column-header-row-bottom-to-text-small: 11px;
+	--spectrum-table-column-header-row-bottom-to-text-medium: 10px;
+	--spectrum-table-column-header-row-bottom-to-text-large: 13px;
+	--spectrum-table-column-header-row-bottom-to-text-extra-large: 17px;
+	--spectrum-table-row-height-small-regular: 40px;
+	--spectrum-table-row-height-medium-regular: 50px;
+	--spectrum-table-row-height-large-regular: 60px;
+	--spectrum-table-row-height-extra-large-regular: 70px;
+	--spectrum-table-row-height-small-spacious: 50px;
+	--spectrum-table-row-height-medium-spacious: 60px;
+	--spectrum-table-row-height-large-spacious: 70px;
+	--spectrum-table-row-height-extra-large-spacious: 80px;
+	--spectrum-table-row-top-to-text-small-regular: 10px;
+	--spectrum-table-row-top-to-text-medium-regular: 14px;
+	--spectrum-table-row-top-to-text-large-regular: 18px;
+	--spectrum-table-row-top-to-text-extra-large-regular: 21px;
+	--spectrum-table-row-bottom-to-text-small-regular: 11px;
+	--spectrum-table-row-bottom-to-text-medium-regular: 15px;
+	--spectrum-table-row-bottom-to-text-large-regular: 18px;
+	--spectrum-table-row-bottom-to-text-extra-large-regular: 22px;
+	--spectrum-table-row-top-to-text-small-spacious: 15px;
+	--spectrum-table-row-top-to-text-medium-spacious: 18px;
+	--spectrum-table-row-top-to-text-large-spacious: 23px;
+	--spectrum-table-row-top-to-text-extra-large-spacious: 26px;
+	--spectrum-table-row-bottom-to-text-small-spacious: 16px;
+	--spectrum-table-row-bottom-to-text-medium-spacious: 18px;
+	--spectrum-table-row-bottom-to-text-large-spacious: 23px;
+	--spectrum-table-row-bottom-to-text-extra-large-spacious: 27px;
+	--spectrum-table-checkbox-to-text: 30px;
+	--spectrum-table-header-row-checkbox-to-top-small: 14px;
+	--spectrum-table-header-row-checkbox-to-top-medium: 13px;
+	--spectrum-table-header-row-checkbox-to-top-large: 17px;
+	--spectrum-table-header-row-checkbox-to-top-extra-large: 21px;
+	--spectrum-table-row-checkbox-to-top-small-compact: 9px;
+	--spectrum-table-row-checkbox-to-top-small-regular: 14px;
+	--spectrum-table-row-checkbox-to-top-small-spacious: 19px;
+	--spectrum-table-row-checkbox-to-top-medium-compact: 13px;
+	--spectrum-table-row-checkbox-to-top-medium-regular: 18px;
+	--spectrum-table-row-checkbox-to-top-medium-spacious: 23px;
+	--spectrum-table-row-checkbox-to-top-large-compact: 17px;
+	--spectrum-table-row-checkbox-to-top-large-regular: 22px;
+	--spectrum-table-row-checkbox-to-top-large-spacious: 27px;
+	--spectrum-table-row-checkbox-to-top-extra-large-compact: 21px;
+	--spectrum-table-row-checkbox-to-top-extra-large-regular: 26px;
+	--spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px;
+	--spectrum-table-section-header-row-height-small: 30px;
+	--spectrum-table-section-header-row-height-medium: 40px;
+	--spectrum-table-section-header-row-height-large: 50px;
+	--spectrum-table-section-header-row-height-extra-large: 60px;
+	--spectrum-table-thumbnail-to-top-minimum-small-compact: 5px;
+	--spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px;
+	--spectrum-table-thumbnail-to-top-minimum-large-compact: 9px;
+	--spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px;
+	--spectrum-table-thumbnail-to-top-minimum-small-regular: 6px;
+	--spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px;
+	--spectrum-table-thumbnail-to-top-minimum-large-regular: 10px;
+	--spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px;
+	--spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px;
+	--spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px;
+	--spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px;
+	--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px;
+	--spectrum-tab-item-to-tab-item-horizontal-small: 27px;
+	--spectrum-tab-item-to-tab-item-horizontal-medium: 30px;
+	--spectrum-tab-item-to-tab-item-horizontal-large: 33px;
+	--spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px;
+	--spectrum-tab-item-to-tab-item-vertical-small: 5px;
+	--spectrum-tab-item-to-tab-item-vertical-medium: 5px;
+	--spectrum-tab-item-to-tab-item-vertical-large: 6px;
+	--spectrum-tab-item-to-tab-item-vertical-extra-large: 6px;
+	--spectrum-tab-item-start-to-edge-small: 13px;
+	--spectrum-tab-item-start-to-edge-medium: 15px;
+	--spectrum-tab-item-start-to-edge-large: 17px;
+	--spectrum-tab-item-start-to-edge-extra-large: 19px;
+	--spectrum-tab-item-top-to-text-small: 14px;
+	--spectrum-tab-item-bottom-to-text-small: 15px;
+	--spectrum-tab-item-top-to-text-medium: 18px;
+	--spectrum-tab-item-bottom-to-text-medium: 19px;
+	--spectrum-tab-item-top-to-text-large: 22px;
+	--spectrum-tab-item-bottom-to-text-large: 22px;
+	--spectrum-tab-item-top-to-text-extra-large: 25px;
+	--spectrum-tab-item-bottom-to-text-extra-large: 25px;
+	--spectrum-tab-item-top-to-text-compact-small: 5px;
+	--spectrum-tab-item-bottom-to-text-compact-small: 6px;
+	--spectrum-tab-item-top-to-text-compact-medium: 9px;
+	--spectrum-tab-item-bottom-to-text-compact-medium: 10px;
+	--spectrum-tab-item-top-to-text-compact-large: 12px;
+	--spectrum-tab-item-bottom-to-text-compact-large: 14px;
+	--spectrum-tab-item-top-to-text-compact-extra-large: 15px;
+	--spectrum-tab-item-bottom-to-text-compact-extra-large: 17px;
+	--spectrum-tab-item-top-to-workflow-icon-small: 15px;
+	--spectrum-tab-item-top-to-workflow-icon-medium: 19px;
+	--spectrum-tab-item-top-to-workflow-icon-large: 23px;
+	--spectrum-tab-item-top-to-workflow-icon-extra-large: 26px;
+	--spectrum-tab-item-top-to-workflow-icon-compact-small: 5px;
+	--spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px;
+	--spectrum-tab-item-top-to-workflow-icon-compact-large: 13px;
+	--spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px;
+	--spectrum-tab-item-focus-indicator-gap-small: 9px;
+	--spectrum-tab-item-focus-indicator-gap-medium: 10px;
+	--spectrum-tab-item-focus-indicator-gap-large: 11px;
+	--spectrum-tab-item-focus-indicator-gap-extra-large: 12px;
+	--spectrum-side-navigation-width: 240px;
+	--spectrum-side-navigation-minimum-width: 200px;
+	--spectrum-side-navigation-maximum-width: 300px;
+	--spectrum-side-navigation-second-level-edge-to-text: 30px;
+	--spectrum-side-navigation-third-level-edge-to-text: 45px;
+	--spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px;
+	--spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px;
+	--spectrum-side-navigation-item-to-item: 5px;
+	--spectrum-side-navigation-item-to-header: 30px;
+	--spectrum-side-navigation-header-to-item: 10px;
+	--spectrum-side-navigation-bottom-to-text: 10px;
+	--spectrum-tray-top-to-content-area: 5px;
+	--spectrum-accordion-top-to-text-spacious-small: 12px;
+	--spectrum-drop-shadow-y: 2px;
+	--spectrum-drop-shadow-blur: 6px;
+	--spectrum-text-to-visual-50: 7px;
+	--spectrum-text-to-visual-75: 7px;
+	--spectrum-text-to-visual-100: 8px;
+	--spectrum-text-to-visual-200: 9px;
+	--spectrum-text-to-visual-300: 10px;
+	--spectrum-text-to-visual-400: 11px;
+	--spectrum-text-to-control-75: 11px;
+	--spectrum-text-to-control-100: 13px;
+	--spectrum-text-to-control-200: 14px;
+	--spectrum-text-to-control-300: 16px;
+	--spectrum-component-height-50: 26px;
+	--spectrum-component-height-75: 30px;
+	--spectrum-component-height-100: 40px;
+	--spectrum-component-height-200: 50px;
+	--spectrum-component-height-300: 60px;
+	--spectrum-component-height-400: 70px;
+	--spectrum-component-height-500: 80px;
+	--spectrum-component-pill-edge-to-visual-75: 15px;
+	--spectrum-component-pill-edge-to-visual-100: 17px;
+	--spectrum-component-pill-edge-to-visual-200: 21px;
+	--spectrum-component-pill-edge-to-visual-300: 28px;
+	--spectrum-component-pill-edge-to-visual-only-75: 6px;
+	--spectrum-component-pill-edge-to-visual-only-100: 8px;
+	--spectrum-component-pill-edge-to-visual-only-200: 11px;
+	--spectrum-component-pill-edge-to-visual-only-300: 15px;
+	--spectrum-component-pill-edge-to-text-75: 17px;
+	--spectrum-component-pill-edge-to-text-100: 20px;
+	--spectrum-component-pill-edge-to-text-200: 24px;
+	--spectrum-component-pill-edge-to-text-300: 30px;
+	--spectrum-component-edge-to-visual-50: 9px;
+	--spectrum-component-edge-to-visual-75: 11px;
+	--spectrum-component-edge-to-visual-100: 12px;
+	--spectrum-component-edge-to-visual-200: 15px;
+	--spectrum-component-edge-to-visual-300: 20px;
+	--spectrum-component-edge-to-visual-only-50: 5px;
+	--spectrum-component-edge-to-visual-only-75: 6px;
+	--spectrum-component-edge-to-visual-only-100: 8px;
+	--spectrum-component-edge-to-visual-only-200: 11px;
+	--spectrum-component-edge-to-visual-only-300: 15px;
+	--spectrum-component-edge-to-text-50: 11px;
+	--spectrum-component-edge-to-text-75: 13px;
+	--spectrum-component-edge-to-text-100: 15px;
+	--spectrum-component-edge-to-text-200: 18px;
+	--spectrum-component-edge-to-text-300: 22px;
+	--spectrum-component-top-to-workflow-icon-50: 5px;
+	--spectrum-component-top-to-workflow-icon-75: 6px;
+	--spectrum-component-top-to-workflow-icon-100: 8px;
+	--spectrum-component-top-to-workflow-icon-200: 11px;
+	--spectrum-component-top-to-workflow-icon-300: 15px;
+	--spectrum-component-top-to-text-50: 4px;
+	--spectrum-component-top-to-text-75: 5px;
+	--spectrum-component-top-to-text-100: 8px;
+	--spectrum-component-top-to-text-200: 12px;
+	--spectrum-component-top-to-text-300: 15px;
+	--spectrum-component-bottom-to-text-50: 6px;
+	--spectrum-component-bottom-to-text-75: 6px;
+	--spectrum-component-bottom-to-text-100: 11px;
+	--spectrum-component-bottom-to-text-200: 14px;
+	--spectrum-component-bottom-to-text-300: 18px;
+	--spectrum-component-to-menu-small: 7px;
+	--spectrum-component-to-menu-medium: 8px;
+	--spectrum-component-to-menu-large: 9px;
+	--spectrum-component-to-menu-extra-large: 10px;
+	--spectrum-field-edge-to-disclosure-icon-75: 9px;
+	--spectrum-field-edge-to-disclosure-icon-100: 13px;
+	--spectrum-field-edge-to-disclosure-icon-200: 17px;
+	--spectrum-field-edge-to-disclosure-icon-300: 22px;
+	--spectrum-field-end-edge-to-disclosure-icon-75: 9px;
+	--spectrum-field-end-edge-to-disclosure-icon-100: 13px;
+	--spectrum-field-end-edge-to-disclosure-icon-200: 17px;
+	--spectrum-field-end-edge-to-disclosure-icon-300: 22px;
+	--spectrum-field-top-to-disclosure-icon-75: 9px;
+	--spectrum-field-top-to-disclosure-icon-100: 13px;
+	--spectrum-field-top-to-disclosure-icon-200: 17px;
+	--spectrum-field-top-to-disclosure-icon-300: 22px;
+	--spectrum-field-top-to-alert-icon-small: 5px;
+	--spectrum-field-top-to-alert-icon-medium: 9px;
+	--spectrum-field-top-to-alert-icon-large: 13px;
+	--spectrum-field-top-to-alert-icon-extra-large: 16px;
+	--spectrum-field-top-to-validation-icon-small: 9px;
+	--spectrum-field-top-to-validation-icon-medium: 13px;
+	--spectrum-field-top-to-validation-icon-large: 17px;
+	--spectrum-field-top-to-validation-icon-extra-large: 22px;
+	--spectrum-field-top-to-progress-circle-small: 7px;
+	--spectrum-field-top-to-progress-circle-medium: 12px;
+	--spectrum-field-top-to-progress-circle-large: 17px;
+	--spectrum-field-top-to-progress-circle-extra-large: 22px;
+	--spectrum-field-edge-to-alert-icon-small: 11px;
+	--spectrum-field-edge-to-alert-icon-medium: 15px;
+	--spectrum-field-edge-to-alert-icon-large: 19px;
+	--spectrum-field-edge-to-alert-icon-extra-large: 22px;
+	--spectrum-field-edge-to-validation-icon-small: 11px;
+	--spectrum-field-edge-to-validation-icon-medium: 15px;
+	--spectrum-field-edge-to-validation-icon-large: 19px;
+	--spectrum-field-edge-to-validation-icon-extra-large: 22px;
+	--spectrum-field-text-to-alert-icon-small: 10px;
+	--spectrum-field-text-to-alert-icon-medium: 15px;
+	--spectrum-field-text-to-alert-icon-large: 19px;
+	--spectrum-field-text-to-alert-icon-extra-large: 22px;
+	--spectrum-field-text-to-validation-icon-small: 10px;
+	--spectrum-field-text-to-validation-icon-medium: 15px;
+	--spectrum-field-text-to-validation-icon-large: 19px;
+	--spectrum-field-text-to-validation-icon-extra-large: 22px;
+	--spectrum-field-width: 240px;
+	--spectrum-character-count-to-field-quiet-small: -4px;
+	--spectrum-character-count-to-field-quiet-medium: -4px;
+	--spectrum-character-count-to-field-quiet-large: -4px;
+	--spectrum-character-count-to-field-quiet-extra-large: -5px;
+	--spectrum-side-label-character-count-to-field: 15px;
+	--spectrum-side-label-character-count-top-margin-small: 5px;
+	--spectrum-side-label-character-count-top-margin-medium: 10px;
+	--spectrum-side-label-character-count-top-margin-large: 14px;
+	--spectrum-side-label-character-count-top-margin-extra-large: 18px;
+	--spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px;
+	--spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px;
+	--spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px;
+	--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px;
+	--spectrum-navigational-indicator-top-to-back-icon-small: 7px;
+	--spectrum-navigational-indicator-top-to-back-icon-medium: 12px;
+	--spectrum-navigational-indicator-top-to-back-icon-large: 16px;
+	--spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px;
+	--spectrum-color-control-track-width: 30px;
+	--spectrum-font-size-50: 13px;
+	--spectrum-font-size-75: 15px;
+	--spectrum-font-size-100: 17px;
+	--spectrum-font-size-200: 19px;
+	--spectrum-font-size-300: 22px;
+	--spectrum-font-size-400: 24px;
+	--spectrum-font-size-500: 27px;
+	--spectrum-font-size-600: 31px;
+	--spectrum-font-size-700: 34px;
+	--spectrum-font-size-800: 39px;
+	--spectrum-font-size-900: 44px;
+	--spectrum-font-size-1000: 49px;
+	--spectrum-font-size-1100: 55px;
+	--spectrum-font-size-1200: 62px;
+	--spectrum-font-size-1300: 70px;
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--scale: large;
+	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
+	--spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
+	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
+	--spectrum-assetcard-focus-ring-border-radius: 9px;
+	--spectrum-assetcard-selectionindicator-margin: 15px;
+	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
+	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
+	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
+	--spectrum-button-top-to-text-small: 6px;
+	--spectrum-button-bottom-to-text-small: 5px;
+	--spectrum-button-top-to-text-medium: 9px;
+	--spectrum-button-bottom-to-text-medium: 10px;
+	--spectrum-button-top-to-text-large: 12px;
+	--spectrum-button-bottom-to-text-large: 13px;
+	--spectrum-button-top-to-text-extra-large: 16px;
+	--spectrum-button-bottom-to-text-extra-large: 17px;
+	--spectrum-coach-indicator-gap: 8px;
+	--spectrum-coach-indicator-ring-diameter: 20px;
+	--spectrum-coach-indicator-quiet-ring-diameter: 10px;
+	--spectrum-coachmark-buttongroup-display: none;
+	--spectrum-coachmark-buttongroup-mobile-display: flex;
+	--spectrum-coachmark-menu-display: none;
+	--spectrum-coachmark-menu-mobile-display: inline-flex;
+	--spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
+	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
+	--spectrum-colorwheel-colorarea-container-size: 182px;
+	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
+	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
+	--spectrum-datepicker-initial-width: 160px;
+	--spectrum-datepicker-generic-padding: 15px;
+	--spectrum-datepicker-dash-line-height: 30px;
+	--spectrum-datepicker-width-quiet-first: 90px;
+	--spectrum-datepicker-width-quiet-second: 20px;
+	--spectrum-datepicker-datetime-width-first: 45px;
+	--spectrum-datepicker-invalid-icon-to-button: 10px;
+	--spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
+	--spectrum-datepicker-input-datetime-width: 30px;
+	--spectrum-dial-border-radius: 20px;
+	--spectrum-dial-handle-position: 10px;
+	--spectrum-dial-handle-block-margin: 20px;
+	--spectrum-dial-handle-inline-margin: 20px;
+	--spectrum-dial-controls-margin: 10px;
+	--spectrum-dial-label-gap-y: 6px;
+	--spectrum-dial-label-container-top-to-text: 5px;
+	--spectrum-dialog-confirm-entry-animation-distance: 25px;
+	--spectrum-dialog-confirm-hero-height: 160px;
+	--spectrum-dialog-confirm-border-radius: 5px;
+	--spectrum-dialog-confirm-title-text-size: 19px;
+	--spectrum-dialog-confirm-description-text-size: 15px;
+	--spectrum-dialog-confirm-padding-grid: 24px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
+	--spectrum-menu-item-checkmark-height-small: 12px;
+	--spectrum-menu-item-checkmark-height-medium: 14px;
+	--spectrum-menu-item-checkmark-height-large: 16px;
+	--spectrum-menu-item-checkmark-height-extra-large: 16px;
+	--spectrum-menu-item-checkmark-width-small: 12px;
+	--spectrum-menu-item-checkmark-width-medium: 14px;
+	--spectrum-menu-item-checkmark-width-large: 16px;
+	--spectrum-menu-item-checkmark-width-extra-large: 16px;
+	--spectrum-pagination-textfield-width: 60px;
+	--spectrum-pagination-item-inline-spacing: 6px;
+	--spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+	--spectrum-slider-tick-mark-height: 13px;
+	--spectrum-slider-ramp-track-height: 20px;
+	--spectrum-treeview-item-indentation-medium: 20px;
+	--spectrum-treeview-item-indentation-small: 15px;
+	--spectrum-treeview-item-indentation-large: 25px;
+	--spectrum-treeview-item-indentation-extra-large: 30px;
+	--spectrum-treeview-indicator-inset-block-start: 6px;
+	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
+	--spectrum-tooltip-animation-distance: 5px;
+	--spectrum-ui-icon-medium-display: none;
+	--spectrum-ui-icon-large-display: block;
+	--spectrum-well-border-radius: 5px;
+	--spectrum-well-margin-top: 5px;
+	--spectrum-well-min-width: 300px;
+	--spectrum-well-padding: 20px;
+	--spectrum-workflow-icon-size-xxl: 40px;
+	--spectrum-workflow-icon-size-xxs: 15px;
+}
+.spectrum--light {
+	--spectrum-overlay-opacity: 0.4;
+	--spectrum-background-layer-2-color: var(--spectrum-gray-25);
+	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-700);
+	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800);
+	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800);
+	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-800);
+	--spectrum-accent-background-color-default: var(--spectrum-accent-color-900);
+	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000);
+	--spectrum-accent-background-color-down: var(--spectrum-accent-color-1000);
+	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-1000);
+	--spectrum-informative-background-color-default: var(--spectrum-informative-color-900);
+	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-1000);
+	--spectrum-informative-background-color-down: var(--spectrum-informative-color-1000);
+	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-1000);
+	--spectrum-negative-background-color-default: var(--spectrum-negative-color-900);
+	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-1000);
+	--spectrum-negative-background-color-down: var(--spectrum-negative-color-1000);
+	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-1000);
+	--spectrum-positive-background-color-default: var(--spectrum-positive-color-900);
+	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-1000);
+	--spectrum-positive-background-color-down: var(--spectrum-positive-color-1000);
+	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-1000);
+	--spectrum-notice-background-color-default: var(--spectrum-notice-color-600);
+	--spectrum-gray-background-color-default: var(--spectrum-gray-700);
+	--spectrum-red-background-color-default: var(--spectrum-red-900);
+	--spectrum-orange-background-color-default: var(--spectrum-orange-600);
+	--spectrum-yellow-background-color-default: var(--spectrum-yellow-400);
+	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-500);
+	--spectrum-celery-background-color-default: var(--spectrum-celery-600);
+	--spectrum-green-background-color-default: var(--spectrum-green-900);
+	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900);
+	--spectrum-cyan-background-color-default: var(--spectrum-cyan-900);
+	--spectrum-blue-background-color-default: var(--spectrum-blue-900);
+	--spectrum-indigo-background-color-default: var(--spectrum-indigo-900);
+	--spectrum-purple-background-color-default: var(--spectrum-purple-900);
+	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900);
+	--spectrum-magenta-background-color-default: var(--spectrum-magenta-900);
+	--spectrum-neutral-visual-color: var(--spectrum-gray-500);
+	--spectrum-accent-visual-color: var(--spectrum-accent-color-800);
+	--spectrum-informative-visual-color: var(--spectrum-informative-color-800);
+	--spectrum-negative-visual-color: var(--spectrum-negative-color-800);
+	--spectrum-notice-visual-color: var(--spectrum-notice-color-800);
+	--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
+	--spectrum-gray-visual-color: var(--spectrum-gray-500);
+	--spectrum-red-visual-color: var(--spectrum-red-800);
+	--spectrum-orange-visual-color: var(--spectrum-orange-700);
+	--spectrum-yellow-visual-color: var(--spectrum-yellow-600);
+	--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600);
+	--spectrum-celery-visual-color: var(--spectrum-celery-700);
+	--spectrum-green-visual-color: var(--spectrum-green-700);
+	--spectrum-seafoam-visual-color: var(--spectrum-seafoam-700);
+	--spectrum-cyan-visual-color: var(--spectrum-cyan-600);
+	--spectrum-blue-visual-color: var(--spectrum-blue-800);
+	--spectrum-indigo-visual-color: var(--spectrum-indigo-800);
+	--spectrum-purple-visual-color: var(--spectrum-purple-800);
+	--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800);
+	--spectrum-magenta-visual-color: var(--spectrum-magenta-800);
+	--spectrum-background-elevated-color: var(--spectrum-gray-25);
+	--spectrum-background-pasteboard-color: var(--spectrum-gray-100);
+	--spectrum-brown-visual-color: var(--spectrum-brown-800);
+	--spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800);
+	--spectrum-pink-visual-color: var(--spectrum-pink-800);
+	--spectrum-silver-visual-color: var(--spectrum-silver-800);
+	--spectrum-turquoise-visual-color: var(--spectrum-turquoise-800);
+	--spectrum-brown-background-color-default: var(--spectrum-brown-900);
+	--spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900);
+	--spectrum-pink-background-color-default: var(--spectrum-pink-900);
+	--spectrum-silver-background-color-default: var(--spectrum-silver-900);
+	--spectrum-turquoise-background-color-default: var(--spectrum-turquoise-900);
+	--spectrum-drop-shadow-color-100-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-100-opacity: 0.12;
+	--spectrum-drop-shadow-color-100: rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+	--spectrum-drop-shadow-color-200-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-200-opacity: 0.16;
+	--spectrum-drop-shadow-color-200: rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
+	--spectrum-drop-shadow-color-300-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-300-opacity: 0.2;
+	--spectrum-drop-shadow-color-300: rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity));
+	--spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-100);
+	--spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100);
+	--spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200);
+	--spectrum-green-subtle-background-color-default: var(--spectrum-green-200);
+	--spectrum-orange-subtle-background-color-default: var(--spectrum-orange-200);
+	--spectrum-red-subtle-background-color-default: var(--spectrum-red-200);
+	--spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200);
+	--spectrum-cinnamon-subtle-background-color-default: var(--spectrum-cinnamon-200);
+	--spectrum-celery-subtle-background-color-default: var(--spectrum-celery-200);
+	--spectrum-chartreuse-subtle-background-color-default: var(--spectrum-chartreuse-200);
+	--spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200);
+	--spectrum-fuchsia-subtle-background-color-default: var(--spectrum-fuchsia-200);
+	--spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-200);
+	--spectrum-magenta-subtle-background-color-default: var(--spectrum-magenta-200);
+	--spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200);
+	--spectrum-purple-subtle-background-color-default: var(--spectrum-purple-200);
+	--spectrum-seafoam-subtle-background-color-default: var(--spectrum-seafoam-200);
+	--spectrum-silver-subtle-background-color-default: var(--spectrum-silver-200);
+	--spectrum-turquoise-subtle-background-color-default: var(--spectrum-turquoise-200);
+	--spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-200);
+	--spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200);
+	--spectrum-white-rgb: 255, 255, 255;
+	--spectrum-white: rgba(var(--spectrum-white-rgb));
+	--spectrum-transparent-white-25-rgb: 255, 255, 255;
+	--spectrum-transparent-white-25-opacity: 0;
+	--spectrum-transparent-white-25: rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity));
+	--spectrum-transparent-white-50-rgb: 255, 255, 255;
+	--spectrum-transparent-white-50-opacity: 0.04;
+	--spectrum-transparent-white-50: rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity));
+	--spectrum-transparent-white-75-rgb: 255, 255, 255;
+	--spectrum-transparent-white-75-opacity: 0.07;
+	--spectrum-transparent-white-75: rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity));
+	--spectrum-transparent-white-100-rgb: 255, 255, 255;
+	--spectrum-transparent-white-100-opacity: 0.11;
+	--spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+	--spectrum-transparent-white-200-rgb: 255, 255, 255;
+	--spectrum-transparent-white-200-opacity: 0.14;
+	--spectrum-transparent-white-200: rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
+	--spectrum-transparent-white-300-rgb: 255, 255, 255;
+	--spectrum-transparent-white-300-opacity: 0.17;
+	--spectrum-transparent-white-300: rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
+	--spectrum-transparent-white-400-rgb: 255, 255, 255;
+	--spectrum-transparent-white-400-opacity: 0.21;
+	--spectrum-transparent-white-400: rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
+	--spectrum-transparent-white-500-rgb: 255, 255, 255;
+	--spectrum-transparent-white-500-opacity: 0.39;
+	--spectrum-transparent-white-500: rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
+	--spectrum-transparent-white-600-rgb: 255, 255, 255;
+	--spectrum-transparent-white-600-opacity: 0.51;
+	--spectrum-transparent-white-600: rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
+	--spectrum-transparent-white-700-rgb: 255, 255, 255;
+	--spectrum-transparent-white-700-opacity: 0.66;
+	--spectrum-transparent-white-700: rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
+	--spectrum-transparent-white-800-rgb: 255, 255, 255;
+	--spectrum-transparent-white-800-opacity: 0.85;
+	--spectrum-transparent-white-800: rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
+	--spectrum-transparent-white-900-rgb: 255, 255, 255;
+	--spectrum-transparent-white-900-opacity: 0.94;
+	--spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity));
+	--spectrum-transparent-white-1000-rgb: 255, 255, 255;
+	--spectrum-transparent-white-1000: rgba(var(--spectrum-transparent-white-1000-rgb));
+	--spectrum-transparent-black-25-rgb: 0, 0, 0;
+	--spectrum-transparent-black-25-opacity: 0;
+	--spectrum-transparent-black-25: rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity));
+	--spectrum-transparent-black-50-rgb: 0, 0, 0;
+	--spectrum-transparent-black-50-opacity: 0.03;
+	--spectrum-transparent-black-50: rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity));
+	--spectrum-transparent-black-75-rgb: 0, 0, 0;
+	--spectrum-transparent-black-75-opacity: 0.05;
+	--spectrum-transparent-black-75: rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity));
+	--spectrum-transparent-black-100-rgb: 0, 0, 0;
+	--spectrum-transparent-black-100-opacity: 0.09;
+	--spectrum-transparent-black-100: rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
+	--spectrum-transparent-black-200-rgb: 0, 0, 0;
+	--spectrum-transparent-black-200-opacity: 0.12;
+	--spectrum-transparent-black-200: rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
+	--spectrum-transparent-black-300-rgb: 0, 0, 0;
+	--spectrum-transparent-black-300-opacity: 0.15;
+	--spectrum-transparent-black-300: rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
+	--spectrum-transparent-black-400-rgb: 0, 0, 0;
+	--spectrum-transparent-black-400-opacity: 0.22;
+	--spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
+	--spectrum-transparent-black-500-rgb: 0, 0, 0;
+	--spectrum-transparent-black-500-opacity: 0.44;
+	--spectrum-transparent-black-500: rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
+	--spectrum-transparent-black-600-rgb: 0, 0, 0;
+	--spectrum-transparent-black-600-opacity: 0.56;
+	--spectrum-transparent-black-600: rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
+	--spectrum-transparent-black-700-rgb: 0, 0, 0;
+	--spectrum-transparent-black-700-opacity: 0.69;
+	--spectrum-transparent-black-700: rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
+	--spectrum-transparent-black-800-rgb: 0, 0, 0;
+	--spectrum-transparent-black-800-opacity: 0.84;
+	--spectrum-transparent-black-800: rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
+	--spectrum-transparent-black-900-rgb: 0, 0, 0;
+	--spectrum-transparent-black-900-opacity: 0.93;
+	--spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity));
+	--spectrum-gray-25-rgb: 255, 255, 255;
+	--spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb));
+	--spectrum-gray-50-rgb: 248, 248, 248;
+	--spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
+	--spectrum-gray-75-rgb: 243, 243, 243;
+	--spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
+	--spectrum-gray-100-rgb: 233, 233, 233;
+	--spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
+	--spectrum-gray-200-rgb: 225, 225, 225;
+	--spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
+	--spectrum-gray-300-rgb: 218, 218, 218;
+	--spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
+	--spectrum-gray-400-rgb: 198, 198, 198;
+	--spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
+	--spectrum-gray-500-rgb: 143, 143, 143;
+	--spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
+	--spectrum-gray-600-rgb: 113, 113, 113;
+	--spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
+	--spectrum-gray-700-rgb: 80, 80, 80;
+	--spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
+	--spectrum-gray-800-rgb: 41, 41, 41;
+	--spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
+	--spectrum-gray-900-rgb: 19, 19, 19;
+	--spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
+	--spectrum-gray-1000-rgb: 0, 0, 0;
+	--spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb));
+	--spectrum-blue-100-rgb: 245, 249, 255;
+	--spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
+	--spectrum-blue-200-rgb: 229, 240, 254;
+	--spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
+	--spectrum-blue-300-rgb: 203, 226, 254;
+	--spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
+	--spectrum-blue-400-rgb: 172, 207, 253;
+	--spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
+	--spectrum-blue-500-rgb: 142, 185, 252;
+	--spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
+	--spectrum-blue-600-rgb: 114, 158, 253;
+	--spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
+	--spectrum-blue-700-rgb: 93, 137, 255;
+	--spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
+	--spectrum-blue-800-rgb: 75, 117, 255;
+	--spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
+	--spectrum-blue-900-rgb: 59, 99, 251;
+	--spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
+	--spectrum-blue-1000-rgb: 39, 77, 234;
+	--spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
+	--spectrum-blue-1100-rgb: 29, 62, 207;
+	--spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
+	--spectrum-blue-1200-rgb: 21, 50, 173;
+	--spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
+	--spectrum-blue-1300-rgb: 16, 40, 140;
+	--spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
+	--spectrum-blue-1400-rgb: 12, 31, 105;
+	--spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
+	--spectrum-blue-1500-rgb: 14, 24, 67;
+	--spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb));
+	--spectrum-blue-1600-rgb: 7, 11, 30;
+	--spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb));
+	--spectrum-red-100-rgb: 255, 246, 245;
+	--spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
+	--spectrum-red-200-rgb: 255, 235, 232;
+	--spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
+	--spectrum-red-300-rgb: 255, 214, 209;
+	--spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
+	--spectrum-red-400-rgb: 255, 188, 180;
+	--spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
+	--spectrum-red-500-rgb: 255, 157, 145;
+	--spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
+	--spectrum-red-600-rgb: 255, 118, 101;
+	--spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
+	--spectrum-red-700-rgb: 255, 81, 61;
+	--spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
+	--spectrum-red-800-rgb: 240, 56, 35;
+	--spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
+	--spectrum-red-900-rgb: 215, 50, 32;
+	--spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
+	--spectrum-red-1000-rgb: 183, 40, 24;
+	--spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
+	--spectrum-red-1100-rgb: 156, 33, 19;
+	--spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
+	--spectrum-red-1200-rgb: 129, 27, 14;
+	--spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
+	--spectrum-red-1300-rgb: 104, 21, 10;
+	--spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
+	--spectrum-red-1400-rgb: 80, 16, 6;
+	--spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
+	--spectrum-red-1500-rgb: 59, 11, 4;
+	--spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb));
+	--spectrum-red-1600-rgb: 29, 5, 2;
+	--spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb));
+	--spectrum-orange-100-rgb: 255, 246, 231;
+	--spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
+	--spectrum-orange-200-rgb: 255, 236, 207;
+	--spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
+	--spectrum-orange-300-rgb: 255, 218, 158;
+	--spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
+	--spectrum-orange-400-rgb: 255, 193, 94;
+	--spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
+	--spectrum-orange-500-rgb: 255, 162, 19;
+	--spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
+	--spectrum-orange-600-rgb: 252, 125, 0;
+	--spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
+	--spectrum-orange-700-rgb: 232, 106, 0;
+	--spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
+	--spectrum-orange-800-rgb: 212, 91, 0;
+	--spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
+	--spectrum-orange-900-rgb: 194, 78, 0;
+	--spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
+	--spectrum-orange-1000-rgb: 167, 62, 0;
+	--spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
+	--spectrum-orange-1100-rgb: 144, 51, 0;
+	--spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
+	--spectrum-orange-1200-rgb: 118, 41, 0;
+	--spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
+	--spectrum-orange-1300-rgb: 95, 32, 0;
+	--spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
+	--spectrum-orange-1400-rgb: 73, 24, 0;
+	--spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
+	--spectrum-orange-1500-rgb: 52, 18, 0;
+	--spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb));
+	--spectrum-orange-1600-rgb: 25, 8, 0;
+	--spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb));
+	--spectrum-yellow-100-rgb: 255, 248, 204;
+	--spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
+	--spectrum-yellow-200-rgb: 255, 241, 151;
+	--spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
+	--spectrum-yellow-300-rgb: 255, 222, 44;
+	--spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
+	--spectrum-yellow-400-rgb: 245, 199, 0;
+	--spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
+	--spectrum-yellow-500-rgb: 230, 175, 0;
+	--spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
+	--spectrum-yellow-600-rgb: 210, 149, 0;
+	--spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
+	--spectrum-yellow-700-rgb: 193, 131, 0;
+	--spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
+	--spectrum-yellow-800-rgb: 175, 116, 0;
+	--spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
+	--spectrum-yellow-900-rgb: 158, 102, 0;
+	--spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
+	--spectrum-yellow-1000-rgb: 134, 85, 0;
+	--spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
+	--spectrum-yellow-1100-rgb: 114, 72, 0;
+	--spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
+	--spectrum-yellow-1200-rgb: 93, 59, 0;
+	--spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
+	--spectrum-yellow-1300-rgb: 75, 47, 0;
+	--spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
+	--spectrum-yellow-1400-rgb: 56, 35, 0;
+	--spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
+	--spectrum-yellow-1500-rgb: 40, 25, 0;
+	--spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb));
+	--spectrum-yellow-1600-rgb: 18, 11, 0;
+	--spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb));
+	--spectrum-chartreuse-100-rgb: 246, 251, 222;
+	--spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
+	--spectrum-chartreuse-200-rgb: 234, 246, 173;
+	--spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
+	--spectrum-chartreuse-300-rgb: 208, 236, 70;
+	--spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
+	--spectrum-chartreuse-400-rgb: 182, 219, 0;
+	--spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
+	--spectrum-chartreuse-500-rgb: 163, 196, 0;
+	--spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
+	--spectrum-chartreuse-600-rgb: 143, 172, 0;
+	--spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
+	--spectrum-chartreuse-700-rgb: 128, 153, 0;
+	--spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
+	--spectrum-chartreuse-800-rgb: 114, 137, 0;
+	--spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
+	--spectrum-chartreuse-900-rgb: 102, 122, 0;
+	--spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
+	--spectrum-chartreuse-1000-rgb: 86, 103, 0;
+	--spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
+	--spectrum-chartreuse-1100-rgb: 73, 87, 0;
+	--spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
+	--spectrum-chartreuse-1200-rgb: 60, 71, 0;
+	--spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
+	--spectrum-chartreuse-1300-rgb: 47, 57, 0;
+	--spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
+	--spectrum-chartreuse-1400-rgb: 35, 43, 0;
+	--spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
+	--spectrum-chartreuse-1500-rgb: 25, 30, 0;
+	--spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb));
+	--spectrum-chartreuse-1600-rgb: 11, 14, 0;
+	--spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb));
+	--spectrum-celery-100-rgb: 235, 255, 220;
+	--spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
+	--spectrum-celery-200-rgb: 197, 255, 156;
+	--spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
+	--spectrum-celery-300-rgb: 157, 247, 92;
+	--spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
+	--spectrum-celery-400-rgb: 129, 228, 58;
+	--spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
+	--spectrum-celery-500-rgb: 110, 206, 42;
+	--spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
+	--spectrum-celery-600-rgb: 93, 180, 31;
+	--spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
+	--spectrum-celery-700-rgb: 82, 161, 25;
+	--spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
+	--spectrum-celery-800-rgb: 72, 144, 20;
+	--spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
+	--spectrum-celery-900-rgb: 64, 129, 17;
+	--spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
+	--spectrum-celery-1000-rgb: 52, 109, 12;
+	--spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
+	--spectrum-celery-1100-rgb: 44, 92, 9;
+	--spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
+	--spectrum-celery-1200-rgb: 35, 75, 6;
+	--spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
+	--spectrum-celery-1300-rgb: 27, 60, 3;
+	--spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
+	--spectrum-celery-1400-rgb: 19, 46, 0;
+	--spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
+	--spectrum-celery-1500-rgb: 12, 33, 0;
+	--spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb));
+	--spectrum-celery-1600-rgb: 4, 15, 0;
+	--spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb));
+	--spectrum-green-100-rgb: 237, 252, 241;
+	--spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
+	--spectrum-green-200-rgb: 215, 247, 225;
+	--spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
+	--spectrum-green-300-rgb: 173, 238, 197;
+	--spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
+	--spectrum-green-400-rgb: 107, 227, 162;
+	--spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
+	--spectrum-green-500-rgb: 43, 209, 125;
+	--spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
+	--spectrum-green-600-rgb: 18, 184, 103;
+	--spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
+	--spectrum-green-700-rgb: 11, 164, 93;
+	--spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
+	--spectrum-green-800-rgb: 7, 147, 85;
+	--spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
+	--spectrum-green-900-rgb: 5, 131, 78;
+	--spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
+	--spectrum-green-1000-rgb: 3, 110, 69;
+	--spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
+	--spectrum-green-1100-rgb: 2, 93, 60;
+	--spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
+	--spectrum-green-1200-rgb: 1, 76, 52;
+	--spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
+	--spectrum-green-1300-rgb: 0, 61, 44;
+	--spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
+	--spectrum-green-1400-rgb: 0, 46, 34;
+	--spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
+	--spectrum-green-1500-rgb: 0, 33, 25;
+	--spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb));
+	--spectrum-green-1600-rgb: 0, 15, 12;
+	--spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb));
+	--spectrum-seafoam-100-rgb: 235, 251, 246;
+	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
+	--spectrum-seafoam-200-rgb: 211, 246, 234;
+	--spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
+	--spectrum-seafoam-300-rgb: 169, 237, 216;
+	--spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
+	--spectrum-seafoam-400-rgb: 92, 225, 194;
+	--spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
+	--spectrum-seafoam-500-rgb: 16, 207, 169;
+	--spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
+	--spectrum-seafoam-600-rgb: 13, 181, 149;
+	--spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
+	--spectrum-seafoam-700-rgb: 11, 162, 134;
+	--spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
+	--spectrum-seafoam-800-rgb: 9, 144, 120;
+	--spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
+	--spectrum-seafoam-900-rgb: 7, 129, 109;
+	--spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
+	--spectrum-seafoam-1000-rgb: 5, 108, 92;
+	--spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
+	--spectrum-seafoam-1100-rgb: 3, 92, 80;
+	--spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
+	--spectrum-seafoam-1200-rgb: 1, 75, 67;
+	--spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
+	--spectrum-seafoam-1300-rgb: 0, 60, 54;
+	--spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
+	--spectrum-seafoam-1400-rgb: 0, 46, 40;
+	--spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
+	--spectrum-seafoam-1500-rgb: 0, 33, 29;
+	--spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb));
+	--spectrum-seafoam-1600-rgb: 0, 15, 14;
+	--spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb));
+	--spectrum-cyan-100-rgb: 238, 250, 254;
+	--spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
+	--spectrum-cyan-200-rgb: 217, 244, 253;
+	--spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
+	--spectrum-cyan-300-rgb: 183, 231, 252;
+	--spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
+	--spectrum-cyan-400-rgb: 138, 213, 255;
+	--spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
+	--spectrum-cyan-500-rgb: 92, 192, 255;
+	--spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
+	--spectrum-cyan-600-rgb: 48, 167, 254;
+	--spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
+	--spectrum-cyan-700-rgb: 29, 149, 231;
+	--spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
+	--spectrum-cyan-800-rgb: 18, 134, 205;
+	--spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
+	--spectrum-cyan-900-rgb: 11, 120, 179;
+	--spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
+	--spectrum-cyan-1000-rgb: 4, 102, 145;
+	--spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
+	--spectrum-cyan-1100-rgb: 0, 87, 121;
+	--spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
+	--spectrum-cyan-1200-rgb: 0, 71, 98;
+	--spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
+	--spectrum-cyan-1300-rgb: 0, 57, 78;
+	--spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
+	--spectrum-cyan-1400-rgb: 0, 43, 59;
+	--spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
+	--spectrum-cyan-1500-rgb: 0, 31, 43;
+	--spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb));
+	--spectrum-cyan-1600-rgb: 0, 14, 20;
+	--spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb));
+	--spectrum-indigo-100-rgb: 247, 248, 255;
+	--spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
+	--spectrum-indigo-200-rgb: 235, 238, 255;
+	--spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
+	--spectrum-indigo-300-rgb: 216, 222, 255;
+	--spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
+	--spectrum-indigo-400-rgb: 192, 201, 255;
+	--spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
+	--spectrum-indigo-500-rgb: 167, 178, 255;
+	--spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
+	--spectrum-indigo-600-rgb: 145, 151, 254;
+	--spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
+	--spectrum-indigo-700-rgb: 132, 128, 254;
+	--spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
+	--spectrum-indigo-800-rgb: 122, 106, 253;
+	--spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
+	--spectrum-indigo-900-rgb: 113, 85, 250;
+	--spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
+	--spectrum-indigo-1000-rgb: 99, 56, 238;
+	--spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
+	--spectrum-indigo-1100-rgb: 84, 36, 219;
+	--spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
+	--spectrum-indigo-1200-rgb: 69, 19, 191;
+	--spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
+	--spectrum-indigo-1300-rgb: 55, 6, 160;
+	--spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
+	--spectrum-indigo-1400-rgb: 42, 0, 129;
+	--spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
+	--spectrum-indigo-1500-rgb: 31, 0, 98;
+	--spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb));
+	--spectrum-indigo-1600-rgb: 17, 0, 54;
+	--spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb));
+	--spectrum-purple-100-rgb: 251, 247, 254;
+	--spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
+	--spectrum-purple-200-rgb: 244, 235, 252;
+	--spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
+	--spectrum-purple-300-rgb: 235, 218, 249;
+	--spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
+	--spectrum-purple-400-rgb: 221, 193, 246;
+	--spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
+	--spectrum-purple-500-rgb: 208, 167, 243;
+	--spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
+	--spectrum-purple-600-rgb: 191, 138, 238;
+	--spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
+	--spectrum-purple-700-rgb: 178, 114, 235;
+	--spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
+	--spectrum-purple-800-rgb: 166, 92, 231;
+	--spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
+	--spectrum-purple-900-rgb: 154, 71, 226;
+	--spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
+	--spectrum-purple-1000-rgb: 134, 40, 217;
+	--spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
+	--spectrum-purple-1100-rgb: 115, 13, 204;
+	--spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
+	--spectrum-purple-1200-rgb: 93, 0, 177;
+	--spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
+	--spectrum-purple-1300-rgb: 75, 0, 144;
+	--spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
+	--spectrum-purple-1400-rgb: 59, 0, 111;
+	--spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
+	--spectrum-purple-1500-rgb: 44, 0, 84;
+	--spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb));
+	--spectrum-purple-1600-rgb: 23, 0, 45;
+	--spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb));
+	--spectrum-fuchsia-100-rgb: 254, 246, 255;
+	--spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
+	--spectrum-fuchsia-200-rgb: 253, 233, 255;
+	--spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
+	--spectrum-fuchsia-300-rgb: 250, 211, 255;
+	--spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
+	--spectrum-fuchsia-400-rgb: 247, 181, 255;
+	--spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
+	--spectrum-fuchsia-500-rgb: 243, 147, 255;
+	--spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
+	--spectrum-fuchsia-600-rgb: 236, 105, 255;
+	--spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
+	--spectrum-fuchsia-700-rgb: 223, 77, 245;
+	--spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
+	--spectrum-fuchsia-800-rgb: 200, 68, 220;
+	--spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
+	--spectrum-fuchsia-900-rgb: 181, 57, 200;
+	--spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
+	--spectrum-fuchsia-1000-rgb: 156, 40, 175;
+	--spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
+	--spectrum-fuchsia-1100-rgb: 135, 27, 154;
+	--spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
+	--spectrum-fuchsia-1200-rgb: 113, 15, 131;
+	--spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
+	--spectrum-fuchsia-1300-rgb: 92, 4, 109;
+	--spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
+	--spectrum-fuchsia-1400-rgb: 72, 0, 88;
+	--spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
+	--spectrum-fuchsia-1500-rgb: 54, 0, 66;
+	--spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb));
+	--spectrum-fuchsia-1600-rgb: 29, 0, 35;
+	--spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb));
+	--spectrum-magenta-100-rgb: 255, 245, 248;
+	--spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
+	--spectrum-magenta-200-rgb: 255, 232, 240;
+	--spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
+	--spectrum-magenta-300-rgb: 255, 213, 227;
+	--spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
+	--spectrum-magenta-400-rgb: 255, 185, 208;
+	--spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
+	--spectrum-magenta-500-rgb: 255, 152, 187;
+	--spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
+	--spectrum-magenta-600-rgb: 255, 112, 159;
+	--spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
+	--spectrum-magenta-700-rgb: 255, 72, 133;
+	--spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
+	--spectrum-magenta-800-rgb: 240, 45, 110;
+	--spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
+	--spectrum-magenta-900-rgb: 217, 35, 97;
+	--spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
+	--spectrum-magenta-1000-rgb: 186, 22, 80;
+	--spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
+	--spectrum-magenta-1100-rgb: 163, 5, 62;
+	--spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
+	--spectrum-magenta-1200-rgb: 136, 0, 51;
+	--spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
+	--spectrum-magenta-1300-rgb: 111, 0, 40;
+	--spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
+	--spectrum-magenta-1400-rgb: 86, 0, 30;
+	--spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
+	--spectrum-magenta-1500-rgb: 64, 0, 22;
+	--spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb));
+	--spectrum-magenta-1600-rgb: 35, 0, 12;
+	--spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb));
+	--spectrum-pink-100-rgb: 255, 246, 252;
+	--spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb));
+	--spectrum-pink-200-rgb: 255, 232, 247;
+	--spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb));
+	--spectrum-pink-300-rgb: 255, 211, 240;
+	--spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb));
+	--spectrum-pink-400-rgb: 255, 181, 230;
+	--spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb));
+	--spectrum-pink-500-rgb: 255, 148, 219;
+	--spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb));
+	--spectrum-pink-600-rgb: 255, 103, 204;
+	--spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb));
+	--spectrum-pink-700-rgb: 242, 76, 184;
+	--spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb));
+	--spectrum-pink-800-rgb: 228, 52, 163;
+	--spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb));
+	--spectrum-pink-900-rgb: 206, 42, 146;
+	--spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb));
+	--spectrum-pink-1000-rgb: 176, 31, 123;
+	--spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb));
+	--spectrum-pink-1100-rgb: 152, 22, 104;
+	--spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb));
+	--spectrum-pink-1200-rgb: 128, 12, 85;
+	--spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb));
+	--spectrum-pink-1300-rgb: 105, 3, 68;
+	--spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb));
+	--spectrum-pink-1400-rgb: 83, 0, 53;
+	--spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb));
+	--spectrum-pink-1500-rgb: 62, 0, 39;
+	--spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb));
+	--spectrum-pink-1600-rgb: 33, 0, 21;
+	--spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb));
+	--spectrum-turquoise-100-rgb: 238, 251, 251;
+	--spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb));
+	--spectrum-turquoise-200-rgb: 209, 245, 245;
+	--spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb));
+	--spectrum-turquoise-300-rgb: 169, 236, 237;
+	--spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb));
+	--spectrum-turquoise-400-rgb: 111, 221, 228;
+	--spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb));
+	--spectrum-turquoise-500-rgb: 39, 202, 216;
+	--spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb));
+	--spectrum-turquoise-600-rgb: 15, 177, 192;
+	--spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb));
+	--spectrum-turquoise-700-rgb: 12, 158, 171;
+	--spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb));
+	--spectrum-turquoise-800-rgb: 10, 141, 153;
+	--spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb));
+	--spectrum-turquoise-900-rgb: 8, 126, 137;
+	--spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb));
+	--spectrum-turquoise-1000-rgb: 5, 107, 116;
+	--spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb));
+	--spectrum-turquoise-1100-rgb: 3, 90, 98;
+	--spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb));
+	--spectrum-turquoise-1200-rgb: 1, 74, 81;
+	--spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb));
+	--spectrum-turquoise-1300-rgb: 0, 59, 65;
+	--spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb));
+	--spectrum-turquoise-1400-rgb: 0, 44, 49;
+	--spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb));
+	--spectrum-turquoise-1500-rgb: 0, 32, 35;
+	--spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb));
+	--spectrum-turquoise-1600-rgb: 0, 15, 17;
+	--spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb));
+	--spectrum-brown-100-rgb: 252, 247, 242;
+	--spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb));
+	--spectrum-brown-200-rgb: 247, 238, 225;
+	--spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb));
+	--spectrum-brown-300-rgb: 239, 221, 195;
+	--spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb));
+	--spectrum-brown-400-rgb: 229, 200, 157;
+	--spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb));
+	--spectrum-brown-500-rgb: 214, 177, 123;
+	--spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb));
+	--spectrum-brown-600-rgb: 190, 155, 104;
+	--spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb));
+	--spectrum-brown-700-rgb: 171, 138, 90;
+	--spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb));
+	--spectrum-brown-800-rgb: 154, 123, 77;
+	--spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb));
+	--spectrum-brown-900-rgb: 139, 109, 66;
+	--spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb));
+	--spectrum-brown-1000-rgb: 119, 91, 50;
+	--spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb));
+	--spectrum-brown-1100-rgb: 103, 76, 35;
+	--spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb));
+	--spectrum-brown-1200-rgb: 88, 61, 21;
+	--spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb));
+	--spectrum-brown-1300-rgb: 70, 49, 17;
+	--spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb));
+	--spectrum-brown-1400-rgb: 52, 37, 13;
+	--spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb));
+	--spectrum-brown-1500-rgb: 38, 26, 9;
+	--spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb));
+	--spectrum-brown-1600-rgb: 16, 12, 4;
+	--spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb));
+	--spectrum-silver-100-rgb: 247, 247, 247;
+	--spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb));
+	--spectrum-silver-200-rgb: 239, 239, 239;
+	--spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb));
+	--spectrum-silver-300-rgb: 223, 223, 223;
+	--spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb));
+	--spectrum-silver-400-rgb: 204, 204, 204;
+	--spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb));
+	--spectrum-silver-500-rgb: 183, 183, 183;
+	--spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb));
+	--spectrum-silver-600-rgb: 160, 160, 160;
+	--spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb));
+	--spectrum-silver-700-rgb: 143, 143, 143;
+	--spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb));
+	--spectrum-silver-800-rgb: 128, 128, 128;
+	--spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb));
+	--spectrum-silver-900-rgb: 114, 114, 114;
+	--spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb));
+	--spectrum-silver-1000-rgb: 96, 96, 96;
+	--spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb));
+	--spectrum-silver-1100-rgb: 81, 81, 81;
+	--spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb));
+	--spectrum-silver-1200-rgb: 66, 66, 66;
+	--spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb));
+	--spectrum-silver-1300-rgb: 52, 52, 52;
+	--spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb));
+	--spectrum-silver-1400-rgb: 39, 39, 39;
+	--spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb));
+	--spectrum-silver-1500-rgb: 28, 28, 28;
+	--spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb));
+	--spectrum-silver-1600-rgb: 12, 12, 12;
+	--spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb));
+	--spectrum-cinnamon-100-rgb: 253, 247, 243;
+	--spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb));
+	--spectrum-cinnamon-200-rgb: 249, 236, 229;
+	--spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb));
+	--spectrum-cinnamon-300-rgb: 244, 218, 203;
+	--spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb));
+	--spectrum-cinnamon-400-rgb: 237, 196, 172;
+	--spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb));
+	--spectrum-cinnamon-500-rgb: 229, 170, 136;
+	--spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb));
+	--spectrum-cinnamon-600-rgb: 212, 145, 108;
+	--spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb));
+	--spectrum-cinnamon-700-rgb: 198, 126, 88;
+	--spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb));
+	--spectrum-cinnamon-800-rgb: 184, 109, 70;
+	--spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb));
+	--spectrum-cinnamon-900-rgb: 170, 94, 56;
+	--spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb));
+	--spectrum-cinnamon-1000-rgb: 147, 77, 43;
+	--spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb));
+	--spectrum-cinnamon-1100-rgb: 128, 62, 32;
+	--spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb));
+	--spectrum-cinnamon-1200-rgb: 110, 48, 21;
+	--spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb));
+	--spectrum-cinnamon-1300-rgb: 92, 35, 11;
+	--spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb));
+	--spectrum-cinnamon-1400-rgb: 72, 25, 6;
+	--spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb));
+	--spectrum-cinnamon-1500-rgb: 52, 18, 4;
+	--spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb));
+	--spectrum-cinnamon-1600-rgb: 24, 8, 2;
+	--spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb));
+	--spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900);
+	--spectrum-icon-color-green-primary-default: var(--spectrum-green-900);
+	--spectrum-icon-color-red-primary-default: var(--spectrum-red-900);
+	--spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400);
+	--spectrum-negative-subdued-background-color-default: var(--spectrum-negative-subtle-background-color-default);
+	--spectrum-accent-subtle-background-color-default: var(--spectrum-accent-color-200);
+	--spectrum-informative-subtle-background-color-default: var(--spectrum-informative-color-200);
+	--spectrum-positive-subtle-background-color-default: var(--spectrum-positive-color-200);
+	--spectrum-notice-subtle-background-color-default: var(--spectrum-notice-color-200);
+	--spectrum-negative-subtle-background-color-default: var(--spectrum-negative-color-200);
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--color-scheme: light;
+	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
+	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
+	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
+	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
+	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
+	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-badge-label-icon-color-primary: var(--spectrum-white);
+	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
+	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200);
+	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
+	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
+	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
+	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
+	--spectrum-dropindicator-color: var(--spectrum-blue-800);
+	--spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
+	--spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
+	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
+	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
+	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
+	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
+	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
+	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
+	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-swatch-border-color-rgb: 0, 0, 0;
+	--spectrum-swatch-border-color-opacity: 0.51;
+	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
+	--spectrum-swatch-border-color-light-rgb: 0, 0, 0;
+	--spectrum-swatch-border-color-light-opacity: 0.2;
+	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
+	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
+	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+}
+.spectrum--medium {
+	--spectrum-workflow-icon-size-50: 14px;
+	--spectrum-workflow-icon-size-75: 16px;
+	--spectrum-workflow-icon-size-100: 20px;
+	--spectrum-workflow-icon-size-200: 22px;
+	--spectrum-workflow-icon-size-300: 26px;
+	--spectrum-arrow-icon-size-75: 10px;
+	--spectrum-arrow-icon-size-100: 10px;
+	--spectrum-arrow-icon-size-200: 12px;
+	--spectrum-arrow-icon-size-300: 14px;
+	--spectrum-arrow-icon-size-400: 16px;
+	--spectrum-arrow-icon-size-500: 18px;
+	--spectrum-arrow-icon-size-600: 20px;
+	--spectrum-asterisk-icon-size-100: 8px;
+	--spectrum-asterisk-icon-size-200: 10px;
+	--spectrum-asterisk-icon-size-300: 10px;
+	--spectrum-checkmark-icon-size-50: 10px;
+	--spectrum-checkmark-icon-size-75: 10px;
+	--spectrum-checkmark-icon-size-100: 10px;
+	--spectrum-checkmark-icon-size-200: 12px;
+	--spectrum-checkmark-icon-size-300: 14px;
+	--spectrum-checkmark-icon-size-400: 16px;
+	--spectrum-checkmark-icon-size-500: 16px;
+	--spectrum-checkmark-icon-size-600: 18px;
+	--spectrum-chevron-icon-size-50: 6px;
+	--spectrum-chevron-icon-size-75: 10px;
+	--spectrum-chevron-icon-size-100: 10px;
+	--spectrum-chevron-icon-size-200: 12px;
+	--spectrum-chevron-icon-size-300: 14px;
+	--spectrum-chevron-icon-size-400: 16px;
+	--spectrum-chevron-icon-size-500: 16px;
+	--spectrum-chevron-icon-size-600: 18px;
+	--spectrum-corner-triangle-icon-size-75: 5px;
+	--spectrum-corner-triangle-icon-size-100: 5px;
+	--spectrum-corner-triangle-icon-size-200: 6px;
+	--spectrum-corner-triangle-icon-size-300: 7px;
+	--spectrum-cross-icon-size-75: 8px;
+	--spectrum-cross-icon-size-100: 8px;
+	--spectrum-cross-icon-size-200: 10px;
+	--spectrum-cross-icon-size-300: 12px;
+	--spectrum-cross-icon-size-400: 12px;
+	--spectrum-cross-icon-size-500: 14px;
+	--spectrum-cross-icon-size-600: 16px;
+	--spectrum-dash-icon-size-50: 8px;
+	--spectrum-dash-icon-size-75: 8px;
+	--spectrum-dash-icon-size-100: 10px;
+	--spectrum-dash-icon-size-200: 12px;
+	--spectrum-dash-icon-size-300: 12px;
+	--spectrum-dash-icon-size-400: 14px;
+	--spectrum-dash-icon-size-500: 16px;
+	--spectrum-dash-icon-size-600: 18px;
+	--spectrum-checkbox-control-size-small: 12px;
+	--spectrum-checkbox-control-size-medium: 14px;
+	--spectrum-checkbox-control-size-large: 16px;
+	--spectrum-checkbox-control-size-extra-large: 18px;
+	--spectrum-checkbox-top-to-control-small: 6px;
+	--spectrum-checkbox-top-to-control-medium: 9px;
+	--spectrum-checkbox-top-to-control-large: 12px;
+	--spectrum-checkbox-top-to-control-extra-large: 15px;
+	--spectrum-switch-control-width-small: 23px;
+	--spectrum-switch-control-width-medium: 26px;
+	--spectrum-switch-control-width-large: 29px;
+	--spectrum-switch-control-width-extra-large: 33px;
+	--spectrum-switch-control-height-small: 12px;
+	--spectrum-switch-control-height-medium: 14px;
+	--spectrum-switch-control-height-large: 16px;
+	--spectrum-switch-control-height-extra-large: 18px;
+	--spectrum-switch-top-to-control-small: 6px;
+	--spectrum-switch-top-to-control-medium: 9px;
+	--spectrum-switch-top-to-control-large: 12px;
+	--spectrum-switch-top-to-control-extra-large: 15px;
+	--spectrum-radio-button-control-size-small: 12px;
+	--spectrum-radio-button-control-size-medium: 14px;
+	--spectrum-radio-button-control-size-large: 16px;
+	--spectrum-radio-button-control-size-extra-large: 18px;
+	--spectrum-radio-button-top-to-control-small: 6px;
+	--spectrum-radio-button-top-to-control-medium: 9px;
+	--spectrum-radio-button-top-to-control-large: 12px;
+	--spectrum-radio-button-top-to-control-extra-large: 15px;
+	--spectrum-field-label-text-to-asterisk-small: 4px;
+	--spectrum-field-label-text-to-asterisk-medium: 4px;
+	--spectrum-field-label-text-to-asterisk-large: 5px;
+	--spectrum-field-label-text-to-asterisk-extra-large: 5px;
+	--spectrum-field-label-top-to-asterisk-small: 8px;
+	--spectrum-field-label-top-to-asterisk-medium: 12px;
+	--spectrum-field-label-top-to-asterisk-large: 15px;
+	--spectrum-field-label-top-to-asterisk-extra-large: 19px;
+	--spectrum-field-label-top-margin-medium: 4px;
+	--spectrum-field-label-top-margin-large: 5px;
+	--spectrum-field-label-top-margin-extra-large: 5px;
+	--spectrum-field-label-to-component-quiet-small: -8px;
+	--spectrum-field-label-to-component-quiet-medium: -8px;
+	--spectrum-field-label-to-component-quiet-large: -12px;
+	--spectrum-field-label-to-component-quiet-extra-large: -15px;
+	--spectrum-help-text-top-to-workflow-icon-small: 4px;
+	--spectrum-help-text-top-to-workflow-icon-medium: 3px;
+	--spectrum-help-text-top-to-workflow-icon-large: 6px;
+	--spectrum-help-text-top-to-workflow-icon-extra-large: 9px;
+	--spectrum-status-light-dot-size-medium: 8px;
+	--spectrum-status-light-dot-size-large: 10px;
+	--spectrum-status-light-dot-size-extra-large: 10px;
+	--spectrum-status-light-top-to-dot-small: 8px;
+	--spectrum-status-light-top-to-dot-medium: 12px;
+	--spectrum-status-light-top-to-dot-large: 15px;
+	--spectrum-status-light-top-to-dot-extra-large: 19px;
+	--spectrum-action-button-edge-to-hold-icon-medium: 4px;
+	--spectrum-action-button-edge-to-hold-icon-large: 5px;
+	--spectrum-action-button-edge-to-hold-icon-extra-large: 6px;
+	--spectrum-tooltip-tip-width: 8px;
+	--spectrum-tooltip-tip-height: 4px;
+	--spectrum-tooltip-maximum-width: 160px;
+	--spectrum-progress-circle-size-small: 16px;
+	--spectrum-progress-circle-size-medium: 32px;
+	--spectrum-progress-circle-size-large: 64px;
+	--spectrum-progress-circle-thickness-small: 2px;
+	--spectrum-progress-circle-thickness-medium: 3px;
+	--spectrum-progress-circle-thickness-large: 4px;
+	--spectrum-toast-height: 48px;
+	--spectrum-toast-maximum-width: 336px;
+	--spectrum-toast-top-to-workflow-icon: 15px;
+	--spectrum-toast-top-to-text: 14px;
+	--spectrum-toast-bottom-to-text: 17px;
+	--spectrum-action-bar-height: 48px;
+	--spectrum-action-bar-top-to-item-counter: 14px;
+	--spectrum-swatch-size-extra-small: 16px;
+	--spectrum-swatch-size-small: 24px;
+	--spectrum-swatch-size-medium: 32px;
+	--spectrum-swatch-size-large: 40px;
+	--spectrum-progress-bar-thickness-small: 4px;
+	--spectrum-progress-bar-thickness-medium: 6px;
+	--spectrum-progress-bar-thickness-large: 8px;
+	--spectrum-progress-bar-thickness-extra-large: 10px;
+	--spectrum-meter-width: 192px;
+	--spectrum-meter-thickness-small: 4px;
+	--spectrum-meter-thickness-large: 6px;
+	--spectrum-tag-top-to-avatar-small: 4px;
+	--spectrum-tag-top-to-avatar-medium: 6px;
+	--spectrum-tag-top-to-avatar-large: 9px;
+	--spectrum-tag-top-to-cross-icon-small: 8px;
+	--spectrum-tag-top-to-cross-icon-medium: 12px;
+	--spectrum-tag-top-to-cross-icon-large: 15px;
+	--spectrum-popover-top-to-content-area: 4px;
+	--spectrum-menu-item-edge-to-content-not-selected-small: 28px;
+	--spectrum-menu-item-edge-to-content-not-selected-medium: 32px;
+	--spectrum-menu-item-edge-to-content-not-selected-large: 38px;
+	--spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px;
+	--spectrum-menu-item-top-to-disclosure-icon-small: 7px;
+	--spectrum-menu-item-top-to-disclosure-icon-medium: 11px;
+	--spectrum-menu-item-top-to-disclosure-icon-large: 14px;
+	--spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px;
+	--spectrum-menu-item-top-to-selected-icon-small: 7px;
+	--spectrum-menu-item-top-to-selected-icon-medium: 11px;
+	--spectrum-menu-item-top-to-selected-icon-large: 14px;
+	--spectrum-menu-item-top-to-selected-icon-extra-large: 17px;
+	--spectrum-slider-control-height-small: 14px;
+	--spectrum-slider-control-height-medium: 16px;
+	--spectrum-slider-control-height-large: 18px;
+	--spectrum-slider-control-height-extra-large: 20px;
+	--spectrum-slider-handle-size-small: 14px;
+	--spectrum-slider-handle-size-medium: 16px;
+	--spectrum-slider-handle-size-large: 18px;
+	--spectrum-slider-handle-size-extra-large: 20px;
+	--spectrum-slider-handle-border-width-down-small: 5px;
+	--spectrum-slider-handle-border-width-down-medium: 6px;
+	--spectrum-slider-handle-border-width-down-large: 7px;
+	--spectrum-slider-handle-border-width-down-extra-large: 8px;
+	--spectrum-slider-bottom-to-handle-small: 5px;
+	--spectrum-slider-bottom-to-handle-medium: 8px;
+	--spectrum-slider-bottom-to-handle-large: 11px;
+	--spectrum-slider-bottom-to-handle-extra-large: 14px;
+	--spectrum-slider-control-to-field-label-small: 5px;
+	--spectrum-slider-control-to-field-label-medium: 8px;
+	--spectrum-slider-control-to-field-label-large: 11px;
+	--spectrum-slider-control-to-field-label-extra-large: 14px;
+	--spectrum-picker-visual-to-disclosure-icon-small: 7px;
+	--spectrum-picker-visual-to-disclosure-icon-medium: 8px;
+	--spectrum-picker-visual-to-disclosure-icon-large: 9px;
+	--spectrum-picker-visual-to-disclosure-icon-extra-large: 10px;
+	--spectrum-text-area-minimum-width: 112px;
+	--spectrum-text-area-minimum-height: 56px;
+	--spectrum-combo-box-visual-to-field-button-small: 7px;
+	--spectrum-combo-box-visual-to-field-button-medium: 8px;
+	--spectrum-combo-box-visual-to-field-button-large: 9px;
+	--spectrum-combo-box-visual-to-field-button-extra-large: 10px;
+	--spectrum-thumbnail-size-50: 16px;
+	--spectrum-thumbnail-size-75: 18px;
+	--spectrum-thumbnail-size-100: 20px;
+	--spectrum-thumbnail-size-200: 22px;
+	--spectrum-thumbnail-size-300: 26px;
+	--spectrum-thumbnail-size-400: 28px;
+	--spectrum-thumbnail-size-500: 32px;
+	--spectrum-thumbnail-size-600: 36px;
+	--spectrum-thumbnail-size-700: 40px;
+	--spectrum-thumbnail-size-800: 44px;
+	--spectrum-thumbnail-size-900: 50px;
+	--spectrum-thumbnail-size-1000: 56px;
+	--spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s);
+	--spectrum-alert-dialog-description-size: var(--spectrum-body-size-s);
+	--spectrum-opacity-checkerboard-square-size: 8px;
+	--spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs);
+	--spectrum-contextual-help-body-size: var(--spectrum-body-size-s);
+	--spectrum-breadcrumbs-height-multiline: 72px;
+	--spectrum-breadcrumbs-top-to-text: 13px;
+	--spectrum-breadcrumbs-top-to-text-compact: 11px;
+	--spectrum-breadcrumbs-top-to-text-multiline: 12px;
+	--spectrum-breadcrumbs-bottom-to-text: 15px;
+	--spectrum-breadcrumbs-bottom-to-text-compact: 12px;
+	--spectrum-breadcrumbs-bottom-to-text-multiline: 9px;
+	--spectrum-breadcrumbs-start-edge-to-text: 8px;
+	--spectrum-breadcrumbs-top-text-to-bottom-text: 9px;
+	--spectrum-breadcrumbs-top-to-separator-icon: 19px;
+	--spectrum-breadcrumbs-top-to-separator-icon-compact: 15px;
+	--spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px;
+	--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px;
+	--spectrum-breadcrumbs-top-to-truncated-menu: 8px;
+	--spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px;
+	--spectrum-avatar-size-50: 16px;
+	--spectrum-avatar-size-75: 18px;
+	--spectrum-avatar-size-100: 20px;
+	--spectrum-avatar-size-200: 22px;
+	--spectrum-avatar-size-300: 26px;
+	--spectrum-avatar-size-400: 28px;
+	--spectrum-avatar-size-500: 32px;
+	--spectrum-avatar-size-600: 36px;
+	--spectrum-avatar-size-700: 40px;
+	--spectrum-alert-banner-minimum-height: 48px;
+	--spectrum-alert-banner-width: 832px;
+	--spectrum-alert-banner-top-to-workflow-icon: 15px;
+	--spectrum-alert-banner-top-to-text: 14px;
+	--spectrum-alert-banner-bottom-to-text: 17px;
+	--spectrum-rating-indicator-width: 18px;
+	--spectrum-rating-indicator-to-icon: 4px;
+	--spectrum-color-area-width: 192px;
+	--spectrum-color-area-minimum-width: 64px;
+	--spectrum-color-area-height: 192px;
+	--spectrum-color-area-minimum-height: 64px;
+	--spectrum-color-wheel-width: 192px;
+	--spectrum-color-wheel-minimum-width: 175px;
+	--spectrum-color-slider-length: 192px;
+	--spectrum-color-slider-minimum-length: 80px;
+	--spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m);
+	--spectrum-illustrated-message-cjk-title-size: var(--spectrum-heading-cjk-size-m);
+	--spectrum-illustrated-message-body-size: var(--spectrum-body-size-s);
+	--spectrum-coach-mark-width: 296px;
+	--spectrum-coach-mark-minimum-width: 296px;
+	--spectrum-coach-mark-maximum-width: 380px;
+	--spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400);
+	--spectrum-coach-mark-pagination-text-to-bottom-edge: 33px;
+	--spectrum-coach-mark-media-height: 222px;
+	--spectrum-coach-mark-media-minimum-height: 166px;
+	--spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs);
+	--spectrum-coach-mark-body-size: var(--spectrum-body-size-s);
+	--spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s);
+	--spectrum-accordion-top-to-text-regular-small: 5px;
+	--spectrum-accordion-small-top-to-text-spacious: 9px;
+	--spectrum-accordion-top-to-text-regular-medium: 8px;
+	--spectrum-accordion-top-to-text-spacious-medium: 12px;
+	--spectrum-accordion-top-to-text-compact-large: 4px;
+	--spectrum-accordion-top-to-text-regular-large: 9px;
+	--spectrum-accordion-top-to-text-spacious-large: 12px;
+	--spectrum-accordion-top-to-text-compact-extra-large: 5px;
+	--spectrum-accordion-top-to-text-regular-extra-large: 9px;
+	--spectrum-accordion-top-to-text-spacious-extra-large: 13px;
+	--spectrum-accordion-bottom-to-text-compact-small: 2px;
+	--spectrum-accordion-bottom-to-text-regular-small: 7px;
+	--spectrum-accordion-bottom-to-text-spacious-small: 11px;
+	--spectrum-accordion-bottom-to-text-compact-medium: 5px;
+	--spectrum-accordion-bottom-to-text-regular-medium: 9px;
+	--spectrum-accordion-bottom-to-text-spacious-medium: 13px;
+	--spectrum-accordion-bottom-to-text-compact-large: 8px;
+	--spectrum-accordion-bottom-to-text-regular-large: 11px;
+	--spectrum-accordion-bottom-to-text-spacious-large: 16px;
+	--spectrum-accordion-bottom-to-text-compact-extra-large: 8px;
+	--spectrum-accordion-bottom-to-text-regular-extra-large: 12px;
+	--spectrum-accordion-bottom-to-text-spacious-extra-large: 16px;
+	--spectrum-accordion-minimum-width: 200px;
+	--spectrum-accordion-content-area-top-to-content: 8px;
+	--spectrum-accordion-content-area-bottom-to-content: 16px;
+	--spectrum-color-handle-size: 16px;
+	--spectrum-color-handle-size-key-focus: 32px;
+	--spectrum-table-column-header-row-top-to-text-small: 8px;
+	--spectrum-table-column-header-row-top-to-text-medium: 7px;
+	--spectrum-table-column-header-row-top-to-text-large: 10px;
+	--spectrum-table-column-header-row-top-to-text-extra-large: 13px;
+	--spectrum-table-column-header-row-bottom-to-text-small: 9px;
+	--spectrum-table-column-header-row-bottom-to-text-medium: 8px;
+	--spectrum-table-column-header-row-bottom-to-text-large: 10px;
+	--spectrum-table-column-header-row-bottom-to-text-extra-large: 13px;
+	--spectrum-table-row-height-small-regular: 32px;
+	--spectrum-table-row-height-medium-regular: 40px;
+	--spectrum-table-row-height-large-regular: 48px;
+	--spectrum-table-row-height-extra-large-regular: 56px;
+	--spectrum-table-row-height-small-spacious: 40px;
+	--spectrum-table-row-height-medium-spacious: 48px;
+	--spectrum-table-row-height-large-spacious: 56px;
+	--spectrum-table-row-height-extra-large-spacious: 64px;
+	--spectrum-table-row-top-to-text-small-regular: 8px;
+	--spectrum-table-row-top-to-text-medium-regular: 11px;
+	--spectrum-table-row-top-to-text-large-regular: 14px;
+	--spectrum-table-row-top-to-text-extra-large-regular: 17px;
+	--spectrum-table-row-bottom-to-text-small-regular: 9px;
+	--spectrum-table-row-bottom-to-text-medium-regular: 12px;
+	--spectrum-table-row-bottom-to-text-large-regular: 14px;
+	--spectrum-table-row-bottom-to-text-extra-large-regular: 17px;
+	--spectrum-table-row-top-to-text-small-spacious: 12px;
+	--spectrum-table-row-top-to-text-medium-spacious: 15px;
+	--spectrum-table-row-top-to-text-large-spacious: 18px;
+	--spectrum-table-row-top-to-text-extra-large-spacious: 21px;
+	--spectrum-table-row-bottom-to-text-small-spacious: 13px;
+	--spectrum-table-row-bottom-to-text-medium-spacious: 16px;
+	--spectrum-table-row-bottom-to-text-large-spacious: 18px;
+	--spectrum-table-row-bottom-to-text-extra-large-spacious: 21px;
+	--spectrum-table-checkbox-to-text: 24px;
+	--spectrum-table-header-row-checkbox-to-top-small: 10px;
+	--spectrum-table-header-row-checkbox-to-top-medium: 9px;
+	--spectrum-table-header-row-checkbox-to-top-large: 12px;
+	--spectrum-table-header-row-checkbox-to-top-extra-large: 15px;
+	--spectrum-table-row-checkbox-to-top-small-compact: 6px;
+	--spectrum-table-row-checkbox-to-top-small-regular: 10px;
+	--spectrum-table-row-checkbox-to-top-small-spacious: 14px;
+	--spectrum-table-row-checkbox-to-top-medium-compact: 9px;
+	--spectrum-table-row-checkbox-to-top-medium-regular: 13px;
+	--spectrum-table-row-checkbox-to-top-medium-spacious: 17px;
+	--spectrum-table-row-checkbox-to-top-large-compact: 12px;
+	--spectrum-table-row-checkbox-to-top-large-regular: 16px;
+	--spectrum-table-row-checkbox-to-top-large-spacious: 20px;
+	--spectrum-table-row-checkbox-to-top-extra-large-compact: 15px;
+	--spectrum-table-row-checkbox-to-top-extra-large-regular: 19px;
+	--spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px;
+	--spectrum-table-section-header-row-height-small: 24px;
+	--spectrum-table-section-header-row-height-medium: 32px;
+	--spectrum-table-section-header-row-height-large: 40px;
+	--spectrum-table-section-header-row-height-extra-large: 48px;
+	--spectrum-table-thumbnail-to-top-minimum-small-compact: 4px;
+	--spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px;
+	--spectrum-table-thumbnail-to-top-minimum-large-compact: 7px;
+	--spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px;
+	--spectrum-table-thumbnail-to-top-minimum-small-regular: 5px;
+	--spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px;
+	--spectrum-table-thumbnail-to-top-minimum-large-regular: 8px;
+	--spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px;
+	--spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px;
+	--spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px;
+	--spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px;
+	--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px;
+	--spectrum-tab-item-to-tab-item-horizontal-small: 21px;
+	--spectrum-tab-item-to-tab-item-horizontal-medium: 24px;
+	--spectrum-tab-item-to-tab-item-horizontal-large: 27px;
+	--spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px;
+	--spectrum-tab-item-to-tab-item-vertical-small: 4px;
+	--spectrum-tab-item-to-tab-item-vertical-medium: 4px;
+	--spectrum-tab-item-to-tab-item-vertical-large: 5px;
+	--spectrum-tab-item-to-tab-item-vertical-extra-large: 5px;
+	--spectrum-tab-item-start-to-edge-small: 12px;
+	--spectrum-tab-item-start-to-edge-medium: 12px;
+	--spectrum-tab-item-start-to-edge-large: 13px;
+	--spectrum-tab-item-start-to-edge-extra-large: 13px;
+	--spectrum-tab-item-top-to-text-small: 11px;
+	--spectrum-tab-item-bottom-to-text-small: 12px;
+	--spectrum-tab-item-top-to-text-medium: 14px;
+	--spectrum-tab-item-bottom-to-text-medium: 14px;
+	--spectrum-tab-item-top-to-text-large: 16px;
+	--spectrum-tab-item-bottom-to-text-large: 18px;
+	--spectrum-tab-item-top-to-text-extra-large: 19px;
+	--spectrum-tab-item-bottom-to-text-extra-large: 20px;
+	--spectrum-tab-item-top-to-text-compact-small: 4px;
+	--spectrum-tab-item-bottom-to-text-compact-small: 5px;
+	--spectrum-tab-item-top-to-text-compact-medium: 6px;
+	--spectrum-tab-item-bottom-to-text-compact-medium: 8px;
+	--spectrum-tab-item-top-to-text-compact-large: 10px;
+	--spectrum-tab-item-bottom-to-text-compact-large: 12px;
+	--spectrum-tab-item-top-to-text-compact-extra-large: 12px;
+	--spectrum-tab-item-bottom-to-text-compact-extra-large: 13px;
+	--spectrum-tab-item-top-to-workflow-icon-small: 13px;
+	--spectrum-tab-item-top-to-workflow-icon-medium: 15px;
+	--spectrum-tab-item-top-to-workflow-icon-large: 17px;
+	--spectrum-tab-item-top-to-workflow-icon-extra-large: 19px;
+	--spectrum-tab-item-top-to-workflow-icon-compact-small: 3px;
+	--spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px;
+	--spectrum-tab-item-top-to-workflow-icon-compact-large: 9px;
+	--spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px;
+	--spectrum-tab-item-focus-indicator-gap-small: 7px;
+	--spectrum-tab-item-focus-indicator-gap-medium: 8px;
+	--spectrum-tab-item-focus-indicator-gap-large: 9px;
+	--spectrum-tab-item-focus-indicator-gap-extra-large: 10px;
+	--spectrum-side-navigation-width: 192px;
+	--spectrum-side-navigation-minimum-width: 160px;
+	--spectrum-side-navigation-maximum-width: 240px;
+	--spectrum-side-navigation-second-level-edge-to-text: 24px;
+	--spectrum-side-navigation-third-level-edge-to-text: 36px;
+	--spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px;
+	--spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px;
+	--spectrum-side-navigation-item-to-item: 4px;
+	--spectrum-side-navigation-item-to-header: 24px;
+	--spectrum-side-navigation-header-to-item: 8px;
+	--spectrum-side-navigation-bottom-to-text: 8px;
+	--spectrum-tray-top-to-content-area: 4px;
+	--spectrum-accordion-top-to-text-spacious-small: 9px;
+	--spectrum-drop-shadow-y: 1px;
+	--spectrum-drop-shadow-blur: 4px;
+	--spectrum-text-to-visual-50: 5px;
+	--spectrum-text-to-visual-75: 5px;
+	--spectrum-text-to-visual-100: 6px;
+	--spectrum-text-to-visual-200: 7px;
+	--spectrum-text-to-visual-300: 8px;
+	--spectrum-text-to-visual-400: 9px;
+	--spectrum-text-to-control-75: 9px;
+	--spectrum-text-to-control-100: 10px;
+	--spectrum-text-to-control-200: 11px;
+	--spectrum-text-to-control-300: 13px;
+	--spectrum-component-height-50: 20px;
+	--spectrum-component-height-75: 24px;
+	--spectrum-component-height-100: 32px;
+	--spectrum-component-height-200: 40px;
+	--spectrum-component-height-300: 48px;
+	--spectrum-component-height-400: 56px;
+	--spectrum-component-height-500: 64px;
+	--spectrum-component-pill-edge-to-visual-75: 11px;
+	--spectrum-component-pill-edge-to-visual-100: 14px;
+	--spectrum-component-pill-edge-to-visual-200: 18px;
+	--spectrum-component-pill-edge-to-visual-300: 20px;
+	--spectrum-component-pill-edge-to-visual-only-75: 4px;
+	--spectrum-component-pill-edge-to-visual-only-100: 6px;
+	--spectrum-component-pill-edge-to-visual-only-200: 9px;
+	--spectrum-component-pill-edge-to-visual-only-300: 11px;
+	--spectrum-component-pill-edge-to-text-75: 13px;
+	--spectrum-component-pill-edge-to-text-100: 16px;
+	--spectrum-component-pill-edge-to-text-200: 20px;
+	--spectrum-component-pill-edge-to-text-300: 23px;
+	--spectrum-component-edge-to-visual-50: 7px;
+	--spectrum-component-edge-to-visual-75: 8px;
+	--spectrum-component-edge-to-visual-100: 10px;
+	--spectrum-component-edge-to-visual-200: 13px;
+	--spectrum-component-edge-to-visual-300: 14px;
+	--spectrum-component-edge-to-visual-only-50: 3px;
+	--spectrum-component-edge-to-visual-only-75: 4px;
+	--spectrum-component-edge-to-visual-only-100: 6px;
+	--spectrum-component-edge-to-visual-only-200: 9px;
+	--spectrum-component-edge-to-visual-only-300: 11px;
+	--spectrum-component-edge-to-text-50: 8px;
+	--spectrum-component-edge-to-text-75: 10px;
+	--spectrum-component-edge-to-text-100: 12px;
+	--spectrum-component-edge-to-text-200: 15px;
+	--spectrum-component-edge-to-text-300: 17px;
+	--spectrum-component-top-to-workflow-icon-50: 3px;
+	--spectrum-component-top-to-workflow-icon-75: 4px;
+	--spectrum-component-top-to-workflow-icon-100: 6px;
+	--spectrum-component-top-to-workflow-icon-200: 9px;
+	--spectrum-component-top-to-workflow-icon-300: 11px;
+	--spectrum-component-top-to-text-50: 3px;
+	--spectrum-component-top-to-text-75: 4px;
+	--spectrum-component-top-to-text-100: 6px;
+	--spectrum-component-top-to-text-200: 9px;
+	--spectrum-component-top-to-text-300: 12px;
+	--spectrum-component-bottom-to-text-50: 3px;
+	--spectrum-component-bottom-to-text-75: 5px;
+	--spectrum-component-bottom-to-text-100: 9px;
+	--spectrum-component-bottom-to-text-200: 11px;
+	--spectrum-component-bottom-to-text-300: 14px;
+	--spectrum-component-to-menu-small: 6px;
+	--spectrum-component-to-menu-medium: 6px;
+	--spectrum-component-to-menu-large: 7px;
+	--spectrum-component-to-menu-extra-large: 8px;
+	--spectrum-field-edge-to-disclosure-icon-75: 7px;
+	--spectrum-field-edge-to-disclosure-icon-100: 11px;
+	--spectrum-field-edge-to-disclosure-icon-200: 14px;
+	--spectrum-field-edge-to-disclosure-icon-300: 17px;
+	--spectrum-field-end-edge-to-disclosure-icon-75: 7px;
+	--spectrum-field-end-edge-to-disclosure-icon-100: 11px;
+	--spectrum-field-end-edge-to-disclosure-icon-200: 14px;
+	--spectrum-field-end-edge-to-disclosure-icon-300: 17px;
+	--spectrum-field-top-to-disclosure-icon-75: 7px;
+	--spectrum-field-top-to-disclosure-icon-100: 11px;
+	--spectrum-field-top-to-disclosure-icon-200: 14px;
+	--spectrum-field-top-to-disclosure-icon-300: 17px;
+	--spectrum-field-top-to-alert-icon-small: 4px;
+	--spectrum-field-top-to-alert-icon-medium: 7px;
+	--spectrum-field-top-to-alert-icon-large: 10px;
+	--spectrum-field-top-to-alert-icon-extra-large: 13px;
+	--spectrum-field-top-to-validation-icon-small: 7px;
+	--spectrum-field-top-to-validation-icon-medium: 11px;
+	--spectrum-field-top-to-validation-icon-large: 14px;
+	--spectrum-field-top-to-validation-icon-extra-large: 17px;
+	--spectrum-field-top-to-progress-circle-small: 4px;
+	--spectrum-field-top-to-progress-circle-medium: 8px;
+	--spectrum-field-top-to-progress-circle-large: 12px;
+	--spectrum-field-top-to-progress-circle-extra-large: 16px;
+	--spectrum-field-edge-to-alert-icon-small: 9px;
+	--spectrum-field-edge-to-alert-icon-medium: 12px;
+	--spectrum-field-edge-to-alert-icon-large: 15px;
+	--spectrum-field-edge-to-alert-icon-extra-large: 18px;
+	--spectrum-field-edge-to-validation-icon-small: 9px;
+	--spectrum-field-edge-to-validation-icon-medium: 12px;
+	--spectrum-field-edge-to-validation-icon-large: 15px;
+	--spectrum-field-edge-to-validation-icon-extra-large: 18px;
+	--spectrum-field-text-to-alert-icon-small: 8px;
+	--spectrum-field-text-to-alert-icon-medium: 12px;
+	--spectrum-field-text-to-alert-icon-large: 15px;
+	--spectrum-field-text-to-alert-icon-extra-large: 18px;
+	--spectrum-field-text-to-validation-icon-small: 8px;
+	--spectrum-field-text-to-validation-icon-medium: 12px;
+	--spectrum-field-text-to-validation-icon-large: 15px;
+	--spectrum-field-text-to-validation-icon-extra-large: 18px;
+	--spectrum-field-width: 192px;
+	--spectrum-character-count-to-field-quiet-small: -3px;
+	--spectrum-character-count-to-field-quiet-medium: -3px;
+	--spectrum-character-count-to-field-quiet-large: -3px;
+	--spectrum-character-count-to-field-quiet-extra-large: -4px;
+	--spectrum-side-label-character-count-to-field: 12px;
+	--spectrum-side-label-character-count-top-margin-small: 4px;
+	--spectrum-side-label-character-count-top-margin-medium: 8px;
+	--spectrum-side-label-character-count-top-margin-large: 11px;
+	--spectrum-side-label-character-count-top-margin-extra-large: 14px;
+	--spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px;
+	--spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px;
+	--spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px;
+	--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px;
+	--spectrum-navigational-indicator-top-to-back-icon-small: 6px;
+	--spectrum-navigational-indicator-top-to-back-icon-medium: 9px;
+	--spectrum-navigational-indicator-top-to-back-icon-large: 12px;
+	--spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px;
+	--spectrum-color-control-track-width: 24px;
+	--spectrum-font-size-50: 11px;
+	--spectrum-font-size-75: 12px;
+	--spectrum-font-size-100: 14px;
+	--spectrum-font-size-200: 16px;
+	--spectrum-font-size-300: 18px;
+	--spectrum-font-size-400: 20px;
+	--spectrum-font-size-500: 22px;
+	--spectrum-font-size-600: 25px;
+	--spectrum-font-size-700: 28px;
+	--spectrum-font-size-800: 32px;
+	--spectrum-font-size-900: 36px;
+	--spectrum-font-size-1000: 40px;
+	--spectrum-font-size-1100: 45px;
+	--spectrum-font-size-1200: 50px;
+	--spectrum-font-size-1300: 60px;
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--scale: medium;
+	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
+	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
+	--spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
+	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
+	--spectrum-assetcard-focus-ring-border-radius: 8px;
+	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
+	--spectrum-assetcard-selectionindicator-margin: 12px;
+	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
+	--spectrum-button-bottom-to-text-small: 4px;
+	--spectrum-button-bottom-to-text-medium: 8px;
+	--spectrum-button-bottom-to-text-large: 10px;
+	--spectrum-button-bottom-to-text-extra-large: 13px;
+	--spectrum-button-top-to-text-small: 5px;
+	--spectrum-button-top-to-text-medium: 7px;
+	--spectrum-button-top-to-text-large: 10px;
+	--spectrum-button-top-to-text-extra-large: 13px;
+	--spectrum-coach-indicator-gap: 6px;
+	--spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
+	--spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
+	--spectrum-coachmark-buttongroup-display: flex;
+	--spectrum-coachmark-buttongroup-mobile-display: none;
+	--spectrum-coachmark-menu-display: inline-flex;
+	--spectrum-coachmark-menu-mobile-display: none;
+	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
+	--spectrum-colorwheel-colorarea-container-size: 144px;
+	--spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
+	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
+	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
+	--spectrum-datepicker-dash-line-height: 24px;
+	--spectrum-datepicker-datetime-width-first: 36px;
+	--spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
+	--spectrum-datepicker-initial-width: 128px;
+	--spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
+	--spectrum-datepicker-invalid-icon-to-button: 8px;
+	--spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
+	--spectrum-datepicker-width-quiet-first: 72px;
+	--spectrum-datepicker-width-quiet-second: 16px;
+	--spectrum-dial-border-radius: 16px;
+	--spectrum-dial-controls-margin: 8px;
+	--spectrum-dial-handle-block-margin: 16px;
+	--spectrum-dial-handle-inline-margin: 16px;
+	--spectrum-dial-handle-position: 8px;
+	--spectrum-dial-label-container-top-to-text: 4px;
+	--spectrum-dial-label-gap-y: 5px;
+	--spectrum-dialog-confirm-border-radius: 4px;
+	--spectrum-dialog-confirm-description-text-size: 14px;
+	--spectrum-dialog-confirm-entry-animation-distance: 20px;
+	--spectrum-dialog-confirm-hero-height: 128px;
+	--spectrum-dialog-confirm-padding-grid: 40px;
+	--spectrum-dialog-confirm-title-text-size: 18px;
+	--spectrum-menu-item-checkmark-height-small: 10px;
+	--spectrum-menu-item-checkmark-height-medium: 10px;
+	--spectrum-menu-item-checkmark-height-large: 12px;
+	--spectrum-menu-item-checkmark-height-extra-large: 14px;
+	--spectrum-menu-item-checkmark-width-small: 10px;
+	--spectrum-menu-item-checkmark-width-medium: 10px;
+	--spectrum-menu-item-checkmark-width-large: 12px;
+	--spectrum-menu-item-checkmark-width-extra-large: 14px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
+	--spectrum-pagination-item-inline-spacing: 5px;
+	--spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
+	--spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+	--spectrum-slider-ramp-track-height: 16px;
+	--spectrum-slider-tick-mark-height: 10px;
+	--spectrum-treeview-indicator-inset-block-start: 5px;
+	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
+	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
+	--spectrum-treeview-item-indentation-large: 20px;
+	--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
+	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
+	--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
+	--spectrum-ui-icon-medium-display: block;
+	--spectrum-ui-icon-large-display: none;
+	--spectrum-well-border-radius: var(--spectrum-spacing-75);
+	--spectrum-well-margin-top: var(--spectrum-spacing-75);
+	--spectrum-well-min-width: 240px;
+	--spectrum-well-padding: var(--spectrum-spacing-300);
+	--spectrum-workflow-icon-size-xxl: 32px;
+	--spectrum-workflow-icon-size-xxs: 12px;
+}
diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css
index bf0f02eb7f..ce1703c3f4 100644
--- a/tokens/dist/css/large-vars.css
+++ b/tokens/dist/css/large-vars.css
@@ -12,11 +12,11 @@
  */
 
 .spectrum--large {
-	--spectrum-workflow-icon-size-50: 18px;
-	--spectrum-workflow-icon-size-75: 20px;
-	--spectrum-workflow-icon-size-100: 22px;
-	--spectrum-workflow-icon-size-200: 24px;
-	--spectrum-workflow-icon-size-300: 28px;
+	--spectrum-workflow-icon-size-50: 16px;
+	--spectrum-workflow-icon-size-75: 18px;
+	--spectrum-workflow-icon-size-100: 24px;
+	--spectrum-workflow-icon-size-200: 28px;
+	--spectrum-workflow-icon-size-300: 30px;
 	--spectrum-arrow-icon-size-75: 12px;
 	--spectrum-arrow-icon-size-100: 14px;
 	--spectrum-arrow-icon-size-200: 16px;
@@ -62,6 +62,34 @@
 	--spectrum-dash-icon-size-400: 18px;
 	--spectrum-dash-icon-size-500: 20px;
 	--spectrum-dash-icon-size-600: 22px;
+	--spectrum-checkbox-control-size-small: 16px;
+	--spectrum-checkbox-control-size-medium: 18px;
+	--spectrum-checkbox-control-size-large: 20px;
+	--spectrum-checkbox-control-size-extra-large: 22px;
+	--spectrum-checkbox-top-to-control-small: 7px;
+	--spectrum-checkbox-top-to-control-medium: 11px;
+	--spectrum-checkbox-top-to-control-large: 15px;
+	--spectrum-checkbox-top-to-control-extra-large: 19px;
+	--spectrum-switch-control-width-small: 32px;
+	--spectrum-switch-control-width-medium: 36px;
+	--spectrum-switch-control-width-large: 41px;
+	--spectrum-switch-control-width-extra-large: 46px;
+	--spectrum-switch-control-height-small: 16px;
+	--spectrum-switch-control-height-medium: 18px;
+	--spectrum-switch-control-height-large: 20px;
+	--spectrum-switch-control-height-extra-large: 22px;
+	--spectrum-switch-top-to-control-small: 7px;
+	--spectrum-switch-top-to-control-medium: 11px;
+	--spectrum-switch-top-to-control-large: 15px;
+	--spectrum-switch-top-to-control-extra-large: 19px;
+	--spectrum-radio-button-control-size-small: 16px;
+	--spectrum-radio-button-control-size-medium: 18px;
+	--spectrum-radio-button-control-size-large: 20px;
+	--spectrum-radio-button-control-size-extra-large: 22px;
+	--spectrum-radio-button-top-to-control-small: 7px;
+	--spectrum-radio-button-top-to-control-medium: 11px;
+	--spectrum-radio-button-top-to-control-large: 15px;
+	--spectrum-radio-button-top-to-control-extra-large: 19px;
 	--spectrum-field-label-text-to-asterisk-small: 5px;
 	--spectrum-field-label-text-to-asterisk-medium: 5px;
 	--spectrum-field-label-text-to-asterisk-large: 6px;
@@ -137,6 +165,22 @@
 	--spectrum-menu-item-top-to-selected-icon-medium: 13px;
 	--spectrum-menu-item-top-to-selected-icon-large: 17px;
 	--spectrum-menu-item-top-to-selected-icon-extra-large: 22px;
+	--spectrum-slider-control-height-small: 18px;
+	--spectrum-slider-control-height-medium: 20px;
+	--spectrum-slider-control-height-large: 22px;
+	--spectrum-slider-control-height-extra-large: 26px;
+	--spectrum-slider-handle-size-small: 18px;
+	--spectrum-slider-handle-size-medium: 20px;
+	--spectrum-slider-handle-size-large: 22px;
+	--spectrum-slider-handle-size-extra-large: 26px;
+	--spectrum-slider-handle-border-width-down-small: 7px;
+	--spectrum-slider-handle-border-width-down-medium: 8px;
+	--spectrum-slider-handle-border-width-down-large: 9px;
+	--spectrum-slider-handle-border-width-down-extra-large: 11px;
+	--spectrum-slider-bottom-to-handle-small: 6px;
+	--spectrum-slider-bottom-to-handle-medium: 10px;
+	--spectrum-slider-bottom-to-handle-large: 14px;
+	--spectrum-slider-bottom-to-handle-extra-large: 17px;
 	--spectrum-slider-control-to-field-label-small: 6px;
 	--spectrum-slider-control-to-field-label-medium: 10px;
 	--spectrum-slider-control-to-field-label-large: 14px;
@@ -365,11 +409,14 @@
 	--spectrum-side-navigation-bottom-to-text: 10px;
 	--spectrum-tray-top-to-content-area: 5px;
 	--spectrum-accordion-top-to-text-spacious-small: 12px;
-	--spectrum-text-to-visual-50: 8px;
-	--spectrum-text-to-visual-75: 9px;
-	--spectrum-text-to-visual-100: 10px;
-	--spectrum-text-to-visual-200: 11px;
-	--spectrum-text-to-visual-300: 13px;
+	--spectrum-drop-shadow-y: 2px;
+	--spectrum-drop-shadow-blur: 6px;
+	--spectrum-text-to-visual-50: 7px;
+	--spectrum-text-to-visual-75: 7px;
+	--spectrum-text-to-visual-100: 8px;
+	--spectrum-text-to-visual-200: 9px;
+	--spectrum-text-to-visual-300: 10px;
+	--spectrum-text-to-visual-400: 11px;
 	--spectrum-text-to-control-75: 11px;
 	--spectrum-text-to-control-100: 13px;
 	--spectrum-text-to-control-200: 14px;
@@ -381,38 +428,38 @@
 	--spectrum-component-height-300: 60px;
 	--spectrum-component-height-400: 70px;
 	--spectrum-component-height-500: 80px;
-	--spectrum-component-pill-edge-to-visual-75: 13px;
+	--spectrum-component-pill-edge-to-visual-75: 15px;
 	--spectrum-component-pill-edge-to-visual-100: 17px;
-	--spectrum-component-pill-edge-to-visual-200: 22px;
-	--spectrum-component-pill-edge-to-visual-300: 27px;
-	--spectrum-component-pill-edge-to-visual-only-75: 5px;
-	--spectrum-component-pill-edge-to-visual-only-100: 9px;
-	--spectrum-component-pill-edge-to-visual-only-200: 13px;
-	--spectrum-component-pill-edge-to-visual-only-300: 16px;
-	--spectrum-component-pill-edge-to-text-75: 15px;
+	--spectrum-component-pill-edge-to-visual-200: 21px;
+	--spectrum-component-pill-edge-to-visual-300: 28px;
+	--spectrum-component-pill-edge-to-visual-only-75: 6px;
+	--spectrum-component-pill-edge-to-visual-only-100: 8px;
+	--spectrum-component-pill-edge-to-visual-only-200: 11px;
+	--spectrum-component-pill-edge-to-visual-only-300: 15px;
+	--spectrum-component-pill-edge-to-text-75: 17px;
 	--spectrum-component-pill-edge-to-text-100: 20px;
-	--spectrum-component-pill-edge-to-text-200: 25px;
+	--spectrum-component-pill-edge-to-text-200: 24px;
 	--spectrum-component-pill-edge-to-text-300: 30px;
-	--spectrum-component-edge-to-visual-50: 7px;
-	--spectrum-component-edge-to-visual-75: 9px;
+	--spectrum-component-edge-to-visual-50: 9px;
+	--spectrum-component-edge-to-visual-75: 11px;
 	--spectrum-component-edge-to-visual-100: 12px;
-	--spectrum-component-edge-to-visual-200: 16px;
-	--spectrum-component-edge-to-visual-300: 19px;
-	--spectrum-component-edge-to-visual-only-50: 4px;
-	--spectrum-component-edge-to-visual-only-75: 5px;
-	--spectrum-component-edge-to-visual-only-100: 9px;
-	--spectrum-component-edge-to-visual-only-200: 13px;
-	--spectrum-component-edge-to-visual-only-300: 16px;
-	--spectrum-component-edge-to-text-50: 10px;
-	--spectrum-component-edge-to-text-75: 11px;
+	--spectrum-component-edge-to-visual-200: 15px;
+	--spectrum-component-edge-to-visual-300: 20px;
+	--spectrum-component-edge-to-visual-only-50: 5px;
+	--spectrum-component-edge-to-visual-only-75: 6px;
+	--spectrum-component-edge-to-visual-only-100: 8px;
+	--spectrum-component-edge-to-visual-only-200: 11px;
+	--spectrum-component-edge-to-visual-only-300: 15px;
+	--spectrum-component-edge-to-text-50: 11px;
+	--spectrum-component-edge-to-text-75: 13px;
 	--spectrum-component-edge-to-text-100: 15px;
-	--spectrum-component-edge-to-text-200: 19px;
+	--spectrum-component-edge-to-text-200: 18px;
 	--spectrum-component-edge-to-text-300: 22px;
-	--spectrum-component-top-to-workflow-icon-50: 4px;
-	--spectrum-component-top-to-workflow-icon-75: 5px;
-	--spectrum-component-top-to-workflow-icon-100: 9px;
-	--spectrum-component-top-to-workflow-icon-200: 13px;
-	--spectrum-component-top-to-workflow-icon-300: 16px;
+	--spectrum-component-top-to-workflow-icon-50: 5px;
+	--spectrum-component-top-to-workflow-icon-75: 6px;
+	--spectrum-component-top-to-workflow-icon-100: 8px;
+	--spectrum-component-top-to-workflow-icon-200: 11px;
+	--spectrum-component-top-to-workflow-icon-300: 15px;
 	--spectrum-component-top-to-text-50: 4px;
 	--spectrum-component-top-to-text-75: 5px;
 	--spectrum-component-top-to-text-100: 8px;
@@ -501,4 +548,91 @@
 	--spectrum-font-size-1100: 55px;
 	--spectrum-font-size-1200: 62px;
 	--spectrum-font-size-1300: 70px;
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--scale: large;
+	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
+	--spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
+	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
+	--spectrum-assetcard-focus-ring-border-radius: 9px;
+	--spectrum-assetcard-selectionindicator-margin: 15px;
+	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
+	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
+	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
+	--spectrum-button-top-to-text-small: 6px;
+	--spectrum-button-bottom-to-text-small: 5px;
+	--spectrum-button-top-to-text-medium: 9px;
+	--spectrum-button-bottom-to-text-medium: 10px;
+	--spectrum-button-top-to-text-large: 12px;
+	--spectrum-button-bottom-to-text-large: 13px;
+	--spectrum-button-top-to-text-extra-large: 16px;
+	--spectrum-button-bottom-to-text-extra-large: 17px;
+	--spectrum-coach-indicator-gap: 8px;
+	--spectrum-coach-indicator-ring-diameter: 20px;
+	--spectrum-coach-indicator-quiet-ring-diameter: 10px;
+	--spectrum-coachmark-buttongroup-display: none;
+	--spectrum-coachmark-buttongroup-mobile-display: flex;
+	--spectrum-coachmark-menu-display: none;
+	--spectrum-coachmark-menu-mobile-display: inline-flex;
+	--spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
+	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
+	--spectrum-colorwheel-colorarea-container-size: 182px;
+	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
+	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
+	--spectrum-datepicker-initial-width: 160px;
+	--spectrum-datepicker-generic-padding: 15px;
+	--spectrum-datepicker-dash-line-height: 30px;
+	--spectrum-datepicker-width-quiet-first: 90px;
+	--spectrum-datepicker-width-quiet-second: 20px;
+	--spectrum-datepicker-datetime-width-first: 45px;
+	--spectrum-datepicker-invalid-icon-to-button: 10px;
+	--spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
+	--spectrum-datepicker-input-datetime-width: 30px;
+	--spectrum-dial-border-radius: 20px;
+	--spectrum-dial-handle-position: 10px;
+	--spectrum-dial-handle-block-margin: 20px;
+	--spectrum-dial-handle-inline-margin: 20px;
+	--spectrum-dial-controls-margin: 10px;
+	--spectrum-dial-label-gap-y: 6px;
+	--spectrum-dial-label-container-top-to-text: 5px;
+	--spectrum-dialog-confirm-entry-animation-distance: 25px;
+	--spectrum-dialog-confirm-hero-height: 160px;
+	--spectrum-dialog-confirm-border-radius: 5px;
+	--spectrum-dialog-confirm-title-text-size: 19px;
+	--spectrum-dialog-confirm-description-text-size: 15px;
+	--spectrum-dialog-confirm-padding-grid: 24px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
+	--spectrum-menu-item-checkmark-height-small: 12px;
+	--spectrum-menu-item-checkmark-height-medium: 14px;
+	--spectrum-menu-item-checkmark-height-large: 16px;
+	--spectrum-menu-item-checkmark-height-extra-large: 16px;
+	--spectrum-menu-item-checkmark-width-small: 12px;
+	--spectrum-menu-item-checkmark-width-medium: 14px;
+	--spectrum-menu-item-checkmark-width-large: 16px;
+	--spectrum-menu-item-checkmark-width-extra-large: 16px;
+	--spectrum-pagination-textfield-width: 60px;
+	--spectrum-pagination-item-inline-spacing: 6px;
+	--spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+	--spectrum-slider-tick-mark-height: 13px;
+	--spectrum-slider-ramp-track-height: 20px;
+	--spectrum-treeview-item-indentation-medium: 20px;
+	--spectrum-treeview-item-indentation-small: 15px;
+	--spectrum-treeview-item-indentation-large: 25px;
+	--spectrum-treeview-item-indentation-extra-large: 30px;
+	--spectrum-treeview-indicator-inset-block-start: 6px;
+	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
+	--spectrum-tooltip-animation-distance: 5px;
+	--spectrum-ui-icon-medium-display: none;
+	--spectrum-ui-icon-large-display: block;
+	--spectrum-well-border-radius: 5px;
+	--spectrum-well-margin-top: 5px;
+	--spectrum-well-min-width: 300px;
+	--spectrum-well-padding: 20px;
+	--spectrum-workflow-icon-size-xxl: 40px;
+	--spectrum-workflow-icon-size-xxs: 15px;
 }
diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css
index 79b6c20a83..86d89e1635 100644
--- a/tokens/dist/css/light-vars.css
+++ b/tokens/dist/css/light-vars.css
@@ -11,38 +11,28 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum--light,
-.spectrum--lightest {
+.spectrum--light {
 	--spectrum-overlay-opacity: 0.4;
-	--spectrum-drop-shadow-color-rgb: 0, 0, 0;
-	--spectrum-drop-shadow-color-opacity: 0.15;
-	--spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
-	--spectrum-background-base-color: var(--spectrum-gray-200);
-	--spectrum-background-layer-1-color: var(--spectrum-gray-100);
-	--spectrum-background-layer-2-color: var(--spectrum-gray-50);
-	--spectrum-neutral-background-color-default: var(--spectrum-gray-800);
-	--spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-down: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900);
-	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-600);
-	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-700);
+	--spectrum-background-layer-2-color: var(--spectrum-gray-25);
+	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-700);
+	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800);
 	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800);
-	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-700);
+	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-800);
 	--spectrum-accent-background-color-default: var(--spectrum-accent-color-900);
 	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000);
-	--spectrum-accent-background-color-down: var(--spectrum-accent-color-1100);
+	--spectrum-accent-background-color-down: var(--spectrum-accent-color-1000);
 	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-1000);
 	--spectrum-informative-background-color-default: var(--spectrum-informative-color-900);
 	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-1000);
-	--spectrum-informative-background-color-down: var(--spectrum-informative-color-1100);
+	--spectrum-informative-background-color-down: var(--spectrum-informative-color-1000);
 	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-1000);
 	--spectrum-negative-background-color-default: var(--spectrum-negative-color-900);
 	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-1000);
-	--spectrum-negative-background-color-down: var(--spectrum-negative-color-1100);
+	--spectrum-negative-background-color-down: var(--spectrum-negative-color-1000);
 	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-1000);
 	--spectrum-positive-background-color-default: var(--spectrum-positive-color-900);
 	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-1000);
-	--spectrum-positive-background-color-down: var(--spectrum-positive-color-1100);
+	--spectrum-positive-background-color-down: var(--spectrum-positive-color-1000);
 	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-1000);
 	--spectrum-notice-background-color-default: var(--spectrum-notice-color-600);
 	--spectrum-gray-background-color-default: var(--spectrum-gray-700);
@@ -63,8 +53,8 @@
 	--spectrum-accent-visual-color: var(--spectrum-accent-color-800);
 	--spectrum-informative-visual-color: var(--spectrum-informative-color-800);
 	--spectrum-negative-visual-color: var(--spectrum-negative-color-800);
-	--spectrum-notice-visual-color: var(--spectrum-notice-color-700);
-	--spectrum-positive-visual-color: var(--spectrum-positive-color-700);
+	--spectrum-notice-visual-color: var(--spectrum-notice-color-800);
+	--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
 	--spectrum-gray-visual-color: var(--spectrum-gray-500);
 	--spectrum-red-visual-color: var(--spectrum-red-800);
 	--spectrum-orange-visual-color: var(--spectrum-orange-700);
@@ -79,395 +69,774 @@
 	--spectrum-purple-visual-color: var(--spectrum-purple-800);
 	--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800);
 	--spectrum-magenta-visual-color: var(--spectrum-magenta-800);
+	--spectrum-background-elevated-color: var(--spectrum-gray-25);
+	--spectrum-background-pasteboard-color: var(--spectrum-gray-100);
+	--spectrum-brown-visual-color: var(--spectrum-brown-800);
+	--spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800);
+	--spectrum-pink-visual-color: var(--spectrum-pink-800);
+	--spectrum-silver-visual-color: var(--spectrum-silver-800);
+	--spectrum-turquoise-visual-color: var(--spectrum-turquoise-800);
+	--spectrum-brown-background-color-default: var(--spectrum-brown-900);
+	--spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900);
+	--spectrum-pink-background-color-default: var(--spectrum-pink-900);
+	--spectrum-silver-background-color-default: var(--spectrum-silver-900);
+	--spectrum-turquoise-background-color-default: var(--spectrum-turquoise-900);
+	--spectrum-drop-shadow-color-100-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-100-opacity: 0.12;
+	--spectrum-drop-shadow-color-100: rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+	--spectrum-drop-shadow-color-200-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-200-opacity: 0.16;
+	--spectrum-drop-shadow-color-200: rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
+	--spectrum-drop-shadow-color-300-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-300-opacity: 0.2;
+	--spectrum-drop-shadow-color-300: rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity));
+	--spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-100);
+	--spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100);
+	--spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200);
+	--spectrum-green-subtle-background-color-default: var(--spectrum-green-200);
+	--spectrum-orange-subtle-background-color-default: var(--spectrum-orange-200);
+	--spectrum-red-subtle-background-color-default: var(--spectrum-red-200);
+	--spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200);
+	--spectrum-cinnamon-subtle-background-color-default: var(--spectrum-cinnamon-200);
+	--spectrum-celery-subtle-background-color-default: var(--spectrum-celery-200);
+	--spectrum-chartreuse-subtle-background-color-default: var(--spectrum-chartreuse-200);
+	--spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200);
+	--spectrum-fuchsia-subtle-background-color-default: var(--spectrum-fuchsia-200);
+	--spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-200);
+	--spectrum-magenta-subtle-background-color-default: var(--spectrum-magenta-200);
+	--spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200);
+	--spectrum-purple-subtle-background-color-default: var(--spectrum-purple-200);
+	--spectrum-seafoam-subtle-background-color-default: var(--spectrum-seafoam-200);
+	--spectrum-silver-subtle-background-color-default: var(--spectrum-silver-200);
+	--spectrum-turquoise-subtle-background-color-default: var(--spectrum-turquoise-200);
+	--spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-200);
 	--spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200);
-	--spectrum-gray-50-rgb: 255, 255, 255;
+	--spectrum-white-rgb: 255, 255, 255;
+	--spectrum-white: rgba(var(--spectrum-white-rgb));
+	--spectrum-transparent-white-25-rgb: 255, 255, 255;
+	--spectrum-transparent-white-25-opacity: 0;
+	--spectrum-transparent-white-25: rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity));
+	--spectrum-transparent-white-50-rgb: 255, 255, 255;
+	--spectrum-transparent-white-50-opacity: 0.04;
+	--spectrum-transparent-white-50: rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity));
+	--spectrum-transparent-white-75-rgb: 255, 255, 255;
+	--spectrum-transparent-white-75-opacity: 0.07;
+	--spectrum-transparent-white-75: rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity));
+	--spectrum-transparent-white-100-rgb: 255, 255, 255;
+	--spectrum-transparent-white-100-opacity: 0.11;
+	--spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+	--spectrum-transparent-white-200-rgb: 255, 255, 255;
+	--spectrum-transparent-white-200-opacity: 0.14;
+	--spectrum-transparent-white-200: rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
+	--spectrum-transparent-white-300-rgb: 255, 255, 255;
+	--spectrum-transparent-white-300-opacity: 0.17;
+	--spectrum-transparent-white-300: rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
+	--spectrum-transparent-white-400-rgb: 255, 255, 255;
+	--spectrum-transparent-white-400-opacity: 0.21;
+	--spectrum-transparent-white-400: rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
+	--spectrum-transparent-white-500-rgb: 255, 255, 255;
+	--spectrum-transparent-white-500-opacity: 0.39;
+	--spectrum-transparent-white-500: rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
+	--spectrum-transparent-white-600-rgb: 255, 255, 255;
+	--spectrum-transparent-white-600-opacity: 0.51;
+	--spectrum-transparent-white-600: rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
+	--spectrum-transparent-white-700-rgb: 255, 255, 255;
+	--spectrum-transparent-white-700-opacity: 0.66;
+	--spectrum-transparent-white-700: rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
+	--spectrum-transparent-white-800-rgb: 255, 255, 255;
+	--spectrum-transparent-white-800-opacity: 0.85;
+	--spectrum-transparent-white-800: rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
+	--spectrum-transparent-white-900-rgb: 255, 255, 255;
+	--spectrum-transparent-white-900-opacity: 0.94;
+	--spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity));
+	--spectrum-transparent-white-1000-rgb: 255, 255, 255;
+	--spectrum-transparent-white-1000: rgba(var(--spectrum-transparent-white-1000-rgb));
+	--spectrum-transparent-black-25-rgb: 0, 0, 0;
+	--spectrum-transparent-black-25-opacity: 0;
+	--spectrum-transparent-black-25: rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity));
+	--spectrum-transparent-black-50-rgb: 0, 0, 0;
+	--spectrum-transparent-black-50-opacity: 0.03;
+	--spectrum-transparent-black-50: rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity));
+	--spectrum-transparent-black-75-rgb: 0, 0, 0;
+	--spectrum-transparent-black-75-opacity: 0.05;
+	--spectrum-transparent-black-75: rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity));
+	--spectrum-transparent-black-100-rgb: 0, 0, 0;
+	--spectrum-transparent-black-100-opacity: 0.09;
+	--spectrum-transparent-black-100: rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
+	--spectrum-transparent-black-200-rgb: 0, 0, 0;
+	--spectrum-transparent-black-200-opacity: 0.12;
+	--spectrum-transparent-black-200: rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
+	--spectrum-transparent-black-300-rgb: 0, 0, 0;
+	--spectrum-transparent-black-300-opacity: 0.15;
+	--spectrum-transparent-black-300: rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
+	--spectrum-transparent-black-400-rgb: 0, 0, 0;
+	--spectrum-transparent-black-400-opacity: 0.22;
+	--spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
+	--spectrum-transparent-black-500-rgb: 0, 0, 0;
+	--spectrum-transparent-black-500-opacity: 0.44;
+	--spectrum-transparent-black-500: rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
+	--spectrum-transparent-black-600-rgb: 0, 0, 0;
+	--spectrum-transparent-black-600-opacity: 0.56;
+	--spectrum-transparent-black-600: rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
+	--spectrum-transparent-black-700-rgb: 0, 0, 0;
+	--spectrum-transparent-black-700-opacity: 0.69;
+	--spectrum-transparent-black-700: rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
+	--spectrum-transparent-black-800-rgb: 0, 0, 0;
+	--spectrum-transparent-black-800-opacity: 0.84;
+	--spectrum-transparent-black-800: rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
+	--spectrum-transparent-black-900-rgb: 0, 0, 0;
+	--spectrum-transparent-black-900-opacity: 0.93;
+	--spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity));
+	--spectrum-gray-25-rgb: 255, 255, 255;
+	--spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb));
+	--spectrum-gray-50-rgb: 248, 248, 248;
 	--spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-	--spectrum-gray-75-rgb: 253, 253, 253;
+	--spectrum-gray-75-rgb: 243, 243, 243;
 	--spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-	--spectrum-gray-100-rgb: 248, 248, 248;
+	--spectrum-gray-100-rgb: 233, 233, 233;
 	--spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-	--spectrum-gray-200-rgb: 230, 230, 230;
+	--spectrum-gray-200-rgb: 225, 225, 225;
 	--spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-	--spectrum-gray-300-rgb: 213, 213, 213;
+	--spectrum-gray-300-rgb: 218, 218, 218;
 	--spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-	--spectrum-gray-400-rgb: 177, 177, 177;
+	--spectrum-gray-400-rgb: 198, 198, 198;
 	--spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-	--spectrum-gray-500-rgb: 144, 144, 144;
+	--spectrum-gray-500-rgb: 143, 143, 143;
 	--spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-	--spectrum-gray-600-rgb: 109, 109, 109;
+	--spectrum-gray-600-rgb: 113, 113, 113;
 	--spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-	--spectrum-gray-700-rgb: 70, 70, 70;
+	--spectrum-gray-700-rgb: 80, 80, 80;
 	--spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
-	--spectrum-gray-800-rgb: 34, 34, 34;
+	--spectrum-gray-800-rgb: 41, 41, 41;
 	--spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
-	--spectrum-gray-900-rgb: 0, 0, 0;
+	--spectrum-gray-900-rgb: 19, 19, 19;
 	--spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
-	--spectrum-blue-100-rgb: 224, 242, 255;
+	--spectrum-gray-1000-rgb: 0, 0, 0;
+	--spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb));
+	--spectrum-blue-100-rgb: 245, 249, 255;
 	--spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-	--spectrum-blue-200-rgb: 202, 232, 255;
+	--spectrum-blue-200-rgb: 229, 240, 254;
 	--spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-	--spectrum-blue-300-rgb: 181, 222, 255;
+	--spectrum-blue-300-rgb: 203, 226, 254;
 	--spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-	--spectrum-blue-400-rgb: 150, 206, 253;
+	--spectrum-blue-400-rgb: 172, 207, 253;
 	--spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-	--spectrum-blue-500-rgb: 120, 187, 250;
+	--spectrum-blue-500-rgb: 142, 185, 252;
 	--spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-	--spectrum-blue-600-rgb: 89, 167, 246;
+	--spectrum-blue-600-rgb: 114, 158, 253;
 	--spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-	--spectrum-blue-700-rgb: 56, 146, 243;
+	--spectrum-blue-700-rgb: 93, 137, 255;
 	--spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-	--spectrum-blue-800-rgb: 20, 122, 243;
+	--spectrum-blue-800-rgb: 75, 117, 255;
 	--spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-	--spectrum-blue-900-rgb: 2, 101, 220;
+	--spectrum-blue-900-rgb: 59, 99, 251;
 	--spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-	--spectrum-blue-1000-rgb: 0, 84, 182;
+	--spectrum-blue-1000-rgb: 39, 77, 234;
 	--spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-	--spectrum-blue-1100-rgb: 0, 68, 145;
+	--spectrum-blue-1100-rgb: 29, 62, 207;
 	--spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-	--spectrum-blue-1200-rgb: 0, 53, 113;
+	--spectrum-blue-1200-rgb: 21, 50, 173;
 	--spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-	--spectrum-blue-1300-rgb: 0, 39, 84;
+	--spectrum-blue-1300-rgb: 16, 40, 140;
 	--spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-	--spectrum-blue-1400-rgb: 0, 28, 60;
+	--spectrum-blue-1400-rgb: 12, 31, 105;
 	--spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-	--spectrum-red-100-rgb: 255, 235, 231;
+	--spectrum-blue-1500-rgb: 14, 24, 67;
+	--spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb));
+	--spectrum-blue-1600-rgb: 7, 11, 30;
+	--spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb));
+	--spectrum-red-100-rgb: 255, 246, 245;
 	--spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-	--spectrum-red-200-rgb: 255, 221, 214;
+	--spectrum-red-200-rgb: 255, 235, 232;
 	--spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-	--spectrum-red-300-rgb: 255, 205, 195;
+	--spectrum-red-300-rgb: 255, 214, 209;
 	--spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-	--spectrum-red-400-rgb: 255, 183, 169;
+	--spectrum-red-400-rgb: 255, 188, 180;
 	--spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-	--spectrum-red-500-rgb: 255, 155, 136;
+	--spectrum-red-500-rgb: 255, 157, 145;
 	--spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-	--spectrum-red-600-rgb: 255, 124, 101;
+	--spectrum-red-600-rgb: 255, 118, 101;
 	--spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-	--spectrum-red-700-rgb: 247, 92, 70;
+	--spectrum-red-700-rgb: 255, 81, 61;
 	--spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-	--spectrum-red-800-rgb: 234, 56, 41;
+	--spectrum-red-800-rgb: 240, 56, 35;
 	--spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-	--spectrum-red-900-rgb: 211, 21, 16;
+	--spectrum-red-900-rgb: 215, 50, 32;
 	--spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-	--spectrum-red-1000-rgb: 180, 0, 0;
+	--spectrum-red-1000-rgb: 183, 40, 24;
 	--spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-	--spectrum-red-1100-rgb: 147, 0, 0;
+	--spectrum-red-1100-rgb: 156, 33, 19;
 	--spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-	--spectrum-red-1200-rgb: 116, 0, 0;
+	--spectrum-red-1200-rgb: 129, 27, 14;
 	--spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-	--spectrum-red-1300-rgb: 89, 0, 0;
+	--spectrum-red-1300-rgb: 104, 21, 10;
 	--spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-	--spectrum-red-1400-rgb: 67, 0, 0;
+	--spectrum-red-1400-rgb: 80, 16, 6;
 	--spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-	--spectrum-orange-100-rgb: 255, 236, 204;
+	--spectrum-red-1500-rgb: 59, 11, 4;
+	--spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb));
+	--spectrum-red-1600-rgb: 29, 5, 2;
+	--spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb));
+	--spectrum-orange-100-rgb: 255, 246, 231;
 	--spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-	--spectrum-orange-200-rgb: 255, 223, 173;
+	--spectrum-orange-200-rgb: 255, 236, 207;
 	--spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-	--spectrum-orange-300-rgb: 253, 210, 145;
+	--spectrum-orange-300-rgb: 255, 218, 158;
 	--spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-	--spectrum-orange-400-rgb: 255, 187, 99;
+	--spectrum-orange-400-rgb: 255, 193, 94;
 	--spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-	--spectrum-orange-500-rgb: 255, 160, 55;
+	--spectrum-orange-500-rgb: 255, 162, 19;
 	--spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-	--spectrum-orange-600-rgb: 246, 133, 17;
+	--spectrum-orange-600-rgb: 252, 125, 0;
 	--spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-	--spectrum-orange-700-rgb: 228, 111, 0;
+	--spectrum-orange-700-rgb: 232, 106, 0;
 	--spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-	--spectrum-orange-800-rgb: 203, 93, 0;
+	--spectrum-orange-800-rgb: 212, 91, 0;
 	--spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-	--spectrum-orange-900-rgb: 177, 76, 0;
+	--spectrum-orange-900-rgb: 194, 78, 0;
 	--spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-	--spectrum-orange-1000-rgb: 149, 61, 0;
+	--spectrum-orange-1000-rgb: 167, 62, 0;
 	--spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-	--spectrum-orange-1100-rgb: 122, 47, 0;
+	--spectrum-orange-1100-rgb: 144, 51, 0;
 	--spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-	--spectrum-orange-1200-rgb: 97, 35, 0;
+	--spectrum-orange-1200-rgb: 118, 41, 0;
 	--spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-	--spectrum-orange-1300-rgb: 73, 25, 1;
+	--spectrum-orange-1300-rgb: 95, 32, 0;
 	--spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-	--spectrum-orange-1400-rgb: 53, 18, 1;
+	--spectrum-orange-1400-rgb: 73, 24, 0;
 	--spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-	--spectrum-yellow-100-rgb: 251, 241, 152;
+	--spectrum-orange-1500-rgb: 52, 18, 0;
+	--spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb));
+	--spectrum-orange-1600-rgb: 25, 8, 0;
+	--spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb));
+	--spectrum-yellow-100-rgb: 255, 248, 204;
 	--spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-	--spectrum-yellow-200-rgb: 248, 231, 80;
+	--spectrum-yellow-200-rgb: 255, 241, 151;
 	--spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-	--spectrum-yellow-300-rgb: 248, 217, 4;
+	--spectrum-yellow-300-rgb: 255, 222, 44;
 	--spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-	--spectrum-yellow-400-rgb: 232, 198, 0;
+	--spectrum-yellow-400-rgb: 245, 199, 0;
 	--spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-	--spectrum-yellow-500-rgb: 215, 179, 0;
+	--spectrum-yellow-500-rgb: 230, 175, 0;
 	--spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-	--spectrum-yellow-600-rgb: 196, 159, 0;
+	--spectrum-yellow-600-rgb: 210, 149, 0;
 	--spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-	--spectrum-yellow-700-rgb: 176, 140, 0;
+	--spectrum-yellow-700-rgb: 193, 131, 0;
 	--spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-	--spectrum-yellow-800-rgb: 155, 120, 0;
+	--spectrum-yellow-800-rgb: 175, 116, 0;
 	--spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-	--spectrum-yellow-900-rgb: 133, 102, 0;
+	--spectrum-yellow-900-rgb: 158, 102, 0;
 	--spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-	--spectrum-yellow-1000-rgb: 112, 83, 0;
+	--spectrum-yellow-1000-rgb: 134, 85, 0;
 	--spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-	--spectrum-yellow-1100-rgb: 91, 67, 0;
+	--spectrum-yellow-1100-rgb: 114, 72, 0;
 	--spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-	--spectrum-yellow-1200-rgb: 72, 51, 0;
+	--spectrum-yellow-1200-rgb: 93, 59, 0;
 	--spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-	--spectrum-yellow-1300-rgb: 54, 37, 0;
+	--spectrum-yellow-1300-rgb: 75, 47, 0;
 	--spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-	--spectrum-yellow-1400-rgb: 40, 26, 0;
+	--spectrum-yellow-1400-rgb: 56, 35, 0;
 	--spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-	--spectrum-chartreuse-100-rgb: 219, 252, 110;
+	--spectrum-yellow-1500-rgb: 40, 25, 0;
+	--spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb));
+	--spectrum-yellow-1600-rgb: 18, 11, 0;
+	--spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb));
+	--spectrum-chartreuse-100-rgb: 246, 251, 222;
 	--spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-	--spectrum-chartreuse-200-rgb: 203, 244, 67;
+	--spectrum-chartreuse-200-rgb: 234, 246, 173;
 	--spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-	--spectrum-chartreuse-300-rgb: 188, 233, 42;
+	--spectrum-chartreuse-300-rgb: 208, 236, 70;
 	--spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-	--spectrum-chartreuse-400-rgb: 170, 216, 22;
+	--spectrum-chartreuse-400-rgb: 182, 219, 0;
 	--spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-	--spectrum-chartreuse-500-rgb: 152, 197, 10;
+	--spectrum-chartreuse-500-rgb: 163, 196, 0;
 	--spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-	--spectrum-chartreuse-600-rgb: 135, 177, 3;
+	--spectrum-chartreuse-600-rgb: 143, 172, 0;
 	--spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-	--spectrum-chartreuse-700-rgb: 118, 156, 0;
+	--spectrum-chartreuse-700-rgb: 128, 153, 0;
 	--spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-	--spectrum-chartreuse-800-rgb: 103, 136, 0;
+	--spectrum-chartreuse-800-rgb: 114, 137, 0;
 	--spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-	--spectrum-chartreuse-900-rgb: 87, 116, 0;
+	--spectrum-chartreuse-900-rgb: 102, 122, 0;
 	--spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-	--spectrum-chartreuse-1000-rgb: 72, 96, 0;
+	--spectrum-chartreuse-1000-rgb: 86, 103, 0;
 	--spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-	--spectrum-chartreuse-1100-rgb: 58, 77, 0;
+	--spectrum-chartreuse-1100-rgb: 73, 87, 0;
 	--spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-	--spectrum-chartreuse-1200-rgb: 44, 59, 0;
+	--spectrum-chartreuse-1200-rgb: 60, 71, 0;
 	--spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-	--spectrum-chartreuse-1300-rgb: 33, 44, 0;
+	--spectrum-chartreuse-1300-rgb: 47, 57, 0;
 	--spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-	--spectrum-chartreuse-1400-rgb: 24, 31, 0;
+	--spectrum-chartreuse-1400-rgb: 35, 43, 0;
 	--spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-	--spectrum-celery-100-rgb: 205, 252, 191;
+	--spectrum-chartreuse-1500-rgb: 25, 30, 0;
+	--spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb));
+	--spectrum-chartreuse-1600-rgb: 11, 14, 0;
+	--spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb));
+	--spectrum-celery-100-rgb: 235, 255, 220;
 	--spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-	--spectrum-celery-200-rgb: 174, 246, 157;
+	--spectrum-celery-200-rgb: 197, 255, 156;
 	--spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-	--spectrum-celery-300-rgb: 150, 238, 133;
+	--spectrum-celery-300-rgb: 157, 247, 92;
 	--spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-	--spectrum-celery-400-rgb: 114, 224, 106;
+	--spectrum-celery-400-rgb: 129, 228, 58;
 	--spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-	--spectrum-celery-500-rgb: 78, 207, 80;
+	--spectrum-celery-500-rgb: 110, 206, 42;
 	--spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-	--spectrum-celery-600-rgb: 39, 187, 54;
+	--spectrum-celery-600-rgb: 93, 180, 31;
 	--spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-	--spectrum-celery-700-rgb: 7, 167, 33;
+	--spectrum-celery-700-rgb: 82, 161, 25;
 	--spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-	--spectrum-celery-800-rgb: 0, 145, 18;
+	--spectrum-celery-800-rgb: 72, 144, 20;
 	--spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-	--spectrum-celery-900-rgb: 0, 124, 15;
+	--spectrum-celery-900-rgb: 64, 129, 17;
 	--spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-	--spectrum-celery-1000-rgb: 0, 103, 15;
+	--spectrum-celery-1000-rgb: 52, 109, 12;
 	--spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-	--spectrum-celery-1100-rgb: 0, 83, 13;
+	--spectrum-celery-1100-rgb: 44, 92, 9;
 	--spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-	--spectrum-celery-1200-rgb: 0, 64, 10;
+	--spectrum-celery-1200-rgb: 35, 75, 6;
 	--spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-	--spectrum-celery-1300-rgb: 0, 48, 7;
+	--spectrum-celery-1300-rgb: 27, 60, 3;
 	--spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-	--spectrum-celery-1400-rgb: 0, 34, 5;
+	--spectrum-celery-1400-rgb: 19, 46, 0;
 	--spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-	--spectrum-green-100-rgb: 206, 248, 224;
+	--spectrum-celery-1500-rgb: 12, 33, 0;
+	--spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb));
+	--spectrum-celery-1600-rgb: 4, 15, 0;
+	--spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb));
+	--spectrum-green-100-rgb: 237, 252, 241;
 	--spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-	--spectrum-green-200-rgb: 173, 244, 206;
+	--spectrum-green-200-rgb: 215, 247, 225;
 	--spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-	--spectrum-green-300-rgb: 137, 236, 188;
+	--spectrum-green-300-rgb: 173, 238, 197;
 	--spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-	--spectrum-green-400-rgb: 103, 222, 168;
+	--spectrum-green-400-rgb: 107, 227, 162;
 	--spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-	--spectrum-green-500-rgb: 73, 204, 147;
+	--spectrum-green-500-rgb: 43, 209, 125;
 	--spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-	--spectrum-green-600-rgb: 47, 184, 128;
+	--spectrum-green-600-rgb: 18, 184, 103;
 	--spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-	--spectrum-green-700-rgb: 21, 164, 110;
+	--spectrum-green-700-rgb: 11, 164, 93;
 	--spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-	--spectrum-green-800-rgb: 0, 143, 93;
+	--spectrum-green-800-rgb: 7, 147, 85;
 	--spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-	--spectrum-green-900-rgb: 0, 122, 77;
+	--spectrum-green-900-rgb: 5, 131, 78;
 	--spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-	--spectrum-green-1000-rgb: 0, 101, 62;
+	--spectrum-green-1000-rgb: 3, 110, 69;
 	--spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-	--spectrum-green-1100-rgb: 0, 81, 50;
+	--spectrum-green-1100-rgb: 2, 93, 60;
 	--spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-	--spectrum-green-1200-rgb: 5, 63, 39;
+	--spectrum-green-1200-rgb: 1, 76, 52;
 	--spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-	--spectrum-green-1300-rgb: 10, 46, 29;
+	--spectrum-green-1300-rgb: 0, 61, 44;
 	--spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-	--spectrum-green-1400-rgb: 10, 32, 21;
+	--spectrum-green-1400-rgb: 0, 46, 34;
 	--spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-	--spectrum-seafoam-100-rgb: 206, 247, 243;
+	--spectrum-green-1500-rgb: 0, 33, 25;
+	--spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb));
+	--spectrum-green-1600-rgb: 0, 15, 12;
+	--spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb));
+	--spectrum-seafoam-100-rgb: 235, 251, 246;
 	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-	--spectrum-seafoam-200-rgb: 170, 241, 234;
+	--spectrum-seafoam-200-rgb: 211, 246, 234;
 	--spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-	--spectrum-seafoam-300-rgb: 140, 233, 226;
+	--spectrum-seafoam-300-rgb: 169, 237, 216;
 	--spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-	--spectrum-seafoam-400-rgb: 101, 218, 210;
+	--spectrum-seafoam-400-rgb: 92, 225, 194;
 	--spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-	--spectrum-seafoam-500-rgb: 63, 201, 193;
+	--spectrum-seafoam-500-rgb: 16, 207, 169;
 	--spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-	--spectrum-seafoam-600-rgb: 15, 181, 174;
+	--spectrum-seafoam-600-rgb: 13, 181, 149;
 	--spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-	--spectrum-seafoam-700-rgb: 0, 161, 154;
+	--spectrum-seafoam-700-rgb: 11, 162, 134;
 	--spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-	--spectrum-seafoam-800-rgb: 0, 140, 135;
+	--spectrum-seafoam-800-rgb: 9, 144, 120;
 	--spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-	--spectrum-seafoam-900-rgb: 0, 119, 114;
+	--spectrum-seafoam-900-rgb: 7, 129, 109;
 	--spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-	--spectrum-seafoam-1000-rgb: 0, 99, 95;
+	--spectrum-seafoam-1000-rgb: 5, 108, 92;
 	--spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-	--spectrum-seafoam-1100-rgb: 12, 79, 76;
+	--spectrum-seafoam-1100-rgb: 3, 92, 80;
 	--spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-	--spectrum-seafoam-1200-rgb: 18, 60, 58;
+	--spectrum-seafoam-1200-rgb: 1, 75, 67;
 	--spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-	--spectrum-seafoam-1300-rgb: 18, 44, 43;
+	--spectrum-seafoam-1300-rgb: 0, 60, 54;
 	--spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-	--spectrum-seafoam-1400-rgb: 15, 31, 30;
+	--spectrum-seafoam-1400-rgb: 0, 46, 40;
 	--spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-	--spectrum-cyan-100-rgb: 197, 248, 255;
+	--spectrum-seafoam-1500-rgb: 0, 33, 29;
+	--spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb));
+	--spectrum-seafoam-1600-rgb: 0, 15, 14;
+	--spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb));
+	--spectrum-cyan-100-rgb: 238, 250, 254;
 	--spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-	--spectrum-cyan-200-rgb: 164, 240, 255;
+	--spectrum-cyan-200-rgb: 217, 244, 253;
 	--spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-	--spectrum-cyan-300-rgb: 136, 231, 250;
+	--spectrum-cyan-300-rgb: 183, 231, 252;
 	--spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-	--spectrum-cyan-400-rgb: 96, 216, 243;
+	--spectrum-cyan-400-rgb: 138, 213, 255;
 	--spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-	--spectrum-cyan-500-rgb: 51, 197, 232;
+	--spectrum-cyan-500-rgb: 92, 192, 255;
 	--spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-	--spectrum-cyan-600-rgb: 18, 176, 218;
+	--spectrum-cyan-600-rgb: 48, 167, 254;
 	--spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-	--spectrum-cyan-700-rgb: 1, 156, 200;
+	--spectrum-cyan-700-rgb: 29, 149, 231;
 	--spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-	--spectrum-cyan-800-rgb: 0, 134, 180;
+	--spectrum-cyan-800-rgb: 18, 134, 205;
 	--spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-	--spectrum-cyan-900-rgb: 0, 113, 159;
+	--spectrum-cyan-900-rgb: 11, 120, 179;
 	--spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-	--spectrum-cyan-1000-rgb: 0, 93, 137;
+	--spectrum-cyan-1000-rgb: 4, 102, 145;
 	--spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-	--spectrum-cyan-1100-rgb: 0, 74, 115;
+	--spectrum-cyan-1100-rgb: 0, 87, 121;
 	--spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-	--spectrum-cyan-1200-rgb: 0, 57, 93;
+	--spectrum-cyan-1200-rgb: 0, 71, 98;
 	--spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-	--spectrum-cyan-1300-rgb: 0, 42, 70;
+	--spectrum-cyan-1300-rgb: 0, 57, 78;
 	--spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-	--spectrum-cyan-1400-rgb: 0, 30, 51;
+	--spectrum-cyan-1400-rgb: 0, 43, 59;
 	--spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-	--spectrum-indigo-100-rgb: 237, 238, 255;
+	--spectrum-cyan-1500-rgb: 0, 31, 43;
+	--spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb));
+	--spectrum-cyan-1600-rgb: 0, 14, 20;
+	--spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb));
+	--spectrum-indigo-100-rgb: 247, 248, 255;
 	--spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-	--spectrum-indigo-200-rgb: 224, 226, 255;
+	--spectrum-indigo-200-rgb: 235, 238, 255;
 	--spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-	--spectrum-indigo-300-rgb: 211, 213, 255;
+	--spectrum-indigo-300-rgb: 216, 222, 255;
 	--spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-	--spectrum-indigo-400-rgb: 193, 196, 255;
+	--spectrum-indigo-400-rgb: 192, 201, 255;
 	--spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-	--spectrum-indigo-500-rgb: 172, 175, 255;
+	--spectrum-indigo-500-rgb: 167, 178, 255;
 	--spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-	--spectrum-indigo-600-rgb: 149, 153, 255;
+	--spectrum-indigo-600-rgb: 145, 151, 254;
 	--spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-	--spectrum-indigo-700-rgb: 126, 132, 252;
+	--spectrum-indigo-700-rgb: 132, 128, 254;
 	--spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-	--spectrum-indigo-800-rgb: 104, 109, 244;
+	--spectrum-indigo-800-rgb: 122, 106, 253;
 	--spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-	--spectrum-indigo-900-rgb: 82, 88, 228;
+	--spectrum-indigo-900-rgb: 113, 85, 250;
 	--spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-	--spectrum-indigo-1000-rgb: 64, 70, 202;
+	--spectrum-indigo-1000-rgb: 99, 56, 238;
 	--spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-	--spectrum-indigo-1100-rgb: 50, 54, 168;
+	--spectrum-indigo-1100-rgb: 84, 36, 219;
 	--spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-	--spectrum-indigo-1200-rgb: 38, 41, 134;
+	--spectrum-indigo-1200-rgb: 69, 19, 191;
 	--spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-	--spectrum-indigo-1300-rgb: 27, 30, 100;
+	--spectrum-indigo-1300-rgb: 55, 6, 160;
 	--spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-	--spectrum-indigo-1400-rgb: 20, 22, 72;
+	--spectrum-indigo-1400-rgb: 42, 0, 129;
 	--spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-	--spectrum-purple-100-rgb: 246, 235, 255;
+	--spectrum-indigo-1500-rgb: 31, 0, 98;
+	--spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb));
+	--spectrum-indigo-1600-rgb: 17, 0, 54;
+	--spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb));
+	--spectrum-purple-100-rgb: 251, 247, 254;
 	--spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-	--spectrum-purple-200-rgb: 238, 221, 255;
+	--spectrum-purple-200-rgb: 244, 235, 252;
 	--spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-	--spectrum-purple-300-rgb: 230, 208, 255;
+	--spectrum-purple-300-rgb: 235, 218, 249;
 	--spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-	--spectrum-purple-400-rgb: 219, 187, 254;
+	--spectrum-purple-400-rgb: 221, 193, 246;
 	--spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-	--spectrum-purple-500-rgb: 204, 164, 253;
+	--spectrum-purple-500-rgb: 208, 167, 243;
 	--spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-	--spectrum-purple-600-rgb: 189, 139, 252;
+	--spectrum-purple-600-rgb: 191, 138, 238;
 	--spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-	--spectrum-purple-700-rgb: 174, 114, 249;
+	--spectrum-purple-700-rgb: 178, 114, 235;
 	--spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-	--spectrum-purple-800-rgb: 157, 87, 244;
+	--spectrum-purple-800-rgb: 166, 92, 231;
 	--spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-	--spectrum-purple-900-rgb: 137, 61, 231;
+	--spectrum-purple-900-rgb: 154, 71, 226;
 	--spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-	--spectrum-purple-1000-rgb: 115, 38, 211;
+	--spectrum-purple-1000-rgb: 134, 40, 217;
 	--spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-	--spectrum-purple-1100-rgb: 93, 19, 183;
+	--spectrum-purple-1100-rgb: 115, 13, 204;
 	--spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-	--spectrum-purple-1200-rgb: 71, 12, 148;
+	--spectrum-purple-1200-rgb: 93, 0, 177;
 	--spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-	--spectrum-purple-1300-rgb: 51, 16, 106;
+	--spectrum-purple-1300-rgb: 75, 0, 144;
 	--spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-	--spectrum-purple-1400-rgb: 35, 15, 73;
+	--spectrum-purple-1400-rgb: 59, 0, 111;
 	--spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-	--spectrum-fuchsia-100-rgb: 255, 233, 252;
+	--spectrum-purple-1500-rgb: 44, 0, 84;
+	--spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb));
+	--spectrum-purple-1600-rgb: 23, 0, 45;
+	--spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb));
+	--spectrum-fuchsia-100-rgb: 254, 246, 255;
 	--spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-	--spectrum-fuchsia-200-rgb: 255, 218, 250;
+	--spectrum-fuchsia-200-rgb: 253, 233, 255;
 	--spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-	--spectrum-fuchsia-300-rgb: 254, 199, 248;
+	--spectrum-fuchsia-300-rgb: 250, 211, 255;
 	--spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-	--spectrum-fuchsia-400-rgb: 251, 174, 246;
+	--spectrum-fuchsia-400-rgb: 247, 181, 255;
 	--spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-	--spectrum-fuchsia-500-rgb: 245, 146, 243;
+	--spectrum-fuchsia-500-rgb: 243, 147, 255;
 	--spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-	--spectrum-fuchsia-600-rgb: 237, 116, 237;
+	--spectrum-fuchsia-600-rgb: 236, 105, 255;
 	--spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-	--spectrum-fuchsia-700-rgb: 224, 85, 226;
+	--spectrum-fuchsia-700-rgb: 223, 77, 245;
 	--spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-	--spectrum-fuchsia-800-rgb: 205, 58, 206;
+	--spectrum-fuchsia-800-rgb: 200, 68, 220;
 	--spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-	--spectrum-fuchsia-900-rgb: 182, 34, 183;
+	--spectrum-fuchsia-900-rgb: 181, 57, 200;
 	--spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-	--spectrum-fuchsia-1000-rgb: 157, 3, 158;
+	--spectrum-fuchsia-1000-rgb: 156, 40, 175;
 	--spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-	--spectrum-fuchsia-1100-rgb: 128, 0, 129;
+	--spectrum-fuchsia-1100-rgb: 135, 27, 154;
 	--spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-	--spectrum-fuchsia-1200-rgb: 100, 6, 100;
+	--spectrum-fuchsia-1200-rgb: 113, 15, 131;
 	--spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-	--spectrum-fuchsia-1300-rgb: 71, 14, 70;
+	--spectrum-fuchsia-1300-rgb: 92, 4, 109;
 	--spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-	--spectrum-fuchsia-1400-rgb: 50, 13, 49;
+	--spectrum-fuchsia-1400-rgb: 72, 0, 88;
 	--spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-	--spectrum-magenta-100-rgb: 255, 234, 241;
+	--spectrum-fuchsia-1500-rgb: 54, 0, 66;
+	--spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb));
+	--spectrum-fuchsia-1600-rgb: 29, 0, 35;
+	--spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb));
+	--spectrum-magenta-100-rgb: 255, 245, 248;
 	--spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-	--spectrum-magenta-200-rgb: 255, 220, 232;
+	--spectrum-magenta-200-rgb: 255, 232, 240;
 	--spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-	--spectrum-magenta-300-rgb: 255, 202, 221;
+	--spectrum-magenta-300-rgb: 255, 213, 227;
 	--spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-	--spectrum-magenta-400-rgb: 255, 178, 206;
+	--spectrum-magenta-400-rgb: 255, 185, 208;
 	--spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-	--spectrum-magenta-500-rgb: 255, 149, 189;
+	--spectrum-magenta-500-rgb: 255, 152, 187;
 	--spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-	--spectrum-magenta-600-rgb: 250, 119, 170;
+	--spectrum-magenta-600-rgb: 255, 112, 159;
 	--spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-	--spectrum-magenta-700-rgb: 239, 90, 152;
+	--spectrum-magenta-700-rgb: 255, 72, 133;
 	--spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-	--spectrum-magenta-800-rgb: 222, 61, 130;
+	--spectrum-magenta-800-rgb: 240, 45, 110;
 	--spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-	--spectrum-magenta-900-rgb: 200, 34, 105;
+	--spectrum-magenta-900-rgb: 217, 35, 97;
 	--spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-	--spectrum-magenta-1000-rgb: 173, 9, 85;
+	--spectrum-magenta-1000-rgb: 186, 22, 80;
 	--spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-	--spectrum-magenta-1100-rgb: 142, 0, 69;
+	--spectrum-magenta-1100-rgb: 163, 5, 62;
 	--spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-	--spectrum-magenta-1200-rgb: 112, 0, 55;
+	--spectrum-magenta-1200-rgb: 136, 0, 51;
 	--spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-	--spectrum-magenta-1300-rgb: 84, 3, 42;
+	--spectrum-magenta-1300-rgb: 111, 0, 40;
 	--spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
-	--spectrum-magenta-1400-rgb: 60, 6, 29;
+	--spectrum-magenta-1400-rgb: 86, 0, 30;
 	--spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
+	--spectrum-magenta-1500-rgb: 64, 0, 22;
+	--spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb));
+	--spectrum-magenta-1600-rgb: 35, 0, 12;
+	--spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb));
+	--spectrum-pink-100-rgb: 255, 246, 252;
+	--spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb));
+	--spectrum-pink-200-rgb: 255, 232, 247;
+	--spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb));
+	--spectrum-pink-300-rgb: 255, 211, 240;
+	--spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb));
+	--spectrum-pink-400-rgb: 255, 181, 230;
+	--spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb));
+	--spectrum-pink-500-rgb: 255, 148, 219;
+	--spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb));
+	--spectrum-pink-600-rgb: 255, 103, 204;
+	--spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb));
+	--spectrum-pink-700-rgb: 242, 76, 184;
+	--spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb));
+	--spectrum-pink-800-rgb: 228, 52, 163;
+	--spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb));
+	--spectrum-pink-900-rgb: 206, 42, 146;
+	--spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb));
+	--spectrum-pink-1000-rgb: 176, 31, 123;
+	--spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb));
+	--spectrum-pink-1100-rgb: 152, 22, 104;
+	--spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb));
+	--spectrum-pink-1200-rgb: 128, 12, 85;
+	--spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb));
+	--spectrum-pink-1300-rgb: 105, 3, 68;
+	--spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb));
+	--spectrum-pink-1400-rgb: 83, 0, 53;
+	--spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb));
+	--spectrum-pink-1500-rgb: 62, 0, 39;
+	--spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb));
+	--spectrum-pink-1600-rgb: 33, 0, 21;
+	--spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb));
+	--spectrum-turquoise-100-rgb: 238, 251, 251;
+	--spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb));
+	--spectrum-turquoise-200-rgb: 209, 245, 245;
+	--spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb));
+	--spectrum-turquoise-300-rgb: 169, 236, 237;
+	--spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb));
+	--spectrum-turquoise-400-rgb: 111, 221, 228;
+	--spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb));
+	--spectrum-turquoise-500-rgb: 39, 202, 216;
+	--spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb));
+	--spectrum-turquoise-600-rgb: 15, 177, 192;
+	--spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb));
+	--spectrum-turquoise-700-rgb: 12, 158, 171;
+	--spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb));
+	--spectrum-turquoise-800-rgb: 10, 141, 153;
+	--spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb));
+	--spectrum-turquoise-900-rgb: 8, 126, 137;
+	--spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb));
+	--spectrum-turquoise-1000-rgb: 5, 107, 116;
+	--spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb));
+	--spectrum-turquoise-1100-rgb: 3, 90, 98;
+	--spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb));
+	--spectrum-turquoise-1200-rgb: 1, 74, 81;
+	--spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb));
+	--spectrum-turquoise-1300-rgb: 0, 59, 65;
+	--spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb));
+	--spectrum-turquoise-1400-rgb: 0, 44, 49;
+	--spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb));
+	--spectrum-turquoise-1500-rgb: 0, 32, 35;
+	--spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb));
+	--spectrum-turquoise-1600-rgb: 0, 15, 17;
+	--spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb));
+	--spectrum-brown-100-rgb: 252, 247, 242;
+	--spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb));
+	--spectrum-brown-200-rgb: 247, 238, 225;
+	--spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb));
+	--spectrum-brown-300-rgb: 239, 221, 195;
+	--spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb));
+	--spectrum-brown-400-rgb: 229, 200, 157;
+	--spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb));
+	--spectrum-brown-500-rgb: 214, 177, 123;
+	--spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb));
+	--spectrum-brown-600-rgb: 190, 155, 104;
+	--spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb));
+	--spectrum-brown-700-rgb: 171, 138, 90;
+	--spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb));
+	--spectrum-brown-800-rgb: 154, 123, 77;
+	--spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb));
+	--spectrum-brown-900-rgb: 139, 109, 66;
+	--spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb));
+	--spectrum-brown-1000-rgb: 119, 91, 50;
+	--spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb));
+	--spectrum-brown-1100-rgb: 103, 76, 35;
+	--spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb));
+	--spectrum-brown-1200-rgb: 88, 61, 21;
+	--spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb));
+	--spectrum-brown-1300-rgb: 70, 49, 17;
+	--spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb));
+	--spectrum-brown-1400-rgb: 52, 37, 13;
+	--spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb));
+	--spectrum-brown-1500-rgb: 38, 26, 9;
+	--spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb));
+	--spectrum-brown-1600-rgb: 16, 12, 4;
+	--spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb));
+	--spectrum-silver-100-rgb: 247, 247, 247;
+	--spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb));
+	--spectrum-silver-200-rgb: 239, 239, 239;
+	--spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb));
+	--spectrum-silver-300-rgb: 223, 223, 223;
+	--spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb));
+	--spectrum-silver-400-rgb: 204, 204, 204;
+	--spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb));
+	--spectrum-silver-500-rgb: 183, 183, 183;
+	--spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb));
+	--spectrum-silver-600-rgb: 160, 160, 160;
+	--spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb));
+	--spectrum-silver-700-rgb: 143, 143, 143;
+	--spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb));
+	--spectrum-silver-800-rgb: 128, 128, 128;
+	--spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb));
+	--spectrum-silver-900-rgb: 114, 114, 114;
+	--spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb));
+	--spectrum-silver-1000-rgb: 96, 96, 96;
+	--spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb));
+	--spectrum-silver-1100-rgb: 81, 81, 81;
+	--spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb));
+	--spectrum-silver-1200-rgb: 66, 66, 66;
+	--spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb));
+	--spectrum-silver-1300-rgb: 52, 52, 52;
+	--spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb));
+	--spectrum-silver-1400-rgb: 39, 39, 39;
+	--spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb));
+	--spectrum-silver-1500-rgb: 28, 28, 28;
+	--spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb));
+	--spectrum-silver-1600-rgb: 12, 12, 12;
+	--spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb));
+	--spectrum-cinnamon-100-rgb: 253, 247, 243;
+	--spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb));
+	--spectrum-cinnamon-200-rgb: 249, 236, 229;
+	--spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb));
+	--spectrum-cinnamon-300-rgb: 244, 218, 203;
+	--spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb));
+	--spectrum-cinnamon-400-rgb: 237, 196, 172;
+	--spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb));
+	--spectrum-cinnamon-500-rgb: 229, 170, 136;
+	--spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb));
+	--spectrum-cinnamon-600-rgb: 212, 145, 108;
+	--spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb));
+	--spectrum-cinnamon-700-rgb: 198, 126, 88;
+	--spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb));
+	--spectrum-cinnamon-800-rgb: 184, 109, 70;
+	--spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb));
+	--spectrum-cinnamon-900-rgb: 170, 94, 56;
+	--spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb));
+	--spectrum-cinnamon-1000-rgb: 147, 77, 43;
+	--spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb));
+	--spectrum-cinnamon-1100-rgb: 128, 62, 32;
+	--spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb));
+	--spectrum-cinnamon-1200-rgb: 110, 48, 21;
+	--spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb));
+	--spectrum-cinnamon-1300-rgb: 92, 35, 11;
+	--spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb));
+	--spectrum-cinnamon-1400-rgb: 72, 25, 6;
+	--spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb));
+	--spectrum-cinnamon-1500-rgb: 52, 18, 4;
+	--spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb));
+	--spectrum-cinnamon-1600-rgb: 24, 8, 2;
+	--spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb));
 	--spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900);
 	--spectrum-icon-color-green-primary-default: var(--spectrum-green-900);
 	--spectrum-icon-color-red-primary-default: var(--spectrum-red-900);
 	--spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400);
+	--spectrum-negative-subdued-background-color-default: var(--spectrum-negative-subtle-background-color-default);
+	--spectrum-accent-subtle-background-color-default: var(--spectrum-accent-color-200);
+	--spectrum-informative-subtle-background-color-default: var(--spectrum-informative-color-200);
+	--spectrum-positive-subtle-background-color-default: var(--spectrum-positive-color-200);
+	--spectrum-notice-subtle-background-color-default: var(--spectrum-notice-color-200);
+	--spectrum-negative-subtle-background-color-default: var(--spectrum-negative-color-200);
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--color-scheme: light;
+	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
+	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
+	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
+	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
+	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
+	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-badge-label-icon-color-primary: var(--spectrum-white);
+	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
+	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200);
+	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
+	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
+	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
+	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
+	--spectrum-dropindicator-color: var(--spectrum-blue-800);
+	--spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
+	--spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
+	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
+	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
+	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
+	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
+	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
+	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
+	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-swatch-border-color-rgb: 0, 0, 0;
+	--spectrum-swatch-border-color-opacity: 0.51;
+	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
+	--spectrum-swatch-border-color-light-rgb: 0, 0, 0;
+	--spectrum-swatch-border-color-light-opacity: 0.2;
+	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
+	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
+	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
 }
diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css
index b9e40a3e3f..2aebf6552e 100644
--- a/tokens/dist/css/medium-vars.css
+++ b/tokens/dist/css/medium-vars.css
@@ -14,9 +14,9 @@
 .spectrum--medium {
 	--spectrum-workflow-icon-size-50: 14px;
 	--spectrum-workflow-icon-size-75: 16px;
-	--spectrum-workflow-icon-size-100: 18px;
-	--spectrum-workflow-icon-size-200: 20px;
-	--spectrum-workflow-icon-size-300: 22px;
+	--spectrum-workflow-icon-size-100: 20px;
+	--spectrum-workflow-icon-size-200: 22px;
+	--spectrum-workflow-icon-size-300: 26px;
 	--spectrum-arrow-icon-size-75: 10px;
 	--spectrum-arrow-icon-size-100: 10px;
 	--spectrum-arrow-icon-size-200: 12px;
@@ -62,6 +62,34 @@
 	--spectrum-dash-icon-size-400: 14px;
 	--spectrum-dash-icon-size-500: 16px;
 	--spectrum-dash-icon-size-600: 18px;
+	--spectrum-checkbox-control-size-small: 12px;
+	--spectrum-checkbox-control-size-medium: 14px;
+	--spectrum-checkbox-control-size-large: 16px;
+	--spectrum-checkbox-control-size-extra-large: 18px;
+	--spectrum-checkbox-top-to-control-small: 6px;
+	--spectrum-checkbox-top-to-control-medium: 9px;
+	--spectrum-checkbox-top-to-control-large: 12px;
+	--spectrum-checkbox-top-to-control-extra-large: 15px;
+	--spectrum-switch-control-width-small: 23px;
+	--spectrum-switch-control-width-medium: 26px;
+	--spectrum-switch-control-width-large: 29px;
+	--spectrum-switch-control-width-extra-large: 33px;
+	--spectrum-switch-control-height-small: 12px;
+	--spectrum-switch-control-height-medium: 14px;
+	--spectrum-switch-control-height-large: 16px;
+	--spectrum-switch-control-height-extra-large: 18px;
+	--spectrum-switch-top-to-control-small: 6px;
+	--spectrum-switch-top-to-control-medium: 9px;
+	--spectrum-switch-top-to-control-large: 12px;
+	--spectrum-switch-top-to-control-extra-large: 15px;
+	--spectrum-radio-button-control-size-small: 12px;
+	--spectrum-radio-button-control-size-medium: 14px;
+	--spectrum-radio-button-control-size-large: 16px;
+	--spectrum-radio-button-control-size-extra-large: 18px;
+	--spectrum-radio-button-top-to-control-small: 6px;
+	--spectrum-radio-button-top-to-control-medium: 9px;
+	--spectrum-radio-button-top-to-control-large: 12px;
+	--spectrum-radio-button-top-to-control-extra-large: 15px;
 	--spectrum-field-label-text-to-asterisk-small: 4px;
 	--spectrum-field-label-text-to-asterisk-medium: 4px;
 	--spectrum-field-label-text-to-asterisk-large: 5px;
@@ -137,6 +165,22 @@
 	--spectrum-menu-item-top-to-selected-icon-medium: 11px;
 	--spectrum-menu-item-top-to-selected-icon-large: 14px;
 	--spectrum-menu-item-top-to-selected-icon-extra-large: 17px;
+	--spectrum-slider-control-height-small: 14px;
+	--spectrum-slider-control-height-medium: 16px;
+	--spectrum-slider-control-height-large: 18px;
+	--spectrum-slider-control-height-extra-large: 20px;
+	--spectrum-slider-handle-size-small: 14px;
+	--spectrum-slider-handle-size-medium: 16px;
+	--spectrum-slider-handle-size-large: 18px;
+	--spectrum-slider-handle-size-extra-large: 20px;
+	--spectrum-slider-handle-border-width-down-small: 5px;
+	--spectrum-slider-handle-border-width-down-medium: 6px;
+	--spectrum-slider-handle-border-width-down-large: 7px;
+	--spectrum-slider-handle-border-width-down-extra-large: 8px;
+	--spectrum-slider-bottom-to-handle-small: 5px;
+	--spectrum-slider-bottom-to-handle-medium: 8px;
+	--spectrum-slider-bottom-to-handle-large: 11px;
+	--spectrum-slider-bottom-to-handle-extra-large: 14px;
 	--spectrum-slider-control-to-field-label-small: 5px;
 	--spectrum-slider-control-to-field-label-medium: 8px;
 	--spectrum-slider-control-to-field-label-large: 11px;
@@ -365,11 +409,14 @@
 	--spectrum-side-navigation-bottom-to-text: 8px;
 	--spectrum-tray-top-to-content-area: 4px;
 	--spectrum-accordion-top-to-text-spacious-small: 9px;
-	--spectrum-text-to-visual-50: 6px;
-	--spectrum-text-to-visual-75: 7px;
-	--spectrum-text-to-visual-100: 8px;
-	--spectrum-text-to-visual-200: 9px;
-	--spectrum-text-to-visual-300: 10px;
+	--spectrum-drop-shadow-y: 1px;
+	--spectrum-drop-shadow-blur: 4px;
+	--spectrum-text-to-visual-50: 5px;
+	--spectrum-text-to-visual-75: 5px;
+	--spectrum-text-to-visual-100: 6px;
+	--spectrum-text-to-visual-200: 7px;
+	--spectrum-text-to-visual-300: 8px;
+	--spectrum-text-to-visual-400: 9px;
 	--spectrum-text-to-control-75: 9px;
 	--spectrum-text-to-control-100: 10px;
 	--spectrum-text-to-control-200: 11px;
@@ -381,38 +428,38 @@
 	--spectrum-component-height-300: 48px;
 	--spectrum-component-height-400: 56px;
 	--spectrum-component-height-500: 64px;
-	--spectrum-component-pill-edge-to-visual-75: 10px;
+	--spectrum-component-pill-edge-to-visual-75: 11px;
 	--spectrum-component-pill-edge-to-visual-100: 14px;
 	--spectrum-component-pill-edge-to-visual-200: 18px;
-	--spectrum-component-pill-edge-to-visual-300: 21px;
+	--spectrum-component-pill-edge-to-visual-300: 20px;
 	--spectrum-component-pill-edge-to-visual-only-75: 4px;
-	--spectrum-component-pill-edge-to-visual-only-100: 7px;
-	--spectrum-component-pill-edge-to-visual-only-200: 10px;
-	--spectrum-component-pill-edge-to-visual-only-300: 13px;
-	--spectrum-component-pill-edge-to-text-75: 12px;
+	--spectrum-component-pill-edge-to-visual-only-100: 6px;
+	--spectrum-component-pill-edge-to-visual-only-200: 9px;
+	--spectrum-component-pill-edge-to-visual-only-300: 11px;
+	--spectrum-component-pill-edge-to-text-75: 13px;
 	--spectrum-component-pill-edge-to-text-100: 16px;
 	--spectrum-component-pill-edge-to-text-200: 20px;
-	--spectrum-component-pill-edge-to-text-300: 24px;
-	--spectrum-component-edge-to-visual-50: 6px;
-	--spectrum-component-edge-to-visual-75: 7px;
+	--spectrum-component-pill-edge-to-text-300: 23px;
+	--spectrum-component-edge-to-visual-50: 7px;
+	--spectrum-component-edge-to-visual-75: 8px;
 	--spectrum-component-edge-to-visual-100: 10px;
 	--spectrum-component-edge-to-visual-200: 13px;
-	--spectrum-component-edge-to-visual-300: 15px;
+	--spectrum-component-edge-to-visual-300: 14px;
 	--spectrum-component-edge-to-visual-only-50: 3px;
 	--spectrum-component-edge-to-visual-only-75: 4px;
-	--spectrum-component-edge-to-visual-only-100: 7px;
-	--spectrum-component-edge-to-visual-only-200: 10px;
-	--spectrum-component-edge-to-visual-only-300: 13px;
+	--spectrum-component-edge-to-visual-only-100: 6px;
+	--spectrum-component-edge-to-visual-only-200: 9px;
+	--spectrum-component-edge-to-visual-only-300: 11px;
 	--spectrum-component-edge-to-text-50: 8px;
-	--spectrum-component-edge-to-text-75: 9px;
+	--spectrum-component-edge-to-text-75: 10px;
 	--spectrum-component-edge-to-text-100: 12px;
 	--spectrum-component-edge-to-text-200: 15px;
-	--spectrum-component-edge-to-text-300: 18px;
+	--spectrum-component-edge-to-text-300: 17px;
 	--spectrum-component-top-to-workflow-icon-50: 3px;
 	--spectrum-component-top-to-workflow-icon-75: 4px;
-	--spectrum-component-top-to-workflow-icon-100: 7px;
-	--spectrum-component-top-to-workflow-icon-200: 10px;
-	--spectrum-component-top-to-workflow-icon-300: 13px;
+	--spectrum-component-top-to-workflow-icon-100: 6px;
+	--spectrum-component-top-to-workflow-icon-200: 9px;
+	--spectrum-component-top-to-workflow-icon-300: 11px;
 	--spectrum-component-top-to-text-50: 3px;
 	--spectrum-component-top-to-text-75: 4px;
 	--spectrum-component-top-to-text-100: 6px;
@@ -501,4 +548,91 @@
 	--spectrum-font-size-1100: 45px;
 	--spectrum-font-size-1200: 50px;
 	--spectrum-font-size-1300: 60px;
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--scale: medium;
+	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
+	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
+	--spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
+	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
+	--spectrum-assetcard-focus-ring-border-radius: 8px;
+	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
+	--spectrum-assetcard-selectionindicator-margin: 12px;
+	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
+	--spectrum-button-bottom-to-text-small: 4px;
+	--spectrum-button-bottom-to-text-medium: 8px;
+	--spectrum-button-bottom-to-text-large: 10px;
+	--spectrum-button-bottom-to-text-extra-large: 13px;
+	--spectrum-button-top-to-text-small: 5px;
+	--spectrum-button-top-to-text-medium: 7px;
+	--spectrum-button-top-to-text-large: 10px;
+	--spectrum-button-top-to-text-extra-large: 13px;
+	--spectrum-coach-indicator-gap: 6px;
+	--spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
+	--spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
+	--spectrum-coachmark-buttongroup-display: flex;
+	--spectrum-coachmark-buttongroup-mobile-display: none;
+	--spectrum-coachmark-menu-display: inline-flex;
+	--spectrum-coachmark-menu-mobile-display: none;
+	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
+	--spectrum-colorwheel-colorarea-container-size: 144px;
+	--spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
+	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
+	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
+	--spectrum-datepicker-dash-line-height: 24px;
+	--spectrum-datepicker-datetime-width-first: 36px;
+	--spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
+	--spectrum-datepicker-initial-width: 128px;
+	--spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
+	--spectrum-datepicker-invalid-icon-to-button: 8px;
+	--spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
+	--spectrum-datepicker-width-quiet-first: 72px;
+	--spectrum-datepicker-width-quiet-second: 16px;
+	--spectrum-dial-border-radius: 16px;
+	--spectrum-dial-controls-margin: 8px;
+	--spectrum-dial-handle-block-margin: 16px;
+	--spectrum-dial-handle-inline-margin: 16px;
+	--spectrum-dial-handle-position: 8px;
+	--spectrum-dial-label-container-top-to-text: 4px;
+	--spectrum-dial-label-gap-y: 5px;
+	--spectrum-dialog-confirm-border-radius: 4px;
+	--spectrum-dialog-confirm-description-text-size: 14px;
+	--spectrum-dialog-confirm-entry-animation-distance: 20px;
+	--spectrum-dialog-confirm-hero-height: 128px;
+	--spectrum-dialog-confirm-padding-grid: 40px;
+	--spectrum-dialog-confirm-title-text-size: 18px;
+	--spectrum-menu-item-checkmark-height-small: 10px;
+	--spectrum-menu-item-checkmark-height-medium: 10px;
+	--spectrum-menu-item-checkmark-height-large: 12px;
+	--spectrum-menu-item-checkmark-height-extra-large: 14px;
+	--spectrum-menu-item-checkmark-width-small: 10px;
+	--spectrum-menu-item-checkmark-width-medium: 10px;
+	--spectrum-menu-item-checkmark-width-large: 12px;
+	--spectrum-menu-item-checkmark-width-extra-large: 14px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
+	--spectrum-pagination-item-inline-spacing: 5px;
+	--spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
+	--spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+	--spectrum-slider-ramp-track-height: 16px;
+	--spectrum-slider-tick-mark-height: 10px;
+	--spectrum-treeview-indicator-inset-block-start: 5px;
+	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
+	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
+	--spectrum-treeview-item-indentation-large: 20px;
+	--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
+	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
+	--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
+	--spectrum-ui-icon-medium-display: block;
+	--spectrum-ui-icon-large-display: none;
+	--spectrum-well-border-radius: var(--spectrum-spacing-75);
+	--spectrum-well-margin-top: var(--spectrum-spacing-75);
+	--spectrum-well-min-width: 240px;
+	--spectrum-well-padding: var(--spectrum-spacing-300);
+	--spectrum-workflow-icon-size-xxl: 32px;
+	--spectrum-workflow-icon-size-xxs: 12px;
 }
diff --git a/tokens/dist/css/spectrum/dark-vars.css b/tokens/dist/css/spectrum/dark-vars.css
deleted file mode 100644
index c24e7b3a90..0000000000
--- a/tokens/dist/css/spectrum/dark-vars.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--dark {
-	--spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
-	--spectrum-menu-item-background-color-default-opacity: 0;
-	--spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
-	--spectrum-dropindicator-color: var(--spectrum-blue-700);
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-swatch-border-color-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-opacity: 0.51;
-	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
-	--spectrum-swatch-border-color-light-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-light-opacity: 0.2;
-	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
diff --git a/tokens/dist/css/spectrum/darkest-vars.css b/tokens/dist/css/spectrum/darkest-vars.css
deleted file mode 100644
index b34288e18d..0000000000
--- a/tokens/dist/css/spectrum/darkest-vars.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--darkest {
-	--spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
-	--spectrum-menu-item-background-color-default-opacity: 0;
-	--spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
-	--spectrum-dropindicator-color: var(--spectrum-blue-700);
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-down: rgba(var(--spectrum-white-rgb), 0.15);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-swatch-border-color-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-opacity: 0.51;
-	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
-	--spectrum-swatch-border-color-light-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-light-opacity: 0.2;
-	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
diff --git a/tokens/dist/css/spectrum/global-vars.css b/tokens/dist/css/spectrum/global-vars.css
deleted file mode 100644
index 802b1d2f10..0000000000
--- a/tokens/dist/css/spectrum/global-vars.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum {
-	--spectrum-neutral-background-color-selected-default: var(--spectrum-gray-700);
-	--spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800);
-	--spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-800);
-	--spectrum-slider-track-thickness: 2px;
-	--spectrum-slider-handle-gap: 4px;
-	--spectrum-picker-border-width: var(--spectrum-border-width-100);
-	--spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
-	--spectrum-in-field-button-edge-to-fill: 0px;
-	--spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
-	--spectrum-corner-radius-75: 2px;
-	--spectrum-drop-shadow-x: 0px;
-	--spectrum-border-width-100: 1px;
-	--spectrum-accent-color-100: var(--spectrum-blue-100);
-	--spectrum-accent-color-200: var(--spectrum-blue-200);
-	--spectrum-accent-color-300: var(--spectrum-blue-300);
-	--spectrum-accent-color-400: var(--spectrum-blue-400);
-	--spectrum-accent-color-500: var(--spectrum-blue-500);
-	--spectrum-accent-color-600: var(--spectrum-blue-600);
-	--spectrum-accent-color-700: var(--spectrum-blue-700);
-	--spectrum-accent-color-800: var(--spectrum-blue-800);
-	--spectrum-accent-color-900: var(--spectrum-blue-900);
-	--spectrum-accent-color-1000: var(--spectrum-blue-1000);
-	--spectrum-accent-color-1100: var(--spectrum-blue-1100);
-	--spectrum-accent-color-1200: var(--spectrum-blue-1200);
-	--spectrum-accent-color-1300: var(--spectrum-blue-1300);
-	--spectrum-accent-color-1400: var(--spectrum-blue-1400);
-	--spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
-	--spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
-	--system: spectrum;
-	--spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
-	--spectrum-animation-duration-0: 0ms;
-	--spectrum-animation-duration-100: 130ms;
-	--spectrum-animation-duration-200: 160ms;
-	--spectrum-animation-duration-300: 190ms;
-	--spectrum-animation-duration-400: 220ms;
-	--spectrum-animation-duration-500: 250ms;
-	--spectrum-animation-duration-600: 300ms;
-	--spectrum-animation-duration-700: 350ms;
-	--spectrum-animation-duration-800: 400ms;
-	--spectrum-animation-duration-900: 450ms;
-	--spectrum-animation-duration-1000: 500ms;
-	--spectrum-animation-duration-2000: 1000ms;
-	--spectrum-animation-duration-4000: 2000ms;
-	--spectrum-animation-duration-6000: 3000ms;
-	--spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
-	--spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
-	--spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
-	--spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
-
-	/* stylelint-disable value-keyword-case -- typography names should use their appropriate cases */
-	--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	--spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
-	--spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
-	--spectrum-serif-font: var(--spectrum-serif-font-family-stack);
-	--spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
-	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	/* stylelint-enable value-keyword-case */
-	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-font-style: var(--spectrum-default-font-style);
-	--spectrum-font-size: var(--spectrum-font-size-100);
-	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
-	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
-	--spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
-	--spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
-	--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
-	--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
-	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
-}
diff --git a/tokens/dist/css/spectrum/index.css b/tokens/dist/css/spectrum/index.css
deleted file mode 100644
index 10461a80b9..0000000000
--- a/tokens/dist/css/spectrum/index.css
+++ /dev/null
@@ -1,514 +0,0 @@
-/* Token version: v15.2.0 */
-
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--dark {
-	--spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
-	--spectrum-menu-item-background-color-default-opacity: 0;
-	--spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
-	--spectrum-dropindicator-color: var(--spectrum-blue-700);
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-swatch-border-color-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-opacity: 0.51;
-	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
-	--spectrum-swatch-border-color-light-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-light-opacity: 0.2;
-	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-.spectrum--darkest {
-	--spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
-	--spectrum-menu-item-background-color-default-opacity: 0;
-	--spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
-	--spectrum-dropindicator-color: var(--spectrum-blue-700);
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-down: rgba(var(--spectrum-white-rgb), 0.15);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-swatch-border-color-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-opacity: 0.51;
-	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
-	--spectrum-swatch-border-color-light-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-light-opacity: 0.2;
-	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-.spectrum {
-	--spectrum-neutral-background-color-selected-default: var(--spectrum-gray-700);
-	--spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800);
-	--spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-800);
-	--spectrum-slider-track-thickness: 2px;
-	--spectrum-slider-handle-gap: 4px;
-	--spectrum-picker-border-width: var(--spectrum-border-width-100);
-	--spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
-	--spectrum-in-field-button-edge-to-fill: 0px;
-	--spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
-	--spectrum-corner-radius-75: 2px;
-	--spectrum-drop-shadow-x: 0px;
-	--spectrum-border-width-100: 1px;
-	--spectrum-accent-color-100: var(--spectrum-blue-100);
-	--spectrum-accent-color-200: var(--spectrum-blue-200);
-	--spectrum-accent-color-300: var(--spectrum-blue-300);
-	--spectrum-accent-color-400: var(--spectrum-blue-400);
-	--spectrum-accent-color-500: var(--spectrum-blue-500);
-	--spectrum-accent-color-600: var(--spectrum-blue-600);
-	--spectrum-accent-color-700: var(--spectrum-blue-700);
-	--spectrum-accent-color-800: var(--spectrum-blue-800);
-	--spectrum-accent-color-900: var(--spectrum-blue-900);
-	--spectrum-accent-color-1000: var(--spectrum-blue-1000);
-	--spectrum-accent-color-1100: var(--spectrum-blue-1100);
-	--spectrum-accent-color-1200: var(--spectrum-blue-1200);
-	--spectrum-accent-color-1300: var(--spectrum-blue-1300);
-	--spectrum-accent-color-1400: var(--spectrum-blue-1400);
-	--spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
-	--spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
-	--system: spectrum;
-	--spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
-	--spectrum-animation-duration-0: 0ms;
-	--spectrum-animation-duration-100: 130ms;
-	--spectrum-animation-duration-200: 160ms;
-	--spectrum-animation-duration-300: 190ms;
-	--spectrum-animation-duration-400: 220ms;
-	--spectrum-animation-duration-500: 250ms;
-	--spectrum-animation-duration-600: 300ms;
-	--spectrum-animation-duration-700: 350ms;
-	--spectrum-animation-duration-800: 400ms;
-	--spectrum-animation-duration-900: 450ms;
-	--spectrum-animation-duration-1000: 500ms;
-	--spectrum-animation-duration-2000: 1000ms;
-	--spectrum-animation-duration-4000: 2000ms;
-	--spectrum-animation-duration-6000: 3000ms;
-	--spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
-	--spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
-	--spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
-	--spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
-
-	/* stylelint-disable value-keyword-case -- typography names should use their appropriate cases */
-	--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	--spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
-	--spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
-	--spectrum-serif-font: var(--spectrum-serif-font-family-stack);
-	--spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
-	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	/* stylelint-enable value-keyword-case */
-	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-font-style: var(--spectrum-default-font-style);
-	--spectrum-font-size: var(--spectrum-font-size-100);
-	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
-	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
-	--spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
-	--spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
-	--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
-	--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
-	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
-}
-.spectrum--large {
-	--spectrum-checkbox-control-size-small: 16px;
-	--spectrum-checkbox-control-size-medium: 18px;
-	--spectrum-checkbox-control-size-large: 20px;
-	--spectrum-checkbox-control-size-extra-large: 22px;
-	--spectrum-checkbox-top-to-control-small: 7px;
-	--spectrum-checkbox-top-to-control-medium: 11px;
-	--spectrum-checkbox-top-to-control-large: 15px;
-	--spectrum-checkbox-top-to-control-extra-large: 19px;
-	--spectrum-switch-control-width-small: 32px;
-	--spectrum-switch-control-width-medium: 36px;
-	--spectrum-switch-control-width-large: 41px;
-	--spectrum-switch-control-width-extra-large: 46px;
-	--spectrum-switch-control-height-small: 16px;
-	--spectrum-switch-control-height-medium: 18px;
-	--spectrum-switch-control-height-large: 20px;
-	--spectrum-switch-control-height-extra-large: 22px;
-	--spectrum-switch-top-to-control-small: 7px;
-	--spectrum-switch-top-to-control-medium: 11px;
-	--spectrum-switch-top-to-control-large: 15px;
-	--spectrum-switch-top-to-control-extra-large: 19px;
-	--spectrum-radio-button-control-size-small: 16px;
-	--spectrum-radio-button-control-size-medium: 18px;
-	--spectrum-radio-button-control-size-large: 20px;
-	--spectrum-radio-button-control-size-extra-large: 22px;
-	--spectrum-radio-button-top-to-control-small: 7px;
-	--spectrum-radio-button-top-to-control-medium: 11px;
-	--spectrum-radio-button-top-to-control-large: 15px;
-	--spectrum-radio-button-top-to-control-extra-large: 19px;
-	--spectrum-slider-control-height-small: 18px;
-	--spectrum-slider-control-height-medium: 20px;
-	--spectrum-slider-control-height-large: 22px;
-	--spectrum-slider-control-height-extra-large: 26px;
-	--spectrum-slider-handle-size-small: 18px;
-	--spectrum-slider-handle-size-medium: 20px;
-	--spectrum-slider-handle-size-large: 22px;
-	--spectrum-slider-handle-size-extra-large: 26px;
-	--spectrum-slider-handle-border-width-down-small: 7px;
-	--spectrum-slider-handle-border-width-down-medium: 8px;
-	--spectrum-slider-handle-border-width-down-large: 9px;
-	--spectrum-slider-handle-border-width-down-extra-large: 11px;
-	--spectrum-slider-bottom-to-handle-small: 6px;
-	--spectrum-slider-bottom-to-handle-medium: 10px;
-	--spectrum-slider-bottom-to-handle-large: 14px;
-	--spectrum-slider-bottom-to-handle-extra-large: 17px;
-	--spectrum-corner-radius-100: 5px;
-	--spectrum-corner-radius-200: 10px;
-	--spectrum-drop-shadow-y: 2px;
-	--spectrum-drop-shadow-blur: 6px;
-	--spectrum-slider-tick-mark-height: 13px;
-	--spectrum-slider-ramp-track-height: 20px;
-	--spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
-	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-	--spectrum-colorwheel-colorarea-container-size: 182px;
-	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
-	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
-	--spectrum-menu-item-checkmark-height-small: 12px;
-	--spectrum-menu-item-checkmark-height-medium: 14px;
-	--spectrum-menu-item-checkmark-height-large: 16px;
-	--spectrum-menu-item-checkmark-height-extra-large: 16px;
-	--spectrum-menu-item-checkmark-width-small: 12px;
-	--spectrum-menu-item-checkmark-width-medium: 14px;
-	--spectrum-menu-item-checkmark-width-large: 16px;
-	--spectrum-menu-item-checkmark-width-extra-large: 16px;
-	--spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
-	--spectrum-button-top-to-text-small: 6px;
-	--spectrum-button-bottom-to-text-small: 5px;
-	--spectrum-button-top-to-text-medium: 9px;
-	--spectrum-button-bottom-to-text-medium: 10px;
-	--spectrum-button-top-to-text-large: 12px;
-	--spectrum-button-bottom-to-text-large: 13px;
-	--spectrum-button-top-to-text-extra-large: 16px;
-	--spectrum-button-bottom-to-text-extra-large: 17px;
-	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
-	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
-	--spectrum-coach-indicator-gap: 8px;
-	--spectrum-coach-indicator-ring-diameter: 20px;
-	--spectrum-coach-indicator-quiet-ring-diameter: 10px;
-	--spectrum-coachmark-buttongroup-display: none;
-	--spectrum-coachmark-buttongroup-mobile-display: flex;
-	--spectrum-coachmark-menu-display: none;
-	--spectrum-coachmark-menu-mobile-display: inline-flex;
-	--spectrum-well-padding: 20px;
-	--spectrum-well-margin-top: 5px;
-	--spectrum-well-min-width: 300px;
-	--spectrum-well-border-radius: 5px;
-	--spectrum-workflow-icon-size-xxl: 40px;
-	--spectrum-workflow-icon-size-xxs: 15px;
-	--spectrum-treeview-item-indentation-medium: 20px;
-	--spectrum-treeview-item-indentation-small: 15px;
-	--spectrum-treeview-item-indentation-large: 25px;
-	--spectrum-treeview-item-indentation-extra-large: 30px;
-	--spectrum-treeview-indicator-inset-block-start: 6px;
-	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
-	--spectrum-dialog-confirm-entry-animation-distance: 25px;
-	--spectrum-dialog-confirm-hero-height: 160px;
-	--spectrum-dialog-confirm-border-radius: 5px;
-	--spectrum-dialog-confirm-title-text-size: 19px;
-	--spectrum-dialog-confirm-description-text-size: 15px;
-	--spectrum-dialog-confirm-padding-grid: 24px;
-	--spectrum-datepicker-initial-width: 160px;
-	--spectrum-datepicker-generic-padding: 15px;
-	--spectrum-datepicker-dash-line-height: 30px;
-	--spectrum-datepicker-width-quiet-first: 90px;
-	--spectrum-datepicker-width-quiet-second: 20px;
-	--spectrum-datepicker-datetime-width-first: 45px;
-	--spectrum-datepicker-invalid-icon-to-button: 10px;
-	--spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
-	--spectrum-datepicker-input-datetime-width: 30px;
-	--spectrum-pagination-textfield-width: 60px;
-	--spectrum-pagination-item-inline-spacing: 6px;
-	--spectrum-dial-border-radius: 20px;
-	--spectrum-dial-handle-position: 10px;
-	--spectrum-dial-handle-block-margin: 20px;
-	--spectrum-dial-handle-inline-margin: 20px;
-	--spectrum-dial-controls-margin: 10px;
-	--spectrum-dial-label-gap-y: 6px;
-	--spectrum-dial-label-container-top-to-text: 5px;
-	--spectrum-assetcard-focus-ring-border-radius: 9px;
-	--spectrum-assetcard-selectionindicator-margin: 15px;
-	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
-	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
-	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
-	--spectrum-tooltip-animation-distance: 5px;
-	--spectrum-ui-icon-medium-display: none;
-	--spectrum-ui-icon-large-display: block;
-}
-.spectrum--light,
-.spectrum--lightest {
-	--spectrum-menu-item-background-color-default-rgb: 0, 0, 0;
-	--spectrum-menu-item-background-color-default-opacity: 0;
-	--spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200);
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
-	--spectrum-dropindicator-color: var(--spectrum-blue-800);
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-white);
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-	--spectrum-well-border-color: var(--spectrum-black);
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
-	--spectrum-swatch-border-color-rgb: 0, 0, 0;
-	--spectrum-swatch-border-color-opacity: 0.51;
-	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
-	--spectrum-swatch-border-color-light-rgb: 0, 0, 0;
-	--spectrum-swatch-border-color-light-opacity: 0.2;
-	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-.spectrum--medium {
-	--spectrum-checkbox-control-size-small: 12px;
-	--spectrum-checkbox-control-size-medium: 14px;
-	--spectrum-checkbox-control-size-large: 16px;
-	--spectrum-checkbox-control-size-extra-large: 18px;
-	--spectrum-checkbox-top-to-control-small: 6px;
-	--spectrum-checkbox-top-to-control-medium: 9px;
-	--spectrum-checkbox-top-to-control-large: 12px;
-	--spectrum-checkbox-top-to-control-extra-large: 15px;
-	--spectrum-switch-control-width-small: 23px;
-	--spectrum-switch-control-width-medium: 26px;
-	--spectrum-switch-control-width-large: 29px;
-	--spectrum-switch-control-width-extra-large: 33px;
-	--spectrum-switch-control-height-small: 12px;
-	--spectrum-switch-control-height-medium: 14px;
-	--spectrum-switch-control-height-large: 16px;
-	--spectrum-switch-control-height-extra-large: 18px;
-	--spectrum-switch-top-to-control-small: 6px;
-	--spectrum-switch-top-to-control-medium: 9px;
-	--spectrum-switch-top-to-control-large: 12px;
-	--spectrum-switch-top-to-control-extra-large: 15px;
-	--spectrum-radio-button-control-size-small: 12px;
-	--spectrum-radio-button-control-size-medium: 14px;
-	--spectrum-radio-button-control-size-large: 16px;
-	--spectrum-radio-button-control-size-extra-large: 18px;
-	--spectrum-radio-button-top-to-control-small: 6px;
-	--spectrum-radio-button-top-to-control-medium: 9px;
-	--spectrum-radio-button-top-to-control-large: 12px;
-	--spectrum-radio-button-top-to-control-extra-large: 15px;
-	--spectrum-slider-control-height-small: 14px;
-	--spectrum-slider-control-height-medium: 16px;
-	--spectrum-slider-control-height-large: 18px;
-	--spectrum-slider-control-height-extra-large: 20px;
-	--spectrum-slider-handle-size-small: 14px;
-	--spectrum-slider-handle-size-medium: 16px;
-	--spectrum-slider-handle-size-large: 18px;
-	--spectrum-slider-handle-size-extra-large: 20px;
-	--spectrum-slider-handle-border-width-down-small: 5px;
-	--spectrum-slider-handle-border-width-down-medium: 6px;
-	--spectrum-slider-handle-border-width-down-large: 7px;
-	--spectrum-slider-handle-border-width-down-extra-large: 8px;
-	--spectrum-slider-bottom-to-handle-small: 5px;
-	--spectrum-slider-bottom-to-handle-medium: 8px;
-	--spectrum-slider-bottom-to-handle-large: 11px;
-	--spectrum-slider-bottom-to-handle-extra-large: 14px;
-	--spectrum-corner-radius-100: 4px;
-	--spectrum-corner-radius-200: 8px;
-	--spectrum-drop-shadow-y: 1px;
-	--spectrum-drop-shadow-blur: 4px;
-	--spectrum-slider-tick-mark-height: 10px;
-	--spectrum-slider-ramp-track-height: 16px;
-	--spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
-	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-	--spectrum-colorwheel-colorarea-container-size: 144px;
-	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
-	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
-	--spectrum-menu-item-checkmark-height-small: 10px;
-	--spectrum-menu-item-checkmark-height-medium: 10px;
-	--spectrum-menu-item-checkmark-height-large: 12px;
-	--spectrum-menu-item-checkmark-height-extra-large: 14px;
-	--spectrum-menu-item-checkmark-width-small: 10px;
-	--spectrum-menu-item-checkmark-width-medium: 10px;
-	--spectrum-menu-item-checkmark-width-large: 12px;
-	--spectrum-menu-item-checkmark-width-extra-large: 14px;
-	--spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
-	--spectrum-button-top-to-text-small: 5px;
-	--spectrum-button-bottom-to-text-small: 4px;
-	--spectrum-button-top-to-text-medium: 7px;
-	--spectrum-button-bottom-to-text-medium: 8px;
-	--spectrum-button-top-to-text-large: 10px;
-	--spectrum-button-bottom-to-text-large: 10px;
-	--spectrum-button-top-to-text-extra-large: 13px;
-	--spectrum-button-bottom-to-text-extra-large: 13px;
-	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
-	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
-	--spectrum-coach-indicator-gap: 6px;
-	--spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
-	--spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
-	--spectrum-coachmark-buttongroup-display: flex;
-	--spectrum-coachmark-buttongroup-mobile-display: none;
-	--spectrum-coachmark-menu-display: inline-flex;
-	--spectrum-coachmark-menu-mobile-display: none;
-	--spectrum-well-padding: var(--spectrum-spacing-300);
-	--spectrum-well-margin-top: var(--spectrum-spacing-75);
-	--spectrum-well-min-width: 240px;
-	--spectrum-well-border-radius: var(--spectrum-spacing-75);
-	--spectrum-workflow-icon-size-xxl: 32px;
-	--spectrum-workflow-icon-size-xxs: 12px;
-	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
-	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
-	--spectrum-treeview-item-indentation-large: 20px;
-	--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
-	--spectrum-treeview-indicator-inset-block-start: 5px;
-	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
-	--spectrum-dialog-confirm-entry-animation-distance: 20px;
-	--spectrum-dialog-confirm-hero-height: 128px;
-	--spectrum-dialog-confirm-border-radius: 4px;
-	--spectrum-dialog-confirm-title-text-size: 18px;
-	--spectrum-dialog-confirm-description-text-size: 14px;
-	--spectrum-dialog-confirm-padding-grid: 40px;
-	--spectrum-datepicker-initial-width: 128px;
-	--spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
-	--spectrum-datepicker-dash-line-height: 24px;
-	--spectrum-datepicker-width-quiet-first: 72px;
-	--spectrum-datepicker-width-quiet-second: 16px;
-	--spectrum-datepicker-datetime-width-first: 36px;
-	--spectrum-datepicker-invalid-icon-to-button: 8px;
-	--spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
-	--spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
-	--spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
-	--spectrum-pagination-item-inline-spacing: 5px;
-	--spectrum-dial-border-radius: 16px;
-	--spectrum-dial-handle-position: 8px;
-	--spectrum-dial-handle-block-margin: 16px;
-	--spectrum-dial-handle-inline-margin: 16px;
-	--spectrum-dial-controls-margin: 8px;
-	--spectrum-dial-label-gap-y: 5px;
-	--spectrum-dial-label-container-top-to-text: 4px;
-	--spectrum-assetcard-focus-ring-border-radius: 8px;
-	--spectrum-assetcard-selectionindicator-margin: 12px;
-	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
-	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
-	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
-	--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
-	--spectrum-ui-icon-medium-display: block;
-	--spectrum-ui-icon-large-display: none;
-}
diff --git a/tokens/dist/css/spectrum/large-vars.css b/tokens/dist/css/spectrum/large-vars.css
deleted file mode 100644
index 9cfae4d629..0000000000
--- a/tokens/dist/css/spectrum/large-vars.css
+++ /dev/null
@@ -1,148 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--large {
-	--spectrum-checkbox-control-size-small: 16px;
-	--spectrum-checkbox-control-size-medium: 18px;
-	--spectrum-checkbox-control-size-large: 20px;
-	--spectrum-checkbox-control-size-extra-large: 22px;
-	--spectrum-checkbox-top-to-control-small: 7px;
-	--spectrum-checkbox-top-to-control-medium: 11px;
-	--spectrum-checkbox-top-to-control-large: 15px;
-	--spectrum-checkbox-top-to-control-extra-large: 19px;
-	--spectrum-switch-control-width-small: 32px;
-	--spectrum-switch-control-width-medium: 36px;
-	--spectrum-switch-control-width-large: 41px;
-	--spectrum-switch-control-width-extra-large: 46px;
-	--spectrum-switch-control-height-small: 16px;
-	--spectrum-switch-control-height-medium: 18px;
-	--spectrum-switch-control-height-large: 20px;
-	--spectrum-switch-control-height-extra-large: 22px;
-	--spectrum-switch-top-to-control-small: 7px;
-	--spectrum-switch-top-to-control-medium: 11px;
-	--spectrum-switch-top-to-control-large: 15px;
-	--spectrum-switch-top-to-control-extra-large: 19px;
-	--spectrum-radio-button-control-size-small: 16px;
-	--spectrum-radio-button-control-size-medium: 18px;
-	--spectrum-radio-button-control-size-large: 20px;
-	--spectrum-radio-button-control-size-extra-large: 22px;
-	--spectrum-radio-button-top-to-control-small: 7px;
-	--spectrum-radio-button-top-to-control-medium: 11px;
-	--spectrum-radio-button-top-to-control-large: 15px;
-	--spectrum-radio-button-top-to-control-extra-large: 19px;
-	--spectrum-slider-control-height-small: 18px;
-	--spectrum-slider-control-height-medium: 20px;
-	--spectrum-slider-control-height-large: 22px;
-	--spectrum-slider-control-height-extra-large: 26px;
-	--spectrum-slider-handle-size-small: 18px;
-	--spectrum-slider-handle-size-medium: 20px;
-	--spectrum-slider-handle-size-large: 22px;
-	--spectrum-slider-handle-size-extra-large: 26px;
-	--spectrum-slider-handle-border-width-down-small: 7px;
-	--spectrum-slider-handle-border-width-down-medium: 8px;
-	--spectrum-slider-handle-border-width-down-large: 9px;
-	--spectrum-slider-handle-border-width-down-extra-large: 11px;
-	--spectrum-slider-bottom-to-handle-small: 6px;
-	--spectrum-slider-bottom-to-handle-medium: 10px;
-	--spectrum-slider-bottom-to-handle-large: 14px;
-	--spectrum-slider-bottom-to-handle-extra-large: 17px;
-	--spectrum-corner-radius-100: 5px;
-	--spectrum-corner-radius-200: 10px;
-	--spectrum-drop-shadow-y: 2px;
-	--spectrum-drop-shadow-blur: 6px;
-	--spectrum-slider-tick-mark-height: 13px;
-	--spectrum-slider-ramp-track-height: 20px;
-	--spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
-	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-	--spectrum-colorwheel-colorarea-container-size: 182px;
-	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
-	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
-	--spectrum-menu-item-checkmark-height-small: 12px;
-	--spectrum-menu-item-checkmark-height-medium: 14px;
-	--spectrum-menu-item-checkmark-height-large: 16px;
-	--spectrum-menu-item-checkmark-height-extra-large: 16px;
-	--spectrum-menu-item-checkmark-width-small: 12px;
-	--spectrum-menu-item-checkmark-width-medium: 14px;
-	--spectrum-menu-item-checkmark-width-large: 16px;
-	--spectrum-menu-item-checkmark-width-extra-large: 16px;
-	--spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
-	--spectrum-button-top-to-text-small: 6px;
-	--spectrum-button-bottom-to-text-small: 5px;
-	--spectrum-button-top-to-text-medium: 9px;
-	--spectrum-button-bottom-to-text-medium: 10px;
-	--spectrum-button-top-to-text-large: 12px;
-	--spectrum-button-bottom-to-text-large: 13px;
-	--spectrum-button-top-to-text-extra-large: 16px;
-	--spectrum-button-bottom-to-text-extra-large: 17px;
-	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
-	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
-	--spectrum-coach-indicator-gap: 8px;
-	--spectrum-coach-indicator-ring-diameter: 20px;
-	--spectrum-coach-indicator-quiet-ring-diameter: 10px;
-	--spectrum-coachmark-buttongroup-display: none;
-	--spectrum-coachmark-buttongroup-mobile-display: flex;
-	--spectrum-coachmark-menu-display: none;
-	--spectrum-coachmark-menu-mobile-display: inline-flex;
-	--spectrum-well-padding: 20px;
-	--spectrum-well-margin-top: 5px;
-	--spectrum-well-min-width: 300px;
-	--spectrum-well-border-radius: 5px;
-	--spectrum-workflow-icon-size-xxl: 40px;
-	--spectrum-workflow-icon-size-xxs: 15px;
-	--spectrum-treeview-item-indentation-medium: 20px;
-	--spectrum-treeview-item-indentation-small: 15px;
-	--spectrum-treeview-item-indentation-large: 25px;
-	--spectrum-treeview-item-indentation-extra-large: 30px;
-	--spectrum-treeview-indicator-inset-block-start: 6px;
-	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
-	--spectrum-dialog-confirm-entry-animation-distance: 25px;
-	--spectrum-dialog-confirm-hero-height: 160px;
-	--spectrum-dialog-confirm-border-radius: 5px;
-	--spectrum-dialog-confirm-title-text-size: 19px;
-	--spectrum-dialog-confirm-description-text-size: 15px;
-	--spectrum-dialog-confirm-padding-grid: 24px;
-	--spectrum-datepicker-initial-width: 160px;
-	--spectrum-datepicker-generic-padding: 15px;
-	--spectrum-datepicker-dash-line-height: 30px;
-	--spectrum-datepicker-width-quiet-first: 90px;
-	--spectrum-datepicker-width-quiet-second: 20px;
-	--spectrum-datepicker-datetime-width-first: 45px;
-	--spectrum-datepicker-invalid-icon-to-button: 10px;
-	--spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
-	--spectrum-datepicker-input-datetime-width: 30px;
-	--spectrum-pagination-textfield-width: 60px;
-	--spectrum-pagination-item-inline-spacing: 6px;
-	--spectrum-dial-border-radius: 20px;
-	--spectrum-dial-handle-position: 10px;
-	--spectrum-dial-handle-block-margin: 20px;
-	--spectrum-dial-handle-inline-margin: 20px;
-	--spectrum-dial-controls-margin: 10px;
-	--spectrum-dial-label-gap-y: 6px;
-	--spectrum-dial-label-container-top-to-text: 5px;
-	--spectrum-assetcard-focus-ring-border-radius: 9px;
-	--spectrum-assetcard-selectionindicator-margin: 15px;
-	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
-	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
-	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
-	--spectrum-tooltip-animation-distance: 5px;
-	--spectrum-ui-icon-medium-display: none;
-	--spectrum-ui-icon-large-display: block;
-}
diff --git a/tokens/dist/css/spectrum/light-vars.css b/tokens/dist/css/spectrum/light-vars.css
deleted file mode 100644
index 4817829c9e..0000000000
--- a/tokens/dist/css/spectrum/light-vars.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--light,
-.spectrum--lightest {
-	--spectrum-menu-item-background-color-default-rgb: 0, 0, 0;
-	--spectrum-menu-item-background-color-default-opacity: 0;
-	--spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200);
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
-	--spectrum-dropindicator-color: var(--spectrum-blue-800);
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-white);
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-	--spectrum-well-border-color: var(--spectrum-black);
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
-	--spectrum-swatch-border-color-rgb: 0, 0, 0;
-	--spectrum-swatch-border-color-opacity: 0.51;
-	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
-	--spectrum-swatch-border-color-light-rgb: 0, 0, 0;
-	--spectrum-swatch-border-color-light-opacity: 0.2;
-	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
diff --git a/tokens/dist/css/spectrum/medium-vars.css b/tokens/dist/css/spectrum/medium-vars.css
deleted file mode 100644
index 398640cc9e..0000000000
--- a/tokens/dist/css/spectrum/medium-vars.css
+++ /dev/null
@@ -1,148 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--medium {
-	--spectrum-checkbox-control-size-small: 12px;
-	--spectrum-checkbox-control-size-medium: 14px;
-	--spectrum-checkbox-control-size-large: 16px;
-	--spectrum-checkbox-control-size-extra-large: 18px;
-	--spectrum-checkbox-top-to-control-small: 6px;
-	--spectrum-checkbox-top-to-control-medium: 9px;
-	--spectrum-checkbox-top-to-control-large: 12px;
-	--spectrum-checkbox-top-to-control-extra-large: 15px;
-	--spectrum-switch-control-width-small: 23px;
-	--spectrum-switch-control-width-medium: 26px;
-	--spectrum-switch-control-width-large: 29px;
-	--spectrum-switch-control-width-extra-large: 33px;
-	--spectrum-switch-control-height-small: 12px;
-	--spectrum-switch-control-height-medium: 14px;
-	--spectrum-switch-control-height-large: 16px;
-	--spectrum-switch-control-height-extra-large: 18px;
-	--spectrum-switch-top-to-control-small: 6px;
-	--spectrum-switch-top-to-control-medium: 9px;
-	--spectrum-switch-top-to-control-large: 12px;
-	--spectrum-switch-top-to-control-extra-large: 15px;
-	--spectrum-radio-button-control-size-small: 12px;
-	--spectrum-radio-button-control-size-medium: 14px;
-	--spectrum-radio-button-control-size-large: 16px;
-	--spectrum-radio-button-control-size-extra-large: 18px;
-	--spectrum-radio-button-top-to-control-small: 6px;
-	--spectrum-radio-button-top-to-control-medium: 9px;
-	--spectrum-radio-button-top-to-control-large: 12px;
-	--spectrum-radio-button-top-to-control-extra-large: 15px;
-	--spectrum-slider-control-height-small: 14px;
-	--spectrum-slider-control-height-medium: 16px;
-	--spectrum-slider-control-height-large: 18px;
-	--spectrum-slider-control-height-extra-large: 20px;
-	--spectrum-slider-handle-size-small: 14px;
-	--spectrum-slider-handle-size-medium: 16px;
-	--spectrum-slider-handle-size-large: 18px;
-	--spectrum-slider-handle-size-extra-large: 20px;
-	--spectrum-slider-handle-border-width-down-small: 5px;
-	--spectrum-slider-handle-border-width-down-medium: 6px;
-	--spectrum-slider-handle-border-width-down-large: 7px;
-	--spectrum-slider-handle-border-width-down-extra-large: 8px;
-	--spectrum-slider-bottom-to-handle-small: 5px;
-	--spectrum-slider-bottom-to-handle-medium: 8px;
-	--spectrum-slider-bottom-to-handle-large: 11px;
-	--spectrum-slider-bottom-to-handle-extra-large: 14px;
-	--spectrum-corner-radius-100: 4px;
-	--spectrum-corner-radius-200: 8px;
-	--spectrum-drop-shadow-y: 1px;
-	--spectrum-drop-shadow-blur: 4px;
-	--spectrum-slider-tick-mark-height: 10px;
-	--spectrum-slider-ramp-track-height: 16px;
-	--spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
-	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-	--spectrum-colorwheel-colorarea-container-size: 144px;
-	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
-	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
-	--spectrum-menu-item-checkmark-height-small: 10px;
-	--spectrum-menu-item-checkmark-height-medium: 10px;
-	--spectrum-menu-item-checkmark-height-large: 12px;
-	--spectrum-menu-item-checkmark-height-extra-large: 14px;
-	--spectrum-menu-item-checkmark-width-small: 10px;
-	--spectrum-menu-item-checkmark-width-medium: 10px;
-	--spectrum-menu-item-checkmark-width-large: 12px;
-	--spectrum-menu-item-checkmark-width-extra-large: 14px;
-	--spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
-	--spectrum-button-top-to-text-small: 5px;
-	--spectrum-button-bottom-to-text-small: 4px;
-	--spectrum-button-top-to-text-medium: 7px;
-	--spectrum-button-bottom-to-text-medium: 8px;
-	--spectrum-button-top-to-text-large: 10px;
-	--spectrum-button-bottom-to-text-large: 10px;
-	--spectrum-button-top-to-text-extra-large: 13px;
-	--spectrum-button-bottom-to-text-extra-large: 13px;
-	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
-	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
-	--spectrum-coach-indicator-gap: 6px;
-	--spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
-	--spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
-	--spectrum-coachmark-buttongroup-display: flex;
-	--spectrum-coachmark-buttongroup-mobile-display: none;
-	--spectrum-coachmark-menu-display: inline-flex;
-	--spectrum-coachmark-menu-mobile-display: none;
-	--spectrum-well-padding: var(--spectrum-spacing-300);
-	--spectrum-well-margin-top: var(--spectrum-spacing-75);
-	--spectrum-well-min-width: 240px;
-	--spectrum-well-border-radius: var(--spectrum-spacing-75);
-	--spectrum-workflow-icon-size-xxl: 32px;
-	--spectrum-workflow-icon-size-xxs: 12px;
-	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
-	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
-	--spectrum-treeview-item-indentation-large: 20px;
-	--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
-	--spectrum-treeview-indicator-inset-block-start: 5px;
-	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
-	--spectrum-dialog-confirm-entry-animation-distance: 20px;
-	--spectrum-dialog-confirm-hero-height: 128px;
-	--spectrum-dialog-confirm-border-radius: 4px;
-	--spectrum-dialog-confirm-title-text-size: 18px;
-	--spectrum-dialog-confirm-description-text-size: 14px;
-	--spectrum-dialog-confirm-padding-grid: 40px;
-	--spectrum-datepicker-initial-width: 128px;
-	--spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
-	--spectrum-datepicker-dash-line-height: 24px;
-	--spectrum-datepicker-width-quiet-first: 72px;
-	--spectrum-datepicker-width-quiet-second: 16px;
-	--spectrum-datepicker-datetime-width-first: 36px;
-	--spectrum-datepicker-invalid-icon-to-button: 8px;
-	--spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
-	--spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
-	--spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
-	--spectrum-pagination-item-inline-spacing: 5px;
-	--spectrum-dial-border-radius: 16px;
-	--spectrum-dial-handle-position: 8px;
-	--spectrum-dial-handle-block-margin: 16px;
-	--spectrum-dial-handle-inline-margin: 16px;
-	--spectrum-dial-controls-margin: 8px;
-	--spectrum-dial-label-gap-y: 5px;
-	--spectrum-dial-label-container-top-to-text: 4px;
-	--spectrum-assetcard-focus-ring-border-radius: 8px;
-	--spectrum-assetcard-selectionindicator-margin: 12px;
-	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
-	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
-	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
-	--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
-	--spectrum-ui-icon-medium-display: block;
-	--spectrum-ui-icon-large-display: none;
-}
diff --git a/tokens/dist/index.css b/tokens/dist/index.css
index 2794514d9e..b0a07d4b3f 100644
--- a/tokens/dist/index.css
+++ b/tokens/dist/index.css
@@ -14,58 +14,49 @@
  */
 
 .spectrum--dark {
-	--spectrum-overlay-opacity: 0.5;
-	--spectrum-drop-shadow-color-rgb: 0, 0, 0;
-	--spectrum-drop-shadow-color-opacity: 0.5;
-	--spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
-	--spectrum-background-base-color: var(--spectrum-gray-50);
-	--spectrum-background-layer-1-color: var(--spectrum-gray-75);
-	--spectrum-background-layer-2-color: var(--spectrum-gray-100);
-	--spectrum-neutral-background-color-default: var(--spectrum-gray-400);
-	--spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
-	--spectrum-neutral-background-color-down: var(--spectrum-gray-200);
-	--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300);
-	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400);
-	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300);
-	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200);
-	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-300);
-	--spectrum-accent-background-color-default: var(--spectrum-accent-color-500);
-	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-400);
-	--spectrum-accent-background-color-down: var(--spectrum-accent-color-300);
-	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-400);
-	--spectrum-informative-background-color-default: var(--spectrum-informative-color-500);
-	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-400);
-	--spectrum-informative-background-color-down: var(--spectrum-informative-color-300);
-	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-400);
-	--spectrum-negative-background-color-default: var(--spectrum-negative-color-500);
-	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-400);
-	--spectrum-negative-background-color-down: var(--spectrum-negative-color-300);
-	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-400);
-	--spectrum-positive-background-color-default: var(--spectrum-positive-color-500);
-	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-400);
-	--spectrum-positive-background-color-down: var(--spectrum-positive-color-300);
-	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-400);
-	--spectrum-notice-background-color-default: var(--spectrum-notice-color-800);
-	--spectrum-gray-background-color-default: var(--spectrum-gray-700);
-	--spectrum-red-background-color-default: var(--spectrum-red-700);
-	--spectrum-orange-background-color-default: var(--spectrum-orange-800);
-	--spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
-	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-900);
-	--spectrum-celery-background-color-default: var(--spectrum-celery-800);
-	--spectrum-green-background-color-default: var(--spectrum-green-700);
-	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
-	--spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
-	--spectrum-blue-background-color-default: var(--spectrum-blue-700);
-	--spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
-	--spectrum-purple-background-color-default: var(--spectrum-purple-700);
-	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
-	--spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
+	--spectrum-overlay-opacity: 0.6;
+	--spectrum-background-layer-2-color: var(--spectrum-gray-75);
+	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-500);
+	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400);
+	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400);
+	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-400);
+	--spectrum-accent-background-color-default: var(--spectrum-accent-color-800);
+	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-700);
+	--spectrum-accent-background-color-down: var(--spectrum-accent-color-700);
+	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-700);
+	--spectrum-informative-background-color-default: var(--spectrum-informative-color-800);
+	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-700);
+	--spectrum-informative-background-color-down: var(--spectrum-informative-color-700);
+	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-700);
+	--spectrum-negative-background-color-default: var(--spectrum-negative-color-800);
+	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-700);
+	--spectrum-negative-background-color-down: var(--spectrum-negative-color-700);
+	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-700);
+	--spectrum-positive-background-color-default: var(--spectrum-positive-color-800);
+	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-700);
+	--spectrum-positive-background-color-down: var(--spectrum-positive-color-700);
+	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-700);
+	--spectrum-notice-background-color-default: var(--spectrum-notice-color-900);
+	--spectrum-gray-background-color-default: var(--spectrum-gray-500);
+	--spectrum-red-background-color-default: var(--spectrum-red-800);
+	--spectrum-orange-background-color-default: var(--spectrum-orange-900);
+	--spectrum-yellow-background-color-default: var(--spectrum-yellow-1100);
+	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-1000);
+	--spectrum-celery-background-color-default: var(--spectrum-celery-900);
+	--spectrum-green-background-color-default: var(--spectrum-green-800);
+	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800);
+	--spectrum-cyan-background-color-default: var(--spectrum-cyan-800);
+	--spectrum-blue-background-color-default: var(--spectrum-blue-800);
+	--spectrum-indigo-background-color-default: var(--spectrum-indigo-800);
+	--spectrum-purple-background-color-default: var(--spectrum-purple-800);
+	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-800);
+	--spectrum-magenta-background-color-default: var(--spectrum-magenta-800);
 	--spectrum-neutral-visual-color: var(--spectrum-gray-600);
 	--spectrum-accent-visual-color: var(--spectrum-accent-color-900);
 	--spectrum-informative-visual-color: var(--spectrum-informative-color-900);
-	--spectrum-negative-visual-color: var(--spectrum-negative-color-700);
+	--spectrum-negative-visual-color: var(--spectrum-negative-color-900);
 	--spectrum-notice-visual-color: var(--spectrum-notice-color-900);
-	--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
+	--spectrum-positive-visual-color: var(--spectrum-positive-color-900);
 	--spectrum-gray-visual-color: var(--spectrum-gray-600);
 	--spectrum-red-visual-color: var(--spectrum-red-700);
 	--spectrum-orange-visual-color: var(--spectrum-orange-900);
@@ -80,868 +71,799 @@
 	--spectrum-purple-visual-color: var(--spectrum-purple-900);
 	--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
 	--spectrum-magenta-visual-color: var(--spectrum-magenta-900);
+	--spectrum-background-elevated-color: var(--spectrum-gray-75);
+	--spectrum-background-pasteboard-color: var(--spectrum-gray-25);
+	--spectrum-brown-visual-color: var(--spectrum-brown-900);
+	--spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900);
+	--spectrum-pink-visual-color: var(--spectrum-pink-900);
+	--spectrum-silver-visual-color: var(--spectrum-silver-900);
+	--spectrum-turquoise-visual-color: var(--spectrum-turquoise-900);
+	--spectrum-brown-background-color-default: var(--spectrum-brown-800);
+	--spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800);
+	--spectrum-pink-background-color-default: var(--spectrum-pink-800);
+	--spectrum-silver-background-color-default: var(--spectrum-silver-800);
+	--spectrum-turquoise-background-color-default: var(--spectrum-turquoise-800);
+	--spectrum-drop-shadow-color-100-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-100-opacity: 0.36;
+	--spectrum-drop-shadow-color-100: rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+	--spectrum-drop-shadow-color-200-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-200-opacity: 0.48;
+	--spectrum-drop-shadow-color-200: rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
+	--spectrum-drop-shadow-color-300-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-300-opacity: 0.6;
+	--spectrum-drop-shadow-color-300: rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity));
+	--spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-300);
+	--spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300);
+	--spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300);
+	--spectrum-green-subtle-background-color-default: var(--spectrum-green-300);
+	--spectrum-orange-subtle-background-color-default: var(--spectrum-orange-300);
+	--spectrum-red-subtle-background-color-default: var(--spectrum-red-300);
+	--spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300);
+	--spectrum-cinnamon-subtle-background-color-default: var(--spectrum-cinnamon-300);
+	--spectrum-celery-subtle-background-color-default: var(--spectrum-celery-300);
+	--spectrum-chartreuse-subtle-background-color-default: var(--spectrum-chartreuse-300);
+	--spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300);
+	--spectrum-fuchsia-subtle-background-color-default: var(--spectrum-fuchsia-300);
+	--spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-300);
+	--spectrum-magenta-subtle-background-color-default: var(--spectrum-magenta-300);
+	--spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300);
+	--spectrum-purple-subtle-background-color-default: var(--spectrum-purple-300);
+	--spectrum-seafoam-subtle-background-color-default: var(--spectrum-seafoam-300);
+	--spectrum-silver-subtle-background-color-default: var(--spectrum-silver-300);
+	--spectrum-turquoise-subtle-background-color-default: var(--spectrum-turquoise-300);
+	--spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-300);
 	--spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800);
-	--spectrum-gray-50-rgb: 29, 29, 29;
+	--spectrum-white-rgb: 255, 255, 255;
+	--spectrum-white: rgba(var(--spectrum-white-rgb));
+	--spectrum-transparent-white-25-rgb: 255, 255, 255;
+	--spectrum-transparent-white-25-opacity: 0;
+	--spectrum-transparent-white-25: rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity));
+	--spectrum-transparent-white-50-rgb: 255, 255, 255;
+	--spectrum-transparent-white-50-opacity: 0.04;
+	--spectrum-transparent-white-50: rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity));
+	--spectrum-transparent-white-75-rgb: 255, 255, 255;
+	--spectrum-transparent-white-75-opacity: 0.07;
+	--spectrum-transparent-white-75: rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity));
+	--spectrum-transparent-white-100-rgb: 255, 255, 255;
+	--spectrum-transparent-white-100-opacity: 0.11;
+	--spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+	--spectrum-transparent-white-200-rgb: 255, 255, 255;
+	--spectrum-transparent-white-200-opacity: 0.14;
+	--spectrum-transparent-white-200: rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
+	--spectrum-transparent-white-300-rgb: 255, 255, 255;
+	--spectrum-transparent-white-300-opacity: 0.17;
+	--spectrum-transparent-white-300: rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
+	--spectrum-transparent-white-400-rgb: 255, 255, 255;
+	--spectrum-transparent-white-400-opacity: 0.21;
+	--spectrum-transparent-white-400: rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
+	--spectrum-transparent-white-500-rgb: 255, 255, 255;
+	--spectrum-transparent-white-500-opacity: 0.39;
+	--spectrum-transparent-white-500: rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
+	--spectrum-transparent-white-600-rgb: 255, 255, 255;
+	--spectrum-transparent-white-600-opacity: 0.51;
+	--spectrum-transparent-white-600: rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
+	--spectrum-transparent-white-700-rgb: 255, 255, 255;
+	--spectrum-transparent-white-700-opacity: 0.66;
+	--spectrum-transparent-white-700: rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
+	--spectrum-transparent-white-800-rgb: 255, 255, 255;
+	--spectrum-transparent-white-800-opacity: 0.85;
+	--spectrum-transparent-white-800: rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
+	--spectrum-transparent-white-900-rgb: 255, 255, 255;
+	--spectrum-transparent-white-900-opacity: 0.94;
+	--spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity));
+	--spectrum-transparent-white-1000-rgb: 255, 255, 255;
+	--spectrum-transparent-white-1000: rgba(var(--spectrum-transparent-white-1000-rgb));
+	--spectrum-transparent-black-25-rgb: 0, 0, 0;
+	--spectrum-transparent-black-25-opacity: 0;
+	--spectrum-transparent-black-25: rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity));
+	--spectrum-transparent-black-50-rgb: 0, 0, 0;
+	--spectrum-transparent-black-50-opacity: 0.03;
+	--spectrum-transparent-black-50: rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity));
+	--spectrum-transparent-black-75-rgb: 0, 0, 0;
+	--spectrum-transparent-black-75-opacity: 0.05;
+	--spectrum-transparent-black-75: rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity));
+	--spectrum-transparent-black-100-rgb: 0, 0, 0;
+	--spectrum-transparent-black-100-opacity: 0.09;
+	--spectrum-transparent-black-100: rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
+	--spectrum-transparent-black-200-rgb: 0, 0, 0;
+	--spectrum-transparent-black-200-opacity: 0.12;
+	--spectrum-transparent-black-200: rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
+	--spectrum-transparent-black-300-rgb: 0, 0, 0;
+	--spectrum-transparent-black-300-opacity: 0.15;
+	--spectrum-transparent-black-300: rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
+	--spectrum-transparent-black-400-rgb: 0, 0, 0;
+	--spectrum-transparent-black-400-opacity: 0.22;
+	--spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
+	--spectrum-transparent-black-500-rgb: 0, 0, 0;
+	--spectrum-transparent-black-500-opacity: 0.44;
+	--spectrum-transparent-black-500: rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
+	--spectrum-transparent-black-600-rgb: 0, 0, 0;
+	--spectrum-transparent-black-600-opacity: 0.56;
+	--spectrum-transparent-black-600: rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
+	--spectrum-transparent-black-700-rgb: 0, 0, 0;
+	--spectrum-transparent-black-700-opacity: 0.69;
+	--spectrum-transparent-black-700: rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
+	--spectrum-transparent-black-800-rgb: 0, 0, 0;
+	--spectrum-transparent-black-800-opacity: 0.84;
+	--spectrum-transparent-black-800: rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
+	--spectrum-transparent-black-900-rgb: 0, 0, 0;
+	--spectrum-transparent-black-900-opacity: 0.93;
+	--spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity));
+	--spectrum-gray-25-rgb: 17, 17, 17;
+	--spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb));
+	--spectrum-gray-50-rgb: 27, 27, 27;
 	--spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-	--spectrum-gray-75-rgb: 38, 38, 38;
+	--spectrum-gray-75-rgb: 34, 34, 34;
 	--spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-	--spectrum-gray-100-rgb: 50, 50, 50;
+	--spectrum-gray-100-rgb: 44, 44, 44;
 	--spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-	--spectrum-gray-200-rgb: 63, 63, 63;
+	--spectrum-gray-200-rgb: 50, 50, 50;
 	--spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-	--spectrum-gray-300-rgb: 84, 84, 84;
+	--spectrum-gray-300-rgb: 57, 57, 57;
 	--spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-	--spectrum-gray-400-rgb: 112, 112, 112;
+	--spectrum-gray-400-rgb: 68, 68, 68;
 	--spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-	--spectrum-gray-500-rgb: 144, 144, 144;
+	--spectrum-gray-500-rgb: 109, 109, 109;
 	--spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-	--spectrum-gray-600-rgb: 178, 178, 178;
+	--spectrum-gray-600-rgb: 138, 138, 138;
 	--spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-	--spectrum-gray-700-rgb: 209, 209, 209;
+	--spectrum-gray-700-rgb: 175, 175, 175;
 	--spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
-	--spectrum-gray-800-rgb: 235, 235, 235;
+	--spectrum-gray-800-rgb: 219, 219, 219;
 	--spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
-	--spectrum-gray-900-rgb: 255, 255, 255;
+	--spectrum-gray-900-rgb: 242, 242, 242;
 	--spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
-	--spectrum-blue-100-rgb: 0, 56, 119;
+	--spectrum-gray-1000-rgb: 255, 255, 255;
+	--spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb));
+	--spectrum-blue-100-rgb: 14, 23, 63;
 	--spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-	--spectrum-blue-200-rgb: 0, 65, 138;
+	--spectrum-blue-200-rgb: 15, 28, 82;
 	--spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-	--spectrum-blue-300-rgb: 0, 77, 163;
+	--spectrum-blue-300-rgb: 12, 33, 117;
 	--spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-	--spectrum-blue-400-rgb: 0, 89, 194;
+	--spectrum-blue-400-rgb: 18, 45, 154;
 	--spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-	--spectrum-blue-500-rgb: 3, 103, 224;
+	--spectrum-blue-500-rgb: 26, 58, 195;
 	--spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-	--spectrum-blue-600-rgb: 19, 121, 243;
+	--spectrum-blue-600-rgb: 37, 73, 229;
 	--spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-	--spectrum-blue-700-rgb: 52, 143, 244;
+	--spectrum-blue-700-rgb: 52, 91, 248;
 	--spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-	--spectrum-blue-800-rgb: 84, 163, 246;
+	--spectrum-blue-800-rgb: 64, 105, 253;
 	--spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-	--spectrum-blue-900-rgb: 114, 183, 249;
+	--spectrum-blue-900-rgb: 86, 129, 255;
 	--spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-	--spectrum-blue-1000-rgb: 143, 202, 252;
+	--spectrum-blue-1000-rgb: 105, 149, 254;
 	--spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-	--spectrum-blue-1100-rgb: 174, 219, 254;
+	--spectrum-blue-1100-rgb: 124, 169, 252;
 	--spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-	--spectrum-blue-1200-rgb: 204, 233, 255;
+	--spectrum-blue-1200-rgb: 152, 192, 252;
 	--spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-	--spectrum-blue-1300-rgb: 232, 246, 255;
+	--spectrum-blue-1300-rgb: 181, 213, 253;
 	--spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-	--spectrum-blue-1400-rgb: 255, 255, 255;
+	--spectrum-blue-1400-rgb: 213, 231, 254;
 	--spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-	--spectrum-red-100-rgb: 123, 0, 0;
+	--spectrum-blue-1500-rgb: 238, 245, 255;
+	--spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb));
+	--spectrum-blue-1600-rgb: 255, 255, 255;
+	--spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb));
+	--spectrum-red-100-rgb: 54, 10, 3;
 	--spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-	--spectrum-red-200-rgb: 141, 0, 0;
+	--spectrum-red-200-rgb: 68, 13, 5;
 	--spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-	--spectrum-red-300-rgb: 165, 0, 0;
+	--spectrum-red-300-rgb: 87, 17, 7;
 	--spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-	--spectrum-red-400-rgb: 190, 4, 3;
+	--spectrum-red-400-rgb: 115, 24, 11;
 	--spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-	--spectrum-red-500-rgb: 215, 25, 19;
+	--spectrum-red-500-rgb: 147, 31, 17;
 	--spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-	--spectrum-red-600-rgb: 234, 56, 41;
+	--spectrum-red-600-rgb: 177, 38, 23;
 	--spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-	--spectrum-red-700-rgb: 246, 88, 67;
+	--spectrum-red-700-rgb: 205, 46, 29;
 	--spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-	--spectrum-red-800-rgb: 255, 117, 94;
+	--spectrum-red-800-rgb: 223, 52, 34;
 	--spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-	--spectrum-red-900-rgb: 255, 149, 129;
+	--spectrum-red-900-rgb: 252, 67, 46;
 	--spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-	--spectrum-red-1000-rgb: 255, 176, 161;
+	--spectrum-red-1000-rgb: 255, 103, 86;
 	--spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-	--spectrum-red-1100-rgb: 255, 201, 189;
+	--spectrum-red-1100-rgb: 255, 134, 120;
 	--spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-	--spectrum-red-1200-rgb: 255, 222, 216;
+	--spectrum-red-1200-rgb: 255, 167, 157;
 	--spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-	--spectrum-red-1300-rgb: 255, 241, 238;
+	--spectrum-red-1300-rgb: 255, 196, 189;
 	--spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-	--spectrum-red-1400-rgb: 255, 255, 255;
+	--spectrum-red-1400-rgb: 255, 222, 219;
 	--spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-	--spectrum-orange-100-rgb: 102, 37, 0;
+	--spectrum-red-1500-rgb: 255, 242, 240;
+	--spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb));
+	--spectrum-red-1600-rgb: 255, 255, 255;
+	--spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb));
+	--spectrum-orange-100-rgb: 49, 16, 0;
 	--spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-	--spectrum-orange-200-rgb: 117, 45, 0;
+	--spectrum-orange-200-rgb: 61, 21, 0;
 	--spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-	--spectrum-orange-300-rgb: 137, 55, 0;
+	--spectrum-orange-300-rgb: 80, 27, 0;
 	--spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-	--spectrum-orange-400-rgb: 158, 66, 0;
+	--spectrum-orange-400-rgb: 106, 36, 0;
 	--spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-	--spectrum-orange-500-rgb: 180, 78, 0;
+	--spectrum-orange-500-rgb: 135, 47, 0;
 	--spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-	--spectrum-orange-600-rgb: 202, 93, 0;
+	--spectrum-orange-600-rgb: 162, 59, 0;
 	--spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-	--spectrum-orange-700-rgb: 225, 109, 0;
+	--spectrum-orange-700-rgb: 185, 73, 0;
 	--spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-	--spectrum-orange-800-rgb: 244, 129, 12;
+	--spectrum-orange-800-rgb: 199, 82, 0;
 	--spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-	--spectrum-orange-900-rgb: 254, 154, 46;
+	--spectrum-orange-900-rgb: 224, 100, 0;
 	--spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-	--spectrum-orange-1000-rgb: 255, 181, 88;
+	--spectrum-orange-1000-rgb: 243, 117, 0;
 	--spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-	--spectrum-orange-1100-rgb: 253, 206, 136;
+	--spectrum-orange-1100-rgb: 255, 137, 0;
 	--spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-	--spectrum-orange-1200-rgb: 255, 225, 179;
+	--spectrum-orange-1200-rgb: 255, 173, 45;
 	--spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-	--spectrum-orange-1300-rgb: 255, 242, 221;
+	--spectrum-orange-1300-rgb: 255, 201, 116;
 	--spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-	--spectrum-orange-1400-rgb: 255, 253, 249;
+	--spectrum-orange-1400-rgb: 255, 225, 178;
 	--spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-	--spectrum-yellow-100-rgb: 76, 54, 0;
+	--spectrum-orange-1500-rgb: 255, 243, 225;
+	--spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb));
+	--spectrum-orange-1600-rgb: 255, 255, 255;
+	--spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb));
+	--spectrum-yellow-100-rgb: 37, 23, 0;
 	--spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-	--spectrum-yellow-200-rgb: 88, 64, 0;
+	--spectrum-yellow-200-rgb: 47, 29, 0;
 	--spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-	--spectrum-yellow-300-rgb: 103, 76, 0;
+	--spectrum-yellow-300-rgb: 61, 39, 0;
 	--spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-	--spectrum-yellow-400-rgb: 119, 89, 0;
+	--spectrum-yellow-400-rgb: 83, 52, 0;
 	--spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-	--spectrum-yellow-500-rgb: 136, 104, 0;
+	--spectrum-yellow-500-rgb: 107, 67, 0;
 	--spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-	--spectrum-yellow-600-rgb: 155, 120, 0;
+	--spectrum-yellow-600-rgb: 130, 82, 0;
 	--spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-	--spectrum-yellow-700-rgb: 174, 137, 0;
+	--spectrum-yellow-700-rgb: 151, 97, 0;
 	--spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-	--spectrum-yellow-800-rgb: 192, 156, 0;
+	--spectrum-yellow-800-rgb: 164, 106, 0;
 	--spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-	--spectrum-yellow-900-rgb: 211, 174, 0;
+	--spectrum-yellow-900-rgb: 186, 124, 0;
 	--spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-	--spectrum-yellow-1000-rgb: 228, 194, 0;
+	--spectrum-yellow-1000-rgb: 203, 141, 0;
 	--spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-	--spectrum-yellow-1100-rgb: 244, 213, 0;
+	--spectrum-yellow-1100-rgb: 218, 159, 0;
 	--spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-	--spectrum-yellow-1200-rgb: 249, 232, 92;
+	--spectrum-yellow-1200-rgb: 235, 183, 0;
 	--spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-	--spectrum-yellow-1300-rgb: 252, 246, 187;
+	--spectrum-yellow-1300-rgb: 249, 206, 0;
 	--spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-	--spectrum-yellow-1400-rgb: 255, 255, 255;
+	--spectrum-yellow-1400-rgb: 255, 230, 86;
 	--spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-	--spectrum-chartreuse-100-rgb: 48, 64, 0;
+	--spectrum-yellow-1500-rgb: 255, 246, 195;
+	--spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb));
+	--spectrum-yellow-1600-rgb: 255, 255, 255;
+	--spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb));
+	--spectrum-chartreuse-100-rgb: 23, 28, 0;
 	--spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-	--spectrum-chartreuse-200-rgb: 55, 74, 0;
+	--spectrum-chartreuse-200-rgb: 30, 36, 0;
 	--spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-	--spectrum-chartreuse-300-rgb: 65, 87, 0;
+	--spectrum-chartreuse-300-rgb: 39, 47, 0;
 	--spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-	--spectrum-chartreuse-400-rgb: 76, 102, 0;
+	--spectrum-chartreuse-400-rgb: 53, 63, 0;
 	--spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-	--spectrum-chartreuse-500-rgb: 89, 118, 0;
+	--spectrum-chartreuse-500-rgb: 68, 82, 0;
 	--spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-	--spectrum-chartreuse-600-rgb: 102, 136, 0;
+	--spectrum-chartreuse-600-rgb: 83, 100, 0;
 	--spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-	--spectrum-chartreuse-700-rgb: 117, 154, 0;
+	--spectrum-chartreuse-700-rgb: 97, 116, 0;
 	--spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-	--spectrum-chartreuse-800-rgb: 132, 173, 1;
+	--spectrum-chartreuse-800-rgb: 106, 127, 0;
 	--spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-	--spectrum-chartreuse-900-rgb: 148, 192, 8;
+	--spectrum-chartreuse-900-rgb: 122, 147, 0;
 	--spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-	--spectrum-chartreuse-1000-rgb: 166, 211, 18;
+	--spectrum-chartreuse-1000-rgb: 136, 164, 0;
 	--spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-	--spectrum-chartreuse-1100-rgb: 184, 229, 37;
+	--spectrum-chartreuse-1100-rgb: 151, 181, 0;
 	--spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-	--spectrum-chartreuse-1200-rgb: 205, 245, 71;
+	--spectrum-chartreuse-1200-rgb: 169, 203, 0;
 	--spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-	--spectrum-chartreuse-1300-rgb: 231, 254, 154;
+	--spectrum-chartreuse-1300-rgb: 187, 225, 0;
 	--spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-	--spectrum-chartreuse-1400-rgb: 255, 255, 255;
+	--spectrum-chartreuse-1400-rgb: 219, 240, 117;
 	--spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-	--spectrum-celery-100-rgb: 0, 69, 10;
+	--spectrum-chartreuse-1500-rgb: 242, 249, 206;
+	--spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb));
+	--spectrum-chartreuse-1600-rgb: 255, 255, 255;
+	--spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb));
+	--spectrum-celery-100-rgb: 11, 31, 0;
 	--spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-	--spectrum-celery-200-rgb: 0, 80, 12;
+	--spectrum-celery-200-rgb: 15, 38, 0;
 	--spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-	--spectrum-celery-300-rgb: 0, 94, 14;
+	--spectrum-celery-300-rgb: 21, 51, 1;
 	--spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-	--spectrum-celery-400-rgb: 0, 109, 15;
+	--spectrum-celery-400-rgb: 31, 67, 4;
 	--spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-	--spectrum-celery-500-rgb: 0, 127, 15;
+	--spectrum-celery-500-rgb: 41, 86, 8;
 	--spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-	--spectrum-celery-600-rgb: 0, 145, 18;
+	--spectrum-celery-600-rgb: 50, 105, 11;
 	--spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-	--spectrum-celery-700-rgb: 4, 165, 30;
+	--spectrum-celery-700-rgb: 60, 122, 15;
 	--spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-	--spectrum-celery-800-rgb: 34, 184, 51;
+	--spectrum-celery-800-rgb: 66, 134, 18;
 	--spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-	--spectrum-celery-900-rgb: 68, 202, 73;
+	--spectrum-celery-900-rgb: 78, 154, 23;
 	--spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-	--spectrum-celery-1000-rgb: 105, 220, 99;
+	--spectrum-celery-1000-rgb: 88, 172, 28;
 	--spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-	--spectrum-celery-1100-rgb: 142, 235, 127;
+	--spectrum-celery-1100-rgb: 100, 190, 35;
 	--spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-	--spectrum-celery-1200-rgb: 180, 247, 162;
+	--spectrum-celery-1200-rgb: 116, 213, 46;
 	--spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-	--spectrum-celery-1300-rgb: 221, 253, 211;
+	--spectrum-celery-1300-rgb: 136, 234, 65;
 	--spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-	--spectrum-celery-1400-rgb: 255, 255, 255;
+	--spectrum-celery-1400-rgb: 170, 251, 112;
 	--spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-	--spectrum-green-100-rgb: 4, 67, 41;
+	--spectrum-celery-1500-rgb: 222, 255, 198;
+	--spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb));
+	--spectrum-celery-1600-rgb: 255, 255, 255;
+	--spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb));
+	--spectrum-green-100-rgb: 0, 30, 23;
 	--spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-	--spectrum-green-200-rgb: 0, 78, 47;
+	--spectrum-green-200-rgb: 0, 38, 29;
 	--spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-	--spectrum-green-300-rgb: 0, 92, 56;
+	--spectrum-green-300-rgb: 0, 51, 38;
 	--spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-	--spectrum-green-400-rgb: 0, 108, 67;
+	--spectrum-green-400-rgb: 0, 68, 48;
 	--spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-	--spectrum-green-500-rgb: 0, 125, 78;
+	--spectrum-green-500-rgb: 2, 87, 58;
 	--spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-	--spectrum-green-600-rgb: 0, 143, 93;
+	--spectrum-green-600-rgb: 3, 106, 67;
 	--spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-	--spectrum-green-700-rgb: 18, 162, 108;
+	--spectrum-green-700-rgb: 4, 124, 75;
 	--spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-	--spectrum-green-800-rgb: 43, 180, 125;
+	--spectrum-green-800-rgb: 6, 136, 80;
 	--spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-	--spectrum-green-900-rgb: 67, 199, 143;
+	--spectrum-green-900-rgb: 9, 157, 89;
 	--spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-	--spectrum-green-1000-rgb: 94, 217, 162;
+	--spectrum-green-1000-rgb: 14, 175, 98;
 	--spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-	--spectrum-green-1100-rgb: 129, 233, 184;
+	--spectrum-green-1100-rgb: 24, 193, 110;
 	--spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-	--spectrum-green-1200-rgb: 177, 244, 209;
+	--spectrum-green-1200-rgb: 57, 215, 134;
 	--spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-	--spectrum-green-1300-rgb: 223, 250, 234;
+	--spectrum-green-1300-rgb: 126, 231, 172;
 	--spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-	--spectrum-green-1400-rgb: 254, 255, 252;
+	--spectrum-green-1400-rgb: 189, 241, 208;
 	--spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-	--spectrum-seafoam-100-rgb: 18, 65, 63;
+	--spectrum-green-1500-rgb: 229, 250, 236;
+	--spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb));
+	--spectrum-green-1600-rgb: 255, 255, 255;
+	--spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb));
+	--spectrum-seafoam-100-rgb: 0, 30, 27;
 	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-	--spectrum-seafoam-200-rgb: 14, 76, 73;
+	--spectrum-seafoam-200-rgb: 0, 39, 35;
 	--spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-	--spectrum-seafoam-300-rgb: 4, 90, 87;
+	--spectrum-seafoam-300-rgb: 0, 50, 44;
 	--spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-	--spectrum-seafoam-400-rgb: 0, 105, 101;
+	--spectrum-seafoam-400-rgb: 0, 67, 59;
 	--spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-	--spectrum-seafoam-500-rgb: 0, 122, 117;
+	--spectrum-seafoam-500-rgb: 2, 86, 75;
 	--spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-	--spectrum-seafoam-600-rgb: 0, 140, 135;
+	--spectrum-seafoam-600-rgb: 4, 105, 89;
 	--spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-	--spectrum-seafoam-700-rgb: 0, 158, 152;
+	--spectrum-seafoam-700-rgb: 6, 122, 103;
 	--spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-	--spectrum-seafoam-800-rgb: 3, 178, 171;
+	--spectrum-seafoam-800-rgb: 8, 134, 112;
 	--spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-	--spectrum-seafoam-900-rgb: 54, 197, 189;
+	--spectrum-seafoam-900-rgb: 10, 154, 128;
 	--spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-	--spectrum-seafoam-1000-rgb: 93, 214, 207;
+	--spectrum-seafoam-1000-rgb: 12, 173, 142;
 	--spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-	--spectrum-seafoam-1100-rgb: 132, 230, 223;
+	--spectrum-seafoam-1100-rgb: 14, 190, 156;
 	--spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-	--spectrum-seafoam-1200-rgb: 176, 242, 236;
+	--spectrum-seafoam-1200-rgb: 29, 214, 176;
 	--spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-	--spectrum-seafoam-1300-rgb: 223, 249, 246;
+	--spectrum-seafoam-1300-rgb: 122, 229, 203;
 	--spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-	--spectrum-seafoam-1400-rgb: 254, 255, 254;
+	--spectrum-seafoam-1400-rgb: 186, 241, 222;
 	--spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-	--spectrum-cyan-100-rgb: 0, 61, 98;
+	--spectrum-seafoam-1500-rgb: 229, 249, 243;
+	--spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb));
+	--spectrum-seafoam-1600-rgb: 255, 255, 255;
+	--spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb));
+	--spectrum-cyan-100-rgb: 0, 29, 39;
 	--spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-	--spectrum-cyan-200-rgb: 0, 71, 111;
+	--spectrum-cyan-200-rgb: 0, 36, 49;
 	--spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-	--spectrum-cyan-300-rgb: 0, 85, 127;
+	--spectrum-cyan-300-rgb: 0, 48, 65;
 	--spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-	--spectrum-cyan-400-rgb: 0, 100, 145;
+	--spectrum-cyan-400-rgb: 0, 64, 88;
 	--spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-	--spectrum-cyan-500-rgb: 0, 116, 162;
+	--spectrum-cyan-500-rgb: 0, 82, 113;
 	--spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-	--spectrum-cyan-600-rgb: 0, 134, 180;
+	--spectrum-cyan-600-rgb: 3, 99, 140;
 	--spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-	--spectrum-cyan-700-rgb: 0, 153, 198;
+	--spectrum-cyan-700-rgb: 8, 115, 168;
 	--spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-	--spectrum-cyan-800-rgb: 14, 173, 215;
+	--spectrum-cyan-800-rgb: 13, 125, 186;
 	--spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-	--spectrum-cyan-900-rgb: 44, 193, 230;
+	--spectrum-cyan-900-rgb: 24, 142, 220;
 	--spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-	--spectrum-cyan-1000-rgb: 84, 211, 241;
+	--spectrum-cyan-1000-rgb: 38, 159, 244;
 	--spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-	--spectrum-cyan-1100-rgb: 127, 228, 249;
+	--spectrum-cyan-1100-rgb: 63, 177, 255;
 	--spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-	--spectrum-cyan-1200-rgb: 167, 241, 255;
+	--spectrum-cyan-1200-rgb: 107, 199, 255;
 	--spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-	--spectrum-cyan-1300-rgb: 215, 250, 255;
+	--spectrum-cyan-1300-rgb: 152, 219, 255;
 	--spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-	--spectrum-cyan-1400-rgb: 255, 255, 255;
+	--spectrum-cyan-1400-rgb: 195, 236, 252;
 	--spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-	--spectrum-indigo-100-rgb: 40, 44, 140;
+	--spectrum-cyan-1500-rgb: 230, 248, 253;
+	--spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb));
+	--spectrum-cyan-1600-rgb: 255, 255, 255;
+	--spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb));
+	--spectrum-indigo-100-rgb: 30, 0, 93;
 	--spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-	--spectrum-indigo-200-rgb: 47, 52, 163;
+	--spectrum-indigo-200-rgb: 35, 0, 110;
 	--spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-	--spectrum-indigo-300-rgb: 57, 63, 187;
+	--spectrum-indigo-300-rgb: 47, 0, 140;
 	--spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-	--spectrum-indigo-400-rgb: 70, 75, 211;
+	--spectrum-indigo-400-rgb: 62, 12, 174;
 	--spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-	--spectrum-indigo-500-rgb: 85, 91, 231;
+	--spectrum-indigo-500-rgb: 79, 30, 209;
 	--spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-	--spectrum-indigo-600-rgb: 104, 109, 244;
+	--spectrum-indigo-600-rgb: 95, 52, 235;
 	--spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-	--spectrum-indigo-700-rgb: 124, 129, 251;
+	--spectrum-indigo-700-rgb: 109, 75, 248;
 	--spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-	--spectrum-indigo-800-rgb: 145, 149, 255;
+	--spectrum-indigo-800-rgb: 116, 91, 252;
 	--spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-	--spectrum-indigo-900-rgb: 167, 170, 255;
+	--spectrum-indigo-900-rgb: 128, 119, 254;
 	--spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-	--spectrum-indigo-1000-rgb: 188, 190, 255;
+	--spectrum-indigo-1000-rgb: 139, 141, 254;
 	--spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-	--spectrum-indigo-1100-rgb: 208, 210, 255;
+	--spectrum-indigo-1100-rgb: 153, 161, 255;
 	--spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-	--spectrum-indigo-1200-rgb: 226, 228, 255;
+	--spectrum-indigo-1200-rgb: 176, 186, 255;
 	--spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-	--spectrum-indigo-1300-rgb: 243, 243, 254;
+	--spectrum-indigo-1300-rgb: 199, 208, 255;
 	--spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-	--spectrum-indigo-1400-rgb: 255, 255, 255;
+	--spectrum-indigo-1400-rgb: 223, 228, 255;
 	--spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-	--spectrum-purple-100-rgb: 76, 13, 157;
+	--spectrum-indigo-1500-rgb: 243, 244, 255;
+	--spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb));
+	--spectrum-indigo-1600-rgb: 255, 255, 255;
+	--spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb));
+	--spectrum-purple-100-rgb: 41, 0, 79;
 	--spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-	--spectrum-purple-200-rgb: 89, 17, 177;
+	--spectrum-purple-200-rgb: 50, 0, 96;
 	--spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-	--spectrum-purple-300-rgb: 105, 28, 200;
+	--spectrum-purple-300-rgb: 64, 0, 122;
 	--spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-	--spectrum-purple-400-rgb: 122, 45, 218;
+	--spectrum-purple-400-rgb: 83, 0, 159;
 	--spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-	--spectrum-purple-500-rgb: 140, 65, 233;
+	--spectrum-purple-500-rgb: 107, 6, 195;
 	--spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-	--spectrum-purple-600-rgb: 157, 87, 243;
+	--spectrum-purple-600-rgb: 130, 34, 215;
 	--spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-	--spectrum-purple-700-rgb: 172, 111, 249;
+	--spectrum-purple-700-rgb: 148, 62, 224;
 	--spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-	--spectrum-purple-800-rgb: 187, 135, 251;
+	--spectrum-purple-800-rgb: 157, 78, 228;
 	--spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-	--spectrum-purple-900-rgb: 202, 159, 252;
+	--spectrum-purple-900-rgb: 173, 105, 233;
 	--spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-	--spectrum-purple-1000-rgb: 215, 182, 254;
+	--spectrum-purple-1000-rgb: 186, 127, 237;
 	--spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-	--spectrum-purple-1100-rgb: 228, 204, 254;
+	--spectrum-purple-1100-rgb: 197, 149, 240;
 	--spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-	--spectrum-purple-1200-rgb: 239, 223, 255;
+	--spectrum-purple-1200-rgb: 212, 176, 244;
 	--spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-	--spectrum-purple-1300-rgb: 249, 240, 255;
+	--spectrum-purple-1300-rgb: 225, 201, 247;
 	--spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-	--spectrum-purple-1400-rgb: 255, 253, 255;
+	--spectrum-purple-1400-rgb: 238, 224, 250;
 	--spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-	--spectrum-fuchsia-100-rgb: 107, 3, 106;
+	--spectrum-purple-1500-rgb: 248, 243, 253;
+	--spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb));
+	--spectrum-purple-1600-rgb: 255, 255, 255;
+	--spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb));
+	--spectrum-fuchsia-100-rgb: 50, 0, 61;
 	--spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-	--spectrum-fuchsia-200-rgb: 123, 0, 123;
+	--spectrum-fuchsia-200-rgb: 61, 0, 74;
 	--spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-	--spectrum-fuchsia-300-rgb: 144, 0, 145;
+	--spectrum-fuchsia-300-rgb: 79, 0, 95;
 	--spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-	--spectrum-fuchsia-400-rgb: 165, 13, 166;
+	--spectrum-fuchsia-400-rgb: 102, 9, 120;
 	--spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-	--spectrum-fuchsia-500-rgb: 185, 37, 185;
+	--spectrum-fuchsia-500-rgb: 127, 23, 146;
 	--spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-	--spectrum-fuchsia-600-rgb: 205, 57, 206;
+	--spectrum-fuchsia-600-rgb: 151, 38, 170;
 	--spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-	--spectrum-fuchsia-700-rgb: 223, 81, 224;
+	--spectrum-fuchsia-700-rgb: 173, 51, 192;
 	--spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-	--spectrum-fuchsia-800-rgb: 235, 110, 236;
+	--spectrum-fuchsia-800-rgb: 186, 60, 206;
 	--spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-	--spectrum-fuchsia-900-rgb: 244, 140, 242;
+	--spectrum-fuchsia-900-rgb: 213, 73, 235;
 	--spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-	--spectrum-fuchsia-1000-rgb: 250, 168, 245;
+	--spectrum-fuchsia-1000-rgb: 232, 91, 253;
 	--spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-	--spectrum-fuchsia-1100-rgb: 254, 194, 248;
+	--spectrum-fuchsia-1100-rgb: 240, 122, 255;
 	--spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-	--spectrum-fuchsia-1200-rgb: 255, 219, 250;
+	--spectrum-fuchsia-1200-rgb: 245, 159, 255;
 	--spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-	--spectrum-fuchsia-1300-rgb: 255, 239, 252;
+	--spectrum-fuchsia-1300-rgb: 248, 191, 255;
 	--spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-	--spectrum-fuchsia-1400-rgb: 255, 253, 255;
+	--spectrum-fuchsia-1400-rgb: 251, 219, 255;
 	--spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-	--spectrum-magenta-100-rgb: 118, 0, 58;
+	--spectrum-fuchsia-1500-rgb: 253, 241, 255;
+	--spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb));
+	--spectrum-fuchsia-1600-rgb: 255, 255, 255;
+	--spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb));
+	--spectrum-magenta-100-rgb: 59, 0, 22;
 	--spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-	--spectrum-magenta-200-rgb: 137, 0, 66;
+	--spectrum-magenta-200-rgb: 74, 0, 27;
 	--spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-	--spectrum-magenta-300-rgb: 160, 0, 77;
+	--spectrum-magenta-300-rgb: 93, 0, 34;
 	--spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-	--spectrum-magenta-400-rgb: 182, 18, 90;
+	--spectrum-magenta-400-rgb: 123, 0, 45;
 	--spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-	--spectrum-magenta-500-rgb: 203, 38, 109;
+	--spectrum-magenta-500-rgb: 152, 7, 60;
 	--spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-	--spectrum-magenta-600-rgb: 222, 61, 130;
+	--spectrum-magenta-600-rgb: 181, 19, 76;
 	--spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-	--spectrum-magenta-700-rgb: 237, 87, 149;
+	--spectrum-magenta-700-rgb: 207, 31, 92;
 	--spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-	--spectrum-magenta-800-rgb: 249, 114, 167;
+	--spectrum-magenta-800-rgb: 224, 38, 101;
 	--spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-	--spectrum-magenta-900-rgb: 255, 143, 185;
+	--spectrum-magenta-900-rgb: 255, 51, 119;
 	--spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-	--spectrum-magenta-1000-rgb: 255, 172, 202;
+	--spectrum-magenta-1000-rgb: 255, 96, 149;
 	--spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-	--spectrum-magenta-1100-rgb: 255, 198, 218;
+	--spectrum-magenta-1100-rgb: 255, 128, 171;
 	--spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-	--spectrum-magenta-1200-rgb: 255, 221, 233;
+	--spectrum-magenta-1200-rgb: 255, 163, 194;
 	--spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-	--spectrum-magenta-1300-rgb: 255, 240, 245;
+	--spectrum-magenta-1300-rgb: 255, 193, 214;
 	--spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
-	--spectrum-magenta-1400-rgb: 255, 252, 253;
-	--spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
-	--spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800);
-	--spectrum-icon-color-green-primary-default: var(--spectrum-green-800);
-	--spectrum-icon-color-red-primary-default: var(--spectrum-red-700);
-	--spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000);
-}
-.spectrum--darkest {
-	--spectrum-overlay-opacity: 0.6;
-	--spectrum-drop-shadow-color-rgb: 0, 0, 0;
-	--spectrum-drop-shadow-color-opacity: 0.8;
-	--spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
-	--spectrum-background-base-color: var(--spectrum-gray-50);
-	--spectrum-background-layer-1-color: var(--spectrum-gray-75);
-	--spectrum-background-layer-2-color: var(--spectrum-gray-100);
-	--spectrum-neutral-background-color-default: var(--spectrum-gray-400);
-	--spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
-	--spectrum-neutral-background-color-down: var(--spectrum-gray-200);
-	--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300);
-	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400);
-	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300);
-	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200);
-	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-300);
-	--spectrum-accent-background-color-default: var(--spectrum-accent-color-600);
-	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-500);
-	--spectrum-accent-background-color-down: var(--spectrum-accent-color-400);
-	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-500);
-	--spectrum-informative-background-color-default: var(--spectrum-informative-color-600);
-	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-500);
-	--spectrum-informative-background-color-down: var(--spectrum-informative-color-400);
-	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-500);
-	--spectrum-negative-background-color-default: var(--spectrum-negative-color-600);
-	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-500);
-	--spectrum-negative-background-color-down: var(--spectrum-negative-color-400);
-	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-500);
-	--spectrum-positive-background-color-default: var(--spectrum-positive-color-600);
-	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-500);
-	--spectrum-positive-background-color-down: var(--spectrum-positive-color-400);
-	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-500);
-	--spectrum-notice-background-color-default: var(--spectrum-notice-color-800);
-	--spectrum-gray-background-color-default: var(--spectrum-gray-700);
-	--spectrum-red-background-color-default: var(--spectrum-red-700);
-	--spectrum-orange-background-color-default: var(--spectrum-orange-800);
-	--spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
-	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-900);
-	--spectrum-celery-background-color-default: var(--spectrum-celery-800);
-	--spectrum-green-background-color-default: var(--spectrum-green-700);
-	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
-	--spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
-	--spectrum-blue-background-color-default: var(--spectrum-blue-700);
-	--spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
-	--spectrum-purple-background-color-default: var(--spectrum-purple-700);
-	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
-	--spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
-	--spectrum-neutral-visual-color: var(--spectrum-gray-600);
-	--spectrum-accent-visual-color: var(--spectrum-accent-color-900);
-	--spectrum-informative-visual-color: var(--spectrum-informative-color-900);
-	--spectrum-negative-visual-color: var(--spectrum-negative-color-700);
-	--spectrum-notice-visual-color: var(--spectrum-notice-color-900);
-	--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
-	--spectrum-gray-visual-color: var(--spectrum-gray-600);
-	--spectrum-red-visual-color: var(--spectrum-red-700);
-	--spectrum-orange-visual-color: var(--spectrum-orange-900);
-	--spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
-	--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
-	--spectrum-celery-visual-color: var(--spectrum-celery-800);
-	--spectrum-green-visual-color: var(--spectrum-green-800);
-	--spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
-	--spectrum-cyan-visual-color: var(--spectrum-cyan-900);
-	--spectrum-blue-visual-color: var(--spectrum-blue-900);
-	--spectrum-indigo-visual-color: var(--spectrum-indigo-900);
-	--spectrum-purple-visual-color: var(--spectrum-purple-900);
-	--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
-	--spectrum-magenta-visual-color: var(--spectrum-magenta-900);
-	--spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800);
-	--spectrum-gray-50-rgb: 0, 0, 0;
-	--spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-	--spectrum-gray-75-rgb: 14, 14, 14;
-	--spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-	--spectrum-gray-100-rgb: 29, 29, 29;
-	--spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-	--spectrum-gray-200-rgb: 48, 48, 48;
-	--spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-	--spectrum-gray-300-rgb: 75, 75, 75;
-	--spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-	--spectrum-gray-400-rgb: 106, 106, 106;
-	--spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-	--spectrum-gray-500-rgb: 141, 141, 141;
-	--spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-	--spectrum-gray-600-rgb: 176, 176, 176;
-	--spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-	--spectrum-gray-700-rgb: 208, 208, 208;
-	--spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
-	--spectrum-gray-800-rgb: 235, 235, 235;
-	--spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
-	--spectrum-gray-900-rgb: 255, 255, 255;
-	--spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
-	--spectrum-blue-100-rgb: 0, 38, 81;
-	--spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-	--spectrum-blue-200-rgb: 0, 50, 106;
-	--spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-	--spectrum-blue-300-rgb: 0, 64, 135;
-	--spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-	--spectrum-blue-400-rgb: 0, 78, 166;
-	--spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-	--spectrum-blue-500-rgb: 0, 92, 200;
-	--spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-	--spectrum-blue-600-rgb: 6, 108, 231;
-	--spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-	--spectrum-blue-700-rgb: 29, 128, 245;
-	--spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-	--spectrum-blue-800-rgb: 64, 150, 243;
-	--spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-	--spectrum-blue-900-rgb: 94, 170, 247;
-	--spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-	--spectrum-blue-1000-rgb: 124, 189, 250;
-	--spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-	--spectrum-blue-1100-rgb: 152, 206, 253;
-	--spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-	--spectrum-blue-1200-rgb: 179, 222, 254;
-	--spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-	--spectrum-blue-1300-rgb: 206, 234, 255;
-	--spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-	--spectrum-blue-1400-rgb: 227, 243, 255;
-	--spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-	--spectrum-red-100-rgb: 87, 0, 0;
-	--spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-	--spectrum-red-200-rgb: 110, 0, 0;
-	--spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-	--spectrum-red-300-rgb: 138, 0, 0;
-	--spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-	--spectrum-red-400-rgb: 167, 0, 0;
-	--spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-	--spectrum-red-500-rgb: 196, 7, 6;
-	--spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-	--spectrum-red-600-rgb: 221, 33, 24;
-	--spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-	--spectrum-red-700-rgb: 238, 67, 49;
-	--spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-	--spectrum-red-800-rgb: 249, 99, 76;
-	--spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-	--spectrum-red-900-rgb: 255, 129, 107;
-	--spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-	--spectrum-red-1000-rgb: 255, 158, 140;
-	--spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-	--spectrum-red-1100-rgb: 255, 183, 169;
-	--spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-	--spectrum-red-1200-rgb: 255, 205, 195;
-	--spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-	--spectrum-red-1300-rgb: 255, 223, 217;
-	--spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-	--spectrum-red-1400-rgb: 255, 237, 234;
-	--spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-	--spectrum-orange-100-rgb: 72, 24, 1;
-	--spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-	--spectrum-orange-200-rgb: 92, 32, 0;
-	--spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-	--spectrum-orange-300-rgb: 115, 43, 0;
-	--spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-	--spectrum-orange-400-rgb: 138, 55, 0;
-	--spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-	--spectrum-orange-500-rgb: 162, 68, 0;
-	--spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-	--spectrum-orange-600-rgb: 186, 82, 0;
-	--spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-	--spectrum-orange-700-rgb: 210, 98, 0;
-	--spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-	--spectrum-orange-800-rgb: 232, 116, 0;
-	--spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-	--spectrum-orange-900-rgb: 249, 137, 23;
-	--spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-	--spectrum-orange-1000-rgb: 255, 162, 59;
-	--spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-	--spectrum-orange-1100-rgb: 255, 188, 102;
-	--spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-	--spectrum-orange-1200-rgb: 253, 210, 145;
-	--spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-	--spectrum-orange-1300-rgb: 255, 226, 181;
-	--spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-	--spectrum-orange-1400-rgb: 255, 239, 213;
-	--spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-	--spectrum-yellow-100-rgb: 53, 36, 0;
-	--spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-	--spectrum-yellow-200-rgb: 68, 47, 0;
-	--spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-	--spectrum-yellow-300-rgb: 86, 62, 0;
-	--spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-	--spectrum-yellow-400-rgb: 103, 77, 0;
-	--spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-	--spectrum-yellow-500-rgb: 122, 92, 0;
-	--spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-	--spectrum-yellow-600-rgb: 141, 108, 0;
-	--spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-	--spectrum-yellow-700-rgb: 161, 126, 0;
-	--spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-	--spectrum-yellow-800-rgb: 180, 144, 0;
-	--spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-	--spectrum-yellow-900-rgb: 199, 162, 0;
-	--spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-	--spectrum-yellow-1000-rgb: 216, 181, 0;
-	--spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-	--spectrum-yellow-1100-rgb: 233, 199, 0;
-	--spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-	--spectrum-yellow-1200-rgb: 247, 216, 4;
-	--spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-	--spectrum-yellow-1300-rgb: 249, 233, 97;
-	--spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-	--spectrum-yellow-1400-rgb: 252, 243, 170;
-	--spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-	--spectrum-chartreuse-100-rgb: 32, 43, 0;
-	--spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-	--spectrum-chartreuse-200-rgb: 42, 56, 0;
-	--spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-	--spectrum-chartreuse-300-rgb: 54, 72, 0;
-	--spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-	--spectrum-chartreuse-400-rgb: 66, 88, 0;
-	--spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-	--spectrum-chartreuse-500-rgb: 79, 105, 0;
-	--spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-	--spectrum-chartreuse-600-rgb: 93, 123, 0;
-	--spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-	--spectrum-chartreuse-700-rgb: 107, 142, 0;
-	--spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-	--spectrum-chartreuse-800-rgb: 122, 161, 0;
-	--spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-	--spectrum-chartreuse-900-rgb: 138, 180, 3;
-	--spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-	--spectrum-chartreuse-1000-rgb: 154, 198, 11;
-	--spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-	--spectrum-chartreuse-1100-rgb: 170, 216, 22;
-	--spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-	--spectrum-chartreuse-1200-rgb: 187, 232, 41;
-	--spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-	--spectrum-chartreuse-1300-rgb: 205, 246, 72;
-	--spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-	--spectrum-chartreuse-1400-rgb: 225, 253, 132;
-	--spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-	--spectrum-celery-100-rgb: 0, 47, 7;
-	--spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-	--spectrum-celery-200-rgb: 0, 61, 9;
-	--spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-	--spectrum-celery-300-rgb: 0, 77, 12;
-	--spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-	--spectrum-celery-400-rgb: 0, 95, 15;
-	--spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-	--spectrum-celery-500-rgb: 0, 113, 15;
-	--spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-	--spectrum-celery-600-rgb: 0, 132, 15;
-	--spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-	--spectrum-celery-700-rgb: 0, 151, 20;
-	--spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-	--spectrum-celery-800-rgb: 13, 171, 37;
-	--spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-	--spectrum-celery-900-rgb: 45, 191, 58;
-	--spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-	--spectrum-celery-1000-rgb: 80, 208, 82;
-	--spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-	--spectrum-celery-1100-rgb: 115, 224, 107;
-	--spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-	--spectrum-celery-1200-rgb: 147, 237, 131;
-	--spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-	--spectrum-celery-1300-rgb: 180, 247, 162;
-	--spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-	--spectrum-celery-1400-rgb: 213, 252, 202;
-	--spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-	--spectrum-green-100-rgb: 10, 44, 28;
-	--spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-	--spectrum-green-200-rgb: 7, 59, 36;
-	--spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-	--spectrum-green-300-rgb: 0, 76, 46;
-	--spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-	--spectrum-green-400-rgb: 0, 93, 57;
-	--spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-	--spectrum-green-500-rgb: 0, 111, 69;
-	--spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-	--spectrum-green-600-rgb: 0, 130, 82;
-	--spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-	--spectrum-green-700-rgb: 0, 149, 98;
-	--spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-	--spectrum-green-800-rgb: 28, 168, 114;
-	--spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-	--spectrum-green-900-rgb: 52, 187, 132;
-	--spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-	--spectrum-green-1000-rgb: 75, 205, 149;
-	--spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-	--spectrum-green-1100-rgb: 103, 222, 168;
-	--spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-	--spectrum-green-1200-rgb: 137, 236, 188;
-	--spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-	--spectrum-green-1300-rgb: 177, 244, 209;
-	--spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-	--spectrum-green-1400-rgb: 214, 249, 228;
-	--spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-	--spectrum-seafoam-100-rgb: 18, 43, 42;
-	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-	--spectrum-seafoam-200-rgb: 19, 57, 55;
-	--spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-	--spectrum-seafoam-300-rgb: 16, 73, 70;
-	--spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-	--spectrum-seafoam-400-rgb: 3, 91, 88;
-	--spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-	--spectrum-seafoam-500-rgb: 0, 108, 104;
-	--spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-	--spectrum-seafoam-600-rgb: 0, 127, 121;
-	--spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-	--spectrum-seafoam-700-rgb: 0, 146, 140;
-	--spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-	--spectrum-seafoam-800-rgb: 0, 165, 159;
-	--spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-	--spectrum-seafoam-900-rgb: 26, 185, 178;
-	--spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-	--spectrum-seafoam-1000-rgb: 66, 202, 195;
-	--spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-	--spectrum-seafoam-1100-rgb: 102, 218, 211;
-	--spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-	--spectrum-seafoam-1200-rgb: 139, 232, 225;
-	--spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-	--spectrum-seafoam-1300-rgb: 179, 242, 237;
-	--spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-	--spectrum-seafoam-1400-rgb: 215, 248, 244;
-	--spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-	--spectrum-cyan-100-rgb: 0, 41, 68;
-	--spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-	--spectrum-cyan-200-rgb: 0, 54, 88;
-	--spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-	--spectrum-cyan-300-rgb: 0, 69, 108;
-	--spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-	--spectrum-cyan-400-rgb: 0, 86, 128;
-	--spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-	--spectrum-cyan-500-rgb: 0, 103, 147;
-	--spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-	--spectrum-cyan-600-rgb: 0, 121, 167;
-	--spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-	--spectrum-cyan-700-rgb: 0, 140, 186;
-	--spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-	--spectrum-cyan-800-rgb: 4, 160, 205;
-	--spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-	--spectrum-cyan-900-rgb: 23, 180, 221;
-	--spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-	--spectrum-cyan-1000-rgb: 57, 199, 234;
-	--spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-	--spectrum-cyan-1100-rgb: 96, 216, 243;
-	--spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-	--spectrum-cyan-1200-rgb: 134, 230, 250;
-	--spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-	--spectrum-cyan-1300-rgb: 170, 242, 255;
-	--spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-	--spectrum-cyan-1400-rgb: 206, 249, 255;
-	--spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-	--spectrum-indigo-100-rgb: 26, 29, 97;
-	--spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-	--spectrum-indigo-200-rgb: 35, 39, 125;
-	--spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-	--spectrum-indigo-300-rgb: 46, 50, 158;
-	--spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-	--spectrum-indigo-400-rgb: 58, 63, 189;
-	--spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-	--spectrum-indigo-500-rgb: 73, 78, 216;
-	--spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-	--spectrum-indigo-600-rgb: 90, 96, 235;
-	--spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-	--spectrum-indigo-700-rgb: 110, 115, 246;
-	--spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-	--spectrum-indigo-800-rgb: 132, 136, 253;
-	--spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-	--spectrum-indigo-900-rgb: 153, 157, 255;
-	--spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-	--spectrum-indigo-1000-rgb: 174, 177, 255;
-	--spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-	--spectrum-indigo-1100-rgb: 194, 196, 255;
-	--spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-	--spectrum-indigo-1200-rgb: 212, 213, 255;
-	--spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-	--spectrum-indigo-1300-rgb: 227, 228, 255;
-	--spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-	--spectrum-indigo-1400-rgb: 240, 240, 255;
-	--spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-	--spectrum-purple-100-rgb: 50, 16, 104;
-	--spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-	--spectrum-purple-200-rgb: 67, 13, 140;
-	--spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-	--spectrum-purple-300-rgb: 86, 16, 173;
-	--spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-	--spectrum-purple-400-rgb: 106, 29, 200;
-	--spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-	--spectrum-purple-500-rgb: 126, 49, 222;
-	--spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-	--spectrum-purple-600-rgb: 145, 70, 236;
-	--spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-	--spectrum-purple-700-rgb: 162, 94, 246;
-	--spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-	--spectrum-purple-800-rgb: 178, 119, 250;
-	--spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-	--spectrum-purple-900-rgb: 192, 143, 252;
-	--spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-	--spectrum-purple-1000-rgb: 206, 166, 253;
-	--spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-	--spectrum-purple-1100-rgb: 219, 188, 254;
-	--spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-	--spectrum-purple-1200-rgb: 230, 207, 255;
-	--spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-	--spectrum-purple-1300-rgb: 240, 224, 255;
-	--spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-	--spectrum-purple-1400-rgb: 248, 237, 255;
-	--spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-	--spectrum-fuchsia-100-rgb: 70, 14, 68;
-	--spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-	--spectrum-fuchsia-200-rgb: 93, 9, 92;
-	--spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-	--spectrum-fuchsia-300-rgb: 120, 0, 120;
-	--spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-	--spectrum-fuchsia-400-rgb: 146, 0, 147;
-	--spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-	--spectrum-fuchsia-500-rgb: 169, 19, 170;
-	--spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-	--spectrum-fuchsia-600-rgb: 191, 43, 191;
-	--spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-	--spectrum-fuchsia-700-rgb: 211, 65, 213;
-	--spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-	--spectrum-fuchsia-800-rgb: 228, 91, 229;
-	--spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-	--spectrum-fuchsia-900-rgb: 239, 120, 238;
-	--spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-	--spectrum-fuchsia-1000-rgb: 246, 149, 243;
-	--spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-	--spectrum-fuchsia-1100-rgb: 251, 175, 246;
-	--spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-	--spectrum-fuchsia-1200-rgb: 254, 199, 248;
-	--spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-	--spectrum-fuchsia-1300-rgb: 255, 220, 250;
-	--spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-	--spectrum-fuchsia-1400-rgb: 255, 235, 252;
-	--spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-	--spectrum-magenta-100-rgb: 83, 3, 41;
-	--spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-	--spectrum-magenta-200-rgb: 106, 0, 52;
-	--spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-	--spectrum-magenta-300-rgb: 133, 0, 65;
-	--spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-	--spectrum-magenta-400-rgb: 161, 0, 78;
-	--spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-	--spectrum-magenta-500-rgb: 186, 22, 93;
-	--spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-	--spectrum-magenta-600-rgb: 209, 43, 114;
-	--spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-	--spectrum-magenta-700-rgb: 227, 69, 137;
-	--spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-	--spectrum-magenta-800-rgb: 241, 97, 156;
-	--spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-	--spectrum-magenta-900-rgb: 252, 124, 173;
-	--spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-	--spectrum-magenta-1000-rgb: 255, 152, 191;
-	--spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-	--spectrum-magenta-1100-rgb: 255, 179, 207;
-	--spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-	--spectrum-magenta-1200-rgb: 255, 202, 221;
-	--spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-	--spectrum-magenta-1300-rgb: 255, 221, 233;
-	--spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
-	--spectrum-magenta-1400-rgb: 255, 236, 243;
+	--spectrum-magenta-1400-rgb: 255, 220, 232;
 	--spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
+	--spectrum-magenta-1500-rgb: 255, 241, 246;
+	--spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb));
+	--spectrum-magenta-1600-rgb: 255, 255, 255;
+	--spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb));
+	--spectrum-pink-100-rgb: 58, 0, 37;
+	--spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb));
+	--spectrum-pink-200-rgb: 71, 0, 44;
+	--spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb));
+	--spectrum-pink-300-rgb: 90, 0, 57;
+	--spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb));
+	--spectrum-pink-400-rgb: 115, 7, 75;
+	--spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb));
+	--spectrum-pink-500-rgb: 143, 18, 97;
+	--spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb));
+	--spectrum-pink-600-rgb: 171, 29, 119;
+	--spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb));
+	--spectrum-pink-700-rgb: 196, 39, 138;
+	--spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb));
+	--spectrum-pink-800-rgb: 213, 45, 151;
+	--spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb));
+	--spectrum-pink-900-rgb: 236, 67, 175;
+	--spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb));
+	--spectrum-pink-1000-rgb: 251, 90, 196;
+	--spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb));
+	--spectrum-pink-1100-rgb: 255, 122, 210;
+	--spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb));
+	--spectrum-pink-1200-rgb: 255, 159, 223;
+	--spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb));
+	--spectrum-pink-1300-rgb: 255, 191, 234;
+	--spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb));
+	--spectrum-pink-1400-rgb: 255, 219, 243;
+	--spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb));
+	--spectrum-pink-1500-rgb: 255, 241, 250;
+	--spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb));
+	--spectrum-pink-1600-rgb: 255, 255, 255;
+	--spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb));
+	--spectrum-turquoise-100-rgb: 0, 30, 33;
+	--spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb));
+	--spectrum-turquoise-200-rgb: 0, 37, 41;
+	--spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb));
+	--spectrum-turquoise-300-rgb: 0, 49, 54;
+	--spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb));
+	--spectrum-turquoise-400-rgb: 0, 66, 72;
+	--spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb));
+	--spectrum-turquoise-500-rgb: 3, 84, 92;
+	--spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb));
+	--spectrum-turquoise-600-rgb: 5, 103, 112;
+	--spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb));
+	--spectrum-turquoise-700-rgb: 7, 120, 131;
+	--spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb));
+	--spectrum-turquoise-800-rgb: 9, 131, 142;
+	--spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb));
+	--spectrum-turquoise-900-rgb: 11, 151, 164;
+	--spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb));
+	--spectrum-turquoise-1000-rgb: 13, 168, 182;
+	--spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb));
+	--spectrum-turquoise-1100-rgb: 16, 186, 202;
+	--spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb));
+	--spectrum-turquoise-1200-rgb: 64, 208, 220;
+	--spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb));
+	--spectrum-turquoise-1300-rgb: 128, 225, 231;
+	--spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb));
+	--spectrum-turquoise-1400-rgb: 183, 240, 240;
+	--spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb));
+	--spectrum-turquoise-1500-rgb: 228, 249, 249;
+	--spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb));
+	--spectrum-turquoise-1600-rgb: 255, 255, 255;
+	--spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb));
+	--spectrum-brown-100-rgb: 35, 24, 8;
+	--spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb));
+	--spectrum-brown-200-rgb: 44, 31, 11;
+	--spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb));
+	--spectrum-brown-300-rgb: 58, 40, 14;
+	--spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb));
+	--spectrum-brown-400-rgb: 78, 55, 19;
+	--spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb));
+	--spectrum-brown-500-rgb: 98, 71, 30;
+	--spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb));
+	--spectrum-brown-600-rgb: 115, 88, 47;
+	--spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb));
+	--spectrum-brown-700-rgb: 132, 104, 61;
+	--spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb));
+	--spectrum-brown-800-rgb: 143, 114, 69;
+	--spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb));
+	--spectrum-brown-900-rgb: 163, 132, 84;
+	--spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb));
+	--spectrum-brown-1000-rgb: 181, 147, 98;
+	--spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb));
+	--spectrum-brown-1100-rgb: 199, 163, 112;
+	--spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb));
+	--spectrum-brown-1200-rgb: 222, 185, 130;
+	--spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb));
+	--spectrum-brown-1300-rgb: 232, 207, 169;
+	--spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb));
+	--spectrum-brown-1400-rgb: 242, 227, 206;
+	--spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb));
+	--spectrum-brown-1500-rgb: 250, 244, 236;
+	--spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb));
+	--spectrum-brown-1600-rgb: 255, 255, 255;
+	--spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb));
+	--spectrum-silver-100-rgb: 26, 26, 26;
+	--spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb));
+	--spectrum-silver-200-rgb: 33, 33, 33;
+	--spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb));
+	--spectrum-silver-300-rgb: 44, 44, 44;
+	--spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb));
+	--spectrum-silver-400-rgb: 59, 59, 59;
+	--spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb));
+	--spectrum-silver-500-rgb: 76, 76, 76;
+	--spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb));
+	--spectrum-silver-600-rgb: 92, 92, 92;
+	--spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb));
+	--spectrum-silver-700-rgb: 108, 108, 108;
+	--spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb));
+	--spectrum-silver-800-rgb: 118, 118, 118;
+	--spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb));
+	--spectrum-silver-900-rgb: 137, 137, 137;
+	--spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb));
+	--spectrum-silver-1000-rgb: 152, 152, 152;
+	--spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb));
+	--spectrum-silver-1100-rgb: 169, 169, 169;
+	--spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb));
+	--spectrum-silver-1200-rgb: 190, 190, 190;
+	--spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb));
+	--spectrum-silver-1300-rgb: 211, 211, 211;
+	--spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb));
+	--spectrum-silver-1400-rgb: 229, 229, 229;
+	--spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb));
+	--spectrum-silver-1500-rgb: 244, 244, 244;
+	--spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb));
+	--spectrum-silver-1600-rgb: 255, 255, 255;
+	--spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb));
+	--spectrum-cinnamon-100-rgb: 48, 17, 4;
+	--spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb));
+	--spectrum-cinnamon-200-rgb: 59, 21, 5;
+	--spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb));
+	--spectrum-cinnamon-300-rgb: 79, 28, 7;
+	--spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb));
+	--spectrum-cinnamon-400-rgb: 100, 41, 15;
+	--spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb));
+	--spectrum-cinnamon-500-rgb: 122, 57, 28;
+	--spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb));
+	--spectrum-cinnamon-600-rgb: 143, 74, 40;
+	--spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb));
+	--spectrum-cinnamon-700-rgb: 163, 88, 52;
+	--spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb));
+	--spectrum-cinnamon-800-rgb: 176, 98, 59;
+	--spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb));
+	--spectrum-cinnamon-900-rgb: 192, 119, 80;
+	--spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb));
+	--spectrum-cinnamon-1000-rgb: 206, 136, 99;
+	--spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb));
+	--spectrum-cinnamon-1100-rgb: 220, 154, 118;
+	--spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb));
+	--spectrum-cinnamon-1200-rgb: 232, 179, 149;
+	--spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb));
+	--spectrum-cinnamon-1300-rgb: 239, 203, 183;
+	--spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb));
+	--spectrum-cinnamon-1400-rgb: 246, 225, 214;
+	--spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb));
+	--spectrum-cinnamon-1500-rgb: 252, 244, 239;
+	--spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb));
+	--spectrum-cinnamon-1600-rgb: 255, 255, 255;
+	--spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb));
 	--spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800);
 	--spectrum-icon-color-green-primary-default: var(--spectrum-green-800);
 	--spectrum-icon-color-red-primary-default: var(--spectrum-red-700);
 	--spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000);
+	--spectrum-negative-subdued-background-color-default: var(--spectrum-negative-subtle-background-color-default);
+	--spectrum-accent-subtle-background-color-default: var(--spectrum-accent-color-300);
+	--spectrum-informative-subtle-background-color-default: var(--spectrum-informative-color-300);
+	--spectrum-positive-subtle-background-color-default: var(--spectrum-positive-color-300);
+	--spectrum-notice-subtle-background-color-default: var(--spectrum-notice-color-300);
+	--spectrum-negative-subtle-background-color-default: var(--spectrum-negative-color-300);
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--color-scheme: dark;
+	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
+	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
+	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
+	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
+	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
+	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
+	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
+	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200);
+	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
+	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
+	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
+	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
+	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
+	--spectrum-dropindicator-color: var(--spectrum-blue-700);
+	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
+	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
+	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
+	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
+	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
+	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
+	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
+	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
+	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
+	--spectrum-swatch-border-color-rgb: 255, 255, 255;
+	--spectrum-swatch-border-color-opacity: 0.51;
+	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
+	--spectrum-swatch-border-color-light-rgb: 255, 255, 255;
+	--spectrum-swatch-border-color-light-opacity: 0.2;
+	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
+	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
+	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
 }
 .spectrum {
 	--spectrum-focus-indicator-color: var(--spectrum-blue-800);
 	--spectrum-static-white-focus-indicator-color: var(--spectrum-white);
 	--spectrum-static-black-focus-indicator-color: var(--spectrum-black);
 	--spectrum-overlay-color: var(--spectrum-black);
+	--spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100);
 	--spectrum-opacity-disabled: 0.3;
+	--spectrum-background-base-color: var(--spectrum-gray-25);
+	--spectrum-background-layer-1-color: var(--spectrum-gray-50);
+	--spectrum-neutral-background-color-default: var(--spectrum-gray-800);
+	--spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-down: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-selected-default: var(--spectrum-gray-800);
+	--spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
+	--spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-900);
 	--spectrum-neutral-subdued-content-color-selected: var(--spectrum-neutral-subdued-content-color-down);
 	--spectrum-accent-content-color-selected: var(--spectrum-accent-content-color-down);
-	--spectrum-disabled-background-color: var(--spectrum-gray-200);
-	--spectrum-disabled-static-white-background-color: var(--spectrum-transparent-white-200);
-	--spectrum-disabled-static-black-background-color: var(--spectrum-transparent-black-200);
+	--spectrum-disabled-background-color: var(--spectrum-gray-100);
+	--spectrum-disabled-static-white-background-color: var(--spectrum-transparent-white-100);
+	--spectrum-disabled-static-black-background-color: var(--spectrum-transparent-black-100);
 	--spectrum-background-opacity-default: 0;
 	--spectrum-background-opacity-hover: 0.1;
 	--spectrum-background-opacity-down: 0.1;
@@ -954,19 +876,19 @@
 	--spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900);
 	--spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700);
 	--spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800);
-	--spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900);
+	--spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800);
 	--spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800);
 	--spectrum-accent-content-color-default: var(--spectrum-accent-color-900);
 	--spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000);
-	--spectrum-accent-content-color-down: var(--spectrum-accent-color-1100);
+	--spectrum-accent-content-color-down: var(--spectrum-accent-color-1000);
 	--spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000);
 	--spectrum-negative-content-color-default: var(--spectrum-negative-color-900);
 	--spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000);
-	--spectrum-negative-content-color-down: var(--spectrum-negative-color-1100);
+	--spectrum-negative-content-color-down: var(--spectrum-negative-color-1000);
 	--spectrum-negative-content-color-key-focus: var(--spectrum-negative-color-1000);
 	--spectrum-disabled-content-color: var(--spectrum-gray-400);
-	--spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-500);
-	--spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-500);
+	--spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-400);
+	--spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-400);
 	--spectrum-disabled-border-color: var(--spectrum-gray-300);
 	--spectrum-disabled-static-white-border-color: var(--spectrum-transparent-white-300);
 	--spectrum-disabled-static-black-border-color: var(--spectrum-transparent-black-300);
@@ -976,6 +898,18 @@
 	--spectrum-negative-border-color-focus-hover: var(--spectrum-negative-border-color-down);
 	--spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000);
 	--spectrum-negative-border-color-key-focus: var(--spectrum-negative-color-1000);
+	--spectrum-title-color: var(--spectrum-gray-900);
+	--spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
+	--spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
+	--spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
+	--spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300);
+	--spectrum-static-black-text-color: var(--spectrum-black);
+	--spectrum-static-white-text-color: var(--spectrum-white);
+	--spectrum-track-color: var(--spectrum-gray-300);
+	--spectrum-static-black-track-color: var(--spectrum-transparent-black-300);
+	--spectrum-static-white-track-color: var(--spectrum-transparent-white-300);
+	--spectrum-static-black-track-indicator-color: var(--spectrum-transparent-black-900);
+	--spectrum-static-white-track-indicator-color: var(--spectrum-transparent-white-900);
 	--spectrum-swatch-border-color: var(--spectrum-gray-900);
 	--spectrum-swatch-border-opacity: 0.51;
 	--spectrum-swatch-disabled-icon-border-color: var(--spectrum-black);
@@ -1014,62 +948,10 @@
 	--spectrum-table-row-down-opacity: 0.1;
 	--spectrum-table-selected-row-background-opacity-hover: 0.15;
 	--spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15;
-	--spectrum-white-rgb: 255, 255, 255;
-	--spectrum-white: rgba(var(--spectrum-white-rgb));
-	--spectrum-transparent-white-100-rgb: 255, 255, 255;
-	--spectrum-transparent-white-100-opacity: 0;
-	--spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
-	--spectrum-transparent-white-200-rgb: 255, 255, 255;
-	--spectrum-transparent-white-200-opacity: 0.1;
-	--spectrum-transparent-white-200: rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
-	--spectrum-transparent-white-300-rgb: 255, 255, 255;
-	--spectrum-transparent-white-300-opacity: 0.25;
-	--spectrum-transparent-white-300: rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
-	--spectrum-transparent-white-400-rgb: 255, 255, 255;
-	--spectrum-transparent-white-400-opacity: 0.4;
-	--spectrum-transparent-white-400: rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
-	--spectrum-transparent-white-500-rgb: 255, 255, 255;
-	--spectrum-transparent-white-500-opacity: 0.55;
-	--spectrum-transparent-white-500: rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
-	--spectrum-transparent-white-600-rgb: 255, 255, 255;
-	--spectrum-transparent-white-600-opacity: 0.7;
-	--spectrum-transparent-white-600: rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
-	--spectrum-transparent-white-700-rgb: 255, 255, 255;
-	--spectrum-transparent-white-700-opacity: 0.8;
-	--spectrum-transparent-white-700: rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
-	--spectrum-transparent-white-800-rgb: 255, 255, 255;
-	--spectrum-transparent-white-800-opacity: 0.9;
-	--spectrum-transparent-white-800: rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
-	--spectrum-transparent-white-900-rgb: 255, 255, 255;
-	--spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb));
 	--spectrum-black-rgb: 0, 0, 0;
 	--spectrum-black: rgba(var(--spectrum-black-rgb));
-	--spectrum-transparent-black-100-rgb: 0, 0, 0;
-	--spectrum-transparent-black-100-opacity: 0;
-	--spectrum-transparent-black-100: rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
-	--spectrum-transparent-black-200-rgb: 0, 0, 0;
-	--spectrum-transparent-black-200-opacity: 0.1;
-	--spectrum-transparent-black-200: rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
-	--spectrum-transparent-black-300-rgb: 0, 0, 0;
-	--spectrum-transparent-black-300-opacity: 0.25;
-	--spectrum-transparent-black-300: rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
-	--spectrum-transparent-black-400-rgb: 0, 0, 0;
-	--spectrum-transparent-black-400-opacity: 0.4;
-	--spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
-	--spectrum-transparent-black-500-rgb: 0, 0, 0;
-	--spectrum-transparent-black-500-opacity: 0.55;
-	--spectrum-transparent-black-500: rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
-	--spectrum-transparent-black-600-rgb: 0, 0, 0;
-	--spectrum-transparent-black-600-opacity: 0.7;
-	--spectrum-transparent-black-600: rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
-	--spectrum-transparent-black-700-rgb: 0, 0, 0;
-	--spectrum-transparent-black-700-opacity: 0.8;
-	--spectrum-transparent-black-700: rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
-	--spectrum-transparent-black-800-rgb: 0, 0, 0;
-	--spectrum-transparent-black-800-opacity: 0.9;
-	--spectrum-transparent-black-800: rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
-	--spectrum-transparent-black-900-rgb: 0, 0, 0;
-	--spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb));
+	--spectrum-transparent-black-1000-rgb: 0, 0, 0;
+	--spectrum-transparent-black-1000: rgba(var(--spectrum-transparent-black-1000-rgb));
 	--spectrum-icon-color-inverse: var(--spectrum-gray-50);
 	--spectrum-icon-color-primary-default: var(--spectrum-neutral-content-color-default);
 	--spectrum-asterisk-icon-size-75: 8px;
@@ -1099,7 +981,10 @@
 	--spectrum-popover-tip-height: 8px;
 	--spectrum-menu-item-label-to-description: 1px;
 	--spectrum-menu-item-section-divider-height: 8px;
+	--spectrum-slider-track-thickness: 2px;
+	--spectrum-slider-handle-gap: 4px;
 	--spectrum-picker-minimum-width-multiplier: 2;
+	--spectrum-picker-border-width: var(--spectrum-border-width-100);
 	--spectrum-picker-end-edge-to-disclousure-icon-quiet: var(--spectrum-picker-end-edge-to-disclosure-icon-quiet);
 	--spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px;
 	--spectrum-text-field-minimum-width-multiplier: 1.5;
@@ -1119,10 +1004,10 @@
 	--spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text);
 	--spectrum-alert-banner-to-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
 	--spectrum-color-area-border-width: var(--spectrum-border-width-100);
-	--spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100);
+	--spectrum-color-area-border-rounding: var(--spectrum-corner-radius-medium-size-small);
 	--spectrum-color-wheel-color-area-margin: 12px;
 	--spectrum-color-slider-border-width: 1px;
-	--spectrum-color-slider-border-rounding: 4px;
+	--spectrum-color-slider-border-rounding: var(--spectrum-corner-radius-medium-size-small);
 	--spectrum-floating-action-button-drop-shadow-blur: 12px;
 	--spectrum-floating-action-button-drop-shadow-y: 4px;
 	--spectrum-illustrated-message-maximum-width: 380px;
@@ -1183,11 +1068,48 @@
 	--spectrum-in-field-button-width-stacked-medium: 28px;
 	--spectrum-in-field-button-width-stacked-large: 36px;
 	--spectrum-in-field-button-width-stacked-extra-large: 44px;
+	--spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
+	--spectrum-in-field-button-edge-to-fill: 0px;
+	--spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
 	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px;
 	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px;
 	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px;
 	--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px;
 	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
+	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
+	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
+	--spectrum-corner-radius-0: 0px;
+	--spectrum-corner-radius-75: 4px;
+	--spectrum-corner-radius-100: 8px;
+	--spectrum-corner-radius-200: 10px;
+	--spectrum-corner-radius-300: 6px;
+	--spectrum-corner-radius-400: 7px;
+	--spectrum-corner-radius-500: 8px;
+	--spectrum-corner-radius-600: 9px;
+	--spectrum-corner-radius-700: 10px;
+	--spectrum-corner-radius-800: 16px;
+	--spectrum-corner-radius-1000: 0.5;
+	--spectrum-corner-radius-none: var(--spectrum-corner-radius-0);
+	--spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100);
+	--spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500);
+	--spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700);
+	--spectrum-corner-radius-extra-large-default: var(--spectrum-corner-radius-800);
+	--spectrum-corner-radius-full: var(--spectrum-corner-radius-1000);
+	--spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75);
+	--spectrum-corner-radius-small-size-medium: var(--spectrum-corner-radius-100);
+	--spectrum-corner-radius-small-size-large: var(--spectrum-corner-radius-200);
+	--spectrum-corner-radius-small-size-extra-large: var(--spectrum-corner-radius-300);
+	--spectrum-corner-radius-medium-size-extra-small: var(--spectrum-corner-radius-300);
+	--spectrum-corner-radius-medium-size-small: var(--spectrum-corner-radius-400);
+	--spectrum-corner-radius-medium-size-medium: var(--spectrum-corner-radius-500);
+	--spectrum-corner-radius-medium-size-large: var(--spectrum-corner-radius-600);
+	--spectrum-corner-radius-medium-size-extra-large: var(--spectrum-corner-radius-700);
+	--spectrum-drop-shadow-x: 0px;
 	--spectrum-spacing-50: 2px;
 	--spectrum-spacing-75: 4px;
 	--spectrum-spacing-100: 8px;
@@ -1202,6 +1124,7 @@
 	--spectrum-spacing-1000: 96px;
 	--spectrum-focus-indicator-thickness: 2px;
 	--spectrum-focus-indicator-gap: 2px;
+	--spectrum-border-width-100: 1px;
 	--spectrum-border-width-200: 2px;
 	--spectrum-border-width-400: 4px;
 	--spectrum-field-edge-to-text-quiet: 0px;
@@ -1211,6 +1134,22 @@
 	--spectrum-field-edge-to-validation-icon-quiet: 0px;
 	--spectrum-text-underline-thickness: 1px;
 	--spectrum-text-underline-gap: 1px;
+	--spectrum-accent-color-100: var(--spectrum-blue-100);
+	--spectrum-accent-color-200: var(--spectrum-blue-200);
+	--spectrum-accent-color-300: var(--spectrum-blue-300);
+	--spectrum-accent-color-400: var(--spectrum-blue-400);
+	--spectrum-accent-color-500: var(--spectrum-blue-500);
+	--spectrum-accent-color-600: var(--spectrum-blue-600);
+	--spectrum-accent-color-700: var(--spectrum-blue-700);
+	--spectrum-accent-color-800: var(--spectrum-blue-800);
+	--spectrum-accent-color-900: var(--spectrum-blue-900);
+	--spectrum-accent-color-1000: var(--spectrum-blue-1000);
+	--spectrum-accent-color-1100: var(--spectrum-blue-1100);
+	--spectrum-accent-color-1200: var(--spectrum-blue-1200);
+	--spectrum-accent-color-1300: var(--spectrum-blue-1300);
+	--spectrum-accent-color-1400: var(--spectrum-blue-1400);
+	--spectrum-accent-color-1500: var(--spectrum-blue-1500);
+	--spectrum-accent-color-1600: var(--spectrum-blue-1600);
 	--spectrum-informative-color-100: var(--spectrum-blue-100);
 	--spectrum-informative-color-200: var(--spectrum-blue-200);
 	--spectrum-informative-color-300: var(--spectrum-blue-300);
@@ -1225,6 +1164,8 @@
 	--spectrum-informative-color-1200: var(--spectrum-blue-1200);
 	--spectrum-informative-color-1300: var(--spectrum-blue-1300);
 	--spectrum-informative-color-1400: var(--spectrum-blue-1400);
+	--spectrum-informative-color-1500: var(--spectrum-blue-1500);
+	--spectrum-informative-color-1600: var(--spectrum-blue-1600);
 	--spectrum-negative-color-100: var(--spectrum-red-100);
 	--spectrum-negative-color-200: var(--spectrum-red-200);
 	--spectrum-negative-color-300: var(--spectrum-red-300);
@@ -1239,6 +1180,8 @@
 	--spectrum-negative-color-1200: var(--spectrum-red-1200);
 	--spectrum-negative-color-1300: var(--spectrum-red-1300);
 	--spectrum-negative-color-1400: var(--spectrum-red-1400);
+	--spectrum-negative-color-1500: var(--spectrum-red-1500);
+	--spectrum-negative-color-1600: var(--spectrum-red-1600);
 	--spectrum-notice-color-100: var(--spectrum-orange-100);
 	--spectrum-notice-color-200: var(--spectrum-orange-200);
 	--spectrum-notice-color-300: var(--spectrum-orange-300);
@@ -1253,6 +1196,8 @@
 	--spectrum-notice-color-1200: var(--spectrum-orange-1200);
 	--spectrum-notice-color-1300: var(--spectrum-orange-1300);
 	--spectrum-notice-color-1400: var(--spectrum-orange-1400);
+	--spectrum-notice-color-1500: var(--spectrum-orange-1500);
+	--spectrum-notice-color-1600: var(--spectrum-orange-1600);
 	--spectrum-positive-color-100: var(--spectrum-green-100);
 	--spectrum-positive-color-200: var(--spectrum-green-200);
 	--spectrum-positive-color-300: var(--spectrum-green-300);
@@ -1267,6 +1212,11 @@
 	--spectrum-positive-color-1200: var(--spectrum-green-1200);
 	--spectrum-positive-color-1300: var(--spectrum-green-1300);
 	--spectrum-positive-color-1400: var(--spectrum-green-1400);
+	--spectrum-positive-color-1500: var(--spectrum-green-1500);
+	--spectrum-positive-color-1600: var(--spectrum-green-1600);
+	--spectrum-negative-subdued-background-color-hover: var(--spectrum-negative-color-300);
+	--spectrum-negative-subdued-background-color-down: var(--spectrum-negative-color-300);
+	--spectrum-negative-subdued-background-color-key-focus: var(--spectrum-negative-color-300);
 	--spectrum-default-font-family: var(--spectrum-sans-serif-font-family);
 	--spectrum-sans-serif-font-family: adobe clean;
 	--spectrum-serif-font-family: adobe clean serif;
@@ -1293,8 +1243,11 @@
 	--spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style);
 	--spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight);
 	--spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-heading-serif-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
 	--spectrum-heading-cjk-font-style: var(--spectrum-default-font-style);
 	--spectrum-heading-sans-serif-heavy-font-weight: var(--spectrum-black-font-weight);
 	--spectrum-heading-sans-serif-heavy-font-style: var(--spectrum-default-font-style);
@@ -1326,7 +1279,9 @@
 	--spectrum-heading-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
 	--spectrum-heading-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
 	--spectrum-heading-cjk-light-emphasized-font-style: var(--spectrum-default-font-style);
+	--spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-heading-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+	--spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-heading-serif-emphasized-font-style: var(--spectrum-italic-font-style);
 	--spectrum-heading-cjk-emphasized-font-weight: var(--spectrum-black-font-weight);
 	--spectrum-heading-cjk-emphasized-font-style: var(--spectrum-default-font-style);
@@ -1502,13 +1457,53 @@
 	--spectrum-code-line-height: var(--spectrum-line-height-200);
 	--spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200);
 	--spectrum-code-color: var(--spectrum-gray-800);
+	--system: spectrum;
+	--spectrum-animation-duration-0: 0ms;
+	--spectrum-animation-duration-100: 130ms;
+	--spectrum-animation-duration-200: 160ms;
+	--spectrum-animation-duration-300: 190ms;
+	--spectrum-animation-duration-400: 220ms;
+	--spectrum-animation-duration-500: 250ms;
+	--spectrum-animation-duration-600: 300ms;
+	--spectrum-animation-duration-700: 350ms;
+	--spectrum-animation-duration-800: 400ms;
+	--spectrum-animation-duration-900: 450ms;
+	--spectrum-animation-duration-1000: 500ms;
+	--spectrum-animation-duration-2000: 1000ms;
+	--spectrum-animation-duration-4000: 2000ms;
+	--spectrum-animation-duration-6000: 3000ms;
+	--spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
+	--spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
+	--spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
+	--spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
+	--spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
+
+	/* stylelint-disable value-keyword-case -- typography names should use their appropriate cases */
+	--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	--spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
+	--spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
+	--spectrum-serif-font: var(--spectrum-serif-font-family-stack);
+	--spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
+	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	/* stylelint-enable value-keyword-case */
+	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-font-style: var(--spectrum-default-font-style);
+	--spectrum-font-size: var(--spectrum-font-size-100);
+	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
+	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
+	--spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
+	--spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
+	--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
+	--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
+	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
 }
 .spectrum--large {
-	--spectrum-workflow-icon-size-50: 18px;
-	--spectrum-workflow-icon-size-75: 20px;
-	--spectrum-workflow-icon-size-100: 22px;
-	--spectrum-workflow-icon-size-200: 24px;
-	--spectrum-workflow-icon-size-300: 28px;
+	--spectrum-workflow-icon-size-50: 16px;
+	--spectrum-workflow-icon-size-75: 18px;
+	--spectrum-workflow-icon-size-100: 24px;
+	--spectrum-workflow-icon-size-200: 28px;
+	--spectrum-workflow-icon-size-300: 30px;
 	--spectrum-arrow-icon-size-75: 12px;
 	--spectrum-arrow-icon-size-100: 14px;
 	--spectrum-arrow-icon-size-200: 16px;
@@ -1554,6 +1549,34 @@
 	--spectrum-dash-icon-size-400: 18px;
 	--spectrum-dash-icon-size-500: 20px;
 	--spectrum-dash-icon-size-600: 22px;
+	--spectrum-checkbox-control-size-small: 16px;
+	--spectrum-checkbox-control-size-medium: 18px;
+	--spectrum-checkbox-control-size-large: 20px;
+	--spectrum-checkbox-control-size-extra-large: 22px;
+	--spectrum-checkbox-top-to-control-small: 7px;
+	--spectrum-checkbox-top-to-control-medium: 11px;
+	--spectrum-checkbox-top-to-control-large: 15px;
+	--spectrum-checkbox-top-to-control-extra-large: 19px;
+	--spectrum-switch-control-width-small: 32px;
+	--spectrum-switch-control-width-medium: 36px;
+	--spectrum-switch-control-width-large: 41px;
+	--spectrum-switch-control-width-extra-large: 46px;
+	--spectrum-switch-control-height-small: 16px;
+	--spectrum-switch-control-height-medium: 18px;
+	--spectrum-switch-control-height-large: 20px;
+	--spectrum-switch-control-height-extra-large: 22px;
+	--spectrum-switch-top-to-control-small: 7px;
+	--spectrum-switch-top-to-control-medium: 11px;
+	--spectrum-switch-top-to-control-large: 15px;
+	--spectrum-switch-top-to-control-extra-large: 19px;
+	--spectrum-radio-button-control-size-small: 16px;
+	--spectrum-radio-button-control-size-medium: 18px;
+	--spectrum-radio-button-control-size-large: 20px;
+	--spectrum-radio-button-control-size-extra-large: 22px;
+	--spectrum-radio-button-top-to-control-small: 7px;
+	--spectrum-radio-button-top-to-control-medium: 11px;
+	--spectrum-radio-button-top-to-control-large: 15px;
+	--spectrum-radio-button-top-to-control-extra-large: 19px;
 	--spectrum-field-label-text-to-asterisk-small: 5px;
 	--spectrum-field-label-text-to-asterisk-medium: 5px;
 	--spectrum-field-label-text-to-asterisk-large: 6px;
@@ -1629,6 +1652,22 @@
 	--spectrum-menu-item-top-to-selected-icon-medium: 13px;
 	--spectrum-menu-item-top-to-selected-icon-large: 17px;
 	--spectrum-menu-item-top-to-selected-icon-extra-large: 22px;
+	--spectrum-slider-control-height-small: 18px;
+	--spectrum-slider-control-height-medium: 20px;
+	--spectrum-slider-control-height-large: 22px;
+	--spectrum-slider-control-height-extra-large: 26px;
+	--spectrum-slider-handle-size-small: 18px;
+	--spectrum-slider-handle-size-medium: 20px;
+	--spectrum-slider-handle-size-large: 22px;
+	--spectrum-slider-handle-size-extra-large: 26px;
+	--spectrum-slider-handle-border-width-down-small: 7px;
+	--spectrum-slider-handle-border-width-down-medium: 8px;
+	--spectrum-slider-handle-border-width-down-large: 9px;
+	--spectrum-slider-handle-border-width-down-extra-large: 11px;
+	--spectrum-slider-bottom-to-handle-small: 6px;
+	--spectrum-slider-bottom-to-handle-medium: 10px;
+	--spectrum-slider-bottom-to-handle-large: 14px;
+	--spectrum-slider-bottom-to-handle-extra-large: 17px;
 	--spectrum-slider-control-to-field-label-small: 6px;
 	--spectrum-slider-control-to-field-label-medium: 10px;
 	--spectrum-slider-control-to-field-label-large: 14px;
@@ -1857,11 +1896,14 @@
 	--spectrum-side-navigation-bottom-to-text: 10px;
 	--spectrum-tray-top-to-content-area: 5px;
 	--spectrum-accordion-top-to-text-spacious-small: 12px;
-	--spectrum-text-to-visual-50: 8px;
-	--spectrum-text-to-visual-75: 9px;
-	--spectrum-text-to-visual-100: 10px;
-	--spectrum-text-to-visual-200: 11px;
-	--spectrum-text-to-visual-300: 13px;
+	--spectrum-drop-shadow-y: 2px;
+	--spectrum-drop-shadow-blur: 6px;
+	--spectrum-text-to-visual-50: 7px;
+	--spectrum-text-to-visual-75: 7px;
+	--spectrum-text-to-visual-100: 8px;
+	--spectrum-text-to-visual-200: 9px;
+	--spectrum-text-to-visual-300: 10px;
+	--spectrum-text-to-visual-400: 11px;
 	--spectrum-text-to-control-75: 11px;
 	--spectrum-text-to-control-100: 13px;
 	--spectrum-text-to-control-200: 14px;
@@ -1873,38 +1915,38 @@
 	--spectrum-component-height-300: 60px;
 	--spectrum-component-height-400: 70px;
 	--spectrum-component-height-500: 80px;
-	--spectrum-component-pill-edge-to-visual-75: 13px;
+	--spectrum-component-pill-edge-to-visual-75: 15px;
 	--spectrum-component-pill-edge-to-visual-100: 17px;
-	--spectrum-component-pill-edge-to-visual-200: 22px;
-	--spectrum-component-pill-edge-to-visual-300: 27px;
-	--spectrum-component-pill-edge-to-visual-only-75: 5px;
-	--spectrum-component-pill-edge-to-visual-only-100: 9px;
-	--spectrum-component-pill-edge-to-visual-only-200: 13px;
-	--spectrum-component-pill-edge-to-visual-only-300: 16px;
-	--spectrum-component-pill-edge-to-text-75: 15px;
+	--spectrum-component-pill-edge-to-visual-200: 21px;
+	--spectrum-component-pill-edge-to-visual-300: 28px;
+	--spectrum-component-pill-edge-to-visual-only-75: 6px;
+	--spectrum-component-pill-edge-to-visual-only-100: 8px;
+	--spectrum-component-pill-edge-to-visual-only-200: 11px;
+	--spectrum-component-pill-edge-to-visual-only-300: 15px;
+	--spectrum-component-pill-edge-to-text-75: 17px;
 	--spectrum-component-pill-edge-to-text-100: 20px;
-	--spectrum-component-pill-edge-to-text-200: 25px;
+	--spectrum-component-pill-edge-to-text-200: 24px;
 	--spectrum-component-pill-edge-to-text-300: 30px;
-	--spectrum-component-edge-to-visual-50: 7px;
-	--spectrum-component-edge-to-visual-75: 9px;
+	--spectrum-component-edge-to-visual-50: 9px;
+	--spectrum-component-edge-to-visual-75: 11px;
 	--spectrum-component-edge-to-visual-100: 12px;
-	--spectrum-component-edge-to-visual-200: 16px;
-	--spectrum-component-edge-to-visual-300: 19px;
-	--spectrum-component-edge-to-visual-only-50: 4px;
-	--spectrum-component-edge-to-visual-only-75: 5px;
-	--spectrum-component-edge-to-visual-only-100: 9px;
-	--spectrum-component-edge-to-visual-only-200: 13px;
-	--spectrum-component-edge-to-visual-only-300: 16px;
-	--spectrum-component-edge-to-text-50: 10px;
-	--spectrum-component-edge-to-text-75: 11px;
+	--spectrum-component-edge-to-visual-200: 15px;
+	--spectrum-component-edge-to-visual-300: 20px;
+	--spectrum-component-edge-to-visual-only-50: 5px;
+	--spectrum-component-edge-to-visual-only-75: 6px;
+	--spectrum-component-edge-to-visual-only-100: 8px;
+	--spectrum-component-edge-to-visual-only-200: 11px;
+	--spectrum-component-edge-to-visual-only-300: 15px;
+	--spectrum-component-edge-to-text-50: 11px;
+	--spectrum-component-edge-to-text-75: 13px;
 	--spectrum-component-edge-to-text-100: 15px;
-	--spectrum-component-edge-to-text-200: 19px;
+	--spectrum-component-edge-to-text-200: 18px;
 	--spectrum-component-edge-to-text-300: 22px;
-	--spectrum-component-top-to-workflow-icon-50: 4px;
-	--spectrum-component-top-to-workflow-icon-75: 5px;
-	--spectrum-component-top-to-workflow-icon-100: 9px;
-	--spectrum-component-top-to-workflow-icon-200: 13px;
-	--spectrum-component-top-to-workflow-icon-300: 16px;
+	--spectrum-component-top-to-workflow-icon-50: 5px;
+	--spectrum-component-top-to-workflow-icon-75: 6px;
+	--spectrum-component-top-to-workflow-icon-100: 8px;
+	--spectrum-component-top-to-workflow-icon-200: 11px;
+	--spectrum-component-top-to-workflow-icon-300: 15px;
 	--spectrum-component-top-to-text-50: 4px;
 	--spectrum-component-top-to-text-75: 5px;
 	--spectrum-component-top-to-text-100: 8px;
@@ -1993,68 +2035,145 @@
 	--spectrum-font-size-1100: 55px;
 	--spectrum-font-size-1200: 62px;
 	--spectrum-font-size-1300: 70px;
-}
-.spectrum--light,
-.spectrum--lightest {
-	--spectrum-overlay-opacity: 0.4;
-	--spectrum-drop-shadow-color-rgb: 0, 0, 0;
-	--spectrum-drop-shadow-color-opacity: 0.15;
-	--spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
-	--spectrum-background-base-color: var(--spectrum-gray-200);
-	--spectrum-background-layer-1-color: var(--spectrum-gray-100);
-	--spectrum-background-layer-2-color: var(--spectrum-gray-50);
-	--spectrum-neutral-background-color-default: var(--spectrum-gray-800);
-	--spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-down: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900);
-	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-600);
-	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-700);
-	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800);
-	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-700);
-	--spectrum-accent-background-color-default: var(--spectrum-accent-color-900);
-	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000);
-	--spectrum-accent-background-color-down: var(--spectrum-accent-color-1100);
-	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-1000);
-	--spectrum-informative-background-color-default: var(--spectrum-informative-color-900);
-	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-1000);
-	--spectrum-informative-background-color-down: var(--spectrum-informative-color-1100);
-	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-1000);
-	--spectrum-negative-background-color-default: var(--spectrum-negative-color-900);
-	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-1000);
-	--spectrum-negative-background-color-down: var(--spectrum-negative-color-1100);
-	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-1000);
-	--spectrum-positive-background-color-default: var(--spectrum-positive-color-900);
-	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-1000);
-	--spectrum-positive-background-color-down: var(--spectrum-positive-color-1100);
-	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-1000);
-	--spectrum-notice-background-color-default: var(--spectrum-notice-color-600);
-	--spectrum-gray-background-color-default: var(--spectrum-gray-700);
-	--spectrum-red-background-color-default: var(--spectrum-red-900);
-	--spectrum-orange-background-color-default: var(--spectrum-orange-600);
-	--spectrum-yellow-background-color-default: var(--spectrum-yellow-400);
-	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-500);
-	--spectrum-celery-background-color-default: var(--spectrum-celery-600);
-	--spectrum-green-background-color-default: var(--spectrum-green-900);
-	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900);
-	--spectrum-cyan-background-color-default: var(--spectrum-cyan-900);
-	--spectrum-blue-background-color-default: var(--spectrum-blue-900);
-	--spectrum-indigo-background-color-default: var(--spectrum-indigo-900);
-	--spectrum-purple-background-color-default: var(--spectrum-purple-900);
-	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900);
-	--spectrum-magenta-background-color-default: var(--spectrum-magenta-900);
-	--spectrum-neutral-visual-color: var(--spectrum-gray-500);
-	--spectrum-accent-visual-color: var(--spectrum-accent-color-800);
-	--spectrum-informative-visual-color: var(--spectrum-informative-color-800);
-	--spectrum-negative-visual-color: var(--spectrum-negative-color-800);
-	--spectrum-notice-visual-color: var(--spectrum-notice-color-700);
-	--spectrum-positive-visual-color: var(--spectrum-positive-color-700);
-	--spectrum-gray-visual-color: var(--spectrum-gray-500);
-	--spectrum-red-visual-color: var(--spectrum-red-800);
-	--spectrum-orange-visual-color: var(--spectrum-orange-700);
-	--spectrum-yellow-visual-color: var(--spectrum-yellow-600);
-	--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600);
-	--spectrum-celery-visual-color: var(--spectrum-celery-700);
-	--spectrum-green-visual-color: var(--spectrum-green-700);
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--scale: large;
+	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
+	--spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
+	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
+	--spectrum-assetcard-focus-ring-border-radius: 9px;
+	--spectrum-assetcard-selectionindicator-margin: 15px;
+	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
+	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
+	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
+	--spectrum-button-top-to-text-small: 6px;
+	--spectrum-button-bottom-to-text-small: 5px;
+	--spectrum-button-top-to-text-medium: 9px;
+	--spectrum-button-bottom-to-text-medium: 10px;
+	--spectrum-button-top-to-text-large: 12px;
+	--spectrum-button-bottom-to-text-large: 13px;
+	--spectrum-button-top-to-text-extra-large: 16px;
+	--spectrum-button-bottom-to-text-extra-large: 17px;
+	--spectrum-coach-indicator-gap: 8px;
+	--spectrum-coach-indicator-ring-diameter: 20px;
+	--spectrum-coach-indicator-quiet-ring-diameter: 10px;
+	--spectrum-coachmark-buttongroup-display: none;
+	--spectrum-coachmark-buttongroup-mobile-display: flex;
+	--spectrum-coachmark-menu-display: none;
+	--spectrum-coachmark-menu-mobile-display: inline-flex;
+	--spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
+	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
+	--spectrum-colorwheel-colorarea-container-size: 182px;
+	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
+	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
+	--spectrum-datepicker-initial-width: 160px;
+	--spectrum-datepicker-generic-padding: 15px;
+	--spectrum-datepicker-dash-line-height: 30px;
+	--spectrum-datepicker-width-quiet-first: 90px;
+	--spectrum-datepicker-width-quiet-second: 20px;
+	--spectrum-datepicker-datetime-width-first: 45px;
+	--spectrum-datepicker-invalid-icon-to-button: 10px;
+	--spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
+	--spectrum-datepicker-input-datetime-width: 30px;
+	--spectrum-dial-border-radius: 20px;
+	--spectrum-dial-handle-position: 10px;
+	--spectrum-dial-handle-block-margin: 20px;
+	--spectrum-dial-handle-inline-margin: 20px;
+	--spectrum-dial-controls-margin: 10px;
+	--spectrum-dial-label-gap-y: 6px;
+	--spectrum-dial-label-container-top-to-text: 5px;
+	--spectrum-dialog-confirm-entry-animation-distance: 25px;
+	--spectrum-dialog-confirm-hero-height: 160px;
+	--spectrum-dialog-confirm-border-radius: 5px;
+	--spectrum-dialog-confirm-title-text-size: 19px;
+	--spectrum-dialog-confirm-description-text-size: 15px;
+	--spectrum-dialog-confirm-padding-grid: 24px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
+	--spectrum-menu-item-checkmark-height-small: 12px;
+	--spectrum-menu-item-checkmark-height-medium: 14px;
+	--spectrum-menu-item-checkmark-height-large: 16px;
+	--spectrum-menu-item-checkmark-height-extra-large: 16px;
+	--spectrum-menu-item-checkmark-width-small: 12px;
+	--spectrum-menu-item-checkmark-width-medium: 14px;
+	--spectrum-menu-item-checkmark-width-large: 16px;
+	--spectrum-menu-item-checkmark-width-extra-large: 16px;
+	--spectrum-pagination-textfield-width: 60px;
+	--spectrum-pagination-item-inline-spacing: 6px;
+	--spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+	--spectrum-slider-tick-mark-height: 13px;
+	--spectrum-slider-ramp-track-height: 20px;
+	--spectrum-treeview-item-indentation-medium: 20px;
+	--spectrum-treeview-item-indentation-small: 15px;
+	--spectrum-treeview-item-indentation-large: 25px;
+	--spectrum-treeview-item-indentation-extra-large: 30px;
+	--spectrum-treeview-indicator-inset-block-start: 6px;
+	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
+	--spectrum-tooltip-animation-distance: 5px;
+	--spectrum-ui-icon-medium-display: none;
+	--spectrum-ui-icon-large-display: block;
+	--spectrum-well-border-radius: 5px;
+	--spectrum-well-margin-top: 5px;
+	--spectrum-well-min-width: 300px;
+	--spectrum-well-padding: 20px;
+	--spectrum-workflow-icon-size-xxl: 40px;
+	--spectrum-workflow-icon-size-xxs: 15px;
+}
+.spectrum--light {
+	--spectrum-overlay-opacity: 0.4;
+	--spectrum-background-layer-2-color: var(--spectrum-gray-25);
+	--spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-700);
+	--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800);
+	--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800);
+	--spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-800);
+	--spectrum-accent-background-color-default: var(--spectrum-accent-color-900);
+	--spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000);
+	--spectrum-accent-background-color-down: var(--spectrum-accent-color-1000);
+	--spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-1000);
+	--spectrum-informative-background-color-default: var(--spectrum-informative-color-900);
+	--spectrum-informative-background-color-hover: var(--spectrum-informative-color-1000);
+	--spectrum-informative-background-color-down: var(--spectrum-informative-color-1000);
+	--spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-1000);
+	--spectrum-negative-background-color-default: var(--spectrum-negative-color-900);
+	--spectrum-negative-background-color-hover: var(--spectrum-negative-color-1000);
+	--spectrum-negative-background-color-down: var(--spectrum-negative-color-1000);
+	--spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-1000);
+	--spectrum-positive-background-color-default: var(--spectrum-positive-color-900);
+	--spectrum-positive-background-color-hover: var(--spectrum-positive-color-1000);
+	--spectrum-positive-background-color-down: var(--spectrum-positive-color-1000);
+	--spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-1000);
+	--spectrum-notice-background-color-default: var(--spectrum-notice-color-600);
+	--spectrum-gray-background-color-default: var(--spectrum-gray-700);
+	--spectrum-red-background-color-default: var(--spectrum-red-900);
+	--spectrum-orange-background-color-default: var(--spectrum-orange-600);
+	--spectrum-yellow-background-color-default: var(--spectrum-yellow-400);
+	--spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-500);
+	--spectrum-celery-background-color-default: var(--spectrum-celery-600);
+	--spectrum-green-background-color-default: var(--spectrum-green-900);
+	--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900);
+	--spectrum-cyan-background-color-default: var(--spectrum-cyan-900);
+	--spectrum-blue-background-color-default: var(--spectrum-blue-900);
+	--spectrum-indigo-background-color-default: var(--spectrum-indigo-900);
+	--spectrum-purple-background-color-default: var(--spectrum-purple-900);
+	--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900);
+	--spectrum-magenta-background-color-default: var(--spectrum-magenta-900);
+	--spectrum-neutral-visual-color: var(--spectrum-gray-500);
+	--spectrum-accent-visual-color: var(--spectrum-accent-color-800);
+	--spectrum-informative-visual-color: var(--spectrum-informative-color-800);
+	--spectrum-negative-visual-color: var(--spectrum-negative-color-800);
+	--spectrum-notice-visual-color: var(--spectrum-notice-color-800);
+	--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
+	--spectrum-gray-visual-color: var(--spectrum-gray-500);
+	--spectrum-red-visual-color: var(--spectrum-red-800);
+	--spectrum-orange-visual-color: var(--spectrum-orange-700);
+	--spectrum-yellow-visual-color: var(--spectrum-yellow-600);
+	--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600);
+	--spectrum-celery-visual-color: var(--spectrum-celery-700);
+	--spectrum-green-visual-color: var(--spectrum-green-700);
 	--spectrum-seafoam-visual-color: var(--spectrum-seafoam-700);
 	--spectrum-cyan-visual-color: var(--spectrum-cyan-600);
 	--spectrum-blue-visual-color: var(--spectrum-blue-800);
@@ -2062,404 +2181,783 @@
 	--spectrum-purple-visual-color: var(--spectrum-purple-800);
 	--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800);
 	--spectrum-magenta-visual-color: var(--spectrum-magenta-800);
+	--spectrum-background-elevated-color: var(--spectrum-gray-25);
+	--spectrum-background-pasteboard-color: var(--spectrum-gray-100);
+	--spectrum-brown-visual-color: var(--spectrum-brown-800);
+	--spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800);
+	--spectrum-pink-visual-color: var(--spectrum-pink-800);
+	--spectrum-silver-visual-color: var(--spectrum-silver-800);
+	--spectrum-turquoise-visual-color: var(--spectrum-turquoise-800);
+	--spectrum-brown-background-color-default: var(--spectrum-brown-900);
+	--spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900);
+	--spectrum-pink-background-color-default: var(--spectrum-pink-900);
+	--spectrum-silver-background-color-default: var(--spectrum-silver-900);
+	--spectrum-turquoise-background-color-default: var(--spectrum-turquoise-900);
+	--spectrum-drop-shadow-color-100-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-100-opacity: 0.12;
+	--spectrum-drop-shadow-color-100: rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+	--spectrum-drop-shadow-color-200-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-200-opacity: 0.16;
+	--spectrum-drop-shadow-color-200: rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
+	--spectrum-drop-shadow-color-300-rgb: 0, 0, 0;
+	--spectrum-drop-shadow-color-300-opacity: 0.2;
+	--spectrum-drop-shadow-color-300: rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity));
+	--spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-100);
+	--spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100);
+	--spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200);
+	--spectrum-green-subtle-background-color-default: var(--spectrum-green-200);
+	--spectrum-orange-subtle-background-color-default: var(--spectrum-orange-200);
+	--spectrum-red-subtle-background-color-default: var(--spectrum-red-200);
+	--spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200);
+	--spectrum-cinnamon-subtle-background-color-default: var(--spectrum-cinnamon-200);
+	--spectrum-celery-subtle-background-color-default: var(--spectrum-celery-200);
+	--spectrum-chartreuse-subtle-background-color-default: var(--spectrum-chartreuse-200);
+	--spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200);
+	--spectrum-fuchsia-subtle-background-color-default: var(--spectrum-fuchsia-200);
+	--spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-200);
+	--spectrum-magenta-subtle-background-color-default: var(--spectrum-magenta-200);
+	--spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200);
+	--spectrum-purple-subtle-background-color-default: var(--spectrum-purple-200);
+	--spectrum-seafoam-subtle-background-color-default: var(--spectrum-seafoam-200);
+	--spectrum-silver-subtle-background-color-default: var(--spectrum-silver-200);
+	--spectrum-turquoise-subtle-background-color-default: var(--spectrum-turquoise-200);
+	--spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-200);
 	--spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200);
-	--spectrum-gray-50-rgb: 255, 255, 255;
+	--spectrum-white-rgb: 255, 255, 255;
+	--spectrum-white: rgba(var(--spectrum-white-rgb));
+	--spectrum-transparent-white-25-rgb: 255, 255, 255;
+	--spectrum-transparent-white-25-opacity: 0;
+	--spectrum-transparent-white-25: rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity));
+	--spectrum-transparent-white-50-rgb: 255, 255, 255;
+	--spectrum-transparent-white-50-opacity: 0.04;
+	--spectrum-transparent-white-50: rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity));
+	--spectrum-transparent-white-75-rgb: 255, 255, 255;
+	--spectrum-transparent-white-75-opacity: 0.07;
+	--spectrum-transparent-white-75: rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity));
+	--spectrum-transparent-white-100-rgb: 255, 255, 255;
+	--spectrum-transparent-white-100-opacity: 0.11;
+	--spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+	--spectrum-transparent-white-200-rgb: 255, 255, 255;
+	--spectrum-transparent-white-200-opacity: 0.14;
+	--spectrum-transparent-white-200: rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
+	--spectrum-transparent-white-300-rgb: 255, 255, 255;
+	--spectrum-transparent-white-300-opacity: 0.17;
+	--spectrum-transparent-white-300: rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
+	--spectrum-transparent-white-400-rgb: 255, 255, 255;
+	--spectrum-transparent-white-400-opacity: 0.21;
+	--spectrum-transparent-white-400: rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
+	--spectrum-transparent-white-500-rgb: 255, 255, 255;
+	--spectrum-transparent-white-500-opacity: 0.39;
+	--spectrum-transparent-white-500: rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
+	--spectrum-transparent-white-600-rgb: 255, 255, 255;
+	--spectrum-transparent-white-600-opacity: 0.51;
+	--spectrum-transparent-white-600: rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
+	--spectrum-transparent-white-700-rgb: 255, 255, 255;
+	--spectrum-transparent-white-700-opacity: 0.66;
+	--spectrum-transparent-white-700: rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
+	--spectrum-transparent-white-800-rgb: 255, 255, 255;
+	--spectrum-transparent-white-800-opacity: 0.85;
+	--spectrum-transparent-white-800: rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
+	--spectrum-transparent-white-900-rgb: 255, 255, 255;
+	--spectrum-transparent-white-900-opacity: 0.94;
+	--spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity));
+	--spectrum-transparent-white-1000-rgb: 255, 255, 255;
+	--spectrum-transparent-white-1000: rgba(var(--spectrum-transparent-white-1000-rgb));
+	--spectrum-transparent-black-25-rgb: 0, 0, 0;
+	--spectrum-transparent-black-25-opacity: 0;
+	--spectrum-transparent-black-25: rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity));
+	--spectrum-transparent-black-50-rgb: 0, 0, 0;
+	--spectrum-transparent-black-50-opacity: 0.03;
+	--spectrum-transparent-black-50: rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity));
+	--spectrum-transparent-black-75-rgb: 0, 0, 0;
+	--spectrum-transparent-black-75-opacity: 0.05;
+	--spectrum-transparent-black-75: rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity));
+	--spectrum-transparent-black-100-rgb: 0, 0, 0;
+	--spectrum-transparent-black-100-opacity: 0.09;
+	--spectrum-transparent-black-100: rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
+	--spectrum-transparent-black-200-rgb: 0, 0, 0;
+	--spectrum-transparent-black-200-opacity: 0.12;
+	--spectrum-transparent-black-200: rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
+	--spectrum-transparent-black-300-rgb: 0, 0, 0;
+	--spectrum-transparent-black-300-opacity: 0.15;
+	--spectrum-transparent-black-300: rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
+	--spectrum-transparent-black-400-rgb: 0, 0, 0;
+	--spectrum-transparent-black-400-opacity: 0.22;
+	--spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
+	--spectrum-transparent-black-500-rgb: 0, 0, 0;
+	--spectrum-transparent-black-500-opacity: 0.44;
+	--spectrum-transparent-black-500: rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
+	--spectrum-transparent-black-600-rgb: 0, 0, 0;
+	--spectrum-transparent-black-600-opacity: 0.56;
+	--spectrum-transparent-black-600: rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
+	--spectrum-transparent-black-700-rgb: 0, 0, 0;
+	--spectrum-transparent-black-700-opacity: 0.69;
+	--spectrum-transparent-black-700: rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
+	--spectrum-transparent-black-800-rgb: 0, 0, 0;
+	--spectrum-transparent-black-800-opacity: 0.84;
+	--spectrum-transparent-black-800: rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
+	--spectrum-transparent-black-900-rgb: 0, 0, 0;
+	--spectrum-transparent-black-900-opacity: 0.93;
+	--spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity));
+	--spectrum-gray-25-rgb: 255, 255, 255;
+	--spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb));
+	--spectrum-gray-50-rgb: 248, 248, 248;
 	--spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-	--spectrum-gray-75-rgb: 253, 253, 253;
+	--spectrum-gray-75-rgb: 243, 243, 243;
 	--spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-	--spectrum-gray-100-rgb: 248, 248, 248;
+	--spectrum-gray-100-rgb: 233, 233, 233;
 	--spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-	--spectrum-gray-200-rgb: 230, 230, 230;
+	--spectrum-gray-200-rgb: 225, 225, 225;
 	--spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-	--spectrum-gray-300-rgb: 213, 213, 213;
+	--spectrum-gray-300-rgb: 218, 218, 218;
 	--spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-	--spectrum-gray-400-rgb: 177, 177, 177;
+	--spectrum-gray-400-rgb: 198, 198, 198;
 	--spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-	--spectrum-gray-500-rgb: 144, 144, 144;
+	--spectrum-gray-500-rgb: 143, 143, 143;
 	--spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-	--spectrum-gray-600-rgb: 109, 109, 109;
+	--spectrum-gray-600-rgb: 113, 113, 113;
 	--spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-	--spectrum-gray-700-rgb: 70, 70, 70;
+	--spectrum-gray-700-rgb: 80, 80, 80;
 	--spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
-	--spectrum-gray-800-rgb: 34, 34, 34;
+	--spectrum-gray-800-rgb: 41, 41, 41;
 	--spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
-	--spectrum-gray-900-rgb: 0, 0, 0;
+	--spectrum-gray-900-rgb: 19, 19, 19;
 	--spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
-	--spectrum-blue-100-rgb: 224, 242, 255;
+	--spectrum-gray-1000-rgb: 0, 0, 0;
+	--spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb));
+	--spectrum-blue-100-rgb: 245, 249, 255;
 	--spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-	--spectrum-blue-200-rgb: 202, 232, 255;
+	--spectrum-blue-200-rgb: 229, 240, 254;
 	--spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-	--spectrum-blue-300-rgb: 181, 222, 255;
+	--spectrum-blue-300-rgb: 203, 226, 254;
 	--spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-	--spectrum-blue-400-rgb: 150, 206, 253;
+	--spectrum-blue-400-rgb: 172, 207, 253;
 	--spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-	--spectrum-blue-500-rgb: 120, 187, 250;
+	--spectrum-blue-500-rgb: 142, 185, 252;
 	--spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-	--spectrum-blue-600-rgb: 89, 167, 246;
+	--spectrum-blue-600-rgb: 114, 158, 253;
 	--spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-	--spectrum-blue-700-rgb: 56, 146, 243;
+	--spectrum-blue-700-rgb: 93, 137, 255;
 	--spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-	--spectrum-blue-800-rgb: 20, 122, 243;
+	--spectrum-blue-800-rgb: 75, 117, 255;
 	--spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-	--spectrum-blue-900-rgb: 2, 101, 220;
+	--spectrum-blue-900-rgb: 59, 99, 251;
 	--spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-	--spectrum-blue-1000-rgb: 0, 84, 182;
+	--spectrum-blue-1000-rgb: 39, 77, 234;
 	--spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-	--spectrum-blue-1100-rgb: 0, 68, 145;
+	--spectrum-blue-1100-rgb: 29, 62, 207;
 	--spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-	--spectrum-blue-1200-rgb: 0, 53, 113;
+	--spectrum-blue-1200-rgb: 21, 50, 173;
 	--spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-	--spectrum-blue-1300-rgb: 0, 39, 84;
+	--spectrum-blue-1300-rgb: 16, 40, 140;
 	--spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-	--spectrum-blue-1400-rgb: 0, 28, 60;
+	--spectrum-blue-1400-rgb: 12, 31, 105;
 	--spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-	--spectrum-red-100-rgb: 255, 235, 231;
+	--spectrum-blue-1500-rgb: 14, 24, 67;
+	--spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb));
+	--spectrum-blue-1600-rgb: 7, 11, 30;
+	--spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb));
+	--spectrum-red-100-rgb: 255, 246, 245;
 	--spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-	--spectrum-red-200-rgb: 255, 221, 214;
+	--spectrum-red-200-rgb: 255, 235, 232;
 	--spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-	--spectrum-red-300-rgb: 255, 205, 195;
+	--spectrum-red-300-rgb: 255, 214, 209;
 	--spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-	--spectrum-red-400-rgb: 255, 183, 169;
+	--spectrum-red-400-rgb: 255, 188, 180;
 	--spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-	--spectrum-red-500-rgb: 255, 155, 136;
+	--spectrum-red-500-rgb: 255, 157, 145;
 	--spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-	--spectrum-red-600-rgb: 255, 124, 101;
+	--spectrum-red-600-rgb: 255, 118, 101;
 	--spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-	--spectrum-red-700-rgb: 247, 92, 70;
+	--spectrum-red-700-rgb: 255, 81, 61;
 	--spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-	--spectrum-red-800-rgb: 234, 56, 41;
+	--spectrum-red-800-rgb: 240, 56, 35;
 	--spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-	--spectrum-red-900-rgb: 211, 21, 16;
+	--spectrum-red-900-rgb: 215, 50, 32;
 	--spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-	--spectrum-red-1000-rgb: 180, 0, 0;
+	--spectrum-red-1000-rgb: 183, 40, 24;
 	--spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-	--spectrum-red-1100-rgb: 147, 0, 0;
+	--spectrum-red-1100-rgb: 156, 33, 19;
 	--spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-	--spectrum-red-1200-rgb: 116, 0, 0;
+	--spectrum-red-1200-rgb: 129, 27, 14;
 	--spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-	--spectrum-red-1300-rgb: 89, 0, 0;
+	--spectrum-red-1300-rgb: 104, 21, 10;
 	--spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-	--spectrum-red-1400-rgb: 67, 0, 0;
+	--spectrum-red-1400-rgb: 80, 16, 6;
 	--spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-	--spectrum-orange-100-rgb: 255, 236, 204;
+	--spectrum-red-1500-rgb: 59, 11, 4;
+	--spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb));
+	--spectrum-red-1600-rgb: 29, 5, 2;
+	--spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb));
+	--spectrum-orange-100-rgb: 255, 246, 231;
 	--spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-	--spectrum-orange-200-rgb: 255, 223, 173;
+	--spectrum-orange-200-rgb: 255, 236, 207;
 	--spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-	--spectrum-orange-300-rgb: 253, 210, 145;
+	--spectrum-orange-300-rgb: 255, 218, 158;
 	--spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-	--spectrum-orange-400-rgb: 255, 187, 99;
+	--spectrum-orange-400-rgb: 255, 193, 94;
 	--spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-	--spectrum-orange-500-rgb: 255, 160, 55;
+	--spectrum-orange-500-rgb: 255, 162, 19;
 	--spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-	--spectrum-orange-600-rgb: 246, 133, 17;
+	--spectrum-orange-600-rgb: 252, 125, 0;
 	--spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-	--spectrum-orange-700-rgb: 228, 111, 0;
+	--spectrum-orange-700-rgb: 232, 106, 0;
 	--spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-	--spectrum-orange-800-rgb: 203, 93, 0;
+	--spectrum-orange-800-rgb: 212, 91, 0;
 	--spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-	--spectrum-orange-900-rgb: 177, 76, 0;
+	--spectrum-orange-900-rgb: 194, 78, 0;
 	--spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-	--spectrum-orange-1000-rgb: 149, 61, 0;
+	--spectrum-orange-1000-rgb: 167, 62, 0;
 	--spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-	--spectrum-orange-1100-rgb: 122, 47, 0;
+	--spectrum-orange-1100-rgb: 144, 51, 0;
 	--spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-	--spectrum-orange-1200-rgb: 97, 35, 0;
+	--spectrum-orange-1200-rgb: 118, 41, 0;
 	--spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-	--spectrum-orange-1300-rgb: 73, 25, 1;
+	--spectrum-orange-1300-rgb: 95, 32, 0;
 	--spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-	--spectrum-orange-1400-rgb: 53, 18, 1;
+	--spectrum-orange-1400-rgb: 73, 24, 0;
 	--spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-	--spectrum-yellow-100-rgb: 251, 241, 152;
+	--spectrum-orange-1500-rgb: 52, 18, 0;
+	--spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb));
+	--spectrum-orange-1600-rgb: 25, 8, 0;
+	--spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb));
+	--spectrum-yellow-100-rgb: 255, 248, 204;
 	--spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-	--spectrum-yellow-200-rgb: 248, 231, 80;
+	--spectrum-yellow-200-rgb: 255, 241, 151;
 	--spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-	--spectrum-yellow-300-rgb: 248, 217, 4;
+	--spectrum-yellow-300-rgb: 255, 222, 44;
 	--spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-	--spectrum-yellow-400-rgb: 232, 198, 0;
+	--spectrum-yellow-400-rgb: 245, 199, 0;
 	--spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-	--spectrum-yellow-500-rgb: 215, 179, 0;
+	--spectrum-yellow-500-rgb: 230, 175, 0;
 	--spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-	--spectrum-yellow-600-rgb: 196, 159, 0;
+	--spectrum-yellow-600-rgb: 210, 149, 0;
 	--spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-	--spectrum-yellow-700-rgb: 176, 140, 0;
+	--spectrum-yellow-700-rgb: 193, 131, 0;
 	--spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-	--spectrum-yellow-800-rgb: 155, 120, 0;
+	--spectrum-yellow-800-rgb: 175, 116, 0;
 	--spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-	--spectrum-yellow-900-rgb: 133, 102, 0;
+	--spectrum-yellow-900-rgb: 158, 102, 0;
 	--spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-	--spectrum-yellow-1000-rgb: 112, 83, 0;
+	--spectrum-yellow-1000-rgb: 134, 85, 0;
 	--spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-	--spectrum-yellow-1100-rgb: 91, 67, 0;
+	--spectrum-yellow-1100-rgb: 114, 72, 0;
 	--spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-	--spectrum-yellow-1200-rgb: 72, 51, 0;
+	--spectrum-yellow-1200-rgb: 93, 59, 0;
 	--spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-	--spectrum-yellow-1300-rgb: 54, 37, 0;
+	--spectrum-yellow-1300-rgb: 75, 47, 0;
 	--spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-	--spectrum-yellow-1400-rgb: 40, 26, 0;
+	--spectrum-yellow-1400-rgb: 56, 35, 0;
 	--spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-	--spectrum-chartreuse-100-rgb: 219, 252, 110;
+	--spectrum-yellow-1500-rgb: 40, 25, 0;
+	--spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb));
+	--spectrum-yellow-1600-rgb: 18, 11, 0;
+	--spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb));
+	--spectrum-chartreuse-100-rgb: 246, 251, 222;
 	--spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-	--spectrum-chartreuse-200-rgb: 203, 244, 67;
+	--spectrum-chartreuse-200-rgb: 234, 246, 173;
 	--spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-	--spectrum-chartreuse-300-rgb: 188, 233, 42;
+	--spectrum-chartreuse-300-rgb: 208, 236, 70;
 	--spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-	--spectrum-chartreuse-400-rgb: 170, 216, 22;
+	--spectrum-chartreuse-400-rgb: 182, 219, 0;
 	--spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-	--spectrum-chartreuse-500-rgb: 152, 197, 10;
+	--spectrum-chartreuse-500-rgb: 163, 196, 0;
 	--spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-	--spectrum-chartreuse-600-rgb: 135, 177, 3;
+	--spectrum-chartreuse-600-rgb: 143, 172, 0;
 	--spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-	--spectrum-chartreuse-700-rgb: 118, 156, 0;
+	--spectrum-chartreuse-700-rgb: 128, 153, 0;
 	--spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-	--spectrum-chartreuse-800-rgb: 103, 136, 0;
+	--spectrum-chartreuse-800-rgb: 114, 137, 0;
 	--spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-	--spectrum-chartreuse-900-rgb: 87, 116, 0;
+	--spectrum-chartreuse-900-rgb: 102, 122, 0;
 	--spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-	--spectrum-chartreuse-1000-rgb: 72, 96, 0;
+	--spectrum-chartreuse-1000-rgb: 86, 103, 0;
 	--spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-	--spectrum-chartreuse-1100-rgb: 58, 77, 0;
+	--spectrum-chartreuse-1100-rgb: 73, 87, 0;
 	--spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-	--spectrum-chartreuse-1200-rgb: 44, 59, 0;
+	--spectrum-chartreuse-1200-rgb: 60, 71, 0;
 	--spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-	--spectrum-chartreuse-1300-rgb: 33, 44, 0;
+	--spectrum-chartreuse-1300-rgb: 47, 57, 0;
 	--spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-	--spectrum-chartreuse-1400-rgb: 24, 31, 0;
+	--spectrum-chartreuse-1400-rgb: 35, 43, 0;
 	--spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-	--spectrum-celery-100-rgb: 205, 252, 191;
+	--spectrum-chartreuse-1500-rgb: 25, 30, 0;
+	--spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb));
+	--spectrum-chartreuse-1600-rgb: 11, 14, 0;
+	--spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb));
+	--spectrum-celery-100-rgb: 235, 255, 220;
 	--spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-	--spectrum-celery-200-rgb: 174, 246, 157;
+	--spectrum-celery-200-rgb: 197, 255, 156;
 	--spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-	--spectrum-celery-300-rgb: 150, 238, 133;
+	--spectrum-celery-300-rgb: 157, 247, 92;
 	--spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-	--spectrum-celery-400-rgb: 114, 224, 106;
+	--spectrum-celery-400-rgb: 129, 228, 58;
 	--spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-	--spectrum-celery-500-rgb: 78, 207, 80;
+	--spectrum-celery-500-rgb: 110, 206, 42;
 	--spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-	--spectrum-celery-600-rgb: 39, 187, 54;
+	--spectrum-celery-600-rgb: 93, 180, 31;
 	--spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-	--spectrum-celery-700-rgb: 7, 167, 33;
+	--spectrum-celery-700-rgb: 82, 161, 25;
 	--spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-	--spectrum-celery-800-rgb: 0, 145, 18;
+	--spectrum-celery-800-rgb: 72, 144, 20;
 	--spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-	--spectrum-celery-900-rgb: 0, 124, 15;
+	--spectrum-celery-900-rgb: 64, 129, 17;
 	--spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-	--spectrum-celery-1000-rgb: 0, 103, 15;
+	--spectrum-celery-1000-rgb: 52, 109, 12;
 	--spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-	--spectrum-celery-1100-rgb: 0, 83, 13;
+	--spectrum-celery-1100-rgb: 44, 92, 9;
 	--spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-	--spectrum-celery-1200-rgb: 0, 64, 10;
+	--spectrum-celery-1200-rgb: 35, 75, 6;
 	--spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-	--spectrum-celery-1300-rgb: 0, 48, 7;
+	--spectrum-celery-1300-rgb: 27, 60, 3;
 	--spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-	--spectrum-celery-1400-rgb: 0, 34, 5;
+	--spectrum-celery-1400-rgb: 19, 46, 0;
 	--spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-	--spectrum-green-100-rgb: 206, 248, 224;
+	--spectrum-celery-1500-rgb: 12, 33, 0;
+	--spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb));
+	--spectrum-celery-1600-rgb: 4, 15, 0;
+	--spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb));
+	--spectrum-green-100-rgb: 237, 252, 241;
 	--spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-	--spectrum-green-200-rgb: 173, 244, 206;
+	--spectrum-green-200-rgb: 215, 247, 225;
 	--spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-	--spectrum-green-300-rgb: 137, 236, 188;
+	--spectrum-green-300-rgb: 173, 238, 197;
 	--spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-	--spectrum-green-400-rgb: 103, 222, 168;
+	--spectrum-green-400-rgb: 107, 227, 162;
 	--spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-	--spectrum-green-500-rgb: 73, 204, 147;
+	--spectrum-green-500-rgb: 43, 209, 125;
 	--spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-	--spectrum-green-600-rgb: 47, 184, 128;
+	--spectrum-green-600-rgb: 18, 184, 103;
 	--spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-	--spectrum-green-700-rgb: 21, 164, 110;
+	--spectrum-green-700-rgb: 11, 164, 93;
 	--spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-	--spectrum-green-800-rgb: 0, 143, 93;
+	--spectrum-green-800-rgb: 7, 147, 85;
 	--spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-	--spectrum-green-900-rgb: 0, 122, 77;
+	--spectrum-green-900-rgb: 5, 131, 78;
 	--spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-	--spectrum-green-1000-rgb: 0, 101, 62;
+	--spectrum-green-1000-rgb: 3, 110, 69;
 	--spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-	--spectrum-green-1100-rgb: 0, 81, 50;
+	--spectrum-green-1100-rgb: 2, 93, 60;
 	--spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-	--spectrum-green-1200-rgb: 5, 63, 39;
+	--spectrum-green-1200-rgb: 1, 76, 52;
 	--spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-	--spectrum-green-1300-rgb: 10, 46, 29;
+	--spectrum-green-1300-rgb: 0, 61, 44;
 	--spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-	--spectrum-green-1400-rgb: 10, 32, 21;
+	--spectrum-green-1400-rgb: 0, 46, 34;
 	--spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-	--spectrum-seafoam-100-rgb: 206, 247, 243;
+	--spectrum-green-1500-rgb: 0, 33, 25;
+	--spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb));
+	--spectrum-green-1600-rgb: 0, 15, 12;
+	--spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb));
+	--spectrum-seafoam-100-rgb: 235, 251, 246;
 	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-	--spectrum-seafoam-200-rgb: 170, 241, 234;
+	--spectrum-seafoam-200-rgb: 211, 246, 234;
 	--spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-	--spectrum-seafoam-300-rgb: 140, 233, 226;
+	--spectrum-seafoam-300-rgb: 169, 237, 216;
 	--spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-	--spectrum-seafoam-400-rgb: 101, 218, 210;
+	--spectrum-seafoam-400-rgb: 92, 225, 194;
 	--spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-	--spectrum-seafoam-500-rgb: 63, 201, 193;
+	--spectrum-seafoam-500-rgb: 16, 207, 169;
 	--spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-	--spectrum-seafoam-600-rgb: 15, 181, 174;
+	--spectrum-seafoam-600-rgb: 13, 181, 149;
 	--spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-	--spectrum-seafoam-700-rgb: 0, 161, 154;
+	--spectrum-seafoam-700-rgb: 11, 162, 134;
 	--spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-	--spectrum-seafoam-800-rgb: 0, 140, 135;
+	--spectrum-seafoam-800-rgb: 9, 144, 120;
 	--spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-	--spectrum-seafoam-900-rgb: 0, 119, 114;
+	--spectrum-seafoam-900-rgb: 7, 129, 109;
 	--spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-	--spectrum-seafoam-1000-rgb: 0, 99, 95;
+	--spectrum-seafoam-1000-rgb: 5, 108, 92;
 	--spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-	--spectrum-seafoam-1100-rgb: 12, 79, 76;
+	--spectrum-seafoam-1100-rgb: 3, 92, 80;
 	--spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-	--spectrum-seafoam-1200-rgb: 18, 60, 58;
+	--spectrum-seafoam-1200-rgb: 1, 75, 67;
 	--spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-	--spectrum-seafoam-1300-rgb: 18, 44, 43;
+	--spectrum-seafoam-1300-rgb: 0, 60, 54;
 	--spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-	--spectrum-seafoam-1400-rgb: 15, 31, 30;
+	--spectrum-seafoam-1400-rgb: 0, 46, 40;
 	--spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-	--spectrum-cyan-100-rgb: 197, 248, 255;
+	--spectrum-seafoam-1500-rgb: 0, 33, 29;
+	--spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb));
+	--spectrum-seafoam-1600-rgb: 0, 15, 14;
+	--spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb));
+	--spectrum-cyan-100-rgb: 238, 250, 254;
 	--spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-	--spectrum-cyan-200-rgb: 164, 240, 255;
+	--spectrum-cyan-200-rgb: 217, 244, 253;
 	--spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-	--spectrum-cyan-300-rgb: 136, 231, 250;
+	--spectrum-cyan-300-rgb: 183, 231, 252;
 	--spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-	--spectrum-cyan-400-rgb: 96, 216, 243;
+	--spectrum-cyan-400-rgb: 138, 213, 255;
 	--spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-	--spectrum-cyan-500-rgb: 51, 197, 232;
+	--spectrum-cyan-500-rgb: 92, 192, 255;
 	--spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-	--spectrum-cyan-600-rgb: 18, 176, 218;
+	--spectrum-cyan-600-rgb: 48, 167, 254;
 	--spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-	--spectrum-cyan-700-rgb: 1, 156, 200;
+	--spectrum-cyan-700-rgb: 29, 149, 231;
 	--spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-	--spectrum-cyan-800-rgb: 0, 134, 180;
+	--spectrum-cyan-800-rgb: 18, 134, 205;
 	--spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-	--spectrum-cyan-900-rgb: 0, 113, 159;
+	--spectrum-cyan-900-rgb: 11, 120, 179;
 	--spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-	--spectrum-cyan-1000-rgb: 0, 93, 137;
+	--spectrum-cyan-1000-rgb: 4, 102, 145;
 	--spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-	--spectrum-cyan-1100-rgb: 0, 74, 115;
+	--spectrum-cyan-1100-rgb: 0, 87, 121;
 	--spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-	--spectrum-cyan-1200-rgb: 0, 57, 93;
+	--spectrum-cyan-1200-rgb: 0, 71, 98;
 	--spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-	--spectrum-cyan-1300-rgb: 0, 42, 70;
+	--spectrum-cyan-1300-rgb: 0, 57, 78;
 	--spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-	--spectrum-cyan-1400-rgb: 0, 30, 51;
+	--spectrum-cyan-1400-rgb: 0, 43, 59;
 	--spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-	--spectrum-indigo-100-rgb: 237, 238, 255;
+	--spectrum-cyan-1500-rgb: 0, 31, 43;
+	--spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb));
+	--spectrum-cyan-1600-rgb: 0, 14, 20;
+	--spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb));
+	--spectrum-indigo-100-rgb: 247, 248, 255;
 	--spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-	--spectrum-indigo-200-rgb: 224, 226, 255;
+	--spectrum-indigo-200-rgb: 235, 238, 255;
 	--spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-	--spectrum-indigo-300-rgb: 211, 213, 255;
+	--spectrum-indigo-300-rgb: 216, 222, 255;
 	--spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-	--spectrum-indigo-400-rgb: 193, 196, 255;
+	--spectrum-indigo-400-rgb: 192, 201, 255;
 	--spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-	--spectrum-indigo-500-rgb: 172, 175, 255;
+	--spectrum-indigo-500-rgb: 167, 178, 255;
 	--spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-	--spectrum-indigo-600-rgb: 149, 153, 255;
+	--spectrum-indigo-600-rgb: 145, 151, 254;
 	--spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-	--spectrum-indigo-700-rgb: 126, 132, 252;
+	--spectrum-indigo-700-rgb: 132, 128, 254;
 	--spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-	--spectrum-indigo-800-rgb: 104, 109, 244;
+	--spectrum-indigo-800-rgb: 122, 106, 253;
 	--spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-	--spectrum-indigo-900-rgb: 82, 88, 228;
+	--spectrum-indigo-900-rgb: 113, 85, 250;
 	--spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-	--spectrum-indigo-1000-rgb: 64, 70, 202;
+	--spectrum-indigo-1000-rgb: 99, 56, 238;
 	--spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-	--spectrum-indigo-1100-rgb: 50, 54, 168;
+	--spectrum-indigo-1100-rgb: 84, 36, 219;
 	--spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-	--spectrum-indigo-1200-rgb: 38, 41, 134;
+	--spectrum-indigo-1200-rgb: 69, 19, 191;
 	--spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-	--spectrum-indigo-1300-rgb: 27, 30, 100;
+	--spectrum-indigo-1300-rgb: 55, 6, 160;
 	--spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-	--spectrum-indigo-1400-rgb: 20, 22, 72;
+	--spectrum-indigo-1400-rgb: 42, 0, 129;
 	--spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-	--spectrum-purple-100-rgb: 246, 235, 255;
+	--spectrum-indigo-1500-rgb: 31, 0, 98;
+	--spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb));
+	--spectrum-indigo-1600-rgb: 17, 0, 54;
+	--spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb));
+	--spectrum-purple-100-rgb: 251, 247, 254;
 	--spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-	--spectrum-purple-200-rgb: 238, 221, 255;
+	--spectrum-purple-200-rgb: 244, 235, 252;
 	--spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-	--spectrum-purple-300-rgb: 230, 208, 255;
+	--spectrum-purple-300-rgb: 235, 218, 249;
 	--spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-	--spectrum-purple-400-rgb: 219, 187, 254;
+	--spectrum-purple-400-rgb: 221, 193, 246;
 	--spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-	--spectrum-purple-500-rgb: 204, 164, 253;
+	--spectrum-purple-500-rgb: 208, 167, 243;
 	--spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-	--spectrum-purple-600-rgb: 189, 139, 252;
+	--spectrum-purple-600-rgb: 191, 138, 238;
 	--spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-	--spectrum-purple-700-rgb: 174, 114, 249;
+	--spectrum-purple-700-rgb: 178, 114, 235;
 	--spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-	--spectrum-purple-800-rgb: 157, 87, 244;
+	--spectrum-purple-800-rgb: 166, 92, 231;
 	--spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-	--spectrum-purple-900-rgb: 137, 61, 231;
+	--spectrum-purple-900-rgb: 154, 71, 226;
 	--spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-	--spectrum-purple-1000-rgb: 115, 38, 211;
+	--spectrum-purple-1000-rgb: 134, 40, 217;
 	--spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-	--spectrum-purple-1100-rgb: 93, 19, 183;
+	--spectrum-purple-1100-rgb: 115, 13, 204;
 	--spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-	--spectrum-purple-1200-rgb: 71, 12, 148;
+	--spectrum-purple-1200-rgb: 93, 0, 177;
 	--spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-	--spectrum-purple-1300-rgb: 51, 16, 106;
+	--spectrum-purple-1300-rgb: 75, 0, 144;
 	--spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-	--spectrum-purple-1400-rgb: 35, 15, 73;
+	--spectrum-purple-1400-rgb: 59, 0, 111;
 	--spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-	--spectrum-fuchsia-100-rgb: 255, 233, 252;
+	--spectrum-purple-1500-rgb: 44, 0, 84;
+	--spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb));
+	--spectrum-purple-1600-rgb: 23, 0, 45;
+	--spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb));
+	--spectrum-fuchsia-100-rgb: 254, 246, 255;
 	--spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-	--spectrum-fuchsia-200-rgb: 255, 218, 250;
+	--spectrum-fuchsia-200-rgb: 253, 233, 255;
 	--spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-	--spectrum-fuchsia-300-rgb: 254, 199, 248;
+	--spectrum-fuchsia-300-rgb: 250, 211, 255;
 	--spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-	--spectrum-fuchsia-400-rgb: 251, 174, 246;
+	--spectrum-fuchsia-400-rgb: 247, 181, 255;
 	--spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-	--spectrum-fuchsia-500-rgb: 245, 146, 243;
+	--spectrum-fuchsia-500-rgb: 243, 147, 255;
 	--spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-	--spectrum-fuchsia-600-rgb: 237, 116, 237;
+	--spectrum-fuchsia-600-rgb: 236, 105, 255;
 	--spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-	--spectrum-fuchsia-700-rgb: 224, 85, 226;
+	--spectrum-fuchsia-700-rgb: 223, 77, 245;
 	--spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-	--spectrum-fuchsia-800-rgb: 205, 58, 206;
+	--spectrum-fuchsia-800-rgb: 200, 68, 220;
 	--spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-	--spectrum-fuchsia-900-rgb: 182, 34, 183;
+	--spectrum-fuchsia-900-rgb: 181, 57, 200;
 	--spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-	--spectrum-fuchsia-1000-rgb: 157, 3, 158;
+	--spectrum-fuchsia-1000-rgb: 156, 40, 175;
 	--spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-	--spectrum-fuchsia-1100-rgb: 128, 0, 129;
+	--spectrum-fuchsia-1100-rgb: 135, 27, 154;
 	--spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-	--spectrum-fuchsia-1200-rgb: 100, 6, 100;
+	--spectrum-fuchsia-1200-rgb: 113, 15, 131;
 	--spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-	--spectrum-fuchsia-1300-rgb: 71, 14, 70;
+	--spectrum-fuchsia-1300-rgb: 92, 4, 109;
 	--spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-	--spectrum-fuchsia-1400-rgb: 50, 13, 49;
+	--spectrum-fuchsia-1400-rgb: 72, 0, 88;
 	--spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-	--spectrum-magenta-100-rgb: 255, 234, 241;
+	--spectrum-fuchsia-1500-rgb: 54, 0, 66;
+	--spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb));
+	--spectrum-fuchsia-1600-rgb: 29, 0, 35;
+	--spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb));
+	--spectrum-magenta-100-rgb: 255, 245, 248;
 	--spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-	--spectrum-magenta-200-rgb: 255, 220, 232;
+	--spectrum-magenta-200-rgb: 255, 232, 240;
 	--spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-	--spectrum-magenta-300-rgb: 255, 202, 221;
+	--spectrum-magenta-300-rgb: 255, 213, 227;
 	--spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-	--spectrum-magenta-400-rgb: 255, 178, 206;
+	--spectrum-magenta-400-rgb: 255, 185, 208;
 	--spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-	--spectrum-magenta-500-rgb: 255, 149, 189;
+	--spectrum-magenta-500-rgb: 255, 152, 187;
 	--spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-	--spectrum-magenta-600-rgb: 250, 119, 170;
+	--spectrum-magenta-600-rgb: 255, 112, 159;
 	--spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-	--spectrum-magenta-700-rgb: 239, 90, 152;
+	--spectrum-magenta-700-rgb: 255, 72, 133;
 	--spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-	--spectrum-magenta-800-rgb: 222, 61, 130;
+	--spectrum-magenta-800-rgb: 240, 45, 110;
 	--spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-	--spectrum-magenta-900-rgb: 200, 34, 105;
+	--spectrum-magenta-900-rgb: 217, 35, 97;
 	--spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-	--spectrum-magenta-1000-rgb: 173, 9, 85;
+	--spectrum-magenta-1000-rgb: 186, 22, 80;
 	--spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-	--spectrum-magenta-1100-rgb: 142, 0, 69;
+	--spectrum-magenta-1100-rgb: 163, 5, 62;
 	--spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-	--spectrum-magenta-1200-rgb: 112, 0, 55;
+	--spectrum-magenta-1200-rgb: 136, 0, 51;
 	--spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-	--spectrum-magenta-1300-rgb: 84, 3, 42;
+	--spectrum-magenta-1300-rgb: 111, 0, 40;
 	--spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
-	--spectrum-magenta-1400-rgb: 60, 6, 29;
+	--spectrum-magenta-1400-rgb: 86, 0, 30;
 	--spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
+	--spectrum-magenta-1500-rgb: 64, 0, 22;
+	--spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb));
+	--spectrum-magenta-1600-rgb: 35, 0, 12;
+	--spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb));
+	--spectrum-pink-100-rgb: 255, 246, 252;
+	--spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb));
+	--spectrum-pink-200-rgb: 255, 232, 247;
+	--spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb));
+	--spectrum-pink-300-rgb: 255, 211, 240;
+	--spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb));
+	--spectrum-pink-400-rgb: 255, 181, 230;
+	--spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb));
+	--spectrum-pink-500-rgb: 255, 148, 219;
+	--spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb));
+	--spectrum-pink-600-rgb: 255, 103, 204;
+	--spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb));
+	--spectrum-pink-700-rgb: 242, 76, 184;
+	--spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb));
+	--spectrum-pink-800-rgb: 228, 52, 163;
+	--spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb));
+	--spectrum-pink-900-rgb: 206, 42, 146;
+	--spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb));
+	--spectrum-pink-1000-rgb: 176, 31, 123;
+	--spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb));
+	--spectrum-pink-1100-rgb: 152, 22, 104;
+	--spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb));
+	--spectrum-pink-1200-rgb: 128, 12, 85;
+	--spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb));
+	--spectrum-pink-1300-rgb: 105, 3, 68;
+	--spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb));
+	--spectrum-pink-1400-rgb: 83, 0, 53;
+	--spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb));
+	--spectrum-pink-1500-rgb: 62, 0, 39;
+	--spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb));
+	--spectrum-pink-1600-rgb: 33, 0, 21;
+	--spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb));
+	--spectrum-turquoise-100-rgb: 238, 251, 251;
+	--spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb));
+	--spectrum-turquoise-200-rgb: 209, 245, 245;
+	--spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb));
+	--spectrum-turquoise-300-rgb: 169, 236, 237;
+	--spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb));
+	--spectrum-turquoise-400-rgb: 111, 221, 228;
+	--spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb));
+	--spectrum-turquoise-500-rgb: 39, 202, 216;
+	--spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb));
+	--spectrum-turquoise-600-rgb: 15, 177, 192;
+	--spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb));
+	--spectrum-turquoise-700-rgb: 12, 158, 171;
+	--spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb));
+	--spectrum-turquoise-800-rgb: 10, 141, 153;
+	--spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb));
+	--spectrum-turquoise-900-rgb: 8, 126, 137;
+	--spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb));
+	--spectrum-turquoise-1000-rgb: 5, 107, 116;
+	--spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb));
+	--spectrum-turquoise-1100-rgb: 3, 90, 98;
+	--spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb));
+	--spectrum-turquoise-1200-rgb: 1, 74, 81;
+	--spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb));
+	--spectrum-turquoise-1300-rgb: 0, 59, 65;
+	--spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb));
+	--spectrum-turquoise-1400-rgb: 0, 44, 49;
+	--spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb));
+	--spectrum-turquoise-1500-rgb: 0, 32, 35;
+	--spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb));
+	--spectrum-turquoise-1600-rgb: 0, 15, 17;
+	--spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb));
+	--spectrum-brown-100-rgb: 252, 247, 242;
+	--spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb));
+	--spectrum-brown-200-rgb: 247, 238, 225;
+	--spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb));
+	--spectrum-brown-300-rgb: 239, 221, 195;
+	--spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb));
+	--spectrum-brown-400-rgb: 229, 200, 157;
+	--spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb));
+	--spectrum-brown-500-rgb: 214, 177, 123;
+	--spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb));
+	--spectrum-brown-600-rgb: 190, 155, 104;
+	--spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb));
+	--spectrum-brown-700-rgb: 171, 138, 90;
+	--spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb));
+	--spectrum-brown-800-rgb: 154, 123, 77;
+	--spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb));
+	--spectrum-brown-900-rgb: 139, 109, 66;
+	--spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb));
+	--spectrum-brown-1000-rgb: 119, 91, 50;
+	--spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb));
+	--spectrum-brown-1100-rgb: 103, 76, 35;
+	--spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb));
+	--spectrum-brown-1200-rgb: 88, 61, 21;
+	--spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb));
+	--spectrum-brown-1300-rgb: 70, 49, 17;
+	--spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb));
+	--spectrum-brown-1400-rgb: 52, 37, 13;
+	--spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb));
+	--spectrum-brown-1500-rgb: 38, 26, 9;
+	--spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb));
+	--spectrum-brown-1600-rgb: 16, 12, 4;
+	--spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb));
+	--spectrum-silver-100-rgb: 247, 247, 247;
+	--spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb));
+	--spectrum-silver-200-rgb: 239, 239, 239;
+	--spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb));
+	--spectrum-silver-300-rgb: 223, 223, 223;
+	--spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb));
+	--spectrum-silver-400-rgb: 204, 204, 204;
+	--spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb));
+	--spectrum-silver-500-rgb: 183, 183, 183;
+	--spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb));
+	--spectrum-silver-600-rgb: 160, 160, 160;
+	--spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb));
+	--spectrum-silver-700-rgb: 143, 143, 143;
+	--spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb));
+	--spectrum-silver-800-rgb: 128, 128, 128;
+	--spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb));
+	--spectrum-silver-900-rgb: 114, 114, 114;
+	--spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb));
+	--spectrum-silver-1000-rgb: 96, 96, 96;
+	--spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb));
+	--spectrum-silver-1100-rgb: 81, 81, 81;
+	--spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb));
+	--spectrum-silver-1200-rgb: 66, 66, 66;
+	--spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb));
+	--spectrum-silver-1300-rgb: 52, 52, 52;
+	--spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb));
+	--spectrum-silver-1400-rgb: 39, 39, 39;
+	--spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb));
+	--spectrum-silver-1500-rgb: 28, 28, 28;
+	--spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb));
+	--spectrum-silver-1600-rgb: 12, 12, 12;
+	--spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb));
+	--spectrum-cinnamon-100-rgb: 253, 247, 243;
+	--spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb));
+	--spectrum-cinnamon-200-rgb: 249, 236, 229;
+	--spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb));
+	--spectrum-cinnamon-300-rgb: 244, 218, 203;
+	--spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb));
+	--spectrum-cinnamon-400-rgb: 237, 196, 172;
+	--spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb));
+	--spectrum-cinnamon-500-rgb: 229, 170, 136;
+	--spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb));
+	--spectrum-cinnamon-600-rgb: 212, 145, 108;
+	--spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb));
+	--spectrum-cinnamon-700-rgb: 198, 126, 88;
+	--spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb));
+	--spectrum-cinnamon-800-rgb: 184, 109, 70;
+	--spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb));
+	--spectrum-cinnamon-900-rgb: 170, 94, 56;
+	--spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb));
+	--spectrum-cinnamon-1000-rgb: 147, 77, 43;
+	--spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb));
+	--spectrum-cinnamon-1100-rgb: 128, 62, 32;
+	--spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb));
+	--spectrum-cinnamon-1200-rgb: 110, 48, 21;
+	--spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb));
+	--spectrum-cinnamon-1300-rgb: 92, 35, 11;
+	--spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb));
+	--spectrum-cinnamon-1400-rgb: 72, 25, 6;
+	--spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb));
+	--spectrum-cinnamon-1500-rgb: 52, 18, 4;
+	--spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb));
+	--spectrum-cinnamon-1600-rgb: 24, 8, 2;
+	--spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb));
 	--spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900);
 	--spectrum-icon-color-green-primary-default: var(--spectrum-green-900);
 	--spectrum-icon-color-red-primary-default: var(--spectrum-red-900);
 	--spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400);
+	--spectrum-negative-subdued-background-color-default: var(--spectrum-negative-subtle-background-color-default);
+	--spectrum-accent-subtle-background-color-default: var(--spectrum-accent-color-200);
+	--spectrum-informative-subtle-background-color-default: var(--spectrum-informative-color-200);
+	--spectrum-positive-subtle-background-color-default: var(--spectrum-positive-color-200);
+	--spectrum-notice-subtle-background-color-default: var(--spectrum-notice-color-200);
+	--spectrum-negative-subtle-background-color-default: var(--spectrum-negative-color-200);
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--color-scheme: light;
+	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
+	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
+	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
+	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
+	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
+	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-badge-label-icon-color-primary: var(--spectrum-white);
+	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
+	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200);
+	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
+	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
+	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
+	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
+	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
+	--spectrum-dropindicator-color: var(--spectrum-blue-800);
+	--spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
+	--spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
+	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
+	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
+	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
+	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
+	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
+	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
+	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
+	--spectrum-swatch-border-color-rgb: 0, 0, 0;
+	--spectrum-swatch-border-color-opacity: 0.51;
+	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
+	--spectrum-swatch-border-color-light-rgb: 0, 0, 0;
+	--spectrum-swatch-border-color-light-opacity: 0.2;
+	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
+	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
+	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
 }
 .spectrum--medium {
 	--spectrum-workflow-icon-size-50: 14px;
 	--spectrum-workflow-icon-size-75: 16px;
-	--spectrum-workflow-icon-size-100: 18px;
-	--spectrum-workflow-icon-size-200: 20px;
-	--spectrum-workflow-icon-size-300: 22px;
+	--spectrum-workflow-icon-size-100: 20px;
+	--spectrum-workflow-icon-size-200: 22px;
+	--spectrum-workflow-icon-size-300: 26px;
 	--spectrum-arrow-icon-size-75: 10px;
 	--spectrum-arrow-icon-size-100: 10px;
 	--spectrum-arrow-icon-size-200: 12px;
@@ -2505,6 +3003,34 @@
 	--spectrum-dash-icon-size-400: 14px;
 	--spectrum-dash-icon-size-500: 16px;
 	--spectrum-dash-icon-size-600: 18px;
+	--spectrum-checkbox-control-size-small: 12px;
+	--spectrum-checkbox-control-size-medium: 14px;
+	--spectrum-checkbox-control-size-large: 16px;
+	--spectrum-checkbox-control-size-extra-large: 18px;
+	--spectrum-checkbox-top-to-control-small: 6px;
+	--spectrum-checkbox-top-to-control-medium: 9px;
+	--spectrum-checkbox-top-to-control-large: 12px;
+	--spectrum-checkbox-top-to-control-extra-large: 15px;
+	--spectrum-switch-control-width-small: 23px;
+	--spectrum-switch-control-width-medium: 26px;
+	--spectrum-switch-control-width-large: 29px;
+	--spectrum-switch-control-width-extra-large: 33px;
+	--spectrum-switch-control-height-small: 12px;
+	--spectrum-switch-control-height-medium: 14px;
+	--spectrum-switch-control-height-large: 16px;
+	--spectrum-switch-control-height-extra-large: 18px;
+	--spectrum-switch-top-to-control-small: 6px;
+	--spectrum-switch-top-to-control-medium: 9px;
+	--spectrum-switch-top-to-control-large: 12px;
+	--spectrum-switch-top-to-control-extra-large: 15px;
+	--spectrum-radio-button-control-size-small: 12px;
+	--spectrum-radio-button-control-size-medium: 14px;
+	--spectrum-radio-button-control-size-large: 16px;
+	--spectrum-radio-button-control-size-extra-large: 18px;
+	--spectrum-radio-button-top-to-control-small: 6px;
+	--spectrum-radio-button-top-to-control-medium: 9px;
+	--spectrum-radio-button-top-to-control-large: 12px;
+	--spectrum-radio-button-top-to-control-extra-large: 15px;
 	--spectrum-field-label-text-to-asterisk-small: 4px;
 	--spectrum-field-label-text-to-asterisk-medium: 4px;
 	--spectrum-field-label-text-to-asterisk-large: 5px;
@@ -2580,6 +3106,22 @@
 	--spectrum-menu-item-top-to-selected-icon-medium: 11px;
 	--spectrum-menu-item-top-to-selected-icon-large: 14px;
 	--spectrum-menu-item-top-to-selected-icon-extra-large: 17px;
+	--spectrum-slider-control-height-small: 14px;
+	--spectrum-slider-control-height-medium: 16px;
+	--spectrum-slider-control-height-large: 18px;
+	--spectrum-slider-control-height-extra-large: 20px;
+	--spectrum-slider-handle-size-small: 14px;
+	--spectrum-slider-handle-size-medium: 16px;
+	--spectrum-slider-handle-size-large: 18px;
+	--spectrum-slider-handle-size-extra-large: 20px;
+	--spectrum-slider-handle-border-width-down-small: 5px;
+	--spectrum-slider-handle-border-width-down-medium: 6px;
+	--spectrum-slider-handle-border-width-down-large: 7px;
+	--spectrum-slider-handle-border-width-down-extra-large: 8px;
+	--spectrum-slider-bottom-to-handle-small: 5px;
+	--spectrum-slider-bottom-to-handle-medium: 8px;
+	--spectrum-slider-bottom-to-handle-large: 11px;
+	--spectrum-slider-bottom-to-handle-extra-large: 14px;
 	--spectrum-slider-control-to-field-label-small: 5px;
 	--spectrum-slider-control-to-field-label-medium: 8px;
 	--spectrum-slider-control-to-field-label-large: 11px;
@@ -2808,11 +3350,14 @@
 	--spectrum-side-navigation-bottom-to-text: 8px;
 	--spectrum-tray-top-to-content-area: 4px;
 	--spectrum-accordion-top-to-text-spacious-small: 9px;
-	--spectrum-text-to-visual-50: 6px;
-	--spectrum-text-to-visual-75: 7px;
-	--spectrum-text-to-visual-100: 8px;
-	--spectrum-text-to-visual-200: 9px;
-	--spectrum-text-to-visual-300: 10px;
+	--spectrum-drop-shadow-y: 1px;
+	--spectrum-drop-shadow-blur: 4px;
+	--spectrum-text-to-visual-50: 5px;
+	--spectrum-text-to-visual-75: 5px;
+	--spectrum-text-to-visual-100: 6px;
+	--spectrum-text-to-visual-200: 7px;
+	--spectrum-text-to-visual-300: 8px;
+	--spectrum-text-to-visual-400: 9px;
 	--spectrum-text-to-control-75: 9px;
 	--spectrum-text-to-control-100: 10px;
 	--spectrum-text-to-control-200: 11px;
@@ -2824,38 +3369,38 @@
 	--spectrum-component-height-300: 48px;
 	--spectrum-component-height-400: 56px;
 	--spectrum-component-height-500: 64px;
-	--spectrum-component-pill-edge-to-visual-75: 10px;
+	--spectrum-component-pill-edge-to-visual-75: 11px;
 	--spectrum-component-pill-edge-to-visual-100: 14px;
 	--spectrum-component-pill-edge-to-visual-200: 18px;
-	--spectrum-component-pill-edge-to-visual-300: 21px;
+	--spectrum-component-pill-edge-to-visual-300: 20px;
 	--spectrum-component-pill-edge-to-visual-only-75: 4px;
-	--spectrum-component-pill-edge-to-visual-only-100: 7px;
-	--spectrum-component-pill-edge-to-visual-only-200: 10px;
-	--spectrum-component-pill-edge-to-visual-only-300: 13px;
-	--spectrum-component-pill-edge-to-text-75: 12px;
+	--spectrum-component-pill-edge-to-visual-only-100: 6px;
+	--spectrum-component-pill-edge-to-visual-only-200: 9px;
+	--spectrum-component-pill-edge-to-visual-only-300: 11px;
+	--spectrum-component-pill-edge-to-text-75: 13px;
 	--spectrum-component-pill-edge-to-text-100: 16px;
 	--spectrum-component-pill-edge-to-text-200: 20px;
-	--spectrum-component-pill-edge-to-text-300: 24px;
-	--spectrum-component-edge-to-visual-50: 6px;
-	--spectrum-component-edge-to-visual-75: 7px;
+	--spectrum-component-pill-edge-to-text-300: 23px;
+	--spectrum-component-edge-to-visual-50: 7px;
+	--spectrum-component-edge-to-visual-75: 8px;
 	--spectrum-component-edge-to-visual-100: 10px;
 	--spectrum-component-edge-to-visual-200: 13px;
-	--spectrum-component-edge-to-visual-300: 15px;
+	--spectrum-component-edge-to-visual-300: 14px;
 	--spectrum-component-edge-to-visual-only-50: 3px;
 	--spectrum-component-edge-to-visual-only-75: 4px;
-	--spectrum-component-edge-to-visual-only-100: 7px;
-	--spectrum-component-edge-to-visual-only-200: 10px;
-	--spectrum-component-edge-to-visual-only-300: 13px;
+	--spectrum-component-edge-to-visual-only-100: 6px;
+	--spectrum-component-edge-to-visual-only-200: 9px;
+	--spectrum-component-edge-to-visual-only-300: 11px;
 	--spectrum-component-edge-to-text-50: 8px;
-	--spectrum-component-edge-to-text-75: 9px;
+	--spectrum-component-edge-to-text-75: 10px;
 	--spectrum-component-edge-to-text-100: 12px;
 	--spectrum-component-edge-to-text-200: 15px;
-	--spectrum-component-edge-to-text-300: 18px;
+	--spectrum-component-edge-to-text-300: 17px;
 	--spectrum-component-top-to-workflow-icon-50: 3px;
 	--spectrum-component-top-to-workflow-icon-75: 4px;
-	--spectrum-component-top-to-workflow-icon-100: 7px;
-	--spectrum-component-top-to-workflow-icon-200: 10px;
-	--spectrum-component-top-to-workflow-icon-300: 13px;
+	--spectrum-component-top-to-workflow-icon-100: 6px;
+	--spectrum-component-top-to-workflow-icon-200: 9px;
+	--spectrum-component-top-to-workflow-icon-300: 11px;
 	--spectrum-component-top-to-text-50: 3px;
 	--spectrum-component-top-to-text-75: 4px;
 	--spectrum-component-top-to-text-100: 6px;
@@ -2944,454 +3489,27 @@
 	--spectrum-font-size-1100: 45px;
 	--spectrum-font-size-1200: 50px;
 	--spectrum-font-size-1300: 60px;
-}
-.spectrum--dark {
-	--spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
-	--spectrum-menu-item-background-color-default-opacity: 0;
-	--spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
-	--spectrum-dropindicator-color: var(--spectrum-blue-700);
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-swatch-border-color-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-opacity: 0.51;
-	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
-	--spectrum-swatch-border-color-light-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-light-opacity: 0.2;
-	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-.spectrum--darkest {
-	--spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
-	--spectrum-menu-item-background-color-default-opacity: 0;
-	--spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
-	--spectrum-dropindicator-color: var(--spectrum-blue-700);
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-down: rgba(var(--spectrum-white-rgb), 0.15);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-	--spectrum-swatch-border-color-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-opacity: 0.51;
-	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
-	--spectrum-swatch-border-color-light-rgb: 255, 255, 255;
-	--spectrum-swatch-border-color-light-opacity: 0.2;
-	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-.spectrum {
-	--spectrum-neutral-background-color-selected-default: var(--spectrum-gray-700);
-	--spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800);
-	--spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-800);
-	--spectrum-slider-track-thickness: 2px;
-	--spectrum-slider-handle-gap: 4px;
-	--spectrum-picker-border-width: var(--spectrum-border-width-100);
-	--spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
-	--spectrum-in-field-button-edge-to-fill: 0px;
-	--spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
-	--spectrum-corner-radius-75: 2px;
-	--spectrum-drop-shadow-x: 0px;
-	--spectrum-border-width-100: 1px;
-	--spectrum-accent-color-100: var(--spectrum-blue-100);
-	--spectrum-accent-color-200: var(--spectrum-blue-200);
-	--spectrum-accent-color-300: var(--spectrum-blue-300);
-	--spectrum-accent-color-400: var(--spectrum-blue-400);
-	--spectrum-accent-color-500: var(--spectrum-blue-500);
-	--spectrum-accent-color-600: var(--spectrum-blue-600);
-	--spectrum-accent-color-700: var(--spectrum-blue-700);
-	--spectrum-accent-color-800: var(--spectrum-blue-800);
-	--spectrum-accent-color-900: var(--spectrum-blue-900);
-	--spectrum-accent-color-1000: var(--spectrum-blue-1000);
-	--spectrum-accent-color-1100: var(--spectrum-blue-1100);
-	--spectrum-accent-color-1200: var(--spectrum-blue-1200);
-	--spectrum-accent-color-1300: var(--spectrum-blue-1300);
-	--spectrum-accent-color-1400: var(--spectrum-blue-1400);
-	--spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
-	--spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
-	--spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
-	--system: spectrum;
-	--spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
-	--spectrum-animation-duration-0: 0ms;
-	--spectrum-animation-duration-100: 130ms;
-	--spectrum-animation-duration-200: 160ms;
-	--spectrum-animation-duration-300: 190ms;
-	--spectrum-animation-duration-400: 220ms;
-	--spectrum-animation-duration-500: 250ms;
-	--spectrum-animation-duration-600: 300ms;
-	--spectrum-animation-duration-700: 350ms;
-	--spectrum-animation-duration-800: 400ms;
-	--spectrum-animation-duration-900: 450ms;
-	--spectrum-animation-duration-1000: 500ms;
-	--spectrum-animation-duration-2000: 1000ms;
-	--spectrum-animation-duration-4000: 2000ms;
-	--spectrum-animation-duration-6000: 3000ms;
-	--spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
-	--spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
-	--spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
-	--spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
-
-	/* stylelint-disable value-keyword-case -- typography names should use their appropriate cases */
-	--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	--spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
-	--spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
-	--spectrum-serif-font: var(--spectrum-serif-font-family-stack);
-	--spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
-	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-	/* stylelint-enable value-keyword-case */
-	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-font-style: var(--spectrum-default-font-style);
-	--spectrum-font-size: var(--spectrum-font-size-100);
-	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
-	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
-	--spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
-	--spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
-	--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
-	--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
-	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
-}
-.spectrum--large {
-	--spectrum-checkbox-control-size-small: 16px;
-	--spectrum-checkbox-control-size-medium: 18px;
-	--spectrum-checkbox-control-size-large: 20px;
-	--spectrum-checkbox-control-size-extra-large: 22px;
-	--spectrum-checkbox-top-to-control-small: 7px;
-	--spectrum-checkbox-top-to-control-medium: 11px;
-	--spectrum-checkbox-top-to-control-large: 15px;
-	--spectrum-checkbox-top-to-control-extra-large: 19px;
-	--spectrum-switch-control-width-small: 32px;
-	--spectrum-switch-control-width-medium: 36px;
-	--spectrum-switch-control-width-large: 41px;
-	--spectrum-switch-control-width-extra-large: 46px;
-	--spectrum-switch-control-height-small: 16px;
-	--spectrum-switch-control-height-medium: 18px;
-	--spectrum-switch-control-height-large: 20px;
-	--spectrum-switch-control-height-extra-large: 22px;
-	--spectrum-switch-top-to-control-small: 7px;
-	--spectrum-switch-top-to-control-medium: 11px;
-	--spectrum-switch-top-to-control-large: 15px;
-	--spectrum-switch-top-to-control-extra-large: 19px;
-	--spectrum-radio-button-control-size-small: 16px;
-	--spectrum-radio-button-control-size-medium: 18px;
-	--spectrum-radio-button-control-size-large: 20px;
-	--spectrum-radio-button-control-size-extra-large: 22px;
-	--spectrum-radio-button-top-to-control-small: 7px;
-	--spectrum-radio-button-top-to-control-medium: 11px;
-	--spectrum-radio-button-top-to-control-large: 15px;
-	--spectrum-radio-button-top-to-control-extra-large: 19px;
-	--spectrum-slider-control-height-small: 18px;
-	--spectrum-slider-control-height-medium: 20px;
-	--spectrum-slider-control-height-large: 22px;
-	--spectrum-slider-control-height-extra-large: 26px;
-	--spectrum-slider-handle-size-small: 18px;
-	--spectrum-slider-handle-size-medium: 20px;
-	--spectrum-slider-handle-size-large: 22px;
-	--spectrum-slider-handle-size-extra-large: 26px;
-	--spectrum-slider-handle-border-width-down-small: 7px;
-	--spectrum-slider-handle-border-width-down-medium: 8px;
-	--spectrum-slider-handle-border-width-down-large: 9px;
-	--spectrum-slider-handle-border-width-down-extra-large: 11px;
-	--spectrum-slider-bottom-to-handle-small: 6px;
-	--spectrum-slider-bottom-to-handle-medium: 10px;
-	--spectrum-slider-bottom-to-handle-large: 14px;
-	--spectrum-slider-bottom-to-handle-extra-large: 17px;
-	--spectrum-corner-radius-100: 5px;
-	--spectrum-corner-radius-200: 10px;
-	--spectrum-drop-shadow-y: 2px;
-	--spectrum-drop-shadow-blur: 6px;
-	--spectrum-slider-tick-mark-height: 13px;
-	--spectrum-slider-ramp-track-height: 20px;
-	--spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
-	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-	--spectrum-colorwheel-colorarea-container-size: 182px;
-	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
-	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
-	--spectrum-menu-item-checkmark-height-small: 12px;
-	--spectrum-menu-item-checkmark-height-medium: 14px;
-	--spectrum-menu-item-checkmark-height-large: 16px;
-	--spectrum-menu-item-checkmark-height-extra-large: 16px;
-	--spectrum-menu-item-checkmark-width-small: 12px;
-	--spectrum-menu-item-checkmark-width-medium: 14px;
-	--spectrum-menu-item-checkmark-width-large: 16px;
-	--spectrum-menu-item-checkmark-width-extra-large: 16px;
-	--spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
-	--spectrum-button-top-to-text-small: 6px;
-	--spectrum-button-bottom-to-text-small: 5px;
-	--spectrum-button-top-to-text-medium: 9px;
-	--spectrum-button-bottom-to-text-medium: 10px;
-	--spectrum-button-top-to-text-large: 12px;
-	--spectrum-button-bottom-to-text-large: 13px;
-	--spectrum-button-top-to-text-extra-large: 16px;
-	--spectrum-button-bottom-to-text-extra-large: 17px;
-	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
-	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
-	--spectrum-coach-indicator-gap: 8px;
-	--spectrum-coach-indicator-ring-diameter: 20px;
-	--spectrum-coach-indicator-quiet-ring-diameter: 10px;
-	--spectrum-coachmark-buttongroup-display: none;
-	--spectrum-coachmark-buttongroup-mobile-display: flex;
-	--spectrum-coachmark-menu-display: none;
-	--spectrum-coachmark-menu-mobile-display: inline-flex;
-	--spectrum-well-padding: 20px;
-	--spectrum-well-margin-top: 5px;
-	--spectrum-well-min-width: 300px;
-	--spectrum-well-border-radius: 5px;
-	--spectrum-workflow-icon-size-xxl: 40px;
-	--spectrum-workflow-icon-size-xxs: 15px;
-	--spectrum-treeview-item-indentation-medium: 20px;
-	--spectrum-treeview-item-indentation-small: 15px;
-	--spectrum-treeview-item-indentation-large: 25px;
-	--spectrum-treeview-item-indentation-extra-large: 30px;
-	--spectrum-treeview-indicator-inset-block-start: 6px;
-	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
-	--spectrum-dialog-confirm-entry-animation-distance: 25px;
-	--spectrum-dialog-confirm-hero-height: 160px;
-	--spectrum-dialog-confirm-border-radius: 5px;
-	--spectrum-dialog-confirm-title-text-size: 19px;
-	--spectrum-dialog-confirm-description-text-size: 15px;
-	--spectrum-dialog-confirm-padding-grid: 24px;
-	--spectrum-datepicker-initial-width: 160px;
-	--spectrum-datepicker-generic-padding: 15px;
-	--spectrum-datepicker-dash-line-height: 30px;
-	--spectrum-datepicker-width-quiet-first: 90px;
-	--spectrum-datepicker-width-quiet-second: 20px;
-	--spectrum-datepicker-datetime-width-first: 45px;
-	--spectrum-datepicker-invalid-icon-to-button: 10px;
-	--spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
-	--spectrum-datepicker-input-datetime-width: 30px;
-	--spectrum-pagination-textfield-width: 60px;
-	--spectrum-pagination-item-inline-spacing: 6px;
-	--spectrum-dial-border-radius: 20px;
-	--spectrum-dial-handle-position: 10px;
-	--spectrum-dial-handle-block-margin: 20px;
-	--spectrum-dial-handle-inline-margin: 20px;
-	--spectrum-dial-controls-margin: 10px;
-	--spectrum-dial-label-gap-y: 6px;
-	--spectrum-dial-label-container-top-to-text: 5px;
-	--spectrum-assetcard-focus-ring-border-radius: 9px;
-	--spectrum-assetcard-selectionindicator-margin: 15px;
-	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
-	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
-	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
-	--spectrum-tooltip-animation-distance: 5px;
-	--spectrum-ui-icon-medium-display: none;
-	--spectrum-ui-icon-large-display: block;
-}
-.spectrum--light,
-.spectrum--lightest {
-	--spectrum-menu-item-background-color-default-rgb: 0, 0, 0;
-	--spectrum-menu-item-background-color-default-opacity: 0;
-	--spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
-	--spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200);
-	--spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200);
-	--spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200);
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
-	--spectrum-dropindicator-color: var(--spectrum-blue-800);
-	--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
-	--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200);
-	--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
-	--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
-	--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
-	--spectrum-badge-label-icon-color-primary: var(--spectrum-white);
-	--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
-	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-	--spectrum-well-border-color: var(--spectrum-black);
-	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
-	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
-	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
-	--spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
-	--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
-	--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
-	--spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
-	--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
-	--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
-	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
-	--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
-	--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
-	--spectrum-swatch-border-color-rgb: 0, 0, 0;
-	--spectrum-swatch-border-color-opacity: 0.51;
-	--spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
-	--spectrum-swatch-border-color-light-rgb: 0, 0, 0;
-	--spectrum-swatch-border-color-light-opacity: 0.2;
-	--spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-.spectrum--medium {
-	--spectrum-checkbox-control-size-small: 12px;
-	--spectrum-checkbox-control-size-medium: 14px;
-	--spectrum-checkbox-control-size-large: 16px;
-	--spectrum-checkbox-control-size-extra-large: 18px;
-	--spectrum-checkbox-top-to-control-small: 6px;
-	--spectrum-checkbox-top-to-control-medium: 9px;
-	--spectrum-checkbox-top-to-control-large: 12px;
-	--spectrum-checkbox-top-to-control-extra-large: 15px;
-	--spectrum-switch-control-width-small: 23px;
-	--spectrum-switch-control-width-medium: 26px;
-	--spectrum-switch-control-width-large: 29px;
-	--spectrum-switch-control-width-extra-large: 33px;
-	--spectrum-switch-control-height-small: 12px;
-	--spectrum-switch-control-height-medium: 14px;
-	--spectrum-switch-control-height-large: 16px;
-	--spectrum-switch-control-height-extra-large: 18px;
-	--spectrum-switch-top-to-control-small: 6px;
-	--spectrum-switch-top-to-control-medium: 9px;
-	--spectrum-switch-top-to-control-large: 12px;
-	--spectrum-switch-top-to-control-extra-large: 15px;
-	--spectrum-radio-button-control-size-small: 12px;
-	--spectrum-radio-button-control-size-medium: 14px;
-	--spectrum-radio-button-control-size-large: 16px;
-	--spectrum-radio-button-control-size-extra-large: 18px;
-	--spectrum-radio-button-top-to-control-small: 6px;
-	--spectrum-radio-button-top-to-control-medium: 9px;
-	--spectrum-radio-button-top-to-control-large: 12px;
-	--spectrum-radio-button-top-to-control-extra-large: 15px;
-	--spectrum-slider-control-height-small: 14px;
-	--spectrum-slider-control-height-medium: 16px;
-	--spectrum-slider-control-height-large: 18px;
-	--spectrum-slider-control-height-extra-large: 20px;
-	--spectrum-slider-handle-size-small: 14px;
-	--spectrum-slider-handle-size-medium: 16px;
-	--spectrum-slider-handle-size-large: 18px;
-	--spectrum-slider-handle-size-extra-large: 20px;
-	--spectrum-slider-handle-border-width-down-small: 5px;
-	--spectrum-slider-handle-border-width-down-medium: 6px;
-	--spectrum-slider-handle-border-width-down-large: 7px;
-	--spectrum-slider-handle-border-width-down-extra-large: 8px;
-	--spectrum-slider-bottom-to-handle-small: 5px;
-	--spectrum-slider-bottom-to-handle-medium: 8px;
-	--spectrum-slider-bottom-to-handle-large: 11px;
-	--spectrum-slider-bottom-to-handle-extra-large: 14px;
-	--spectrum-corner-radius-100: 4px;
-	--spectrum-corner-radius-200: 8px;
-	--spectrum-drop-shadow-y: 1px;
-	--spectrum-drop-shadow-blur: 4px;
-	--spectrum-slider-tick-mark-height: 10px;
-	--spectrum-slider-ramp-track-height: 16px;
-	--spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
-	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-	--spectrum-colorwheel-colorarea-container-size: 144px;
-	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
-	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
-	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
-	--spectrum-menu-item-checkmark-height-small: 10px;
-	--spectrum-menu-item-checkmark-height-medium: 10px;
-	--spectrum-menu-item-checkmark-height-large: 12px;
-	--spectrum-menu-item-checkmark-height-extra-large: 14px;
-	--spectrum-menu-item-checkmark-width-small: 10px;
-	--spectrum-menu-item-checkmark-width-medium: 10px;
-	--spectrum-menu-item-checkmark-width-large: 12px;
-	--spectrum-menu-item-checkmark-width-extra-large: 14px;
-	--spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
-	--spectrum-button-top-to-text-small: 5px;
-	--spectrum-button-bottom-to-text-small: 4px;
-	--spectrum-button-top-to-text-medium: 7px;
-	--spectrum-button-bottom-to-text-medium: 8px;
-	--spectrum-button-top-to-text-large: 10px;
-	--spectrum-button-bottom-to-text-large: 10px;
-	--spectrum-button-top-to-text-extra-large: 13px;
-	--spectrum-button-bottom-to-text-extra-large: 13px;
+	/* stylelint-disable-next-line custom-property-pattern -- context identification */
+	--scale: medium;
 	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
-	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
 	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
+	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
 	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
 	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
+	--spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
+	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
+	--spectrum-assetcard-focus-ring-border-radius: 8px;
+	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
+	--spectrum-assetcard-selectionindicator-margin: 12px;
+	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
+	--spectrum-button-bottom-to-text-small: 4px;
+	--spectrum-button-bottom-to-text-medium: 8px;
+	--spectrum-button-bottom-to-text-large: 10px;
+	--spectrum-button-bottom-to-text-extra-large: 13px;
+	--spectrum-button-top-to-text-small: 5px;
+	--spectrum-button-top-to-text-medium: 7px;
+	--spectrum-button-top-to-text-large: 10px;
+	--spectrum-button-top-to-text-extra-large: 13px;
 	--spectrum-coach-indicator-gap: 6px;
 	--spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
 	--spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
@@ -3399,220 +3517,63 @@
 	--spectrum-coachmark-buttongroup-mobile-display: none;
 	--spectrum-coachmark-menu-display: inline-flex;
 	--spectrum-coachmark-menu-mobile-display: none;
-	--spectrum-well-padding: var(--spectrum-spacing-300);
-	--spectrum-well-margin-top: var(--spectrum-spacing-75);
-	--spectrum-well-min-width: 240px;
-	--spectrum-well-border-radius: var(--spectrum-spacing-75);
-	--spectrum-workflow-icon-size-xxl: 32px;
-	--spectrum-workflow-icon-size-xxs: 12px;
-	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
-	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
-	--spectrum-treeview-item-indentation-large: 20px;
-	--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
-	--spectrum-treeview-indicator-inset-block-start: 5px;
-	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
-	--spectrum-dialog-confirm-entry-animation-distance: 20px;
-	--spectrum-dialog-confirm-hero-height: 128px;
-	--spectrum-dialog-confirm-border-radius: 4px;
-	--spectrum-dialog-confirm-title-text-size: 18px;
-	--spectrum-dialog-confirm-description-text-size: 14px;
-	--spectrum-dialog-confirm-padding-grid: 40px;
-	--spectrum-datepicker-initial-width: 128px;
-	--spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
+	--spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
+	--spectrum-colorwheel-colorarea-container-size: 144px;
+	--spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
+	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
+	--spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
 	--spectrum-datepicker-dash-line-height: 24px;
-	--spectrum-datepicker-width-quiet-first: 72px;
-	--spectrum-datepicker-width-quiet-second: 16px;
 	--spectrum-datepicker-datetime-width-first: 36px;
+	--spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
+	--spectrum-datepicker-initial-width: 128px;
+	--spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
 	--spectrum-datepicker-invalid-icon-to-button: 8px;
 	--spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
-	--spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
-	--spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
-	--spectrum-pagination-item-inline-spacing: 5px;
+	--spectrum-datepicker-width-quiet-first: 72px;
+	--spectrum-datepicker-width-quiet-second: 16px;
 	--spectrum-dial-border-radius: 16px;
-	--spectrum-dial-handle-position: 8px;
+	--spectrum-dial-controls-margin: 8px;
 	--spectrum-dial-handle-block-margin: 16px;
 	--spectrum-dial-handle-inline-margin: 16px;
-	--spectrum-dial-controls-margin: 8px;
-	--spectrum-dial-label-gap-y: 5px;
+	--spectrum-dial-handle-position: 8px;
 	--spectrum-dial-label-container-top-to-text: 4px;
-	--spectrum-assetcard-focus-ring-border-radius: 8px;
-	--spectrum-assetcard-selectionindicator-margin: 12px;
-	--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
-	--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
-	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
+	--spectrum-dial-label-gap-y: 5px;
+	--spectrum-dialog-confirm-border-radius: 4px;
+	--spectrum-dialog-confirm-description-text-size: 14px;
+	--spectrum-dialog-confirm-entry-animation-distance: 20px;
+	--spectrum-dialog-confirm-hero-height: 128px;
+	--spectrum-dialog-confirm-padding-grid: 40px;
+	--spectrum-dialog-confirm-title-text-size: 18px;
+	--spectrum-menu-item-checkmark-height-small: 10px;
+	--spectrum-menu-item-checkmark-height-medium: 10px;
+	--spectrum-menu-item-checkmark-height-large: 12px;
+	--spectrum-menu-item-checkmark-height-extra-large: 14px;
+	--spectrum-menu-item-checkmark-width-small: 10px;
+	--spectrum-menu-item-checkmark-width-medium: 10px;
+	--spectrum-menu-item-checkmark-width-large: 12px;
+	--spectrum-menu-item-checkmark-width-extra-large: 14px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
+	--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
+	--spectrum-pagination-item-inline-spacing: 5px;
+	--spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
+	--spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+	--spectrum-slider-ramp-track-height: 16px;
+	--spectrum-slider-tick-mark-height: 10px;
+	--spectrum-treeview-indicator-inset-block-start: 5px;
+	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
+	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
+	--spectrum-treeview-item-indentation-large: 20px;
+	--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
+	--spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
 	--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
 	--spectrum-ui-icon-medium-display: block;
 	--spectrum-ui-icon-large-display: none;
-}
-.spectrum--express.spectrum--dark,
-.spectrum--express.spectrum--darkest {
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb);
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
-}
-.spectrum--express {
-	--spectrum-neutral-background-color-selected-default: var(--spectrum-gray-800);
-	--spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
-	--spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-900);
-	--spectrum-slider-track-thickness: 4px;
-	--spectrum-slider-handle-gap: 0px;
-	--spectrum-picker-border-width: 0;
-	--spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px;
-	--spectrum-in-field-button-edge-to-fill: 4px;
-	--spectrum-in-field-button-stacked-inner-edge-to-fill: 1px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px;
-	--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px;
-	--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px;
-	--spectrum-border-width-100: 2px;
-	--spectrum-accent-color-100: var(--spectrum-indigo-100);
-	--spectrum-accent-color-200: var(--spectrum-indigo-200);
-	--spectrum-accent-color-300: var(--spectrum-indigo-300);
-	--spectrum-accent-color-400: var(--spectrum-indigo-400);
-	--spectrum-accent-color-500: var(--spectrum-indigo-500);
-	--spectrum-accent-color-600: var(--spectrum-indigo-600);
-	--spectrum-accent-color-700: var(--spectrum-indigo-700);
-	--spectrum-accent-color-800: var(--spectrum-indigo-800);
-	--spectrum-accent-color-900: var(--spectrum-indigo-900);
-	--spectrum-accent-color-1000: var(--spectrum-indigo-1000);
-	--spectrum-accent-color-1100: var(--spectrum-indigo-1100);
-	--spectrum-accent-color-1200: var(--spectrum-indigo-1200);
-	--spectrum-accent-color-1300: var(--spectrum-indigo-1300);
-	--spectrum-accent-color-1400: var(--spectrum-indigo-1400);
-	--spectrum-heading-sans-serif-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-black-font-weight);
-	--spectrum-heading-serif-emphasized-font-weight: var(--spectrum-black-font-weight);
-	--system: express;
-}
-.spectrum--express.spectrum--large {
-	--spectrum-checkbox-control-size-small: 18px;
-	--spectrum-checkbox-control-size-medium: 20px;
-	--spectrum-checkbox-control-size-large: 22px;
-	--spectrum-checkbox-control-size-extra-large: 26px;
-	--spectrum-checkbox-top-to-control-small: 6px;
-	--spectrum-checkbox-top-to-control-medium: 10px;
-	--spectrum-checkbox-top-to-control-large: 14px;
-	--spectrum-checkbox-top-to-control-extra-large: 17px;
-	--spectrum-switch-control-width-small: 32px;
-	--spectrum-switch-control-width-medium: 36px;
-	--spectrum-switch-control-width-large: 41px;
-	--spectrum-switch-control-width-extra-large: 46px;
-	--spectrum-switch-control-height-small: 18px;
-	--spectrum-switch-control-height-medium: 20px;
-	--spectrum-switch-control-height-large: 22px;
-	--spectrum-switch-control-height-extra-large: 26px;
-	--spectrum-switch-top-to-control-small: 6px;
-	--spectrum-switch-top-to-control-medium: 10px;
-	--spectrum-switch-top-to-control-large: 14px;
-	--spectrum-switch-top-to-control-extra-large: 17px;
-	--spectrum-radio-button-control-size-small: 18px;
-	--spectrum-radio-button-control-size-medium: 20px;
-	--spectrum-radio-button-control-size-large: 22px;
-	--spectrum-radio-button-control-size-extra-large: 26px;
-	--spectrum-radio-button-top-to-control-small: 6px;
-	--spectrum-radio-button-top-to-control-medium: 10px;
-	--spectrum-radio-button-top-to-control-large: 14px;
-	--spectrum-radio-button-top-to-control-extra-large: 17px;
-	--spectrum-slider-control-height-small: 22px;
-	--spectrum-slider-control-height-medium: 24px;
-	--spectrum-slider-control-height-large: 28px;
-	--spectrum-slider-control-height-extra-large: 30px;
-	--spectrum-slider-handle-size-small: 22px;
-	--spectrum-slider-handle-size-medium: 24px;
-	--spectrum-slider-handle-size-large: 28px;
-	--spectrum-slider-handle-size-extra-large: 30px;
-	--spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200);
-	--spectrum-slider-bottom-to-handle-small: 4px;
-	--spectrum-slider-bottom-to-handle-medium: 8px;
-	--spectrum-slider-bottom-to-handle-large: 12px;
-	--spectrum-slider-bottom-to-handle-extra-large: 15px;
-	--spectrum-corner-radius-75: 4px;
-	--spectrum-corner-radius-100: 8px;
-	--spectrum-corner-radius-200: 16px;
-	--spectrum-drop-shadow-x: 0px;
-	--spectrum-drop-shadow-y: 4px;
-	--spectrum-drop-shadow-blur: 16px;
-	--spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
-	--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-	--spectrum-dialog-confirm-border-radius: 8px;
-	--spectrum-dial-border-radius: 15px;
-	--spectrum-assetcard-focus-ring-border-radius: 12px;
-}
-.spectrum--express.spectrum--light,
-.spectrum--express.spectrum--lightest {
-	--spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb);
-	--spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
-	--spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
-	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900);
-	--spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000);
-	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900);
-}
-.spectrum--express.spectrum--medium {
-	--spectrum-checkbox-control-size-small: 14px;
-	--spectrum-checkbox-control-size-medium: 16px;
-	--spectrum-checkbox-control-size-large: 18px;
-	--spectrum-checkbox-control-size-extra-large: 20px;
-	--spectrum-checkbox-top-to-control-small: 5px;
-	--spectrum-checkbox-top-to-control-medium: 8px;
-	--spectrum-checkbox-top-to-control-large: 11px;
-	--spectrum-checkbox-top-to-control-extra-large: 14px;
-	--spectrum-switch-control-width-small: 25px;
-	--spectrum-switch-control-width-medium: 28px;
-	--spectrum-switch-control-width-large: 32px;
-	--spectrum-switch-control-width-extra-large: 35px;
-	--spectrum-switch-control-height-small: 14px;
-	--spectrum-switch-control-height-medium: 16px;
-	--spectrum-switch-control-height-large: 18px;
-	--spectrum-switch-control-height-extra-large: 20px;
-	--spectrum-switch-top-to-control-small: 5px;
-	--spectrum-switch-top-to-control-medium: 8px;
-	--spectrum-switch-top-to-control-large: 11px;
-	--spectrum-switch-top-to-control-extra-large: 14px;
-	--spectrum-radio-button-control-size-small: 14px;
-	--spectrum-radio-button-control-size-medium: 16px;
-	--spectrum-radio-button-control-size-large: 18px;
-	--spectrum-radio-button-control-size-extra-large: 20px;
-	--spectrum-radio-button-top-to-control-small: 5px;
-	--spectrum-radio-button-top-to-control-medium: 8px;
-	--spectrum-radio-button-top-to-control-large: 11px;
-	--spectrum-radio-button-top-to-control-extra-large: 14px;
-	--spectrum-slider-control-height-small: 18px;
-	--spectrum-slider-control-height-medium: 20px;
-	--spectrum-slider-control-height-large: 22px;
-	--spectrum-slider-control-height-extra-large: 24px;
-	--spectrum-slider-handle-size-small: 18px;
-	--spectrum-slider-handle-size-medium: 20px;
-	--spectrum-slider-handle-size-large: 22px;
-	--spectrum-slider-handle-size-extra-large: 24px;
-	--spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200);
-	--spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200);
-	--spectrum-slider-bottom-to-handle-small: 3px;
-	--spectrum-slider-bottom-to-handle-medium: 6px;
-	--spectrum-slider-bottom-to-handle-large: 9px;
-	--spectrum-slider-bottom-to-handle-extra-large: 12px;
-	--spectrum-corner-radius-75: 3px;
-	--spectrum-corner-radius-100: 6px;
-	--spectrum-corner-radius-200: 12px;
-	--spectrum-drop-shadow-x: 0px;
-	--spectrum-drop-shadow-y: 4px;
-	--spectrum-drop-shadow-blur: 16px;
-	--spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
-	--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-	--spectrum-dialog-confirm-border-radius: 6px;
-	--spectrum-dial-border-radius: 12px;
-	--spectrum-assetcard-focus-ring-border-radius: 10px;
+	--spectrum-well-border-radius: var(--spectrum-spacing-75);
+	--spectrum-well-margin-top: var(--spectrum-spacing-75);
+	--spectrum-well-min-width: 240px;
+	--spectrum-well-padding: var(--spectrum-spacing-300);
+	--spectrum-workflow-icon-size-xxl: 32px;
+	--spectrum-workflow-icon-size-xxs: 12px;
 }
diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json
index 6e39c8016e..2be36fb580 100644
--- a/tokens/dist/json/tokens.json
+++ b/tokens/dist/json/tokens.json
@@ -1,100 +1,273 @@
 {
   "accent-background-color-default": {
     "prop": "--spectrum-accent-background-color-default",
-    "ref": "var(--spectrum-accent-color-600)"
+    "ref": "var(--spectrum-accent-color-800)",
+    "light": {
+      "value": "rgb(59, 99, 251)"
+    },
+    "dark": {
+      "value": "rgb(64, 105, 253)"
+    }
   },
   "accent-background-color-down": {
     "prop": "--spectrum-accent-background-color-down",
-    "ref": "var(--spectrum-accent-color-400)"
+    "ref": "var(--spectrum-accent-color-700)",
+    "light": {
+      "value": "rgb(39, 77, 234)"
+    },
+    "dark": {
+      "value": "rgb(52, 91, 248)"
+    }
   },
   "accent-background-color-hover": {
     "prop": "--spectrum-accent-background-color-hover",
-    "ref": "var(--spectrum-accent-color-500)"
+    "ref": "var(--spectrum-accent-color-700)",
+    "light": {
+      "value": "rgb(39, 77, 234)"
+    },
+    "dark": {
+      "value": "rgb(52, 91, 248)"
+    }
   },
   "accent-background-color-key-focus": {
     "prop": "--spectrum-accent-background-color-key-focus",
-    "ref": "var(--spectrum-accent-color-500)"
+    "ref": "var(--spectrum-accent-color-700)",
+    "light": {
+      "value": "rgb(39, 77, 234)"
+    },
+    "dark": {
+      "value": "rgb(52, 91, 248)"
+    }
   },
   "accent-color-100": {
     "prop": "--spectrum-accent-color-100",
-    "ref": "var(--spectrum-indigo-100)"
+    "ref": "var(--spectrum-blue-100)",
+    "light": {
+      "value": "rgb(245, 249, 255)"
+    },
+    "dark": {
+      "value": "rgb(14, 23, 63)"
+    }
   },
   "accent-color-1000": {
     "prop": "--spectrum-accent-color-1000",
-    "ref": "var(--spectrum-indigo-1000)"
+    "ref": "var(--spectrum-blue-1000)",
+    "light": {
+      "value": "rgb(39, 77, 234)"
+    },
+    "dark": {
+      "value": "rgb(105, 149, 254)"
+    }
   },
   "accent-color-1100": {
     "prop": "--spectrum-accent-color-1100",
-    "ref": "var(--spectrum-indigo-1100)"
+    "ref": "var(--spectrum-blue-1100)",
+    "light": {
+      "value": "rgb(29, 62, 207)"
+    },
+    "dark": {
+      "value": "rgb(124, 169, 252)"
+    }
   },
   "accent-color-1200": {
     "prop": "--spectrum-accent-color-1200",
-    "ref": "var(--spectrum-indigo-1200)"
+    "ref": "var(--spectrum-blue-1200)",
+    "light": {
+      "value": "rgb(21, 50, 173)"
+    },
+    "dark": {
+      "value": "rgb(152, 192, 252)"
+    }
   },
   "accent-color-1300": {
     "prop": "--spectrum-accent-color-1300",
-    "ref": "var(--spectrum-indigo-1300)"
+    "ref": "var(--spectrum-blue-1300)",
+    "light": {
+      "value": "rgb(16, 40, 140)"
+    },
+    "dark": {
+      "value": "rgb(181, 213, 253)"
+    }
   },
   "accent-color-1400": {
     "prop": "--spectrum-accent-color-1400",
-    "ref": "var(--spectrum-indigo-1400)"
+    "ref": "var(--spectrum-blue-1400)",
+    "light": {
+      "value": "rgb(12, 31, 105)"
+    },
+    "dark": {
+      "value": "rgb(213, 231, 254)"
+    }
+  },
+  "accent-color-1500": {
+    "prop": "--spectrum-accent-color-1500",
+    "ref": "var(--spectrum-blue-1500)",
+    "dark": {
+      "value": "rgb(238, 245, 255)"
+    },
+    "light": {
+      "value": "rgb(14, 24, 67)"
+    }
+  },
+  "accent-color-1600": {
+    "prop": "--spectrum-accent-color-1600",
+    "ref": "var(--spectrum-blue-1600)",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "light": {
+      "value": "rgb(7, 11, 30)"
+    }
   },
   "accent-color-200": {
     "prop": "--spectrum-accent-color-200",
-    "ref": "var(--spectrum-indigo-200)"
+    "ref": "var(--spectrum-blue-200)",
+    "light": {
+      "value": "rgb(229, 240, 254)"
+    },
+    "dark": {
+      "value": "rgb(15, 28, 82)"
+    }
   },
   "accent-color-300": {
     "prop": "--spectrum-accent-color-300",
-    "ref": "var(--spectrum-indigo-300)"
+    "ref": "var(--spectrum-blue-300)",
+    "light": {
+      "value": "rgb(203, 226, 254)"
+    },
+    "dark": {
+      "value": "rgb(12, 33, 117)"
+    }
   },
   "accent-color-400": {
     "prop": "--spectrum-accent-color-400",
-    "ref": "var(--spectrum-indigo-400)"
+    "ref": "var(--spectrum-blue-400)",
+    "light": {
+      "value": "rgb(172, 207, 253)"
+    },
+    "dark": {
+      "value": "rgb(18, 45, 154)"
+    }
   },
   "accent-color-500": {
     "prop": "--spectrum-accent-color-500",
-    "ref": "var(--spectrum-indigo-500)"
+    "ref": "var(--spectrum-blue-500)",
+    "light": {
+      "value": "rgb(142, 185, 252)"
+    },
+    "dark": {
+      "value": "rgb(26, 58, 195)"
+    }
   },
   "accent-color-600": {
     "prop": "--spectrum-accent-color-600",
-    "ref": "var(--spectrum-indigo-600)"
+    "ref": "var(--spectrum-blue-600)",
+    "light": {
+      "value": "rgb(114, 158, 253)"
+    },
+    "dark": {
+      "value": "rgb(37, 73, 229)"
+    }
   },
   "accent-color-700": {
     "prop": "--spectrum-accent-color-700",
-    "ref": "var(--spectrum-indigo-700)"
+    "ref": "var(--spectrum-blue-700)",
+    "light": {
+      "value": "rgb(93, 137, 255)"
+    },
+    "dark": {
+      "value": "rgb(52, 91, 248)"
+    }
   },
   "accent-color-800": {
     "prop": "--spectrum-accent-color-800",
-    "ref": "var(--spectrum-indigo-800)"
+    "ref": "var(--spectrum-blue-800)",
+    "light": {
+      "value": "rgb(75, 117, 255)"
+    },
+    "dark": {
+      "value": "rgb(64, 105, 253)"
+    }
   },
   "accent-color-900": {
     "prop": "--spectrum-accent-color-900",
-    "ref": "var(--spectrum-indigo-900)"
+    "ref": "var(--spectrum-blue-900)",
+    "light": {
+      "value": "rgb(59, 99, 251)"
+    },
+    "dark": {
+      "value": "rgb(86, 129, 255)"
+    }
   },
   "accent-content-color-default": {
     "prop": "--spectrum-accent-content-color-default",
-    "ref": "var(--spectrum-indigo-900)"
+    "ref": "var(--spectrum-accent-color-900)",
+    "light": {
+      "value": "rgb(59, 99, 251)"
+    },
+    "dark": {
+      "value": "rgb(86, 129, 255)"
+    }
   },
   "accent-content-color-down": {
     "prop": "--spectrum-accent-content-color-down",
-    "ref": "var(--spectrum-indigo-1100)"
+    "ref": "var(--spectrum-accent-color-1000)",
+    "light": {
+      "value": "rgb(39, 77, 234)"
+    },
+    "dark": {
+      "value": "rgb(105, 149, 254)"
+    }
   },
   "accent-content-color-hover": {
     "prop": "--spectrum-accent-content-color-hover",
-    "ref": "var(--spectrum-indigo-1000)"
+    "ref": "var(--spectrum-accent-color-1000)",
+    "light": {
+      "value": "rgb(39, 77, 234)"
+    },
+    "dark": {
+      "value": "rgb(105, 149, 254)"
+    }
   },
   "accent-content-color-key-focus": {
     "prop": "--spectrum-accent-content-color-key-focus",
-    "ref": "var(--spectrum-indigo-1000)"
+    "ref": "var(--spectrum-accent-color-1000)",
+    "light": {
+      "value": "rgb(39, 77, 234)"
+    },
+    "dark": {
+      "value": "rgb(105, 149, 254)"
+    }
   },
   "accent-content-color-selected": {
     "prop": "--spectrum-accent-content-color-selected",
     "ref": "var(--spectrum-accent-content-color-down)",
-    "value": "{accent-content-color-down}"
+    "light": {
+      "value": "rgb(39, 77, 234)"
+    },
+    "dark": {
+      "value": "rgb(105, 149, 254)"
+    }
+  },
+  "accent-subtle-background-color-default": {
+    "prop": "--spectrum-accent-subtle-background-color-default",
+    "ref": "var(--spectrum-accent-color-300)",
+    "light": {
+      "value": "rgb(229, 240, 254)"
+    },
+    "dark": {
+      "value": "rgb(12, 33, 117)"
+    }
   },
   "accent-visual-color": {
     "prop": "--spectrum-accent-visual-color",
-    "ref": "var(--spectrum-accent-color-900)"
+    "ref": "var(--spectrum-accent-color-900)",
+    "light": {
+      "value": "rgb(75, 117, 255)"
+    },
+    "dark": {
+      "value": "rgb(86, 129, 255)"
+    }
   },
   "accordion-bottom-to-text-compact-extra-large": {
     "prop": "--spectrum-accordion-bottom-to-text-compact-extra-large",
@@ -696,41 +869,42 @@
   },
   "background-base-color": {
     "prop": "--spectrum-background-base-color",
-    "ref": "var(--spectrum-gray-50)",
-    "light": {
-      "value": "rgb(230, 230, 230)"
+    "ref": "var(--spectrum-gray-25)",
+    "dark": {
+      "value": "rgb(17, 17, 17)"
     },
+    "light": {
+      "value": "rgb(255, 255, 255)"
+    }
+  },
+  "background-elevated-color": {
+    "prop": "--spectrum-background-elevated-color",
+    "ref": "var(--spectrum-gray-25)",
     "dark": {
-      "value": "rgb(29, 29, 29)"
+      "value": "rgb(34, 34, 34)"
     },
-    "darkest": {
-      "value": "rgb(0, 0, 0)"
+    "light": {
+      "value": "rgb(255, 255, 255)"
     }
   },
   "background-layer-1-color": {
     "prop": "--spectrum-background-layer-1-color",
-    "ref": "var(--spectrum-gray-75)",
+    "ref": "var(--spectrum-gray-50)",
     "light": {
       "value": "rgb(248, 248, 248)"
     },
     "dark": {
-      "value": "rgb(38, 38, 38)"
-    },
-    "darkest": {
-      "value": "rgb(14, 14, 14)"
+      "value": "rgb(27, 27, 27)"
     }
   },
   "background-layer-2-color": {
     "prop": "--spectrum-background-layer-2-color",
-    "ref": "var(--spectrum-gray-100)",
+    "ref": "var(--spectrum-gray-75)",
     "light": {
       "value": "rgb(255, 255, 255)"
     },
     "dark": {
-      "value": "rgb(50, 50, 50)"
-    },
-    "darkest": {
-      "value": "rgb(29, 29, 29)"
+      "value": "rgb(34, 34, 34)"
     }
   },
   "background-opacity-default": {
@@ -749,6 +923,16 @@
     "prop": "--spectrum-background-opacity-key-focus",
     "value": "0.1"
   },
+  "background-pasteboard-color": {
+    "prop": "--spectrum-background-pasteboard-color",
+    "ref": "var(--spectrum-gray-100)",
+    "dark": {
+      "value": "rgb(17, 17, 17)"
+    },
+    "light": {
+      "value": "rgb(233, 233, 233)"
+    }
+  },
   "black": {
     "prop": "--spectrum-black",
     "value": "rgb(0, 0, 0)"
@@ -760,195 +944,175 @@
   "blue-100": {
     "prop": "--spectrum-blue-100",
     "light": {
-      "value": "rgb(224, 242, 255)"
+      "value": "rgb(245, 249, 255)"
     },
     "dark": {
-      "value": "rgb(0, 56, 119)"
-    },
-    "darkest": {
-      "value": "rgb(0, 38, 81)"
+      "value": "rgb(14, 23, 63)"
     }
   },
   "blue-1000": {
     "prop": "--spectrum-blue-1000",
     "light": {
-      "value": "rgb(0, 84, 182)"
+      "value": "rgb(39, 77, 234)"
     },
     "dark": {
-      "value": "rgb(143, 202, 252)"
-    },
-    "darkest": {
-      "value": "rgb(124, 189, 250)"
+      "value": "rgb(105, 149, 254)"
     }
   },
   "blue-1100": {
     "prop": "--spectrum-blue-1100",
     "light": {
-      "value": "rgb(0, 68, 145)"
+      "value": "rgb(29, 62, 207)"
     },
     "dark": {
-      "value": "rgb(174, 219, 254)"
-    },
-    "darkest": {
-      "value": "rgb(152, 206, 253)"
+      "value": "rgb(124, 169, 252)"
     }
   },
   "blue-1200": {
     "prop": "--spectrum-blue-1200",
     "light": {
-      "value": "rgb(0, 53, 113)"
+      "value": "rgb(21, 50, 173)"
     },
     "dark": {
-      "value": "rgb(204, 233, 255)"
-    },
-    "darkest": {
-      "value": "rgb(179, 222, 254)"
+      "value": "rgb(152, 192, 252)"
     }
   },
   "blue-1300": {
     "prop": "--spectrum-blue-1300",
     "light": {
-      "value": "rgb(0, 39, 84)"
+      "value": "rgb(16, 40, 140)"
     },
     "dark": {
-      "value": "rgb(232, 246, 255)"
-    },
-    "darkest": {
-      "value": "rgb(206, 234, 255)"
+      "value": "rgb(181, 213, 253)"
     }
   },
   "blue-1400": {
     "prop": "--spectrum-blue-1400",
     "light": {
-      "value": "rgb(0, 28, 60)"
+      "value": "rgb(12, 31, 105)"
+    },
+    "dark": {
+      "value": "rgb(213, 231, 254)"
+    }
+  },
+  "blue-1500": {
+    "prop": "--spectrum-blue-1500",
+    "dark": {
+      "value": "rgb(238, 245, 255)"
     },
+    "light": {
+      "value": "rgb(14, 24, 67)"
+    }
+  },
+  "blue-1600": {
+    "prop": "--spectrum-blue-1600",
     "dark": {
       "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(227, 243, 255)"
+    "light": {
+      "value": "rgb(7, 11, 30)"
     }
   },
   "blue-200": {
     "prop": "--spectrum-blue-200",
     "light": {
-      "value": "rgb(202, 232, 255)"
+      "value": "rgb(229, 240, 254)"
     },
     "dark": {
-      "value": "rgb(0, 65, 138)"
-    },
-    "darkest": {
-      "value": "rgb(0, 50, 106)"
+      "value": "rgb(15, 28, 82)"
     }
   },
   "blue-300": {
     "prop": "--spectrum-blue-300",
     "light": {
-      "value": "rgb(181, 222, 255)"
+      "value": "rgb(203, 226, 254)"
     },
     "dark": {
-      "value": "rgb(0, 77, 163)"
-    },
-    "darkest": {
-      "value": "rgb(0, 64, 135)"
+      "value": "rgb(12, 33, 117)"
     }
   },
   "blue-400": {
     "prop": "--spectrum-blue-400",
     "light": {
-      "value": "rgb(150, 206, 253)"
+      "value": "rgb(172, 207, 253)"
     },
     "dark": {
-      "value": "rgb(0, 89, 194)"
-    },
-    "darkest": {
-      "value": "rgb(0, 78, 166)"
+      "value": "rgb(18, 45, 154)"
     }
   },
   "blue-500": {
     "prop": "--spectrum-blue-500",
     "light": {
-      "value": "rgb(120, 187, 250)"
+      "value": "rgb(142, 185, 252)"
     },
     "dark": {
-      "value": "rgb(3, 103, 224)"
-    },
-    "darkest": {
-      "value": "rgb(0, 92, 200)"
+      "value": "rgb(26, 58, 195)"
     }
   },
   "blue-600": {
     "prop": "--spectrum-blue-600",
     "light": {
-      "value": "rgb(89, 167, 246)"
+      "value": "rgb(114, 158, 253)"
     },
     "dark": {
-      "value": "rgb(19, 121, 243)"
-    },
-    "darkest": {
-      "value": "rgb(6, 108, 231)"
+      "value": "rgb(37, 73, 229)"
     }
   },
   "blue-700": {
     "prop": "--spectrum-blue-700",
     "light": {
-      "value": "rgb(56, 146, 243)"
+      "value": "rgb(93, 137, 255)"
     },
     "dark": {
-      "value": "rgb(52, 143, 244)"
-    },
-    "darkest": {
-      "value": "rgb(29, 128, 245)"
+      "value": "rgb(52, 91, 248)"
     }
   },
   "blue-800": {
     "prop": "--spectrum-blue-800",
     "light": {
-      "value": "rgb(20, 122, 243)"
+      "value": "rgb(75, 117, 255)"
     },
     "dark": {
-      "value": "rgb(84, 163, 246)"
-    },
-    "darkest": {
-      "value": "rgb(64, 150, 243)"
+      "value": "rgb(64, 105, 253)"
     }
   },
   "blue-900": {
     "prop": "--spectrum-blue-900",
     "light": {
-      "value": "rgb(2, 101, 220)"
+      "value": "rgb(59, 99, 251)"
     },
     "dark": {
-      "value": "rgb(114, 183, 249)"
-    },
-    "darkest": {
-      "value": "rgb(94, 170, 247)"
+      "value": "rgb(86, 129, 255)"
     }
   },
   "blue-background-color-default": {
     "prop": "--spectrum-blue-background-color-default",
-    "ref": "var(--spectrum-blue-700)",
+    "ref": "var(--spectrum-blue-800)",
     "light": {
-      "value": "rgb(2, 101, 220)"
+      "value": "rgb(59, 99, 251)"
     },
     "dark": {
-      "value": "rgb(52, 143, 244)"
+      "value": "rgb(64, 105, 253)"
+    }
+  },
+  "blue-subtle-background-color-default": {
+    "prop": "--spectrum-blue-subtle-background-color-default",
+    "ref": "var(--spectrum-blue-300)",
+    "light": {
+      "value": "rgb(229, 240, 254)"
     },
-    "darkest": {
-      "value": "rgb(29, 128, 245)"
+    "dark": {
+      "value": "rgb(12, 33, 117)"
     }
   },
   "blue-visual-color": {
     "prop": "--spectrum-blue-visual-color",
     "ref": "var(--spectrum-blue-900)",
     "light": {
-      "value": "rgb(20, 122, 243)"
+      "value": "rgb(75, 117, 255)"
     },
     "dark": {
-      "value": "rgb(114, 183, 249)"
-    },
-    "darkest": {
-      "value": "rgb(94, 170, 247)"
+      "value": "rgb(86, 129, 255)"
     }
   },
   "body-cjk-emphasized-font-style": {
@@ -1005,13 +1169,10 @@
     "prop": "--spectrum-body-color",
     "ref": "var(--spectrum-gray-800)",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(235, 235, 235)"
-    },
-    "darkest": {
-      "value": "rgb(235, 235, 235)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "body-line-height": {
@@ -1189,12 +1350,7 @@
   },
   "border-width-100": {
     "prop": "--spectrum-border-width-100",
-    "spectrum": {
-      "value": "1px"
-    },
-    "express": {
-      "value": "2px"
-    }
+    "value": "1px"
   },
   "border-width-200": {
     "prop": "--spectrum-border-width-200",
@@ -1375,231 +1531,382 @@
     "prop": "--spectrum-breadcrumbs-truncated-menu-to-separator-icon",
     "value": "0px"
   },
-  "button-minimum-width-multiplier": {
-    "prop": "--spectrum-button-minimum-width-multiplier",
-    "value": "2.25"
-  },
-  "card-minimum-width": {
-    "prop": "--spectrum-card-minimum-width",
-    "value": "100px"
-  },
-  "card-preview-minimum-height": {
-    "prop": "--spectrum-card-preview-minimum-height",
-    "value": "130px"
-  },
-  "card-selection-background-color": {
-    "prop": "--spectrum-card-selection-background-color",
-    "ref": "var(--spectrum-gray-100)",
-    "light": {
-      "value": "rgb(248, 248, 248)"
-    },
+  "brown-100": {
+    "prop": "--spectrum-brown-100",
     "dark": {
-      "value": "rgb(50, 50, 50)"
+      "value": "rgb(35, 24, 8)"
     },
-    "darkest": {
-      "value": "rgb(29, 29, 29)"
+    "light": {
+      "value": "rgb(252, 247, 242)"
     }
   },
-  "card-selection-background-color-opacity": {
-    "prop": "--spectrum-card-selection-background-color-opacity",
-    "value": "0.95"
-  },
-  "card-selection-background-size": {
-    "prop": "--spectrum-card-selection-background-size",
-    "value": "40px"
-  },
-  "celery-100": {
-    "prop": "--spectrum-celery-100",
-    "light": {
-      "value": "rgb(205, 252, 191)"
-    },
+  "brown-1000": {
+    "prop": "--spectrum-brown-1000",
     "dark": {
-      "value": "rgb(0, 69, 10)"
+      "value": "rgb(181, 147, 98)"
     },
-    "darkest": {
-      "value": "rgb(0, 47, 7)"
+    "light": {
+      "value": "rgb(119, 91, 50)"
     }
   },
-  "celery-1000": {
-    "prop": "--spectrum-celery-1000",
-    "light": {
-      "value": "rgb(0, 103, 15)"
-    },
+  "brown-1100": {
+    "prop": "--spectrum-brown-1100",
     "dark": {
-      "value": "rgb(105, 220, 99)"
+      "value": "rgb(199, 163, 112)"
     },
-    "darkest": {
-      "value": "rgb(80, 208, 82)"
+    "light": {
+      "value": "rgb(103, 76, 35)"
     }
   },
-  "celery-1100": {
-    "prop": "--spectrum-celery-1100",
-    "light": {
-      "value": "rgb(0, 83, 13)"
-    },
+  "brown-1200": {
+    "prop": "--spectrum-brown-1200",
     "dark": {
-      "value": "rgb(142, 235, 127)"
+      "value": "rgb(222, 185, 130)"
     },
-    "darkest": {
-      "value": "rgb(115, 224, 107)"
+    "light": {
+      "value": "rgb(88, 61, 21)"
     }
   },
-  "celery-1200": {
-    "prop": "--spectrum-celery-1200",
-    "light": {
-      "value": "rgb(0, 64, 10)"
-    },
+  "brown-1300": {
+    "prop": "--spectrum-brown-1300",
     "dark": {
-      "value": "rgb(180, 247, 162)"
+      "value": "rgb(232, 207, 169)"
     },
-    "darkest": {
-      "value": "rgb(147, 237, 131)"
+    "light": {
+      "value": "rgb(70, 49, 17)"
     }
   },
-  "celery-1300": {
-    "prop": "--spectrum-celery-1300",
-    "light": {
-      "value": "rgb(0, 48, 7)"
-    },
+  "brown-1400": {
+    "prop": "--spectrum-brown-1400",
     "dark": {
-      "value": "rgb(221, 253, 211)"
+      "value": "rgb(242, 227, 206)"
     },
-    "darkest": {
-      "value": "rgb(180, 247, 162)"
+    "light": {
+      "value": "rgb(52, 37, 13)"
     }
   },
-  "celery-1400": {
-    "prop": "--spectrum-celery-1400",
-    "light": {
-      "value": "rgb(0, 34, 5)"
+  "brown-1500": {
+    "prop": "--spectrum-brown-1500",
+    "dark": {
+      "value": "rgb(250, 244, 236)"
     },
+    "light": {
+      "value": "rgb(38, 26, 9)"
+    }
+  },
+  "brown-1600": {
+    "prop": "--spectrum-brown-1600",
     "dark": {
       "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(213, 252, 202)"
+    "light": {
+      "value": "rgb(16, 12, 4)"
     }
   },
-  "celery-200": {
-    "prop": "--spectrum-celery-200",
-    "light": {
-      "value": "rgb(174, 246, 157)"
-    },
+  "brown-200": {
+    "prop": "--spectrum-brown-200",
     "dark": {
-      "value": "rgb(0, 80, 12)"
+      "value": "rgb(44, 31, 11)"
     },
-    "darkest": {
-      "value": "rgb(0, 61, 9)"
+    "light": {
+      "value": "rgb(247, 238, 225)"
     }
   },
-  "celery-300": {
-    "prop": "--spectrum-celery-300",
+  "brown-300": {
+    "prop": "--spectrum-brown-300",
+    "dark": {
+      "value": "rgb(58, 40, 14)"
+    },
+    "light": {
+      "value": "rgb(239, 221, 195)"
+    }
+  },
+  "brown-400": {
+    "prop": "--spectrum-brown-400",
+    "dark": {
+      "value": "rgb(78, 55, 19)"
+    },
+    "light": {
+      "value": "rgb(229, 200, 157)"
+    }
+  },
+  "brown-500": {
+    "prop": "--spectrum-brown-500",
+    "dark": {
+      "value": "rgb(98, 71, 30)"
+    },
+    "light": {
+      "value": "rgb(214, 177, 123)"
+    }
+  },
+  "brown-600": {
+    "prop": "--spectrum-brown-600",
+    "dark": {
+      "value": "rgb(115, 88, 47)"
+    },
+    "light": {
+      "value": "rgb(190, 155, 104)"
+    }
+  },
+  "brown-700": {
+    "prop": "--spectrum-brown-700",
+    "dark": {
+      "value": "rgb(132, 104, 61)"
+    },
+    "light": {
+      "value": "rgb(171, 138, 90)"
+    }
+  },
+  "brown-800": {
+    "prop": "--spectrum-brown-800",
+    "dark": {
+      "value": "rgb(143, 114, 69)"
+    },
+    "light": {
+      "value": "rgb(154, 123, 77)"
+    }
+  },
+  "brown-900": {
+    "prop": "--spectrum-brown-900",
+    "dark": {
+      "value": "rgb(163, 132, 84)"
+    },
+    "light": {
+      "value": "rgb(139, 109, 66)"
+    }
+  },
+  "brown-background-color-default": {
+    "prop": "--spectrum-brown-background-color-default",
+    "ref": "var(--spectrum-brown-800)",
+    "light": {
+      "value": "rgb(139, 109, 66)"
+    },
+    "dark": {
+      "value": "rgb(143, 114, 69)"
+    }
+  },
+  "brown-subtle-background-color-default": {
+    "prop": "--spectrum-brown-subtle-background-color-default",
+    "ref": "var(--spectrum-brown-300)",
+    "light": {
+      "value": "rgb(247, 238, 225)"
+    },
+    "dark": {
+      "value": "rgb(58, 40, 14)"
+    }
+  },
+  "brown-visual-color": {
+    "prop": "--spectrum-brown-visual-color",
+    "ref": "var(--spectrum-brown-900)",
+    "light": {
+      "value": "rgb(154, 123, 77)"
+    },
+    "dark": {
+      "value": "rgb(163, 132, 84)"
+    }
+  },
+  "button-minimum-width-multiplier": {
+    "prop": "--spectrum-button-minimum-width-multiplier",
+    "value": "2.25"
+  },
+  "card-minimum-width": {
+    "prop": "--spectrum-card-minimum-width",
+    "value": "100px"
+  },
+  "card-preview-minimum-height": {
+    "prop": "--spectrum-card-preview-minimum-height",
+    "value": "130px"
+  },
+  "card-selection-background-color": {
+    "prop": "--spectrum-card-selection-background-color",
+    "ref": "var(--spectrum-gray-100)",
+    "light": {
+      "value": "rgb(233, 233, 233)"
+    },
+    "dark": {
+      "value": "rgb(44, 44, 44)"
+    }
+  },
+  "card-selection-background-color-opacity": {
+    "prop": "--spectrum-card-selection-background-color-opacity",
+    "value": "0.95"
+  },
+  "card-selection-background-size": {
+    "prop": "--spectrum-card-selection-background-size",
+    "value": "40px"
+  },
+  "celery-100": {
+    "prop": "--spectrum-celery-100",
+    "light": {
+      "value": "rgb(235, 255, 220)"
+    },
+    "dark": {
+      "value": "rgb(11, 31, 0)"
+    }
+  },
+  "celery-1000": {
+    "prop": "--spectrum-celery-1000",
+    "light": {
+      "value": "rgb(52, 109, 12)"
+    },
+    "dark": {
+      "value": "rgb(88, 172, 28)"
+    }
+  },
+  "celery-1100": {
+    "prop": "--spectrum-celery-1100",
+    "light": {
+      "value": "rgb(44, 92, 9)"
+    },
+    "dark": {
+      "value": "rgb(100, 190, 35)"
+    }
+  },
+  "celery-1200": {
+    "prop": "--spectrum-celery-1200",
+    "light": {
+      "value": "rgb(35, 75, 6)"
+    },
+    "dark": {
+      "value": "rgb(116, 213, 46)"
+    }
+  },
+  "celery-1300": {
+    "prop": "--spectrum-celery-1300",
+    "light": {
+      "value": "rgb(27, 60, 3)"
+    },
+    "dark": {
+      "value": "rgb(136, 234, 65)"
+    }
+  },
+  "celery-1400": {
+    "prop": "--spectrum-celery-1400",
+    "light": {
+      "value": "rgb(19, 46, 0)"
+    },
+    "dark": {
+      "value": "rgb(170, 251, 112)"
+    }
+  },
+  "celery-1500": {
+    "prop": "--spectrum-celery-1500",
+    "dark": {
+      "value": "rgb(222, 255, 198)"
+    },
+    "light": {
+      "value": "rgb(12, 33, 0)"
+    }
+  },
+  "celery-1600": {
+    "prop": "--spectrum-celery-1600",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    },
     "light": {
-      "value": "rgb(150, 238, 133)"
+      "value": "rgb(4, 15, 0)"
+    }
+  },
+  "celery-200": {
+    "prop": "--spectrum-celery-200",
+    "light": {
+      "value": "rgb(197, 255, 156)"
     },
     "dark": {
-      "value": "rgb(0, 94, 14)"
+      "value": "rgb(15, 38, 0)"
+    }
+  },
+  "celery-300": {
+    "prop": "--spectrum-celery-300",
+    "light": {
+      "value": "rgb(157, 247, 92)"
     },
-    "darkest": {
-      "value": "rgb(0, 77, 12)"
+    "dark": {
+      "value": "rgb(21, 51, 1)"
     }
   },
   "celery-400": {
     "prop": "--spectrum-celery-400",
     "light": {
-      "value": "rgb(114, 224, 106)"
+      "value": "rgb(129, 228, 58)"
     },
     "dark": {
-      "value": "rgb(0, 109, 15)"
-    },
-    "darkest": {
-      "value": "rgb(0, 95, 15)"
+      "value": "rgb(31, 67, 4)"
     }
   },
   "celery-500": {
     "prop": "--spectrum-celery-500",
     "light": {
-      "value": "rgb(78, 207, 80)"
+      "value": "rgb(110, 206, 42)"
     },
     "dark": {
-      "value": "rgb(0, 127, 15)"
-    },
-    "darkest": {
-      "value": "rgb(0, 113, 15)"
+      "value": "rgb(41, 86, 8)"
     }
   },
   "celery-600": {
     "prop": "--spectrum-celery-600",
     "light": {
-      "value": "rgb(39, 187, 54)"
+      "value": "rgb(93, 180, 31)"
     },
     "dark": {
-      "value": "rgb(0, 145, 18)"
-    },
-    "darkest": {
-      "value": "rgb(0, 132, 15)"
+      "value": "rgb(50, 105, 11)"
     }
   },
   "celery-700": {
     "prop": "--spectrum-celery-700",
     "light": {
-      "value": "rgb(7, 167, 33)"
+      "value": "rgb(82, 161, 25)"
     },
     "dark": {
-      "value": "rgb(4, 165, 30)"
-    },
-    "darkest": {
-      "value": "rgb(0, 151, 20)"
+      "value": "rgb(60, 122, 15)"
     }
   },
   "celery-800": {
     "prop": "--spectrum-celery-800",
     "light": {
-      "value": "rgb(0, 145, 18)"
+      "value": "rgb(72, 144, 20)"
     },
     "dark": {
-      "value": "rgb(34, 184, 51)"
-    },
-    "darkest": {
-      "value": "rgb(13, 171, 37)"
+      "value": "rgb(66, 134, 18)"
     }
   },
   "celery-900": {
     "prop": "--spectrum-celery-900",
     "light": {
-      "value": "rgb(0, 124, 15)"
+      "value": "rgb(64, 129, 17)"
     },
     "dark": {
-      "value": "rgb(68, 202, 73)"
-    },
-    "darkest": {
-      "value": "rgb(45, 191, 58)"
+      "value": "rgb(78, 154, 23)"
     }
   },
   "celery-background-color-default": {
     "prop": "--spectrum-celery-background-color-default",
-    "ref": "var(--spectrum-celery-800)",
+    "ref": "var(--spectrum-celery-900)",
     "light": {
-      "value": "rgb(39, 187, 54)"
+      "value": "rgb(93, 180, 31)"
     },
     "dark": {
-      "value": "rgb(34, 184, 51)"
+      "value": "rgb(78, 154, 23)"
+    }
+  },
+  "celery-subtle-background-color-default": {
+    "prop": "--spectrum-celery-subtle-background-color-default",
+    "ref": "var(--spectrum-celery-300)",
+    "light": {
+      "value": "rgb(197, 255, 156)"
     },
-    "darkest": {
-      "value": "rgb(13, 171, 37)"
+    "dark": {
+      "value": "rgb(21, 51, 1)"
     }
   },
   "celery-visual-color": {
     "prop": "--spectrum-celery-visual-color",
     "ref": "var(--spectrum-celery-800)",
     "light": {
-      "value": "rgb(7, 167, 33)"
+      "value": "rgb(82, 161, 25)"
     },
     "dark": {
-      "value": "rgb(34, 184, 51)"
-    },
-    "darkest": {
-      "value": "rgb(13, 171, 37)"
+      "value": "rgb(66, 134, 18)"
     }
   },
   "character-count-to-field-quiet-extra-large": {
@@ -1641,220 +1948,248 @@
   "chartreuse-100": {
     "prop": "--spectrum-chartreuse-100",
     "light": {
-      "value": "rgb(219, 252, 110)"
+      "value": "rgb(246, 251, 222)"
     },
     "dark": {
-      "value": "rgb(48, 64, 0)"
-    },
-    "darkest": {
-      "value": "rgb(32, 43, 0)"
+      "value": "rgb(23, 28, 0)"
     }
   },
   "chartreuse-1000": {
     "prop": "--spectrum-chartreuse-1000",
     "light": {
-      "value": "rgb(72, 96, 0)"
+      "value": "rgb(86, 103, 0)"
     },
     "dark": {
-      "value": "rgb(166, 211, 18)"
-    },
-    "darkest": {
-      "value": "rgb(154, 198, 11)"
+      "value": "rgb(136, 164, 0)"
     }
   },
   "chartreuse-1100": {
     "prop": "--spectrum-chartreuse-1100",
     "light": {
-      "value": "rgb(58, 77, 0)"
+      "value": "rgb(73, 87, 0)"
     },
     "dark": {
-      "value": "rgb(184, 229, 37)"
-    },
-    "darkest": {
-      "value": "rgb(170, 216, 22)"
+      "value": "rgb(151, 181, 0)"
     }
   },
   "chartreuse-1200": {
     "prop": "--spectrum-chartreuse-1200",
     "light": {
-      "value": "rgb(44, 59, 0)"
+      "value": "rgb(60, 71, 0)"
     },
     "dark": {
-      "value": "rgb(205, 245, 71)"
-    },
-    "darkest": {
-      "value": "rgb(187, 232, 41)"
+      "value": "rgb(169, 203, 0)"
     }
   },
   "chartreuse-1300": {
     "prop": "--spectrum-chartreuse-1300",
     "light": {
-      "value": "rgb(33, 44, 0)"
+      "value": "rgb(47, 57, 0)"
     },
     "dark": {
-      "value": "rgb(231, 254, 154)"
-    },
-    "darkest": {
-      "value": "rgb(205, 246, 72)"
+      "value": "rgb(187, 225, 0)"
     }
   },
   "chartreuse-1400": {
     "prop": "--spectrum-chartreuse-1400",
     "light": {
-      "value": "rgb(24, 31, 0)"
+      "value": "rgb(35, 43, 0)"
+    },
+    "dark": {
+      "value": "rgb(219, 240, 117)"
+    }
+  },
+  "chartreuse-1500": {
+    "prop": "--spectrum-chartreuse-1500",
+    "dark": {
+      "value": "rgb(242, 249, 206)"
     },
+    "light": {
+      "value": "rgb(25, 30, 0)"
+    }
+  },
+  "chartreuse-1600": {
+    "prop": "--spectrum-chartreuse-1600",
     "dark": {
       "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(225, 253, 132)"
+    "light": {
+      "value": "rgb(11, 14, 0)"
     }
   },
   "chartreuse-200": {
     "prop": "--spectrum-chartreuse-200",
     "light": {
-      "value": "rgb(203, 244, 67)"
+      "value": "rgb(234, 246, 173)"
     },
     "dark": {
-      "value": "rgb(55, 74, 0)"
-    },
-    "darkest": {
-      "value": "rgb(42, 56, 0)"
+      "value": "rgb(30, 36, 0)"
     }
   },
   "chartreuse-300": {
     "prop": "--spectrum-chartreuse-300",
     "light": {
-      "value": "rgb(188, 233, 42)"
+      "value": "rgb(208, 236, 70)"
     },
     "dark": {
-      "value": "rgb(65, 87, 0)"
-    },
-    "darkest": {
-      "value": "rgb(54, 72, 0)"
+      "value": "rgb(39, 47, 0)"
     }
   },
   "chartreuse-400": {
     "prop": "--spectrum-chartreuse-400",
     "light": {
-      "value": "rgb(170, 216, 22)"
+      "value": "rgb(182, 219, 0)"
     },
     "dark": {
-      "value": "rgb(76, 102, 0)"
-    },
-    "darkest": {
-      "value": "rgb(66, 88, 0)"
+      "value": "rgb(53, 63, 0)"
     }
   },
   "chartreuse-500": {
     "prop": "--spectrum-chartreuse-500",
     "light": {
-      "value": "rgb(152, 197, 10)"
+      "value": "rgb(163, 196, 0)"
     },
     "dark": {
-      "value": "rgb(89, 118, 0)"
-    },
-    "darkest": {
-      "value": "rgb(79, 105, 0)"
+      "value": "rgb(68, 82, 0)"
     }
   },
   "chartreuse-600": {
     "prop": "--spectrum-chartreuse-600",
     "light": {
-      "value": "rgb(135, 177, 3)"
+      "value": "rgb(143, 172, 0)"
     },
     "dark": {
-      "value": "rgb(102, 136, 0)"
-    },
-    "darkest": {
-      "value": "rgb(93, 123, 0)"
+      "value": "rgb(83, 100, 0)"
     }
   },
   "chartreuse-700": {
     "prop": "--spectrum-chartreuse-700",
     "light": {
-      "value": "rgb(118, 156, 0)"
+      "value": "rgb(128, 153, 0)"
     },
     "dark": {
-      "value": "rgb(117, 154, 0)"
-    },
-    "darkest": {
-      "value": "rgb(107, 142, 0)"
+      "value": "rgb(97, 116, 0)"
     }
   },
   "chartreuse-800": {
     "prop": "--spectrum-chartreuse-800",
     "light": {
-      "value": "rgb(103, 136, 0)"
+      "value": "rgb(114, 137, 0)"
     },
     "dark": {
-      "value": "rgb(132, 173, 1)"
-    },
-    "darkest": {
-      "value": "rgb(122, 161, 0)"
+      "value": "rgb(106, 127, 0)"
     }
   },
   "chartreuse-900": {
     "prop": "--spectrum-chartreuse-900",
     "light": {
-      "value": "rgb(87, 116, 0)"
+      "value": "rgb(102, 122, 0)"
     },
     "dark": {
-      "value": "rgb(148, 192, 8)"
-    },
-    "darkest": {
-      "value": "rgb(138, 180, 3)"
+      "value": "rgb(122, 147, 0)"
     }
   },
   "chartreuse-background-color-default": {
     "prop": "--spectrum-chartreuse-background-color-default",
-    "ref": "var(--spectrum-chartreuse-900)",
+    "ref": "var(--spectrum-chartreuse-1000)",
     "light": {
-      "value": "rgb(152, 197, 10)"
+      "value": "rgb(163, 196, 0)"
     },
     "dark": {
-      "value": "rgb(148, 192, 8)"
+      "value": "rgb(136, 164, 0)"
+    }
+  },
+  "chartreuse-subtle-background-color-default": {
+    "prop": "--spectrum-chartreuse-subtle-background-color-default",
+    "ref": "var(--spectrum-chartreuse-300)",
+    "light": {
+      "value": "rgb(234, 246, 173)"
     },
-    "darkest": {
-      "value": "rgb(138, 180, 3)"
+    "dark": {
+      "value": "rgb(39, 47, 0)"
     }
   },
   "chartreuse-visual-color": {
     "prop": "--spectrum-chartreuse-visual-color",
     "ref": "var(--spectrum-chartreuse-900)",
     "light": {
-      "value": "rgb(135, 177, 3)"
+      "value": "rgb(143, 172, 0)"
     },
     "dark": {
-      "value": "rgb(148, 192, 8)"
-    },
-    "darkest": {
-      "value": "rgb(138, 180, 3)"
+      "value": "rgb(122, 147, 0)"
     }
   },
   "checkbox-control-size-extra-large": {
-    "prop": "--spectrum-checkbox-control-size-extra-large"
+    "prop": "--spectrum-checkbox-control-size-extra-large",
+    "desktop": {
+      "value": "18px"
+    },
+    "mobile": {
+      "value": "22px"
+    }
   },
   "checkbox-control-size-large": {
-    "prop": "--spectrum-checkbox-control-size-large"
+    "prop": "--spectrum-checkbox-control-size-large",
+    "desktop": {
+      "value": "16px"
+    },
+    "mobile": {
+      "value": "20px"
+    }
   },
   "checkbox-control-size-medium": {
-    "prop": "--spectrum-checkbox-control-size-medium"
+    "prop": "--spectrum-checkbox-control-size-medium",
+    "desktop": {
+      "value": "14px"
+    },
+    "mobile": {
+      "value": "18px"
+    }
   },
   "checkbox-control-size-small": {
-    "prop": "--spectrum-checkbox-control-size-small"
+    "prop": "--spectrum-checkbox-control-size-small",
+    "desktop": {
+      "value": "12px"
+    },
+    "mobile": {
+      "value": "16px"
+    }
   },
   "checkbox-top-to-control-extra-large": {
-    "prop": "--spectrum-checkbox-top-to-control-extra-large"
+    "prop": "--spectrum-checkbox-top-to-control-extra-large",
+    "desktop": {
+      "value": "15px"
+    },
+    "mobile": {
+      "value": "19px"
+    }
   },
   "checkbox-top-to-control-large": {
-    "prop": "--spectrum-checkbox-top-to-control-large"
+    "prop": "--spectrum-checkbox-top-to-control-large",
+    "desktop": {
+      "value": "12px"
+    },
+    "mobile": {
+      "value": "15px"
+    }
   },
   "checkbox-top-to-control-medium": {
-    "prop": "--spectrum-checkbox-top-to-control-medium"
+    "prop": "--spectrum-checkbox-top-to-control-medium",
+    "desktop": {
+      "value": "9px"
+    },
+    "mobile": {
+      "value": "11px"
+    }
   },
   "checkbox-top-to-control-small": {
-    "prop": "--spectrum-checkbox-top-to-control-small"
+    "prop": "--spectrum-checkbox-top-to-control-small",
+    "desktop": {
+      "value": "6px"
+    },
+    "mobile": {
+      "value": "7px"
+    }
   },
   "checkmark-icon-size-100": {
     "prop": "--spectrum-checkmark-icon-size-100",
@@ -2000,33 +2335,207 @@
       "value": "12px"
     }
   },
-  "cjk-font-family": {
-    "prop": "--spectrum-cjk-font-family",
-    "value": "Adobe Clean Han"
-  },
-  "cjk-letter-spacing": {
-    "prop": "--spectrum-cjk-letter-spacing",
-    "value": "0.05em"
-  },
-  "cjk-line-height-100": {
-    "prop": "--spectrum-cjk-line-height-100",
-    "value": "1.5"
-  },
-  "cjk-line-height-200": {
-    "prop": "--spectrum-cjk-line-height-200",
-    "value": "1.7"
+  "cinnamon-100": {
+    "prop": "--spectrum-cinnamon-100",
+    "dark": {
+      "value": "rgb(48, 17, 4)"
+    },
+    "light": {
+      "value": "rgb(253, 247, 243)"
+    }
   },
-  "coach-mark-body-size": {
-    "prop": "--spectrum-coach-mark-body-size",
-    "ref": "var(--spectrum-body-size-xs)",
-    "desktop": {
-      "value": "14px"
+  "cinnamon-1000": {
+    "prop": "--spectrum-cinnamon-1000",
+    "dark": {
+      "value": "rgb(206, 136, 99)"
     },
-    "mobile": {
-      "value": "15px"
+    "light": {
+      "value": "rgb(147, 77, 43)"
     }
   },
-  "coach-mark-edge-to-content": {
+  "cinnamon-1100": {
+    "prop": "--spectrum-cinnamon-1100",
+    "dark": {
+      "value": "rgb(220, 154, 118)"
+    },
+    "light": {
+      "value": "rgb(128, 62, 32)"
+    }
+  },
+  "cinnamon-1200": {
+    "prop": "--spectrum-cinnamon-1200",
+    "dark": {
+      "value": "rgb(232, 179, 149)"
+    },
+    "light": {
+      "value": "rgb(110, 48, 21)"
+    }
+  },
+  "cinnamon-1300": {
+    "prop": "--spectrum-cinnamon-1300",
+    "dark": {
+      "value": "rgb(239, 203, 183)"
+    },
+    "light": {
+      "value": "rgb(92, 35, 11)"
+    }
+  },
+  "cinnamon-1400": {
+    "prop": "--spectrum-cinnamon-1400",
+    "dark": {
+      "value": "rgb(246, 225, 214)"
+    },
+    "light": {
+      "value": "rgb(72, 25, 6)"
+    }
+  },
+  "cinnamon-1500": {
+    "prop": "--spectrum-cinnamon-1500",
+    "dark": {
+      "value": "rgb(252, 244, 239)"
+    },
+    "light": {
+      "value": "rgb(52, 18, 4)"
+    }
+  },
+  "cinnamon-1600": {
+    "prop": "--spectrum-cinnamon-1600",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "light": {
+      "value": "rgb(24, 8, 2)"
+    }
+  },
+  "cinnamon-200": {
+    "prop": "--spectrum-cinnamon-200",
+    "dark": {
+      "value": "rgb(59, 21, 5)"
+    },
+    "light": {
+      "value": "rgb(249, 236, 229)"
+    }
+  },
+  "cinnamon-300": {
+    "prop": "--spectrum-cinnamon-300",
+    "dark": {
+      "value": "rgb(79, 28, 7)"
+    },
+    "light": {
+      "value": "rgb(244, 218, 203)"
+    }
+  },
+  "cinnamon-400": {
+    "prop": "--spectrum-cinnamon-400",
+    "dark": {
+      "value": "rgb(100, 41, 15)"
+    },
+    "light": {
+      "value": "rgb(237, 196, 172)"
+    }
+  },
+  "cinnamon-500": {
+    "prop": "--spectrum-cinnamon-500",
+    "dark": {
+      "value": "rgb(122, 57, 28)"
+    },
+    "light": {
+      "value": "rgb(229, 170, 136)"
+    }
+  },
+  "cinnamon-600": {
+    "prop": "--spectrum-cinnamon-600",
+    "dark": {
+      "value": "rgb(143, 74, 40)"
+    },
+    "light": {
+      "value": "rgb(212, 145, 108)"
+    }
+  },
+  "cinnamon-700": {
+    "prop": "--spectrum-cinnamon-700",
+    "dark": {
+      "value": "rgb(163, 88, 52)"
+    },
+    "light": {
+      "value": "rgb(198, 126, 88)"
+    }
+  },
+  "cinnamon-800": {
+    "prop": "--spectrum-cinnamon-800",
+    "dark": {
+      "value": "rgb(176, 98, 59)"
+    },
+    "light": {
+      "value": "rgb(184, 109, 70)"
+    }
+  },
+  "cinnamon-900": {
+    "prop": "--spectrum-cinnamon-900",
+    "dark": {
+      "value": "rgb(192, 119, 80)"
+    },
+    "light": {
+      "value": "rgb(170, 94, 56)"
+    }
+  },
+  "cinnamon-background-color-default": {
+    "prop": "--spectrum-cinnamon-background-color-default",
+    "ref": "var(--spectrum-cinnamon-800)",
+    "light": {
+      "value": "rgb(170, 94, 56)"
+    },
+    "dark": {
+      "value": "rgb(176, 98, 59)"
+    }
+  },
+  "cinnamon-subtle-background-color-default": {
+    "prop": "--spectrum-cinnamon-subtle-background-color-default",
+    "ref": "var(--spectrum-cinnamon-300)",
+    "light": {
+      "value": "rgb(249, 236, 229)"
+    },
+    "dark": {
+      "value": "rgb(79, 28, 7)"
+    }
+  },
+  "cinnamon-visual-color": {
+    "prop": "--spectrum-cinnamon-visual-color",
+    "ref": "var(--spectrum-cinnamon-900)",
+    "light": {
+      "value": "rgb(184, 109, 70)"
+    },
+    "dark": {
+      "value": "rgb(192, 119, 80)"
+    }
+  },
+  "cjk-font-family": {
+    "prop": "--spectrum-cjk-font-family",
+    "value": "Adobe Clean Han"
+  },
+  "cjk-letter-spacing": {
+    "prop": "--spectrum-cjk-letter-spacing",
+    "value": "0.05em"
+  },
+  "cjk-line-height-100": {
+    "prop": "--spectrum-cjk-line-height-100",
+    "value": "1.5"
+  },
+  "cjk-line-height-200": {
+    "prop": "--spectrum-cjk-line-height-200",
+    "value": "1.7"
+  },
+  "coach-mark-body-size": {
+    "prop": "--spectrum-coach-mark-body-size",
+    "ref": "var(--spectrum-body-size-xs)",
+    "desktop": {
+      "value": "14px"
+    },
+    "mobile": {
+      "value": "15px"
+    }
+  },
+  "coach-mark-edge-to-content": {
     "prop": "--spectrum-coach-mark-edge-to-content",
     "desktop": {
       "ref": "var(--spectrum-spacing-400)",
@@ -2087,13 +2596,10 @@
     "prop": "--spectrum-coach-mark-pagination-color",
     "ref": "var(--spectrum-gray-600)",
     "light": {
-      "value": "rgb(109, 109, 109)"
+      "value": "rgb(113, 113, 113)"
     },
     "dark": {
-      "value": "rgb(178, 178, 178)"
-    },
-    "darkest": {
-      "value": "rgb(176, 176, 176)"
+      "value": "rgb(138, 138, 138)"
     }
   },
   "coach-mark-pagination-text-to-bottom-edge": {
@@ -2178,13 +2684,10 @@
     "prop": "--spectrum-code-color",
     "ref": "var(--spectrum-gray-800)",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(235, 235, 235)"
-    },
-    "darkest": {
-      "value": "rgb(235, 235, 235)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "code-emphasized-font-style": {
@@ -2290,13 +2793,10 @@
     "prop": "--spectrum-color-area-border-color",
     "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "color-area-border-opacity": {
@@ -2305,19 +2805,13 @@
   },
   "color-area-border-rounding": {
     "prop": "--spectrum-color-area-border-rounding",
-    "ref": "var(--spectrum-corner-radius-100)",
-    "spectrum": {},
-    "express": {}
+    "ref": "var(--spectrum-corner-radius-medium-size-small)",
+    "value": "7px"
   },
   "color-area-border-width": {
     "prop": "--spectrum-color-area-border-width",
     "ref": "var(--spectrum-border-width-100)",
-    "spectrum": {
-      "value": "1px"
-    },
-    "express": {
-      "value": "2px"
-    }
+    "value": "1px"
   },
   "color-area-height": {
     "prop": "--spectrum-color-area-height",
@@ -2377,13 +2871,10 @@
     "prop": "--spectrum-color-handle-drop-shadow-color",
     "ref": "var(--spectrum-drop-shadow-color)",
     "light": {
-      "value": "rgba(0, 0, 0, 0.15)"
+      "value": "rgba(0, 0, 0, 0.12)"
     },
     "dark": {
-      "value": "rgba(0, 0, 0, 0.5)"
-    },
-    "darkest": {
-      "value": "rgba(0, 0, 0, 0.8)"
+      "value": "rgba(0, 0, 0, 0.36)"
     }
   },
   "color-handle-drop-shadow-x": {
@@ -2450,7 +2941,12 @@
   "color-loupe-drop-shadow-color": {
     "prop": "--spectrum-color-loupe-drop-shadow-color",
     "ref": "var(--spectrum-transparent-black-300)",
-    "value": "rgba(0, 0, 0, 0.25)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    }
   },
   "color-loupe-drop-shadow-y": {
     "prop": "--spectrum-color-loupe-drop-shadow-y",
@@ -2463,7 +2959,12 @@
   "color-loupe-inner-border": {
     "prop": "--spectrum-color-loupe-inner-border",
     "ref": "var(--spectrum-transparent-black-200)",
-    "value": "rgba(0, 0, 0, 0.1)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.12)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.12)"
+    }
   },
   "color-loupe-inner-border-width": {
     "prop": "--spectrum-color-loupe-inner-border-width",
@@ -2472,7 +2973,12 @@
   "color-loupe-outer-border": {
     "prop": "--spectrum-color-loupe-outer-border",
     "ref": "var(--spectrum-white)",
-    "value": "rgb(255, 255, 255)"
+    "light": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    }
   },
   "color-loupe-outer-border-width": {
     "prop": "--spectrum-color-loupe-outer-border-width",
@@ -2487,13 +2993,10 @@
     "prop": "--spectrum-color-slider-border-color",
     "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "color-slider-border-opacity": {
@@ -2502,7 +3005,8 @@
   },
   "color-slider-border-rounding": {
     "prop": "--spectrum-color-slider-border-rounding",
-    "value": "4px"
+    "ref": "var(--spectrum-corner-radius-medium-size-small)",
+    "value": "7px"
   },
   "color-slider-border-width": {
     "prop": "--spectrum-color-slider-border-width",
@@ -2656,13 +3160,13 @@
       "value": "15px"
     },
     "mobile": {
-      "value": "19px"
+      "value": "18px"
     }
   },
   "component-edge-to-text-300": {
     "prop": "--spectrum-component-edge-to-text-300",
     "desktop": {
-      "value": "18px"
+      "value": "17px"
     },
     "mobile": {
       "value": "22px"
@@ -2674,16 +3178,16 @@
       "value": "8px"
     },
     "mobile": {
-      "value": "10px"
+      "value": "11px"
     }
   },
   "component-edge-to-text-75": {
     "prop": "--spectrum-component-edge-to-text-75",
     "desktop": {
-      "value": "9px"
+      "value": "10px"
     },
     "mobile": {
-      "value": "11px"
+      "value": "13px"
     }
   },
   "component-edge-to-visual-100": {
@@ -2701,61 +3205,61 @@
       "value": "13px"
     },
     "mobile": {
-      "value": "16px"
+      "value": "15px"
     }
   },
   "component-edge-to-visual-300": {
     "prop": "--spectrum-component-edge-to-visual-300",
     "desktop": {
-      "value": "15px"
+      "value": "14px"
     },
     "mobile": {
-      "value": "19px"
+      "value": "20px"
     }
   },
   "component-edge-to-visual-50": {
     "prop": "--spectrum-component-edge-to-visual-50",
     "desktop": {
-      "value": "6px"
+      "value": "7px"
     },
     "mobile": {
-      "value": "7px"
+      "value": "9px"
     }
   },
   "component-edge-to-visual-75": {
     "prop": "--spectrum-component-edge-to-visual-75",
     "desktop": {
-      "value": "7px"
+      "value": "8px"
     },
     "mobile": {
-      "value": "9px"
+      "value": "11px"
     }
   },
   "component-edge-to-visual-only-100": {
     "prop": "--spectrum-component-edge-to-visual-only-100",
     "desktop": {
-      "value": "7px"
+      "value": "6px"
     },
     "mobile": {
-      "value": "9px"
+      "value": "8px"
     }
   },
   "component-edge-to-visual-only-200": {
     "prop": "--spectrum-component-edge-to-visual-only-200",
     "desktop": {
-      "value": "10px"
+      "value": "9px"
     },
     "mobile": {
-      "value": "13px"
+      "value": "11px"
     }
   },
   "component-edge-to-visual-only-300": {
     "prop": "--spectrum-component-edge-to-visual-only-300",
     "desktop": {
-      "value": "13px"
+      "value": "11px"
     },
     "mobile": {
-      "value": "16px"
+      "value": "15px"
     }
   },
   "component-edge-to-visual-only-50": {
@@ -2764,7 +3268,7 @@
       "value": "3px"
     },
     "mobile": {
-      "value": "4px"
+      "value": "5px"
     }
   },
   "component-edge-to-visual-only-75": {
@@ -2773,7 +3277,7 @@
       "value": "4px"
     },
     "mobile": {
-      "value": "5px"
+      "value": "6px"
     }
   },
   "component-height-100": {
@@ -2854,13 +3358,13 @@
       "value": "20px"
     },
     "mobile": {
-      "value": "25px"
+      "value": "24px"
     }
   },
   "component-pill-edge-to-text-300": {
     "prop": "--spectrum-component-pill-edge-to-text-300",
     "desktop": {
-      "value": "24px"
+      "value": "23px"
     },
     "mobile": {
       "value": "30px"
@@ -2869,10 +3373,10 @@
   "component-pill-edge-to-text-75": {
     "prop": "--spectrum-component-pill-edge-to-text-75",
     "desktop": {
-      "value": "12px"
+      "value": "13px"
     },
     "mobile": {
-      "value": "15px"
+      "value": "17px"
     }
   },
   "component-pill-edge-to-visual-100": {
@@ -2890,52 +3394,52 @@
       "value": "18px"
     },
     "mobile": {
-      "value": "22px"
+      "value": "21px"
     }
   },
   "component-pill-edge-to-visual-300": {
     "prop": "--spectrum-component-pill-edge-to-visual-300",
     "desktop": {
-      "value": "21px"
+      "value": "20px"
     },
     "mobile": {
-      "value": "27px"
+      "value": "28px"
     }
   },
   "component-pill-edge-to-visual-75": {
     "prop": "--spectrum-component-pill-edge-to-visual-75",
     "desktop": {
-      "value": "10px"
+      "value": "11px"
     },
     "mobile": {
-      "value": "13px"
+      "value": "15px"
     }
   },
   "component-pill-edge-to-visual-only-100": {
     "prop": "--spectrum-component-pill-edge-to-visual-only-100",
     "desktop": {
-      "value": "7px"
+      "value": "6px"
     },
     "mobile": {
-      "value": "9px"
+      "value": "8px"
     }
   },
   "component-pill-edge-to-visual-only-200": {
     "prop": "--spectrum-component-pill-edge-to-visual-only-200",
     "desktop": {
-      "value": "10px"
+      "value": "9px"
     },
     "mobile": {
-      "value": "13px"
+      "value": "11px"
     }
   },
   "component-pill-edge-to-visual-only-300": {
     "prop": "--spectrum-component-pill-edge-to-visual-only-300",
     "desktop": {
-      "value": "13px"
+      "value": "11px"
     },
     "mobile": {
-      "value": "16px"
+      "value": "15px"
     }
   },
   "component-pill-edge-to-visual-only-75": {
@@ -2944,7 +3448,7 @@
       "value": "4px"
     },
     "mobile": {
-      "value": "5px"
+      "value": "6px"
     }
   },
   "component-to-menu-extra-large": {
@@ -3031,28 +3535,28 @@
   "component-top-to-workflow-icon-100": {
     "prop": "--spectrum-component-top-to-workflow-icon-100",
     "desktop": {
-      "value": "7px"
+      "value": "6px"
     },
     "mobile": {
-      "value": "9px"
+      "value": "8px"
     }
   },
   "component-top-to-workflow-icon-200": {
     "prop": "--spectrum-component-top-to-workflow-icon-200",
     "desktop": {
-      "value": "10px"
+      "value": "9px"
     },
     "mobile": {
-      "value": "13px"
+      "value": "11px"
     }
   },
   "component-top-to-workflow-icon-300": {
     "prop": "--spectrum-component-top-to-workflow-icon-300",
     "desktop": {
-      "value": "13px"
+      "value": "11px"
     },
     "mobile": {
-      "value": "16px"
+      "value": "15px"
     }
   },
   "component-top-to-workflow-icon-50": {
@@ -3061,7 +3565,7 @@
       "value": "3px"
     },
     "mobile": {
-      "value": "4px"
+      "value": "5px"
     }
   },
   "component-top-to-workflow-icon-75": {
@@ -3070,7 +3574,7 @@
       "value": "4px"
     },
     "mobile": {
-      "value": "5px"
+      "value": "6px"
     }
   },
   "contextual-help-body-size": {
@@ -3097,19 +3601,126 @@
       "value": "17px"
     }
   },
+  "corner-radius-0": {
+    "prop": "--spectrum-corner-radius-0",
+    "value": "0px"
+  },
   "corner-radius-100": {
-    "prop": "--spectrum-corner-radius-100"
+    "prop": "--spectrum-corner-radius-100",
+    "value": "8px"
+  },
+  "corner-radius-1000": {
+    "prop": "--spectrum-corner-radius-1000",
+    "value": "0.5"
   },
   "corner-radius-200": {
-    "prop": "--spectrum-corner-radius-200"
+    "prop": "--spectrum-corner-radius-200",
+    "value": "10px"
+  },
+  "corner-radius-300": {
+    "prop": "--spectrum-corner-radius-300",
+    "value": "6px"
+  },
+  "corner-radius-400": {
+    "prop": "--spectrum-corner-radius-400",
+    "value": "7px"
+  },
+  "corner-radius-500": {
+    "prop": "--spectrum-corner-radius-500",
+    "value": "8px"
+  },
+  "corner-radius-600": {
+    "prop": "--spectrum-corner-radius-600",
+    "value": "9px"
+  },
+  "corner-radius-700": {
+    "prop": "--spectrum-corner-radius-700",
+    "value": "10px"
   },
   "corner-radius-75": {
     "prop": "--spectrum-corner-radius-75",
-    "spectrum": {
-      "value": "2px"
-    }
+    "value": "4px"
   },
-  "corner-triangle-icon-size-100": {
+  "corner-radius-800": {
+    "prop": "--spectrum-corner-radius-800",
+    "value": "16px"
+  },
+  "corner-radius-extra-large-default": {
+    "prop": "--spectrum-corner-radius-extra-large-default",
+    "ref": "var(--spectrum-corner-radius-800)",
+    "value": "16px"
+  },
+  "corner-radius-full": {
+    "prop": "--spectrum-corner-radius-full",
+    "ref": "var(--spectrum-corner-radius-1000)",
+    "value": "0.5"
+  },
+  "corner-radius-large-default": {
+    "prop": "--spectrum-corner-radius-large-default",
+    "ref": "var(--spectrum-corner-radius-700)",
+    "value": "10px"
+  },
+  "corner-radius-medium-default": {
+    "prop": "--spectrum-corner-radius-medium-default",
+    "ref": "var(--spectrum-corner-radius-500)",
+    "value": "8px"
+  },
+  "corner-radius-medium-size-extra-large": {
+    "prop": "--spectrum-corner-radius-medium-size-extra-large",
+    "ref": "var(--spectrum-corner-radius-700)",
+    "value": "10px"
+  },
+  "corner-radius-medium-size-extra-small": {
+    "prop": "--spectrum-corner-radius-medium-size-extra-small",
+    "ref": "var(--spectrum-corner-radius-300)",
+    "value": "6px"
+  },
+  "corner-radius-medium-size-large": {
+    "prop": "--spectrum-corner-radius-medium-size-large",
+    "ref": "var(--spectrum-corner-radius-600)",
+    "value": "9px"
+  },
+  "corner-radius-medium-size-medium": {
+    "prop": "--spectrum-corner-radius-medium-size-medium",
+    "ref": "var(--spectrum-corner-radius-500)",
+    "value": "8px"
+  },
+  "corner-radius-medium-size-small": {
+    "prop": "--spectrum-corner-radius-medium-size-small",
+    "ref": "var(--spectrum-corner-radius-400)",
+    "value": "7px"
+  },
+  "corner-radius-none": {
+    "prop": "--spectrum-corner-radius-none",
+    "ref": "var(--spectrum-corner-radius-0)",
+    "value": "0px"
+  },
+  "corner-radius-small-default": {
+    "prop": "--spectrum-corner-radius-small-default",
+    "ref": "var(--spectrum-corner-radius-100)",
+    "value": "8px"
+  },
+  "corner-radius-small-size-extra-large": {
+    "prop": "--spectrum-corner-radius-small-size-extra-large",
+    "ref": "var(--spectrum-corner-radius-300)",
+    "value": "6px"
+  },
+  "corner-radius-small-size-large": {
+    "prop": "--spectrum-corner-radius-small-size-large",
+    "ref": "var(--spectrum-corner-radius-200)",
+    "value": "10px"
+  },
+  "corner-radius-small-size-medium": {
+    "prop": "--spectrum-corner-radius-small-size-medium",
+    "ref": "var(--spectrum-corner-radius-100)",
+    "value": "8px"
+  },
+  "corner-radius-small-size-small": {
+    "prop": "--spectrum-corner-radius-small-size-small",
+    "ref": "var(--spectrum-corner-radius-75)",
+    "value": "4px"
+  },
+  "corner-triangle-icon-size-100": {
     "prop": "--spectrum-corner-triangle-icon-size-100",
     "desktop": {
       "value": "5px"
@@ -3211,195 +3822,175 @@
   "cyan-100": {
     "prop": "--spectrum-cyan-100",
     "light": {
-      "value": "rgb(197, 248, 255)"
+      "value": "rgb(238, 250, 254)"
     },
     "dark": {
-      "value": "rgb(0, 61, 98)"
-    },
-    "darkest": {
-      "value": "rgb(0, 41, 68)"
+      "value": "rgb(0, 29, 39)"
     }
   },
   "cyan-1000": {
     "prop": "--spectrum-cyan-1000",
     "light": {
-      "value": "rgb(0, 93, 137)"
+      "value": "rgb(4, 102, 145)"
     },
     "dark": {
-      "value": "rgb(84, 211, 241)"
-    },
-    "darkest": {
-      "value": "rgb(57, 199, 234)"
+      "value": "rgb(38, 159, 244)"
     }
   },
   "cyan-1100": {
     "prop": "--spectrum-cyan-1100",
     "light": {
-      "value": "rgb(0, 74, 115)"
+      "value": "rgb(0, 87, 121)"
     },
     "dark": {
-      "value": "rgb(127, 228, 249)"
-    },
-    "darkest": {
-      "value": "rgb(96, 216, 243)"
+      "value": "rgb(63, 177, 255)"
     }
   },
   "cyan-1200": {
     "prop": "--spectrum-cyan-1200",
     "light": {
-      "value": "rgb(0, 57, 93)"
+      "value": "rgb(0, 71, 98)"
     },
     "dark": {
-      "value": "rgb(167, 241, 255)"
-    },
-    "darkest": {
-      "value": "rgb(134, 230, 250)"
+      "value": "rgb(107, 199, 255)"
     }
   },
   "cyan-1300": {
     "prop": "--spectrum-cyan-1300",
     "light": {
-      "value": "rgb(0, 42, 70)"
+      "value": "rgb(0, 57, 78)"
     },
     "dark": {
-      "value": "rgb(215, 250, 255)"
-    },
-    "darkest": {
-      "value": "rgb(170, 242, 255)"
+      "value": "rgb(152, 219, 255)"
     }
   },
   "cyan-1400": {
     "prop": "--spectrum-cyan-1400",
     "light": {
-      "value": "rgb(0, 30, 51)"
+      "value": "rgb(0, 43, 59)"
+    },
+    "dark": {
+      "value": "rgb(195, 236, 252)"
+    }
+  },
+  "cyan-1500": {
+    "prop": "--spectrum-cyan-1500",
+    "dark": {
+      "value": "rgb(230, 248, 253)"
     },
+    "light": {
+      "value": "rgb(0, 31, 43)"
+    }
+  },
+  "cyan-1600": {
+    "prop": "--spectrum-cyan-1600",
     "dark": {
       "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(206, 249, 255)"
+    "light": {
+      "value": "rgb(0, 14, 20)"
     }
   },
   "cyan-200": {
     "prop": "--spectrum-cyan-200",
     "light": {
-      "value": "rgb(164, 240, 255)"
+      "value": "rgb(217, 244, 253)"
     },
     "dark": {
-      "value": "rgb(0, 71, 111)"
-    },
-    "darkest": {
-      "value": "rgb(0, 54, 88)"
+      "value": "rgb(0, 36, 49)"
     }
   },
   "cyan-300": {
     "prop": "--spectrum-cyan-300",
     "light": {
-      "value": "rgb(136, 231, 250)"
+      "value": "rgb(183, 231, 252)"
     },
     "dark": {
-      "value": "rgb(0, 85, 127)"
-    },
-    "darkest": {
-      "value": "rgb(0, 69, 108)"
+      "value": "rgb(0, 48, 65)"
     }
   },
   "cyan-400": {
     "prop": "--spectrum-cyan-400",
     "light": {
-      "value": "rgb(96, 216, 243)"
+      "value": "rgb(138, 213, 255)"
     },
     "dark": {
-      "value": "rgb(0, 100, 145)"
-    },
-    "darkest": {
-      "value": "rgb(0, 86, 128)"
+      "value": "rgb(0, 64, 88)"
     }
   },
   "cyan-500": {
     "prop": "--spectrum-cyan-500",
     "light": {
-      "value": "rgb(51, 197, 232)"
+      "value": "rgb(92, 192, 255)"
     },
     "dark": {
-      "value": "rgb(0, 116, 162)"
-    },
-    "darkest": {
-      "value": "rgb(0, 103, 147)"
+      "value": "rgb(0, 82, 113)"
     }
   },
   "cyan-600": {
     "prop": "--spectrum-cyan-600",
     "light": {
-      "value": "rgb(18, 176, 218)"
+      "value": "rgb(48, 167, 254)"
     },
     "dark": {
-      "value": "rgb(0, 134, 180)"
-    },
-    "darkest": {
-      "value": "rgb(0, 121, 167)"
+      "value": "rgb(3, 99, 140)"
     }
   },
   "cyan-700": {
     "prop": "--spectrum-cyan-700",
     "light": {
-      "value": "rgb(1, 156, 200)"
+      "value": "rgb(29, 149, 231)"
     },
     "dark": {
-      "value": "rgb(0, 153, 198)"
-    },
-    "darkest": {
-      "value": "rgb(0, 140, 186)"
+      "value": "rgb(8, 115, 168)"
     }
   },
   "cyan-800": {
     "prop": "--spectrum-cyan-800",
     "light": {
-      "value": "rgb(0, 134, 180)"
+      "value": "rgb(18, 134, 205)"
     },
     "dark": {
-      "value": "rgb(14, 173, 215)"
-    },
-    "darkest": {
-      "value": "rgb(4, 160, 205)"
+      "value": "rgb(13, 125, 186)"
     }
   },
   "cyan-900": {
     "prop": "--spectrum-cyan-900",
     "light": {
-      "value": "rgb(0, 113, 159)"
+      "value": "rgb(11, 120, 179)"
     },
     "dark": {
-      "value": "rgb(44, 193, 230)"
-    },
-    "darkest": {
-      "value": "rgb(23, 180, 221)"
+      "value": "rgb(24, 142, 220)"
     }
   },
   "cyan-background-color-default": {
     "prop": "--spectrum-cyan-background-color-default",
-    "ref": "var(--spectrum-cyan-700)",
+    "ref": "var(--spectrum-cyan-800)",
     "light": {
-      "value": "rgb(0, 113, 159)"
+      "value": "rgb(11, 120, 179)"
     },
     "dark": {
-      "value": "rgb(0, 153, 198)"
+      "value": "rgb(13, 125, 186)"
+    }
+  },
+  "cyan-subtle-background-color-default": {
+    "prop": "--spectrum-cyan-subtle-background-color-default",
+    "ref": "var(--spectrum-cyan-300)",
+    "light": {
+      "value": "rgb(217, 244, 253)"
     },
-    "darkest": {
-      "value": "rgb(0, 140, 186)"
+    "dark": {
+      "value": "rgb(0, 48, 65)"
     }
   },
   "cyan-visual-color": {
     "prop": "--spectrum-cyan-visual-color",
     "ref": "var(--spectrum-cyan-900)",
     "light": {
-      "value": "rgb(18, 176, 218)"
+      "value": "rgb(48, 167, 254)"
     },
     "dark": {
-      "value": "rgb(44, 193, 230)"
-    },
-    "darkest": {
-      "value": "rgb(23, 180, 221)"
+      "value": "rgb(24, 142, 220)"
     }
   },
   "dash-icon-size-100": {
@@ -3577,13 +4168,10 @@
     "prop": "--spectrum-detail-color",
     "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "detail-letter-spacing": {
@@ -3823,72 +4411,93 @@
   },
   "disabled-background-color": {
     "prop": "--spectrum-disabled-background-color",
-    "ref": "var(--spectrum-gray-200)",
+    "ref": "var(--spectrum-gray-100)",
     "light": {
-      "value": "rgb(230, 230, 230)"
+      "value": "rgb(233, 233, 233)"
     },
     "dark": {
-      "value": "rgb(63, 63, 63)"
-    },
-    "darkest": {
-      "value": "rgb(48, 48, 48)"
+      "value": "rgb(44, 44, 44)"
     }
   },
   "disabled-border-color": {
     "prop": "--spectrum-disabled-border-color",
     "ref": "var(--spectrum-gray-300)",
     "light": {
-      "value": "rgb(213, 213, 213)"
+      "value": "rgb(218, 218, 218)"
     },
     "dark": {
-      "value": "rgb(84, 84, 84)"
-    },
-    "darkest": {
-      "value": "rgb(75, 75, 75)"
+      "value": "rgb(57, 57, 57)"
     }
   },
   "disabled-content-color": {
     "prop": "--spectrum-disabled-content-color",
     "ref": "var(--spectrum-gray-400)",
     "light": {
-      "value": "rgb(177, 177, 177)"
+      "value": "rgb(198, 198, 198)"
     },
     "dark": {
-      "value": "rgb(112, 112, 112)"
-    },
-    "darkest": {
-      "value": "rgb(106, 106, 106)"
+      "value": "rgb(68, 68, 68)"
     }
   },
   "disabled-static-black-background-color": {
     "prop": "--spectrum-disabled-static-black-background-color",
-    "ref": "var(--spectrum-transparent-black-200)",
-    "value": "rgba(0, 0, 0, 0.1)"
+    "ref": "var(--spectrum-transparent-black-100)",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.09)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.09)"
+    }
   },
   "disabled-static-black-border-color": {
     "prop": "--spectrum-disabled-static-black-border-color",
     "ref": "var(--spectrum-transparent-black-300)",
-    "value": "rgba(0, 0, 0, 0.25)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    }
   },
   "disabled-static-black-content-color": {
     "prop": "--spectrum-disabled-static-black-content-color",
-    "ref": "var(--spectrum-transparent-black-500)",
-    "value": "rgba(0, 0, 0, 0.55)"
+    "ref": "var(--spectrum-transparent-black-400)",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.22)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.22)"
+    }
   },
   "disabled-static-white-background-color": {
     "prop": "--spectrum-disabled-static-white-background-color",
-    "ref": "var(--spectrum-transparent-white-200)",
-    "value": "rgba(255, 255, 255, 0.1)"
+    "ref": "var(--spectrum-transparent-white-100)",
+    "light": {
+      "value": "rgba(255, 255, 255, 0.11)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.11)"
+    }
   },
   "disabled-static-white-border-color": {
     "prop": "--spectrum-disabled-static-white-border-color",
     "ref": "var(--spectrum-transparent-white-300)",
-    "value": "rgba(255, 255, 255, 0.25)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.17)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.17)"
+    }
   },
   "disabled-static-white-content-color": {
     "prop": "--spectrum-disabled-static-white-content-color",
-    "ref": "var(--spectrum-transparent-white-500)",
-    "value": "rgba(255, 255, 255, 0.55)"
+    "ref": "var(--spectrum-transparent-white-400)",
+    "light": {
+      "value": "rgba(255, 255, 255, 0.21)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.21)"
+    }
   },
   "disclosure-indicator-top-to-disclosure-icon-extra-large": {
     "prop": "--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large",
@@ -3939,32 +4548,113 @@
     "value": "1px"
   },
   "drop-shadow-blur": {
-    "prop": "--spectrum-drop-shadow-blur"
+    "prop": "--spectrum-drop-shadow-blur",
+    "desktop": {
+      "value": "4px"
+    },
+    "mobile": {
+      "value": "6px"
+    }
   },
   "drop-shadow-color": {
     "prop": "--spectrum-drop-shadow-color",
+    "ref": "var(--spectrum-drop-shadow-color-100)",
     "light": {
-      "value": "rgba(0, 0, 0, 0.15)"
+      "value": "rgba(0, 0, 0, 0.12)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.36)"
+    }
+  },
+  "drop-shadow-color-100": {
+    "prop": "--spectrum-drop-shadow-color-100",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.12)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.36)"
+    }
+  },
+  "drop-shadow-color-200": {
+    "prop": "--spectrum-drop-shadow-color-200",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.16)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.48)"
+    }
+  },
+  "drop-shadow-color-300": {
+    "prop": "--spectrum-drop-shadow-color-300",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.2)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.6)"
+    }
+  },
+  "drop-shadow-dragged-color": {
+    "prop": "--spectrum-drop-shadow-dragged-color",
+    "ref": "var(--spectrum-drop-shadow-color-300)",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.2)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.6)"
+    }
+  },
+  "drop-shadow-elevated-color": {
+    "prop": "--spectrum-drop-shadow-elevated-color",
+    "ref": "var(--spectrum-drop-shadow-color-200)",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.16)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.48)"
+    }
+  },
+  "drop-shadow-emphasized-default-color": {
+    "prop": "--spectrum-drop-shadow-emphasized-default-color",
+    "ref": "var(--spectrum-drop-shadow-color-100)",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.12)"
     },
     "dark": {
-      "value": "rgba(0, 0, 0, 0.5)"
+      "value": "rgba(0, 0, 0, 0.36)"
+    }
+  },
+  "drop-shadow-emphasized-hover-color": {
+    "prop": "--spectrum-drop-shadow-emphasized-hover-color",
+    "ref": "var(--spectrum-drop-shadow-color-200)",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.16)"
     },
-    "darkest": {
-      "value": "rgba(0, 0, 0, 0.8)"
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.48)"
     }
   },
   "drop-shadow-x": {
     "prop": "--spectrum-drop-shadow-x",
-    "spectrum": {
-      "value": "0px"
-    }
+    "value": "0px"
   },
   "drop-shadow-y": {
-    "prop": "--spectrum-drop-shadow-y"
+    "prop": "--spectrum-drop-shadow-y",
+    "desktop": {
+      "value": "1px"
+    },
+    "mobile": {
+      "value": "2px"
+    }
   },
   "drop-zone-background-color": {
     "prop": "--spectrum-drop-zone-background-color",
-    "ref": "var(--spectrum-accent-color-900)"
+    "ref": "var(--spectrum-accent-color-900)",
+    "light": {
+      "value": "rgb(75, 117, 255)"
+    },
+    "dark": {
+      "value": "rgb(86, 129, 255)"
+    }
   },
   "drop-zone-background-color-opacity": {
     "prop": "--spectrum-drop-zone-background-color-opacity",
@@ -4564,7 +5254,12 @@
   "floating-action-button-drop-shadow-color": {
     "prop": "--spectrum-floating-action-button-drop-shadow-color",
     "ref": "var(--spectrum-transparent-black-300)",
-    "value": "rgba(0, 0, 0, 0.25)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    }
   },
   "floating-action-button-drop-shadow-y": {
     "prop": "--spectrum-floating-action-button-drop-shadow-y",
@@ -4573,19 +5268,21 @@
   "floating-action-button-shadow-color": {
     "prop": "--spectrum-floating-action-button-shadow-color",
     "ref": "var(--spectrum-floating-action-button-drop-shadow-color)",
-    "value": "rgba(0, 0, 0, 0.25)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    }
   },
   "focus-indicator-color": {
     "prop": "--spectrum-focus-indicator-color",
     "ref": "var(--spectrum-blue-800)",
     "light": {
-      "value": "rgb(20, 122, 243)"
+      "value": "rgb(75, 117, 255)"
     },
     "dark": {
-      "value": "rgb(84, 163, 246)"
-    },
-    "darkest": {
-      "value": "rgb(64, 150, 243)"
+      "value": "rgb(64, 105, 253)"
     }
   },
   "focus-indicator-gap": {
@@ -4734,547 +5431,496 @@
   "fuchsia-100": {
     "prop": "--spectrum-fuchsia-100",
     "light": {
-      "value": "rgb(255, 233, 252)"
+      "value": "rgb(254, 246, 255)"
     },
     "dark": {
-      "value": "rgb(107, 3, 106)"
-    },
-    "darkest": {
-      "value": "rgb(70, 14, 68)"
+      "value": "rgb(50, 0, 61)"
     }
   },
   "fuchsia-1000": {
     "prop": "--spectrum-fuchsia-1000",
     "light": {
-      "value": "rgb(157, 3, 158)"
+      "value": "rgb(156, 40, 175)"
     },
     "dark": {
-      "value": "rgb(250, 168, 245)"
-    },
-    "darkest": {
-      "value": "rgb(246, 149, 243)"
+      "value": "rgb(232, 91, 253)"
     }
   },
   "fuchsia-1100": {
     "prop": "--spectrum-fuchsia-1100",
     "light": {
-      "value": "rgb(128, 0, 129)"
+      "value": "rgb(135, 27, 154)"
     },
     "dark": {
-      "value": "rgb(254, 194, 248)"
-    },
-    "darkest": {
-      "value": "rgb(251, 175, 246)"
+      "value": "rgb(240, 122, 255)"
     }
   },
   "fuchsia-1200": {
     "prop": "--spectrum-fuchsia-1200",
     "light": {
-      "value": "rgb(100, 6, 100)"
+      "value": "rgb(113, 15, 131)"
     },
     "dark": {
-      "value": "rgb(255, 219, 250)"
-    },
-    "darkest": {
-      "value": "rgb(254, 199, 248)"
+      "value": "rgb(245, 159, 255)"
     }
   },
   "fuchsia-1300": {
     "prop": "--spectrum-fuchsia-1300",
     "light": {
-      "value": "rgb(71, 14, 70)"
+      "value": "rgb(92, 4, 109)"
     },
     "dark": {
-      "value": "rgb(255, 239, 252)"
-    },
-    "darkest": {
-      "value": "rgb(255, 220, 250)"
+      "value": "rgb(248, 191, 255)"
     }
   },
   "fuchsia-1400": {
     "prop": "--spectrum-fuchsia-1400",
     "light": {
-      "value": "rgb(50, 13, 49)"
+      "value": "rgb(72, 0, 88)"
+    },
+    "dark": {
+      "value": "rgb(251, 219, 255)"
+    }
+  },
+  "fuchsia-1500": {
+    "prop": "--spectrum-fuchsia-1500",
+    "dark": {
+      "value": "rgb(253, 241, 255)"
     },
+    "light": {
+      "value": "rgb(54, 0, 66)"
+    }
+  },
+  "fuchsia-1600": {
+    "prop": "--spectrum-fuchsia-1600",
     "dark": {
-      "value": "rgb(255, 253, 255)"
+      "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(255, 235, 252)"
+    "light": {
+      "value": "rgb(29, 0, 35)"
     }
   },
   "fuchsia-200": {
     "prop": "--spectrum-fuchsia-200",
     "light": {
-      "value": "rgb(255, 218, 250)"
+      "value": "rgb(253, 233, 255)"
     },
     "dark": {
-      "value": "rgb(123, 0, 123)"
-    },
-    "darkest": {
-      "value": "rgb(93, 9, 92)"
+      "value": "rgb(61, 0, 74)"
     }
   },
   "fuchsia-300": {
     "prop": "--spectrum-fuchsia-300",
     "light": {
-      "value": "rgb(254, 199, 248)"
+      "value": "rgb(250, 211, 255)"
     },
     "dark": {
-      "value": "rgb(144, 0, 145)"
-    },
-    "darkest": {
-      "value": "rgb(120, 0, 120)"
+      "value": "rgb(79, 0, 95)"
     }
   },
   "fuchsia-400": {
     "prop": "--spectrum-fuchsia-400",
     "light": {
-      "value": "rgb(251, 174, 246)"
+      "value": "rgb(247, 181, 255)"
     },
     "dark": {
-      "value": "rgb(165, 13, 166)"
-    },
-    "darkest": {
-      "value": "rgb(146, 0, 147)"
+      "value": "rgb(102, 9, 120)"
     }
   },
   "fuchsia-500": {
     "prop": "--spectrum-fuchsia-500",
     "light": {
-      "value": "rgb(245, 146, 243)"
+      "value": "rgb(243, 147, 255)"
     },
     "dark": {
-      "value": "rgb(185, 37, 185)"
-    },
-    "darkest": {
-      "value": "rgb(169, 19, 170)"
+      "value": "rgb(127, 23, 146)"
     }
   },
   "fuchsia-600": {
     "prop": "--spectrum-fuchsia-600",
     "light": {
-      "value": "rgb(237, 116, 237)"
+      "value": "rgb(236, 105, 255)"
     },
     "dark": {
-      "value": "rgb(205, 57, 206)"
-    },
-    "darkest": {
-      "value": "rgb(191, 43, 191)"
+      "value": "rgb(151, 38, 170)"
     }
   },
   "fuchsia-700": {
     "prop": "--spectrum-fuchsia-700",
     "light": {
-      "value": "rgb(224, 85, 226)"
+      "value": "rgb(223, 77, 245)"
     },
     "dark": {
-      "value": "rgb(223, 81, 224)"
-    },
-    "darkest": {
-      "value": "rgb(211, 65, 213)"
+      "value": "rgb(173, 51, 192)"
     }
   },
   "fuchsia-800": {
     "prop": "--spectrum-fuchsia-800",
     "light": {
-      "value": "rgb(205, 58, 206)"
+      "value": "rgb(200, 68, 220)"
     },
     "dark": {
-      "value": "rgb(235, 110, 236)"
-    },
-    "darkest": {
-      "value": "rgb(228, 91, 229)"
+      "value": "rgb(186, 60, 206)"
     }
   },
   "fuchsia-900": {
     "prop": "--spectrum-fuchsia-900",
     "light": {
-      "value": "rgb(182, 34, 183)"
+      "value": "rgb(181, 57, 200)"
     },
     "dark": {
-      "value": "rgb(244, 140, 242)"
-    },
-    "darkest": {
-      "value": "rgb(239, 120, 238)"
+      "value": "rgb(213, 73, 235)"
     }
   },
   "fuchsia-background-color-default": {
     "prop": "--spectrum-fuchsia-background-color-default",
-    "ref": "var(--spectrum-fuchsia-700)",
+    "ref": "var(--spectrum-fuchsia-800)",
     "light": {
-      "value": "rgb(182, 34, 183)"
+      "value": "rgb(181, 57, 200)"
     },
     "dark": {
-      "value": "rgb(223, 81, 224)"
+      "value": "rgb(186, 60, 206)"
+    }
+  },
+  "fuchsia-subtle-background-color-default": {
+    "prop": "--spectrum-fuchsia-subtle-background-color-default",
+    "ref": "var(--spectrum-fuchsia-300)",
+    "light": {
+      "value": "rgb(253, 233, 255)"
     },
-    "darkest": {
-      "value": "rgb(211, 65, 213)"
+    "dark": {
+      "value": "rgb(79, 0, 95)"
     }
   },
   "fuchsia-visual-color": {
     "prop": "--spectrum-fuchsia-visual-color",
     "ref": "var(--spectrum-fuchsia-900)",
     "light": {
-      "value": "rgb(205, 58, 206)"
+      "value": "rgb(200, 68, 220)"
     },
     "dark": {
-      "value": "rgb(244, 140, 242)"
-    },
-    "darkest": {
-      "value": "rgb(239, 120, 238)"
+      "value": "rgb(213, 73, 235)"
     }
   },
   "gray-100": {
     "prop": "--spectrum-gray-100",
     "light": {
-      "value": "rgb(248, 248, 248)"
+      "value": "rgb(233, 233, 233)"
     },
     "dark": {
-      "value": "rgb(50, 50, 50)"
+      "value": "rgb(44, 44, 44)"
+    }
+  },
+  "gray-1000": {
+    "prop": "--spectrum-gray-1000",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(29, 29, 29)"
+    "light": {
+      "value": "rgb(0, 0, 0)"
     }
   },
   "gray-200": {
     "prop": "--spectrum-gray-200",
     "light": {
-      "value": "rgb(230, 230, 230)"
+      "value": "rgb(225, 225, 225)"
     },
     "dark": {
-      "value": "rgb(63, 63, 63)"
+      "value": "rgb(50, 50, 50)"
+    }
+  },
+  "gray-25": {
+    "prop": "--spectrum-gray-25",
+    "dark": {
+      "value": "rgb(17, 17, 17)"
     },
-    "darkest": {
-      "value": "rgb(48, 48, 48)"
+    "light": {
+      "value": "rgb(255, 255, 255)"
     }
   },
   "gray-300": {
     "prop": "--spectrum-gray-300",
     "light": {
-      "value": "rgb(213, 213, 213)"
+      "value": "rgb(218, 218, 218)"
     },
     "dark": {
-      "value": "rgb(84, 84, 84)"
-    },
-    "darkest": {
-      "value": "rgb(75, 75, 75)"
+      "value": "rgb(57, 57, 57)"
     }
   },
   "gray-400": {
     "prop": "--spectrum-gray-400",
     "light": {
-      "value": "rgb(177, 177, 177)"
+      "value": "rgb(198, 198, 198)"
     },
     "dark": {
-      "value": "rgb(112, 112, 112)"
-    },
-    "darkest": {
-      "value": "rgb(106, 106, 106)"
+      "value": "rgb(68, 68, 68)"
     }
   },
   "gray-50": {
     "prop": "--spectrum-gray-50",
     "light": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(248, 248, 248)"
     },
     "dark": {
-      "value": "rgb(29, 29, 29)"
-    },
-    "darkest": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(27, 27, 27)"
     }
   },
   "gray-500": {
     "prop": "--spectrum-gray-500",
     "light": {
-      "value": "rgb(144, 144, 144)"
+      "value": "rgb(143, 143, 143)"
     },
     "dark": {
-      "value": "rgb(144, 144, 144)"
-    },
-    "darkest": {
-      "value": "rgb(141, 141, 141)"
+      "value": "rgb(109, 109, 109)"
     }
   },
   "gray-600": {
     "prop": "--spectrum-gray-600",
     "light": {
-      "value": "rgb(109, 109, 109)"
+      "value": "rgb(113, 113, 113)"
     },
     "dark": {
-      "value": "rgb(178, 178, 178)"
-    },
-    "darkest": {
-      "value": "rgb(176, 176, 176)"
+      "value": "rgb(138, 138, 138)"
     }
   },
   "gray-700": {
     "prop": "--spectrum-gray-700",
     "light": {
-      "value": "rgb(70, 70, 70)"
+      "value": "rgb(80, 80, 80)"
     },
     "dark": {
-      "value": "rgb(209, 209, 209)"
-    },
-    "darkest": {
-      "value": "rgb(208, 208, 208)"
+      "value": "rgb(175, 175, 175)"
     }
   },
   "gray-75": {
     "prop": "--spectrum-gray-75",
     "light": {
-      "value": "rgb(253, 253, 253)"
+      "value": "rgb(243, 243, 243)"
     },
     "dark": {
-      "value": "rgb(38, 38, 38)"
-    },
-    "darkest": {
-      "value": "rgb(14, 14, 14)"
+      "value": "rgb(34, 34, 34)"
     }
   },
   "gray-800": {
     "prop": "--spectrum-gray-800",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(235, 235, 235)"
-    },
-    "darkest": {
-      "value": "rgb(235, 235, 235)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "gray-900": {
     "prop": "--spectrum-gray-900",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "gray-background-color-default": {
     "prop": "--spectrum-gray-background-color-default",
-    "ref": "var(--spectrum-gray-700)",
+    "ref": "var(--spectrum-gray-500)",
     "light": {
-      "value": "rgb(70, 70, 70)"
+      "value": "rgb(80, 80, 80)"
     },
     "dark": {
-      "value": "rgb(209, 209, 209)"
+      "value": "rgb(109, 109, 109)"
+    }
+  },
+  "gray-subtle-background-color-default": {
+    "prop": "--spectrum-gray-subtle-background-color-default",
+    "ref": "var(--spectrum-gray-300)",
+    "light": {
+      "value": "rgb(233, 233, 233)"
     },
-    "darkest": {
-      "value": "rgb(208, 208, 208)"
+    "dark": {
+      "value": "rgb(57, 57, 57)"
     }
   },
   "gray-visual-color": {
     "prop": "--spectrum-gray-visual-color",
     "ref": "var(--spectrum-gray-600)",
     "light": {
-      "value": "rgb(144, 144, 144)"
+      "value": "rgb(143, 143, 143)"
     },
     "dark": {
-      "value": "rgb(178, 178, 178)"
-    },
-    "darkest": {
-      "value": "rgb(176, 176, 176)"
+      "value": "rgb(138, 138, 138)"
     }
   },
   "green-100": {
     "prop": "--spectrum-green-100",
     "light": {
-      "value": "rgb(206, 248, 224)"
+      "value": "rgb(237, 252, 241)"
     },
     "dark": {
-      "value": "rgb(4, 67, 41)"
-    },
-    "darkest": {
-      "value": "rgb(10, 44, 28)"
+      "value": "rgb(0, 30, 23)"
     }
   },
   "green-1000": {
     "prop": "--spectrum-green-1000",
     "light": {
-      "value": "rgb(0, 101, 62)"
+      "value": "rgb(3, 110, 69)"
     },
     "dark": {
-      "value": "rgb(94, 217, 162)"
-    },
-    "darkest": {
-      "value": "rgb(75, 205, 149)"
+      "value": "rgb(14, 175, 98)"
     }
   },
   "green-1100": {
     "prop": "--spectrum-green-1100",
     "light": {
-      "value": "rgb(0, 81, 50)"
+      "value": "rgb(2, 93, 60)"
     },
     "dark": {
-      "value": "rgb(129, 233, 184)"
-    },
-    "darkest": {
-      "value": "rgb(103, 222, 168)"
+      "value": "rgb(24, 193, 110)"
     }
   },
   "green-1200": {
     "prop": "--spectrum-green-1200",
     "light": {
-      "value": "rgb(5, 63, 39)"
+      "value": "rgb(1, 76, 52)"
     },
     "dark": {
-      "value": "rgb(177, 244, 209)"
-    },
-    "darkest": {
-      "value": "rgb(137, 236, 188)"
+      "value": "rgb(57, 215, 134)"
     }
   },
   "green-1300": {
     "prop": "--spectrum-green-1300",
     "light": {
-      "value": "rgb(10, 46, 29)"
+      "value": "rgb(0, 61, 44)"
     },
     "dark": {
-      "value": "rgb(223, 250, 234)"
-    },
-    "darkest": {
-      "value": "rgb(177, 244, 209)"
+      "value": "rgb(126, 231, 172)"
     }
   },
   "green-1400": {
     "prop": "--spectrum-green-1400",
     "light": {
-      "value": "rgb(10, 32, 21)"
+      "value": "rgb(0, 46, 34)"
+    },
+    "dark": {
+      "value": "rgb(189, 241, 208)"
+    }
+  },
+  "green-1500": {
+    "prop": "--spectrum-green-1500",
+    "dark": {
+      "value": "rgb(229, 250, 236)"
     },
+    "light": {
+      "value": "rgb(0, 33, 25)"
+    }
+  },
+  "green-1600": {
+    "prop": "--spectrum-green-1600",
     "dark": {
-      "value": "rgb(254, 255, 252)"
+      "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(214, 249, 228)"
+    "light": {
+      "value": "rgb(0, 15, 12)"
     }
   },
   "green-200": {
     "prop": "--spectrum-green-200",
     "light": {
-      "value": "rgb(173, 244, 206)"
+      "value": "rgb(215, 247, 225)"
     },
     "dark": {
-      "value": "rgb(0, 78, 47)"
-    },
-    "darkest": {
-      "value": "rgb(7, 59, 36)"
+      "value": "rgb(0, 38, 29)"
     }
   },
   "green-300": {
     "prop": "--spectrum-green-300",
     "light": {
-      "value": "rgb(137, 236, 188)"
+      "value": "rgb(173, 238, 197)"
     },
     "dark": {
-      "value": "rgb(0, 92, 56)"
-    },
-    "darkest": {
-      "value": "rgb(0, 76, 46)"
+      "value": "rgb(0, 51, 38)"
     }
   },
   "green-400": {
     "prop": "--spectrum-green-400",
     "light": {
-      "value": "rgb(103, 222, 168)"
+      "value": "rgb(107, 227, 162)"
     },
     "dark": {
-      "value": "rgb(0, 108, 67)"
-    },
-    "darkest": {
-      "value": "rgb(0, 93, 57)"
+      "value": "rgb(0, 68, 48)"
     }
   },
   "green-500": {
     "prop": "--spectrum-green-500",
     "light": {
-      "value": "rgb(73, 204, 147)"
+      "value": "rgb(43, 209, 125)"
     },
     "dark": {
-      "value": "rgb(0, 125, 78)"
-    },
-    "darkest": {
-      "value": "rgb(0, 111, 69)"
+      "value": "rgb(2, 87, 58)"
     }
   },
   "green-600": {
     "prop": "--spectrum-green-600",
     "light": {
-      "value": "rgb(47, 184, 128)"
+      "value": "rgb(18, 184, 103)"
     },
     "dark": {
-      "value": "rgb(0, 143, 93)"
-    },
-    "darkest": {
-      "value": "rgb(0, 130, 82)"
+      "value": "rgb(3, 106, 67)"
     }
   },
   "green-700": {
     "prop": "--spectrum-green-700",
     "light": {
-      "value": "rgb(21, 164, 110)"
+      "value": "rgb(11, 164, 93)"
     },
     "dark": {
-      "value": "rgb(18, 162, 108)"
-    },
-    "darkest": {
-      "value": "rgb(0, 149, 98)"
+      "value": "rgb(4, 124, 75)"
     }
   },
   "green-800": {
     "prop": "--spectrum-green-800",
     "light": {
-      "value": "rgb(0, 143, 93)"
+      "value": "rgb(7, 147, 85)"
     },
     "dark": {
-      "value": "rgb(43, 180, 125)"
-    },
-    "darkest": {
-      "value": "rgb(28, 168, 114)"
+      "value": "rgb(6, 136, 80)"
     }
   },
   "green-900": {
     "prop": "--spectrum-green-900",
     "light": {
-      "value": "rgb(0, 122, 77)"
+      "value": "rgb(5, 131, 78)"
     },
     "dark": {
-      "value": "rgb(67, 199, 143)"
-    },
-    "darkest": {
-      "value": "rgb(52, 187, 132)"
+      "value": "rgb(9, 157, 89)"
     }
   },
   "green-background-color-default": {
     "prop": "--spectrum-green-background-color-default",
-    "ref": "var(--spectrum-green-700)",
+    "ref": "var(--spectrum-green-800)",
     "light": {
-      "value": "rgb(0, 122, 77)"
+      "value": "rgb(5, 131, 78)"
     },
     "dark": {
-      "value": "rgb(18, 162, 108)"
+      "value": "rgb(6, 136, 80)"
+    }
+  },
+  "green-subtle-background-color-default": {
+    "prop": "--spectrum-green-subtle-background-color-default",
+    "ref": "var(--spectrum-green-300)",
+    "light": {
+      "value": "rgb(215, 247, 225)"
     },
-    "darkest": {
-      "value": "rgb(0, 149, 98)"
+    "dark": {
+      "value": "rgb(0, 51, 38)"
     }
   },
   "green-visual-color": {
     "prop": "--spectrum-green-visual-color",
     "ref": "var(--spectrum-green-800)",
     "light": {
-      "value": "rgb(21, 164, 110)"
+      "value": "rgb(11, 164, 93)"
     },
     "dark": {
-      "value": "rgb(43, 180, 125)"
-    },
-    "darkest": {
-      "value": "rgb(28, 168, 114)"
+      "value": "rgb(6, 136, 80)"
     }
   },
   "heading-cjk-emphasized-font-style": {
@@ -5299,14 +5945,8 @@
   },
   "heading-cjk-font-weight": {
     "prop": "--spectrum-heading-cjk-font-weight",
-    "spectrum": {
-      "ref": "var(--spectrum-extra-bold-font-weight)",
-      "value": "800"
-    },
-    "express": {
-      "ref": "var(--spectrum-black-font-weight)",
-      "value": "900"
-    }
+    "ref": "var(--spectrum-extra-bold-font-weight)",
+    "value": "800"
   },
   "heading-cjk-heavy-emphasized-font-style": {
     "prop": "--spectrum-heading-cjk-heavy-emphasized-font-style",
@@ -5497,13 +6137,10 @@
     "prop": "--spectrum-heading-color",
     "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "heading-line-height": {
@@ -5526,14 +6163,8 @@
   },
   "heading-sans-serif-emphasized-font-weight": {
     "prop": "--spectrum-heading-sans-serif-emphasized-font-weight",
-    "spectrum": {
-      "ref": "var(--spectrum-bold-font-weight)",
-      "value": "700"
-    },
-    "express": {
-      "ref": "var(--spectrum-black-font-weight)",
-      "value": "900"
-    }
+    "ref": "var(--spectrum-bold-font-weight)",
+    "value": "700"
   },
   "heading-sans-serif-font-family": {
     "prop": "--spectrum-heading-sans-serif-font-family",
@@ -5547,14 +6178,8 @@
   },
   "heading-sans-serif-font-weight": {
     "prop": "--spectrum-heading-sans-serif-font-weight",
-    "spectrum": {
-      "ref": "var(--spectrum-bold-font-weight)",
-      "value": "700"
-    },
-    "express": {
-      "ref": "var(--spectrum-black-font-weight)",
-      "value": "900"
-    }
+    "ref": "var(--spectrum-bold-font-weight)",
+    "value": "700"
   },
   "heading-sans-serif-heavy-emphasized-font-style": {
     "prop": "--spectrum-heading-sans-serif-heavy-emphasized-font-style",
@@ -5663,14 +6288,8 @@
   },
   "heading-serif-emphasized-font-weight": {
     "prop": "--spectrum-heading-serif-emphasized-font-weight",
-    "spectrum": {
-      "ref": "var(--spectrum-bold-font-weight)",
-      "value": "700"
-    },
-    "express": {
-      "ref": "var(--spectrum-black-font-weight)",
-      "value": "900"
-    }
+    "ref": "var(--spectrum-bold-font-weight)",
+    "value": "700"
   },
   "heading-serif-font-family": {
     "prop": "--spectrum-heading-serif-font-family",
@@ -5684,14 +6303,8 @@
   },
   "heading-serif-font-weight": {
     "prop": "--spectrum-heading-serif-font-weight",
-    "spectrum": {
-      "ref": "var(--spectrum-bold-font-weight)",
-      "value": "700"
-    },
-    "express": {
-      "ref": "var(--spectrum-black-font-weight)",
-      "value": "900"
-    }
+    "ref": "var(--spectrum-bold-font-weight)",
+    "value": "700"
   },
   "heading-serif-heavy-emphasized-font-style": {
     "prop": "--spectrum-heading-serif-heavy-emphasized-font-style",
@@ -5917,78 +6530,60 @@
     "prop": "--spectrum-icon-color-blue-primary-default",
     "ref": "var(--spectrum-blue-800)",
     "light": {
-      "value": "rgb(2, 101, 220)"
+      "value": "rgb(59, 99, 251)"
     },
     "dark": {
-      "value": "rgb(84, 163, 246)"
-    },
-    "darkest": {
-      "value": "rgb(64, 150, 243)"
+      "value": "rgb(64, 105, 253)"
     }
   },
   "icon-color-green-primary-default": {
     "prop": "--spectrum-icon-color-green-primary-default",
     "ref": "var(--spectrum-green-800)",
     "light": {
-      "value": "rgb(0, 122, 77)"
+      "value": "rgb(5, 131, 78)"
     },
     "dark": {
-      "value": "rgb(43, 180, 125)"
-    },
-    "darkest": {
-      "value": "rgb(28, 168, 114)"
+      "value": "rgb(6, 136, 80)"
     }
   },
   "icon-color-inverse": {
     "prop": "--spectrum-icon-color-inverse",
     "ref": "var(--spectrum-gray-50)",
     "light": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(248, 248, 248)"
     },
     "dark": {
-      "value": "rgb(29, 29, 29)"
-    },
-    "darkest": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(27, 27, 27)"
     }
   },
   "icon-color-primary-default": {
     "prop": "--spectrum-icon-color-primary-default",
     "ref": "var(--spectrum-neutral-content-color-default)",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(235, 235, 235)"
-    },
-    "darkest": {
-      "value": "rgb(235, 235, 235)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "icon-color-red-primary-default": {
     "prop": "--spectrum-icon-color-red-primary-default",
     "ref": "var(--spectrum-red-700)",
     "light": {
-      "value": "rgb(211, 21, 16)"
+      "value": "rgb(215, 50, 32)"
     },
     "dark": {
-      "value": "rgb(246, 88, 67)"
-    },
-    "darkest": {
-      "value": "rgb(238, 67, 49)"
+      "value": "rgb(205, 46, 29)"
     }
   },
   "icon-color-yellow-primary-default": {
     "prop": "--spectrum-icon-color-yellow-primary-default",
     "ref": "var(--spectrum-yellow-1000)",
     "light": {
-      "value": "rgb(232, 198, 0)"
+      "value": "rgb(245, 199, 0)"
     },
     "dark": {
-      "value": "rgb(228, 194, 0)"
-    },
-    "darkest": {
-      "value": "rgb(216, 181, 0)"
+      "value": "rgb(203, 141, 0)"
     }
   },
   "illustrated-message-body-size": {
@@ -6043,88 +6638,43 @@
   },
   "in-field-button-edge-to-fill": {
     "prop": "--spectrum-in-field-button-edge-to-fill",
-    "spectrum": {
-      "value": "0px"
-    },
-    "express": {
-      "value": "4px"
-    }
+    "value": "0px"
   },
   "in-field-button-fill-stacked-inner-border-rounding": {
     "prop": "--spectrum-in-field-button-fill-stacked-inner-border-rounding",
-    "spectrum": {
-      "value": "0px"
-    },
-    "express": {
-      "value": "1px"
-    }
+    "value": "0px"
   },
   "in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": {
     "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large",
     "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large)",
-    "spectrum": {
-      "value": "5px"
-    },
-    "express": {
-      "value": "4px"
-    }
+    "value": "5px"
   },
   "in-field-button-inner-edge-to-disclosure-icon-stacked-large": {
     "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large",
     "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large)",
-    "spectrum": {
-      "value": "4px"
-    },
-    "express": {
-      "value": "3px"
-    }
+    "value": "4px"
   },
   "in-field-button-inner-edge-to-disclosure-icon-stacked-medium": {
     "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium",
     "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium)",
-    "spectrum": {
-      "value": "3px"
-    },
-    "express": {
-      "value": "1px"
-    }
+    "value": "3px"
   },
   "in-field-button-inner-edge-to-disclosure-icon-stacked-small": {
     "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small",
-    "spectrum": {
-      "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small)",
-      "value": "3px"
-    },
-    "express": {
-      "value": "1px"
-    }
+    "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small)",
+    "value": "3px"
   },
   "in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large": {
     "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large",
-    "spectrum": {
-      "value": "5px"
-    },
-    "express": {
-      "value": "8px"
-    }
+    "value": "5px"
   },
   "in-field-button-outer-edge-to-disclosure-icon-stacked-large": {
     "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large",
-    "spectrum": {
-      "value": "4px"
-    },
-    "express": {
-      "value": "7px"
-    }
+    "value": "4px"
   },
   "in-field-button-outer-edge-to-disclosure-icon-stacked-medium": {
     "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium",
-    "spectrum": {
-      "value": "3px"
-    },
-    "express": {
-      "value": "5px"
-    }
+    "value": "3px"
   },
   "in-field-button-outer-edge-to-disclosure-icon-stacked-small": {
     "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small",
@@ -6132,12 +6682,7 @@
   },
   "in-field-button-stacked-inner-edge-to-fill": {
     "prop": "--spectrum-in-field-button-stacked-inner-edge-to-fill",
-    "spectrum": {
-      "value": "0px"
-    },
-    "express": {
-      "value": "1px"
-    }
+    "value": "0px"
   },
   "in-field-button-width-stacked-extra-large": {
     "prop": "--spectrum-in-field-button-width-stacked-extra-large",
@@ -6162,442 +6707,395 @@
   "indigo-100": {
     "prop": "--spectrum-indigo-100",
     "light": {
-      "value": "rgb(237, 238, 255)"
+      "value": "rgb(247, 248, 255)"
     },
     "dark": {
-      "value": "rgb(40, 44, 140)"
-    },
-    "darkest": {
-      "value": "rgb(26, 29, 97)"
+      "value": "rgb(30, 0, 93)"
     }
   },
   "indigo-1000": {
     "prop": "--spectrum-indigo-1000",
     "light": {
-      "value": "rgb(64, 70, 202)"
+      "value": "rgb(99, 56, 238)"
     },
     "dark": {
-      "value": "rgb(188, 190, 255)"
-    },
-    "darkest": {
-      "value": "rgb(174, 177, 255)"
+      "value": "rgb(139, 141, 254)"
     }
   },
   "indigo-1100": {
     "prop": "--spectrum-indigo-1100",
     "light": {
-      "value": "rgb(50, 54, 168)"
+      "value": "rgb(84, 36, 219)"
     },
     "dark": {
-      "value": "rgb(208, 210, 255)"
-    },
-    "darkest": {
-      "value": "rgb(194, 196, 255)"
+      "value": "rgb(153, 161, 255)"
     }
   },
   "indigo-1200": {
     "prop": "--spectrum-indigo-1200",
     "light": {
-      "value": "rgb(38, 41, 134)"
+      "value": "rgb(69, 19, 191)"
     },
     "dark": {
-      "value": "rgb(226, 228, 255)"
-    },
-    "darkest": {
-      "value": "rgb(212, 213, 255)"
+      "value": "rgb(176, 186, 255)"
     }
   },
   "indigo-1300": {
     "prop": "--spectrum-indigo-1300",
     "light": {
-      "value": "rgb(27, 30, 100)"
+      "value": "rgb(55, 6, 160)"
     },
     "dark": {
-      "value": "rgb(243, 243, 254)"
-    },
-    "darkest": {
-      "value": "rgb(227, 228, 255)"
+      "value": "rgb(199, 208, 255)"
     }
   },
   "indigo-1400": {
     "prop": "--spectrum-indigo-1400",
     "light": {
-      "value": "rgb(20, 22, 72)"
+      "value": "rgb(42, 0, 129)"
+    },
+    "dark": {
+      "value": "rgb(223, 228, 255)"
+    }
+  },
+  "indigo-1500": {
+    "prop": "--spectrum-indigo-1500",
+    "dark": {
+      "value": "rgb(243, 244, 255)"
     },
+    "light": {
+      "value": "rgb(31, 0, 98)"
+    }
+  },
+  "indigo-1600": {
+    "prop": "--spectrum-indigo-1600",
     "dark": {
       "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(240, 240, 255)"
+    "light": {
+      "value": "rgb(17, 0, 54)"
     }
   },
   "indigo-200": {
     "prop": "--spectrum-indigo-200",
     "light": {
-      "value": "rgb(224, 226, 255)"
+      "value": "rgb(235, 238, 255)"
     },
     "dark": {
-      "value": "rgb(47, 52, 163)"
-    },
-    "darkest": {
-      "value": "rgb(35, 39, 125)"
+      "value": "rgb(35, 0, 110)"
     }
   },
   "indigo-300": {
     "prop": "--spectrum-indigo-300",
     "light": {
-      "value": "rgb(211, 213, 255)"
+      "value": "rgb(216, 222, 255)"
     },
     "dark": {
-      "value": "rgb(57, 63, 187)"
-    },
-    "darkest": {
-      "value": "rgb(46, 50, 158)"
+      "value": "rgb(47, 0, 140)"
     }
   },
   "indigo-400": {
     "prop": "--spectrum-indigo-400",
     "light": {
-      "value": "rgb(193, 196, 255)"
+      "value": "rgb(192, 201, 255)"
     },
     "dark": {
-      "value": "rgb(70, 75, 211)"
-    },
-    "darkest": {
-      "value": "rgb(58, 63, 189)"
+      "value": "rgb(62, 12, 174)"
     }
   },
   "indigo-500": {
     "prop": "--spectrum-indigo-500",
     "light": {
-      "value": "rgb(172, 175, 255)"
+      "value": "rgb(167, 178, 255)"
     },
     "dark": {
-      "value": "rgb(85, 91, 231)"
-    },
-    "darkest": {
-      "value": "rgb(73, 78, 216)"
+      "value": "rgb(79, 30, 209)"
     }
   },
   "indigo-600": {
     "prop": "--spectrum-indigo-600",
     "light": {
-      "value": "rgb(149, 153, 255)"
+      "value": "rgb(145, 151, 254)"
     },
     "dark": {
-      "value": "rgb(104, 109, 244)"
-    },
-    "darkest": {
-      "value": "rgb(90, 96, 235)"
+      "value": "rgb(95, 52, 235)"
     }
   },
   "indigo-700": {
     "prop": "--spectrum-indigo-700",
     "light": {
-      "value": "rgb(126, 132, 252)"
+      "value": "rgb(132, 128, 254)"
     },
     "dark": {
-      "value": "rgb(124, 129, 251)"
-    },
-    "darkest": {
-      "value": "rgb(110, 115, 246)"
+      "value": "rgb(109, 75, 248)"
     }
   },
   "indigo-800": {
     "prop": "--spectrum-indigo-800",
     "light": {
-      "value": "rgb(104, 109, 244)"
+      "value": "rgb(122, 106, 253)"
     },
     "dark": {
-      "value": "rgb(145, 149, 255)"
-    },
-    "darkest": {
-      "value": "rgb(132, 136, 253)"
+      "value": "rgb(116, 91, 252)"
     }
   },
   "indigo-900": {
     "prop": "--spectrum-indigo-900",
     "light": {
-      "value": "rgb(82, 88, 228)"
+      "value": "rgb(113, 85, 250)"
     },
     "dark": {
-      "value": "rgb(167, 170, 255)"
-    },
-    "darkest": {
-      "value": "rgb(153, 157, 255)"
+      "value": "rgb(128, 119, 254)"
     }
   },
   "indigo-background-color-default": {
     "prop": "--spectrum-indigo-background-color-default",
-    "ref": "var(--spectrum-indigo-700)",
+    "ref": "var(--spectrum-indigo-800)",
     "light": {
-      "value": "rgb(82, 88, 228)"
+      "value": "rgb(113, 85, 250)"
     },
     "dark": {
-      "value": "rgb(124, 129, 251)"
+      "value": "rgb(116, 91, 252)"
+    }
+  },
+  "indigo-subtle-background-color-default": {
+    "prop": "--spectrum-indigo-subtle-background-color-default",
+    "ref": "var(--spectrum-indigo-300)",
+    "light": {
+      "value": "rgb(235, 238, 255)"
     },
-    "darkest": {
-      "value": "rgb(110, 115, 246)"
+    "dark": {
+      "value": "rgb(47, 0, 140)"
     }
   },
   "indigo-visual-color": {
     "prop": "--spectrum-indigo-visual-color",
     "ref": "var(--spectrum-indigo-900)",
     "light": {
-      "value": "rgb(104, 109, 244)"
+      "value": "rgb(122, 106, 253)"
     },
     "dark": {
-      "value": "rgb(167, 170, 255)"
-    },
-    "darkest": {
-      "value": "rgb(153, 157, 255)"
+      "value": "rgb(128, 119, 254)"
     }
   },
   "informative-background-color-default": {
     "prop": "--spectrum-informative-background-color-default",
-    "ref": "var(--spectrum-informative-color-600)",
+    "ref": "var(--spectrum-informative-color-800)",
     "light": {
-      "value": "rgb(2, 101, 220)"
+      "value": "rgb(59, 99, 251)"
     },
     "dark": {
-      "value": "rgb(3, 103, 224)"
-    },
-    "darkest": {
-      "value": "rgb(6, 108, 231)"
+      "value": "rgb(64, 105, 253)"
     }
   },
   "informative-background-color-down": {
     "prop": "--spectrum-informative-background-color-down",
-    "ref": "var(--spectrum-informative-color-400)",
+    "ref": "var(--spectrum-informative-color-700)",
     "light": {
-      "value": "rgb(0, 68, 145)"
+      "value": "rgb(39, 77, 234)"
     },
     "dark": {
-      "value": "rgb(0, 77, 163)"
-    },
-    "darkest": {
-      "value": "rgb(0, 78, 166)"
+      "value": "rgb(52, 91, 248)"
     }
   },
   "informative-background-color-hover": {
     "prop": "--spectrum-informative-background-color-hover",
-    "ref": "var(--spectrum-informative-color-500)",
+    "ref": "var(--spectrum-informative-color-700)",
     "light": {
-      "value": "rgb(0, 84, 182)"
+      "value": "rgb(39, 77, 234)"
     },
     "dark": {
-      "value": "rgb(0, 89, 194)"
-    },
-    "darkest": {
-      "value": "rgb(0, 92, 200)"
+      "value": "rgb(52, 91, 248)"
     }
   },
   "informative-background-color-key-focus": {
     "prop": "--spectrum-informative-background-color-key-focus",
-    "ref": "var(--spectrum-informative-color-500)",
+    "ref": "var(--spectrum-informative-color-700)",
     "light": {
-      "value": "rgb(0, 84, 182)"
+      "value": "rgb(39, 77, 234)"
     },
     "dark": {
-      "value": "rgb(0, 89, 194)"
-    },
-    "darkest": {
-      "value": "rgb(0, 92, 200)"
+      "value": "rgb(52, 91, 248)"
     }
   },
   "informative-color-100": {
     "prop": "--spectrum-informative-color-100",
     "ref": "var(--spectrum-blue-100)",
     "light": {
-      "value": "rgb(224, 242, 255)"
+      "value": "rgb(245, 249, 255)"
     },
     "dark": {
-      "value": "rgb(0, 56, 119)"
-    },
-    "darkest": {
-      "value": "rgb(0, 38, 81)"
+      "value": "rgb(14, 23, 63)"
     }
   },
   "informative-color-1000": {
     "prop": "--spectrum-informative-color-1000",
     "ref": "var(--spectrum-blue-1000)",
     "light": {
-      "value": "rgb(0, 84, 182)"
+      "value": "rgb(39, 77, 234)"
     },
     "dark": {
-      "value": "rgb(143, 202, 252)"
-    },
-    "darkest": {
-      "value": "rgb(124, 189, 250)"
+      "value": "rgb(105, 149, 254)"
     }
   },
   "informative-color-1100": {
     "prop": "--spectrum-informative-color-1100",
     "ref": "var(--spectrum-blue-1100)",
     "light": {
-      "value": "rgb(0, 68, 145)"
+      "value": "rgb(29, 62, 207)"
     },
     "dark": {
-      "value": "rgb(174, 219, 254)"
-    },
-    "darkest": {
-      "value": "rgb(152, 206, 253)"
+      "value": "rgb(124, 169, 252)"
     }
   },
   "informative-color-1200": {
     "prop": "--spectrum-informative-color-1200",
     "ref": "var(--spectrum-blue-1200)",
     "light": {
-      "value": "rgb(0, 53, 113)"
+      "value": "rgb(21, 50, 173)"
     },
     "dark": {
-      "value": "rgb(204, 233, 255)"
-    },
-    "darkest": {
-      "value": "rgb(179, 222, 254)"
+      "value": "rgb(152, 192, 252)"
     }
   },
   "informative-color-1300": {
     "prop": "--spectrum-informative-color-1300",
     "ref": "var(--spectrum-blue-1300)",
     "light": {
-      "value": "rgb(0, 39, 84)"
+      "value": "rgb(16, 40, 140)"
     },
     "dark": {
-      "value": "rgb(232, 246, 255)"
-    },
-    "darkest": {
-      "value": "rgb(206, 234, 255)"
+      "value": "rgb(181, 213, 253)"
     }
   },
   "informative-color-1400": {
     "prop": "--spectrum-informative-color-1400",
     "ref": "var(--spectrum-blue-1400)",
     "light": {
-      "value": "rgb(0, 28, 60)"
+      "value": "rgb(12, 31, 105)"
+    },
+    "dark": {
+      "value": "rgb(213, 231, 254)"
+    }
+  },
+  "informative-color-1500": {
+    "prop": "--spectrum-informative-color-1500",
+    "ref": "var(--spectrum-blue-1500)",
+    "dark": {
+      "value": "rgb(238, 245, 255)"
     },
+    "light": {
+      "value": "rgb(14, 24, 67)"
+    }
+  },
+  "informative-color-1600": {
+    "prop": "--spectrum-informative-color-1600",
+    "ref": "var(--spectrum-blue-1600)",
     "dark": {
       "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(227, 243, 255)"
+    "light": {
+      "value": "rgb(7, 11, 30)"
     }
   },
   "informative-color-200": {
     "prop": "--spectrum-informative-color-200",
     "ref": "var(--spectrum-blue-200)",
     "light": {
-      "value": "rgb(202, 232, 255)"
+      "value": "rgb(229, 240, 254)"
     },
     "dark": {
-      "value": "rgb(0, 65, 138)"
-    },
-    "darkest": {
-      "value": "rgb(0, 50, 106)"
+      "value": "rgb(15, 28, 82)"
     }
   },
   "informative-color-300": {
     "prop": "--spectrum-informative-color-300",
     "ref": "var(--spectrum-blue-300)",
     "light": {
-      "value": "rgb(181, 222, 255)"
+      "value": "rgb(203, 226, 254)"
     },
     "dark": {
-      "value": "rgb(0, 77, 163)"
-    },
-    "darkest": {
-      "value": "rgb(0, 64, 135)"
+      "value": "rgb(12, 33, 117)"
     }
   },
   "informative-color-400": {
     "prop": "--spectrum-informative-color-400",
     "ref": "var(--spectrum-blue-400)",
     "light": {
-      "value": "rgb(150, 206, 253)"
+      "value": "rgb(172, 207, 253)"
     },
     "dark": {
-      "value": "rgb(0, 89, 194)"
-    },
-    "darkest": {
-      "value": "rgb(0, 78, 166)"
+      "value": "rgb(18, 45, 154)"
     }
   },
   "informative-color-500": {
     "prop": "--spectrum-informative-color-500",
     "ref": "var(--spectrum-blue-500)",
     "light": {
-      "value": "rgb(120, 187, 250)"
+      "value": "rgb(142, 185, 252)"
     },
     "dark": {
-      "value": "rgb(3, 103, 224)"
-    },
-    "darkest": {
-      "value": "rgb(0, 92, 200)"
+      "value": "rgb(26, 58, 195)"
     }
   },
   "informative-color-600": {
     "prop": "--spectrum-informative-color-600",
     "ref": "var(--spectrum-blue-600)",
     "light": {
-      "value": "rgb(89, 167, 246)"
+      "value": "rgb(114, 158, 253)"
     },
     "dark": {
-      "value": "rgb(19, 121, 243)"
-    },
-    "darkest": {
-      "value": "rgb(6, 108, 231)"
+      "value": "rgb(37, 73, 229)"
     }
   },
   "informative-color-700": {
     "prop": "--spectrum-informative-color-700",
     "ref": "var(--spectrum-blue-700)",
     "light": {
-      "value": "rgb(56, 146, 243)"
+      "value": "rgb(93, 137, 255)"
     },
     "dark": {
-      "value": "rgb(52, 143, 244)"
-    },
-    "darkest": {
-      "value": "rgb(29, 128, 245)"
+      "value": "rgb(52, 91, 248)"
     }
   },
   "informative-color-800": {
     "prop": "--spectrum-informative-color-800",
     "ref": "var(--spectrum-blue-800)",
     "light": {
-      "value": "rgb(20, 122, 243)"
+      "value": "rgb(75, 117, 255)"
     },
     "dark": {
-      "value": "rgb(84, 163, 246)"
-    },
-    "darkest": {
-      "value": "rgb(64, 150, 243)"
+      "value": "rgb(64, 105, 253)"
     }
   },
   "informative-color-900": {
     "prop": "--spectrum-informative-color-900",
     "ref": "var(--spectrum-blue-900)",
     "light": {
-      "value": "rgb(2, 101, 220)"
+      "value": "rgb(59, 99, 251)"
     },
     "dark": {
-      "value": "rgb(114, 183, 249)"
+      "value": "rgb(86, 129, 255)"
+    }
+  },
+  "informative-subtle-background-color-default": {
+    "prop": "--spectrum-informative-subtle-background-color-default",
+    "ref": "var(--spectrum-informative-color-300)",
+    "light": {
+      "value": "rgb(229, 240, 254)"
     },
-    "darkest": {
-      "value": "rgb(94, 170, 247)"
+    "dark": {
+      "value": "rgb(12, 33, 117)"
     }
   },
   "informative-visual-color": {
     "prop": "--spectrum-informative-visual-color",
     "ref": "var(--spectrum-informative-color-900)",
     "light": {
-      "value": "rgb(20, 122, 243)"
+      "value": "rgb(75, 117, 255)"
     },
     "dark": {
-      "value": "rgb(114, 183, 249)"
-    },
-    "darkest": {
-      "value": "rgb(94, 170, 247)"
+      "value": "rgb(86, 129, 255)"
     }
   },
   "italic-font-style": {
@@ -6619,195 +7117,175 @@
   "magenta-100": {
     "prop": "--spectrum-magenta-100",
     "light": {
-      "value": "rgb(255, 234, 241)"
+      "value": "rgb(255, 245, 248)"
     },
     "dark": {
-      "value": "rgb(118, 0, 58)"
-    },
-    "darkest": {
-      "value": "rgb(83, 3, 41)"
+      "value": "rgb(59, 0, 22)"
     }
   },
   "magenta-1000": {
     "prop": "--spectrum-magenta-1000",
     "light": {
-      "value": "rgb(173, 9, 85)"
+      "value": "rgb(186, 22, 80)"
     },
     "dark": {
-      "value": "rgb(255, 172, 202)"
-    },
-    "darkest": {
-      "value": "rgb(255, 152, 191)"
+      "value": "rgb(255, 96, 149)"
     }
   },
   "magenta-1100": {
     "prop": "--spectrum-magenta-1100",
     "light": {
-      "value": "rgb(142, 0, 69)"
+      "value": "rgb(163, 5, 62)"
     },
     "dark": {
-      "value": "rgb(255, 198, 218)"
-    },
-    "darkest": {
-      "value": "rgb(255, 179, 207)"
+      "value": "rgb(255, 128, 171)"
     }
   },
   "magenta-1200": {
     "prop": "--spectrum-magenta-1200",
     "light": {
-      "value": "rgb(112, 0, 55)"
+      "value": "rgb(136, 0, 51)"
     },
     "dark": {
-      "value": "rgb(255, 221, 233)"
-    },
-    "darkest": {
-      "value": "rgb(255, 202, 221)"
+      "value": "rgb(255, 163, 194)"
     }
   },
   "magenta-1300": {
     "prop": "--spectrum-magenta-1300",
     "light": {
-      "value": "rgb(84, 3, 42)"
+      "value": "rgb(111, 0, 40)"
     },
     "dark": {
-      "value": "rgb(255, 240, 245)"
-    },
-    "darkest": {
-      "value": "rgb(255, 221, 233)"
+      "value": "rgb(255, 193, 214)"
     }
   },
   "magenta-1400": {
     "prop": "--spectrum-magenta-1400",
     "light": {
-      "value": "rgb(60, 6, 29)"
+      "value": "rgb(86, 0, 30)"
     },
     "dark": {
-      "value": "rgb(255, 252, 253)"
+      "value": "rgb(255, 220, 232)"
+    }
+  },
+  "magenta-1500": {
+    "prop": "--spectrum-magenta-1500",
+    "dark": {
+      "value": "rgb(255, 241, 246)"
+    },
+    "light": {
+      "value": "rgb(64, 0, 22)"
+    }
+  },
+  "magenta-1600": {
+    "prop": "--spectrum-magenta-1600",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(255, 236, 243)"
+    "light": {
+      "value": "rgb(35, 0, 12)"
     }
   },
   "magenta-200": {
     "prop": "--spectrum-magenta-200",
     "light": {
-      "value": "rgb(255, 220, 232)"
+      "value": "rgb(255, 232, 240)"
     },
     "dark": {
-      "value": "rgb(137, 0, 66)"
-    },
-    "darkest": {
-      "value": "rgb(106, 0, 52)"
+      "value": "rgb(74, 0, 27)"
     }
   },
   "magenta-300": {
     "prop": "--spectrum-magenta-300",
     "light": {
-      "value": "rgb(255, 202, 221)"
+      "value": "rgb(255, 213, 227)"
     },
     "dark": {
-      "value": "rgb(160, 0, 77)"
-    },
-    "darkest": {
-      "value": "rgb(133, 0, 65)"
+      "value": "rgb(93, 0, 34)"
     }
   },
   "magenta-400": {
     "prop": "--spectrum-magenta-400",
     "light": {
-      "value": "rgb(255, 178, 206)"
+      "value": "rgb(255, 185, 208)"
     },
     "dark": {
-      "value": "rgb(182, 18, 90)"
-    },
-    "darkest": {
-      "value": "rgb(161, 0, 78)"
+      "value": "rgb(123, 0, 45)"
     }
   },
   "magenta-500": {
     "prop": "--spectrum-magenta-500",
     "light": {
-      "value": "rgb(255, 149, 189)"
+      "value": "rgb(255, 152, 187)"
     },
     "dark": {
-      "value": "rgb(203, 38, 109)"
-    },
-    "darkest": {
-      "value": "rgb(186, 22, 93)"
+      "value": "rgb(152, 7, 60)"
     }
   },
   "magenta-600": {
     "prop": "--spectrum-magenta-600",
     "light": {
-      "value": "rgb(250, 119, 170)"
+      "value": "rgb(255, 112, 159)"
     },
     "dark": {
-      "value": "rgb(222, 61, 130)"
-    },
-    "darkest": {
-      "value": "rgb(209, 43, 114)"
+      "value": "rgb(181, 19, 76)"
     }
   },
   "magenta-700": {
     "prop": "--spectrum-magenta-700",
     "light": {
-      "value": "rgb(239, 90, 152)"
+      "value": "rgb(255, 72, 133)"
     },
     "dark": {
-      "value": "rgb(237, 87, 149)"
-    },
-    "darkest": {
-      "value": "rgb(227, 69, 137)"
+      "value": "rgb(207, 31, 92)"
     }
   },
   "magenta-800": {
     "prop": "--spectrum-magenta-800",
     "light": {
-      "value": "rgb(222, 61, 130)"
+      "value": "rgb(240, 45, 110)"
     },
     "dark": {
-      "value": "rgb(249, 114, 167)"
-    },
-    "darkest": {
-      "value": "rgb(241, 97, 156)"
+      "value": "rgb(224, 38, 101)"
     }
   },
   "magenta-900": {
     "prop": "--spectrum-magenta-900",
     "light": {
-      "value": "rgb(200, 34, 105)"
+      "value": "rgb(217, 35, 97)"
     },
     "dark": {
-      "value": "rgb(255, 143, 185)"
-    },
-    "darkest": {
-      "value": "rgb(252, 124, 173)"
+      "value": "rgb(255, 51, 119)"
     }
   },
   "magenta-background-color-default": {
     "prop": "--spectrum-magenta-background-color-default",
-    "ref": "var(--spectrum-magenta-700)",
+    "ref": "var(--spectrum-magenta-800)",
     "light": {
-      "value": "rgb(200, 34, 105)"
+      "value": "rgb(217, 35, 97)"
     },
     "dark": {
-      "value": "rgb(237, 87, 149)"
+      "value": "rgb(224, 38, 101)"
+    }
+  },
+  "magenta-subtle-background-color-default": {
+    "prop": "--spectrum-magenta-subtle-background-color-default",
+    "ref": "var(--spectrum-magenta-300)",
+    "light": {
+      "value": "rgb(255, 232, 240)"
     },
-    "darkest": {
-      "value": "rgb(227, 69, 137)"
+    "dark": {
+      "value": "rgb(93, 0, 34)"
     }
   },
   "magenta-visual-color": {
     "prop": "--spectrum-magenta-visual-color",
     "ref": "var(--spectrum-magenta-900)",
     "light": {
-      "value": "rgb(222, 61, 130)"
+      "value": "rgb(240, 45, 110)"
     },
     "dark": {
-      "value": "rgb(255, 143, 185)"
-    },
-    "darkest": {
-      "value": "rgb(252, 124, 173)"
+      "value": "rgb(255, 51, 119)"
     }
   },
   "medium-font-weight": {
@@ -7013,882 +7491,823 @@
   },
   "negative-background-color-default": {
     "prop": "--spectrum-negative-background-color-default",
-    "ref": "var(--spectrum-negative-color-600)",
+    "ref": "var(--spectrum-negative-color-800)",
     "light": {
-      "value": "rgb(211, 21, 16)"
+      "value": "rgb(215, 50, 32)"
     },
     "dark": {
-      "value": "rgb(215, 25, 19)"
-    },
-    "darkest": {
-      "value": "rgb(221, 33, 24)"
+      "value": "rgb(223, 52, 34)"
     }
   },
   "negative-background-color-down": {
     "prop": "--spectrum-negative-background-color-down",
-    "ref": "var(--spectrum-negative-color-400)",
+    "ref": "var(--spectrum-negative-color-700)",
     "light": {
-      "value": "rgb(147, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(165, 0, 0)"
-    },
-    "darkest": {
-      "value": "rgb(167, 0, 0)"
+      "value": "rgb(205, 46, 29)"
     }
   },
   "negative-background-color-hover": {
     "prop": "--spectrum-negative-background-color-hover",
-    "ref": "var(--spectrum-negative-color-500)",
+    "ref": "var(--spectrum-negative-color-700)",
     "light": {
-      "value": "rgb(180, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(190, 4, 3)"
-    },
-    "darkest": {
-      "value": "rgb(196, 7, 6)"
+      "value": "rgb(205, 46, 29)"
     }
   },
   "negative-background-color-key-focus": {
     "prop": "--spectrum-negative-background-color-key-focus",
-    "ref": "var(--spectrum-negative-color-500)",
+    "ref": "var(--spectrum-negative-color-700)",
     "light": {
-      "value": "rgb(180, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(190, 4, 3)"
-    },
-    "darkest": {
-      "value": "rgb(196, 7, 6)"
+      "value": "rgb(205, 46, 29)"
     }
   },
   "negative-border-color-default": {
     "prop": "--spectrum-negative-border-color-default",
     "ref": "var(--spectrum-negative-color-900)",
     "light": {
-      "value": "rgb(211, 21, 16)"
+      "value": "rgb(215, 50, 32)"
     },
     "dark": {
-      "value": "rgb(255, 149, 129)"
-    },
-    "darkest": {
-      "value": "rgb(255, 129, 107)"
+      "value": "rgb(252, 67, 46)"
     }
   },
   "negative-border-color-down": {
     "prop": "--spectrum-negative-border-color-down",
     "ref": "var(--spectrum-negative-color-1100)",
     "light": {
-      "value": "rgb(147, 0, 0)"
+      "value": "rgb(156, 33, 19)"
     },
     "dark": {
-      "value": "rgb(255, 201, 189)"
-    },
-    "darkest": {
-      "value": "rgb(255, 183, 169)"
+      "value": "rgb(255, 134, 120)"
     }
   },
   "negative-border-color-focus": {
     "prop": "--spectrum-negative-border-color-focus",
     "ref": "var(--spectrum-negative-color-1000)",
     "light": {
-      "value": "rgb(180, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(255, 176, 161)"
-    },
-    "darkest": {
-      "value": "rgb(255, 158, 140)"
+      "value": "rgb(255, 103, 86)"
     }
   },
   "negative-border-color-focus-hover": {
     "prop": "--spectrum-negative-border-color-focus-hover",
     "ref": "var(--spectrum-negative-border-color-down)",
     "light": {
-      "value": "rgb(147, 0, 0)"
+      "value": "rgb(156, 33, 19)"
     },
     "dark": {
-      "value": "rgb(255, 201, 189)"
-    },
-    "darkest": {
-      "value": "rgb(255, 183, 169)"
+      "value": "rgb(255, 134, 120)"
     }
   },
   "negative-border-color-hover": {
     "prop": "--spectrum-negative-border-color-hover",
     "ref": "var(--spectrum-negative-color-1000)",
     "light": {
-      "value": "rgb(180, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(255, 176, 161)"
-    },
-    "darkest": {
-      "value": "rgb(255, 158, 140)"
+      "value": "rgb(255, 103, 86)"
     }
   },
   "negative-border-color-key-focus": {
     "prop": "--spectrum-negative-border-color-key-focus",
     "ref": "var(--spectrum-negative-color-1000)",
     "light": {
-      "value": "rgb(180, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(255, 176, 161)"
-    },
-    "darkest": {
-      "value": "rgb(255, 158, 140)"
+      "value": "rgb(255, 103, 86)"
     }
   },
   "negative-color-100": {
     "prop": "--spectrum-negative-color-100",
     "ref": "var(--spectrum-red-100)",
     "light": {
-      "value": "rgb(255, 235, 231)"
+      "value": "rgb(255, 246, 245)"
     },
     "dark": {
-      "value": "rgb(123, 0, 0)"
-    },
-    "darkest": {
-      "value": "rgb(87, 0, 0)"
+      "value": "rgb(54, 10, 3)"
     }
   },
   "negative-color-1000": {
     "prop": "--spectrum-negative-color-1000",
     "ref": "var(--spectrum-red-1000)",
     "light": {
-      "value": "rgb(180, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(255, 176, 161)"
-    },
-    "darkest": {
-      "value": "rgb(255, 158, 140)"
+      "value": "rgb(255, 103, 86)"
     }
   },
   "negative-color-1100": {
     "prop": "--spectrum-negative-color-1100",
     "ref": "var(--spectrum-red-1100)",
     "light": {
-      "value": "rgb(147, 0, 0)"
+      "value": "rgb(156, 33, 19)"
     },
     "dark": {
-      "value": "rgb(255, 201, 189)"
-    },
-    "darkest": {
-      "value": "rgb(255, 183, 169)"
+      "value": "rgb(255, 134, 120)"
     }
   },
   "negative-color-1200": {
     "prop": "--spectrum-negative-color-1200",
     "ref": "var(--spectrum-red-1200)",
     "light": {
-      "value": "rgb(116, 0, 0)"
+      "value": "rgb(129, 27, 14)"
     },
     "dark": {
-      "value": "rgb(255, 222, 216)"
-    },
-    "darkest": {
-      "value": "rgb(255, 205, 195)"
+      "value": "rgb(255, 167, 157)"
     }
   },
   "negative-color-1300": {
     "prop": "--spectrum-negative-color-1300",
     "ref": "var(--spectrum-red-1300)",
     "light": {
-      "value": "rgb(89, 0, 0)"
+      "value": "rgb(104, 21, 10)"
     },
     "dark": {
-      "value": "rgb(255, 241, 238)"
-    },
-    "darkest": {
-      "value": "rgb(255, 223, 217)"
+      "value": "rgb(255, 196, 189)"
     }
   },
   "negative-color-1400": {
     "prop": "--spectrum-negative-color-1400",
     "ref": "var(--spectrum-red-1400)",
     "light": {
-      "value": "rgb(67, 0, 0)"
+      "value": "rgb(80, 16, 6)"
+    },
+    "dark": {
+      "value": "rgb(255, 222, 219)"
+    }
+  },
+  "negative-color-1500": {
+    "prop": "--spectrum-negative-color-1500",
+    "ref": "var(--spectrum-red-1500)",
+    "dark": {
+      "value": "rgb(255, 242, 240)"
     },
+    "light": {
+      "value": "rgb(59, 11, 4)"
+    }
+  },
+  "negative-color-1600": {
+    "prop": "--spectrum-negative-color-1600",
+    "ref": "var(--spectrum-red-1600)",
     "dark": {
       "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(255, 237, 234)"
+    "light": {
+      "value": "rgb(29, 5, 2)"
     }
   },
   "negative-color-200": {
     "prop": "--spectrum-negative-color-200",
     "ref": "var(--spectrum-red-200)",
     "light": {
-      "value": "rgb(255, 221, 214)"
+      "value": "rgb(255, 235, 232)"
     },
     "dark": {
-      "value": "rgb(141, 0, 0)"
-    },
-    "darkest": {
-      "value": "rgb(110, 0, 0)"
+      "value": "rgb(68, 13, 5)"
     }
   },
   "negative-color-300": {
     "prop": "--spectrum-negative-color-300",
     "ref": "var(--spectrum-red-300)",
     "light": {
-      "value": "rgb(255, 205, 195)"
+      "value": "rgb(255, 214, 209)"
     },
     "dark": {
-      "value": "rgb(165, 0, 0)"
-    },
-    "darkest": {
-      "value": "rgb(138, 0, 0)"
+      "value": "rgb(87, 17, 7)"
     }
   },
   "negative-color-400": {
     "prop": "--spectrum-negative-color-400",
     "ref": "var(--spectrum-red-400)",
     "light": {
-      "value": "rgb(255, 183, 169)"
+      "value": "rgb(255, 188, 180)"
     },
     "dark": {
-      "value": "rgb(190, 4, 3)"
-    },
-    "darkest": {
-      "value": "rgb(167, 0, 0)"
+      "value": "rgb(115, 24, 11)"
     }
   },
   "negative-color-500": {
     "prop": "--spectrum-negative-color-500",
     "ref": "var(--spectrum-red-500)",
     "light": {
-      "value": "rgb(255, 155, 136)"
+      "value": "rgb(255, 157, 145)"
     },
     "dark": {
-      "value": "rgb(215, 25, 19)"
-    },
-    "darkest": {
-      "value": "rgb(196, 7, 6)"
+      "value": "rgb(147, 31, 17)"
     }
   },
   "negative-color-600": {
     "prop": "--spectrum-negative-color-600",
     "ref": "var(--spectrum-red-600)",
     "light": {
-      "value": "rgb(255, 124, 101)"
+      "value": "rgb(255, 118, 101)"
     },
     "dark": {
-      "value": "rgb(234, 56, 41)"
-    },
-    "darkest": {
-      "value": "rgb(221, 33, 24)"
+      "value": "rgb(177, 38, 23)"
     }
   },
   "negative-color-700": {
     "prop": "--spectrum-negative-color-700",
     "ref": "var(--spectrum-red-700)",
     "light": {
-      "value": "rgb(247, 92, 70)"
+      "value": "rgb(255, 81, 61)"
     },
     "dark": {
-      "value": "rgb(246, 88, 67)"
-    },
-    "darkest": {
-      "value": "rgb(238, 67, 49)"
+      "value": "rgb(205, 46, 29)"
     }
   },
   "negative-color-800": {
     "prop": "--spectrum-negative-color-800",
     "ref": "var(--spectrum-red-800)",
     "light": {
-      "value": "rgb(234, 56, 41)"
+      "value": "rgb(240, 56, 35)"
     },
     "dark": {
-      "value": "rgb(255, 117, 94)"
-    },
-    "darkest": {
-      "value": "rgb(249, 99, 76)"
+      "value": "rgb(223, 52, 34)"
     }
   },
   "negative-color-900": {
     "prop": "--spectrum-negative-color-900",
     "ref": "var(--spectrum-red-900)",
     "light": {
-      "value": "rgb(211, 21, 16)"
+      "value": "rgb(215, 50, 32)"
     },
     "dark": {
-      "value": "rgb(255, 149, 129)"
-    },
-    "darkest": {
-      "value": "rgb(255, 129, 107)"
+      "value": "rgb(252, 67, 46)"
     }
   },
   "negative-content-color-default": {
     "prop": "--spectrum-negative-content-color-default",
     "ref": "var(--spectrum-negative-color-900)",
     "light": {
-      "value": "rgb(211, 21, 16)"
+      "value": "rgb(215, 50, 32)"
     },
     "dark": {
-      "value": "rgb(255, 149, 129)"
-    },
-    "darkest": {
-      "value": "rgb(255, 129, 107)"
+      "value": "rgb(252, 67, 46)"
     }
   },
   "negative-content-color-down": {
     "prop": "--spectrum-negative-content-color-down",
-    "ref": "var(--spectrum-negative-color-1100)",
+    "ref": "var(--spectrum-negative-color-1000)",
     "light": {
-      "value": "rgb(147, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(255, 201, 189)"
-    },
-    "darkest": {
-      "value": "rgb(255, 183, 169)"
+      "value": "rgb(255, 103, 86)"
     }
   },
   "negative-content-color-hover": {
     "prop": "--spectrum-negative-content-color-hover",
     "ref": "var(--spectrum-negative-color-1000)",
     "light": {
-      "value": "rgb(180, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(255, 176, 161)"
-    },
-    "darkest": {
-      "value": "rgb(255, 158, 140)"
+      "value": "rgb(255, 103, 86)"
     }
   },
   "negative-content-color-key-focus": {
     "prop": "--spectrum-negative-content-color-key-focus",
     "ref": "var(--spectrum-negative-color-1000)",
     "light": {
-      "value": "rgb(180, 0, 0)"
+      "value": "rgb(183, 40, 24)"
+    },
+    "dark": {
+      "value": "rgb(255, 103, 86)"
+    }
+  },
+  "negative-subdued-background-color-default": {
+    "prop": "--spectrum-negative-subdued-background-color-default",
+    "ref": "var(--spectrum-negative-color-300)",
+    "light": {
+      "value": "rgb(255, 235, 232)"
+    },
+    "dark": {
+      "value": "rgb(87, 17, 7)"
+    }
+  },
+  "negative-subdued-background-color-down": {
+    "prop": "--spectrum-negative-subdued-background-color-down",
+    "ref": "var(--spectrum-negative-color-300)",
+    "light": {
+      "value": "rgb(255, 214, 209)"
+    },
+    "dark": {
+      "value": "rgb(87, 17, 7)"
+    }
+  },
+  "negative-subdued-background-color-hover": {
+    "prop": "--spectrum-negative-subdued-background-color-hover",
+    "ref": "var(--spectrum-negative-color-300)",
+    "light": {
+      "value": "rgb(255, 214, 209)"
     },
     "dark": {
-      "value": "rgb(255, 176, 161)"
+      "value": "rgb(87, 17, 7)"
+    }
+  },
+  "negative-subdued-background-color-key-focus": {
+    "prop": "--spectrum-negative-subdued-background-color-key-focus",
+    "ref": "var(--spectrum-negative-color-300)",
+    "light": {
+      "value": "rgb(255, 214, 209)"
+    },
+    "dark": {
+      "value": "rgb(87, 17, 7)"
+    }
+  },
+  "negative-subtle-background-color-default": {
+    "prop": "--spectrum-negative-subtle-background-color-default",
+    "ref": "var(--spectrum-negative-color-300)",
+    "light": {
+      "value": "rgb(255, 235, 232)"
     },
-    "darkest": {
-      "value": "rgb(255, 158, 140)"
+    "dark": {
+      "value": "rgb(87, 17, 7)"
     }
   },
   "negative-visual-color": {
     "prop": "--spectrum-negative-visual-color",
-    "ref": "var(--spectrum-negative-color-700)",
+    "ref": "var(--spectrum-negative-color-900)",
     "light": {
-      "value": "rgb(234, 56, 41)"
+      "value": "rgb(240, 56, 35)"
     },
     "dark": {
-      "value": "rgb(246, 88, 67)"
-    },
-    "darkest": {
-      "value": "rgb(238, 67, 49)"
+      "value": "rgb(252, 67, 46)"
     }
   },
   "neutral-background-color-default": {
     "prop": "--spectrum-neutral-background-color-default",
-    "ref": "var(--spectrum-gray-400)",
+    "ref": "var(--spectrum-gray-800)",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(112, 112, 112)"
-    },
-    "darkest": {
-      "value": "rgb(106, 106, 106)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "neutral-background-color-down": {
     "prop": "--spectrum-neutral-background-color-down",
-    "ref": "var(--spectrum-gray-200)",
+    "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(63, 63, 63)"
-    },
-    "darkest": {
-      "value": "rgb(48, 48, 48)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "neutral-background-color-hover": {
     "prop": "--spectrum-neutral-background-color-hover",
-    "ref": "var(--spectrum-gray-300)",
+    "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(84, 84, 84)"
-    },
-    "darkest": {
-      "value": "rgb(75, 75, 75)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "neutral-background-color-key-focus": {
     "prop": "--spectrum-neutral-background-color-key-focus",
-    "ref": "var(--spectrum-gray-300)",
+    "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(84, 84, 84)"
-    },
-    "darkest": {
-      "value": "rgb(75, 75, 75)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "neutral-background-color-selected-default": {
     "prop": "--spectrum-neutral-background-color-selected-default",
-    "ref": "var(--spectrum-gray-800)"
+    "ref": "var(--spectrum-gray-800)",
+    "light": {
+      "value": "rgb(41, 41, 41)"
+    },
+    "dark": {
+      "value": "rgb(219, 219, 219)"
+    }
   },
   "neutral-background-color-selected-down": {
     "prop": "--spectrum-neutral-background-color-selected-down",
-    "ref": "var(--spectrum-gray-900)"
+    "ref": "var(--spectrum-gray-900)",
+    "light": {
+      "value": "rgb(19, 19, 19)"
+    },
+    "dark": {
+      "value": "rgb(242, 242, 242)"
+    }
   },
   "neutral-background-color-selected-hover": {
     "prop": "--spectrum-neutral-background-color-selected-hover",
-    "ref": "var(--spectrum-gray-900)"
+    "ref": "var(--spectrum-gray-900)",
+    "light": {
+      "value": "rgb(19, 19, 19)"
+    },
+    "dark": {
+      "value": "rgb(242, 242, 242)"
+    }
   },
   "neutral-background-color-selected-key-focus": {
     "prop": "--spectrum-neutral-background-color-selected-key-focus",
-    "ref": "var(--spectrum-gray-900)"
+    "ref": "var(--spectrum-gray-900)",
+    "light": {
+      "value": "rgb(19, 19, 19)"
+    },
+    "dark": {
+      "value": "rgb(242, 242, 242)"
+    }
   },
   "neutral-content-color-default": {
     "prop": "--spectrum-neutral-content-color-default",
     "ref": "var(--spectrum-gray-800)",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(235, 235, 235)"
-    },
-    "darkest": {
-      "value": "rgb(235, 235, 235)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "neutral-content-color-down": {
     "prop": "--spectrum-neutral-content-color-down",
     "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "neutral-content-color-focus": {
     "prop": "--spectrum-neutral-content-color-focus",
     "ref": "var(--spectrum-neutral-content-color-down)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "neutral-content-color-focus-hover": {
     "prop": "--spectrum-neutral-content-color-focus-hover",
     "ref": "var(--spectrum-neutral-content-color-down)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "neutral-content-color-hover": {
     "prop": "--spectrum-neutral-content-color-hover",
     "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "neutral-content-color-key-focus": {
     "prop": "--spectrum-neutral-content-color-key-focus",
     "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "neutral-subdued-background-color-default": {
     "prop": "--spectrum-neutral-subdued-background-color-default",
-    "ref": "var(--spectrum-gray-400)",
+    "ref": "var(--spectrum-gray-500)",
     "light": {
-      "value": "rgb(109, 109, 109)"
+      "value": "rgb(80, 80, 80)"
     },
     "dark": {
-      "value": "rgb(112, 112, 112)"
-    },
-    "darkest": {
-      "value": "rgb(106, 106, 106)"
+      "value": "rgb(109, 109, 109)"
     }
   },
   "neutral-subdued-background-color-down": {
     "prop": "--spectrum-neutral-subdued-background-color-down",
-    "ref": "var(--spectrum-gray-200)",
+    "ref": "var(--spectrum-gray-400)",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(63, 63, 63)"
-    },
-    "darkest": {
-      "value": "rgb(48, 48, 48)"
+      "value": "rgb(68, 68, 68)"
     }
   },
   "neutral-subdued-background-color-hover": {
     "prop": "--spectrum-neutral-subdued-background-color-hover",
-    "ref": "var(--spectrum-gray-300)",
+    "ref": "var(--spectrum-gray-400)",
     "light": {
-      "value": "rgb(70, 70, 70)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(84, 84, 84)"
-    },
-    "darkest": {
-      "value": "rgb(75, 75, 75)"
+      "value": "rgb(68, 68, 68)"
     }
   },
   "neutral-subdued-background-color-key-focus": {
     "prop": "--spectrum-neutral-subdued-background-color-key-focus",
-    "ref": "var(--spectrum-gray-300)",
+    "ref": "var(--spectrum-gray-400)",
     "light": {
-      "value": "rgb(70, 70, 70)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(84, 84, 84)"
-    },
-    "darkest": {
-      "value": "rgb(75, 75, 75)"
+      "value": "rgb(68, 68, 68)"
     }
   },
   "neutral-subdued-content-color-default": {
     "prop": "--spectrum-neutral-subdued-content-color-default",
     "ref": "var(--spectrum-gray-700)",
     "light": {
-      "value": "rgb(70, 70, 70)"
+      "value": "rgb(80, 80, 80)"
     },
     "dark": {
-      "value": "rgb(209, 209, 209)"
-    },
-    "darkest": {
-      "value": "rgb(208, 208, 208)"
+      "value": "rgb(175, 175, 175)"
     }
   },
   "neutral-subdued-content-color-down": {
     "prop": "--spectrum-neutral-subdued-content-color-down",
-    "ref": "var(--spectrum-gray-900)",
+    "ref": "var(--spectrum-gray-800)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "neutral-subdued-content-color-hover": {
     "prop": "--spectrum-neutral-subdued-content-color-hover",
     "ref": "var(--spectrum-gray-800)",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(235, 235, 235)"
-    },
-    "darkest": {
-      "value": "rgb(235, 235, 235)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "neutral-subdued-content-color-key-focus": {
     "prop": "--spectrum-neutral-subdued-content-color-key-focus",
     "ref": "var(--spectrum-gray-800)",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(235, 235, 235)"
-    },
-    "darkest": {
-      "value": "rgb(235, 235, 235)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "neutral-subdued-content-color-selected": {
     "prop": "--spectrum-neutral-subdued-content-color-selected",
     "ref": "var(--spectrum-neutral-subdued-content-color-down)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(219, 219, 219)"
+    }
+  },
+  "neutral-subtle-background-color-default": {
+    "prop": "--spectrum-neutral-subtle-background-color-default",
+    "ref": "var(--spectrum-gray-300)",
+    "light": {
+      "value": "rgb(233, 233, 233)"
     },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+    "dark": {
+      "value": "rgb(57, 57, 57)"
     }
   },
   "neutral-visual-color": {
     "prop": "--spectrum-neutral-visual-color",
     "ref": "var(--spectrum-gray-600)",
     "light": {
-      "value": "rgb(144, 144, 144)"
+      "value": "rgb(143, 143, 143)"
     },
     "dark": {
-      "value": "rgb(178, 178, 178)"
-    },
-    "darkest": {
-      "value": "rgb(176, 176, 176)"
+      "value": "rgb(138, 138, 138)"
     }
   },
   "notice-background-color-default": {
     "prop": "--spectrum-notice-background-color-default",
-    "ref": "var(--spectrum-notice-color-800)",
-    "light": {
-      "value": "rgb(246, 133, 17)"
-    },
+    "ref": "var(--spectrum-notice-color-600)",
     "dark": {
-      "value": "rgb(244, 129, 12)"
+      "value": "rgb(224, 100, 0)"
     },
-    "darkest": {
-      "value": "rgb(232, 116, 0)"
+    "light": {
+      "value": "rgb(252, 125, 0)"
     }
   },
   "notice-color-100": {
     "prop": "--spectrum-notice-color-100",
     "ref": "var(--spectrum-orange-100)",
     "light": {
-      "value": "rgb(255, 236, 204)"
+      "value": "rgb(255, 246, 231)"
     },
     "dark": {
-      "value": "rgb(102, 37, 0)"
-    },
-    "darkest": {
-      "value": "rgb(72, 24, 1)"
+      "value": "rgb(49, 16, 0)"
     }
   },
   "notice-color-1000": {
     "prop": "--spectrum-notice-color-1000",
     "ref": "var(--spectrum-orange-1000)",
     "light": {
-      "value": "rgb(149, 61, 0)"
+      "value": "rgb(167, 62, 0)"
     },
     "dark": {
-      "value": "rgb(255, 181, 88)"
-    },
-    "darkest": {
-      "value": "rgb(255, 162, 59)"
+      "value": "rgb(243, 117, 0)"
     }
   },
   "notice-color-1100": {
     "prop": "--spectrum-notice-color-1100",
     "ref": "var(--spectrum-orange-1100)",
     "light": {
-      "value": "rgb(122, 47, 0)"
+      "value": "rgb(144, 51, 0)"
     },
     "dark": {
-      "value": "rgb(253, 206, 136)"
-    },
-    "darkest": {
-      "value": "rgb(255, 188, 102)"
+      "value": "rgb(255, 137, 0)"
     }
   },
   "notice-color-1200": {
     "prop": "--spectrum-notice-color-1200",
     "ref": "var(--spectrum-orange-1200)",
     "light": {
-      "value": "rgb(97, 35, 0)"
+      "value": "rgb(118, 41, 0)"
     },
     "dark": {
-      "value": "rgb(255, 225, 179)"
-    },
-    "darkest": {
-      "value": "rgb(253, 210, 145)"
+      "value": "rgb(255, 173, 45)"
     }
   },
   "notice-color-1300": {
     "prop": "--spectrum-notice-color-1300",
     "ref": "var(--spectrum-orange-1300)",
     "light": {
-      "value": "rgb(73, 25, 1)"
+      "value": "rgb(95, 32, 0)"
     },
     "dark": {
-      "value": "rgb(255, 242, 221)"
-    },
-    "darkest": {
-      "value": "rgb(255, 226, 181)"
+      "value": "rgb(255, 201, 116)"
     }
   },
   "notice-color-1400": {
     "prop": "--spectrum-notice-color-1400",
     "ref": "var(--spectrum-orange-1400)",
     "light": {
-      "value": "rgb(53, 18, 1)"
+      "value": "rgb(73, 24, 0)"
+    },
+    "dark": {
+      "value": "rgb(255, 225, 178)"
+    }
+  },
+  "notice-color-1500": {
+    "prop": "--spectrum-notice-color-1500",
+    "ref": "var(--spectrum-orange-1500)",
+    "dark": {
+      "value": "rgb(255, 243, 225)"
     },
+    "light": {
+      "value": "rgb(52, 18, 0)"
+    }
+  },
+  "notice-color-1600": {
+    "prop": "--spectrum-notice-color-1600",
+    "ref": "var(--spectrum-orange-1600)",
     "dark": {
-      "value": "rgb(255, 253, 249)"
+      "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(255, 239, 213)"
+    "light": {
+      "value": "rgb(25, 8, 0)"
     }
   },
   "notice-color-200": {
     "prop": "--spectrum-notice-color-200",
     "ref": "var(--spectrum-orange-200)",
     "light": {
-      "value": "rgb(255, 223, 173)"
+      "value": "rgb(255, 236, 207)"
     },
     "dark": {
-      "value": "rgb(117, 45, 0)"
-    },
-    "darkest": {
-      "value": "rgb(92, 32, 0)"
+      "value": "rgb(61, 21, 0)"
     }
   },
   "notice-color-300": {
     "prop": "--spectrum-notice-color-300",
     "ref": "var(--spectrum-orange-300)",
     "light": {
-      "value": "rgb(253, 210, 145)"
+      "value": "rgb(255, 218, 158)"
     },
     "dark": {
-      "value": "rgb(137, 55, 0)"
-    },
-    "darkest": {
-      "value": "rgb(115, 43, 0)"
+      "value": "rgb(80, 27, 0)"
     }
   },
   "notice-color-400": {
     "prop": "--spectrum-notice-color-400",
     "ref": "var(--spectrum-orange-400)",
     "light": {
-      "value": "rgb(255, 187, 99)"
+      "value": "rgb(255, 193, 94)"
     },
     "dark": {
-      "value": "rgb(158, 66, 0)"
-    },
-    "darkest": {
-      "value": "rgb(138, 55, 0)"
+      "value": "rgb(106, 36, 0)"
     }
   },
   "notice-color-500": {
     "prop": "--spectrum-notice-color-500",
     "ref": "var(--spectrum-orange-500)",
     "light": {
-      "value": "rgb(255, 160, 55)"
+      "value": "rgb(255, 162, 19)"
     },
     "dark": {
-      "value": "rgb(180, 78, 0)"
-    },
-    "darkest": {
-      "value": "rgb(162, 68, 0)"
+      "value": "rgb(135, 47, 0)"
     }
   },
   "notice-color-600": {
     "prop": "--spectrum-notice-color-600",
     "ref": "var(--spectrum-orange-600)",
     "light": {
-      "value": "rgb(246, 133, 17)"
+      "value": "rgb(252, 125, 0)"
     },
     "dark": {
-      "value": "rgb(202, 93, 0)"
-    },
-    "darkest": {
-      "value": "rgb(186, 82, 0)"
+      "value": "rgb(162, 59, 0)"
     }
   },
   "notice-color-700": {
     "prop": "--spectrum-notice-color-700",
     "ref": "var(--spectrum-orange-700)",
     "light": {
-      "value": "rgb(228, 111, 0)"
+      "value": "rgb(232, 106, 0)"
     },
     "dark": {
-      "value": "rgb(225, 109, 0)"
-    },
-    "darkest": {
-      "value": "rgb(210, 98, 0)"
+      "value": "rgb(185, 73, 0)"
     }
   },
   "notice-color-800": {
     "prop": "--spectrum-notice-color-800",
     "ref": "var(--spectrum-orange-800)",
     "light": {
-      "value": "rgb(203, 93, 0)"
+      "value": "rgb(212, 91, 0)"
     },
     "dark": {
-      "value": "rgb(244, 129, 12)"
-    },
-    "darkest": {
-      "value": "rgb(232, 116, 0)"
+      "value": "rgb(199, 82, 0)"
     }
   },
   "notice-color-900": {
     "prop": "--spectrum-notice-color-900",
     "ref": "var(--spectrum-orange-900)",
     "light": {
-      "value": "rgb(177, 76, 0)"
+      "value": "rgb(194, 78, 0)"
     },
     "dark": {
-      "value": "rgb(254, 154, 46)"
+      "value": "rgb(224, 100, 0)"
+    }
+  },
+  "notice-subtle-background-color-default": {
+    "prop": "--spectrum-notice-subtle-background-color-default",
+    "ref": "var(--spectrum-notice-color-300)",
+    "light": {
+      "value": "rgb(255, 236, 207)"
     },
-    "darkest": {
-      "value": "rgb(249, 137, 23)"
+    "dark": {
+      "value": "rgb(80, 27, 0)"
     }
   },
   "notice-visual-color": {
     "prop": "--spectrum-notice-visual-color",
     "ref": "var(--spectrum-notice-color-900)",
     "light": {
-      "value": "rgb(228, 111, 0)"
+      "value": "rgb(212, 91, 0)"
     },
     "dark": {
-      "value": "rgb(254, 154, 46)"
-    },
-    "darkest": {
-      "value": "rgb(249, 137, 23)"
+      "value": "rgb(224, 100, 0)"
     }
   },
   "opacity-checkerboard-square-dark": {
     "prop": "--spectrum-opacity-checkerboard-square-dark",
     "ref": "var(--spectrum-gray-800)",
     "light": {
-      "value": "rgb(230, 230, 230)"
+      "value": "rgb(225, 225, 225)"
     },
     "dark": {
-      "value": "rgb(235, 235, 235)"
-    },
-    "darkest": {
-      "value": "rgb(235, 235, 235)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "opacity-checkerboard-square-light": {
     "prop": "--spectrum-opacity-checkerboard-square-light",
     "ref": "var(--spectrum-white)",
-    "value": "rgb(255, 255, 255)"
+    "light": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    }
   },
   "opacity-checkerboard-square-size": {
     "prop": "--spectrum-opacity-checkerboard-square-size",
@@ -7906,195 +8325,175 @@
   "orange-100": {
     "prop": "--spectrum-orange-100",
     "light": {
-      "value": "rgb(255, 236, 204)"
+      "value": "rgb(255, 246, 231)"
     },
     "dark": {
-      "value": "rgb(102, 37, 0)"
-    },
-    "darkest": {
-      "value": "rgb(72, 24, 1)"
+      "value": "rgb(49, 16, 0)"
     }
   },
   "orange-1000": {
     "prop": "--spectrum-orange-1000",
     "light": {
-      "value": "rgb(149, 61, 0)"
+      "value": "rgb(167, 62, 0)"
     },
     "dark": {
-      "value": "rgb(255, 181, 88)"
-    },
-    "darkest": {
-      "value": "rgb(255, 162, 59)"
+      "value": "rgb(243, 117, 0)"
     }
   },
   "orange-1100": {
     "prop": "--spectrum-orange-1100",
     "light": {
-      "value": "rgb(122, 47, 0)"
+      "value": "rgb(144, 51, 0)"
     },
     "dark": {
-      "value": "rgb(253, 206, 136)"
-    },
-    "darkest": {
-      "value": "rgb(255, 188, 102)"
+      "value": "rgb(255, 137, 0)"
     }
   },
   "orange-1200": {
     "prop": "--spectrum-orange-1200",
     "light": {
-      "value": "rgb(97, 35, 0)"
+      "value": "rgb(118, 41, 0)"
     },
     "dark": {
-      "value": "rgb(255, 225, 179)"
-    },
-    "darkest": {
-      "value": "rgb(253, 210, 145)"
+      "value": "rgb(255, 173, 45)"
     }
   },
   "orange-1300": {
     "prop": "--spectrum-orange-1300",
     "light": {
-      "value": "rgb(73, 25, 1)"
+      "value": "rgb(95, 32, 0)"
     },
     "dark": {
-      "value": "rgb(255, 242, 221)"
-    },
-    "darkest": {
-      "value": "rgb(255, 226, 181)"
+      "value": "rgb(255, 201, 116)"
     }
   },
   "orange-1400": {
     "prop": "--spectrum-orange-1400",
     "light": {
-      "value": "rgb(53, 18, 1)"
+      "value": "rgb(73, 24, 0)"
     },
     "dark": {
-      "value": "rgb(255, 253, 249)"
+      "value": "rgb(255, 225, 178)"
+    }
+  },
+  "orange-1500": {
+    "prop": "--spectrum-orange-1500",
+    "dark": {
+      "value": "rgb(255, 243, 225)"
+    },
+    "light": {
+      "value": "rgb(52, 18, 0)"
+    }
+  },
+  "orange-1600": {
+    "prop": "--spectrum-orange-1600",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(255, 239, 213)"
+    "light": {
+      "value": "rgb(25, 8, 0)"
     }
   },
   "orange-200": {
     "prop": "--spectrum-orange-200",
     "light": {
-      "value": "rgb(255, 223, 173)"
+      "value": "rgb(255, 236, 207)"
     },
     "dark": {
-      "value": "rgb(117, 45, 0)"
-    },
-    "darkest": {
-      "value": "rgb(92, 32, 0)"
+      "value": "rgb(61, 21, 0)"
     }
   },
   "orange-300": {
     "prop": "--spectrum-orange-300",
     "light": {
-      "value": "rgb(253, 210, 145)"
+      "value": "rgb(255, 218, 158)"
     },
     "dark": {
-      "value": "rgb(137, 55, 0)"
-    },
-    "darkest": {
-      "value": "rgb(115, 43, 0)"
+      "value": "rgb(80, 27, 0)"
     }
   },
   "orange-400": {
     "prop": "--spectrum-orange-400",
     "light": {
-      "value": "rgb(255, 187, 99)"
+      "value": "rgb(255, 193, 94)"
     },
     "dark": {
-      "value": "rgb(158, 66, 0)"
-    },
-    "darkest": {
-      "value": "rgb(138, 55, 0)"
+      "value": "rgb(106, 36, 0)"
     }
   },
   "orange-500": {
     "prop": "--spectrum-orange-500",
     "light": {
-      "value": "rgb(255, 160, 55)"
+      "value": "rgb(255, 162, 19)"
     },
     "dark": {
-      "value": "rgb(180, 78, 0)"
-    },
-    "darkest": {
-      "value": "rgb(162, 68, 0)"
+      "value": "rgb(135, 47, 0)"
     }
   },
   "orange-600": {
     "prop": "--spectrum-orange-600",
     "light": {
-      "value": "rgb(246, 133, 17)"
+      "value": "rgb(252, 125, 0)"
     },
     "dark": {
-      "value": "rgb(202, 93, 0)"
-    },
-    "darkest": {
-      "value": "rgb(186, 82, 0)"
+      "value": "rgb(162, 59, 0)"
     }
   },
   "orange-700": {
     "prop": "--spectrum-orange-700",
     "light": {
-      "value": "rgb(228, 111, 0)"
+      "value": "rgb(232, 106, 0)"
     },
     "dark": {
-      "value": "rgb(225, 109, 0)"
-    },
-    "darkest": {
-      "value": "rgb(210, 98, 0)"
+      "value": "rgb(185, 73, 0)"
     }
   },
   "orange-800": {
     "prop": "--spectrum-orange-800",
     "light": {
-      "value": "rgb(203, 93, 0)"
+      "value": "rgb(212, 91, 0)"
     },
     "dark": {
-      "value": "rgb(244, 129, 12)"
-    },
-    "darkest": {
-      "value": "rgb(232, 116, 0)"
+      "value": "rgb(199, 82, 0)"
     }
   },
   "orange-900": {
     "prop": "--spectrum-orange-900",
     "light": {
-      "value": "rgb(177, 76, 0)"
+      "value": "rgb(194, 78, 0)"
     },
     "dark": {
-      "value": "rgb(254, 154, 46)"
-    },
-    "darkest": {
-      "value": "rgb(249, 137, 23)"
+      "value": "rgb(224, 100, 0)"
     }
   },
   "orange-background-color-default": {
     "prop": "--spectrum-orange-background-color-default",
-    "ref": "var(--spectrum-orange-800)",
+    "ref": "var(--spectrum-orange-900)",
     "light": {
-      "value": "rgb(246, 133, 17)"
+      "value": "rgb(252, 125, 0)"
     },
     "dark": {
-      "value": "rgb(244, 129, 12)"
+      "value": "rgb(224, 100, 0)"
+    }
+  },
+  "orange-subtle-background-color-default": {
+    "prop": "--spectrum-orange-subtle-background-color-default",
+    "ref": "var(--spectrum-orange-300)",
+    "light": {
+      "value": "rgb(255, 236, 207)"
     },
-    "darkest": {
-      "value": "rgb(232, 116, 0)"
+    "dark": {
+      "value": "rgb(80, 27, 0)"
     }
   },
   "orange-visual-color": {
     "prop": "--spectrum-orange-visual-color",
     "ref": "var(--spectrum-orange-900)",
     "light": {
-      "value": "rgb(228, 111, 0)"
+      "value": "rgb(232, 106, 0)"
     },
     "dark": {
-      "value": "rgb(254, 154, 46)"
-    },
-    "darkest": {
-      "value": "rgb(249, 137, 23)"
+      "value": "rgb(224, 100, 0)"
     }
   },
   "overlay-color": {
@@ -8108,21 +8507,13 @@
       "value": "0.4"
     },
     "dark": {
-      "value": "0.5"
-    },
-    "darkest": {
       "value": "0.6"
     }
   },
   "picker-border-width": {
     "prop": "--spectrum-picker-border-width",
     "ref": "var(--spectrum-border-width-100)",
-    "spectrum": {
-      "value": "1px"
-    },
-    "express": {
-      "value": "0"
-    }
+    "value": "1px"
   },
   "picker-end-edge-to-disclosure-icon-quiet": {
     "prop": "--spectrum-picker-end-edge-to-disclosure-icon-quiet",
@@ -8173,6 +8564,180 @@
       "value": "9px"
     }
   },
+  "pink-100": {
+    "prop": "--spectrum-pink-100",
+    "dark": {
+      "value": "rgb(58, 0, 37)"
+    },
+    "light": {
+      "value": "rgb(255, 246, 252)"
+    }
+  },
+  "pink-1000": {
+    "prop": "--spectrum-pink-1000",
+    "dark": {
+      "value": "rgb(251, 90, 196)"
+    },
+    "light": {
+      "value": "rgb(176, 31, 123)"
+    }
+  },
+  "pink-1100": {
+    "prop": "--spectrum-pink-1100",
+    "dark": {
+      "value": "rgb(255, 122, 210)"
+    },
+    "light": {
+      "value": "rgb(152, 22, 104)"
+    }
+  },
+  "pink-1200": {
+    "prop": "--spectrum-pink-1200",
+    "dark": {
+      "value": "rgb(255, 159, 223)"
+    },
+    "light": {
+      "value": "rgb(128, 12, 85)"
+    }
+  },
+  "pink-1300": {
+    "prop": "--spectrum-pink-1300",
+    "dark": {
+      "value": "rgb(255, 191, 234)"
+    },
+    "light": {
+      "value": "rgb(105, 3, 68)"
+    }
+  },
+  "pink-1400": {
+    "prop": "--spectrum-pink-1400",
+    "dark": {
+      "value": "rgb(255, 219, 243)"
+    },
+    "light": {
+      "value": "rgb(83, 0, 53)"
+    }
+  },
+  "pink-1500": {
+    "prop": "--spectrum-pink-1500",
+    "dark": {
+      "value": "rgb(255, 241, 250)"
+    },
+    "light": {
+      "value": "rgb(62, 0, 39)"
+    }
+  },
+  "pink-1600": {
+    "prop": "--spectrum-pink-1600",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "light": {
+      "value": "rgb(33, 0, 21)"
+    }
+  },
+  "pink-200": {
+    "prop": "--spectrum-pink-200",
+    "dark": {
+      "value": "rgb(71, 0, 44)"
+    },
+    "light": {
+      "value": "rgb(255, 232, 247)"
+    }
+  },
+  "pink-300": {
+    "prop": "--spectrum-pink-300",
+    "dark": {
+      "value": "rgb(90, 0, 57)"
+    },
+    "light": {
+      "value": "rgb(255, 211, 240)"
+    }
+  },
+  "pink-400": {
+    "prop": "--spectrum-pink-400",
+    "dark": {
+      "value": "rgb(115, 7, 75)"
+    },
+    "light": {
+      "value": "rgb(255, 181, 230)"
+    }
+  },
+  "pink-500": {
+    "prop": "--spectrum-pink-500",
+    "dark": {
+      "value": "rgb(143, 18, 97)"
+    },
+    "light": {
+      "value": "rgb(255, 148, 219)"
+    }
+  },
+  "pink-600": {
+    "prop": "--spectrum-pink-600",
+    "dark": {
+      "value": "rgb(171, 29, 119)"
+    },
+    "light": {
+      "value": "rgb(255, 103, 204)"
+    }
+  },
+  "pink-700": {
+    "prop": "--spectrum-pink-700",
+    "dark": {
+      "value": "rgb(196, 39, 138)"
+    },
+    "light": {
+      "value": "rgb(242, 76, 184)"
+    }
+  },
+  "pink-800": {
+    "prop": "--spectrum-pink-800",
+    "dark": {
+      "value": "rgb(213, 45, 151)"
+    },
+    "light": {
+      "value": "rgb(228, 52, 163)"
+    }
+  },
+  "pink-900": {
+    "prop": "--spectrum-pink-900",
+    "dark": {
+      "value": "rgb(236, 67, 175)"
+    },
+    "light": {
+      "value": "rgb(206, 42, 146)"
+    }
+  },
+  "pink-background-color-default": {
+    "prop": "--spectrum-pink-background-color-default",
+    "ref": "var(--spectrum-pink-800)",
+    "light": {
+      "value": "rgb(206, 42, 146)"
+    },
+    "dark": {
+      "value": "rgb(213, 45, 151)"
+    }
+  },
+  "pink-subtle-background-color-default": {
+    "prop": "--spectrum-pink-subtle-background-color-default",
+    "ref": "var(--spectrum-pink-300)",
+    "light": {
+      "value": "rgb(255, 232, 247)"
+    },
+    "dark": {
+      "value": "rgb(90, 0, 57)"
+    }
+  },
+  "pink-visual-color": {
+    "prop": "--spectrum-pink-visual-color",
+    "ref": "var(--spectrum-pink-900)",
+    "light": {
+      "value": "rgb(228, 52, 163)"
+    },
+    "dark": {
+      "value": "rgb(236, 67, 175)"
+    }
+  },
   "popover-tip-height": {
     "prop": "--spectrum-popover-tip-height",
     "value": "8px"
@@ -8192,249 +8757,222 @@
   },
   "positive-background-color-default": {
     "prop": "--spectrum-positive-background-color-default",
-    "ref": "var(--spectrum-positive-color-600)",
+    "ref": "var(--spectrum-positive-color-800)",
     "light": {
-      "value": "rgb(0, 122, 77)"
+      "value": "rgb(5, 131, 78)"
     },
     "dark": {
-      "value": "rgb(0, 125, 78)"
-    },
-    "darkest": {
-      "value": "rgb(0, 130, 82)"
+      "value": "rgb(6, 136, 80)"
     }
   },
   "positive-background-color-down": {
     "prop": "--spectrum-positive-background-color-down",
-    "ref": "var(--spectrum-positive-color-400)",
+    "ref": "var(--spectrum-positive-color-700)",
     "light": {
-      "value": "rgb(0, 81, 50)"
+      "value": "rgb(3, 110, 69)"
     },
     "dark": {
-      "value": "rgb(0, 92, 56)"
-    },
-    "darkest": {
-      "value": "rgb(0, 93, 57)"
+      "value": "rgb(4, 124, 75)"
     }
   },
   "positive-background-color-hover": {
     "prop": "--spectrum-positive-background-color-hover",
-    "ref": "var(--spectrum-positive-color-500)",
+    "ref": "var(--spectrum-positive-color-700)",
     "light": {
-      "value": "rgb(0, 101, 62)"
+      "value": "rgb(3, 110, 69)"
     },
     "dark": {
-      "value": "rgb(0, 108, 67)"
-    },
-    "darkest": {
-      "value": "rgb(0, 111, 69)"
+      "value": "rgb(4, 124, 75)"
     }
   },
   "positive-background-color-key-focus": {
     "prop": "--spectrum-positive-background-color-key-focus",
-    "ref": "var(--spectrum-positive-color-500)",
+    "ref": "var(--spectrum-positive-color-700)",
     "light": {
-      "value": "rgb(0, 101, 62)"
+      "value": "rgb(3, 110, 69)"
     },
     "dark": {
-      "value": "rgb(0, 108, 67)"
-    },
-    "darkest": {
-      "value": "rgb(0, 111, 69)"
+      "value": "rgb(4, 124, 75)"
     }
   },
   "positive-color-100": {
     "prop": "--spectrum-positive-color-100",
     "ref": "var(--spectrum-green-100)",
     "light": {
-      "value": "rgb(206, 248, 224)"
+      "value": "rgb(237, 252, 241)"
     },
     "dark": {
-      "value": "rgb(4, 67, 41)"
-    },
-    "darkest": {
-      "value": "rgb(10, 44, 28)"
+      "value": "rgb(0, 30, 23)"
     }
   },
   "positive-color-1000": {
     "prop": "--spectrum-positive-color-1000",
     "ref": "var(--spectrum-green-1000)",
     "light": {
-      "value": "rgb(0, 101, 62)"
+      "value": "rgb(3, 110, 69)"
     },
     "dark": {
-      "value": "rgb(94, 217, 162)"
-    },
-    "darkest": {
-      "value": "rgb(75, 205, 149)"
+      "value": "rgb(14, 175, 98)"
     }
   },
   "positive-color-1100": {
     "prop": "--spectrum-positive-color-1100",
     "ref": "var(--spectrum-green-1100)",
     "light": {
-      "value": "rgb(0, 81, 50)"
+      "value": "rgb(2, 93, 60)"
     },
     "dark": {
-      "value": "rgb(129, 233, 184)"
-    },
-    "darkest": {
-      "value": "rgb(103, 222, 168)"
+      "value": "rgb(24, 193, 110)"
     }
   },
   "positive-color-1200": {
     "prop": "--spectrum-positive-color-1200",
     "ref": "var(--spectrum-green-1200)",
     "light": {
-      "value": "rgb(5, 63, 39)"
+      "value": "rgb(1, 76, 52)"
     },
     "dark": {
-      "value": "rgb(177, 244, 209)"
-    },
-    "darkest": {
-      "value": "rgb(137, 236, 188)"
+      "value": "rgb(57, 215, 134)"
     }
   },
   "positive-color-1300": {
     "prop": "--spectrum-positive-color-1300",
     "ref": "var(--spectrum-green-1300)",
     "light": {
-      "value": "rgb(10, 46, 29)"
+      "value": "rgb(0, 61, 44)"
     },
     "dark": {
-      "value": "rgb(223, 250, 234)"
-    },
-    "darkest": {
-      "value": "rgb(177, 244, 209)"
+      "value": "rgb(126, 231, 172)"
     }
   },
   "positive-color-1400": {
     "prop": "--spectrum-positive-color-1400",
     "ref": "var(--spectrum-green-1400)",
     "light": {
-      "value": "rgb(10, 32, 21)"
+      "value": "rgb(0, 46, 34)"
     },
     "dark": {
-      "value": "rgb(254, 255, 252)"
-    },
-    "darkest": {
-      "value": "rgb(214, 249, 228)"
+      "value": "rgb(189, 241, 208)"
     }
   },
-  "positive-color-200": {
-    "prop": "--spectrum-positive-color-200",
-    "ref": "var(--spectrum-green-200)",
-    "light": {
-      "value": "rgb(173, 244, 206)"
-    },
+  "positive-color-1500": {
+    "prop": "--spectrum-positive-color-1500",
+    "ref": "var(--spectrum-green-1500)",
     "dark": {
-      "value": "rgb(0, 78, 47)"
+      "value": "rgb(229, 250, 236)"
     },
-    "darkest": {
-      "value": "rgb(7, 59, 36)"
+    "light": {
+      "value": "rgb(0, 33, 25)"
+    }
+  },
+  "positive-color-1600": {
+    "prop": "--spectrum-positive-color-1600",
+    "ref": "var(--spectrum-green-1600)",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "light": {
+      "value": "rgb(0, 15, 12)"
+    }
+  },
+  "positive-color-200": {
+    "prop": "--spectrum-positive-color-200",
+    "ref": "var(--spectrum-green-200)",
+    "light": {
+      "value": "rgb(215, 247, 225)"
+    },
+    "dark": {
+      "value": "rgb(0, 38, 29)"
     }
   },
   "positive-color-300": {
     "prop": "--spectrum-positive-color-300",
     "ref": "var(--spectrum-green-300)",
     "light": {
-      "value": "rgb(137, 236, 188)"
+      "value": "rgb(173, 238, 197)"
     },
     "dark": {
-      "value": "rgb(0, 92, 56)"
-    },
-    "darkest": {
-      "value": "rgb(0, 76, 46)"
+      "value": "rgb(0, 51, 38)"
     }
   },
   "positive-color-400": {
     "prop": "--spectrum-positive-color-400",
     "ref": "var(--spectrum-green-400)",
     "light": {
-      "value": "rgb(103, 222, 168)"
+      "value": "rgb(107, 227, 162)"
     },
     "dark": {
-      "value": "rgb(0, 108, 67)"
-    },
-    "darkest": {
-      "value": "rgb(0, 93, 57)"
+      "value": "rgb(0, 68, 48)"
     }
   },
   "positive-color-500": {
     "prop": "--spectrum-positive-color-500",
     "ref": "var(--spectrum-green-500)",
     "light": {
-      "value": "rgb(73, 204, 147)"
+      "value": "rgb(43, 209, 125)"
     },
     "dark": {
-      "value": "rgb(0, 125, 78)"
-    },
-    "darkest": {
-      "value": "rgb(0, 111, 69)"
+      "value": "rgb(2, 87, 58)"
     }
   },
   "positive-color-600": {
     "prop": "--spectrum-positive-color-600",
     "ref": "var(--spectrum-green-600)",
     "light": {
-      "value": "rgb(47, 184, 128)"
+      "value": "rgb(18, 184, 103)"
     },
     "dark": {
-      "value": "rgb(0, 143, 93)"
-    },
-    "darkest": {
-      "value": "rgb(0, 130, 82)"
+      "value": "rgb(3, 106, 67)"
     }
   },
   "positive-color-700": {
     "prop": "--spectrum-positive-color-700",
     "ref": "var(--spectrum-green-700)",
     "light": {
-      "value": "rgb(21, 164, 110)"
+      "value": "rgb(11, 164, 93)"
     },
     "dark": {
-      "value": "rgb(18, 162, 108)"
-    },
-    "darkest": {
-      "value": "rgb(0, 149, 98)"
+      "value": "rgb(4, 124, 75)"
     }
   },
   "positive-color-800": {
     "prop": "--spectrum-positive-color-800",
     "ref": "var(--spectrum-green-800)",
     "light": {
-      "value": "rgb(0, 143, 93)"
+      "value": "rgb(7, 147, 85)"
     },
     "dark": {
-      "value": "rgb(43, 180, 125)"
-    },
-    "darkest": {
-      "value": "rgb(28, 168, 114)"
+      "value": "rgb(6, 136, 80)"
     }
   },
   "positive-color-900": {
     "prop": "--spectrum-positive-color-900",
     "ref": "var(--spectrum-green-900)",
     "light": {
-      "value": "rgb(0, 122, 77)"
+      "value": "rgb(5, 131, 78)"
     },
     "dark": {
-      "value": "rgb(67, 199, 143)"
+      "value": "rgb(9, 157, 89)"
+    }
+  },
+  "positive-subtle-background-color-default": {
+    "prop": "--spectrum-positive-subtle-background-color-default",
+    "ref": "var(--spectrum-positive-color-300)",
+    "light": {
+      "value": "rgb(215, 247, 225)"
     },
-    "darkest": {
-      "value": "rgb(52, 187, 132)"
+    "dark": {
+      "value": "rgb(0, 51, 38)"
     }
   },
   "positive-visual-color": {
     "prop": "--spectrum-positive-visual-color",
-    "ref": "var(--spectrum-positive-color-800)",
+    "ref": "var(--spectrum-positive-color-900)",
     "light": {
-      "value": "rgb(21, 164, 110)"
+      "value": "rgb(7, 147, 85)"
     },
     "dark": {
-      "value": "rgb(43, 180, 125)"
-    },
-    "darkest": {
-      "value": "rgb(28, 168, 114)"
+      "value": "rgb(9, 157, 89)"
     }
   },
   "progress-bar-maximum-width": {
@@ -8538,224 +9076,252 @@
   "purple-100": {
     "prop": "--spectrum-purple-100",
     "light": {
-      "value": "rgb(246, 235, 255)"
+      "value": "rgb(251, 247, 254)"
     },
     "dark": {
-      "value": "rgb(76, 13, 157)"
-    },
-    "darkest": {
-      "value": "rgb(50, 16, 104)"
+      "value": "rgb(41, 0, 79)"
     }
   },
   "purple-1000": {
     "prop": "--spectrum-purple-1000",
     "light": {
-      "value": "rgb(115, 38, 211)"
+      "value": "rgb(134, 40, 217)"
     },
     "dark": {
-      "value": "rgb(215, 182, 254)"
-    },
-    "darkest": {
-      "value": "rgb(206, 166, 253)"
+      "value": "rgb(186, 127, 237)"
     }
   },
   "purple-1100": {
     "prop": "--spectrum-purple-1100",
     "light": {
-      "value": "rgb(93, 19, 183)"
+      "value": "rgb(115, 13, 204)"
     },
     "dark": {
-      "value": "rgb(228, 204, 254)"
-    },
-    "darkest": {
-      "value": "rgb(219, 188, 254)"
+      "value": "rgb(197, 149, 240)"
     }
   },
   "purple-1200": {
     "prop": "--spectrum-purple-1200",
     "light": {
-      "value": "rgb(71, 12, 148)"
+      "value": "rgb(93, 0, 177)"
     },
     "dark": {
-      "value": "rgb(239, 223, 255)"
-    },
-    "darkest": {
-      "value": "rgb(230, 207, 255)"
+      "value": "rgb(212, 176, 244)"
     }
   },
   "purple-1300": {
     "prop": "--spectrum-purple-1300",
     "light": {
-      "value": "rgb(51, 16, 106)"
+      "value": "rgb(75, 0, 144)"
     },
     "dark": {
-      "value": "rgb(249, 240, 255)"
-    },
-    "darkest": {
-      "value": "rgb(240, 224, 255)"
+      "value": "rgb(225, 201, 247)"
     }
   },
   "purple-1400": {
     "prop": "--spectrum-purple-1400",
     "light": {
-      "value": "rgb(35, 15, 73)"
+      "value": "rgb(59, 0, 111)"
+    },
+    "dark": {
+      "value": "rgb(238, 224, 250)"
+    }
+  },
+  "purple-1500": {
+    "prop": "--spectrum-purple-1500",
+    "dark": {
+      "value": "rgb(248, 243, 253)"
     },
+    "light": {
+      "value": "rgb(44, 0, 84)"
+    }
+  },
+  "purple-1600": {
+    "prop": "--spectrum-purple-1600",
     "dark": {
-      "value": "rgb(255, 253, 255)"
+      "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(248, 237, 255)"
+    "light": {
+      "value": "rgb(23, 0, 45)"
     }
   },
   "purple-200": {
     "prop": "--spectrum-purple-200",
     "light": {
-      "value": "rgb(238, 221, 255)"
+      "value": "rgb(244, 235, 252)"
     },
     "dark": {
-      "value": "rgb(89, 17, 177)"
-    },
-    "darkest": {
-      "value": "rgb(67, 13, 140)"
+      "value": "rgb(50, 0, 96)"
     }
   },
   "purple-300": {
     "prop": "--spectrum-purple-300",
     "light": {
-      "value": "rgb(230, 208, 255)"
+      "value": "rgb(235, 218, 249)"
     },
     "dark": {
-      "value": "rgb(105, 28, 200)"
-    },
-    "darkest": {
-      "value": "rgb(86, 16, 173)"
+      "value": "rgb(64, 0, 122)"
     }
   },
   "purple-400": {
     "prop": "--spectrum-purple-400",
     "light": {
-      "value": "rgb(219, 187, 254)"
+      "value": "rgb(221, 193, 246)"
     },
     "dark": {
-      "value": "rgb(122, 45, 218)"
-    },
-    "darkest": {
-      "value": "rgb(106, 29, 200)"
+      "value": "rgb(83, 0, 159)"
     }
   },
   "purple-500": {
     "prop": "--spectrum-purple-500",
     "light": {
-      "value": "rgb(204, 164, 253)"
+      "value": "rgb(208, 167, 243)"
     },
     "dark": {
-      "value": "rgb(140, 65, 233)"
-    },
-    "darkest": {
-      "value": "rgb(126, 49, 222)"
+      "value": "rgb(107, 6, 195)"
     }
   },
   "purple-600": {
     "prop": "--spectrum-purple-600",
     "light": {
-      "value": "rgb(189, 139, 252)"
+      "value": "rgb(191, 138, 238)"
     },
     "dark": {
-      "value": "rgb(157, 87, 243)"
-    },
-    "darkest": {
-      "value": "rgb(145, 70, 236)"
+      "value": "rgb(130, 34, 215)"
     }
   },
   "purple-700": {
     "prop": "--spectrum-purple-700",
     "light": {
-      "value": "rgb(174, 114, 249)"
+      "value": "rgb(178, 114, 235)"
     },
     "dark": {
-      "value": "rgb(172, 111, 249)"
-    },
-    "darkest": {
-      "value": "rgb(162, 94, 246)"
+      "value": "rgb(148, 62, 224)"
     }
   },
   "purple-800": {
     "prop": "--spectrum-purple-800",
     "light": {
-      "value": "rgb(157, 87, 244)"
+      "value": "rgb(166, 92, 231)"
     },
     "dark": {
-      "value": "rgb(187, 135, 251)"
-    },
-    "darkest": {
-      "value": "rgb(178, 119, 250)"
+      "value": "rgb(157, 78, 228)"
     }
   },
   "purple-900": {
     "prop": "--spectrum-purple-900",
     "light": {
-      "value": "rgb(137, 61, 231)"
+      "value": "rgb(154, 71, 226)"
     },
     "dark": {
-      "value": "rgb(202, 159, 252)"
-    },
-    "darkest": {
-      "value": "rgb(192, 143, 252)"
+      "value": "rgb(173, 105, 233)"
     }
   },
   "purple-background-color-default": {
     "prop": "--spectrum-purple-background-color-default",
-    "ref": "var(--spectrum-purple-700)",
+    "ref": "var(--spectrum-purple-800)",
     "light": {
-      "value": "rgb(137, 61, 231)"
+      "value": "rgb(154, 71, 226)"
     },
     "dark": {
-      "value": "rgb(172, 111, 249)"
+      "value": "rgb(157, 78, 228)"
+    }
+  },
+  "purple-subtle-background-color-default": {
+    "prop": "--spectrum-purple-subtle-background-color-default",
+    "ref": "var(--spectrum-purple-300)",
+    "light": {
+      "value": "rgb(244, 235, 252)"
     },
-    "darkest": {
-      "value": "rgb(162, 94, 246)"
+    "dark": {
+      "value": "rgb(64, 0, 122)"
     }
   },
   "purple-visual-color": {
     "prop": "--spectrum-purple-visual-color",
     "ref": "var(--spectrum-purple-900)",
     "light": {
-      "value": "rgb(157, 87, 244)"
+      "value": "rgb(166, 92, 231)"
     },
     "dark": {
-      "value": "rgb(202, 159, 252)"
-    },
-    "darkest": {
-      "value": "rgb(192, 143, 252)"
+      "value": "rgb(173, 105, 233)"
     }
   },
   "radio-button-control-size-extra-large": {
-    "prop": "--spectrum-radio-button-control-size-extra-large"
+    "prop": "--spectrum-radio-button-control-size-extra-large",
+    "desktop": {
+      "value": "18px"
+    },
+    "mobile": {
+      "value": "22px"
+    }
   },
   "radio-button-control-size-large": {
-    "prop": "--spectrum-radio-button-control-size-large"
+    "prop": "--spectrum-radio-button-control-size-large",
+    "desktop": {
+      "value": "16px"
+    },
+    "mobile": {
+      "value": "20px"
+    }
   },
   "radio-button-control-size-medium": {
-    "prop": "--spectrum-radio-button-control-size-medium"
+    "prop": "--spectrum-radio-button-control-size-medium",
+    "desktop": {
+      "value": "14px"
+    },
+    "mobile": {
+      "value": "18px"
+    }
   },
   "radio-button-control-size-small": {
-    "prop": "--spectrum-radio-button-control-size-small"
+    "prop": "--spectrum-radio-button-control-size-small",
+    "desktop": {
+      "value": "12px"
+    },
+    "mobile": {
+      "value": "16px"
+    }
   },
   "radio-button-selection-indicator": {
     "prop": "--spectrum-radio-button-selection-indicator",
     "value": "4px"
   },
   "radio-button-top-to-control-extra-large": {
-    "prop": "--spectrum-radio-button-top-to-control-extra-large"
+    "prop": "--spectrum-radio-button-top-to-control-extra-large",
+    "desktop": {
+      "value": "15px"
+    },
+    "mobile": {
+      "value": "19px"
+    }
   },
   "radio-button-top-to-control-large": {
-    "prop": "--spectrum-radio-button-top-to-control-large"
+    "prop": "--spectrum-radio-button-top-to-control-large",
+    "desktop": {
+      "value": "12px"
+    },
+    "mobile": {
+      "value": "15px"
+    }
   },
   "radio-button-top-to-control-medium": {
-    "prop": "--spectrum-radio-button-top-to-control-medium"
+    "prop": "--spectrum-radio-button-top-to-control-medium",
+    "desktop": {
+      "value": "9px"
+    },
+    "mobile": {
+      "value": "11px"
+    }
   },
   "radio-button-top-to-control-small": {
-    "prop": "--spectrum-radio-button-top-to-control-small"
+    "prop": "--spectrum-radio-button-top-to-control-small",
+    "desktop": {
+      "value": "6px"
+    },
+    "mobile": {
+      "value": "7px"
+    }
   },
   "rating-indicator-to-icon": {
     "prop": "--spectrum-rating-indicator-to-icon",
@@ -8778,195 +9344,175 @@
   "red-100": {
     "prop": "--spectrum-red-100",
     "light": {
-      "value": "rgb(255, 235, 231)"
+      "value": "rgb(255, 246, 245)"
     },
     "dark": {
-      "value": "rgb(123, 0, 0)"
-    },
-    "darkest": {
-      "value": "rgb(87, 0, 0)"
+      "value": "rgb(54, 10, 3)"
     }
   },
   "red-1000": {
     "prop": "--spectrum-red-1000",
     "light": {
-      "value": "rgb(180, 0, 0)"
+      "value": "rgb(183, 40, 24)"
     },
     "dark": {
-      "value": "rgb(255, 176, 161)"
-    },
-    "darkest": {
-      "value": "rgb(255, 158, 140)"
+      "value": "rgb(255, 103, 86)"
     }
   },
   "red-1100": {
     "prop": "--spectrum-red-1100",
     "light": {
-      "value": "rgb(147, 0, 0)"
+      "value": "rgb(156, 33, 19)"
     },
     "dark": {
-      "value": "rgb(255, 201, 189)"
-    },
-    "darkest": {
-      "value": "rgb(255, 183, 169)"
+      "value": "rgb(255, 134, 120)"
     }
   },
   "red-1200": {
     "prop": "--spectrum-red-1200",
     "light": {
-      "value": "rgb(116, 0, 0)"
+      "value": "rgb(129, 27, 14)"
     },
     "dark": {
-      "value": "rgb(255, 222, 216)"
-    },
-    "darkest": {
-      "value": "rgb(255, 205, 195)"
+      "value": "rgb(255, 167, 157)"
     }
   },
   "red-1300": {
     "prop": "--spectrum-red-1300",
     "light": {
-      "value": "rgb(89, 0, 0)"
+      "value": "rgb(104, 21, 10)"
     },
     "dark": {
-      "value": "rgb(255, 241, 238)"
-    },
-    "darkest": {
-      "value": "rgb(255, 223, 217)"
+      "value": "rgb(255, 196, 189)"
     }
   },
   "red-1400": {
     "prop": "--spectrum-red-1400",
     "light": {
-      "value": "rgb(67, 0, 0)"
+      "value": "rgb(80, 16, 6)"
+    },
+    "dark": {
+      "value": "rgb(255, 222, 219)"
+    }
+  },
+  "red-1500": {
+    "prop": "--spectrum-red-1500",
+    "dark": {
+      "value": "rgb(255, 242, 240)"
     },
+    "light": {
+      "value": "rgb(59, 11, 4)"
+    }
+  },
+  "red-1600": {
+    "prop": "--spectrum-red-1600",
     "dark": {
       "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(255, 237, 234)"
+    "light": {
+      "value": "rgb(29, 5, 2)"
     }
   },
   "red-200": {
     "prop": "--spectrum-red-200",
     "light": {
-      "value": "rgb(255, 221, 214)"
+      "value": "rgb(255, 235, 232)"
     },
     "dark": {
-      "value": "rgb(141, 0, 0)"
-    },
-    "darkest": {
-      "value": "rgb(110, 0, 0)"
+      "value": "rgb(68, 13, 5)"
     }
   },
   "red-300": {
     "prop": "--spectrum-red-300",
     "light": {
-      "value": "rgb(255, 205, 195)"
+      "value": "rgb(255, 214, 209)"
     },
     "dark": {
-      "value": "rgb(165, 0, 0)"
-    },
-    "darkest": {
-      "value": "rgb(138, 0, 0)"
+      "value": "rgb(87, 17, 7)"
     }
   },
   "red-400": {
     "prop": "--spectrum-red-400",
     "light": {
-      "value": "rgb(255, 183, 169)"
+      "value": "rgb(255, 188, 180)"
     },
     "dark": {
-      "value": "rgb(190, 4, 3)"
-    },
-    "darkest": {
-      "value": "rgb(167, 0, 0)"
+      "value": "rgb(115, 24, 11)"
     }
   },
   "red-500": {
     "prop": "--spectrum-red-500",
     "light": {
-      "value": "rgb(255, 155, 136)"
+      "value": "rgb(255, 157, 145)"
     },
     "dark": {
-      "value": "rgb(215, 25, 19)"
-    },
-    "darkest": {
-      "value": "rgb(196, 7, 6)"
+      "value": "rgb(147, 31, 17)"
     }
   },
   "red-600": {
     "prop": "--spectrum-red-600",
     "light": {
-      "value": "rgb(255, 124, 101)"
+      "value": "rgb(255, 118, 101)"
     },
     "dark": {
-      "value": "rgb(234, 56, 41)"
-    },
-    "darkest": {
-      "value": "rgb(221, 33, 24)"
+      "value": "rgb(177, 38, 23)"
     }
   },
   "red-700": {
     "prop": "--spectrum-red-700",
     "light": {
-      "value": "rgb(247, 92, 70)"
+      "value": "rgb(255, 81, 61)"
     },
     "dark": {
-      "value": "rgb(246, 88, 67)"
-    },
-    "darkest": {
-      "value": "rgb(238, 67, 49)"
+      "value": "rgb(205, 46, 29)"
     }
   },
   "red-800": {
     "prop": "--spectrum-red-800",
     "light": {
-      "value": "rgb(234, 56, 41)"
+      "value": "rgb(240, 56, 35)"
     },
     "dark": {
-      "value": "rgb(255, 117, 94)"
-    },
-    "darkest": {
-      "value": "rgb(249, 99, 76)"
+      "value": "rgb(223, 52, 34)"
     }
   },
   "red-900": {
     "prop": "--spectrum-red-900",
     "light": {
-      "value": "rgb(211, 21, 16)"
+      "value": "rgb(215, 50, 32)"
     },
     "dark": {
-      "value": "rgb(255, 149, 129)"
-    },
-    "darkest": {
-      "value": "rgb(255, 129, 107)"
+      "value": "rgb(252, 67, 46)"
     }
   },
   "red-background-color-default": {
     "prop": "--spectrum-red-background-color-default",
-    "ref": "var(--spectrum-red-700)",
+    "ref": "var(--spectrum-red-800)",
     "light": {
-      "value": "rgb(211, 21, 16)"
+      "value": "rgb(215, 50, 32)"
     },
     "dark": {
-      "value": "rgb(246, 88, 67)"
+      "value": "rgb(223, 52, 34)"
+    }
+  },
+  "red-subtle-background-color-default": {
+    "prop": "--spectrum-red-subtle-background-color-default",
+    "ref": "var(--spectrum-red-300)",
+    "light": {
+      "value": "rgb(255, 235, 232)"
     },
-    "darkest": {
-      "value": "rgb(238, 67, 49)"
+    "dark": {
+      "value": "rgb(87, 17, 7)"
     }
   },
   "red-visual-color": {
     "prop": "--spectrum-red-visual-color",
     "ref": "var(--spectrum-red-700)",
     "light": {
-      "value": "rgb(234, 56, 41)"
+      "value": "rgb(240, 56, 35)"
     },
     "dark": {
-      "value": "rgb(246, 88, 67)"
-    },
-    "darkest": {
-      "value": "rgb(238, 67, 49)"
+      "value": "rgb(205, 46, 29)"
     }
   },
   "regular-font-weight": {
@@ -8980,195 +9526,175 @@
   "seafoam-100": {
     "prop": "--spectrum-seafoam-100",
     "light": {
-      "value": "rgb(206, 247, 243)"
+      "value": "rgb(235, 251, 246)"
     },
     "dark": {
-      "value": "rgb(18, 65, 63)"
-    },
-    "darkest": {
-      "value": "rgb(18, 43, 42)"
+      "value": "rgb(0, 30, 27)"
     }
   },
   "seafoam-1000": {
     "prop": "--spectrum-seafoam-1000",
     "light": {
-      "value": "rgb(0, 99, 95)"
+      "value": "rgb(5, 108, 92)"
     },
     "dark": {
-      "value": "rgb(93, 214, 207)"
-    },
-    "darkest": {
-      "value": "rgb(66, 202, 195)"
+      "value": "rgb(12, 173, 142)"
     }
   },
   "seafoam-1100": {
     "prop": "--spectrum-seafoam-1100",
     "light": {
-      "value": "rgb(12, 79, 76)"
+      "value": "rgb(3, 92, 80)"
     },
     "dark": {
-      "value": "rgb(132, 230, 223)"
-    },
-    "darkest": {
-      "value": "rgb(102, 218, 211)"
+      "value": "rgb(14, 190, 156)"
     }
   },
   "seafoam-1200": {
     "prop": "--spectrum-seafoam-1200",
     "light": {
-      "value": "rgb(18, 60, 58)"
+      "value": "rgb(1, 75, 67)"
     },
     "dark": {
-      "value": "rgb(176, 242, 236)"
-    },
-    "darkest": {
-      "value": "rgb(139, 232, 225)"
+      "value": "rgb(29, 214, 176)"
     }
   },
   "seafoam-1300": {
     "prop": "--spectrum-seafoam-1300",
     "light": {
-      "value": "rgb(18, 44, 43)"
+      "value": "rgb(0, 60, 54)"
     },
     "dark": {
-      "value": "rgb(223, 249, 246)"
-    },
-    "darkest": {
-      "value": "rgb(179, 242, 237)"
+      "value": "rgb(122, 229, 203)"
     }
   },
   "seafoam-1400": {
     "prop": "--spectrum-seafoam-1400",
     "light": {
-      "value": "rgb(15, 31, 30)"
+      "value": "rgb(0, 46, 40)"
+    },
+    "dark": {
+      "value": "rgb(186, 241, 222)"
+    }
+  },
+  "seafoam-1500": {
+    "prop": "--spectrum-seafoam-1500",
+    "dark": {
+      "value": "rgb(229, 249, 243)"
     },
+    "light": {
+      "value": "rgb(0, 33, 29)"
+    }
+  },
+  "seafoam-1600": {
+    "prop": "--spectrum-seafoam-1600",
     "dark": {
-      "value": "rgb(254, 255, 254)"
+      "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(215, 248, 244)"
+    "light": {
+      "value": "rgb(0, 15, 14)"
     }
   },
   "seafoam-200": {
     "prop": "--spectrum-seafoam-200",
     "light": {
-      "value": "rgb(170, 241, 234)"
+      "value": "rgb(211, 246, 234)"
     },
     "dark": {
-      "value": "rgb(14, 76, 73)"
-    },
-    "darkest": {
-      "value": "rgb(19, 57, 55)"
+      "value": "rgb(0, 39, 35)"
     }
   },
   "seafoam-300": {
     "prop": "--spectrum-seafoam-300",
     "light": {
-      "value": "rgb(140, 233, 226)"
+      "value": "rgb(169, 237, 216)"
     },
     "dark": {
-      "value": "rgb(4, 90, 87)"
-    },
-    "darkest": {
-      "value": "rgb(16, 73, 70)"
+      "value": "rgb(0, 50, 44)"
     }
   },
   "seafoam-400": {
     "prop": "--spectrum-seafoam-400",
     "light": {
-      "value": "rgb(101, 218, 210)"
+      "value": "rgb(92, 225, 194)"
     },
     "dark": {
-      "value": "rgb(0, 105, 101)"
-    },
-    "darkest": {
-      "value": "rgb(3, 91, 88)"
+      "value": "rgb(0, 67, 59)"
     }
   },
   "seafoam-500": {
     "prop": "--spectrum-seafoam-500",
     "light": {
-      "value": "rgb(63, 201, 193)"
+      "value": "rgb(16, 207, 169)"
     },
     "dark": {
-      "value": "rgb(0, 122, 117)"
-    },
-    "darkest": {
-      "value": "rgb(0, 108, 104)"
+      "value": "rgb(2, 86, 75)"
     }
   },
   "seafoam-600": {
     "prop": "--spectrum-seafoam-600",
     "light": {
-      "value": "rgb(15, 181, 174)"
+      "value": "rgb(13, 181, 149)"
     },
     "dark": {
-      "value": "rgb(0, 140, 135)"
-    },
-    "darkest": {
-      "value": "rgb(0, 127, 121)"
+      "value": "rgb(4, 105, 89)"
     }
   },
   "seafoam-700": {
     "prop": "--spectrum-seafoam-700",
     "light": {
-      "value": "rgb(0, 161, 154)"
+      "value": "rgb(11, 162, 134)"
     },
     "dark": {
-      "value": "rgb(0, 158, 152)"
-    },
-    "darkest": {
-      "value": "rgb(0, 146, 140)"
+      "value": "rgb(6, 122, 103)"
     }
   },
   "seafoam-800": {
     "prop": "--spectrum-seafoam-800",
     "light": {
-      "value": "rgb(0, 140, 135)"
+      "value": "rgb(9, 144, 120)"
     },
     "dark": {
-      "value": "rgb(3, 178, 171)"
-    },
-    "darkest": {
-      "value": "rgb(0, 165, 159)"
+      "value": "rgb(8, 134, 112)"
     }
   },
   "seafoam-900": {
     "prop": "--spectrum-seafoam-900",
     "light": {
-      "value": "rgb(0, 119, 114)"
+      "value": "rgb(7, 129, 109)"
     },
     "dark": {
-      "value": "rgb(54, 197, 189)"
-    },
-    "darkest": {
-      "value": "rgb(26, 185, 178)"
+      "value": "rgb(10, 154, 128)"
     }
   },
   "seafoam-background-color-default": {
     "prop": "--spectrum-seafoam-background-color-default",
-    "ref": "var(--spectrum-seafoam-700)",
+    "ref": "var(--spectrum-seafoam-800)",
     "light": {
-      "value": "rgb(0, 119, 114)"
+      "value": "rgb(7, 129, 109)"
     },
     "dark": {
-      "value": "rgb(0, 158, 152)"
+      "value": "rgb(8, 134, 112)"
+    }
+  },
+  "seafoam-subtle-background-color-default": {
+    "prop": "--spectrum-seafoam-subtle-background-color-default",
+    "ref": "var(--spectrum-seafoam-300)",
+    "light": {
+      "value": "rgb(211, 246, 234)"
     },
-    "darkest": {
-      "value": "rgb(0, 146, 140)"
+    "dark": {
+      "value": "rgb(0, 50, 44)"
     }
   },
   "seafoam-visual-color": {
     "prop": "--spectrum-seafoam-visual-color",
     "ref": "var(--spectrum-seafoam-800)",
     "light": {
-      "value": "rgb(0, 161, 154)"
+      "value": "rgb(11, 162, 134)"
     },
     "dark": {
-      "value": "rgb(3, 178, 171)"
-    },
-    "darkest": {
-      "value": "rgb(0, 165, 159)"
+      "value": "rgb(8, 134, 112)"
     }
   },
   "search-field-minimum-width-multiplier": {
@@ -9323,107 +9849,367 @@
       "value": "77px"
     }
   },
-  "slider-bottom-to-handle-extra-large": {
-    "prop": "--spectrum-slider-bottom-to-handle-extra-large"
-  },
-  "slider-bottom-to-handle-large": {
-    "prop": "--spectrum-slider-bottom-to-handle-large"
+  "silver-100": {
+    "prop": "--spectrum-silver-100",
+    "dark": {
+      "value": "rgb(26, 26, 26)"
+    },
+    "light": {
+      "value": "rgb(247, 247, 247)"
+    }
   },
-  "slider-bottom-to-handle-medium": {
-    "prop": "--spectrum-slider-bottom-to-handle-medium"
+  "silver-1000": {
+    "prop": "--spectrum-silver-1000",
+    "dark": {
+      "value": "rgb(152, 152, 152)"
+    },
+    "light": {
+      "value": "rgb(96, 96, 96)"
+    }
   },
-  "slider-bottom-to-handle-small": {
-    "prop": "--spectrum-slider-bottom-to-handle-small"
+  "silver-1100": {
+    "prop": "--spectrum-silver-1100",
+    "dark": {
+      "value": "rgb(169, 169, 169)"
+    },
+    "light": {
+      "value": "rgb(81, 81, 81)"
+    }
   },
-  "slider-control-height-extra-large": {
-    "prop": "--spectrum-slider-control-height-extra-large"
+  "silver-1200": {
+    "prop": "--spectrum-silver-1200",
+    "dark": {
+      "value": "rgb(190, 190, 190)"
+    },
+    "light": {
+      "value": "rgb(66, 66, 66)"
+    }
   },
-  "slider-control-height-large": {
-    "prop": "--spectrum-slider-control-height-large"
+  "silver-1300": {
+    "prop": "--spectrum-silver-1300",
+    "dark": {
+      "value": "rgb(211, 211, 211)"
+    },
+    "light": {
+      "value": "rgb(52, 52, 52)"
+    }
   },
-  "slider-control-height-medium": {
-    "prop": "--spectrum-slider-control-height-medium"
+  "silver-1400": {
+    "prop": "--spectrum-silver-1400",
+    "dark": {
+      "value": "rgb(229, 229, 229)"
+    },
+    "light": {
+      "value": "rgb(39, 39, 39)"
+    }
   },
-  "slider-control-height-small": {
-    "prop": "--spectrum-slider-control-height-small"
+  "silver-1500": {
+    "prop": "--spectrum-silver-1500",
+    "dark": {
+      "value": "rgb(244, 244, 244)"
+    },
+    "light": {
+      "value": "rgb(28, 28, 28)"
+    }
   },
-  "slider-control-to-field-label-extra-large": {
-    "prop": "--spectrum-slider-control-to-field-label-extra-large",
-    "desktop": {
-      "value": "14px"
+  "silver-1600": {
+    "prop": "--spectrum-silver-1600",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
     },
-    "mobile": {
-      "value": "17px"
+    "light": {
+      "value": "rgb(12, 12, 12)"
     }
   },
-  "slider-control-to-field-label-large": {
-    "prop": "--spectrum-slider-control-to-field-label-large",
-    "desktop": {
-      "value": "11px"
+  "silver-200": {
+    "prop": "--spectrum-silver-200",
+    "dark": {
+      "value": "rgb(33, 33, 33)"
     },
-    "mobile": {
-      "value": "14px"
+    "light": {
+      "value": "rgb(239, 239, 239)"
     }
   },
-  "slider-control-to-field-label-medium": {
-    "prop": "--spectrum-slider-control-to-field-label-medium",
-    "desktop": {
-      "value": "8px"
+  "silver-300": {
+    "prop": "--spectrum-silver-300",
+    "dark": {
+      "value": "rgb(44, 44, 44)"
     },
-    "mobile": {
-      "value": "10px"
+    "light": {
+      "value": "rgb(223, 223, 223)"
     }
   },
-  "slider-control-to-field-label-small": {
-    "prop": "--spectrum-slider-control-to-field-label-small",
-    "desktop": {
-      "value": "5px"
+  "silver-400": {
+    "prop": "--spectrum-silver-400",
+    "dark": {
+      "value": "rgb(59, 59, 59)"
     },
-    "mobile": {
-      "value": "6px"
+    "light": {
+      "value": "rgb(204, 204, 204)"
     }
   },
-  "slider-handle-border-width-down-extra-large": {
-    "prop": "--spectrum-slider-handle-border-width-down-extra-large"
+  "silver-500": {
+    "prop": "--spectrum-silver-500",
+    "dark": {
+      "value": "rgb(76, 76, 76)"
+    },
+    "light": {
+      "value": "rgb(183, 183, 183)"
+    }
   },
-  "slider-handle-border-width-down-large": {
-    "prop": "--spectrum-slider-handle-border-width-down-large"
+  "silver-600": {
+    "prop": "--spectrum-silver-600",
+    "dark": {
+      "value": "rgb(92, 92, 92)"
+    },
+    "light": {
+      "value": "rgb(160, 160, 160)"
+    }
   },
-  "slider-handle-border-width-down-medium": {
-    "prop": "--spectrum-slider-handle-border-width-down-medium"
+  "silver-700": {
+    "prop": "--spectrum-silver-700",
+    "dark": {
+      "value": "rgb(108, 108, 108)"
+    },
+    "light": {
+      "value": "rgb(143, 143, 143)"
+    }
   },
-  "slider-handle-border-width-down-small": {
-    "prop": "--spectrum-slider-handle-border-width-down-small"
+  "silver-800": {
+    "prop": "--spectrum-silver-800",
+    "dark": {
+      "value": "rgb(118, 118, 118)"
+    },
+    "light": {
+      "value": "rgb(128, 128, 128)"
+    }
   },
-  "slider-handle-gap": {
-    "prop": "--spectrum-slider-handle-gap",
-    "spectrum": {
-      "value": "4px"
+  "silver-900": {
+    "prop": "--spectrum-silver-900",
+    "dark": {
+      "value": "rgb(137, 137, 137)"
     },
-    "express": {
-      "value": "0px"
+    "light": {
+      "value": "rgb(114, 114, 114)"
     }
   },
+  "silver-background-color-default": {
+    "prop": "--spectrum-silver-background-color-default",
+    "ref": "var(--spectrum-silver-800)",
+    "light": {
+      "value": "rgb(114, 114, 114)"
+    },
+    "dark": {
+      "value": "rgb(118, 118, 118)"
+    }
+  },
+  "silver-subtle-background-color-default": {
+    "prop": "--spectrum-silver-subtle-background-color-default",
+    "ref": "var(--spectrum-silver-300)",
+    "light": {
+      "value": "rgb(239, 239, 239)"
+    },
+    "dark": {
+      "value": "rgb(44, 44, 44)"
+    }
+  },
+  "silver-visual-color": {
+    "prop": "--spectrum-silver-visual-color",
+    "ref": "var(--spectrum-silver-900)",
+    "light": {
+      "value": "rgb(128, 128, 128)"
+    },
+    "dark": {
+      "value": "rgb(137, 137, 137)"
+    }
+  },
+  "slider-bottom-to-handle-extra-large": {
+    "prop": "--spectrum-slider-bottom-to-handle-extra-large",
+    "desktop": {
+      "value": "14px"
+    },
+    "mobile": {
+      "value": "17px"
+    }
+  },
+  "slider-bottom-to-handle-large": {
+    "prop": "--spectrum-slider-bottom-to-handle-large",
+    "desktop": {
+      "value": "11px"
+    },
+    "mobile": {
+      "value": "14px"
+    }
+  },
+  "slider-bottom-to-handle-medium": {
+    "prop": "--spectrum-slider-bottom-to-handle-medium",
+    "desktop": {
+      "value": "8px"
+    },
+    "mobile": {
+      "value": "10px"
+    }
+  },
+  "slider-bottom-to-handle-small": {
+    "prop": "--spectrum-slider-bottom-to-handle-small",
+    "desktop": {
+      "value": "5px"
+    },
+    "mobile": {
+      "value": "6px"
+    }
+  },
+  "slider-control-height-extra-large": {
+    "prop": "--spectrum-slider-control-height-extra-large",
+    "desktop": {
+      "value": "20px"
+    },
+    "mobile": {
+      "value": "26px"
+    }
+  },
+  "slider-control-height-large": {
+    "prop": "--spectrum-slider-control-height-large",
+    "desktop": {
+      "value": "18px"
+    },
+    "mobile": {
+      "value": "22px"
+    }
+  },
+  "slider-control-height-medium": {
+    "prop": "--spectrum-slider-control-height-medium",
+    "desktop": {
+      "value": "16px"
+    },
+    "mobile": {
+      "value": "20px"
+    }
+  },
+  "slider-control-height-small": {
+    "prop": "--spectrum-slider-control-height-small",
+    "desktop": {
+      "value": "14px"
+    },
+    "mobile": {
+      "value": "18px"
+    }
+  },
+  "slider-control-to-field-label-extra-large": {
+    "prop": "--spectrum-slider-control-to-field-label-extra-large",
+    "desktop": {
+      "value": "14px"
+    },
+    "mobile": {
+      "value": "17px"
+    }
+  },
+  "slider-control-to-field-label-large": {
+    "prop": "--spectrum-slider-control-to-field-label-large",
+    "desktop": {
+      "value": "11px"
+    },
+    "mobile": {
+      "value": "14px"
+    }
+  },
+  "slider-control-to-field-label-medium": {
+    "prop": "--spectrum-slider-control-to-field-label-medium",
+    "desktop": {
+      "value": "8px"
+    },
+    "mobile": {
+      "value": "10px"
+    }
+  },
+  "slider-control-to-field-label-small": {
+    "prop": "--spectrum-slider-control-to-field-label-small",
+    "desktop": {
+      "value": "5px"
+    },
+    "mobile": {
+      "value": "6px"
+    }
+  },
+  "slider-handle-border-width-down-extra-large": {
+    "prop": "--spectrum-slider-handle-border-width-down-extra-large",
+    "desktop": {
+      "value": "8px"
+    },
+    "mobile": {
+      "value": "11px"
+    }
+  },
+  "slider-handle-border-width-down-large": {
+    "prop": "--spectrum-slider-handle-border-width-down-large",
+    "desktop": {
+      "value": "7px"
+    },
+    "mobile": {
+      "value": "9px"
+    }
+  },
+  "slider-handle-border-width-down-medium": {
+    "prop": "--spectrum-slider-handle-border-width-down-medium",
+    "desktop": {
+      "value": "6px"
+    },
+    "mobile": {
+      "value": "8px"
+    }
+  },
+  "slider-handle-border-width-down-small": {
+    "prop": "--spectrum-slider-handle-border-width-down-small",
+    "desktop": {
+      "value": "5px"
+    },
+    "mobile": {
+      "value": "7px"
+    }
+  },
+  "slider-handle-gap": {
+    "prop": "--spectrum-slider-handle-gap",
+    "value": "4px"
+  },
   "slider-handle-size-extra-large": {
-    "prop": "--spectrum-slider-handle-size-extra-large"
+    "prop": "--spectrum-slider-handle-size-extra-large",
+    "desktop": {
+      "value": "20px"
+    },
+    "mobile": {
+      "value": "26px"
+    }
   },
   "slider-handle-size-large": {
-    "prop": "--spectrum-slider-handle-size-large"
+    "prop": "--spectrum-slider-handle-size-large",
+    "desktop": {
+      "value": "18px"
+    },
+    "mobile": {
+      "value": "22px"
+    }
   },
   "slider-handle-size-medium": {
-    "prop": "--spectrum-slider-handle-size-medium"
+    "prop": "--spectrum-slider-handle-size-medium",
+    "desktop": {
+      "value": "16px"
+    },
+    "mobile": {
+      "value": "20px"
+    }
   },
   "slider-handle-size-small": {
-    "prop": "--spectrum-slider-handle-size-small"
+    "prop": "--spectrum-slider-handle-size-small",
+    "desktop": {
+      "value": "14px"
+    },
+    "mobile": {
+      "value": "18px"
+    }
   },
   "slider-track-thickness": {
     "prop": "--spectrum-slider-track-thickness",
-    "spectrum": {
-      "value": "2px"
-    },
-    "express": {
-      "value": "4px"
-    }
+    "value": "2px"
   },
   "spacing-100": {
     "prop": "--spectrum-spacing-100",
@@ -9478,10 +10264,70 @@
     "ref": "var(--spectrum-black)",
     "value": "rgb(0, 0, 0)"
   },
+  "static-black-text-color": {
+    "prop": "--spectrum-static-black-text-color",
+    "ref": "var(--spectrum-black)",
+    "value": "rgb(0, 0, 0)"
+  },
+  "static-black-track-color": {
+    "prop": "--spectrum-static-black-track-color",
+    "ref": "var(--spectrum-transparent-black-300)",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    }
+  },
+  "static-black-track-indicator-color": {
+    "prop": "--spectrum-static-black-track-indicator-color",
+    "ref": "var(--spectrum-transparent-black-900)",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.93)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.93)"
+    }
+  },
   "static-white-focus-indicator-color": {
     "prop": "--spectrum-static-white-focus-indicator-color",
     "ref": "var(--spectrum-white)",
-    "value": "rgb(255, 255, 255)"
+    "light": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    }
+  },
+  "static-white-text-color": {
+    "prop": "--spectrum-static-white-text-color",
+    "ref": "var(--spectrum-white)",
+    "light": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    }
+  },
+  "static-white-track-color": {
+    "prop": "--spectrum-static-white-track-color",
+    "ref": "var(--spectrum-transparent-white-300)",
+    "light": {
+      "value": "rgba(255, 255, 255, 0.17)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.17)"
+    }
+  },
+  "static-white-track-indicator-color": {
+    "prop": "--spectrum-static-white-track-indicator-color",
+    "ref": "var(--spectrum-transparent-white-900)",
+    "light": {
+      "value": "rgba(255, 255, 255, 0.94)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.94)"
+    }
   },
   "status-light-dot-size-extra-large": {
     "prop": "--spectrum-status-light-dot-size-extra-large",
@@ -9554,13 +10400,10 @@
     "prop": "--spectrum-swatch-border-color",
     "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "swatch-border-opacity": {
@@ -9633,40 +10476,112 @@
     "value": "3px"
   },
   "switch-control-height-extra-large": {
-    "prop": "--spectrum-switch-control-height-extra-large"
+    "prop": "--spectrum-switch-control-height-extra-large",
+    "desktop": {
+      "value": "18px"
+    },
+    "mobile": {
+      "value": "22px"
+    }
   },
   "switch-control-height-large": {
-    "prop": "--spectrum-switch-control-height-large"
+    "prop": "--spectrum-switch-control-height-large",
+    "desktop": {
+      "value": "16px"
+    },
+    "mobile": {
+      "value": "20px"
+    }
   },
   "switch-control-height-medium": {
-    "prop": "--spectrum-switch-control-height-medium"
+    "prop": "--spectrum-switch-control-height-medium",
+    "desktop": {
+      "value": "14px"
+    },
+    "mobile": {
+      "value": "18px"
+    }
   },
   "switch-control-height-small": {
-    "prop": "--spectrum-switch-control-height-small"
+    "prop": "--spectrum-switch-control-height-small",
+    "desktop": {
+      "value": "12px"
+    },
+    "mobile": {
+      "value": "16px"
+    }
   },
   "switch-control-width-extra-large": {
-    "prop": "--spectrum-switch-control-width-extra-large"
+    "prop": "--spectrum-switch-control-width-extra-large",
+    "desktop": {
+      "value": "33px"
+    },
+    "mobile": {
+      "value": "46px"
+    }
   },
   "switch-control-width-large": {
-    "prop": "--spectrum-switch-control-width-large"
-  },
+    "prop": "--spectrum-switch-control-width-large",
+    "desktop": {
+      "value": "29px"
+    },
+    "mobile": {
+      "value": "41px"
+    }
+  },
   "switch-control-width-medium": {
-    "prop": "--spectrum-switch-control-width-medium"
+    "prop": "--spectrum-switch-control-width-medium",
+    "desktop": {
+      "value": "26px"
+    },
+    "mobile": {
+      "value": "36px"
+    }
   },
   "switch-control-width-small": {
-    "prop": "--spectrum-switch-control-width-small"
+    "prop": "--spectrum-switch-control-width-small",
+    "desktop": {
+      "value": "23px"
+    },
+    "mobile": {
+      "value": "32px"
+    }
   },
   "switch-top-to-control-extra-large": {
-    "prop": "--spectrum-switch-top-to-control-extra-large"
+    "prop": "--spectrum-switch-top-to-control-extra-large",
+    "desktop": {
+      "value": "15px"
+    },
+    "mobile": {
+      "value": "19px"
+    }
   },
   "switch-top-to-control-large": {
-    "prop": "--spectrum-switch-top-to-control-large"
+    "prop": "--spectrum-switch-top-to-control-large",
+    "desktop": {
+      "value": "12px"
+    },
+    "mobile": {
+      "value": "15px"
+    }
   },
   "switch-top-to-control-medium": {
-    "prop": "--spectrum-switch-top-to-control-medium"
+    "prop": "--spectrum-switch-top-to-control-medium",
+    "desktop": {
+      "value": "9px"
+    },
+    "mobile": {
+      "value": "11px"
+    }
   },
   "switch-top-to-control-small": {
-    "prop": "--spectrum-switch-top-to-control-small"
+    "prop": "--spectrum-switch-top-to-control-small",
+    "desktop": {
+      "value": "6px"
+    },
+    "mobile": {
+      "value": "7px"
+    }
   },
   "tab-item-bottom-to-text-compact-extra-large": {
     "prop": "--spectrum-tab-item-bottom-to-text-compact-extra-large",
@@ -10577,13 +11492,10 @@
     "prop": "--spectrum-table-row-hover-color",
     "ref": "var(--spectrum-gray-900)",
     "light": {
-      "value": "rgb(0, 0, 0)"
+      "value": "rgb(19, 19, 19)"
     },
     "dark": {
-      "value": "rgb(255, 255, 255)"
-    },
-    "darkest": {
-      "value": "rgb(255, 255, 255)"
+      "value": "rgb(242, 242, 242)"
     }
   },
   "table-row-hover-opacity": {
@@ -10740,20 +11652,23 @@
   },
   "table-selected-row-background-color": {
     "prop": "--spectrum-table-selected-row-background-color",
-    "ref": "var(--spectrum-informative-color-600)",
+    "ref": "var(--spectrum-informative-color-800)",
     "light": {
-      "value": "rgb(2, 101, 220)"
+      "value": "rgb(59, 99, 251)"
     },
     "dark": {
-      "value": "rgb(3, 103, 224)"
-    },
-    "darkest": {
-      "value": "rgb(6, 108, 231)"
+      "value": "rgb(64, 105, 253)"
     }
   },
   "table-selected-row-background-color-non-emphasized": {
     "prop": "--spectrum-table-selected-row-background-color-non-emphasized",
-    "ref": "var(--spectrum-gray-800)"
+    "ref": "var(--spectrum-neutral-background-color-selected-default)",
+    "light": {
+      "value": "rgb(41, 41, 41)"
+    },
+    "dark": {
+      "value": "rgb(219, 219, 219)"
+    }
   },
   "table-selected-row-background-opacity": {
     "prop": "--spectrum-table-selected-row-background-opacity",
@@ -10994,46 +11909,55 @@
   "text-to-visual-100": {
     "prop": "--spectrum-text-to-visual-100",
     "desktop": {
-      "value": "8px"
+      "value": "6px"
     },
     "mobile": {
-      "value": "10px"
+      "value": "8px"
     }
   },
   "text-to-visual-200": {
     "prop": "--spectrum-text-to-visual-200",
     "desktop": {
-      "value": "9px"
+      "value": "7px"
     },
     "mobile": {
-      "value": "11px"
+      "value": "9px"
     }
   },
   "text-to-visual-300": {
     "prop": "--spectrum-text-to-visual-300",
     "desktop": {
+      "value": "8px"
+    },
+    "mobile": {
       "value": "10px"
+    }
+  },
+  "text-to-visual-400": {
+    "prop": "--spectrum-text-to-visual-400",
+    "desktop": {
+      "value": "9px"
     },
     "mobile": {
-      "value": "13px"
+      "value": "11px"
     }
   },
   "text-to-visual-50": {
     "prop": "--spectrum-text-to-visual-50",
     "desktop": {
-      "value": "6px"
+      "value": "5px"
     },
     "mobile": {
-      "value": "8px"
+      "value": "7px"
     }
   },
   "text-to-visual-75": {
     "prop": "--spectrum-text-to-visual-75",
     "desktop": {
-      "value": "7px"
+      "value": "5px"
     },
     "mobile": {
-      "value": "9px"
+      "value": "7px"
     }
   },
   "text-underline-gap": {
@@ -11048,13 +11972,10 @@
     "prop": "--spectrum-thumbnail-border-color",
     "ref": "var(--spectrum-gray-800)",
     "light": {
-      "value": "rgb(34, 34, 34)"
+      "value": "rgb(41, 41, 41)"
     },
     "dark": {
-      "value": "rgb(235, 235, 235)"
-    },
-    "darkest": {
-      "value": "rgb(235, 235, 235)"
+      "value": "rgb(219, 219, 219)"
     }
   },
   "thumbnail-border-opacity": {
@@ -11174,6 +12095,16 @@
       "value": "62px"
     }
   },
+  "title-color": {
+    "prop": "--spectrum-title-color",
+    "ref": "var(--spectrum-gray-900)",
+    "light": {
+      "value": "rgb(19, 19, 19)"
+    },
+    "dark": {
+      "value": "rgb(242, 242, 242)"
+    }
+  },
   "toast-bottom-to-text": {
     "prop": "--spectrum-toast-bottom-to-text",
     "desktop": {
@@ -11246,77 +12177,244 @@
       "value": "10px"
     }
   },
+  "track-color": {
+    "prop": "--spectrum-track-color",
+    "ref": "var(--spectrum-gray-300)",
+    "light": {
+      "value": "rgb(218, 218, 218)"
+    },
+    "dark": {
+      "value": "rgb(57, 57, 57)"
+    }
+  },
   "transparent-black-100": {
     "prop": "--spectrum-transparent-black-100",
-    "value": "rgba(0, 0, 0, 0)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.09)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.09)"
+    }
+  },
+  "transparent-black-1000": {
+    "prop": "--spectrum-transparent-black-1000",
+    "value": "rgb(0, 0, 0)"
   },
   "transparent-black-200": {
     "prop": "--spectrum-transparent-black-200",
-    "value": "rgba(0, 0, 0, 0.1)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.12)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.12)"
+    }
+  },
+  "transparent-black-25": {
+    "prop": "--spectrum-transparent-black-25",
+    "light": {
+      "value": "rgba(0, 0, 0, 0)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0)"
+    }
   },
   "transparent-black-300": {
     "prop": "--spectrum-transparent-black-300",
-    "value": "rgba(0, 0, 0, 0.25)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.15)"
+    }
   },
   "transparent-black-400": {
     "prop": "--spectrum-transparent-black-400",
-    "value": "rgba(0, 0, 0, 0.4)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.22)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.22)"
+    }
+  },
+  "transparent-black-50": {
+    "prop": "--spectrum-transparent-black-50",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.03)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.03)"
+    }
   },
   "transparent-black-500": {
     "prop": "--spectrum-transparent-black-500",
-    "value": "rgba(0, 0, 0, 0.55)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.44)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.44)"
+    }
   },
   "transparent-black-600": {
     "prop": "--spectrum-transparent-black-600",
-    "value": "rgba(0, 0, 0, 0.7)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.56)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.56)"
+    }
   },
   "transparent-black-700": {
     "prop": "--spectrum-transparent-black-700",
-    "value": "rgba(0, 0, 0, 0.8)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.69)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.69)"
+    }
+  },
+  "transparent-black-75": {
+    "prop": "--spectrum-transparent-black-75",
+    "light": {
+      "value": "rgba(0, 0, 0, 0.05)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.05)"
+    }
   },
   "transparent-black-800": {
     "prop": "--spectrum-transparent-black-800",
-    "value": "rgba(0, 0, 0, 0.9)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.84)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.84)"
+    }
   },
   "transparent-black-900": {
     "prop": "--spectrum-transparent-black-900",
-    "value": "rgb(0, 0, 0)"
+    "light": {
+      "value": "rgba(0, 0, 0, 0.93)"
+    },
+    "dark": {
+      "value": "rgba(0, 0, 0, 0.93)"
+    }
   },
   "transparent-white-100": {
     "prop": "--spectrum-transparent-white-100",
-    "value": "rgba(255, 255, 255, 0)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.11)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.11)"
+    }
+  },
+  "transparent-white-1000": {
+    "prop": "--spectrum-transparent-white-1000",
+    "light": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    }
   },
   "transparent-white-200": {
     "prop": "--spectrum-transparent-white-200",
-    "value": "rgba(255, 255, 255, 0.1)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.14)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.14)"
+    }
+  },
+  "transparent-white-25": {
+    "prop": "--spectrum-transparent-white-25",
+    "light": {
+      "value": "rgba(255, 255, 255, 0)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0)"
+    }
   },
   "transparent-white-300": {
     "prop": "--spectrum-transparent-white-300",
-    "value": "rgba(255, 255, 255, 0.25)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.17)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.17)"
+    }
   },
   "transparent-white-400": {
     "prop": "--spectrum-transparent-white-400",
-    "value": "rgba(255, 255, 255, 0.4)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.21)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.21)"
+    }
+  },
+  "transparent-white-50": {
+    "prop": "--spectrum-transparent-white-50",
+    "light": {
+      "value": "rgba(255, 255, 255, 0.04)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.04)"
+    }
   },
   "transparent-white-500": {
     "prop": "--spectrum-transparent-white-500",
-    "value": "rgba(255, 255, 255, 0.55)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.39)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.39)"
+    }
   },
   "transparent-white-600": {
     "prop": "--spectrum-transparent-white-600",
-    "value": "rgba(255, 255, 255, 0.7)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.51)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.51)"
+    }
   },
   "transparent-white-700": {
     "prop": "--spectrum-transparent-white-700",
-    "value": "rgba(255, 255, 255, 0.8)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.66)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.66)"
+    }
+  },
+  "transparent-white-75": {
+    "prop": "--spectrum-transparent-white-75",
+    "light": {
+      "value": "rgba(255, 255, 255, 0.07)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.07)"
+    }
   },
   "transparent-white-800": {
     "prop": "--spectrum-transparent-white-800",
-    "value": "rgba(255, 255, 255, 0.9)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.85)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.85)"
+    }
   },
   "transparent-white-900": {
     "prop": "--spectrum-transparent-white-900",
-    "value": "rgb(255, 255, 255)"
+    "light": {
+      "value": "rgba(255, 255, 255, 0.94)"
+    },
+    "dark": {
+      "value": "rgba(255, 255, 255, 0.94)"
+    }
   },
   "tray-top-to-content-area": {
     "prop": "--spectrum-tray-top-to-content-area",
@@ -11327,35 +12425,214 @@
       "value": "5px"
     }
   },
+  "turquoise-100": {
+    "prop": "--spectrum-turquoise-100",
+    "dark": {
+      "value": "rgb(0, 30, 33)"
+    },
+    "light": {
+      "value": "rgb(238, 251, 251)"
+    }
+  },
+  "turquoise-1000": {
+    "prop": "--spectrum-turquoise-1000",
+    "dark": {
+      "value": "rgb(13, 168, 182)"
+    },
+    "light": {
+      "value": "rgb(5, 107, 116)"
+    }
+  },
+  "turquoise-1100": {
+    "prop": "--spectrum-turquoise-1100",
+    "dark": {
+      "value": "rgb(16, 186, 202)"
+    },
+    "light": {
+      "value": "rgb(3, 90, 98)"
+    }
+  },
+  "turquoise-1200": {
+    "prop": "--spectrum-turquoise-1200",
+    "dark": {
+      "value": "rgb(64, 208, 220)"
+    },
+    "light": {
+      "value": "rgb(1, 74, 81)"
+    }
+  },
+  "turquoise-1300": {
+    "prop": "--spectrum-turquoise-1300",
+    "dark": {
+      "value": "rgb(128, 225, 231)"
+    },
+    "light": {
+      "value": "rgb(0, 59, 65)"
+    }
+  },
+  "turquoise-1400": {
+    "prop": "--spectrum-turquoise-1400",
+    "dark": {
+      "value": "rgb(183, 240, 240)"
+    },
+    "light": {
+      "value": "rgb(0, 44, 49)"
+    }
+  },
+  "turquoise-1500": {
+    "prop": "--spectrum-turquoise-1500",
+    "dark": {
+      "value": "rgb(228, 249, 249)"
+    },
+    "light": {
+      "value": "rgb(0, 32, 35)"
+    }
+  },
+  "turquoise-1600": {
+    "prop": "--spectrum-turquoise-1600",
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "light": {
+      "value": "rgb(0, 15, 17)"
+    }
+  },
+  "turquoise-200": {
+    "prop": "--spectrum-turquoise-200",
+    "dark": {
+      "value": "rgb(0, 37, 41)"
+    },
+    "light": {
+      "value": "rgb(209, 245, 245)"
+    }
+  },
+  "turquoise-300": {
+    "prop": "--spectrum-turquoise-300",
+    "dark": {
+      "value": "rgb(0, 49, 54)"
+    },
+    "light": {
+      "value": "rgb(169, 236, 237)"
+    }
+  },
+  "turquoise-400": {
+    "prop": "--spectrum-turquoise-400",
+    "dark": {
+      "value": "rgb(0, 66, 72)"
+    },
+    "light": {
+      "value": "rgb(111, 221, 228)"
+    }
+  },
+  "turquoise-500": {
+    "prop": "--spectrum-turquoise-500",
+    "dark": {
+      "value": "rgb(3, 84, 92)"
+    },
+    "light": {
+      "value": "rgb(39, 202, 216)"
+    }
+  },
+  "turquoise-600": {
+    "prop": "--spectrum-turquoise-600",
+    "dark": {
+      "value": "rgb(5, 103, 112)"
+    },
+    "light": {
+      "value": "rgb(15, 177, 192)"
+    }
+  },
+  "turquoise-700": {
+    "prop": "--spectrum-turquoise-700",
+    "dark": {
+      "value": "rgb(7, 120, 131)"
+    },
+    "light": {
+      "value": "rgb(12, 158, 171)"
+    }
+  },
+  "turquoise-800": {
+    "prop": "--spectrum-turquoise-800",
+    "dark": {
+      "value": "rgb(9, 131, 142)"
+    },
+    "light": {
+      "value": "rgb(10, 141, 153)"
+    }
+  },
+  "turquoise-900": {
+    "prop": "--spectrum-turquoise-900",
+    "dark": {
+      "value": "rgb(11, 151, 164)"
+    },
+    "light": {
+      "value": "rgb(8, 126, 137)"
+    }
+  },
+  "turquoise-background-color-default": {
+    "prop": "--spectrum-turquoise-background-color-default",
+    "ref": "var(--spectrum-turquoise-800)",
+    "light": {
+      "value": "rgb(8, 126, 137)"
+    },
+    "dark": {
+      "value": "rgb(9, 131, 142)"
+    }
+  },
+  "turquoise-subtle-background-color-default": {
+    "prop": "--spectrum-turquoise-subtle-background-color-default",
+    "ref": "var(--spectrum-turquoise-300)",
+    "light": {
+      "value": "rgb(209, 245, 245)"
+    },
+    "dark": {
+      "value": "rgb(0, 49, 54)"
+    }
+  },
+  "turquoise-visual-color": {
+    "prop": "--spectrum-turquoise-visual-color",
+    "ref": "var(--spectrum-turquoise-900)",
+    "light": {
+      "value": "rgb(10, 141, 153)"
+    },
+    "dark": {
+      "value": "rgb(11, 151, 164)"
+    }
+  },
   "white": {
     "prop": "--spectrum-white",
-    "value": "rgb(255, 255, 255)"
+    "light": {
+      "value": "rgb(255, 255, 255)"
+    },
+    "dark": {
+      "value": "rgb(255, 255, 255)"
+    }
   },
   "workflow-icon-size-100": {
     "prop": "--spectrum-workflow-icon-size-100",
     "desktop": {
-      "value": "18px"
+      "value": "20px"
     },
     "mobile": {
-      "value": "22px"
+      "value": "24px"
     }
   },
   "workflow-icon-size-200": {
     "prop": "--spectrum-workflow-icon-size-200",
     "desktop": {
-      "value": "20px"
+      "value": "22px"
     },
     "mobile": {
-      "value": "24px"
+      "value": "28px"
     }
   },
   "workflow-icon-size-300": {
     "prop": "--spectrum-workflow-icon-size-300",
     "desktop": {
-      "value": "22px"
+      "value": "26px"
     },
     "mobile": {
-      "value": "28px"
+      "value": "30px"
     }
   },
   "workflow-icon-size-50": {
@@ -11364,7 +12641,7 @@
       "value": "14px"
     },
     "mobile": {
-      "value": "18px"
+      "value": "16px"
     }
   },
   "workflow-icon-size-75": {
@@ -11373,201 +12650,181 @@
       "value": "16px"
     },
     "mobile": {
-      "value": "20px"
+      "value": "18px"
     }
   },
   "yellow-100": {
     "prop": "--spectrum-yellow-100",
     "light": {
-      "value": "rgb(251, 241, 152)"
+      "value": "rgb(255, 248, 204)"
     },
     "dark": {
-      "value": "rgb(76, 54, 0)"
-    },
-    "darkest": {
-      "value": "rgb(53, 36, 0)"
+      "value": "rgb(37, 23, 0)"
     }
   },
   "yellow-1000": {
     "prop": "--spectrum-yellow-1000",
     "light": {
-      "value": "rgb(112, 83, 0)"
+      "value": "rgb(134, 85, 0)"
     },
     "dark": {
-      "value": "rgb(228, 194, 0)"
-    },
-    "darkest": {
-      "value": "rgb(216, 181, 0)"
+      "value": "rgb(203, 141, 0)"
     }
   },
   "yellow-1100": {
     "prop": "--spectrum-yellow-1100",
     "light": {
-      "value": "rgb(91, 67, 0)"
+      "value": "rgb(114, 72, 0)"
     },
     "dark": {
-      "value": "rgb(244, 213, 0)"
-    },
-    "darkest": {
-      "value": "rgb(233, 199, 0)"
+      "value": "rgb(218, 159, 0)"
     }
   },
   "yellow-1200": {
     "prop": "--spectrum-yellow-1200",
     "light": {
-      "value": "rgb(72, 51, 0)"
+      "value": "rgb(93, 59, 0)"
     },
     "dark": {
-      "value": "rgb(249, 232, 92)"
-    },
-    "darkest": {
-      "value": "rgb(247, 216, 4)"
+      "value": "rgb(235, 183, 0)"
     }
   },
   "yellow-1300": {
     "prop": "--spectrum-yellow-1300",
     "light": {
-      "value": "rgb(54, 37, 0)"
+      "value": "rgb(75, 47, 0)"
     },
     "dark": {
-      "value": "rgb(252, 246, 187)"
-    },
-    "darkest": {
-      "value": "rgb(249, 233, 97)"
+      "value": "rgb(249, 206, 0)"
     }
   },
   "yellow-1400": {
     "prop": "--spectrum-yellow-1400",
     "light": {
-      "value": "rgb(40, 26, 0)"
+      "value": "rgb(56, 35, 0)"
     },
+    "dark": {
+      "value": "rgb(255, 230, 86)"
+    }
+  },
+  "yellow-1500": {
+    "prop": "--spectrum-yellow-1500",
+    "dark": {
+      "value": "rgb(255, 246, 195)"
+    },
+    "light": {
+      "value": "rgb(40, 25, 0)"
+    }
+  },
+  "yellow-1600": {
+    "prop": "--spectrum-yellow-1600",
     "dark": {
       "value": "rgb(255, 255, 255)"
     },
-    "darkest": {
-      "value": "rgb(252, 243, 170)"
+    "light": {
+      "value": "rgb(18, 11, 0)"
     }
   },
   "yellow-200": {
     "prop": "--spectrum-yellow-200",
     "light": {
-      "value": "rgb(248, 231, 80)"
+      "value": "rgb(255, 241, 151)"
     },
     "dark": {
-      "value": "rgb(88, 64, 0)"
-    },
-    "darkest": {
-      "value": "rgb(68, 47, 0)"
+      "value": "rgb(47, 29, 0)"
     }
   },
   "yellow-300": {
     "prop": "--spectrum-yellow-300",
     "light": {
-      "value": "rgb(248, 217, 4)"
+      "value": "rgb(255, 222, 44)"
     },
     "dark": {
-      "value": "rgb(103, 76, 0)"
-    },
-    "darkest": {
-      "value": "rgb(86, 62, 0)"
+      "value": "rgb(61, 39, 0)"
     }
   },
   "yellow-400": {
     "prop": "--spectrum-yellow-400",
     "light": {
-      "value": "rgb(232, 198, 0)"
+      "value": "rgb(245, 199, 0)"
     },
     "dark": {
-      "value": "rgb(119, 89, 0)"
-    },
-    "darkest": {
-      "value": "rgb(103, 77, 0)"
+      "value": "rgb(83, 52, 0)"
     }
   },
   "yellow-500": {
     "prop": "--spectrum-yellow-500",
     "light": {
-      "value": "rgb(215, 179, 0)"
+      "value": "rgb(230, 175, 0)"
     },
     "dark": {
-      "value": "rgb(136, 104, 0)"
-    },
-    "darkest": {
-      "value": "rgb(122, 92, 0)"
+      "value": "rgb(107, 67, 0)"
     }
   },
   "yellow-600": {
     "prop": "--spectrum-yellow-600",
     "light": {
-      "value": "rgb(196, 159, 0)"
+      "value": "rgb(210, 149, 0)"
     },
     "dark": {
-      "value": "rgb(155, 120, 0)"
-    },
-    "darkest": {
-      "value": "rgb(141, 108, 0)"
+      "value": "rgb(130, 82, 0)"
     }
   },
   "yellow-700": {
     "prop": "--spectrum-yellow-700",
     "light": {
-      "value": "rgb(176, 140, 0)"
+      "value": "rgb(193, 131, 0)"
     },
     "dark": {
-      "value": "rgb(174, 137, 0)"
-    },
-    "darkest": {
-      "value": "rgb(161, 126, 0)"
+      "value": "rgb(151, 97, 0)"
     }
   },
   "yellow-800": {
     "prop": "--spectrum-yellow-800",
     "light": {
-      "value": "rgb(155, 120, 0)"
+      "value": "rgb(175, 116, 0)"
     },
     "dark": {
-      "value": "rgb(192, 156, 0)"
-    },
-    "darkest": {
-      "value": "rgb(180, 144, 0)"
+      "value": "rgb(164, 106, 0)"
     }
   },
   "yellow-900": {
     "prop": "--spectrum-yellow-900",
     "light": {
-      "value": "rgb(133, 102, 0)"
+      "value": "rgb(158, 102, 0)"
     },
     "dark": {
-      "value": "rgb(211, 174, 0)"
-    },
-    "darkest": {
-      "value": "rgb(199, 162, 0)"
+      "value": "rgb(186, 124, 0)"
     }
   },
   "yellow-background-color-default": {
     "prop": "--spectrum-yellow-background-color-default",
-    "ref": "var(--spectrum-yellow-1000)",
+    "ref": "var(--spectrum-yellow-1100)",
     "light": {
-      "value": "rgb(232, 198, 0)"
+      "value": "rgb(245, 199, 0)"
     },
     "dark": {
-      "value": "rgb(228, 194, 0)"
+      "value": "rgb(218, 159, 0)"
+    }
+  },
+  "yellow-subtle-background-color-default": {
+    "prop": "--spectrum-yellow-subtle-background-color-default",
+    "ref": "var(--spectrum-yellow-300)",
+    "light": {
+      "value": "rgb(255, 241, 151)"
     },
-    "darkest": {
-      "value": "rgb(216, 181, 0)"
+    "dark": {
+      "value": "rgb(61, 39, 0)"
     }
   },
   "yellow-visual-color": {
     "prop": "--spectrum-yellow-visual-color",
     "ref": "var(--spectrum-yellow-1100)",
     "light": {
-      "value": "rgb(196, 159, 0)"
+      "value": "rgb(210, 149, 0)"
     },
     "dark": {
-      "value": "rgb(244, 213, 0)"
-    },
-    "darkest": {
-      "value": "rgb(233, 199, 0)"
+      "value": "rgb(218, 159, 0)"
     }
   }
 }
\ No newline at end of file
diff --git a/tokens/package.json b/tokens/package.json
index be22f483cc..c30e310676 100644
--- a/tokens/package.json
+++ b/tokens/package.json
@@ -13,6 +13,13 @@
 	"bugs": {
 		"url": "https://github.com/adobe/spectrum-css/issues"
 	},
+	"exports": {
+		".": "./dist/css/index.css",
+		"./*.md": "./*.md",
+		"./dist/css/*.css": "./dist/css/*.css",
+		"./dist/index.css": "./dist/css/index.css",
+		"./package.json": "./package.json"
+	},
 	"main": "dist/index.css",
 	"files": [
 		"dist",
@@ -21,15 +28,12 @@
 		"package.json"
 	],
 	"devDependencies": {
-		"@adobe/spectrum-tokens": "12.25.0",
+		"@adobe/spectrum-tokens": "0.0.0-s2-foundations-20241121221506",
+		"@adobe/token-diff-generator": "^1.3.0",
 		"@nxkit/style-dictionary": "^6.0.0",
 		"@spectrum-tools/postcss-rgb-mapping": "workspace:^",
-		"cssnano": "^7.0.3",
-		"cssnano-preset-advanced": "^7.0.6",
 		"postcss": "^8.5.0",
 		"postcss-cli": "^11.0.0",
-		"postcss-import": "^16.1.0",
-		"postcss-licensing": "^2.0.0",
 		"postcss-sorting": "^9.1.0",
 		"prettier": "^3.4.2",
 		"style-dictionary": "^3.9.2",
diff --git a/tokens/project.json b/tokens/project.json
index cf7c5f3cde..7b16564f2a 100644
--- a/tokens/project.json
+++ b/tokens/project.json
@@ -23,8 +23,6 @@
 				"parallel": false
 			},
 			"outputs": [
-				"{projectRoot}/dist/css/express",
-				"{projectRoot}/dist/css/spectrum",
 				"{projectRoot}/dist/css/*-vars.css",
 				"{projectRoot}/dist/index.css"
 			]
@@ -44,6 +42,21 @@
 		},
 		"format": {},
 		"lint": {},
+		"report": {
+			"cache": true,
+			"executor": "nx:run-commands",
+			"inputs": [{ "externalDependencies": ["@adobe/token-diff-generator", "@adobe/spectrum-tokens"] }],
+			"options": {
+				"commands": [
+					"tdiff report --old-token-version @adobe/spectrum-tokens@12.25.0 --new-token-version @adobe/spectrum-tokens@0.0.0-s2-foundations-20241121221506 --format markdown --output ./dist/tokens-diff.md"
+				],
+				"cwd": "{projectRoot}",
+				"parallel": false
+			},
+			"outputs": [
+				"{projectRoot}/dist/"
+			]
+		},
 		"style-dictionary": {
 			"dependsOn": ["clean"],
 			"executor": "@nxkit/style-dictionary:build",
diff --git a/tokens/style-dictionary.config.js b/tokens/style-dictionary.config.js
index fc37cc763f..8f47346d1f 100644
--- a/tokens/style-dictionary.config.js
+++ b/tokens/style-dictionary.config.js
@@ -37,7 +37,6 @@ StyleDictionary.registerFormat(JsonSetsFormatter);
  */
 const tokensPath = require.resolve("@adobe/spectrum-tokens/package.json");
 const tokensDir = path.dirname(tokensPath);
-const setNames = ["desktop", "mobile", "light", "dark", "darkest"];
 
 module.exports = {
 	source: [`${tokensDir}/src/*.json`],
@@ -52,21 +51,8 @@ module.exports = {
 			prefix: "spectrum",
 			files: [
 				generateFileConfig(),
-				...["spectrum", "express"].map((subSystemName) =>
-					generateFileConfig({ subSystemName })
-				),
-				...setNames.map((context) => generateFileConfig({ setName: context })),
-				...setNames.map((context) =>
-					generateFileConfig({
-						setName: context,
-						subSystemName: "spectrum",
-					})
-				),
-				...setNames.map((context) =>
-					generateFileConfig({
-						setName: context,
-						subSystemName: "express",
-					})
+				...["desktop", "mobile", "light", "dark"].map((context) =>
+					generateFileConfig({ setName: context }),
 				),
 			],
 		},
diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js
index 1e370196de..fa2021d49c 100644
--- a/tokens/tasks/token-rollup.js
+++ b/tokens/tasks/token-rollup.js
@@ -20,7 +20,7 @@ const path = require("path");
 const fg = require("fast-glob");
 
 const { processCSS } = require("../../tasks/component-builder.js");
-const { fetchContent } = require("../../tasks/utilities.js");
+const { copy, fetchContent } = require("../../tasks/utilities.js");
 
 require("colors");
 
@@ -43,6 +43,7 @@ async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false
 	const inputs = await fg(inputGlob, { cwd });
 	const contents = inputs.map(input => `@import "${input}";`).join("\n");
 	if (!contents) return;
+
 	return processCSS(contents, undefined, outputPath, { cwd, clean, configPath: cwd, map: false, resolveImports: true, customTagline: `/* Token version: v${packageJson.version} */\n\n` });
 }
 
@@ -53,29 +54,29 @@ async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false
  * @returns {Promise<string[]>}
  */
 async function appendCustomOverrides({ cwd = process.cwd() } = {}) {
-	const globalFiles = await fg(["*-vars.css"], { cwd: path.join(cwd, "dist", "css"), onlyFiles: true });
-
-	// Clean up the generated files from style-dictionary
-	const promises = globalFiles.map(file => processCSS(undefined, path.join("dist", "css", file), path.join("dist", "css", file), { cwd, configPath: cwd }));
+	const promises = [];
 
-	for (const theme of ["express", "spectrum"]) {
-		// Add custom/*-vars.css to the end of the dist/css/*-vars.css files and run through postcss before writing back to the dist/css/*-vars.css file
-		const customFiles = await fg(["*-vars.css"], { cwd: path.join(cwd, `custom-${theme}`), onlyFiles: true });
-		const themeFiles = await fg(["*-vars.css"], { cwd: path.join(cwd, "dist", "css", theme), onlyFiles: true });
-
-		for (const file of [...new Set([...themeFiles, ...customFiles])]) {
-			// Read in the custom file and the dist file and combine them into one file
-			const combinedContent = await fetchContent([
-				path.join("dist", "css", theme, file),
-				path.join(`custom-${theme}`, file)
-			], { cwd, shouldCombine: true });
-
-			if (!combinedContent || !combinedContent[0].content) continue;
+	// Add custom/*-vars.css to the end of the dist/css/*-vars.css files and run through postcss before writing back to the dist/css/*-vars.css file
+	const customFiles = await fg(["*-vars.css"], { cwd: path.join(cwd, "custom"), onlyFiles: true });
+	const globalFiles = await fg(["*-vars.css"], { cwd: path.join(cwd, "dist", "css"), onlyFiles: true });
 
-			promises.push(
-				processCSS(combinedContent[0].content, path.join(cwd, "dist", "css", theme, file), path.join(cwd, "dist", "css", theme, file), { cwd, configPath: cwd })
-			);
-		}
+	// Create a list that combines the custom and dist files
+	const combinedFiles = [...new Set([...customFiles, ...globalFiles])];
+	for (const file of combinedFiles) {
+		// Read in the custom file and the dist file and combine them into one file
+		const combinedContent = await fetchContent([
+			path.join("dist", "css", file),
+			path.join("custom", file)
+		], { cwd, shouldCombine: true });
+
+		if (!combinedContent || !combinedContent[0].content) continue;
+
+		promises.push(
+			processCSS(combinedContent[0].content, path.join(cwd, "dist", "css", file), path.join(cwd, "dist", "css", file), {
+				cwd,
+				configPath: cwd,
+			})
+		);
 	}
 
 	return Promise.all(promises);
@@ -105,18 +106,13 @@ async function main({
 	// Wait for all the custom files to be processed
 	return appendCustomOverrides({ cwd }).then(async (r) =>
 		Promise.all([
-			...["spectrum", "express"].map(theme => Promise.all([
-				index(
-					[`dist/css/${theme}/*-vars.css`],
-					path.join(compiledOutputPath, "css", theme, "index.css"),
-					{ cwd, clean }
-				),
-			])),
 			index(
-				["dist/css/*.css", "dist/css/spectrum/*-vars.css", "dist/css/express/*-vars.css"],
-				path.join(compiledOutputPath, "index.css"),
+				["dist/css/*-vars.css"],
+				path.join(compiledOutputPath, "css", "index.css"),
 				{ cwd, clean }
-			),
+			).then((reports) =>
+				copy(path.join(compiledOutputPath, "css", "index.css"), path.join(cwd, "dist", "index.css"), { cwd, isDeprecated: false })
+					.then((reps) => [reports, reps]))
 		]).then((reports) => {
 			const logs = [reports, r].flat(Infinity).filter(Boolean);
 
diff --git a/tokens/utilities/style-dictionary.utils.js b/tokens/utilities/style-dictionary.utils.js
index dd1d2f3dcb..57b9b37d38 100644
--- a/tokens/utilities/style-dictionary.utils.js
+++ b/tokens/utilities/style-dictionary.utils.js
@@ -11,20 +11,21 @@
  * governing permissions and limitations under the License.
  */
 
-module.exports = function ({ setName, subSystemName } = {}) {
+module.exports = function ({ setName, format = "css" } = {}) {
+	let selector = ".spectrum";
+
 	const baseConfig = {
-		format: "css/sets",
+		format: `${format}/sets`,
 		options: {
 			showFileHeader: false,
 			outputReferences: true,
 		},
 	};
 
-	const sets = [setName, subSystemName].filter(Boolean);
-	if (!sets.length) {
+	if (!setName) {
 		return {
 			...baseConfig,
-			destination: "global-vars.css",
+			destination: `global-vars.${format}`,
 			filter: (token) => {
 				if (token.name.startsWith("spectrum-android")) {
 					return false;
@@ -34,21 +35,12 @@ module.exports = function ({ setName, subSystemName } = {}) {
 			},
 			options: {
 				...baseConfig.options,
-				selector: ".spectrum",
+				selector,
 			},
 		};
 	}
 
 	const isGlobal = !setName;
-	const isSpectrum = subSystemName && subSystemName === "spectrum";
-
-	let selector = "";
-	if (isGlobal || (subSystemName && !isSpectrum)) {
-		// postfix the selector with the subsystem name
-		selector = `.spectrum${
-			subSystemName && !isSpectrum ? `--${subSystemName}` : ""
-		}`;
-	}
 
 	let scope =
 		{
@@ -57,16 +49,7 @@ module.exports = function ({ setName, subSystemName } = {}) {
 		}[setName] ?? setName;
 
 	if (isGlobal) scope = "global";
-	else if (setName && scope) {
-		selector += `.spectrum--${scope}`;
-	}
-
-	const selectors = [
-		selector ?? null,
-		// Apply all light colors as lightest for backwards compat
-		// @todo does this need a deprecation notice?
-		setName === "light" ? selector.replace("light", "lightest") : null,
-	].filter(Boolean);
+	selector = isGlobal ? ".spectrum" : `.spectrum--${scope}`;
 
 	const getSets = (token) =>
 		token.path.filter((_, idx, array) => array[idx - 1] == "sets");
@@ -77,35 +60,15 @@ module.exports = function ({ setName, subSystemName } = {}) {
 
 		if (tokenSets.includes("wireframe")) return false;
 
-		if (token.name.startsWith("spectrum-android")) {
-			return false;
-		}
-
 		if (!setName) {
-			if (!subSystemName && tokenSets.length === 0) {
-				return true;
-			}
-
-			if (
-				subSystemName &&
-				tokenSets.length === 1 &&
-				tokenSets.includes(subSystemName)
-			) {
+			if (tokenSets.length === 0) {
 				return true;
 			}
 		}
 		else {
 			if (!tokenSets.includes(setName)) return false;
 
-			if (!subSystemName && tokenSets.length === 1) {
-				return true;
-			}
-
-			if (
-				subSystemName &&
-				tokenSets.length === 2 &&
-				tokenSets.includes(subSystemName)
-			) {
+			if (tokenSets.length === 1) {
 				return true;
 			}
 		}
@@ -115,12 +78,12 @@ module.exports = function ({ setName, subSystemName } = {}) {
 
 	return {
 		...baseConfig,
-		destination: `${subSystemName ? `${subSystemName}/` : ""}${scope}-vars.css`,
+		destination: `${scope}-vars.${format}`,
 		filter,
 		options: {
 			...baseConfig.options,
-			selector: selectors.join(", "),
-			sets,
+			selector,
+			sets: setName ? [setName] : [],
 		},
 	};
 };
diff --git a/tools/generator/templates/index.css.hbs b/tools/generator/templates/index.css.hbs
index 6c3510c104..2219223a2b 100644
--- a/tools/generator/templates/index.css.hbs
+++ b/tools/generator/templates/index.css.hbs
@@ -11,24 +11,16 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/express.css";
-
 .spectrum-{{ pascalCase name }} {
-  /* Variables defined here */
-  /* --spectrum-{{ folderName }}-... */
+  // color: var(--highcontrast-{{ folderName }}-content-color-default, var(--mod-{{ folderName }}-content-color-default, var(--spectrum-{{ folderName }}-content-color-default)));
 
-  &:lang(ja),
-  &:lang(zh),
-  &:lang(ko) {
-    --spectrum-{{ folderName }}-line-height-cjk: var(--spectrum-cjk-line-height-100);
-  }
+  &.spectrum-{{ pascalCase name }}--sizeS {}
+  &,
+  &.spectrum-{{ pascalCase name }}--sizeM {}
+  &.spectrum-{{ pascalCase name }}--sizeL {}
+  &.spectrum-{{ pascalCase name }}--sizeXL {}
 }
 
-.spectrum-{{ pascalCase name }}--sizeS {}
-.spectrum-{{ pascalCase name }}--sizeM {}
-.spectrum-{{ pascalCase name }}--sizeL {}
-.spectrum-{{ pascalCase name }}--sizeXL {}
-
 @media (forced-colors: active) {
   .spectrum-{{ pascalCase name }} {
     --highcontrast-{{ folderName }}-content-color-default: CanvasText;
@@ -36,8 +28,3 @@
     forced-color-adjust: none;
   }
 }
-
-.spectrum-{{ pascalCase name }} {
-  /* Properties defined here */
-  color: var(--highcontrast-{{ folderName }}-content-color-default, var(--mod-{{ folderName }}-content-color-default, var(--spectrum-{{ folderName }}-content-color-default)));
-}
diff --git a/tools/generator/templates/project.json.hbs b/tools/generator/templates/project.json.hbs
index c51870d07b..6f68b7e48f 100644
--- a/tools/generator/templates/project.json.hbs
+++ b/tools/generator/templates/project.json.hbs
@@ -8,6 +8,7 @@
 		"compare": {},
 		"format": {},
 		"lint": {},
+		"report": {},
 		"test": {
 			"defaultConfiguration": "scope"
 		},
diff --git a/tools/generator/templates/stories/template.js.hbs b/tools/generator/templates/stories/template.js.hbs
index 394ccd1165..af1047abb6 100644
--- a/tools/generator/templates/stories/template.js.hbs
+++ b/tools/generator/templates/stories/template.js.hbs
@@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
+import "../themes/express.css";
+import "../themes/spectrum.css";
 
 export const Template = ({
   rootClass = "spectrum-{{ pascalCase name }}",
diff --git a/tools/generator/templates/stories/{{ folderName }}.mdx.hbs b/tools/generator/templates/stories/{{ folderName }}.mdx.hbs
deleted file mode 100644
index 1899e67f85..0000000000
--- a/tools/generator/templates/stories/{{ folderName }}.mdx.hbs	
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-  Description,
-  Title,
-  Subtitle,
-} from "@storybook/blocks";
-import { ComponentDetails, TaggedReleases } from "@spectrum-css/preview/blocks";
-
-import * as {{ pascalCase name }}Stories from './{{ folderName }}.stories';
-
-<Meta of={ {{ pascalCase name }}Stories } title="Docs" />
-
-<Title of={ {{ pascalCase name }}Stories } />
-<Subtitle of={ {{ pascalCase name }}Stories } />
-<ComponentDetails />
-
-<Description of={ {{ pascalCase name }}Stories } />
-
-<Stories of={ {{ pascalCase name }}Stories } />
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-<ArgTypes />
-
-## Tagged releases
-
-<TaggedReleases />
diff --git a/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs b/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs
index d756824775..f161bee76c 100644
--- a/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs	
+++ b/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs	
@@ -2,7 +2,7 @@ import { Template } from "./template.js";
 import { isDisabled, isSelected, isHovered, isFocused } from "@spectrum-css/preview/types";
 import { {{ pascalCase name }}Group } from "./{{ pascalCase name }}.test.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../metadata/metadata.json";
+import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 
 /**
diff --git a/ui-icons/CHANGELOG.md b/ui-icons/CHANGELOG.md
index 64067e196e..f5c4b79039 100644
--- a/ui-icons/CHANGELOG.md
+++ b/ui-icons/CHANGELOG.md
@@ -4,21 +4,27 @@ All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 <a name="1.1.2"></a>
+
 ## 1.1.2
+
 🗓
 2024-02-06
 
 **Note:** Version bump only for package @spectrum-css/ui-icons
 
 <a name="1.1.1"></a>
+
 ## 1.1.1
+
 🗓
 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/ui-icons@1.1.0...@spectrum-css/ui-icons@1.1.1)
 
 **Note:** Version bump only for package @spectrum-css/ui-icons
 
 <a name="1.1.0"></a>
+
 ## 1.1.0
+
 🗓
 2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/ui-icons@0.1.0...@spectrum-css/ui-icons@1.1.0)
 
@@ -27,7 +33,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **ui-icons:**graduate to 1.0 release ([#2366](https://github.com/adobe/spectrum-css/issues/2366))([afd369a](https://github.com/adobe/spectrum-css/commit/afd369a))
 
 <a name="0.1.0"></a>
+
 ## 0.1.0
+
 🗓
 2023-12-12
 
diff --git a/ui-icons/project.json b/ui-icons/project.json
index 59726649bd..ed61d56db0 100644
--- a/ui-icons/project.json
+++ b/ui-icons/project.json
@@ -34,6 +34,18 @@
 				"{projectRoot}/dist/spectrum-css-icons-medium.svg"
 			]
 		},
-		"clean": {}
+		"clean": {
+			"cache": false,
+			"executor": "nx:run-commands",
+			"inputs": ["{projectRoot}/dist", { "externalDependencies": ["rimraf"] }],
+			"options": {
+				"commands": [
+					"rimraf {projectRoot}/dist",
+					"test -d {projectRoot}/dist && echo \"Error: dist directory could not be removed\" && exit 1 || exit 0"
+				],
+				"parallel": false
+			},
+			"outputs": []
+		}
 	}
 }
diff --git a/yarn.lock b/yarn.lock
index e5b6e946b9..7943a81127 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -120,10 +120,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@adobe/spectrum-tokens@npm:12.25.0":
-  version: 12.25.0
-  resolution: "@adobe/spectrum-tokens@npm:12.25.0"
-  checksum: 10c0/783a4fb59cecc54b7a8157d998e690de82f3fb5a15934ed241256c998375aa38e699e81ddfb2d815be8b3281fe774acf33bed97eb9beabad9648fb9bd53ca322
+"@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241021172855":
+  version: 0.0.0-s2-foundations-20241021172855
+  resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241021172855"
+  checksum: 10c0/0604c571afa0416f7802e45d7cbb1d003f14bdf3f90771c274723fa504de6d96f8e16b82f7facbbdb5ee5e66f29c37bd7e3e63a42a05f983d65ede2668b9b0a4
+  languageName: node
+  linkType: hard
+
+"@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506":
+  version: 0.0.0-s2-foundations-20241121221506
+  resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506"
+  checksum: 10c0/64664995ca98170c2a089ecb215103c77bb5a3ff49848371e2dfc301dc3ca30ef4dafae3d44cda82a1609d877e54608cc2e591edef37095ee646c6cf185143ee
+  languageName: node
+  linkType: hard
+
+"@adobe/token-diff-generator@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@adobe/token-diff-generator@npm:1.3.0"
+  dependencies:
+    chalk: "npm:^5.3.0"
+    commander: "npm:^12.1.0"
+    deep-object-diff: "npm:^1.1.9"
+    emojilib: "npm:^4.0.0"
+    glob: "npm:^11.0.0"
+    inquirer: "npm:^12.0.0"
+    nixt: "npm:^0.5.1"
+    node-emoji: "npm:^2.1.3"
+    tar: "npm:^7.4.3"
+    tmp-promise: "npm:^3.0.3"
+  bin:
+    tdiff: src/lib/cli.js
+  checksum: 10c0/e237d70fe9503a47d1e3b9ce163895bf84c46a41e256cc3ee218c493007d743dda5387e58f1aee619e329c8ee440535f5df183495ca6140e86bf47a2687f030a
   languageName: node
   linkType: hard
 
@@ -2236,6 +2263,76 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@inquirer/checkbox@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "@inquirer/checkbox@npm:4.0.6"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/figures": "npm:^1.0.9"
+    "@inquirer/type": "npm:^3.0.2"
+    ansi-escapes: "npm:^4.3.2"
+    yoctocolors-cjs: "npm:^2.1.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/919e3c5d652f1ccd9d5e8e9678e63981a968ba4a0dffe9d9409d94a1951b398218f7dfb05e57aefcb3c3c1d61ac2333160e370b0ff4632ada7a92ebe07a2ca72
+  languageName: node
+  linkType: hard
+
+"@inquirer/confirm@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "@inquirer/confirm@npm:5.1.3"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/type": "npm:^3.0.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/ddbca429ebb3a8bf1d10928f4ab0c8eedbf3f74f85ed64c6b26a830f0fbbab5fa964b9ef2eb2c57a10b9afc9ca3921a12e4659f5a83069078cd1a7ce3d0d126d
+  languageName: node
+  linkType: hard
+
+"@inquirer/core@npm:^10.1.4":
+  version: 10.1.4
+  resolution: "@inquirer/core@npm:10.1.4"
+  dependencies:
+    "@inquirer/figures": "npm:^1.0.9"
+    "@inquirer/type": "npm:^3.0.2"
+    ansi-escapes: "npm:^4.3.2"
+    cli-width: "npm:^4.1.0"
+    mute-stream: "npm:^2.0.0"
+    signal-exit: "npm:^4.1.0"
+    strip-ansi: "npm:^6.0.1"
+    wrap-ansi: "npm:^6.2.0"
+    yoctocolors-cjs: "npm:^2.1.2"
+  checksum: 10c0/4e6c51713c79a0b22381a08a2d11c37f2d696597d01bdecd7b3482889e53e4ac279c55d663a365798ad52becc37052b571bc3ec85ee8a10054c681d9248b88d3
+  languageName: node
+  linkType: hard
+
+"@inquirer/editor@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "@inquirer/editor@npm:4.2.3"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/type": "npm:^3.0.2"
+    external-editor: "npm:^3.1.0"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/0194a660b33e38781c35a6ab531f76beca998e5e30ebc90bb94e2140fd943e0dfcff4f9c650f4f79f74df7dac04c82db254ff8c2d9ef0b55c491523f859a8c2b
+  languageName: node
+  linkType: hard
+
+"@inquirer/expand@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "@inquirer/expand@npm:4.0.6"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/type": "npm:^3.0.2"
+    yoctocolors-cjs: "npm:^2.1.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/2a4990744edf17528c5cf894b9a7a04f202740fb9e2123fb8ced1e623f5bf9716976b037e1b23e88cfce826a85b6052d49784ac2294644e353767b51a0a2f877
+  languageName: node
+  linkType: hard
+
 "@inquirer/figures@npm:^1.0.3":
   version: 1.0.5
   resolution: "@inquirer/figures@npm:1.0.5"
@@ -2243,6 +2340,121 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@inquirer/figures@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "@inquirer/figures@npm:1.0.9"
+  checksum: 10c0/21e1a7c902b2b77f126617b501e0fe0d703fae680a9df472afdae18a3e079756aee85690cef595a14e91d18630118f4a3893aab6832b9232fefc6ab31c804a68
+  languageName: node
+  linkType: hard
+
+"@inquirer/input@npm:^4.1.3":
+  version: 4.1.3
+  resolution: "@inquirer/input@npm:4.1.3"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/type": "npm:^3.0.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/251468b9596fcbff286d0817da7408f2a78230c1f84de23361e6362a8a91e5bf4c42c04f4971a8fe751eb0afc4ab1cef0d3766742fd4e693b4b0cbcc72aa8d97
+  languageName: node
+  linkType: hard
+
+"@inquirer/number@npm:^3.0.6":
+  version: 3.0.6
+  resolution: "@inquirer/number@npm:3.0.6"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/type": "npm:^3.0.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/26c030735bdc94053dfca50db1e75c7e325b8dcc009f3f9e6f572d89b67d7b23cfb3920ed2fa6fa34c312b5ebb6b86ba5b4e77c277ce463720eba45052c0d253
+  languageName: node
+  linkType: hard
+
+"@inquirer/password@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "@inquirer/password@npm:4.0.6"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/type": "npm:^3.0.2"
+    ansi-escapes: "npm:^4.3.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/c36f675d350c38156efe255d9b3a052271faff2bfcebf626f5f02092e9110ef8f87a6985e96dd0c2351fa79723d0847bacaa86ae10c1d24526434de96af5503e
+  languageName: node
+  linkType: hard
+
+"@inquirer/prompts@npm:^7.2.3":
+  version: 7.2.3
+  resolution: "@inquirer/prompts@npm:7.2.3"
+  dependencies:
+    "@inquirer/checkbox": "npm:^4.0.6"
+    "@inquirer/confirm": "npm:^5.1.3"
+    "@inquirer/editor": "npm:^4.2.3"
+    "@inquirer/expand": "npm:^4.0.6"
+    "@inquirer/input": "npm:^4.1.3"
+    "@inquirer/number": "npm:^3.0.6"
+    "@inquirer/password": "npm:^4.0.6"
+    "@inquirer/rawlist": "npm:^4.0.6"
+    "@inquirer/search": "npm:^3.0.6"
+    "@inquirer/select": "npm:^4.0.6"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/52c2e1fd8a4e98bc5fd6a79acf9c7d7e1ecc534013d7c018412a6ed34d15be69a2d10791b539740fed8e538485e359e1cacbec98ca3d04e24c5e9fa9480d7bc6
+  languageName: node
+  linkType: hard
+
+"@inquirer/rawlist@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "@inquirer/rawlist@npm:4.0.6"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/type": "npm:^3.0.2"
+    yoctocolors-cjs: "npm:^2.1.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/c79f0ddd5cf7eae8db27a7080e277c32809d7bd58619f470d8b1598d1aff36f6aac276535ef35801a1dae97bb3763fd248e1067800e6eccd49276206d6cdb945
+  languageName: node
+  linkType: hard
+
+"@inquirer/search@npm:^3.0.6":
+  version: 3.0.6
+  resolution: "@inquirer/search@npm:3.0.6"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/figures": "npm:^1.0.9"
+    "@inquirer/type": "npm:^3.0.2"
+    yoctocolors-cjs: "npm:^2.1.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/27afe9105b9fd26b5985847f75c82f59156158b6366e35896764cd08ee7bb76e3d9c7110c6ed50ab4d7e13466ea3f0e60492a644e0eb6a0d8c30701b07221ad9
+  languageName: node
+  linkType: hard
+
+"@inquirer/select@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "@inquirer/select@npm:4.0.6"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/figures": "npm:^1.0.9"
+    "@inquirer/type": "npm:^3.0.2"
+    ansi-escapes: "npm:^4.3.2"
+    yoctocolors-cjs: "npm:^2.1.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/5346007a5f62ff88f36c219b625d6031ba12fea6849b38aab1d3ed1219387004bf1c3a44aeec47a3988c9aeb1934a8a06509fe9e00f39135fa22113a01e1cc37
+  languageName: node
+  linkType: hard
+
+"@inquirer/type@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@inquirer/type@npm:3.0.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/fe348db2977fff92cad0ade05b36ec40714326fccd4a174be31663f8923729b4276f1736d892a449627d7fb03235ff44e8aac5aa72b09036d993593b813ef313
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -3404,6 +3616,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/is@npm:^4.6.0":
+  version: 4.6.0
+  resolution: "@sindresorhus/is@npm:4.6.0"
+  checksum: 10c0/33b6fb1d0834ec8dd7689ddc0e2781c2bfd8b9c4e4bacbcb14111e0ae00621f2c264b8a7d36541799d74888b5dccdf422a891a5cb5a709ace26325eedc81e22e
+  languageName: node
+  linkType: hard
+
 "@sindresorhus/merge-streams@npm:^2.1.0":
   version: 2.3.0
   resolution: "@sindresorhus/merge-streams@npm:2.3.0"
@@ -3784,7 +4003,6 @@ __metadata:
     "@spectrum-css/asset": "workspace:^"
     "@spectrum-css/checkbox": "workspace:^"
     "@spectrum-css/icon": "workspace:^"
-    "@spectrum-css/quickaction": "npm:^3.1.1"
     "@spectrum-css/tokens": "workspace:^"
     "@spectrum-css/typography": "workspace:^"
   peerDependencies:
@@ -3804,8 +4022,6 @@ __metadata:
       optional: true
     "@spectrum-css/icon":
       optional: true
-    "@spectrum-css/quickaction":
-      optional: true
     "@spectrum-css/typography":
       optional: true
   languageName: unknown
@@ -4009,16 +4225,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@spectrum-css/cyclebutton@npm:^3.1.3":
-  version: 3.1.3
-  resolution: "@spectrum-css/cyclebutton@npm:3.1.3"
-  peerDependencies:
-    "@spectrum-css/actionbutton": ">=5"
-    "@spectrum-css/vars": ">=9"
-  checksum: 10c0/92eacba8788911201a46a418354e6281037b97e6913bd056c62328848f53c745a3f1c722b7be1cf8900ba86bf6996149d2653d998b2ccf2fee5f955c89a24c00
-  languageName: node
-  linkType: hard
-
 "@spectrum-css/datepicker@workspace:^, @spectrum-css/datepicker@workspace:components/datepicker":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/datepicker@workspace:components/datepicker"
@@ -4161,6 +4367,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@spectrum-css/form@workspace:components/form":
+  version: 0.0.0-use.local
+  resolution: "@spectrum-css/form@workspace:components/form"
+  dependencies:
+    "@spectrum-css/tokens": "workspace:^"
+  peerDependencies:
+    "@spectrum-css/tokens": ">=15"
+  languageName: unknown
+  linkType: soft
+
 "@spectrum-css/generator@workspace:tools/generator":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/generator@workspace:tools/generator"
@@ -4287,6 +4503,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@spectrum-css/meter@workspace:components/meter":
+  version: 0.0.0-use.local
+  resolution: "@spectrum-css/meter@workspace:components/meter"
+  dependencies:
+    "@spectrum-css/progressbar": "workspace:^"
+    "@spectrum-css/tokens": "workspace:^"
+  peerDependencies:
+    "@spectrum-css/progressbar": ">=4"
+    "@spectrum-css/tokens": ">=15"
+  languageName: unknown
+  linkType: soft
+
 "@spectrum-css/miller@workspace:^, @spectrum-css/miller@workspace:components/miller":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/miller@workspace:components/miller"
@@ -4341,14 +4569,12 @@ __metadata:
     "@spectrum-css/actionbutton": "workspace:^"
     "@spectrum-css/button": "workspace:^"
     "@spectrum-css/icon": "workspace:^"
-    "@spectrum-css/splitbutton": "npm:^8.1.2"
     "@spectrum-css/textfield": "workspace:^"
     "@spectrum-css/tokens": "workspace:^"
   peerDependencies:
     "@spectrum-css/actionbutton": ">=6"
     "@spectrum-css/button": ">=13"
     "@spectrum-css/icon": ">=7"
-    "@spectrum-css/splitbutton": ">=8"
     "@spectrum-css/textfield": ">=7"
     "@spectrum-css/tokens": ">=14 || >=15"
   languageName: unknown
@@ -4425,12 +4651,13 @@ __metadata:
   resolution: "@spectrum-css/preview@workspace:.storybook"
   dependencies:
     "@adobe/spectrum-css-workflow-icons": "npm:^1.5.4"
-    "@adobe/spectrum-tokens": "npm:12.25.0"
+    "@adobe/spectrum-tokens": "npm:0.0.0-s2-foundations-20241021172855"
     "@babel/core": "npm:^7.26.0"
     "@chromatic-com/storybook": "npm:^3.2.3"
     "@etchteam/storybook-addon-status": "npm:^5.0.0"
     "@spectrum-css/table": "workspace:^"
     "@spectrum-css/tokens": "workspace:^"
+    "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.6.0"
     "@spectrum-css/ui-icons": "workspace:^"
     "@storybook/addon-a11y": "npm:^8.4.7"
     "@storybook/addon-actions": "npm:^8.4.7"
@@ -4489,17 +4716,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@spectrum-css/quickaction@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "@spectrum-css/quickaction@npm:3.1.1"
-  peerDependencies:
-    "@spectrum-css/actionbutton": ">=5"
-    "@spectrum-css/checkbox": ">=8"
-    "@spectrum-css/vars": ">=9"
-  checksum: 10c0/5c57f78b2715d5b143e2abfeb07129511b5fd242be9a109b0b62db7708923f9aa2f4c709b1e4fd26d1b17436a18f4dec8d6923fd16799d9bdbed3a1348a41e0a
-  languageName: node
-  linkType: hard
-
 "@spectrum-css/radio@workspace:^, @spectrum-css/radio@workspace:components/radio":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/radio@workspace:components/radio"
@@ -4540,19 +4756,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@spectrum-css/searchwithin@npm:^5.1.3":
-  version: 5.1.3
-  resolution: "@spectrum-css/searchwithin@npm:5.1.3"
-  peerDependencies:
-    "@spectrum-css/clearbutton": ">=5"
-    "@spectrum-css/icon": ">=4"
-    "@spectrum-css/picker": ">=3"
-    "@spectrum-css/textfield": ">=5"
-    "@spectrum-css/vars": ">=9"
-  checksum: 10c0/5b5aba2d300e41d37895c071f6ed9f771cc1650ff3643ac53721052cd413fcc8cafa47761e5c9f12d22ec3cbf7ea9990c895b0747ce2bd2a1f8adfa722609726
-  languageName: node
-  linkType: hard
-
 "@spectrum-css/sidenav@workspace:^, @spectrum-css/sidenav@workspace:components/sidenav":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/sidenav@workspace:components/sidenav"
@@ -4580,20 +4783,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@spectrum-css/splitbutton@npm:^8.1.2":
-  version: 8.1.2
-  resolution: "@spectrum-css/splitbutton@npm:8.1.2"
-  peerDependencies:
-    "@spectrum-css/button": ">=11"
-    "@spectrum-css/icon": ">=4"
-    "@spectrum-css/vars": ">=9"
-  peerDependenciesMeta:
-    "@spectrum-css/icon":
-      optional: true
-  checksum: 10c0/4ca2ec3541b6d5a5224d1a92ecb9156519b12731bbae13261a31827e638c1266141f66b8f615f92bafada3729b7893c0839db6dc0d6e0d698603e782925e7335
-  languageName: node
-  linkType: hard
-
 "@spectrum-css/splitview@workspace:^, @spectrum-css/splitview@workspace:components/splitview":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/splitview@workspace:components/splitview"
@@ -4806,19 +4995,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@spectrum-css/tokens-legacy@npm:@spectrum-css/tokens@^14.6.0":
+  version: 14.6.0
+  resolution: "@spectrum-css/tokens@npm:14.6.0"
+  checksum: 10c0/62343030d55fce9de192ca0d1e13bd1ee147c1aba45ecf6b8db27c1740865f9645af8b0b260f0723ce295af2b83cd2014962d62af61b8827a548bc80be9f1012
+  languageName: node
+  linkType: hard
+
 "@spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/tokens@workspace:tokens"
   dependencies:
-    "@adobe/spectrum-tokens": "npm:12.25.0"
+    "@adobe/spectrum-tokens": "npm:0.0.0-s2-foundations-20241121221506"
+    "@adobe/token-diff-generator": "npm:^1.3.0"
     "@nxkit/style-dictionary": "npm:^6.0.0"
     "@spectrum-tools/postcss-rgb-mapping": "workspace:^"
-    cssnano: "npm:^7.0.3"
-    cssnano-preset-advanced: "npm:^7.0.6"
     postcss: "npm:^8.5.0"
     postcss-cli: "npm:^11.0.0"
-    postcss-import: "npm:^16.1.0"
-    postcss-licensing: "npm:^2.0.0"
     postcss-sorting: "npm:^9.1.0"
     prettier: "npm:^3.4.2"
     style-dictionary: "npm:^3.9.2"
@@ -6623,6 +6816,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"assertion-error@npm:~1.0.0":
+  version: 1.0.2
+  resolution: "assertion-error@npm:1.0.2"
+  checksum: 10c0/9958e75c114afc248f82f9e4205e48802d3840fc86a7e12001b3d3042004bf662563b6f11e96e50270bef341e7714d13141aad300acda0fa74bad437e2338193
+  languageName: node
+  linkType: hard
+
 "ast-types@npm:^0.16.1":
   version: 0.16.1
   resolution: "ast-types@npm:0.16.1"
@@ -8694,6 +8894,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-object-diff@npm:^1.1.9":
+  version: 1.1.9
+  resolution: "deep-object-diff@npm:1.1.9"
+  checksum: 10c0/12cfd1b000d16c9192fc649923c972f8aac2ddca4f71a292f8f2c1e2d5cf3c9c16c85e73ab3e7d8a89a5ec6918d6460677d0b05bd160f7bd50bb4816d496dc24
+  languageName: node
+  linkType: hard
+
 "deepmerge@npm:^4.2.2":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
@@ -9203,6 +9410,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emojilib@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "emojilib@npm:2.4.0"
+  checksum: 10c0/6e66ba8921175842193f974e18af448bb6adb0cf7aeea75e08b9d4ea8e9baba0e4a5347b46ed901491dcaba277485891c33a8d70b0560ca5cc9672a94c21ab8f
+  languageName: node
+  linkType: hard
+
+"emojilib@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "emojilib@npm:4.0.1"
+  checksum: 10c0/b9adccce90bf8ed3386439b44c425ea1900413a3a7323adf9ff11309c9148e2811d88611fde2bf27de809f22c94d013e9246ce430adaf25893c2284333b4dd68
+  languageName: node
+  linkType: hard
+
 "encoding@npm:^0.1.13":
   version: 0.1.13
   resolution: "encoding@npm:0.1.13"
@@ -11466,6 +11687,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inquirer@npm:^12.0.0":
+  version: 12.3.2
+  resolution: "inquirer@npm:12.3.2"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.4"
+    "@inquirer/prompts": "npm:^7.2.3"
+    "@inquirer/type": "npm:^3.0.2"
+    ansi-escapes: "npm:^4.3.2"
+    mute-stream: "npm:^2.0.0"
+    run-async: "npm:^3.0.0"
+    rxjs: "npm:^7.8.1"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10c0/cdded52fa440f2622aec2972eb5775789c9c36cea7d31f3f83d5ef692e328a4c52ae1e039960f41d2d5c8a0e6e728b3fb502c1b552dcb6c422dd0f7adc3906a5
+  languageName: node
+  linkType: hard
+
 "inquirer@npm:^9.2.10":
   version: 9.3.6
   resolution: "inquirer@npm:9.3.6"
@@ -14377,6 +14615,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mute-stream@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mute-stream@npm:2.0.0"
+  checksum: 10c0/2cf48a2087175c60c8dcdbc619908b49c07f7adcfc37d29236b0c5c612d6204f789104c98cc44d38acab7b3c96f4a3ec2cfdc4934d0738d876dbefa2a12c69f4
+  languageName: node
+  linkType: hard
+
 "mutexify@npm:^1.1.0":
   version: 1.4.0
   resolution: "mutexify@npm:1.4.0"
@@ -14431,6 +14676,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nixt@npm:^0.5.1":
+  version: 0.5.1
+  resolution: "nixt@npm:0.5.1"
+  dependencies:
+    assertion-error: "npm:~1.0.0"
+    clone: "npm:^1.0.2"
+    shell-quote: "npm:^1.4.1"
+  checksum: 10c0/51044b04efb10fd78a763e8457525f145099147b3639d781e5bb28b2ab501731f814b1bebdaebfcd76c671731416a5157ef93a9f279cfe2b261ce9d99f298041
+  languageName: node
+  linkType: hard
+
 "no-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "no-case@npm:3.0.4"
@@ -14450,6 +14706,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-emoji@npm:^2.1.3":
+  version: 2.2.0
+  resolution: "node-emoji@npm:2.2.0"
+  dependencies:
+    "@sindresorhus/is": "npm:^4.6.0"
+    char-regex: "npm:^1.0.2"
+    emojilib: "npm:^2.4.0"
+    skin-tone: "npm:^2.0.0"
+  checksum: 10c0/9525defbd90a82a2131758c2470203fa2a2faa8edd177147a8654a26307fe03594e52847ecbe2746d06cfc5c50acd12bd500f035350a7609e8217c9894c19aad
+  languageName: node
+  linkType: hard
+
 "node-fetch@npm:^2.5.0, node-fetch@npm:^2.6.7":
   version: 2.7.0
   resolution: "node-fetch@npm:2.7.0"
@@ -17611,6 +17879,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shell-quote@npm:^1.4.1":
+  version: 1.8.2
+  resolution: "shell-quote@npm:1.8.2"
+  checksum: 10c0/85fdd44f2ad76e723d34eb72c753f04d847ab64e9f1f10677e3f518d0e5b0752a176fd805297b30bb8c3a1556ebe6e77d2288dbd7b7b0110c7e941e9e9c20ce1
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4":
   version: 1.0.6
   resolution: "side-channel@npm:1.0.6"
@@ -17644,6 +17919,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"skin-tone@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "skin-tone@npm:2.0.0"
+  dependencies:
+    unicode-emoji-modifier-base: "npm:^1.0.0"
+  checksum: 10c0/82d4c2527864f9cbd6cb7f3c4abb31e2224752234d5013b881d3e34e9ab543545b05206df5a17d14b515459fcb265ce409f9cfe443903176b0360cd20e4e4ba5
+  languageName: node
+  linkType: hard
+
 "slash@npm:^3.0.0":
   version: 3.0.0
   resolution: "slash@npm:3.0.0"
@@ -17826,15 +18110,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "spectrum-css-monorepo@workspace:."
   dependencies:
+    "@adobe/token-diff-generator": "npm:^1.3.0"
     "@changesets/changelog-github": "npm:^0.5.0"
     "@changesets/cli": "npm:^2.27.11"
     "@commitlint/cli": "npm:^19.6.1"
     "@commitlint/config-conventional": "npm:^19.6.0"
     "@nx/devkit": "npm:^19.8.2"
-    "@spectrum-css/cyclebutton": "npm:^3.1.3"
-    "@spectrum-css/quickaction": "npm:^3.1.1"
-    "@spectrum-css/searchwithin": "npm:^5.1.3"
-    "@spectrum-css/splitbutton": "npm:^8.1.2"
+    "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.6.0"
     "@spectrum-tools/postcss-add-theming-layer": "workspace:^"
     "@spectrum-tools/postcss-property-rollup": "workspace:^"
     "@spectrum-tools/postcss-rgb-mapping": "workspace:^"
@@ -18736,6 +19018,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tmp-promise@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "tmp-promise@npm:3.0.3"
+  dependencies:
+    tmp: "npm:^0.2.0"
+  checksum: 10c0/23b47dcb2e82b14bbd8f61ed7a9d9353cdb6a6f09d7716616cfd27d0087040cd40152965a518e598d7aabe1489b9569bf1eebde0c5fadeaf3ec8098adcebea4e
+  languageName: node
+  linkType: hard
+
 "tmp@npm:^0.0.33":
   version: 0.0.33
   resolution: "tmp@npm:0.0.33"
@@ -18745,7 +19036,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tmp@npm:~0.2.1":
+"tmp@npm:^0.2.0, tmp@npm:~0.2.1":
   version: 0.2.3
   resolution: "tmp@npm:0.2.3"
   checksum: 10c0/3e809d9c2f46817475b452725c2aaa5d11985cf18d32a7a970ff25b568438e2c076c2e8609224feef3b7923fa9749b74428e3e634f6b8e520c534eef2fd24125
@@ -19166,6 +19457,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicode-emoji-modifier-base@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "unicode-emoji-modifier-base@npm:1.0.0"
+  checksum: 10c0/b37623fcf0162186debd20f116483e035a2d5b905b932a2c472459d9143d446ebcbefb2a494e2fe4fa7434355396e2a95ec3fc1f0c29a3bc8f2c827220e79c66
+  languageName: node
+  linkType: hard
+
 "unicorn-magic@npm:^0.1.0":
   version: 0.1.0
   resolution: "unicorn-magic@npm:0.1.0"