diff --git a/.circleci/config.yml b/.circleci/config.yml
index f8fcb0e2819..7a1151328fc 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -79,8 +79,6 @@ commands:
                   at: /
     run-regressions:
         parameters:
-            regression_system:
-                type: string
             regression_color:
                 type: string
             regression_scale:
@@ -91,9 +89,9 @@ commands:
             - restore_cache:
                   name: Restore Golden Images Cache
                   keys:
-                      - v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
                       - v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
-                      - v2-golden-images-main-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
+                      - v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
+                      - v2-golden-images-main-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
                       - v2-golden-images-main-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
             - run:
                   name: Count baseline images
@@ -102,7 +100,7 @@ commands:
                   when: always
                   name: VRT Run
                   command: |
-                      yarn test:ci --config web-test-runner.config.vrt.js --group vrt-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>
+                      yarn test:ci --config web-test-runner.config.vrt.js --group vrt-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>
             # store results and artifacts before rearranging things for the new cache.
             - store_test_results:
                   path: /root/project/results/
@@ -124,7 +122,7 @@ commands:
                   name: Create review site
                   command: |
                       branch=$(git symbolic-ref --short HEAD)
-                      node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --system="<< parameters.regression_system >> << parameters.regression_color >> << parameters.regression_scale >> << parameters.regression_dir >>"
+                      node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --system="<< parameters.regression_color >> << parameters.regression_scale >> << parameters.regression_dir >>"
                       yarn rollup -c test/visual/rollup.config.js
             - install-azcopy
             - run:
@@ -198,12 +196,12 @@ commands:
                   name: Build Golden Images Revision Cache
                   paths:
                       - test/visual/screenshots-baseline
-                  key: v2-golden-images-{{ .Revision }}-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
+                  key: v2-golden-images-{{ .Revision }}-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
             - save_cache:
                   name: Build Golden Images Branch Cache
                   paths:
                       - test/visual/screenshots-baseline
-                  key: v2-golden-images-{{ .Branch }}-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
+                  key: v2-golden-images-{{ .Branch }}-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
 
 jobs:
     test-chromium:
@@ -432,8 +430,6 @@ jobs:
     visual:
         executor: node
         parameters:
-            system:
-                type: string
             color:
                 type: string
             scale:
@@ -443,7 +439,6 @@ jobs:
         steps:
             - downstream
             - run-regressions:
-                  regression_system: << parameters.system >>
                   regression_color: << parameters.color >>
                   regression_scale: << parameters.scale >>
                   regression_dir: << parameters.dir >>
@@ -466,10 +461,9 @@ workflows:
                           # Beta docs are only published from main
                           only: main
             - visual:
-                  name: << matrix.system >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
+                  name: << matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
                   matrix:
                       parameters:
-                          system: [spectrum, express, spectrum-two]
                           color: [light]
                           scale: [medium]
                           dir: [ltr]
@@ -478,10 +472,9 @@ workflows:
                           # Forked pull requests have CIRCLE_BRANCH set to pull/XXX
                           ignore: /pull\/[0-9]+/
             - visual:
-                  name: << matrix.system >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
+                  name: << matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
                   matrix:
                       parameters:
-                          system: [spectrum, express, spectrum-two]
                           color: [dark]
                           scale: [large]
                           dir: [rtl]
diff --git a/.github/scripts/build-preview-urls-comment.js b/.github/scripts/build-preview-urls-comment.js
index 86864136aa6..ae4889b2496 100644
--- a/.github/scripts/build-preview-urls-comment.js
+++ b/.github/scripts/build-preview-urls-comment.js
@@ -23,56 +23,26 @@ export const buildPreviewURLComment = (prNumber) => {
 
     const previewCombinations = [
         {
-            system: 'Spectrum',
             color: 'Light',
             scale: 'Medium',
             direction: 'LTR',
-            urlPath: 'spectrum-light-medium-ltr',
+            urlPath: 'light-medium-ltr',
         },
         {
-            system: 'Spectrum',
             color: 'Dark',
             scale: 'Large',
             direction: 'RTL',
-            urlPath: 'spectrum-dark-large-rtl',
-        },
-        {
-            system: 'Express',
-            color: 'Light',
-            scale: 'Medium',
-            direction: 'LTR',
-            urlPath: 'express-light-medium-ltr',
-        },
-        {
-            system: 'Express',
-            color: 'Dark',
-            scale: 'Large',
-            direction: 'RTL',
-            urlPath: 'express-dark-large-rtl',
-        },
-        {
-            system: 'Spectrum-two',
-            color: 'Light',
-            scale: 'Medium',
-            direction: 'LTR',
-            urlPath: 'spectrum-two-light-medium-ltr',
-        },
-        {
-            system: 'Spectrum-two',
-            color: 'Dark',
-            scale: 'Large',
-            direction: 'RTL',
-            urlPath: 'spectrum-two-dark-large-rtl',
+            urlPath: 'dark-large-rtl',
         },
     ];
 
     // Generate preview links for each combination
     previewCombinations.forEach(
-        ({ system, color, scale, direction, urlPath }) => {
+        ({ color, scale, direction, urlPath }) => {
             const vrtUrl = `${baseUrl}/${prHash}/${urlPath}/review/`;
 
             previewLinks.push(`
-- [${system} | ${color} | ${scale} | ${direction}](${vrtUrl})`);
+- [${color} | ${scale} | ${direction}](${vrtUrl})`);
         }
     );
 
@@ -98,7 +68,7 @@ ${previewLinks.join('')}
 
 *Deployed to Azure Blob Storage: \`${prHash}\`*
 
-If the changes are expected, update the <code>current_golden_images_cache</code> hash in the circleci config to accept the new images. Instructions are included in that file. 
+If the changes are expected, update the <code>current_golden_images_cache</code> hash in the circleci config to accept the new images. Instructions are included in that file.
 If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.
 `;
     return comment;
diff --git a/.gitignore b/.gitignore
index 6849bafbbfc..3c632b18cee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
-# logging / private config
+# Logging / private config
 yarn-error.log
 build-storybook.log
 .DS_STORE
@@ -12,72 +12,74 @@ tach-results.*
 .gitconfig
 .env
 
-# documentation
+# Include the cursor guides in the repo
+!.cursor
+
+# Ignore the local-specific cursor config
+.cursor/mcp.json
+
+# Documentation
 documentation/components/searchIndex.json
 documentation/api-docs
 documentation/dist
 searchIndex.json
 
-# dependency folders
+# Dependency folders
 coverage
 lib
 
-# build artifacts
+# Build artifacts
 custom-elements.json
+packages/*/custom-elements.json
+tools/*/custom-elements.json
+react
 
+# Not included in the repo
 !packages/icons-workflow/bin/build.js
 !packages/icons-workflow/src/DefaultIcon.ts
 
+# Generated assets
 packages/*/src/**/*.css.js
-packages/*/custom-elements.json
 packages/**/*.js
 packages/**/*.js.map
 packages/**/*.d.ts
 packages/**/*.test-vrt.ts
-!packages/**/*/spectrum-config.js
-!packages/**/*/spectrum-config.v1.js
-!packages/*/test/global.d.ts
-!packages/*/global.d.ts
-!packages/*/local.d.ts
-
-react
-
+packages/**/*.css.ts
+projects/**/*.css.ts
 projects/**/*.js
 projects/**/*.js.map
 projects/**/*.d.ts
-!projects/*/global.d.ts
-
+tools/**/*.css.ts
 tools/*/src/**/*.css.js
-tools/*/custom-elements.json
 tools/**/*.js
 tools/**/*.js.map
 tools/**/*.d.ts
 tools/**/*.test-vrt.ts
-!tools/**/*/spectrum-config.js
+
+# Include manual typescript declarations
+!packages/*/test/global.d.ts
+!packages/*/global.d.ts
+!packages/*/local.d.ts
+!projects/*/global.d.ts
 !tools/*/test/global.d.ts
 !tools/*/global.d.ts
 !tools/*/local.d.ts
-!tools/base/src/version.js
 !tools/base/src/version.d.ts
+!test/global.d.ts
+
+# Keep the version file
+!tools/base/src/version.js
 
-# cache directories
+# Cache directories
 .wireit
 .eslintcache
 .stylelintcache
 
+# Generated reporting outputes
 stats.html
-
-# typescript assets
-!test/global.d.ts
 *.tsbuildinfo
 
-# built css assets
-packages/**/*.css.ts
-projects/**/*.css.ts
-tools/**/*.css.ts
-styles/**/*.css.ts
-
-# test assets
+# Test assets
 TESTS.xml
 test-results.xml
 test/benchmark/cli.cjs
@@ -89,22 +91,24 @@ test/visual/src/data.json
 test/**/*.js
 test/**/*.js.map
 test/**/*.d.ts
-!test/visual/**/*.js
 test/visual/test.js
 test-results
 
+# Keep the visual files in history
+!test/visual/**/*.js
+
 # npm assets
 node_modules
 npm-debug.log
 package-lock.json
 
-# Chromatic
+# Chromatic logging outputs
 chromatic.log
 chromatic-build-*.xml
 chromatic-diagnostics*.json
 chromatic.config.json
 
-# yarn
+# Build tooling assets
 .pnp.*
 .yarn/*
 !.yarn/patches
diff --git a/.stylelintignore b/.stylelintignore
index 07b13402a4f..8c2516dc53d 100755
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,7 +1,11 @@
+# Node modules
 node_modules
-task
+
+# Build artifacts
+dist
+
+# Ignore all files
 *.*
+
+# Except CSS files
 !*.css
-projects/example-project/dist
-tools/styles
-spectrum-*.css
\ No newline at end of file
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 76f201947fa..fe22a79d8db 100755
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,8 +1,123 @@
 {
-    "plugins": ["stylelint-header"],
+    "plugins": [
+        "stylelint-header",
+        "stylelint-order",
+        "stylelint-use-logical",
+        "@spectrum-tools/stylelint-no-missing-var",
+        "@spectrum-tools/stylelint-no-unused-custom-properties",
+        "@spectrum-tools/stylelint-no-unknown-custom-properties"
+    ],
     "extends": [],
     "rules": {
-        "header/header": ["config/license.js", {}]
+        "header/header": ["config/license.js", {}],
+        "custom-property-empty-line-before": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "declaration-empty-line-before": null,
+        "import-notation": null,
+        "no-descending-specificity": null,
+        "no-duplicate-selectors": null,
+        "number-max-precision": null,
+        "alpha-value-notation": [
+            "percentage",
+            { "exceptProperties": ["opacity"] }
+        ],
+        "at-rule-empty-line-before": [
+            "always",
+            {
+                "except": ["blockless-after-blockless", "first-nested"],
+                "ignore": ["after-comment", "first-nested"],
+                "ignoreAtRules": ["extend"]
+            }
+        ],
+        "at-rule-no-unknown": [
+            true,
+            {
+                "ignoreAtRules": ["extend", "each", "include", "mixin"]
+            }
+        ],
+        "block-no-empty": [
+            true,
+            {
+                "ignore": ["comments"]
+            }
+        ],
+        "color-function-notation": [
+            "modern",
+            { "ignore": ["with-var-inside"] }
+        ],
+        "comment-empty-line-before": [
+            "always",
+            {
+                "except": ["first-nested"],
+                "ignore": ["after-comment", "stylelint-commands"],
+                "ignoreComments": [
+                    "^\\s*@passthroughs?",
+                    "^\\s*@deprecated?",
+                    "^\\s*@todo?"
+                ]
+            }
+        ],
+        "custom-property-pattern": [
+            "^(spectrum|mod|highcontrast|system|_)",
+            {}
+        ],
+        "declaration-block-no-duplicate-custom-properties": true,
+        "declaration-property-value-no-unknown": [
+            true,
+            {
+                "ignoreProperties": {
+                    "/.+/": ["CanvasText", "preserve-parent-color"]
+                }
+            }
+        ],
+        "declaration-block-no-shorthand-property-overrides": true,
+        "function-no-unknown": [
+            true,
+            {
+                "severity": "warning"
+            }
+        ],
+        "max-nesting-depth": [3, { "severity": "warning" }],
+        "property-no-unknown": [
+            true,
+            {
+                "checkPrefixed": true
+            }
+        ],
+        "rule-empty-line-before": [
+            "always",
+            {
+                "except": ["first-nested"],
+                "ignore": ["after-comment"]
+            }
+        ],
+        "selector-attribute-quotes": "always",
+        "selector-class-pattern": [
+            "^(spectrum)[A-Za-z0-9-]*",
+            {
+                "resolveNestedSelectors": true
+            }
+        ],
+        "selector-not-notation": "complex",
+        "value-keyword-case": [
+            "lower",
+            {
+                "camelCaseSvgKeywords": true,
+                "ignoreKeywords": ["Transparent", "Text"]
+            }
+        ],
+        "value-no-vendor-prefix": [
+            true,
+            {
+                "disableFix": true,
+                "severity": "warning"
+            }
+        ],
+        "csstools/use-logical": true,
+        "order/order": ["custom-properties", "declarations"],
+        "spectrum-tools/no-missing-var": true,
+        "spectrum-tools/no-unused-custom-properties": null,
+        "spectrum-tools/no-unknown-custom-properties": null
     },
     "overrides": [
         {
@@ -25,6 +140,33 @@
                 "no-descending-specificity": null,
                 "declaration-block-no-redundant-longhand-properties": null
             }
+        },
+        {
+            "files": ["packages/*/src/*.css", "tools/*/src/*.css"],
+            "extends": ["stylelint-config-standard"],
+            "rules": {
+                "spectrum-tools/no-unknown-custom-properties": [
+                    true,
+                    {
+                        "ignoreList": [
+                            "^--mod-",
+                            "^--system-",
+                            "^--spectrum-picked-color$"
+                        ],
+                        "skipDependencies": false,
+                        "disableFix": true,
+                        "severity": "warning"
+                    }
+                ],
+                "spectrum-tools/no-unused-custom-properties": [
+                    true,
+                    {
+                        "ignoreList": ["^--mod-"],
+                        "disableFix": true,
+                        "severity": "warning"
+                    }
+                ]
+            }
         }
     ]
 }
diff --git a/package.json b/package.json
index 323ec3a6ce2..47d692bffb2 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,9 @@
         "@rollup/plugin-json": "^6.0.1",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@sindresorhus/slugify": "^2.2.1",
+        "@spectrum-tools/stylelint-no-missing-var": "^2.0.2",
+        "@spectrum-tools/stylelint-no-unknown-custom-properties": "^2.0.3",
+        "@spectrum-tools/stylelint-no-unused-custom-properties": "^2.0.5",
         "@spectrum-web-components/eslint-plugin": "file:./linters/eslint",
         "@storybook/addon-a11y": "^8.6.12",
         "@storybook/addon-designs": "^8.2.1",
@@ -115,6 +118,7 @@
         "@storybook/addon-links": "^8.6.12",
         "@storybook/blocks": "^8.6.12",
         "@storybook/manager-api": "^8.6.12",
+        "@storybook/preview-api": "^8.6.14",
         "@storybook/theming": "^8.6.12",
         "@storybook/types": "^8.6.12",
         "@storybook/web-components-webpack5": "^8.6.12",
@@ -122,6 +126,7 @@
         "@types/command-line-args": "^5.0.0",
         "@types/command-line-usage": "^5.0.1",
         "@types/common-tags": "^1.4.0",
+        "@types/lodash-es": "^4",
         "@types/mocha": "^10.0.6",
         "@types/node": "^20.11.11",
         "@types/react": "^18.3.20",
@@ -143,7 +148,7 @@
         "@yarnpkg/types": "^4.0.1",
         "alex": "^11.0.1",
         "cem-plugin-module-file-extensions": "^0.0.5",
-        "chromatic": "^11.20.0",
+        "chromatic": "^13.0.1",
         "chromedriver": "^136.0.0",
         "colors": "^1.4.0",
         "common-tags": "^1.8.2",
@@ -177,6 +182,7 @@
         "lit": "^2.5.0 || ^3.1.3",
         "lit-analyzer": "^2.0.3",
         "lit-html": "^2.4.0 || ^3.1.3",
+        "lodash-es": "^4.17.21",
         "mocha-junit-reporter": "^2.0.2",
         "next": "^14.2.26",
         "node-fetch": "^3.1.0",
@@ -194,6 +200,8 @@
         "stylelint": "^16.19.1",
         "stylelint-config-standard": "^38.0.0",
         "stylelint-header": "^3.0.0",
+        "stylelint-order": "^7.0.0",
+        "stylelint-use-logical": "^2.1.2",
         "tachometer": "^0.7.1",
         "tar-stream": "^3.0.0",
         "terser": "^4.8.1",
@@ -340,8 +348,7 @@
             "files": [
                 "packages/icons-ui/bin/build.js",
                 "packages/icons-ui/packages.json",
-                "node_modules/@spectrum-css/ui-icons/dist/medium/**.svg",
-                "node_modules/@spectrum-css/ui-icons-s2/dist/medium/**.svg"
+                "node_modules/@spectrum-css/ui-icons/dist/medium/**.svg"
             ],
             "output": [
                 "packages/icons-ui/**/*.ts",
diff --git a/packages/.eslintrc.json b/packages/.eslintrc.json
index 4dc758eae86..3fcda295db0 100644
--- a/packages/.eslintrc.json
+++ b/packages/.eslintrc.json
@@ -21,9 +21,7 @@
         "import/no-extraneous-dependencies": [
             "error",
             {
-                "devDependencies": false,
-                "optionalDependencies": false,
-                "peerDependencies": false
+                "devDependencies": false
             }
         ],
         "no-debugger": 2,
@@ -87,6 +85,7 @@
             "files": [
                 "*.test.ts",
                 "*.stories.ts",
+                "**/stories/*.ts",
                 "**/benchmark/*.ts",
                 "**/test/*.ts"
             ],
diff --git a/packages/accordion/package.json b/packages/accordion/package.json
index 47ea06f8557..5acb6cda594 100644
--- a/packages/accordion/package.json
+++ b/packages/accordion/package.json
@@ -33,9 +33,7 @@
             "development": "./src/AccordionItem.dev.js",
             "default": "./src/AccordionItem.js"
         },
-        "./src/accordion-item-overrides.css.js": "./src/accordion-item-overrides.css.js",
         "./src/accordion-item.css.js": "./src/accordion-item.css.js",
-        "./src/accordion-overrides.css.js": "./src/accordion-overrides.css.js",
         "./src/accordion.css.js": "./src/accordion.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/accordion/src/Accordion.ts b/packages/accordion/src/Accordion.ts
index 0a331cd2915..e66ad0b3424 100644
--- a/packages/accordion/src/Accordion.ts
+++ b/packages/accordion/src/Accordion.ts
@@ -31,6 +31,9 @@ import styles from './accordion.css.js';
 /**
  * @element sp-accordion
  * @slot - The sp-accordion-item children to display.
+ * @prop {boolean} allowMultiple - Allows multiple accordion items to be opened at the same time
+ * @prop {'compact' | 'spacious'} density - Sets the spacing between the content to borders of an accordion item
+ * @prop {'s' | 'm' | 'l' | 'xl'} size - Sets the size of the accordion item
  */
 export class Accordion extends SizedMixin(SpectrumElement, {
     noDefaultSize: true,
diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts
index ac96bb408f8..328d7967463 100644
--- a/packages/accordion/src/AccordionItem.ts
+++ b/packages/accordion/src/AccordionItem.ts
@@ -62,6 +62,10 @@ const chevronIcon: Record<string, () => TemplateResult> = {
 
 /**
  * @element sp-accordion-item
+ * @prop {string} label - The label of the accordion item
+ * @prop {boolean} open - Whether the accordion item is open
+ * @prop {boolean} disabled - Whether the accordion item is disabled
+ * @prop {'s' | 'm' | 'l' | 'xl'} size - The size of the accordion item
  * @slot - The content of the item that is hidden when the item is not open
  * @fires sp-accordion-item-toggle - Announce that an accordion item has been toggled while allowing the event to be cancelled.
  */
diff --git a/packages/accordion/src/accordion-item-overrides.css b/packages/accordion/src/accordion-item-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/accordion/src/accordion-item-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/accordion/src/accordion-item.css b/packages/accordion/src/accordion-item.css
index dece669def1..d8e4d0e54d8 100644
--- a/packages/accordion/src/accordion-item.css
+++ b/packages/accordion/src/accordion-item.css
@@ -10,18 +10,185 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-accordion-item.css");
+/* Component structure:
+ * The accordion-item represents a single collapsible section within an accordion.
+ * Features:
+ * - Interactive header with disclosure indicator
+ * - Collapsible content area
+ * - States: default, hover, active, focus, disabled
+ * - RTL support
+ * - Divider customization
+ * - High contrast mode support
+ */
 
+/* Base item structure */
 :host {
-    display: block;
+    --spectrum-accordion-item-min-block-size: max(var(--spectrum-accordion-item-height), calc(var(--spectrum-accordion-item-header-top-to-text-space) + var(--spectrum-accordion-item-header-bottom-to-text-space) + var(--spectrum-accordion-item-header-font-size) * var(--spectrum-accordion-item-header-line-height)));
+
+    z-index: inherit;
+    position: relative;
+    margin: 0;
+    min-block-size: var(--spectrum-accordion-item-height);
+    min-inline-size: var(--spectrum-accordion-item-width);
+    border-block-end: 1px solid transparent;
+    border-color: var(--spectrum-accordion-divider-color);
+    border-width: var(--spectrum-divider-thickness-small);
+}
+
+:host(:first-child) {
+    border-block-start: 1px solid transparent;
+    border-color: var(--spectrum-accordion-divider-color);
+    border-width: var(--spectrum-divider-thickness-small);
 }
 
+/* Header structure */
 #heading {
-    /* .spectrum-Accordion-itemHeading */
-    height: auto;
+    margin: 0;
     position: relative;
+    box-sizing: border-box;
+}
+
+#header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    padding-block: var(--spectrum-accordion-item-header-top-to-text-space) var(--spectrum-accordion-item-header-bottom-to-text-space);
+    padding-inline-start: calc(var(--spectrum-accordion-disclosure-indicator-to-text-space) + var(--spectrum-accordion-disclosure-indicator-height));
+    padding-inline-end: var(--spectrum-accordion-edge-to-text-space);
+    min-block-size: var(--spectrum-accordion-item-min-block-size);
+    line-height: var(--spectrum-accordion-item-header-line-height);
+    text-overflow: ellipsis;
+    cursor: pointer;
+    font-size: var(--spectrum-accordion-item-header-font-size);
+    font-weight: var(--spectrum-accordion-item-header-font-weight);
+    font-style: var(--spectrum-accordion-item-header-font-style);
+    font-family: var(--spectrum-accordion-item-header-font);
+    appearance: none;
+    border: 0;
+    text-align: start;
+    inline-size: 100%;
+    color: var(--spectrum-accordion-item-header-color-default);
+    background-color: var(--spectrum-accordion-background-color-default);
+}
+
+/* Disclosure indicator */
+.iconContainer {
+    padding-inline-start: var(--spectrum-accordion-edge-to-disclosure-indicator-space);
+    inline-size: var(--spectrum-accordion-disclosure-indicator-height);
+    block-size: var(--spectrum-accordion-disclosure-indicator-height);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--spectrum-accordion-item-header-color-default);
+    position: absolute;
+    inset-block-start: max(0px, calc((var(--spectrum-accordion-item-min-block-size) - var(--spectrum-accordion-disclosure-indicator-height)) / 2));
+}
+
+/* Content area */
+#content {
+    padding-block: var(--spectrum-accordion-item-content-area-top-to-content) var(--spectrum-accordion-item-content-area-bottom-to-content);
+    padding-inline: var(--spectrum-accordion-component-edge-to-text) var(--spectrum-accordion-component-edge-to-text);
+    display: none;
+    color: var(--spectrum-accordion-item-content-color);
+    font-weight: var(--spectrum-accordion-item-content-font-weight);
+    font-style: var(--spectrum-accordion-item-content-font-style);
+    font-size: var(--spectrum-accordion-item-content-font-size);
+    font-family: var(--spectrum-accordion-item-content-font);
+    line-height: var(--spectrum-accordion-item-content-line-height);
+}
+
+/* Interactive states */
+#header:focus {
+    outline: none;
+}
+
+#header:hover {
+    background-color: var(--spectrum-accordion-background-color-hover);
+    color: var(--spectrum-accordion-item-header-color-hover);
+}
+
+#header:hover + .iconContainer {
+    color: var(--spectrum-accordion-item-header-color-hover);
+}
+
+#header:focus-visible {
+    border-radius: var(--spectrum-accordion-corner-radius);
+    outline: var(--spectrum-accordion-focus-indicator-thickness) solid var(--spectrum-accordion-focus-indicator-color);
+    background-color: var(--spectrum-accordion-background-color-key-focus);
+    color: var(--spectrum-accordion-item-header-color-key-focus);
+    outline-offset: calc(var(--spectrum-accordion-focus-indicator-gap) * -1);
+}
+
+#header:active {
+    background-color: var(--spectrum-accordion-background-color-down);
+    color: var(--spectrum-accordion-item-header-color-down);
+}
+
+/* Open state */
+:host([open]) #header:hover {
+    background-color: var(--spectrum-accordion-background-color-hover);
+}
+
+:host([open]) #heading > .iconContainer > .icon {
+    transform: var(--spectrum-logical-rotation,) rotate(90deg);
+}
+
+:host([open]) #content {
+    display: block;
+}
+
+/* Disabled state */
+:host([disabled]) #header,
+:host([disabled]) #header:focus-visible,
+:host([disabled]) #header:hover {
+    color: var(--spectrum-accordion-item-header-disabled-color);
+    background-color: initial;
+    cursor: default;
+}
+
+:host([disabled]) #header + .iconContainer {
+    color: var(--spectrum-accordion-item-header-disabled-color);
+}
+
+:host([disabled]) #content {
+    color: var(--spectrum-accordion-item-content-disabled-color);
+}
+
+/* RTL Support */
+:host(:dir(rtl)) .iconContainer,
+:host([dir="rtl"]) .iconContainer {
+    transform: scaleX(-1);
+}
+
+/* Media queries */
+@media (hover: hover) {
+    #header:hover {
+        background-color: var(--spectrum-accordion-background-color-hover);
+    }
+
+    #header:hover,
+    #header:hover + .iconContainer {
+        color: var(--spectrum-accordion-item-header-color-hover);
+    }
+
+    :host([open]) #header:hover {
+        background-color: var(--spectrum-accordion-background-color-hover);
+    }
+
+    :host([disabled]) #header:hover {
+        color: var(--spectrum-accordion-item-header-disabled-color);
+        background-color: initial;
+    }
 }
 
-:host([disabled]) #heading .indicator {
-    color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
+/* High contrast mode */
+@media (forced-colors: active) {
+    #header:after {
+        forced-color-adjust: none;
+        content: "";
+        position: absolute;
+        inset-inline-start: 0;
+    }
 }
diff --git a/packages/accordion/src/accordion-overrides.css b/packages/accordion/src/accordion-overrides.css
deleted file mode 100644
index 37a584bcd35..00000000000
--- a/packages/accordion/src/accordion-overrides.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-accordion-divider-color: var(--system-accordion-divider-color);
-    --spectrum-accordion-item-content-disabled-color: var(--system-accordion-item-content-disabled-color);
-    --spectrum-accordion-item-content-color: var(--system-accordion-item-content-color);
-}
diff --git a/packages/accordion/src/accordion.css b/packages/accordion/src/accordion.css
index 81f0bd473f6..2090049108d 100644
--- a/packages/accordion/src/accordion.css
+++ b/packages/accordion/src/accordion.css
@@ -10,9 +10,171 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-accordion.css");
-@import url("./accordion-overrides.css");
+/* Component structure:
+ * The accordion provides collapsible sections with headers and content areas.
+ * Features:
+ * - Density variants: compact, spacious
+ * - Size variants: s, m (default), l, xl
+ * - Header and content typography customization
+ * - Interactive states: default, hover, active, focus, disabled
+ * - RTL support
+ * - CJK language support
+ * - Divider customization
+ */
 
 :host {
-    --spectrum-logical-rotation: ;
+    /* Layout properties */
+    --spectrum-accordion-item-height: var(--spectrum-component-height-200);
+    --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);
+    --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
+    --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-accordion-min-block-size: max(var(--spectrum-accordion-item-height), calc(var(--spectrum-accordion-item-header-top-to-text-space) + var(--spectrum-accordion-item-header-bottom-to-text-space) + var(--spectrum-accordion-item-header-font-size) * var(--spectrum-accordion-item-header-line-height)));
+
+    /* Spacing properties */
+    --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text);
+    --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator);
+    --spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text);
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
+    --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content);
+    --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content);
+    --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
+
+    /* Focus indicator properties */
+    --spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+    /* Typography - Header */
+    --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
+    --spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style);
+    --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
+    --spectrum-accordion-item-header-line-height: 1.25;
+
+    /* Typography - Content */
+    --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack);
+    --spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+    --spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style);
+    --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
+    --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100);
+
+    /* Colors - Background */
+    --spectrum-accordion-background-color-default: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-default), transparent);
+    --spectrum-accordion-background-color-hover: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-hover), transparent);
+    --spectrum-accordion-background-color-down: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-down), transparent);
+    --spectrum-accordion-background-color-key-focus: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-key-focus), transparent);
+
+    /* Colors - Header */
+    --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down);
+    --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);
+
+    /* Colors - Content and Divider */
+    --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);
+
+    /* Base styles */
+    display: block;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+/* RTL Support */
+:host(:dir(rtl)),
+:host([dir="rtl"]) {
+    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+}
+
+/* Language Support */
+:host(:lang(ja), :lang(ko), :lang(zh)) {
+    --spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
+    --spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
+}
+
+/* Density Variants - Compact */
+:host([density="compact"]) {
+    --spectrum-accordion-item-height: var(--spectrum-component-height-100);
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
+}
+
+/* Size Variants with Compact Density */
+:host([density="compact"][size="s"]) {
+    --spectrum-accordion-item-height: var(--spectrum-component-height-75);
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
+}
+
+:host([density="compact"][size="l"]) {
+    --spectrum-accordion-item-height: var(--spectrum-component-height-200);
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
+}
+
+:host([density="compact"][size="xl"]) {
+    --spectrum-accordion-item-height: var(--spectrum-component-height-300);
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
+}
+
+/* Density Variants - Spacious */
+:host([density="spacious"]) {
+    --spectrum-accordion-item-header-line-height: 1.278;
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
+}
+
+/* Size Variants with Spacious Density */
+:host([density="spacious"][size="s"]) {
+    --spectrum-accordion-item-header-line-height: 1.25;
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
+}
+
+:host([density="spacious"][size="l"]) {
+    --spectrum-accordion-item-header-line-height: 1.273;
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
+}
+
+:host([density="spacious"][size="xl"]) {
+    --spectrum-accordion-item-header-line-height: 1.25;
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
+}
+
+/* Size Variants */
+:host([size="s"]) {
+    --spectrum-accordion-item-height: var(--spectrum-component-height-100);
+    --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
+    --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
+    --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
+    --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
+}
+
+:host([size="l"]) {
+    --spectrum-accordion-item-height: var(--spectrum-component-height-300);
+    --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
+    --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
+    --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
+    --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
+}
+
+:host([size="xl"]) {
+    --spectrum-accordion-item-height: var(--spectrum-component-height-400);
+    --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
+    --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
+    --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
+    --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
+    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
+    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
 }
diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css
deleted file mode 100644
index 12bf0f834b6..00000000000
--- a/packages/accordion/src/spectrum-accordion-item.css
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    z-index: inherit;
-    min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height));
-    min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width));
-    border-block-end: 1px solid #0000;
-    border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
-    border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
-    margin: 0;
-    position: relative;
-}
-
-:host(:first-child) {
-    border-block-start: 1px solid #0000;
-    border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
-    border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
-}
-
-#heading {
-    box-sizing: border-box;
-    margin: 0;
-    position: relative;
-}
-
-.iconContainer {
-    inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
-    block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
-    color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
-    justify-content: center;
-    align-items: center;
-    padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space));
-    display: flex;
-    position: absolute;
-    inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
-}
-
-.iconContainer:dir(rtl),
-:host([dir="rtl"]) .iconContainer {
-    transform: scaleX(-1);
-}
-
-#content {
-    padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content));
-    padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text));
-    color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color));
-    font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight));
-    font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style));
-    font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size));
-    font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font));
-    line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height));
-    display: none;
-}
-
-#header {
-    box-sizing: border-box;
-    padding-block: 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));
-    min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size));
-    line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height));
-    text-overflow: ellipsis;
-    cursor: pointer;
-    font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size));
-    font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight));
-    font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style));
-    font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font));
-    appearance: none;
-    text-align: start;
-    inline-size: 100%;
-    color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
-    background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default));
-    border: 0;
-    justify-content: flex-start;
-    align-items: center;
-    padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)));
-    padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space));
-    display: flex;
-    position: relative;
-}
-
-#header:focus {
-    outline: none;
-}
-
-#header:focus:after {
-    content: "";
-    position: absolute;
-    inset-inline-start: 0;
-}
-
-#header:focus-visible {
-    border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius));
-    outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color));
-    background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus));
-    color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus));
-    outline-offset: calc(var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1);
-}
-
-#header:active {
-    background-color: var(--mod-accordion-background-color-down, var(--spectrum-accordion-background-color-down));
-    color: var(--mod-accordion-item-header-color-down, var(--spectrum-accordion-item-header-color-down));
-}
-
-:host([disabled]) #header,
-:host([disabled]) #header:focus-visible {
-    color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
-    background-color: initial;
-}
-
-@media (hover: hover) {
-    #header:hover {
-        background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
-    }
-
-    #header:hover,
-    #header:hover + .iconContainer {
-        color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover));
-    }
-
-    :host([open]) #header:hover {
-        background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
-    }
-
-    :host([disabled]) #header:hover {
-        color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
-        background-color: initial;
-    }
-}
-
-:host([disabled]) #header + .iconContainer {
-    color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
-}
-
-:host([disabled]) #content {
-    color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
-}
-
-@media (forced-colors: active) {
-    #header:after {
-        forced-color-adjust: none;
-        content: "";
-        position: absolute;
-        inset-inline-start: 0;
-    }
-}
-
-:host([open]) > #heading > .iconContainer > .indicator,
-:host([open]) > .iconContainer > .indicator {
-    transform: rotate(90deg);
-    transform: var(--spectrum-logical-rotation,) rotate(90deg);
-}
-
-:host([open]) > #content {
-    display: block;
-}
-
-:host([disabled]) #header {
-    cursor: default;
-}
diff --git a/packages/accordion/src/spectrum-accordion.css b/packages/accordion/src/spectrum-accordion.css
deleted file mode 100644
index c4f79e97ee4..00000000000
--- a/packages/accordion/src/spectrum-accordion.css
+++ /dev/null
@@ -1,149 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-accordion-item-height: var(--spectrum-component-height-200);
-    --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);
-    --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
-    --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text);
-    --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator);
-    --spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text);
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
-    --spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100);
-    --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content);
-    --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content);
-    --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
-    --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
-    --spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight);
-    --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style);
-    --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
-    --spectrum-accordion-item-header-line-height: 1.25;
-    --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack);
-    --spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
-    --spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style);
-    --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
-    --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100);
-    --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
-    --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
-    --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
-    --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));
-    --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down);
-    --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-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --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)))
-    );
-}
-
-:host:dir(rtl),
-:host([dir="rtl"]) {
-    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-}
-
-:host:lang(ja),
-:host:lang(ko),
-:host:lang(zh) {
-    --spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
-    --spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
-}
-
-:host([density="compact"]) {
-    --spectrum-accordion-item-height: var(--spectrum-component-height-100);
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
-}
-
-:host([density="compact"][size="s"]) {
-    --spectrum-accordion-item-height: var(--spectrum-component-height-75);
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
-}
-
-:host([density="compact"][size="l"]) {
-    --spectrum-accordion-item-height: var(--spectrum-component-height-200);
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
-}
-
-:host([density="compact"][size="xl"]) {
-    --spectrum-accordion-item-height: var(--spectrum-component-height-300);
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
-}
-
-:host([density="spacious"]) {
-    --spectrum-accordion-item-header-line-height: 1.278;
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
-}
-
-:host([density="spacious"][size="s"]) {
-    --spectrum-accordion-item-header-line-height: 1.25;
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
-}
-
-:host([density="spacious"][size="l"]) {
-    --spectrum-accordion-item-header-line-height: 1.273;
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
-}
-
-:host([density="spacious"][size="xl"]) {
-    --spectrum-accordion-item-header-line-height: 1.25;
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
-}
-
-:host([size="s"]) {
-    --spectrum-accordion-item-height: var(--spectrum-component-height-100);
-    --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
-    --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
-    --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
-    --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
-}
-
-:host([size="l"]) {
-    --spectrum-accordion-item-height: var(--spectrum-component-height-300);
-    --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
-    --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
-    --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
-    --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
-}
-
-:host([size="xl"]) {
-    --spectrum-accordion-item-height: var(--spectrum-component-height-400);
-    --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
-    --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
-    --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
-    --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
-    --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
-    --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
-}
-
-:host {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: block;
-}
diff --git a/packages/accordion/stories/accordion-densities-compact.stories.ts b/packages/accordion/stories/accordion-densities-compact.stories.ts
deleted file mode 100644
index 4eaf3433a4e..00000000000
--- a/packages/accordion/stories/accordion-densities-compact.stories.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import { TemplateResult } from '@spectrum-web-components/base';
-import { AccordionMarkup } from './';
-
-export default {
-    title: 'Accordion/Densities/Compact',
-    component: 'sp-accordion',
-};
-
-export const s = (): TemplateResult =>
-    AccordionMarkup({ density: 'compact', size: 's' });
-export const m = (): TemplateResult =>
-    AccordionMarkup({ density: 'compact', size: 'm' });
-export const l = (): TemplateResult =>
-    AccordionMarkup({ density: 'compact', size: 'l' });
-export const xl = (): TemplateResult =>
-    AccordionMarkup({ density: 'compact', size: 'xl' });
diff --git a/packages/accordion/stories/accordion-densities-spacious.stories.ts b/packages/accordion/stories/accordion-densities-spacious.stories.ts
deleted file mode 100644
index 2e807da1455..00000000000
--- a/packages/accordion/stories/accordion-densities-spacious.stories.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import { TemplateResult } from '@spectrum-web-components/base';
-import { AccordionMarkup } from './';
-
-export default {
-    title: 'Accordion/Densities/Spacious',
-    component: 'sp-accordion',
-};
-
-export const s = (): TemplateResult =>
-    AccordionMarkup({ density: 'spacious', size: 's' });
-export const m = (): TemplateResult =>
-    AccordionMarkup({ density: 'spacious', size: 'm' });
-export const l = (): TemplateResult =>
-    AccordionMarkup({ density: 'spacious', size: 'l' });
-export const xl = (): TemplateResult =>
-    AccordionMarkup({ density: 'spacious', size: 'xl' });
diff --git a/packages/accordion/stories/accordion-sizes.stories.ts b/packages/accordion/stories/accordion-sizes.stories.ts
deleted file mode 100644
index e0bdb4fb155..00000000000
--- a/packages/accordion/stories/accordion-sizes.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import { TemplateResult } from '@spectrum-web-components/base';
-import { AccordionMarkup } from './';
-
-export default {
-    title: 'Accordion/Sizes',
-    component: 'sp-accordion',
-};
-
-export const s = (): TemplateResult => AccordionMarkup({ size: 's' });
-export const m = (): TemplateResult => AccordionMarkup({ size: 'm' });
-export const l = (): TemplateResult => AccordionMarkup({ size: 'l' });
-export const xl = (): TemplateResult => AccordionMarkup({ size: 'xl' });
diff --git a/packages/accordion/stories/accordion.stories.ts b/packages/accordion/stories/accordion.stories.ts
index 483c58aed7a..a61ef50e3a3 100644
--- a/packages/accordion/stories/accordion.stories.ts
+++ b/packages/accordion/stories/accordion.stories.ts
@@ -10,8 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import { TemplateResult } from '@spectrum-web-components/base';
-import { AccordionMarkup } from './';
+import { Template } from './template.js';
 import { argTypes } from './args.js';
 
 import '@spectrum-web-components/accordion/sp-accordion.js';
@@ -27,35 +26,138 @@ export default {
         density: undefined,
     },
     argTypes,
+    parameters: {
+        testData: [
+            {
+                testHeading: 'Standard',
+            },
+            {
+                testHeading: 'Compact',
+                density: 'compact',
+                withStates: false,
+                withSizes: true,
+            },
+            {
+                testHeading: 'Spacious',
+                density: 'spacious',
+                withStates: false,
+                withSizes: true,
+            },
+        ],
+        stateData: [
+            {
+                testHeading: 'Disabled',
+                disabled: true,
+            },
+        ],
+    },
 };
 
-type Properties = {
-    allowMultiple?: boolean;
-    disabled?: boolean;
-    open?: boolean;
-    density?: 'compact' | 'spacious' | undefined;
-    size?: 's' | 'm' | 'l' | 'xl';
+export const Default = Template.bind({});
+
+// ********* VRT ONLY ********* //
+export const WithForcedColors = Template.bind({});
+WithForcedColors.args = Default.args;
+WithForcedColors.tags = ['!autodocs', '!dev'];
+WithForcedColors.parameters = {
+    chromatic: {
+        forcedColors: 'active',
+        modes: {
+            'Light | LTR': {
+                disable: true,
+            },
+            'Dark | RTL': {
+                disable: true,
+            },
+        },
+    },
 };
 
-export const Default = (args?: Properties): TemplateResult =>
-    AccordionMarkup(args);
+// ********* DOCS ONLY ********* //
+
+/**
+ * Accordion items have a default width for each size, but a custom width can also be set to any
+ * width that meets or exceeds the minimum width.
+ */
+export const CustomWidth = Template.bind({});
+CustomWidth.tags = ['!dev'];
+CustomWidth.storyName = 'Custom width';
+CustomWidth.args = {
+    customStyles: {
+        '--mod-accordion-item-width': '500px',
+    },
+};
+CustomWidth.parameters = {
+    chromatic: { disableSnapshot: true },
+};
 
-export const Open = (args?: Properties): TemplateResult =>
-    AccordionMarkup(args);
-Open.args = {
-    open: true,
-    allowMultiple: false,
-    disabled: false,
+/**
+ * The compact density has less vertical spacing between rows.
+ */
+export const Compact = Template.bind({});
+Compact.tags = ['!dev'];
+Compact.args = {
+    density: 'compact',
 };
+Compact.parameters = {
+    chromatic: { disableSnapshot: true },
+};
+Compact.storyName = 'Density: Compact';
 
-export const AllowMultiple = (args?: Properties): TemplateResult =>
-    AccordionMarkup(args);
-AllowMultiple.args = {
-    allowMultiple: true,
+/**
+ * The spacious density has more vertical spacing between rows.
+ */
+export const Spacious = Template.bind({});
+Spacious.tags = ['!dev'];
+Spacious.args = {
+    density: 'spacious',
 };
+Spacious.parameters = {
+    chromatic: { disableSnapshot: true },
+};
+Spacious.storyName = 'Density: Spacious';
 
-export const Disabled = (args?: Properties): TemplateResult =>
-    AccordionMarkup(args);
+/**
+ * Individual accordion items can be disabled by applying the `.is-disabled` class to the
+ * `.spectrum-Accordion-item` element. This example also demonstrates the use of the disabled
+ * attribute on the heading button.
+ */
+export const Disabled = Template.bind({});
+Disabled.tags = ['!dev'];
 Disabled.args = {
-    disabled: true,
+    disableAll: true,
+};
+Disabled.parameters = {
+    chromatic: { disableSnapshot: true },
+};
+
+/**
+ * The optional quiet style for accordion has no dividers between sections. This style works best
+ * when a clear layout (vertical stack, table, grid) makes it easy to see and understand because
+ * too many quiet components in a small space can be hard to differentiate. This can be applied by
+ * adding the `.spectrum-Accordion--quiet` class alongside the parent `.spectrum-Accordion` class.
+ */
+export const Quiet = Template.bind({});
+Quiet.tags = ['!dev'];
+Quiet.args = {
+    isQuiet: true,
+};
+Quiet.parameters = {
+    chromatic: { disableSnapshot: true },
+};
+
+/**
+ * Implementations may choose to remove inline padding from the accordion item headers by adding
+ * the `.spectrum-Accordion--noInlinePadding` class alongside the parent `.spectrum-Accordion`
+ * class. Accordion item header padding will be removed, but the body text content will keep its
+ * own padding from the edge.
+ */
+export const NoInlinePadding = Template.bind({});
+NoInlinePadding.storyName = 'No inline padding';
+NoInlinePadding.tags = ['!dev'];
+NoInlinePadding.args = {
+    hasNoInlinePadding: true,
+};
+NoInlinePadding.parameters = {
+    chromatic: { disableSnapshot: true },
 };
diff --git a/packages/accordion/stories/args.ts b/packages/accordion/stories/args.ts
index b2d7be1450a..0c4dd0fac9c 100644
--- a/packages/accordion/stories/args.ts
+++ b/packages/accordion/stories/args.ts
@@ -10,55 +10,72 @@
  * governing permissions and limitations under the License.
  */
 
+import type { TemplateResult } from '@spectrum-web-components/base';
+
+export type Properties = {
+    content?: {
+        label: string;
+        content: TemplateResult;
+        disabled?: boolean;
+        open?: boolean;
+    }[];
+    allowMultiple?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    density?: 'compact' | 'spacious';
+    size?: 's' | 'm' | 'l' | 'xl';
+    isHovered?: boolean;
+};
+
 export const argTypes = {
     open: {
         name: 'open',
         type: { name: 'boolean', required: false },
-        description: 'Whether the second accordion item is open.',
+        description: 'True if the second accordion item is open.',
         table: {
             type: { summary: 'boolean' },
             defaultValue: { summary: false },
         },
-        control: {
-            type: 'boolean',
-        },
+        control: 'boolean',
     },
     allowMultiple: {
-        name: 'allowMultiple',
+        name: 'Allow multiple',
         type: { name: 'boolean', required: false },
         description:
-            'Whether multipel Accordion Items can be open at the same time.',
+            'True if multiple accordion items can be open at the same time.',
         table: {
             type: { summary: 'boolean' },
             defaultValue: { summary: false },
         },
-        control: {
-            type: 'boolean',
-        },
+        control: 'boolean',
     },
     density: {
-        name: 'density',
-        type: { name: 'string', required: false },
+        name: 'Density',
+        type: { name: 'string', required: true },
         description: 'The density at which to display accordion items.',
         table: {
+            type: { summary: 'string' },
             defaultValue: { summary: 'default' },
         },
+        options: ['compact', 'default', 'spacious'],
         control: {
             labels: {
                 compact: 'Compact',
+                undefined: 'Default',
                 spacious: 'Spacious',
-                default: 'Default',
             },
             type: 'select',
         },
     },
     size: {
-        name: 'size',
-        type: { name: 'string', required: false },
+        name: 'Size',
+        type: { name: 'string', required: true },
         description: 'The size at which to display accordion items.',
         table: {
+            type: { summary: 'string' },
             defaultValue: { summary: 'm' },
         },
+        options: ['s', 'm', 'l', 'xl'],
         control: {
             labels: {
                 s: 'Small',
diff --git a/packages/accordion/stories/index.ts b/packages/accordion/stories/index.ts
deleted file mode 100644
index 91406705178..00000000000
--- a/packages/accordion/stories/index.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import { html, TemplateResult } from '@spectrum-web-components/base';
-
-import '@spectrum-web-components/accordion/sp-accordion.js';
-import '@spectrum-web-components/accordion/sp-accordion-item.js';
-import '@spectrum-web-components/link/sp-link.js';
-
-export const AccordionMarkup = ({
-    allowMultiple = false,
-    disabled = false,
-    open = false,
-    size = 'm',
-    density = undefined as unknown,
-} = {}): TemplateResult => {
-    return html`
-        <sp-accordion
-            ?allow-multiple=${allowMultiple}
-            density=${density}
-            size=${size}
-        >
-            <sp-accordion-item label="Heading 1" ?disabled=${disabled}>
-                <div>Item 1</div>
-            </sp-accordion-item>
-            <sp-accordion-item label="Heading 2" ?open=${open}>
-                Item 2
-            </sp-accordion-item>
-            <sp-accordion-item label="Heading 3">
-                <p>
-                    This is content that has a
-                    <sp-link
-                        href="http://opensource.adobe.com/spectrum-web-components"
-                        target="_blank"
-                    >
-                        link back to Spectrum Web Components
-                    </sp-link>
-                    so that it is easy to test that "Space" and "Enter"
-                    interactions on focusable content does NOT toggle the
-                    Accordion Item.
-                </p>
-            </sp-accordion-item>
-        </sp-accordion>
-    `;
-};
diff --git a/packages/accordion/stories/template.ts b/packages/accordion/stories/template.ts
index 894f637f2bf..991847ab136 100644
--- a/packages/accordion/stories/template.ts
+++ b/packages/accordion/stories/template.ts
@@ -10,6 +10,73 @@
  * governing permissions and limitations under the License.
  */
 
-import { AccordionMarkup } from './';
+import { html, TemplateResult } from '@spectrum-web-components/base';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
-export const Template = AccordionMarkup;
+import '@spectrum-web-components/accordion/sp-accordion.js';
+import '@spectrum-web-components/accordion/sp-accordion-item.js';
+import '@spectrum-web-components/link/sp-link.js';
+
+import type { Properties } from './args.js';
+
+export const Template = ({
+    content = [
+        {
+            label: 'Heading 1',
+            content: html`
+                <p>Item 1</p>
+            `,
+        },
+        {
+            label: 'Heading 2',
+            content: html`
+                <p>
+                    This is content that has a
+                    <sp-link
+                        href="http://opensource.adobe.com/spectrum-web-components"
+                        target="_blank"
+                    >
+                        link back to Spectrum Web Components
+                    </sp-link>
+                    so that it is easy to test that "Space" and "Enter"
+                    interactions on focusable content does NOT toggle the
+                    Accordion Item.
+                </p>
+            `,
+        },
+        {
+            label: 'Heading 3',
+            content: html`
+                <p>Item 3</p>
+            `,
+        },
+    ],
+    allowMultiple = false,
+    disabled = false,
+    open = false,
+    size = 'm',
+    density,
+    // isHovered = false,
+    // isActive = false,
+    // isFocused = false,
+}: Properties = {}): TemplateResult => {
+    return html`
+        <sp-accordion
+            ?allow-multiple=${allowMultiple}
+            density=${ifDefined(density)}
+            size=${size}
+        >
+            ${content.map(
+                (item, idx) => html`
+                    <sp-accordion-item
+                        label=${item.label}
+                        ?disabled=${idx === 2 && disabled}
+                        ?open=${idx === 1 && open}
+                    >
+                        ${item.content}
+                    </sp-accordion-item>
+                `
+            )}
+        </sp-accordion>
+    `;
+};
diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json
index f9967f27df2..c22ea13ea0c 100644
--- a/packages/action-bar/package.json
+++ b/packages/action-bar/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ActionBar.dev.js",
             "default": "./src/ActionBar.js"
         },
-        "./src/action-bar-overrides.css.js": "./src/action-bar-overrides.css.js",
         "./src/action-bar.css.js": "./src/action-bar.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/action-bar/src/action-bar-overrides.css b/packages/action-bar/src/action-bar-overrides.css
deleted file mode 100644
index 1e7bdc91382..00000000000
--- a/packages/action-bar/src/action-bar-overrides.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-actionbar-popover-background-color: var(--system-action-bar-popover-background-color);
-    --spectrum-actionbar-popover-border-color: var(--system-action-bar-popover-border-color);
-}
diff --git a/packages/action-bar/src/action-bar.css b/packages/action-bar/src/action-bar.css
index 9f4bcca1409..b00cd635c8d 100644
--- a/packages/action-bar/src/action-bar.css
+++ b/packages/action-bar/src/action-bar.css
@@ -10,13 +10,128 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-action-bar.css");
-@import url("./action-bar-overrides.css");
-
+/* Base variables */
 :host {
+    /* layout */
+    --spectrum-action-bar-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+    --spectrum-action-bar-item-counter-line-height: var(--spectrum-line-height-100);
+    --spectrum-action-bar-item-counter-color: var(--spectrum-neutral-content-color-default);
+
+    /* colors - applied to popover */
+    --spectrum-action-bar-popover-background-color: var(--spectrum-background-elevated-color);
+
+    /* spacing of action bar bottom and horizontal outer edge */
+    --spectrum-action-bar-spacing-outer-edge: var(--spectrum-spacing-300);
+
+    /* drop shadow */
+    --spectrum-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-elevated-x);
+    --spectrum-action-bar-shadow-vertical: var(--spectrum-drop-shadow-elevated-y);
+    --spectrum-action-bar-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
+    --spectrum-action-bar-shadow-color: var(--spectrum-drop-shadow-elevated-color);
+
+    /* *
+     * ActionBar is outer wrapper with nested popover component
+     * within; creates horizontal spacing to edge
+     */
+    padding: 0 var(--spectrum-action-bar-spacing-outer-edge);
+    inset-block-end: 0;
+    z-index: 1;
+
+    /* account for fixed width */
+    box-sizing: border-box;
+
+    /* let clicks in blank space fall through */
+    pointer-events: none;
+
+    /* take up no space and be invisible when not open */
+    block-size: 0;
+    opacity: 0;
     display: block;
 }
 
+/* cjk language support for item counter */
+:host(:lang(ja)),
+:host(:lang(zh)),
+:host(:lang(ko)) {
+    --spectrum-action-bar-item-counter-line-height: var(--spectrum-cjk-line-height-100);
+}
+
+:host([open]) {
+    /* add ActionBar bottom margin to height for correct spacing even when sticky */
+    block-size: calc(var(--spectrum-action-bar-spacing-outer-edge) + var(--spectrum-action-bar-height));
+    opacity: 1;
+}
+
+sp-popover {
+    /* popover is ActionBar height */
+    block-size: var(--spectrum-action-bar-height);
+    min-inline-size: var(--spectrum-action-bar-minimum-width);
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin: auto;
+    padding-inline: var(--spectrum-action-bar-edge-to-content-area);
+    padding-block: var(--spectrum-action-bar-top-to-content-area) var(--spectrum-action-bar-bottom-to-content-area);
+
+    /* be relative so our width can be restricted */
+    position: relative;
+    border-radius: var(--spectrum-action-bar-corner-radius);
+    border-color: var(--spectrum-action-bar-border-color);
+    background-color: var(--spectrum-action-bar-popover-background-color);
+    filter: drop-shadow(var(--spectrum-action-bar-shadow-horizontal) var(--spectrum-action-bar-shadow-vertical) var(--spectrum-action-bar-shadow-blur) var(--spectrum-action-bar-shadow-color));
+
+    /* let clicks do their thing */
+    pointer-events: auto;
+
+    /* inner layout of content items */
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+/* item counter */
+.field-label {
+    --spectrum-fieldlabel-font-size: var(--spectrum-action-bar-counter-font-size);
+    --spectrum-fieldlabel-line-height: var(--spectrum-action-bar-item-counter-line-height);
+
+    color: var(--spectrum-action-bar-item-counter-color);
+    padding-inline-start: var(--spectrum-action-bar-close-button-to-counter);
+}
+
+/* cjk language support */
+:host(:lang(ja)) .field-label,
+:host(:lang(zh)) .field-label,
+:host(:lang(ko)) .field-label {
+    line-height: var(--spectrum-action-bar-item-counter-line-height-cjk);
+}
+
+/* action group */
+.action-group {
+    /* align to end by default */
+    margin-inline-start: auto;
+    padding-inline-start: var(--spectrum-action-bar-label-to-action-group-area);
+}
+
+:host([variant="sticky"]) {
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    position: sticky;
+}
+
+:host([variant="fixed"]) {
+    position: fixed;
+}
+
 :host([flexible]) {
     display: inline-block;
 }
+
+/* flexible width */
+:host([flexible]) sp-popover {
+    inline-size: auto;
+}
+
+@media (forced-colors: active) {
+    sp-popover {
+        border-color: CanvasText;
+    }
+}
diff --git a/packages/action-bar/src/spectrum-action-bar.css b/packages/action-bar/src/spectrum-action-bar.css
deleted file mode 100644
index dc491c2a631..00000000000
--- a/packages/action-bar/src/spectrum-action-bar.css
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-actionbar-height: var(--spectrum-action-bar-height);
-    --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100);
-    --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100);
-    --spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);
-    --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);
-    --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
-    --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
-    --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);
-    --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100);
-    --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100);
-    --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75);
-    --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter);
-    --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400);
-    --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100);
-    --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100);
-    --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x);
-    --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y);
-    --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur);
-    --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color);
-}
-
-:host:lang(ja),
-:host:lang(ko),
-:host:lang(zh) {
-    --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
-}
-
-@media (forced-colors: active) {
-    :host,
-    :host([emphasized]) #popover {
-        --highcontrast-actionbar-popover-border-color: CanvasText;
-    }
-}
-
-:host {
-    padding: 0 var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge));
-    z-index: 1;
-    box-sizing: border-box;
-    pointer-events: none;
-    block-size: 0;
-    opacity: 0;
-    inset-block-end: 0;
-}
-
-:host([open]) {
-    block-size: calc(var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)) + var(--mod-actionbar-height, var(--spectrum-actionbar-height)));
-    opacity: 1;
-}
-
-#popover {
-    block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height));
-    box-sizing: border-box;
-    inline-size: 100%;
-    border-radius: var(--mod-actionbar-corner-radius, var(--spectrum-actionbar-corner-radius));
-    border-color: var(--highcontrast-actionbar-popover-border-color, var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color)));
-    background-color: var(--mod-actionbar-popover-background-color, var(--spectrum-actionbar-popover-background-color));
-    filter: drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color)));
-    pointer-events: auto;
-    flex-direction: row;
-    margin: auto;
-    padding-block: 0;
-    display: flex;
-    position: relative;
-}
-
-.close-button {
-    flex-shrink: 0;
-    margin-block-start: var(--mod-actionbar-spacing-close-button-top, var(--spectrum-actionbar-spacing-close-button-top));
-    margin-inline-start: var(--mod-actionbar-spacing-close-button-start, var(--spectrum-actionbar-spacing-close-button-start));
-    margin-inline-end: var(--mod-actionbar-spacing-close-button-end, var(--spectrum-actionbar-spacing-close-button-end));
-}
-
-.field-label {
-    font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size));
-    color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color));
-    line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height));
-    margin-block-start: var(--mod-actionbar-spacing-item-counter-top, var(--spectrum-actionbar-spacing-item-counter-top));
-    margin-inline-end: var(--mod-actionbar-spacing-item-counter-end, var(--spectrum-actionbar-spacing-item-counter-end));
-    padding: 0;
-}
-
-.field-label:lang(ja),
-.field-label:lang(ko),
-.field-label:lang(zh) {
-    line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk));
-}
-
-.action-group {
-    margin-block-start: var(--mod-actionbar-spacing-action-group-top, var(--spectrum-actionbar-spacing-action-group-top));
-    margin-inline-start: auto;
-    margin-inline-end: var(--mod-actionbar-spacing-action-group-end, var(--spectrum-actionbar-spacing-action-group-end));
-}
-
-:host([emphasized]) #popover {
-    filter: none;
-    background-color: var(--mod-actionbar-emphasized-background-color, var(--spectrum-actionbar-emphasized-background-color));
-    border-color: #0000;
-}
-
-:host([emphasized]) .field-label {
-    color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color));
-}
-
-:host([variant="sticky"]) {
-    position: sticky;
-    inset-inline: 0;
-}
-
-:host([variant="fixed"]) {
-    position: fixed;
-}
-
-:host([flexible]) #popover {
-    inline-size: auto;
-}
diff --git a/packages/action-bar/stories/action-bar.stories.ts b/packages/action-bar/stories/action-bar.stories.ts
index af1f3fcd202..dfbdb504a33 100644
--- a/packages/action-bar/stories/action-bar.stories.ts
+++ b/packages/action-bar/stories/action-bar.stories.ts
@@ -10,23 +10,29 @@
  * governing permissions and limitations under the License.
  */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { Template } from './template.js';
+import { argTypes } from './args.js';
 
 import '@spectrum-web-components/action-bar/sp-action-bar.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
-
-import { Template } from './template.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
 
 export default {
     title: 'Action Bar',
     component: 'sp-action-bar',
+    args: {
+        open: true,
+        emphasized: false,
+        tools: true,
+        content: '2 selected',
+        hasActionMenu: false,
+    },
+    argTypes,
     parameters: {
         // Getting the Figma link: https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
         design: {
@@ -36,69 +42,85 @@ export default {
     },
 };
 
-export const Default = (): TemplateResult =>
-    Template({
-        open: true,
-    });
+export const Default = Template.bind({});
+
+// ********* VRT ONLY ********* //
+export const WithForcedColors = Template.bind({});
+WithForcedColors.args = Default.args;
+WithForcedColors.tags = ['!autodocs', '!dev'];
+WithForcedColors.parameters = {
+    chromatic: {
+        forcedColors: 'active',
+        modes: {
+            'Light | LTR': {
+                disable: true,
+            },
+            'Dark | RTL': {
+                disable: true,
+            },
+        },
+    },
+};
+
+// ********* DOCS ONLY ********* //
+
+/**
+ * The emphasized variant provides additional visual weight to the action bar.
+ */
+export const Emphasized = Template.bind({});
+Emphasized.tags = ['!dev'];
+Emphasized.args = {
+    emphasized: true,
+};
+Emphasized.parameters = {
+    chromatic: { disableSnapshot: true },
+};
 
-export const emphasized = (): TemplateResult => {
-    return html`
-        <sp-action-bar open emphasized>
-            2 selected
-            <sp-action-button slot="buttons" label="Edit">
-                <sp-icon-edit slot="icon"></sp-icon-edit>
-            </sp-action-button>
-        </sp-action-bar>
-    `;
+/**
+ * The fixed variant positions the action bar at a fixed location on the screen.
+ */
+export const Fixed = Template.bind({});
+Fixed.tags = ['!dev'];
+Fixed.args = {
+    variant: 'fixed',
+};
+Fixed.parameters = {
+    chromatic: { disableSnapshot: true },
 };
 
-export const fixed = (): TemplateResult => {
-    return html`
-        <style>
-            [variant='fixed'] {
-                bottom: 2.5em;
-                inset-inline-end: 1em;
-            }
-        </style>
-        <sp-action-bar open variant="fixed">
-            2 selected
-            <sp-action-button slot="buttons" label="Edit">
-                <sp-icon-edit slot="icon"></sp-icon-edit>
-            </sp-action-button>
-        </sp-action-bar>
-    `;
+/**
+ * The flexible variant allows the action bar to adapt to different screen sizes.
+ */
+export const Flexible = Template.bind({});
+Flexible.tags = ['!dev'];
+Flexible.args = {
+    variant: 'flexible',
+    emphasized: true,
+};
+Flexible.parameters = {
+    chromatic: { disableSnapshot: true },
 };
 
-export const flexible = (): TemplateResult => {
-    return html`
-        <sp-action-bar open flexible emphasized>
-            2 selected
-            <sp-action-button slot="buttons" label="Edit">
-                <sp-icon-edit slot="icon"></sp-icon-edit>
-            </sp-action-button>
-        </sp-action-bar>
-    `;
+/**
+ * Action bars can include action menus for additional functionality.
+ */
+export const WithActionMenu = Template.bind({});
+WithActionMenu.tags = ['!dev'];
+WithActionMenu.args = {
+    hasActionMenu: true,
+};
+WithActionMenu.parameters = {
+    chromatic: { disableSnapshot: true },
 };
 
-export const hasActionMenuAsChild = (): TemplateResult => {
-    return html`
-        <sp-action-bar open>
-            2 selected
-            <sp-action-button slot="buttons" label="Edit">
-                <sp-icon-edit slot="icon"></sp-icon-edit>
-            </sp-action-button>
-            <sp-action-menu label="More Actions" slot="buttons">
-                <sp-menu-item>One</sp-menu-item>
-                <sp-menu-item>Two</sp-menu-item>
-                <sp-menu-item>
-                    Select some items
-                    <sp-menu slot="submenu" selects="multiple">
-                        <sp-menu-item>A</sp-menu-item>
-                        <sp-menu-item selected>B</sp-menu-item>
-                        <sp-menu-item>C</sp-menu-item>
-                    </sp-menu>
-                </sp-menu-item>
-            </sp-action-menu>
-        </sp-action-bar>
-    `;
+/**
+ * Action bars can be displayed without tools for simpler use cases.
+ */
+export const WithoutTools = Template.bind({});
+WithoutTools.tags = ['!dev'];
+WithoutTools.args = {
+    tools: false,
+};
+WithoutTools.parameters = {
+    chromatic: { disableSnapshot: true },
 };
diff --git a/packages/action-bar/stories/args.ts b/packages/action-bar/stories/args.ts
index 2191d460a52..eb22e282c66 100644
--- a/packages/action-bar/stories/args.ts
+++ b/packages/action-bar/stories/args.ts
@@ -10,6 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
+export type Properties = {
+    emphasized?: boolean;
+    open?: boolean;
+    tools?: boolean;
+    variant?: 'default' | 'fixed' | 'flexible';
+    content?: string;
+    hasActionMenu?: boolean;
+};
+
 export const argTypes = {
     open: {
         name: 'open',
@@ -19,9 +28,7 @@ export const argTypes = {
             type: { summary: 'boolean' },
             defaultValue: { summary: true },
         },
-        control: {
-            type: 'boolean',
-        },
+        control: 'boolean',
     },
     emphasized: {
         name: 'emphasized',
@@ -31,9 +38,7 @@ export const argTypes = {
             type: { summary: 'boolean' },
             defaultValue: { summary: false },
         },
-        control: {
-            type: 'boolean',
-        },
+        control: 'boolean',
     },
     tools: {
         name: 'tools',
@@ -43,8 +48,44 @@ export const argTypes = {
             type: { summary: 'boolean' },
             defaultValue: { summary: true },
         },
+        control: 'boolean',
+    },
+    variant: {
+        name: 'variant',
+        type: { name: 'string', required: false },
+        description: 'The variant of the action bar.',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: 'default' },
+        },
+        options: ['default', 'fixed', 'flexible'],
         control: {
-            type: 'boolean',
+            labels: {
+                default: 'Default',
+                fixed: 'Fixed',
+                flexible: 'Flexible',
+            },
+            type: 'select',
+        },
+    },
+    content: {
+        name: 'content',
+        type: { name: 'string', required: false },
+        description: 'The content text displayed in the action bar.',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: '2 selected' },
+        },
+        control: 'text',
+    },
+    hasActionMenu: {
+        name: 'hasActionMenu',
+        type: { name: 'boolean', required: false },
+        description: 'Whether to include an action menu in the action bar.',
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
         },
+        control: 'boolean',
     },
 };
diff --git a/packages/action-bar/stories/template.ts b/packages/action-bar/stories/template.ts
index 48b487f7f63..feaa9216473 100644
--- a/packages/action-bar/stories/template.ts
+++ b/packages/action-bar/stories/template.ts
@@ -11,26 +11,34 @@
  */
 
 import { html, TemplateResult } from '@spectrum-web-components/base';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 import '@spectrum-web-components/action-bar/sp-action-bar.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
+import '@spectrum-web-components/action-menu/sp-action-menu.js';
+import '@spectrum-web-components/menu/sp-menu.js';
+import '@spectrum-web-components/menu/sp-menu-item.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
 
-export interface Properties {
-    emphasized?: boolean;
-    open?: boolean;
-    tools?: boolean;
-}
+import type { Properties } from './args.js';
 
 export const Template = ({
-    emphasized,
-    open,
+    emphasized = false,
+    open = true,
     tools = true,
-}: Properties): TemplateResult => {
+    variant,
+    content = '2 selected',
+    hasActionMenu = false,
+}: Properties = {}): TemplateResult => {
     return html`
-        <sp-action-bar ?open=${open} ?emphasized=${emphasized}>
-            2 selected
+        <sp-action-bar
+            ?open=${open}
+            ?emphasized=${emphasized}
+            variant=${ifDefined(variant)}
+        >
+            ${content}
             ${tools
                 ? html`
                       <sp-action-button slot="buttons" label="Edit">
@@ -41,6 +49,22 @@ export const Template = ({
                       </sp-action-button>
                   `
                 : html``}
+            ${hasActionMenu
+                ? html`
+                      <sp-action-menu label="More Actions" slot="buttons">
+                          <sp-menu-item>One</sp-menu-item>
+                          <sp-menu-item>Two</sp-menu-item>
+                          <sp-menu-item>
+                              Select some items
+                              <sp-menu slot="submenu" selects="multiple">
+                                  <sp-menu-item>A</sp-menu-item>
+                                  <sp-menu-item selected>B</sp-menu-item>
+                                  <sp-menu-item>C</sp-menu-item>
+                              </sp-menu>
+                          </sp-menu-item>
+                      </sp-action-menu>
+                  `
+                : html``}
         </sp-action-bar>
     `;
 };
diff --git a/packages/action-button/package.json b/packages/action-button/package.json
index 9583feb49d1..dad49e14669 100644
--- a/packages/action-button/package.json
+++ b/packages/action-button/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ActionButton.dev.js",
             "default": "./src/ActionButton.js"
         },
-        "./src/action-button-overrides.css.js": "./src/action-button-overrides.css.js",
         "./src/action-button.css.js": "./src/action-button.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/action-button/src/action-button-overrides.css b/packages/action-button/src/action-button-overrides.css
deleted file mode 100644
index bac440ce117..00000000000
--- a/packages/action-button/src/action-button-overrides.css
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-actionbutton-background-color-default: var(--system-action-button-background-color-default);
-    --spectrum-actionbutton-background-color-hover: var(--system-action-button-background-color-hover);
-    --spectrum-actionbutton-background-color-down: var(--system-action-button-background-color-down);
-    --spectrum-actionbutton-background-color-focus: var(--system-action-button-background-color-focus);
-    --spectrum-actionbutton-background-color-disabled: var(--system-action-button-background-color-disabled);
-    --spectrum-actionbutton-background-color-selected: var(--system-action-button-background-color-selected);
-    --spectrum-actionbutton-background-color-selected-hover: var(--system-action-button-background-color-selected-hover);
-    --spectrum-actionbutton-background-color-selected-down: var(--system-action-button-background-color-selected-down);
-    --spectrum-actionbutton-background-color-selected-focus: var(--system-action-button-background-color-selected-focus);
-    --spectrum-actionbutton-border-color-default: var(--system-action-button-border-color-default);
-    --spectrum-actionbutton-border-color-hover: var(--system-action-button-border-color-hover);
-    --spectrum-actionbutton-border-color-down: var(--system-action-button-border-color-down);
-    --spectrum-actionbutton-border-color-focus: var(--system-action-button-border-color-focus);
-    --spectrum-actionbutton-border-color-disabled: var(--system-action-button-border-color-disabled);
-    --spectrum-actionbutton-content-color-selected: var(--system-action-button-content-color-selected);
-    --spectrum-actionbutton-background-color-selected-disabled: var(--system-action-button-background-color-selected-disabled);
-}
-
-:host {
-    --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-m-border-radius-default);
-}
-
-:host([size="xs"]) {
-    --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-xs-border-radius-default);
-}
-
-:host([size="s"]) {
-    --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-s-border-radius-default);
-}
-
-:host([size="l"]) {
-    --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-l-border-radius-default);
-}
-
-:host([size="xl"]) {
-    --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-xl-border-radius-default);
-}
-
-:host([quiet]) {
-    --spectrum-actionbutton-background-color-default: var(--system-action-button-quiet-background-color-default);
-    --spectrum-actionbutton-background-color-hover: var(--system-action-button-quiet-background-color-hover);
-    --spectrum-actionbutton-background-color-down: var(--system-action-button-quiet-background-color-down);
-    --spectrum-actionbutton-background-color-focus: var(--system-action-button-quiet-background-color-focus);
-    --spectrum-actionbutton-background-color-disabled: var(--system-action-button-quiet-background-color-disabled);
-    --spectrum-actionbutton-background-color-selected-disabled: var(--system-action-button-quiet-background-color-selected-disabled);
-}
-
-:host([static-color="black"]) {
-    --spectrum-actionbutton-border-color-default: var(--system-action-button-static-black-border-color-default);
-    --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-black-border-color-hover);
-    --spectrum-actionbutton-border-color-down: var(--system-action-button-static-black-border-color-down);
-    --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-black-border-color-focus);
-    --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-black-border-color-disabled);
-    --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-black-background-color-disabled);
-    --spectrum-actionbutton-background-color-selected-disabled: var(--system-action-button-static-black-background-color-selected-disabled);
-    --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-background-color-default);
-    --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-background-color-hover);
-    --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-background-color-down);
-    --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-background-color-focus);
-}
-
-:host([static-color="black"][quiet]) {
-    --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-quiet-background-color-default);
-    --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-quiet-background-color-hover);
-    --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-quiet-background-color-down);
-    --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-quiet-background-color-focus);
-    --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-black-quiet-background-color-disabled);
-}
-
-:host([static-color="white"]) {
-    --spectrum-actionbutton-border-color-default: var(--system-action-button-static-white-border-color-default);
-    --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-white-border-color-hover);
-    --spectrum-actionbutton-border-color-down: var(--system-action-button-static-white-border-color-down);
-    --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-white-border-color-focus);
-    --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-white-border-color-disabled);
-    --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-white-background-color-disabled);
-    --spectrum-actionbutton-background-color-selected-disabled: var(--system-action-button-static-white-background-color-selected-disabled);
-    --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-background-color-default);
-    --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-background-color-hover);
-    --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-background-color-down);
-    --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-background-color-focus);
-}
-
-:host([static-color="white"][quiet]) {
-    --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-quiet-background-color-default);
-    --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-quiet-background-color-hover);
-    --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-quiet-background-color-down);
-    --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-quiet-background-color-focus);
-    --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-white-quiet-background-color-disabled);
-}
diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css
index 6e8c9665ce3..df1479205b0 100644
--- a/packages/action-button/src/action-button.css
+++ b/packages/action-button/src/action-button.css
@@ -10,47 +10,496 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-action-button.css");
-@import url("./action-button-overrides.css");
+/* Component structure:
+ * sp-action-button provides a clickable element with various visual styles and states.
+ * Features:
+ * - Size variants: xs, s, m (default), l, xl
+ * - States: default, hover, active, focus, disabled, selected
+ * - Treatments: default, quiet
+ * - Icon support: start, icon-only
+ * - Static colors: black, white
+ * - High contrast mode support
+ * - RTL support
+ * - Focus ring with customizable gap and thickness
+ * - Hold affordance support
+ */
+
+/* Base styles */
+:host {
+    /* Animation */
+    --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
+
+    /* Focus ring */
+    --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);
+
+    /* Layout */
+    --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium);
+    --spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
+    --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);
+
+    /* Typography */
+    --spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
+    --spectrum-actionbutton-font-weight: var(--spectrum-medium-font-weight);
+    --spectrum-actionbutton-font-style: var(--spectrum-default-font-style);
+    --spectrum-actionbutton-line-height: var(--spectrum-actionbutton-height);
+
+    /* Spacing */
+    --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: var(--spectrum-component-edge-to-visual-100);
+    --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100);
+    --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
+
+    /* Icon */
+    --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
+
+    /* Colors */
+    --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-border-color-selected: transparent;
+
+    --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-content-color-disabled: var(--spectrum-disabled-content-color);
+
+    --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100);
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+
+    /* Base styles */
+    container-type: size;
+    cursor: pointer;
+    user-select: none;
+    overflow: visible;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--spectrum-sans-font-family-stack);
+    vertical-align: top;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: var(--spectrum-line-height-100);
+    text-decoration: none;
+    text-transform: none;
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
+    -webkit-appearance: button;
+
+    /* Layout */
+    border-radius: var(--spectrum-actionbutton-border-radius);
+    border-width: var(--spectrum-actionbutton-border-width);
+    border-style: solid;
+    min-inline-size: var(--spectrum-actionbutton-min-width);
+    min-block-size: var(--spectrum-actionbutton-height);
+    padding-inline: var(--spectrum-actionbutton-edge-to-text);
+    position: relative;
+
+    /* Typography */
+    font-size: var(--spectrum-actionbutton-font-size);
+    font-weight: var(--spectrum-actionbutton-font-weight);
+    font-style: var(--spectrum-actionbutton-font-style);
+
+    /* Colors and transitions */
+    background-color: var(--spectrum-actionbutton-background-color-default);
+    border-color: var(--spectrum-actionbutton-border-color-default);
+    color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default));
+    transition:
+        background var(--spectrum-animation-duration-100) ease-out,
+        border-color var(--highcontrast-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out,
+        color var(--spectrum-animation-duration-100) ease-out,
+        box-shadow var(--spectrum-animation-duration-100) ease-out;
+}
+
+/* RTL support */
+:host(:dir(rtl)),
+:host([dir="rtl"]) {
+    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+}
+
+:host(::-moz-focus-inner) {
+    margin-block-start: -2px;
+    margin-block-end: -2px;
+    padding: 0;
+    border: 0;
+    border-style: none;
+}
+
+:host(:focus) {
+    outline: none;
+}
+
+:host([disabled]),
+:host(:disabled) {
+    --spectrum-actionbutton-border-color-default: var(--spectrum-actionbutton-border-color-disabled);
+    --spectrum-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-disabled);
+    --spectrum-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-disabled);
+
+    cursor: default;
+}
 
 ::slotted([slot="icon"]) {
     flex-shrink: 0;
+    max-block-size: 100%;
+}
+
+:host(:has(slot[name="icon"]:not(:empty))) {
+    user-select: none;
+
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
+    -webkit-appearance: none;
 }
 
 #label {
-    flex-grow: var(--spectrum-actionbutton-label-flex-grow);
-    text-align: var(--spectrum-actionbutton-label-text-align);
-    pointer-events: none !important;
+    align-self: center;
+    justify-self: center;
+    text-align: center;
 }
 
-/* confirm with css if we can keep it as css level */
+#label:empty {
+    display: none;
+}
 
-:host([size="xs"]) {
-    /* Work around non-square icon only Action Buttons in Spectrum CSS */
-    min-width: var(--spectrum-actionbutton-height, 0);
+:host {
+    --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
+    --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium);
+    --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-content-color-disabled: var(--spectrum-disabled-content-color);
+
+    --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100);
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+
+    --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-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-font-weight: var(--spectrum-medium-font-weight);
+    --spectrum-actionbutton-font-style: var(--spectrum-default-font-style);
+    --spectrum-actionbutton-line-height: var(--spectrum-actionbutton-height);
 
-    --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width));
+    --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: var(--spectrum-component-edge-to-visual-100);
+    --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100);
+    --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
 }
 
-:host([size="s"]) {
-    --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width));
+/* Quiet treatment */
+:host([quiet]) {
+    --spectrum-actionbutton-background-color-default: transparent;
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-disabled: transparent;
 }
 
-:host([size="m"]) {
-    --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width));
+:host([quiet][selected]) {
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+}
+
+/* Selected state */
+:host([selected]) {
+    --spectrum-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-selected);
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-selected-hover);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-selected-down);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
+
+    --spectrum-actionbutton-content-color-default: var(--spectrum-gray-25);
+    --spectrum-actionbutton-content-color-hover: var(--spectrum-gray-25);
+    --spectrum-actionbutton-content-color-down: var(--spectrum-gray-25);
+    --spectrum-actionbutton-content-color-focus: var(--spectrum-gray-25);
+
+    /* Update border color to selected state */
+    --spectrum-actionbutton-border-color: var(--spectrum-actionbutton-border-color-selected);
+}
+
+:host([selected][emphasized]) {
+    --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default);
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+
+    --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);
+}
+
+/* Static colors */
+:host([static-color="black"]) {
+    --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100);
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200);
+    --spectrum-actionbutton-background-color-selected: var(--spectrum-transparent-black-800);
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+
+    --spectrum-actionbutton-content-color-default: var(--spectrum-transparent-black-800);
+    --spectrum-actionbutton-content-color-hover: var(--spectrum-transparent-black-900);
+    --spectrum-actionbutton-content-color-down: var(--spectrum-transparent-black-900);
+    --spectrum-actionbutton-content-color-focus: var(--spectrum-transparent-black-900);
+    --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+
+    --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+}
+
+:host([static-color="black"][quiet]) {
+    --spectrum-actionbutton-background-color-default: transparent;
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200);
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-black-25);
+}
+
+:host([static-color="black"][selected]) {
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
+
+    --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);
+}
+
+:host([static-color="white"]) {
+    --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100);
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200);
+    --spectrum-actionbutton-background-color-selected: var(--spectrum-transparent-white-800);
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+
+    --spectrum-actionbutton-content-color-default: var(--spectrum-transparent-white-800);
+    --spectrum-actionbutton-content-color-hover: var(--spectrum-transparent-white-900);
+    --spectrum-actionbutton-content-color-down: var(--spectrum-transparent-white-900);
+    --spectrum-actionbutton-content-color-focus: var(--spectrum-transparent-white-900);
+    --spectrum-actionbutton-content-color-selected: var(--spectrum-black);
+    --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+
+    --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+}
+
+:host([static-color="white"][quiet]) {
+    --spectrum-actionbutton-background-color-default: transparent;
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200);
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-white-25);
+}
+
+:host([static-color="white"][selected]) {
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+
+    --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
+    --spectrum-actionbutton-content-color-down: var(--spectrum-black);
+    --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
+}
+
+/* Size variants */
+:host([size="xs"]) {
+    --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-small);
+    --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: var(--spectrum-component-edge-to-visual-50);
+    --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-50);
+}
+
+:host([size="s"]) {
+    --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-small);
+    --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: var(--spectrum-component-edge-to-visual-75);
+    --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-75);
 }
 
 :host([size="l"]) {
-    --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width));
+    --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-large);
+    --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: var(--spectrum-component-edge-to-visual-200);
+    --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-200);
 }
 
 :host([size="xl"]) {
-    --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));
+    --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+    --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: var(--spectrum-component-edge-to-visual-300);
+    --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-300);
+}
+
+/* Label styles */
+#label {
+    align-self: center;
+    justify-self: center;
+    text-align: center;
+    padding-block-start: calc(var(--spectrum-actionbutton-top-to-text) - var(--spectrum-actionbutton-border-width));
+    padding-block-end: calc(var(--spectrum-actionbutton-bottom-to-text) - var(--spectrum-actionbutton-border-width));
+    line-height: var(--spectrum-actionbutton-line-height);
+}
+
+#label:empty {
+    display: none;
+}
+
+/* Icon styles */
+::slotted([slot="icon"]) {
+    flex-shrink: 0;
+    max-block-size: 100%;
+    color: inherit;
+    align-self: center;
+}
+
+:host(:has(slot[name="icon"]:not(:empty))) {
+    user-select: none;
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
+    -webkit-appearance: none;
+}
+
+:host(:not(:has(#label:not(:empty)))) {
+    padding-inline: var(--spectrum-actionbutton-edge-to-visual-only);
+}
+
+/* Hold affordance */
+.hold-affordance {
+    position: absolute;
+    inset-inline-end: var(--spectrum-actionbutton-edge-to-hold-icon);
+    inset-block-start: calc(50% - var(--spectrum-actionbutton-icon-size) / 2);
+    block-size: var(--spectrum-actionbutton-icon-size);
+    inline-size: var(--spectrum-actionbutton-icon-size);
+    transform: var(--spectrum-logical-rotation);
 }
 
+/* Focus styles */
+:host:after {
+    content: "";
+    display: block;
+    position: absolute;
+    inset: 0;
+    margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1);
+    border-radius: var(--spectrum-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)));
+    transition: box-shadow var(--spectrum-animation-duration-100) ease-in-out;
+    pointer-events: none;
+}
+
+:host(:focus) {
+    outline: none;
+}
+
+:host(:focus-visible) {
+    box-shadow: none;
+    outline: none;
+}
+
+:host(:focus-visible):after {
+    box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--highcontrast-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-indicator-color));
+}
+
+/* Interactive states */
+:host(:hover) {
+    --spectrum-actionbutton-border-color-default: var(--spectrum-actionbutton-border-color-hover);
+    --spectrum-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-hover);
+    --spectrum-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-hover);
+}
+
+@media (hover: hover) {
+    :host(:hover) {
+        --spectrum-actionbutton-border-color-default: var(--spectrum-actionbutton-border-color-hover);
+        --spectrum-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-hover);
+        --spectrum-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-hover);
+    }
+}
+
+:host(:active) {
+    --spectrum-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-down);
+    --spectrum-actionbutton-border-color-default: var(--spectrum-actionbutton-border-color-down);
+    --spectrum-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-down);
+
+    transform: perspective(max(100cqh, 100cqw * var(--spectrum-component-size-width-ratio-down, 0.3333))) translateZ(var(--spectrum-component-size-difference-down));
+}
+
+/* High contrast mode - combine forced-color-adjust rules */
 @media (forced-colors: active) {
+    :host(:active),
+    :host(:hover),
+    :host(:focus-visible),
+    :host([disabled]),
+    :host(:disabled),
+    .hold-affordance,
+    ::slotted([slot="icon"]) {
+        forced-color-adjust: none;
+    }
+
     :host {
-        --highcontrast-actionbutton-border-color-disabled: GrayText;
-        --highcontrast-actionbutton-content-color-disabled: GrayText;
+        --spectrum-actionbutton-border-color-default: ButtonBorder;
+        --spectrum-actionbutton-border-color-hover: ButtonBorder;
+        --spectrum-actionbutton-border-color-down: ButtonBorder;
+        --spectrum-actionbutton-border-color-focus: ButtonBorder;
+        --spectrum-actionbutton-border-color-selected: Highlight;
+        --spectrum-actionbutton-border-color-disabled: GrayText;
+
+        --spectrum-actionbutton-background-color-selected: Highlight;
+        --spectrum-actionbutton-background-color-disabled: ButtonFace;
+
+        --spectrum-actionbutton-content-color-selected: HighlightText;
+        --spectrum-actionbutton-content-color-disabled: GrayText;
+
+        --spectrum-actionbutton-focus-ring-color: ButtonText;
+    }
+
+    :host([quiet]) {
+        --spectrum-actionbutton-background-color-default: ButtonFace;
+        --spectrum-actionbutton-background-color-hover: ButtonFace;
+
+        --spectrum-actionbutton-background-color-down: ButtonFace;
+        --spectrum-actionbutton-background-color-focus: ButtonFace;
+    }
+
+    :host([quiet]:not([selected])) {
+        --spectrum-actionbutton-border-color-disabled: transparent;
     }
 }
diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css
deleted file mode 100644
index 210ddc0591a..00000000000
--- a/packages/action-button/src/spectrum-action-button.css
+++ /dev/null
@@ -1,328 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    box-sizing: border-box;
-    font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
-    text-transform: none;
-    vertical-align: top;
-    -webkit-appearance: button;
-    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;
-    border-style: solid;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    display: inline-flex;
-    overflow: visible;
-}
-
-:host(:focus) {
-    outline: none;
-}
-
-:host([disabled]),
-:host([disabled]) {
-    cursor: default;
-}
-
-::slotted([slot="icon"]) {
-    max-block-size: 100%;
-    flex-shrink: 0;
-}
-
-#label {
-    text-align: center;
-    place-self: center;
-}
-
-#label:empty {
-    display: none;
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-actionbutton-focus-indicator-color: ButtonText;
-        --highcontrast-actionbutton-content-color: ButtonText;
-    }
-
-    :host:after {
-        forced-color-adjust: none;
-    }
-
-    :host([selected]) {
-        --highcontrast-actionbutton-background-color: Highlight;
-        --highcontrast-actionbutton-border-color: HighlightText;
-        --highcontrast-actionbutton-content-color: HighlightText;
-    }
-
-    :host([selected]) .hold-affordance,
-    :host([selected]) ::slotted([slot="icon"]),
-    :host([selected]) #label {
-        forced-color-adjust: none;
-    }
-
-    :host([disabled]),
-    :host([disabled]) {
-        --highcontrast-actionbutton-content-color: GrayText;
-        --highcontrast-actionbutton-border-color: GrayText;
-        --highcontrast-actionbutton-background-color: ButtonFace;
-    }
-}
-
-:host {
-    --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)));
-    --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default));
-    --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
-    --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)));
-}
-
-:host:dir(rtl),
-:host([dir="rtl"]) {
-    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-}
-
-:host([quiet]) {
-    --spectrum-actionbutton-border-color: transparent;
-}
-
-:host([emphasized]:not([static-color="black"], [static-color="white"])) {
-    --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));
-}
-
-:host([static-color="black"]) {
-    --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);
-    --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);
-}
-
-:host([static-color="white"]) {
-    --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);
-    --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);
-    --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);
-}
-
-:host([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));
-}
-
-@media (hover: hover) {
-    :host(: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));
-    }
-}
-
-:host(:focus-visible) {
-    --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));
-}
-
-:host(:is(:active, [active])) {
-    --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));
-}
-
-:host([disabled]),
-:host([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));
-}
-
-:host,
-:host {
-    --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);
-}
-
-:host([size="xs"]) {
-    --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);
-}
-
-:host([size="s"]) {
-    --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);
-}
-
-:host([size="l"]) {
-    --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);
-}
-
-:host([size="xl"]) {
-    --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);
-}
-
-:host {
-    --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));
-    --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)));
-    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);
-    border-radius: var(--spectrum-actionbutton-border-radius);
-    border-width: var(--spectrum-actionbutton-border-width);
-    gap: calc(var(--spectrum-actionbutton-text-to-visual) + var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only));
-    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;
-    position: relative;
-}
-
-:host:after {
-    margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1);
-    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-animation-duration-100)) ease-in-out;
-    pointer-events: none;
-    content: "";
-    position: absolute;
-    inset: 0;
-}
-
-:host(:focus-visible) {
-    box-shadow: none;
-    outline: none;
-}
-
-:host(:focus-visible):after {
-    box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--spectrum-actionbutton-focus-indicator-color);
-}
-
-::slotted([slot="icon"]) {
-    inline-size: var(--spectrum-actionbutton-icon-size);
-    block-size: var(--spectrum-actionbutton-icon-size);
-    color: inherit;
-    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));
-}
-
-.hold-affordance + ::slotted([slot="icon"]),
-[icon-only]::slotted([slot="icon"]) {
-    margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
-}
-
-#label {
-    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;
-}
-
-.hold-affordance {
-    color: inherit;
-    transform: var(--spectrum-logical-rotation,);
-    position: absolute;
-    inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
-    inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
-}
diff --git a/packages/action-group/package.json b/packages/action-group/package.json
index f00680a6f06..3180751c029 100644
--- a/packages/action-group/package.json
+++ b/packages/action-group/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ActionGroup.dev.js",
             "default": "./src/ActionGroup.js"
         },
-        "./src/action-group-overrides.css.js": "./src/action-group-overrides.css.js",
         "./src/action-group.css.js": "./src/action-group.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/action-group/src/action-group-overrides.css b/packages/action-group/src/action-group-overrides.css
deleted file mode 100644
index 2127a750402..00000000000
--- a/packages/action-group/src/action-group-overrides.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-actiongroup-gap-size-compact: var(--system-action-group-gap-size-compact);
-    --spectrum-actiongroup-horizontal-spacing-compact: var(--system-action-group-horizontal-spacing-compact);
-    --spectrum-actiongroup-vertical-spacing-compact: var(--system-action-group-vertical-spacing-compact);
-}
diff --git a/packages/action-group/src/action-group.css b/packages/action-group/src/action-group.css
index cc542760182..a5368aaced1 100644
--- a/packages/action-group/src/action-group.css
+++ b/packages/action-group/src/action-group.css
@@ -10,101 +10,173 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-action-group.css");
-@import url("./action-group-overrides.css");
+/* Component structure:
+ * sp-action-group provides a container for grouping related action buttons with advanced selection capabilities.
+ *
+ * Features:
+ * - Size variants: xs, s, m (default), l, xl (via SizedMixin)
+ * - Selection modes: none (default), single (radio), multiple (checkbox)
+ * - Layout variants: horizontal (default), vertical
+ * - Display variants: regular (default), compact, justified, emphasized, quiet
+ * - Static color support: white, black
+ * - RTL support via logical properties
+ * - Keyboard navigation via roving tabindex
+ * - Focus delegation and management
+ * - Accessible ARIA attributes
+ * - Shadow DOM encapsulation
+ *
+ * Slots:
+ * - default: accepts sp-action-button and sp-action-menu elements
+ *
+ * States:
+ * - Selected: manages selected state for single/multiple selection modes
+ * - Disabled: respects disabled state of child buttons
+ * - Focus: manages focus states with proper z-index layering
+ * - Hover: provides visual feedback for hover states
+ */
 
-:host([size="xs"]) {
-    --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75); /* .spectrum-ActionGroup--sizeS */
-    --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75);
-}
+/* Custom properties and base styles */
+:host {
+    /* Layout */
+    --spectrum-actiongroup-spacing: var(--spectrum-spacing-100);
 
-:host([dir][compact][vertical]) ::slotted(:nth-child(n)) {
-    margin-right: 0;
-    margin-left: 0;
-}
+    /* Border radius */
+    --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
 
-/**
- * The following styles correct realities outlined in https://github.com/adobe/spectrum-web-components/issues/1434
- */
-
-:host([justified]) ::slotted(:not([role])),
-:host([vertical]) ::slotted(:not([role])) {
+    /* Base layout */
     display: flex;
-    flex-direction: column;
-    align-items: stretch;
+    flex-wrap: wrap;
+    gap: var(--spectrum-actiongroup-spacing);
 }
 
-:host([compact]:not([quiet])) ::slotted(:not([role])) {
-    /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item */
-    --overriden-border-radius: 0;
-    --mod-actionbutton-border-radius: var(--overriden-border-radius);
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --overriden-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0;
+/* Size variants - controlled via SizedMixin */
+:host([size="s"]),
+:host([size="xs"]) {
+    --spectrum-actiongroup-spacing: var(--spectrum-spacing-75);
 }
 
-:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --overriden-border-radius: 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+/* Slotted button styles and focus management */
+::slotted(*) {
+    flex-shrink: 0;
 }
 
-:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --overriden-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+::slotted(*:focus-visible) {
+    z-index: 3;
 }
 
-:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):first-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --overriden-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
+/* Layout variants */
+:host([vertical]) {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--spectrum-actiongroup-spacing);
 }
 
-:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --overriden-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
+/* Compact variants - base */
+:host([compact]),
+:host([compact][vertical]) {
+    gap: 0;
 }
 
-:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):last-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --overriden-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+/* Non-quiet compact styles */
+:host([compact]:not([quiet])) {
+    flex-wrap: nowrap;
 }
 
 :host([compact]:not([quiet])) ::slotted(*) {
-    --mod-actionbutton-focus-ring-border-radius: 0;
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(:first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --mod-actionbutton-focus-ring-border-radius: var(--spectrum-alias-component-border-radius) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0;
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(:last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --mod-actionbutton-focus-ring-border-radius: 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-}
-
-:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --mod-actionbutton-focus-ring-border-radius: var(--spectrum-alias-component-border-radius) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-}
-
-:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --mod-actionbutton-focus-ring-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
-}
-
-:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --mod-actionbutton-focus-ring-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
-}
-
-:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --mod-actionbutton-focus-ring-border-radius: var(--spectrum-alias-component-border-radius) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+    position: relative;
+    border-radius: var(--spectrum-actiongroup-border-radius-reset, 0);
+    z-index: 0;
+}
+
+/* Compact group item positioning */
+:host([compact]:not([quiet])) {
+    /* First item */
+    ::slotted(*:first-child) {
+        --spectrum-actionbutton-focus-indicator-border-radius: var(--spectrum-actiongroup-border-radius) 0 0 var(--spectrum-actiongroup-border-radius);
+
+        border-start-start-radius: var(--spectrum-actiongroup-border-radius);
+        border-end-start-radius: var(--spectrum-actiongroup-border-radius);
+        margin-inline-start: var(--spectrum-actiongroup-button-spacing-reset, 0);
+    }
+
+    /* Middle items */
+    ::slotted(* + *) {
+        --spectrum-actionbutton-focus-indicator-border-radius: 0;
+
+        margin-inline: var(--spectrum-actiongroup-spacing, -1px);
+    }
+
+    /* Last item */
+    ::slotted(*:last-child) {
+        --spectrum-actionbutton-focus-indicator-border-radius: 0 var(--spectrum-actiongroup-border-radius) var(--spectrum-actiongroup-border-radius) 0;
+
+        border-start-end-radius: var(--spectrum-actiongroup-border-radius);
+        border-end-end-radius: var(--spectrum-actiongroup-border-radius);
+        margin-inline-start: var(--spectrum-actiongroup-spacing, -1px);
+        margin-inline-end: var(--spectrum-actiongroup-border-radius-reset, 0);
+    }
+
+    /* Selection and interaction states - z-index layering */
+    ::slotted([selected]) {
+        z-index: 1; /* Selected items above base */
+    }
+
+    ::slotted(*:hover) {
+        z-index: 2; /* Hover above selected */
+    }
+
+    ::slotted(*:focus-visible) {
+        z-index: 3; /* Focus above all */
+    }
+}
+
+/* @todo this reaches too far into a slotted element
+.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label {
+    inline-size: auto;
+} */
+
+/* Vertical compact variant */
+:host([compact][vertical]:not([quiet])) {
+    ::slotted(*) {
+        border-radius: var(--spectrum-actiongroup-border-radius-reset, 0);
+    }
+
+    /* First item */
+    ::slotted(*:first-child) {
+        --spectrum-actionbutton-focus-indicator-border-radius: var(--spectrum-actiongroup-border-radius) var(--spectrum-actiongroup-border-radius) 0 0;
+
+        border-start-start-radius: var(--spectrum-actiongroup-border-radius);
+        border-start-end-radius: var(--spectrum-actiongroup-border-radius);
+        margin-inline-end: var(--spectrum-actiongroup-button-spacing-reset, 0);
+        margin-block: var(--spectrum-actiongroup-spacing, -1px);
+    }
+
+    /* Middle items */
+    ::slotted(* + *) {
+        margin-inline: var(--spectrum-actiongroup-button-spacing-reset, 0);
+        margin-block-start: var(--spectrum-actiongroup-button-spacing-reset, 0);
+        margin-block-end: var(--spectrum-actiongroup-spacing, -1px);
+    }
+
+    /* Last item */
+    ::slotted(*:last-child) {
+        --spectrum-actionbutton-focus-indicator-border-radius: 0 0 var(--spectrum-actiongroup-border-radius) var(--spectrum-actiongroup-border-radius);
+
+        border-end-start-radius: var(--spectrum-actiongroup-border-radius);
+        border-end-end-radius: var(--spectrum-actiongroup-border-radius);
+        margin-block-start: var(--spectrum-actiongroup-spacing, -1px);
+        margin-block-end: var(--spectrum-actiongroup-button-spacing-reset, 0);
+    }
+}
+
+/* Justified variant - full width items */
+:host([justified]) ::slotted(*) {
+    flex-grow: 1;
 }
 
-/** flex-grow: 1; isn't enough to fully justify the action group */
-:host([justified]) ::slotted(*) {
-    flex: 1 1 0%;
+/* Hover state for devices that support hover */
+@media (hover: hover) {
+    :host([compact]:not([quiet])) ::slotted(*:hover) {
+        z-index: 2;
+    }
 }
diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css
deleted file mode 100644
index 6ec0c3c7241..00000000000
--- a/packages/action-group/src/spectrum-action-group.css
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-actiongroup-button-spacing-reset: 0;
-    --spectrum-actiongroup-border-radius-reset: 0;
-    --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
-}
-
-:host([size="s"]),
-:host([size="xs"]) {
-    --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75);
-    --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75);
-}
-
-:host([size="l"]),
-:host,
-:host([size="xl"]) {
-    --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100);
-    --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100);
-}
-
-:host {
-    gap: var(--mod-actiongroup-horizontal-spacing-regular, var(--spectrum-actiongroup-horizontal-spacing-regular));
-    flex-wrap: wrap;
-    display: flex;
-}
-
-::slotted(*) {
-    flex-shrink: 0;
-}
-
-::slotted(:focus-visible) {
-    z-index: 3;
-}
-
-:host(:not([vertical="true"][compact="true"])) ::slotted(*) {
-    flex-shrink: 0;
-}
-
-:host([vertical]) {
-    gap: var(--mod-actiongroup-vertical-spacing-regular, var(--spectrum-actiongroup-vertical-spacing-regular));
-    flex-direction: column;
-    display: inline-flex;
-}
-
-:host([compact]) {
-    gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact));
-}
-
-:host([compact]:not([quiet])) {
-    flex-wrap: nowrap;
-}
-
-:host([compact]:not([quiet])) ::slotted(*) {
-    border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
-    z-index: 0;
-    position: relative;
-}
-
-:host([compact]:not([quiet])) ::slotted(:first-child) {
-    --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));
-    border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-    margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-}
-
-:host([compact]:not([quiet])) ::slotted(:not(:first-child)) {
-    --mod-actionbutton-focus-indicator-border-radius: 0px;
-    margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
-    margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
-}
-
-:host([compact]:not([quiet])) ::slotted(:last-child) {
-    --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));
-    border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-    margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
-    margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
-}
-
-:host([compact]:not([quiet])) ::slotted([selected]) {
-    z-index: 1;
-}
-
-@media (hover: hover) {
-    :host([compact]:not([quiet])) ::slotted(:hover) {
-        z-index: 2;
-    }
-}
-
-:host([compact]:not([quiet])) ::slotted(:focus-visible) {
-    z-index: 3;
-}
-
-:host([compact][vertical]:not([quiet])) {
-    gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact));
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(*) {
-    border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(:first-child) {
-    --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));
-    border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-    margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
-    margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
-    margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)) {
-    margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-    margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
-    margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-    margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(:last-child) {
-    --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-end-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));
-    margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
-    margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-}
-
-:host([justified]) ::slotted(*) {
-    flex-grow: 1;
-}
diff --git a/packages/action-group/stories/action-group-sizes.stories.ts b/packages/action-group/stories/action-group-sizes.stories.ts
index 3b37cf749db..c7e294755db 100644
--- a/packages/action-group/stories/action-group-sizes.stories.ts
+++ b/packages/action-group/stories/action-group-sizes.stories.ts
@@ -18,8 +18,8 @@ import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/overlay/overlay-trigger.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-circle.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-list.js';
 
 export default {
     title: 'Action Group/Sizes',
diff --git a/packages/action-group/stories/action-group-tooltip.stories.ts b/packages/action-group/stories/action-group-tooltip.stories.ts
index c6c7686e44e..235a343096c 100644
--- a/packages/action-group/stories/action-group-tooltip.stories.ts
+++ b/packages/action-group/stories/action-group-tooltip.stories.ts
@@ -24,8 +24,8 @@ import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/overlay/overlay-trigger.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-circle.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-list.js';
 import { ActionGroup } from '@spectrum-web-components/action-group/src/ActionGroup.js';
 
 export default {
diff --git a/packages/action-group/stories/action-group.stories.ts b/packages/action-group/stories/action-group.stories.ts
index 2148b0250b2..5162df5d8ab 100644
--- a/packages/action-group/stories/action-group.stories.ts
+++ b/packages/action-group/stories/action-group.stories.ts
@@ -18,8 +18,8 @@ import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/overlay/overlay-trigger.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-circle.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-list.js';
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
@@ -130,10 +130,10 @@ function renderIconButtons(args: Properties): TemplateResult {
                 <sp-icon-properties slot="icon"></sp-icon-properties>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon-info slot="icon"></sp-icon-info>
+                <sp-icon-info-circle slot="icon"></sp-icon-info-circle>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon-view-all-tags slot="icon"></sp-icon-view-all-tags>
+                <sp-icon-view-list slot="icon"></sp-icon-view-list>
             </sp-action-button>
         </sp-action-group>
     `;
diff --git a/packages/action-menu/src/action-menu.css b/packages/action-menu/src/action-menu.css
index b7dd55a19dc..b0011be43ca 100644
--- a/packages/action-menu/src/action-menu.css
+++ b/packages/action-menu/src/action-menu.css
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+/* Base variables */
 :host {
     display: inline-flex;
 }
 
 :host([quiet]) {
-    min-width: 0;
+    min-inline-size: 0;
 }
 
 :host > sp-menu {
@@ -35,24 +36,24 @@
 }
 
 #popover {
-    max-width: none;
+    max-inline-size: none;
 }
 
 :host([dir="ltr"]) ::slotted([slot="icon"]),
 :host([dir="ltr"]) .icon {
     /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon */
-    margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
+    margin-inline-start: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
 }
 
 :host([dir="rtl"]) ::slotted([slot="icon"]),
 :host([dir="rtl"]) .icon {
     /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon */
-    margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
+    margin-inline-end: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
 }
 
 :host([dir]) slot[icon-only]::slotted([slot="icon"]),
 :host([dir]) slot[icon-only] .icon {
-    margin-inline: calc((var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1); /* .spectrum-ActionButton-hold+.spectrum-ActionButton-icon,
+    margin-inline: calc((var(--spectrum-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--spectrum-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1); /* .spectrum-ActionButton-hold+.spectrum-ActionButton-icon,
    * .spectrum-ActionButton-icon:only-child */
 }
 
diff --git a/packages/alert-banner/package.json b/packages/alert-banner/package.json
index d4bb923765d..734b7c86c74 100644
--- a/packages/alert-banner/package.json
+++ b/packages/alert-banner/package.json
@@ -29,7 +29,6 @@
             "development": "./src/AlertBanner.dev.js",
             "default": "./src/AlertBanner.js"
         },
-        "./src/alert-banner-overrides.css.js": "./src/alert-banner-overrides.css.js",
         "./src/alert-banner.css.js": "./src/alert-banner.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/alert-banner/src/AlertBanner.ts b/packages/alert-banner/src/AlertBanner.ts
index a1006dd53fa..12134b636ee 100644
--- a/packages/alert-banner/src/AlertBanner.ts
+++ b/packages/alert-banner/src/AlertBanner.ts
@@ -18,8 +18,8 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/button/sp-close-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-circle.js';
 import styles from './alert-banner.css.js';
 
 const VALID_VARIANTS = ['neutral', 'info', 'negative'];
@@ -102,14 +102,17 @@ export class AlertBanner extends SpectrumElement {
         switch (variant) {
             case 'info':
                 return html`
-                    <sp-icon-info
+                    <sp-icon-info-circle
                         label="Information"
                         class="type"
-                    ></sp-icon-info>
+                    ></sp-icon-info-circle>
                 `;
             case 'negative':
                 return html`
-                    <sp-icon-alert label="Error" class="type"></sp-icon-alert>
+                    <sp-icon-alert-triangle
+                        label="Error"
+                        class="type"
+                    ></sp-icon-alert-triangle>
                 `;
             default:
                 return html``;
diff --git a/packages/alert-banner/src/alert-banner-overrides.css b/packages/alert-banner/src/alert-banner-overrides.css
deleted file mode 100644
index d792f2dc3ce..00000000000
--- a/packages/alert-banner/src/alert-banner-overrides.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-alert-banner-neutral-background: var(--system-alert-banner-neutral-background);
-}
diff --git a/packages/alert-banner/src/alert-banner.css b/packages/alert-banner/src/alert-banner.css
index ae2ae006ccf..c5d9fe5e6b6 100644
--- a/packages/alert-banner/src/alert-banner.css
+++ b/packages/alert-banner/src/alert-banner.css
@@ -10,5 +10,121 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-alert-banner.css");
-@import url("./alert-banner-overrides.css");
+/* Base variables */
+:host {
+    --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
+
+    --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
+    --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
+    --spectrum-alert-banner-inline-size: auto;
+
+    --spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
+    --spectrum-alert-banner-line-height: var(--spectrum-line-height-100);
+    --spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
+
+    /* spacing */
+    --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
+    --spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300);
+    --spectrum-alert-banner-inline-end-to-content: var(--spectrum-spacing-300);
+    --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
+    --spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200);
+    --spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
+    --spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
+
+    /* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the
+	padding-block of its parent AlertBanner-body element. */
+    --spectrum-alert-banner-text-margin-block-start: max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
+    --spectrum-alert-banner-text-margin-block-end: max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
+
+    /* colors */
+    --spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default));
+    --spectrum-alert-banner-font-color: var(--spectrum-white);
+
+    /* @passthrough -- settings for nested Close button */
+    --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-to-content, var(--spectrum-alert-banner-close-button-to-content)) var(--mod-alert-banner-close-button-to-inline-end, var(--spectrum-alert-banner-close-button-to-inline-end));
+    --mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button));
+    --mod-closebutton-align-self: flex-start;
+
+    &:lang(ja),
+    &:lang(zh),
+    &:lang(ko) {
+        --spectrum-alert-banner-line-height: var(--spectrum-cjk-line-height-100);
+    }
+}
+
+:host([variant="info"]) {
+    --spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default));
+}
+
+:host([variant="negative"]) {
+    --spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default));
+}
+
+:host {
+    display: none;
+    justify-content: space-between;
+    inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size));
+    max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
+    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));
+    font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family));
+    line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height));
+    color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
+    background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
+    border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
+}
+
+:host([open]) {
+    display: flex;
+}
+
+.body {
+    inline-size: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+
+    /* Inline spacing between text and button, only when the button has not wrapped to the next line. */
+    column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
+
+    /* Block spacing between text and button, when the button has wrapped to the next line. Takes into
+	account the existing margins on the text. */
+    row-gap: max(var(--mod-alert-banner-text-to-button-vertical, 0px), var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end));
+
+    padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button));
+    margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content));
+    margin-inline-end: var(--mod-alert-banner-inline-end-to-content, var(--spectrum-alert-banner-inline-end-to-content));
+
+    /* When dismissible, this spacing is handled by the margin-inline-start on the close button instead. */
+    :host(:has(sp-close-button)) & {
+        margin-inline-end: 0;
+    }
+}
+
+.content {
+    display: flex;
+    flex-grow: 1;
+}
+
+.type {
+    /* @passthrough -- icon-size */
+    --mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
+
+    margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
+    margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
+    flex-shrink: 0;
+}
+
+.text {
+    margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start));
+    margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end));
+}
+
+@media (forced-colors: active) {
+    :host {
+        --highcontrast-alert-banner-border-color: CanvasText;
+        --highcontrast-alert-banner-border-width: var(--spectrum-border-width-100);
+    }
+}
diff --git a/packages/alert-banner/src/spectrum-alert-banner.css b/packages/alert-banner/src/spectrum-alert-banner.css
deleted file mode 100644
index 10afd6d4f4d..00000000000
--- a/packages/alert-banner/src/spectrum-alert-banner.css
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
-    --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
-    --spectrum-alert-banner-size: auto;
-    --spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
-    --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
-    --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
-    --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
-    --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300);
-    --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
-    --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
-    --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
-    --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
-    --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
-    --spectrum-alert-banner-font-color: var(--spectrum-white);
-    --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider));
-    --mod-divider-vertical-height: auto;
-    --mod-divider-vertical-align: stretch;
-    --mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button));
-    --mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider));
-    --mod-button-margin-left: auto;
-    --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;
-    inline-size: auto;
-    inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
-    max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
-    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-neutral-background, var(--spectrum-alert-banner-neutral-background));
-    border: 0 solid #0000;
-    border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
-    justify-content: space-between;
-    display: none;
-}
-
-:host([open]) {
-    display: flex;
-}
-
-:host([variant="info"]) {
-    background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
-}
-
-:host([variant="negative"]) {
-    background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
-}
-
-.body {
-    inline-size: 100%;
-    gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px);
-    flex-wrap: wrap;
-    align-items: center;
-    margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge));
-    display: flex;
-}
-
-.content {
-    display: flex;
-}
-
-.end {
-    align-items: center;
-    display: flex;
-}
-
-.type {
-    inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
-    block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
-    flex-shrink: 0;
-    margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon));
-    margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
-}
-
-.text {
-    margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text));
-    margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text));
-    margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-alert-banner-border-color: CanvasText;
-        --highcontrast-alert-banner-border-width: var(--spectrum-border-width-100);
-    }
-}
diff --git a/packages/alert-banner/test/alert-banner.test.ts b/packages/alert-banner/test/alert-banner.test.ts
index 10ea20e465a..ce93057507d 100644
--- a/packages/alert-banner/test/alert-banner.test.ts
+++ b/packages/alert-banner/test/alert-banner.test.ts
@@ -47,13 +47,13 @@ describe('AlertBanner', () => {
         await elementUpdated(el);
 
         expect(el.getAttribute('variant')).to.equal('info');
-        expect(el.shadowRoot.querySelector('sp-icon-info')).to.exist;
+        expect(el.shadowRoot.querySelector('sp-icon-info-circle')).to.exist;
 
         el.variant = 'negative';
         await elementUpdated(el);
 
         expect(el.getAttribute('variant')).to.equal('negative');
-        expect(el.shadowRoot.querySelector('sp-icon-alert')).to.exist;
+        expect(el.shadowRoot.querySelector('sp-icon-alert-triangle')).to.exist;
     });
     it('removes variant attribute when given invalid variant', async () => {
         const el = await fixture<AlertBanner>(html`
diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json
index c735108f588..a8fdb04bf49 100644
--- a/packages/alert-dialog/package.json
+++ b/packages/alert-dialog/package.json
@@ -29,7 +29,6 @@
             "development": "./src/AlertDialog.dev.js",
             "default": "./src/AlertDialog.js"
         },
-        "./src/alert-dialog-overrides.css.js": "./src/alert-dialog-overrides.css.js",
         "./src/alert-dialog.css.js": "./src/alert-dialog.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/alert-dialog/src/AlertDialog.ts b/packages/alert-dialog/src/AlertDialog.ts
index 121d9125509..f6f09d88091 100644
--- a/packages/alert-dialog/src/AlertDialog.ts
+++ b/packages/alert-dialog/src/AlertDialog.ts
@@ -102,7 +102,9 @@ export class AlertDialog extends FocusVisiblePolyfillMixin(SpectrumElement) {
             case 'warning':
             case 'error':
                 return html`
-                    <sp-icon-alert class="icon"></sp-icon-alert>
+                    <sp-icon-alert-triangle
+                        class="icon"
+                    ></sp-icon-alert-triangle>
                 `;
 
             default:
diff --git a/packages/alert-dialog/src/alert-dialog-overrides.css b/packages/alert-dialog/src/alert-dialog-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/alert-dialog/src/alert-dialog-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/alert-dialog/src/alert-dialog.css b/packages/alert-dialog/src/alert-dialog.css
index 17d70846876..c79779d64e2 100644
--- a/packages/alert-dialog/src/alert-dialog.css
+++ b/packages/alert-dialog/src/alert-dialog.css
@@ -10,5 +10,143 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-alert-dialog.css");
-@import url("./alert-dialog-overrides.css");
+/* Base variables */
+:host {
+    --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
+    --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width);
+    --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100);
+    --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color);
+    --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);
+    --spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+    --spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style);
+    --spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size);
+    --spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height);
+    --spectrum-alert-dialog-title-color: var(--spectrum-heading-color);
+    --spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
+    --spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style);
+    --spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size);
+    --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100);
+    --spectrum-alert-dialog-body-color: var(--spectrum-body-color);
+    --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200);
+    --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300);
+    --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300);
+    --mod-buttongroup-justify-content: flex-end;
+    box-sizing: border-box;
+    inline-size: fit-content;
+    min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width));
+    max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width));
+    max-block-size: inherit;
+    padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding));
+    outline: none;
+    display: flex;
+}
+
+.icon {
+    inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
+    block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
+    flex-shrink: 0;
+    margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon));
+}
+
+:host([variant="warning"]) {
+    --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
+}
+
+:host([variant="error"]) {
+}
+
+.grid {
+    display: grid;
+}
+
+.header {
+    justify-content: space-between;
+    align-items: baseline;
+    display: flex;
+}
+
+::slotted([slot="heading"]) {
+    font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family));
+    font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight));
+    font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style));
+    font-size: var(--mod-alert-dialog-title-font-size, var(--spectrum-alert-dialog-title-font-size));
+    line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height));
+    color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color));
+    margin: 0;
+    margin-block-end: var(--mod-alert-dialog-title-to-divider, var(--spectrum-alert-dialog-title-to-divider));
+}
+
+.content {
+    -webkit-overflow-scrolling: touch;
+    margin-block-start: var(--mod-alert-dialog-divider-to-description, var(--spectrum-alert-dialog-divider-to-description));
+    margin-block-end: var(--mod-alert-dialog-description-to-buttons, var(--spectrum-alert-dialog-description-to-buttons));
+    overflow-y: auto;
+
+    font-family: var(--mod-alert-dialog-content-font-family, var(--spectrum-alert-dialog-content-font-family));
+    font-weight: var(--mod-alert-dialog-content-font-weight, var(--spectrum-alert-dialog-content-font-weight));
+    font-style: var(--mod-alert-dialog-content-font-style, var(--spectrum-alert-dialog-content-font-style));
+    font-size: var(--mod-alert-dialog-content-font-size, var(--spectrum-alert-dialog-content-font-size));
+    line-height: var(--mod-alert-dialog-content-line-height, var(--spectrum-alert-dialog-content-line-height));
+    color: var(--mod-alert-dialog-content-color, var(--spectrum-alert-dialog-content-color));
+    margin: 0;
+}
+
+/* base variables */
+:host {
+    /* layout */
+    --spectrum-alert-dialog-min-height: var(--spectrum-dialog-minimum-height);
+    --spectrum-alert-dialog-max-height: var(--spectrum-dialog-maximum-height);
+
+    /* spacing */
+    --spectrum-alert-dialog-padding: var(--spectrum-spacing-300);
+    --spectrum-alert-dialog-gap: var(--spectrum-spacing-300);
+    --spectrum-alert-dialog-button-gap: var(--spectrum-spacing-100);
+    --spectrum-alert-dialog-spacing-edge-to-text: var(--spectrum-spacing-300);
+    --spectrum-alert-dialog-spacing-top-to-text: var(--spectrum-spacing-300);
+    --spectrum-alert-dialog-spacing-bottom-to-text: var(--spectrum-spacing-300);
+    --spectrum-alert-dialog-spacing-text-to-buttons: var(--spectrum-spacing-300);
+
+    /* typography */
+    --spectrum-alert-dialog-content-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-alert-dialog-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+    --spectrum-alert-dialog-content-font-style: var(--spectrum-body-sans-serif-font-style);
+    --spectrum-alert-dialog-content-font-size: var(--spectrum-font-size-100);
+    --spectrum-alert-dialog-content-line-height: var(--spectrum-body-line-height);
+
+    /* colors */
+    --spectrum-alert-dialog-background-color: var(--spectrum-background-layer-1);
+    --spectrum-alert-dialog-border-color: var(--spectrum-gray-400);
+    --spectrum-alert-dialog-content-color: var(--spectrum-body-color);
+}
+
+/* base styles */
+:host {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width));
+    max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width));
+    min-block-size: var(--mod-alert-dialog-min-height, var(--spectrum-alert-dialog-min-height));
+    max-block-size: var(--mod-alert-dialog-max-height, var(--spectrum-alert-dialog-max-height));
+    padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding));
+    gap: var(--mod-alert-dialog-gap, var(--spectrum-alert-dialog-gap));
+    background-color: var(--mod-alert-dialog-background-color, var(--spectrum-alert-dialog-background-color));
+    border: 1px solid var(--mod-alert-dialog-border-color, var(--spectrum-alert-dialog-border-color));
+}
+
+.title {
+    font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family));
+    font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight));
+    font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style));
+    font-size: var(--mod-alert-dialog-title-font-size, var(--spectrum-alert-dialog-title-font-size));
+    line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height));
+    color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color));
+    margin: 0;
+}
+
+.buttons {
+    display: flex;
+    gap: var(--mod-alert-dialog-button-gap, var(--spectrum-alert-dialog-button-gap));
+    margin-block-start: var(--mod-alert-dialog-spacing-text-to-buttons, var(--spectrum-alert-dialog-spacing-text-to-buttons));
+}
diff --git a/packages/alert-dialog/src/spectrum-alert-dialog.css b/packages/alert-dialog/src/spectrum-alert-dialog.css
deleted file mode 100644
index 928211162f6..00000000000
--- a/packages/alert-dialog/src/spectrum-alert-dialog.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
-    --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width);
-    --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color);
-    --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);
-    --spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-    --spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style);
-    --spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size);
-    --spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height);
-    --spectrum-alert-dialog-title-color: var(--spectrum-heading-color);
-    --spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
-    --spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style);
-    --spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size);
-    --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100);
-    --spectrum-alert-dialog-body-color: var(--spectrum-body-color);
-    --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200);
-    --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300);
-    --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300);
-    --mod-buttongroup-justify-content: flex-end;
-    box-sizing: border-box;
-    inline-size: fit-content;
-    min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width));
-    max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width));
-    max-block-size: inherit;
-    padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding));
-    outline: none;
-    display: flex;
-}
-
-.icon {
-    inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
-    block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
-    flex-shrink: 0;
-    margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon));
-}
-
-:host([variant="warning"]) {
-    --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
-}
-
-:host([variant="error"]) {
-    --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color));
-}
-
-.grid {
-    display: grid;
-}
-
-.header {
-    justify-content: space-between;
-    align-items: baseline;
-    display: flex;
-}
-
-::slotted([slot="heading"]) {
-    font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family));
-    font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight));
-    font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style));
-    font-size: var(--mod-alert-dialog-title-font-size, var(--spectrum-alert-dialog-title-font-size));
-    line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height));
-    color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color));
-    margin: 0;
-    margin-block-end: var(--mod-alert-dialog-title-to-divider, var(--spectrum-alert-dialog-title-to-divider));
-}
-
-.content {
-    font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family));
-    font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight));
-    font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style));
-    font-size: var(--mod-alert-dialog-body-font-size, var(--spectrum-alert-dialog-body-font-size));
-    line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height));
-    color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color));
-    -webkit-overflow-scrolling: touch;
-    margin: 0;
-    margin-block-start: var(--mod-alert-dialog-divider-to-description, var(--spectrum-alert-dialog-divider-to-description));
-    margin-block-end: var(--mod-alert-dialog-description-to-buttons, var(--spectrum-alert-dialog-description-to-buttons));
-    overflow-y: auto;
-}
-
-@media (forced-colors: active) {
-    :host {
-        border: solid;
-    }
-}
diff --git a/packages/alert-dialog/test/alert-dialog.test.ts b/packages/alert-dialog/test/alert-dialog.test.ts
index 39f03e9898d..039fbd0b7fd 100644
--- a/packages/alert-dialog/test/alert-dialog.test.ts
+++ b/packages/alert-dialog/test/alert-dialog.test.ts
@@ -13,7 +13,7 @@ import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/themes.js';
 import { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';
 import { html } from '@spectrum-web-components/base';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 import '@spectrum-web-components/alert-dialog/sp-alert-dialog.js';
 import {
     AlertDialog,
@@ -35,7 +35,7 @@ describe('AlertDialog', () => {
     it('warning variant renders with an alert icon', async () => {
         const el = await fixture<AlertDialog>(warning());
         await elementUpdated(el);
-        const alertIcon = el.shadowRoot.querySelector('sp-icon-alert');
+        const alertIcon = el.shadowRoot.querySelector('sp-icon-alert-triangle');
         expect(alertIcon).to.be.not.null;
     });
     it('secondary variant renders with `confirm`, `cancel` and `secondary` buttons', async () => {
diff --git a/packages/asset/package.json b/packages/asset/package.json
index 6420f3500f0..967231ccf17 100644
--- a/packages/asset/package.json
+++ b/packages/asset/package.json
@@ -29,7 +29,6 @@
             "development": "./src/Asset.dev.js",
             "default": "./src/Asset.js"
         },
-        "./src/asset-overrides.css.js": "./src/asset-overrides.css.js",
         "./src/asset.css.js": "./src/asset.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/asset/src/asset-overrides.css b/packages/asset/src/asset-overrides.css
deleted file mode 100644
index d00b4c752b9..00000000000
--- a/packages/asset/src/asset-overrides.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-asset-folder-background-color: var(--system-asset-folder-background-color);
-    --spectrum-asset-file-background-color: var(--system-asset-file-background-color);
-    --spectrum-asset-icon-outline-color: var(--system-asset-icon-outline-color);
-}
diff --git a/packages/asset/src/asset.css b/packages/asset/src/asset.css
index afde9fb2607..50737afc931 100644
--- a/packages/asset/src/asset.css
+++ b/packages/asset/src/asset.css
@@ -10,5 +10,52 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-asset.css");
-@import url("./asset-overrides.css");
+/* Base variables */
+:host {
+    --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--spectrum-asset-folder-background-color, var(--spectrum-gray-200)));
+    --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--spectrum-asset-file-background-color, var(--spectrum-gray-25)));
+    --spectrum-asset-folder-outline: var(--spectrum-asset-icon-outline-color, var(--spectrum-gray-500));
+    --spectrum-asset-file-outline: var(--spectrum-asset-icon-outline-color, var(--spectrum-gray-500));
+
+    /* layout */
+    --spectrum-asset-icon-min-width: 48px;
+    --spectrum-asset-icon-max-width: 80px;
+    --spectrum-asset-icon-margin: 20px;
+
+    /* base styles */
+    inline-size: 100%;
+    block-size: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+::slotted(*) {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    object-fit: contain;
+    transition: opacity var(--spectrum-animation-duration-100);
+}
+
+.file,
+.folder {
+    inline-size: max(var(--spectrum-asset-icon-min-width, 48px), min(100%, var(--spectrum-asset-icon-max-width, 80px)));
+    block-size: 100%;
+    margin: var(--spectrum-asset-icon-margin, 20px);
+}
+
+.folderBackground {
+    fill: var(--spectrum-asset-folder-background);
+}
+
+.fileBackground {
+    fill: var(--spectrum-asset-file-background);
+}
+
+.folderOutline {
+    fill: var(--spectrum-asset-folder-outline);
+}
+
+.fileOutline {
+    fill: var(--spectrum-asset-file-outline);
+}
diff --git a/packages/asset/src/spectrum-asset.css b/packages/asset/src/spectrum-asset.css
deleted file mode 100644
index 45368e20e0f..00000000000
--- a/packages/asset/src/spectrum-asset.css
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --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));
-    inline-size: 100%;
-    block-size: 100%;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-::slotted(*) {
-    max-inline-size: 100%;
-    max-block-size: 100%;
-    object-fit: contain;
-    transition: opacity var(--spectrum-animation-duration-100);
-}
-
-.file,
-.folder {
-    inline-size: max(48px, min(100%, 80px));
-    inline-size: max(var(--mod-asset-icon-min-width, 48px), min(100%, var(--mod-asset-icon-max-width, 80px)));
-    block-size: 100%;
-    margin: 20px;
-    margin: var(--mod-asset-icon-margin, 20px);
-}
-
-.folderBackground {
-    fill: var(--spectrum-asset-folder-background);
-}
-
-.fileBackground {
-    fill: var(--spectrum-asset-file-background);
-}
-
-.folderOutline {
-    fill: var(--spectrum-asset-folder-outline);
-}
-
-.fileOutline {
-    fill: var(--spectrum-asset-file-outline);
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-asset-icon-background-color: currentColor;
-    }
-}
diff --git a/packages/avatar/package.json b/packages/avatar/package.json
index 7466812b400..7df3df7aa51 100644
--- a/packages/avatar/package.json
+++ b/packages/avatar/package.json
@@ -29,7 +29,6 @@
             "development": "./src/Avatar.dev.js",
             "default": "./src/Avatar.js"
         },
-        "./src/avatar-overrides.css.js": "./src/avatar-overrides.css.js",
         "./src/avatar.css.js": "./src/avatar.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/avatar/src/avatar-overrides.css b/packages/avatar/src/avatar-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/avatar/src/avatar-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/avatar/src/avatar.css b/packages/avatar/src/avatar.css
index c147dfbe05a..1abf6aeeb80 100644
--- a/packages/avatar/src/avatar.css
+++ b/packages/avatar/src/avatar.css
@@ -10,8 +10,96 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-avatar.css");
-@import url("./avatar-overrides.css");
+/* Base variables */
+:host {
+    /* layout */
+    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
+    --spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
+    --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
+
+    /* focus Indicator */
+    --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+    /* states */
+    --spectrum-avatar-color-opacity: 1;
+    --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled);
+}
+
+/* size variants */
+:host([size="50"]) {
+}
+
+:host([size="75"]) {
+}
+
+:host([size="100"]) {
+}
+
+:host([size="200"]) {
+}
+
+:host([size="300"]) {
+}
+
+:host([size="400"]) {
+}
+
+:host([size="500"]) {
+}
+
+:host([size="600"]) {
+}
+
+:host([size="700"]) {
+}
+
+/* base styles */
+:host {
+    inline-size: var(--spectrum-avatar-inline-size);
+    block-size: var(--spectrum-avatar-block-size);
+    border-radius: var(--spectrum-avatar-border-radius);
+    -webkit-user-drag: none;
+    user-select: none;
+    opacity: var(--spectrum-avatar-color-opacity);
+    border-width: 0;
+    outline: none;
+    display: inline-block;
+    position: relative;
+    overflow: visible;
+}
+
+/* states */
+:host([disabled]) {
+    opacity: var(--spectrum-avatar-color-opacity-disabled);
+}
+
+/* focus styles */
+:host(:not([disabled])) .is-focused:after,
+:host(:not([disabled])) .link:focus-visible:after {
+    pointer-events: none;
+    content: "";
+    inline-size: calc(var(--spectrum-avatar-inline-size) + var(--spectrum-avatar-focus-indicator-gap) * 2);
+    block-size: calc(var(--spectrum-avatar-inline-size) + var(--spectrum-avatar-focus-indicator-gap) * 2);
+    border-style: solid;
+    border-width: var(--spectrum-avatar-focus-indicator-thickness);
+    border-color: var(--highcontrast-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color));
+    border-radius: var(--spectrum-avatar-border-radius);
+    position: absolute;
+    inset-block-start: calc((var(--spectrum-avatar-focus-indicator-gap) + var(--spectrum-avatar-focus-indicator-thickness)) * -1);
+    inset-inline-start: calc((var(--spectrum-avatar-focus-indicator-gap) + var(--spectrum-avatar-focus-indicator-thickness)) * -1);
+}
+
+.link {
+    outline: 0;
+}
+
+.image {
+    inline-size: var(--spectrum-avatar-inline-size);
+    block-size: var(--spectrum-avatar-block-size);
+    border-radius: var(--spectrum-avatar-border-radius);
+}
 
 img {
     vertical-align: top;
diff --git a/packages/avatar/src/spectrum-avatar.css b/packages/avatar/src/spectrum-avatar.css
deleted file mode 100644
index 9fadad17686..00000000000
--- a/packages/avatar/src/spectrum-avatar.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-avatar-color-opacity: 1;
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
-    --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
-    --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled);
-}
-
-:host([size="50"]) {
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-50);
-}
-
-:host([size="75"]) {
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-75);
-}
-
-:host([size="100"]) {
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
-}
-
-:host([size="200"]) {
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-200);
-}
-
-:host([size="300"]) {
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-300);
-}
-
-:host([size="400"]) {
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-400);
-}
-
-:host([size="500"]) {
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-500);
-}
-
-:host([size="600"]) {
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-600);
-}
-
-:host([size="700"]) {
-    --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700);
-    --spectrum-avatar-block-size: var(--spectrum-avatar-size-700);
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-avatar-focus-indicator-color: CanvasText;
-    }
-}
-
-:host {
-    inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
-    block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size));
-    border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
-    -webkit-user-drag: none;
-    -webkit-user-select: none;
-    user-select: none;
-    opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
-    border-width: 0;
-    outline: none;
-    display: inline-block;
-    position: relative;
-    overflow: visible;
-}
-
-:host([disabled]) {
-    opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled));
-}
-
-:host(:not([disabled])) .is-focused:after,
-:host(:not([disabled])) .link:focus-visible:after {
-    pointer-events: none;
-    content: "";
-    inline-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2);
-    block-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2);
-    border-style: solid;
-    border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness));
-    border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color)));
-    border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
-    position: absolute;
-    inset-block-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1);
-    inset-inline-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1);
-}
-
-.link {
-    outline: 0;
-}
-
-.image {
-    inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
-    block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size));
-    border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
-}
diff --git a/packages/badge/package.json b/packages/badge/package.json
index 9af4d2aa98d..6d2ddd79fa5 100644
--- a/packages/badge/package.json
+++ b/packages/badge/package.json
@@ -29,7 +29,6 @@
             "development": "./src/Badge.dev.js",
             "default": "./src/Badge.js"
         },
-        "./src/badge-overrides.css.js": "./src/badge-overrides.css.js",
         "./src/badge.css.js": "./src/badge.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/badge/src/badge-overrides.css b/packages/badge/src/badge-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/badge/src/badge-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/badge/src/badge.css b/packages/badge/src/badge.css
index 4cca194486a..91aa48c66eb 100644
--- a/packages/badge/src/badge.css
+++ b/packages/badge/src/badge.css
@@ -10,54 +10,237 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-badge.css");
-
-/* center align icons and text */
+/* Component structure:
+ * sp-badge provides a visual indicator for status, labels, or counts.
+ * Features:
+ * - Size variants: xs, s, m (default), l, xl, xxl
+ * - Semantic variants: neutral (default), accent, informative, negative, positive, notice
+ * - Color variants: gray, red, orange, yellow, chartreuse, celery, green, seafoam, cyan, blue, indigo, purple, fuchsia, magenta
+ * - Fixed position options: inline-start, inline-end, block-start, block-end
+ * - Icon support: start
+ * - CJK language support
+ * - High contrast mode support
+ */
 
+/* Base styles */
 :host {
+    /* Typography */
+    --spectrum-badge-font-size: var(--spectrum-font-size-100);
+    --spectrum-badge-line-height: var(--spectrum-line-height-100);
+    --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+    /* Layout */
+    --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-badge-height: var(--spectrum-component-height-100);
+    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100);
+    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100);
+    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100);
+    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
+    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100);
+    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100);
+    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
+    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100);
+
+    /* Colors */
+    --spectrum-badge-label-icon-color: var(--spectrum-white);
+    --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+    --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default);
+    --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default);
+    --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default);
+    --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default);
+    --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default);
+    --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default);
+    --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default);
+    --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default);
+    --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default);
+    --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default);
+    --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default);
+    --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default);
+    --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default);
+    --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default);
+    --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default);
+    --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default);
+    --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default);
+    --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default);
+    --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default);
+
+    /* Base styles */
+    min-block-size: var(--spectrum-badge-height);
+    inline-size: auto;
+    vertical-align: middle;
+    cursor: default;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+    border-radius: var(--spectrum-badge-corner-radius);
+    color: var(--spectrum-badge-label-icon-color);
+    border: 1px solid transparent;
+    display: inline-flex;
+    position: relative;
     align-items: center;
 }
 
-/* cascade badge's size to its icon */
-
+/* Size variants */
 :host([size="xs"]) {
     --spectrum-icon-size: var(--spectrum-workflow-icon-size-50);
 }
 
-:host([size="s"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-75);
+/* Semantic variants */
+:host,
+:host([variant="neutral"]) {
+    background: var(--spectrum-badge-background-color-default);
+}
+
+:host([variant="accent"]) {
+    background: var(--spectrum-badge-background-color-accent);
 }
 
-:host([size="m"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
+:host([variant="informative"]) {
+    background: var(--spectrum-badge-background-color-informative);
 }
 
-:host([size="l"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-200);
+:host([variant="negative"]) {
+    background: var(--spectrum-badge-background-color-negative);
 }
 
-:host([size="xl"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-300);
+:host([variant="positive"]) {
+    background: var(--spectrum-badge-background-color-positive);
 }
 
-:host([size="xxl"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-400);
+:host([variant="notice"]) {
+    background: var(--spectrum-badge-background-color-notice);
 }
 
-/* don't shrink icons and ensure they're separated from labels */
+/* Color variants */
+:host([variant="gray"]) {
+    background: var(--spectrum-badge-background-color-gray);
+}
 
-::slotted([slot="icon"]) {
-    flex-shrink: 0;
+:host([variant="red"]) {
+    background: var(--spectrum-badge-background-color-red);
+}
+
+:host([variant="orange"]) {
+    background: var(--spectrum-badge-background-color-orange);
+}
+
+:host([variant="yellow"]) {
+    background: var(--spectrum-badge-background-color-yellow);
+}
+
+:host([variant="chartreuse"]) {
+    background: var(--spectrum-badge-background-color-chartreuse);
+}
+
+:host([variant="celery"]) {
+    background: var(--spectrum-badge-background-color-celery);
+}
+
+:host([variant="green"]) {
+    background: var(--spectrum-badge-background-color-green);
+}
+
+:host([variant="seafoam"]) {
+    background: var(--spectrum-badge-background-color-seafoam);
+}
+
+:host([variant="cyan"]) {
+    background: var(--spectrum-badge-background-color-cyan);
+}
+
+:host([variant="blue"]) {
+    background: var(--spectrum-badge-background-color-blue);
+}
+
+:host([variant="indigo"]) {
+    background: var(--spectrum-badge-background-color-indigo);
+}
+
+:host([variant="purple"]) {
+    background: var(--spectrum-badge-background-color-purple);
+}
+
+:host([variant="fuchsia"]) {
+    background: var(--spectrum-badge-background-color-fuchsia);
+}
+
+:host([variant="magenta"]) {
+    background: var(--spectrum-badge-background-color-magenta);
 }
 
-/* limit badge size to two lines */
+/* Fixed position variants */
+:host([fixed="inline-start"]) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+}
+
+:host([fixed="inline-end"]) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+}
+
+:host([fixed="block-start"]) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+}
+
+:host([fixed="block-end"]) {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+}
+
+/* Label styles */
+.label {
+    font-size: var(--spectrum-badge-font-size);
+    line-height: var(--spectrum-badge-line-height);
+    color: var(--spectrum-badge-label-icon-color);
+    padding-block-start: var(--spectrum-badge-label-spacing-vertical-top);
+    padding-block-end: var(--spectrum-badge-label-spacing-vertical-bottom);
+    padding-inline-start: var(--spectrum-badge-label-spacing-horizontal);
+    padding-inline-end: var(--spectrum-badge-label-spacing-horizontal);
+}
+
+/* CJK language support */
+.label:lang(ja),
+.label:lang(ko),
+.label:lang(zh) {
+    line-height: var(--spectrum-badge-line-height-cjk);
+}
 
 .label slot {
     display: block;
-    max-height: calc(var(--spectrum-badge-line-height) * var(--spectrum-badge-font-size) * 2);
+    max-block-size: calc(var(--spectrum-badge-line-height) * var(--spectrum-badge-font-size) * 2);
     overflow: hidden;
 }
 
+/* Icon styles */
+::slotted([slot="icon"]) {
+    block-size: var(--spectrum-badge-workflow-icon-size);
+    inline-size: var(--spectrum-badge-workflow-icon-size);
+    flex: 0 0 var(--spectrum-badge-workflow-icon-size);
+    color: var(--spectrum-badge-label-icon-color);
+    padding-block-start: var(--spectrum-badge-icon-spacing-vertical-top);
+    padding-block-end: var(--spectrum-badge-icon-spacing-vertical-top);
+    padding-inline-start: var(--spectrum-badge-icon-spacing-horizontal);
+    padding-inline-end: var(--spectrum-badge-icon-text-spacing);
+}
+
+[icon-only]::slotted(*) {
+    padding-inline-end: var(--spectrum-badge-icon-only-spacing-horizontal);
+}
+
+[name="icon"] + .label {
+    padding-inline-start: 0;
+}
+
 [icon-only] + .label {
     display: none;
 }
+
+/* High contrast mode */
+@media (forced-colors: active) {
+    :host {
+        --highcontrast-badge-border-color: CanvasText;
+        border-color: var(--highcontrast-badge-border-color);
+        forced-color-adjust: none;
+    }
+}
diff --git a/packages/badge/src/spectrum-badge.css b/packages/badge/src/spectrum-badge.css
deleted file mode 100644
index 04fe7c94329..00000000000
--- a/packages/badge/src/spectrum-badge.css
+++ /dev/null
@@ -1,265 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100);
-    --spectrum-badge-line-height: var(--spectrum-line-height-100);
-    --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --spectrum-badge-label-icon-color: var(--spectrum-white);
-    --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-    --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default);
-    --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default);
-    --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default);
-    --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default);
-    --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default);
-    --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default);
-    --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default);
-    --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default);
-    --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default);
-    --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default);
-    --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default);
-    --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default);
-    --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default);
-    --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default);
-    --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default);
-    --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default);
-    --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default);
-    --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default);
-    --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default);
-    --spectrum-badge-height: var(--spectrum-component-height-100);
-    --spectrum-badge-font-size: var(--spectrum-font-size-100);
-    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100);
-    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100);
-    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100);
-    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100);
-    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100);
-    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
-    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100);
-    --highcontrast-badge-border-color: CanvasText;
-}
-
-:host([variant="celery"]),
-:host([variant="chartreuse"]),
-:host([variant="orange"]),
-:host([variant="yellow"]) {
-    --spectrum-badge-label-icon-color: var(--spectrum-black);
-}
-
-:host([variant="blue"]),
-:host([variant="cyan"]),
-:host([variant="fuchsia"]),
-:host([variant="gray"]),
-:host([variant="green"]),
-:host([variant="indigo"]),
-:host([variant="magenta"]),
-:host([variant="purple"]),
-:host([variant="red"]),
-:host([variant="seafoam"]) {
-    --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
-}
-
-:host([size="s"]) {
-    --spectrum-badge-height: var(--spectrum-component-height-75);
-    --spectrum-badge-font-size: var(--spectrum-font-size-75);
-    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75);
-    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75);
-    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75);
-    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
-    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75);
-    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75);
-    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75);
-    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75);
-}
-
-:host([size="l"]) {
-    --spectrum-badge-height: var(--spectrum-component-height-100);
-    --spectrum-badge-font-size: var(--spectrum-font-size-200);
-    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200);
-    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200);
-    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200);
-    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
-    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200);
-    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200);
-    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200);
-    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200);
-}
-
-:host([size="xl"]) {
-    --spectrum-badge-height: var(--spectrum-component-height-100);
-    --spectrum-badge-font-size: var(--spectrum-font-size-300);
-    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300);
-    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300);
-    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300);
-    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
-    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300);
-    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300);
-    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300);
-    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300);
-}
-
-@media (forced-colors: active) {
-    :host {
-        border-color: var(--highcontrast-badge-border-color);
-    }
-}
-
-:host {
-    min-block-size: var(--mod-badge-height, var(--spectrum-badge-height));
-    inline-size: auto;
-    vertical-align: middle;
-    cursor: default;
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: auto;
-    border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius));
-    color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color));
-    border: 1px solid #0000;
-    display: inline-flex;
-    position: relative;
-}
-
-:host,
-:host([variant="neutral"]) {
-    background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default));
-}
-
-:host([variant="accent"]) {
-    background: var(--mod-badge-background-color-accent, var(--spectrum-badge-background-color-accent));
-}
-
-:host([variant="informative"]) {
-    background: var(--mod-badge-background-color-informative, var(--spectrum-badge-background-color-informative));
-}
-
-:host([variant="negative"]) {
-    background: var(--mod-badge-background-color-negative, var(--spectrum-badge-background-color-negative));
-}
-
-:host([variant="positive"]) {
-    background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive));
-}
-
-:host([variant="notice"]) {
-    background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice));
-}
-
-:host([variant="gray"]) {
-    background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray));
-}
-
-:host([variant="red"]) {
-    background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red));
-}
-
-:host([variant="orange"]) {
-    background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange));
-}
-
-:host([variant="yellow"]) {
-    background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow));
-}
-
-:host([variant="chartreuse"]) {
-    background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse));
-}
-
-:host([variant="celery"]) {
-    background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery));
-}
-
-:host([variant="green"]) {
-    background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green));
-}
-
-:host([variant="seafoam"]) {
-    background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam));
-}
-
-:host([variant="cyan"]) {
-    background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan));
-}
-
-:host([variant="blue"]) {
-    background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue));
-}
-
-:host([variant="indigo"]) {
-    background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo));
-}
-
-:host([variant="purple"]) {
-    background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple));
-}
-
-:host([variant="fuchsia"]) {
-    background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia));
-}
-
-:host([variant="magenta"]) {
-    background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta));
-}
-
-:host([fixed="inline-start"]) {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-}
-
-:host([fixed="inline-end"]) {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-}
-
-:host([fixed="block-start"]) {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-}
-
-:host([fixed="block-end"]) {
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-}
-
-.label {
-    font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size));
-    line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height));
-    color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color));
-    padding-block-start: var(--mod-badge-label-spacing-vertical-top, var(--spectrum-badge-label-spacing-vertical-top));
-    padding-block-end: var(--mod-badge-label-spacing-vertical-bottom, var(--spectrum-badge-label-spacing-vertical-bottom));
-    padding-inline-start: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal));
-    padding-inline-end: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal));
-}
-
-.label:lang(ja),
-.label:lang(ko),
-.label:lang(zh) {
-    line-height: var(--mod-badge-line-height-cjk, var(--spectrum-badge-line-height-cjk));
-}
-
-[name="icon"] + .label {
-    padding-inline-start: 0;
-}
-
-::slotted([slot="icon"]) {
-    block-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size));
-    inline-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size));
-    flex: 0 0 var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size));
-    color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color));
-    padding-block-start: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top));
-    padding-block-end: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top));
-    padding-inline-start: var(--mod-badge-icon-spacing-horizontal, var(--spectrum-badge-icon-spacing-horizontal));
-    padding-inline-end: var(--mod-badge-icon-text-spacing, var(--spectrum-badge-icon-text-spacing));
-}
-
-[icon-only]::slotted(*) {
-    padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal));
-    padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal));
-}
diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json
index c5a98d3154d..15a150f54ef 100644
--- a/packages/breadcrumbs/package.json
+++ b/packages/breadcrumbs/package.json
@@ -34,7 +34,6 @@
             "default": "./src/Breadcrumbs.js"
         },
         "./src/breadcrumb-item.css.js": "./src/breadcrumb-item.css.js",
-        "./src/breadcrumbs-overrides.css.js": "./src/breadcrumbs-overrides.css.js",
         "./src/breadcrumbs.css.js": "./src/breadcrumbs.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/breadcrumbs/src/breadcrumb-item.css b/packages/breadcrumbs/src/breadcrumb-item.css
index fd4b519a58a..fe8a1e6bce6 100644
--- a/packages/breadcrumbs/src/breadcrumb-item.css
+++ b/packages/breadcrumbs/src/breadcrumb-item.css
@@ -10,12 +10,123 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-breadcrumbs-item.css");
+/* Base variables */
+:host {
+    box-sizing: border-box;
+    white-space: nowrap;
+    font-family: var(--spectrum-breadcrumbs-font-family);
+    font-size: var(--spectrum-breadcrumbs-font-size);
+    font-weight: var(--spectrum-breadcrumbs-font-weight);
+    line-height: var(--spectrum-breadcrumbs-line-height);
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+}
 
+/* hidden state */
 :host([hidden]) {
     display: none;
 }
 
+/* disabled state */
 :host([disabled]) {
     pointer-events: none;
 }
+
+/* current item styles */
+:host(:not(.is-menu):last-of-type) {
+    font-family: var(--spectrum-breadcrumbs-font-family-current);
+    font-size: var(--spectrum-breadcrumbs-font-size-current);
+    font-weight: var(--spectrum-breadcrumbs-font-weight-current);
+}
+
+:host(:not(.is-menu):last-of-type) #separator {
+    display: none;
+}
+
+/* separator styles */
+#separator {
+    margin-block: var(--spectrum-breadcrumbs-icon-spacing-block);
+    margin-inline: var(--spectrum-breadcrumbs-separator-spacing-inline);
+    opacity: 1;
+    color: var(--highcontrast-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color));
+    position: relative;
+}
+
+/* rTL support */
+#separator:dir(rtl),
+:host([dir="rtl"]) #separator {
+    transform: scaleX(-1);
+}
+
+/* action menu styles */
+::slotted(sp-action-menu) {
+    margin-inline: var(--spectrum-breadcrumbs-action-button-spacing-inline);
+    margin-block: var(--spectrum-breadcrumbs-action-button-spacing-block);
+    color: var(--highcontrast-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color));
+}
+
+::slotted(sp-action-menu[disabled]) {
+    color: var(--highcontrast-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled));
+}
+
+:host(:first-of-type) > ::slotted(sp-action-menu) {
+    margin-inline-start: var(--spectrum-breadcrumbs-action-button-spacing-inline-start);
+}
+
+/* link styles */
+#item-link {
+    cursor: default;
+    box-sizing: border-box;
+    border-radius: var(--spectrum-breadcrumbs-item-link-border-radius);
+    color: var(--highcontrast-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color));
+    outline: none;
+    margin-block-start: var(--spectrum-breadcrumbs-text-spacing-block-start);
+    margin-block-end: var(--spectrum-breadcrumbs-text-spacing-block-end);
+    text-decoration: none;
+    display: block;
+    position: relative;
+}
+
+/* disabled link styles */
+#item-link.is-disabled,
+:host([aria-disabled="true"]) #item-link {
+    color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled));
+}
+
+/* current link styles */
+:host(:not(.is-menu):last-of-type) #item-link {
+    color: var(--highcontrast-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current));
+}
+
+/* interactive link styles */
+#item-link[href],
+#item-link[tabindex] {
+    cursor: pointer;
+}
+
+/* focus styles */
+#item-link[href]:focus-visible,
+#item-link[tabindex]:focus-visible {
+    text-decoration: underline;
+    text-decoration-thickness: var(--spectrum-breadcrumbs-text-decoration-thickness);
+    text-underline-offset: var(--spectrum-breadcrumbs-text-decoration-gap);
+}
+
+/* focus indicator */
+:host .is-dragged #item-link:before,
+#item-link:focus-visible:before {
+    box-sizing: border-box;
+    inline-size: calc(100% + var(--spectrum-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2 + var(--spectrum-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2);
+    block-size: calc(100% + var(--spectrum-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2 + var(--spectrum-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2);
+    border-width: var(--spectrum-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness));
+    border-radius: var(--spectrum-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius));
+    content: "";
+    pointer-events: none;
+    border-style: solid;
+    border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color));
+    margin-block-start: calc((var(--spectrum-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--spectrum-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1);
+    margin-inline-start: calc((var(--spectrum-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--spectrum-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1);
+    display: block;
+    position: absolute;
+}
diff --git a/packages/breadcrumbs/src/breadcrumbs-item-overrides.css b/packages/breadcrumbs/src/breadcrumbs-item-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/breadcrumbs/src/breadcrumbs-item-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/breadcrumbs/src/breadcrumbs-overrides.css b/packages/breadcrumbs/src/breadcrumbs-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/breadcrumbs/src/breadcrumbs-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/breadcrumbs/src/breadcrumbs.css b/packages/breadcrumbs/src/breadcrumbs.css
index 12b4420d867..1f3a7668a58 100644
--- a/packages/breadcrumbs/src/breadcrumbs.css
+++ b/packages/breadcrumbs/src/breadcrumbs.css
@@ -10,21 +10,136 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-breadcrumbs.css");
-@import url("./breadcrumbs-overrides.css");
-
+/* Base variables */
 :host {
+    /* layout */
+    --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height);
+    --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact);
+    --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline);
+    --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text);
+    --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text);
+
+    /* typography */
+    --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100);
+    --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200);
+    --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight);
+
+    /* current item typography */
+    --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200);
+    --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack);
+    --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight);
+
+    /* compact typography */
+    --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100);
+    --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack);
+    --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight);
+    --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100);
+    --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack);
+    --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight);
+
+    /* multiline typography */
+    --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75);
+    --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack);
+    --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight);
+    --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300);
+    --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack);
+    --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight);
+
+    /* text decoration */
+    --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness);
+    --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap);
+
+    /* spacing */
+    --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100);
+    --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text);
+    --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text);
+    --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon);
+
+    /* compact spacing */
+    --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact);
+    --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact);
+    --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact);
+
+    /* multiline spacing */
+    --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline);
+    --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline);
+    --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text);
+    --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline);
+    --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline);
+
+    /* action button spacing */
+    --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon);
+    --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu);
+    --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);
+    --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu);
+    --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);
+    --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text);
+
+    /* focus indicator */
+    --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100);
+
+    /* colors */
+    --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default);
+    --spectrum-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default);
+    --spectrum-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color);
+    --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default);
+    --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color);
+    --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+    /* base styles */
     display: block;
 }
 
+/* compact mode */
 :host([compact]) {
-    --mod-breadcrumbs-icon-spacing-block: var(--mod-breadcrumbs-icon-spacing-block-compact, var(--spectrum-breadcrumbs-icon-spacing-block-compact));
-    --mod-breadcrumbs-text-spacing-block-start: var(--mod-breadcrumbs-text-spacing-block-start-compact, var(--spectrum-breadcrumbs-text-spacing-block-start-compact));
-    --mod-breadcrumbs-text-spacing-block-end: var(--mod-breadcrumbs-text-spacing-block-end-compact, var(--spectrum-breadcrumbs-text-spacing-block-end-compact));
-    --mod-breadcrumbs-action-button-spacing-block: var(--mod-breadcrumbs-action-button-spacing-block-compact, var(--spectrum-breadcrumbs-action-button-spacing-block-compact));
 }
 
+/* list container */
+#list {
+    block-size: var(--spectrum-breadcrumbs-block-size);
+    flex-flow: row;
+    flex: 1 0;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0;
+    padding-inline-start: var(--spectrum-breadcrumbs-inline-start);
+    padding-inline-end: var(--spectrum-breadcrumbs-inline-end);
+    list-style-type: none;
+    display: flex;
+}
+
+/* compact list */
+:host([compact]) #list {
+    block-size: var(--spectrum-breadcrumbs-block-size-compact);
+}
+
+/* multiline list */
+.spectrum-Breadcrumbs--multiline {
+    block-size: var(--spectrum-breadcrumbs-block-size-multiline);
+    flex-wrap: wrap;
+    align-content: center;
+}
+
+/* compact breadcrumb items */
+:host([compact]) ::slotted(sp-breadcrumb-item) {
+    font-family: var(--spectrum-breadcrumbs-font-family-compact);
+    font-size: var(--spectrum-breadcrumbs-font-size-compact);
+    font-weight: var(--spectrum-breadcrumbs-font-weight-compact);
+}
+
+/* compact last item */
+:host([compact]) ::slotted(:last-of-type) {
+    font-family: var(--spectrum-breadcrumbs-font-family-compact-current);
+    font-size: var(--spectrum-breadcrumbs-font-size-compact-current);
+    font-weight: var(--spectrum-breadcrumbs-font-weight-compact-current);
+}
+
+/* icon spacing */
 :host([dir]) slot[slot="icon"]::slotted([slot="icon"]),
 :host([dir]) slot[slot="icon"] .icon {
-    margin-inline: calc((var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1);
+    margin-inline: calc((var(--spectrum-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--spectrum-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1);
 }
diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css b/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css
deleted file mode 100644
index 23540d348fd..00000000000
--- a/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-#separator {
-    margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block));
-    margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline));
-    opacity: 1;
-    color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color)));
-    position: relative;
-}
-
-#separator:dir(rtl),
-:host([dir="rtl"]) #separator {
-    transform: scaleX(-1);
-}
-
-:host {
-    box-sizing: border-box;
-    white-space: nowrap;
-    font-family: var(--mod-breadcrumbs-font-family, var(--spectrum-breadcrumbs-font-family));
-    font-size: var(--mod-breadcrumbs-font-size, var(--spectrum-breadcrumbs-font-size));
-    font-weight: var(--mod-breadcrumbs-font-weight, var(--spectrum-breadcrumbs-font-weight));
-    line-height: var(--mod-breadcrumbs-line-height, var(--spectrum-breadcrumbs-line-height));
-    align-items: center;
-    display: inline-flex;
-    position: relative;
-}
-
-:host(:not(.is-menu):last-of-type) {
-    font-family: var(--mod-breadcrumbs-font-family-current, var(--spectrum-breadcrumbs-font-family-current));
-    font-size: var(--mod-breadcrumbs-font-size-current, var(--spectrum-breadcrumbs-font-size-current));
-    font-weight: var(--mod-breadcrumbs-font-weight-current, var(--spectrum-breadcrumbs-font-weight-current));
-}
-
-:host(:not(.is-menu):last-of-type) #separator {
-    display: none;
-}
-
-::slotted(sp-action-menu) {
-    margin-inline: var(--mod-breadcrumbs-action-button-spacing-inline, var(--spectrum-breadcrumbs-action-button-spacing-inline));
-    margin-block: var(--mod-breadcrumbs-action-button-spacing-block, var(--spectrum-breadcrumbs-action-button-spacing-block));
-    color: var(--highcontrast-breadcrumbs-action-button-color, var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color)));
-}
-
-::slotted(sp-action-menu[disabled]) {
-    color: var(--highcontrast-breadcrumbs-action-button-color-disabled, var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled)));
-}
-
-:host(:first-of-type) > ::slotted(sp-action-menu) {
-    margin-inline-start: var(--mod-breadcrumbs-action-button-spacing-inline-start, var(--spectrum-breadcrumbs-action-button-spacing-inline-start));
-}
-
-#item-link {
-    cursor: default;
-    box-sizing: border-box;
-    border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius));
-    color: var(--highcontrast-breadcrumbs-text-color, var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color)));
-    outline: none;
-    margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start, var(--spectrum-breadcrumbs-text-spacing-block-start));
-    margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end, var(--spectrum-breadcrumbs-text-spacing-block-end));
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    display: block;
-    position: relative;
-}
-
-#item-link.is-disabled,
-:host([aria-disabled="true"]) #item-link {
-    color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled)));
-}
-
-:host(:not(.is-menu):last-of-type) #item-link {
-    color: var(--highcontrast-breadcrumbs-text-color-current, var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current)));
-}
-
-#item-link[href],
-#item-link[tabindex] {
-    cursor: pointer;
-}
-
-#item-link[href]:focus-visible,
-#item-link[tabindex]:focus-visible {
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness));
-    text-underline-offset: var(--mod-breadcrumbs-text-decoration-gap, var(--spectrum-breadcrumbs-text-decoration-gap));
-}
-
-@media (hover: hover) {
-    #item-link[href]:hover,
-    #item-link[tabindex]:hover {
-        -webkit-text-decoration: underline;
-        text-decoration: underline;
-        text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness));
-        text-underline-offset: var(--mod-breadcrumbs-text-decoration-gap, var(--spectrum-breadcrumbs-text-decoration-gap));
-    }
-}
-
-:host .is-dragged #item-link:before,
-#item-link:focus-visible:before {
-    box-sizing: border-box;
-    inline-size: calc(100% + var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2 + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2);
-    block-size: calc(100% + var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2 + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2);
-    border-width: var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness));
-    border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius));
-    content: "";
-    pointer-events: none;
-    border-style: solid;
-    border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color)));
-    margin-block-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1);
-    margin-inline-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1);
-    display: block;
-    position: absolute;
-}
diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs.css b/packages/breadcrumbs/src/spectrum-breadcrumbs.css
deleted file mode 100644
index b241875abdf..00000000000
--- a/packages/breadcrumbs/src/spectrum-breadcrumbs.css
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height);
-    --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact);
-    --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline);
-    --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100);
-    --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200);
-    --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight);
-    --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200);
-    --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack);
-    --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight);
-    --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100);
-    --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack);
-    --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight);
-    --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100);
-    --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack);
-    --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight);
-    --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75);
-    --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack);
-    --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight);
-    --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300);
-    --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack);
-    --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight);
-    --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness);
-    --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap);
-    --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100);
-    --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text);
-    --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text);
-    --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon);
-    --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact);
-    --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact);
-    --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact);
-    --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline);
-    --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline);
-    --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text);
-    --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline);
-    --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline);
-    --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text);
-    --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text);
-    --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon);
-    --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu);
-    --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);
-    --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu);
-    --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);
-    --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text);
-    --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100);
-    --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default);
-    --spectrum-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default);
-    --spectrum-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default);
-    --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default);
-    --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color);
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-breadcrumbs-text-color: LinkText;
-        --highcontrast-breadcrumbs-text-color-current: CanvasText;
-        --highcontrast-breadcrumbs-text-color-disabled: GrayText;
-        --highcontrast-breadcrumbs-separator-color: CanvasText;
-        --highcontrast-breadcrumbs-action-button-color: LinkText;
-        --highcontrast-breadcrumbs-action-button-color-disabled: GrayText;
-        --highcontrast-breadcrumbs-focus-indicator-color: CanvasText;
-    }
-}
-
-#list {
-    block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size));
-    flex-flow: row;
-    flex: 1 0;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 0;
-    padding-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start));
-    padding-inline-end: var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end));
-    list-style-type: none;
-    display: flex;
-}
-
-:host([compact]) #list {
-    block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact));
-}
-
-.spectrum-Breadcrumbs--multiline {
-    block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline));
-    flex-wrap: wrap;
-    align-content: center;
-}
-
-:host([compact]) ::slotted(sp-breadcrumb-item) {
-    font-family: var(--mod-breadcrumbs-font-family-compact, var(--spectrum-breadcrumbs-font-family-compact));
-    font-size: var(--mod-breadcrumbs-font-size-compact, var(--spectrum-breadcrumbs-font-size-compact));
-    font-weight: var(--mod-breadcrumbs-font-weight-compact, var(--spectrum-breadcrumbs-font-weight-compact));
-}
-
-:host([compact]) ::slotted(:last-of-type) {
-    font-family: var(--mod-breadcrumbs-font-family-compact-current, var(--spectrum-breadcrumbs-font-family-compact-current));
-    font-size: var(--mod-breadcrumbs-font-size-compact-current, var(--spectrum-breadcrumbs-font-size-compact-current));
-    font-weight: var(--mod-breadcrumbs-font-weight-compact-current, var(--spectrum-breadcrumbs-font-weight-compact-current));
-}
diff --git a/packages/button-group/package.json b/packages/button-group/package.json
index 1bbfa3c36c8..2b3cd6706b4 100644
--- a/packages/button-group/package.json
+++ b/packages/button-group/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ButtonGroup.dev.js",
             "default": "./src/ButtonGroup.js"
         },
-        "./src/button-group-overrides.css.js": "./src/button-group-overrides.css.js",
         "./src/button-group.css.js": "./src/button-group.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/button-group/src/button-group-overrides.css b/packages/button-group/src/button-group-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/button-group/src/button-group-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/button-group/src/button-group.css b/packages/button-group/src/button-group.css
index 4086352773d..c21fc9fa624 100644
--- a/packages/button-group/src/button-group.css
+++ b/packages/button-group/src/button-group.css
@@ -10,13 +10,36 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-button-group.css");
-@import url("./button-group-overrides.css");
+/* Base variables */
+:host {
+    --spectrum-buttongroup-spacing: var(--spectrum-spacing-300);
 
+    display: flex;
+    flex-direction: row;
+    gap: var(--spectrum-buttongroup-spacing);
+    justify-content: var(--spectrum-buttongroup-justify-content, normal);
+    flex-wrap: wrap;
+}
+
+:host([size="s"]) {
+    --spectrum-buttongroup-spacing: var(--spectrum-spacing-200);
+}
+
+:host([vertical]) {
+    display: inline-flex;
+    flex-direction: column;
+}
+
+::slotted(*) {
+    flex-shrink: 0;
+}
+
+/* vertical action button styles */
 :host([vertical]) ::slotted(sp-action-button) {
     --spectrum-actionbutton-label-flex-grow: 1;
 }
 
+/* rTL support */
 :host([dir="ltr"][vertical]) ::slotted(sp-action-button) {
     --spectrum-actionbutton-label-text-align: left;
 }
diff --git a/packages/button-group/src/spectrum-button-group.css b/packages/button-group/src/spectrum-button-group.css
deleted file mode 100644
index ba2177bdba2..00000000000
--- a/packages/button-group/src/spectrum-button-group.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --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);
-}
-
-:host([size="s"]) {
-    --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200)));
-}
-
-:host([vertical]) {
-    --mod-buttongroup-spacing: var(--mod-buttongroup-spacing-vertical);
-    --spectrum-buttongroup-display: inline-flex;
-    --spectrum-buttongroup-flex-direction: column;
-}
-
-:host {
-    display: var(--spectrum-buttongroup-display);
-    flex-direction: var(--spectrum-buttongroup-flex-direction);
-    gap: var(--spectrum-buttongroup-spacing);
-    justify-content: var(--spectrum-buttongroup-justify-content);
-    flex-wrap: wrap;
-}
-
-::slotted(*) {
-    flex-shrink: 0;
-}
diff --git a/packages/button/package.json b/packages/button/package.json
index 929a266a105..7a275edf136 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -46,7 +46,6 @@
             "default": "./src/StyledButton.js"
         },
         "./src/button-base.css.js": "./src/button-base.css.js",
-        "./src/button-overrides.css.js": "./src/button-overrides.css.js",
         "./src/button.css.js": "./src/button.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/button/src/button-base.css b/packages/button/src/button-base.css
index 48951955137..4fa77fb5c02 100644
--- a/packages/button/src/button-base.css
+++ b/packages/button/src/button-base.css
@@ -10,18 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-button-base.css");
-
+/* Base variables */
 :host {
-    display: inline-flex;
-    vertical-align: top;
-
     --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-100);
     --spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
+    display: inline-flex;
+    vertical-align: top;
 }
 
 :host([dir]) {
-    /* spectrum-button.css uses "-webkit-appearance: button" to workaround an
+    /* button.css uses "-webkit-appearance: button" to workaround an
      * iOS and Safari issue. However, it results in incorrect styling
      * when applied in :host
      */
@@ -53,8 +51,8 @@
 
 slot[name="icon"]::slotted(svg),
 slot[name="icon"]::slotted(img) {
-    fill: currentcolor;
-    stroke: currentcolor;
+    fill: currentColor;
+    stroke: currentColor;
     block-size: var(--spectrum-icon-size, var(--spectrum-workflow-icon-size-100));
     inline-size: var(--spectrum-icon-size, var(--spectrum-workflow-icon-size-100));
 }
diff --git a/packages/button/src/button-overrides.css b/packages/button/src/button-overrides.css
deleted file mode 100644
index b064111965a..00000000000
--- a/packages/button/src/button-overrides.css
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-button-background-color-default: var(--system-button-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-background-color-focus);
-    --spectrum-button-border-color-default: var(--system-button-border-color-default);
-    --spectrum-button-border-color-hover: var(--system-button-border-color-hover);
-    --spectrum-button-border-color-down: var(--system-button-border-color-down);
-    --spectrum-button-border-color-focus: var(--system-button-border-color-focus);
-    --spectrum-button-background-color-disabled: var(--system-button-background-color-disabled);
-    --spectrum-button-border-color-disabled: var(--system-button-border-color-disabled);
-}
-
-:host([selected]) {
-    --spectrum-button-background-color-default: var(--system-button-selected-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-selected-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-selected-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-selected-background-color-focus);
-}
-
-:host([variant="primary"]) {
-    --spectrum-button-content-color-default: var(--system-button-primary-content-color-default);
-    --spectrum-button-content-color-hover: var(--system-button-primary-content-color-hover);
-    --spectrum-button-content-color-down: var(--system-button-primary-content-color-down);
-    --spectrum-button-content-color-focus: var(--system-button-primary-content-color-focus);
-}
-
-:host([variant="primary"][treatment="outline"]) {
-    --spectrum-button-background-color-hover: var(--system-button-primary-outline-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-primary-outline-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-primary-outline-background-color-focus);
-}
-
-:host([variant="secondary"]) {
-    --spectrum-button-background-color-default: var(--system-button-secondary-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-secondary-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-secondary-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-secondary-background-color-focus);
-}
-
-:host([variant="secondary"][treatment="outline"]) {
-    --spectrum-button-background-color-hover: var(--system-button-secondary-outline-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-secondary-outline-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-secondary-outline-background-color-focus);
-    --spectrum-button-border-color-default: var(--system-button-secondary-outline-border-color-default);
-    --spectrum-button-border-color-down: var(--system-button-secondary-outline-border-color-down);
-}
-
-:host([static-color="white"]) {
-    --spectrum-button-background-color-default: var(--system-button-static-white-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-static-white-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-static-white-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-static-white-background-color-focus);
-    --spectrum-button-content-color-default: var(--system-button-static-white-content-color-default);
-    --spectrum-button-content-color-hover: var(--system-button-static-white-content-color-hover);
-    --spectrum-button-content-color-down: var(--system-button-static-white-content-color-down);
-    --spectrum-button-content-color-focus: var(--system-button-static-white-content-color-focus);
-}
-
-:host([static-color="white"][treatment="outline"]) {
-    --spectrum-button-background-color-default: var(--system-button-static-white-outline-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-static-white-outline-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-static-white-outline-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-static-white-outline-background-color-focus);
-    --spectrum-button-content-color-default: var(--system-button-static-white-outline-content-color-default);
-    --spectrum-button-content-color-hover: var(--system-button-static-white-outline-content-color-hover);
-    --spectrum-button-content-color-down: var(--system-button-static-white-outline-content-color-down);
-    --spectrum-button-content-color-focus: var(--system-button-static-white-outline-content-color-focus);
-    --spectrum-button-border-color-default: var(--system-button-static-white-outline-border-color-default);
-    --spectrum-button-border-color-hover: var(--system-button-static-white-outline-border-color-hover);
-    --spectrum-button-border-color-down: var(--system-button-static-white-outline-border-color-down);
-    --spectrum-button-border-color-focus: var(--system-button-static-white-outline-border-color-focus);
-}
-
-:host([static-color="white"][variant="secondary"]) {
-    --spectrum-button-background-color-default: var(--system-button-static-white-secondary-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-static-white-secondary-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-static-white-secondary-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-static-white-secondary-background-color-focus);
-    --spectrum-button-content-color-default: var(--system-button-static-white-secondary-content-color-default);
-    --spectrum-button-content-color-hover: var(--system-button-static-white-secondary-content-color-hover);
-    --spectrum-button-content-color-down: var(--system-button-static-white-secondary-content-color-down);
-    --spectrum-button-content-color-focus: var(--system-button-static-white-secondary-content-color-focus);
-}
-
-:host([static-color="white"][variant="secondary"][treatment="outline"]) {
-    --spectrum-button-border-color-default: var(--system-button-static-white-secondary-outline-border-color-default);
-    --spectrum-button-border-color-hover: var(--system-button-static-white-secondary-outline-border-color-hover);
-    --spectrum-button-border-color-down: var(--system-button-static-white-secondary-outline-border-color-down);
-    --spectrum-button-border-color-focus: var(--system-button-static-white-secondary-outline-border-color-focus);
-    --spectrum-button-background-color-default: var(--system-button-static-white-secondary-outline-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-static-white-secondary-outline-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-static-white-secondary-outline-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-static-white-secondary-outline-background-color-focus);
-}
-
-:host([static-color="black"]) {
-    --spectrum-button-background-color-default: var(--system-button-static-black-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-static-black-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-static-black-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-static-black-background-color-focus);
-    --spectrum-button-content-color-default: var(--system-button-static-black-content-color-default);
-    --spectrum-button-content-color-hover: var(--system-button-static-black-content-color-hover);
-    --spectrum-button-content-color-down: var(--system-button-static-black-content-color-down);
-    --spectrum-button-content-color-focus: var(--system-button-static-black-content-color-focus);
-}
-
-:host([static-color="black"][treatment="outline"]) {
-    --spectrum-button-background-color-default: var(--system-button-static-black-outline-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-static-black-outline-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-static-black-outline-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-static-black-outline-background-color-focus);
-    --spectrum-button-content-color-default: var(--system-button-static-black-outline-content-color-default);
-    --spectrum-button-content-color-hover: var(--system-button-static-black-outline-content-color-hover);
-    --spectrum-button-content-color-down: var(--system-button-static-black-outline-content-color-down);
-    --spectrum-button-content-color-focus: var(--system-button-static-black-outline-content-color-focus);
-    --spectrum-button-border-color-default: var(--system-button-static-black-outline-border-color-default);
-    --spectrum-button-border-color-hover: var(--system-button-static-black-outline-border-color-hover);
-    --spectrum-button-border-color-down: var(--system-button-static-black-outline-border-color-down);
-    --spectrum-button-border-color-focus: var(--system-button-static-black-outline-border-color-focus);
-}
-
-:host([static-color="black"][variant="secondary"]) {
-    --spectrum-button-background-color-default: var(--system-button-static-black-secondary-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-static-black-secondary-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-static-black-secondary-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-static-black-secondary-background-color-focus);
-    --spectrum-button-content-color-default: var(--system-button-static-black-secondary-content-color-default);
-    --spectrum-button-content-color-hover: var(--system-button-static-black-secondary-content-color-hover);
-    --spectrum-button-content-color-down: var(--system-button-static-black-secondary-content-color-down);
-    --spectrum-button-content-color-focus: var(--system-button-static-black-secondary-content-color-focus);
-}
-
-:host([static-color="black"][variant="secondary"][treatment="outline"]) {
-    --spectrum-button-border-color-default: var(--system-button-static-black-secondary-outline-border-color-default);
-    --spectrum-button-border-color-hover: var(--system-button-static-black-secondary-outline-border-color-hover);
-    --spectrum-button-border-color-down: var(--system-button-static-black-secondary-outline-border-color-down);
-    --spectrum-button-border-color-focus: var(--system-button-static-black-secondary-outline-border-color-focus);
-    --spectrum-button-background-color-default: var(--system-button-static-black-secondary-outline-background-color-default);
-    --spectrum-button-background-color-hover: var(--system-button-static-black-secondary-outline-background-color-hover);
-    --spectrum-button-background-color-down: var(--system-button-static-black-secondary-outline-background-color-down);
-    --spectrum-button-background-color-focus: var(--system-button-static-black-secondary-outline-background-color-focus);
-}
diff --git a/packages/button/src/button.css b/packages/button/src/button.css
index 978e5ee5384..3945711d310 100644
--- a/packages/button/src/button.css
+++ b/packages/button/src/button.css
@@ -1,8 +1,9 @@
-/**
- * Copyright 2025 Adobe. All rights reserved.
+/*!
+ * 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
+ * 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
@@ -10,95 +11,570 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-button.css");
-@import url("./button-overrides.css");
+:host {
+    cursor: pointer;
+    user-select: none;
+    overflow: visible;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
-@media (forced-colors: active) {
-    :host([treatment][disabled]) {
-        border-color: graytext;
-    }
+    box-sizing: border-box;
+    margin: 0;
 
-    :host([treatment]:not([disabled]):hover) {
-        border-color: highlight;
-    }
+    font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack));
+    vertical-align: top;
 
-    :host(.remove-focus-ring-safari-hack:focus-visible):after {
-        forced-color-adjust: none;
-        box-shadow: none;
-    }
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    line-height: var(--mod-button-line-height, var(--spectrum-line-height-100));
+    text-decoration: none;
+    text-transform: none;
+
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
+    -webkit-appearance: button;
+
+    transition:
+        background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+        border-color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+        color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+        box-shadow var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out;
 }
 
-@keyframes show-progress-circle {
-    0% {
-        visibility: hidden;
-    }
+:host(::-moz-focus-inner) {
+    margin-block-start: -2px;
+    margin-block-end: -2px;
+    padding: 0;
+    border: 0;
+    border-style: none;
+}
 
-    100% {
-        visibility: visible;
-    }
+:host(:focus) {
+    outline: none;
 }
 
-@keyframes hide-icons-label {
-    0% {
-        visibility: visible;
-    }
+:host([disabled]),
+:host(:disabled) {
+    cursor: default;
+}
 
-    100% {
-        visibility: hidden;
-    }
+a.spectrum-Button {
+    user-select: none;
+
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
+    -webkit-appearance: none;
 }
 
-@keyframes update-pending-button-styles {
-    100% {
-        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)));
-    }
+::slotted(*) {
+    align-self: center;
+    justify-self: center;
+    text-align: center;
 }
 
-:host([pending]:not([disabled])) {
-    cursor: default;
-    pointer-events: none;
-    animation: update-pending-button-styles 0s var(--pending-delay, 1s) forwards;
+:host {
+    --spectrum-button-animation-duration: var(--spectrum-animation-duration-100);
+
+    --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+    --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier));
+    --spectrum-button-height: var(--spectrum-component-height-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;
+    --spectrum-button-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-button-font-size: var(--spectrum-font-size-100);
+
+    --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+    --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-100) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+    --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--mod-button-border-width, 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-progress-circle-position: absolute;
+
+    /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */
+    --spectrum-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down));
+}
+
+:host(:has([icon-only])) {
+    --spectrum-button-border-radius: var(--spectrum-corner-radius-full);
+}
+
+:host([size="s"]) {
+    --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier));
+    --spectrum-button-height: var(--spectrum-component-height-75);
+
+    --spectrum-button-font-size: var(--spectrum-font-size-75);
+
+    --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+    --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-75) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+    --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--mod-button-border-width, 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);
+}
+
+:host([size="s"]:has([icon-only])) {
+    --spectrum-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down);
+}
+
+:host([size="l"]) {
+    --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier));
+    --spectrum-button-height: var(--spectrum-component-height-200);
+
+    --spectrum-button-font-size: var(--spectrum-font-size-200);
+
+    --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+    --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-200) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+    --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--mod-button-border-width, 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);
+}
+
+:host([size="xl"]) {
+    --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier));
+    --spectrum-button-height: var(--spectrum-component-height-300);
+
+    --spectrum-button-font-size: var(--spectrum-font-size-300);
+
+    --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+    --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+    --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--mod-button-border-width, 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);
+}
+
+:host {
+    --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);
+}
+
+:host([treatment="outline"]) {
+    --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);
+}
+
+:host,
+:host([variant="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);
+}
+
+:host([variant="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);
+}
+
+:host([variant="primary"]) {
+    --spectrum-button-content-color-default: var(--spectrum-gray-25);
+    --spectrum-button-content-color-hover: var(--spectrum-gray-25);
+    --spectrum-button-content-color-down: var(--spectrum-gray-25);
+    --spectrum-button-content-color-focus: var(--spectrum-gray-25);
+
+    --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);
+}
+
+:host([variant="primary"][treatment="outline"]) {
+    --spectrum-button-background-color-default: transparent;
+    --spectrum-button-background-color-hover: var(--spectrum-gray-100);
+    --spectrum-button-background-color-down: var(--spectrum-gray-100);
+    --spectrum-button-background-color-focus: var(--spectrum-gray-100);
+
+    --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);
+}
+
+:host([variant="secondary"]) {
+    --spectrum-button-background-color-default: var(--spectrum-gray-100);
+    --spectrum-button-background-color-hover: var(--spectrum-gray-200);
+    --spectrum-button-background-color-down: var(--spectrum-gray-200);
+    --spectrum-button-background-color-focus: 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);
+}
+
+:host([variant="secondary"][treatment="outline"]) {
+    --spectrum-button-background-color-default: transparent;
+    --spectrum-button-background-color-hover: var(--spectrum-gray-100);
+    --spectrum-button-background-color-down: var(--spectrum-gray-100);
+    --spectrum-button-background-color-focus: var(--spectrum-gray-100);
+
+    --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-400);
+    --spectrum-button-border-color-focus: var(--spectrum-gray-400);
+}
+
+:host([static-color="white"]) {
+    --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(--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);
+}
+
+:host([static-color="white"][treatment="outline"]) {
+    --spectrum-button-background-color-default: var(--spectrum-transparent-white-25);
+    --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100);
+    --spectrum-button-background-color-down: var(--spectrum-transparent-white-100);
+    --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100);
+
+    --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-transparent-white-800);
+    --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900);
+    --spectrum-button-content-color-down: var(--spectrum-transparent-white-900);
+    --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900);
+
+    --spectrum-button-background-color-disabled: var(--spectrum-transparent-white-25);
+    --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+    --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+}
+
+:host([static-color="white"][variant="secondary"]) {
+    --spectrum-button-background-color-default: var(--spectrum-transparent-white-100);
+    --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200);
+    --spectrum-button-background-color-down: var(--spectrum-transparent-white-200);
+    --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200);
+
+    --spectrum-button-content-color-default: var(--spectrum-transparent-white-800);
+    --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900);
+    --spectrum-button-content-color-down: var(--spectrum-transparent-white-900);
+    --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900);
+}
+
+:host([static-color="white"][variant="secondary"][treatment="outline"]) {
+    --spectrum-button-background-color-default: var(--spectrum-transparent-white-25);
+    --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100);
+    --spectrum-button-background-color-down: var(--spectrum-transparent-white-100);
+    --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100);
+
+    --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-400);
+    --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400);
+}
+
+:host([static-color="black"]) {
+    --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-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);
+}
+
+:host([static-color="black"][treatment="outline"]) {
+    --spectrum-button-background-color-default: var(--spectrum-transparent-black-25);
+    --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100);
+    --spectrum-button-background-color-down: var(--spectrum-transparent-black-100);
+    --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100);
+
+    --spectrum-button-border-color-default: var(--spectrum-transparent-black-800);
+    --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900);
+    --spectrum-button-border-color-down: var(--spectrum-transparent-black-900);
+    --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900);
+
+    --spectrum-button-content-color-default: var(--spectrum-transparent-black-800);
+    --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900);
+    --spectrum-button-content-color-down: var(--spectrum-transparent-black-900);
+    --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900);
+
+    --spectrum-button-background-color-disabled: var(--spectrum-transparent-black-25);
+    --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+    --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+}
+
+:host([static-color="black"][variant="secondary"]) {
+    --spectrum-button-background-color-default: var(--spectrum-transparent-black-100);
+    --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200);
+    --spectrum-button-background-color-down: var(--spectrum-transparent-black-200);
+    --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200);
+
+    --spectrum-button-content-color-default: var(--spectrum-transparent-black-800);
+    --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900);
+    --spectrum-button-content-color-down: var(--spectrum-transparent-black-900);
+    --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900);
+}
+
+:host([static-color="black"][variant="secondary"][treatment="outline"]) {
+    --spectrum-button-background-color-default: var(--spectrum-transparent-black-25);
+    --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100);
+    --spectrum-button-background-color-down: var(--spectrum-transparent-black-100);
+    --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100);
+
+    --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-400);
+    --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400);
+}
+
+:host {
+    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;
+    font-size: var(--mod-button-font-size, var(--spectrum-button-font-size));
+    font-weight: var(--mod-button-font-weight, var(--spectrum-button-font-weight));
+    gap: var(--mod-button-padding-label-to-icon, 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));
+
+    padding-block: 0;
+    padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text));
+    position: relative;
+
+    background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
+    border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
+    color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default)));
+    transition:
+        border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 0.13s)) linear,
+        color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 0.13s)) linear,
+        background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 0.13s)) linear;
+
+    margin-block: var(--mod-button-margin-block);
+    margin-inline-end: var(--mod-button-margin-right);
+    margin-inline-start: var(--mod-button-margin-left);
 }
 
 ::slotted([slot="icon"]) {
-    /* Correct CSS output taking too much control of this element */
-    visibility: revert-layer;
+    /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- 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, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));
 
-    --mod-progress-circle-position: relative;
-    --spectrum-icon-size: inherit;
+    margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2)));
+
+    margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)));
+    color: inherit;
+    flex-shrink: 0;
+    align-self: flex-start;
 }
 
-sp-progress-circle {
+:host:after {
+    content: "";
     display: block;
-    visibility: hidden;
     position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0);
+    inset: 0;
+    margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1);
+    border-radius: var(--mod-button-focus-ring-border-radius, calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap))));
+    transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out;
+    pointer-events: none;
 }
 
-:host([pending]:not([disabled])) sp-progress-circle {
-    animation: show-progress-circle 0s var(--pending-delay, 1s) forwards;
+:host(:focus-visible) {
+    box-shadow: none;
+    outline: none;
 }
 
-:host([pending]:not([disabled])) slot[name="icon"],
-:host([pending]:not([disabled])) #label {
-    animation: hide-icons-label 0s var(--pending-delay, 1s) forwards;
+:host(:focus-visible):after,
+:host(:focus):after {
+    box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)));
 }
 
-:host(.remove-focus-ring-safari-hack:focus-visible):after {
-    margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))));
+:host(:active),
+:host(:hover) {
     box-shadow: none;
 }
 
-:host(.remove-focus-ring-safari-hack:focus-visible) {
-    box-shadow: none;
-    outline: none;
+:host(: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)));
 }
 
-:host(.remove-focus-ring-safari-hack:focus-visible:not(:hover)) {
-    background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
-    border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
-    color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default)));
+@media (hover: hover) {
+    :host(:hover) {
+        box-shadow: none;
+        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)));
+    }
+}
+
+:host(: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)));
+}
+
+:host(: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)));
+    transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
+}
+
+:host([disabled]),
+:host([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)));
+}
+
+#label,
+::slotted([slot="icon"]) {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 0.13s)) ease-in-out;
+}
+
+sp-progress-circle {
+    visibility: hidden;
+    opacity: 0;
+    transition:
+        opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 0.13s)) ease-in-out,
+        visibility 0s linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 0.13s));
+}
+
+:host([pending]) {
+    cursor: default;
+}
+
+:host([pending]) #label,
+:host([pending]) ::slotted([slot="icon"]) {
+    visibility: hidden;
+    opacity: 0;
+    transition:
+        opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 0.13s)) ease-in-out,
+        visibility 0s linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 0.13s));
+}
+
+:host([pending]) sp-progress-circle {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 0.13s)) ease-in-out;
+}
+
+#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;
+    text-align: var(--mod-button-text-align, center);
+}
+
+:host([no-wrap]) #label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+slot[name="icon"] + #label {
+    text-align: var(--mod-button-text-align-with-icon, start);
+}
+
+:host(:has([icon-only])) {
+    min-inline-size: unset;
+    padding: var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only));
+}
+
+:host(:has([icon-only])) ::slotted([slot="icon"]) {
+    align-self: center;
+    margin-inline-start: 0;
+    margin-block-start: 0;
+}
+
+@media (forced-colors: active) {
+    :host {
+        --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-content-color-disabled: GrayText;
+        --highcontrast-button-border-color-disabled: GrayText;
+        --highcontrast-button-background-color-disabled: ButtonFace;
+        --mod-progress-circle-track-border-color: ButtonText;
+        --mod-progress-circle-track-border-color-over-background: ButtonText;
+        --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
+
+        --highcontrast-button-focus-ring-color: ButtonText;
+    }
+
+    :host(:focus-visible):after {
+        forced-color-adjust: none;
+    }
+
+    :host([variant="accent"]),
+    :host(:not([variant="primary"], [variant="negative"], [variant="secondary"], [static-color="black"], [static-color="white"])) {
+        --highcontrast-button-background-color-default: ButtonText;
+        --highcontrast-button-content-color-default: ButtonFace;
+
+        --highcontrast-button-background-color-hover: Highlight;
+        --highcontrast-button-background-color-down: Highlight;
+        --highcontrast-button-background-color-focus: Highlight;
+
+        --highcontrast-button-content-color-hover: HighlightText;
+        --highcontrast-button-content-color-down: HighlightText;
+        --highcontrast-button-content-color-focus: HighlightText;
+    }
+
+    :host([variant="accent"]) #label,
+    :host(:not([variant="primary"], [variant="negative"], [variant="secondary"], [static-color="black"], [static-color="white"])) #label {
+        forced-color-adjust: none;
+    }
 }
diff --git a/packages/button/src/spectrum-button-base.css b/packages/button/src/spectrum-button-base.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/button/src/spectrum-button-base.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css
deleted file mode 100644
index 3dcc3cfb5d1..00000000000
--- a/packages/button/src/spectrum-button.css
+++ /dev/null
@@ -1,578 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    box-sizing: border-box;
-    font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
-    text-transform: none;
-    vertical-align: top;
-    -webkit-appearance: button;
-    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;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    display: inline-flex;
-    overflow: visible;
-}
-
-:host(:focus) {
-    outline: none;
-}
-
-:host .is-disabled,
-:host([disabled]) {
-    cursor: default;
-}
-
-:host:after {
-    margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1);
-    transition:
-        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;
-    display: block;
-    inset-block: 0;
-    inset-inline: 0;
-}
-
-:host(:focus-visible):after {
-    margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
-}
-
-#label {
-    text-align: center;
-    place-self: center;
-}
-
-#label[hidden] {
-    display: none;
-}
-
-:host {
-    --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);
-}
-
-:host([size="s"]) {
-    --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);
-}
-
-:host([size="l"]) {
-    --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);
-}
-
-:host([size="xl"]) {
-    --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);
-}
-
-:host {
-    --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-content-color-disabled: var(--spectrum-disabled-content-color);
-}
-
-:host([selected]) {
-    --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;
-}
-
-:host([selected][emphasized]),
-:host([variant="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);
-}
-
-:host([variant="accent"]) {
-    --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-    --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-border-color-disabled: 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);
-}
-
-:host([variant="accent"][treatment="outline"]) {
-    --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-border-color-disabled: var(--spectrum-disabled-border-color);
-    --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-content-color-disabled: var(--spectrum-disabled-content-color);
-}
-
-:host([variant="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);
-}
-
-:host([variant="negative"][treatment="outline"]) {
-    --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-border-color-disabled: var(--spectrum-disabled-border-color);
-    --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-content-color-disabled: var(--spectrum-disabled-content-color);
-}
-
-:host([variant="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-background-color-disabled: var(--spectrum-disabled-background-color);
-    --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-border-color-disabled: transparent;
-}
-
-:host([variant="primary"][treatment="outline"]) {
-    --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-border-color-disabled: var(--spectrum-disabled-border-color);
-    --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-}
-
-:host([variant="secondary"]) {
-    --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-    --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-border-color-disabled: 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-content-color-disabled: var(--spectrum-disabled-content-color);
-}
-
-:host([variant="secondary"][treatment="outline"]) {
-    --spectrum-button-background-color-down: var(--spectrum-gray-400);
-    --spectrum-button-border-color-default: var(--spectrum-gray-300);
-    --spectrum-button-border-color-hover: var(--spectrum-gray-400);
-    --spectrum-button-border-color-focus: var(--spectrum-gray-400);
-    --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
-    --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-content-color-disabled: var(--spectrum-disabled-content-color);
-}
-
-:host([quiet]) {
-    --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);
-}
-
-:host([quiet]),
-:host([static-color="black"]),
-:host([static-color="white"]) {
-    --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-border-color-disabled: transparent;
-}
-
-:host([static-color="black"][selected]),
-:host([static-color="white"][selected]) {
-    --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);
-    --spectrum-button-border-color-disabled: transparent;
-}
-
-:host([static-color="black"][variant="secondary"]),
-:host([static-color="white"][variant="secondary"]) {
-    --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-border-color-disabled: transparent;
-}
-
-:host([static-color="black"][variant="secondary"][treatment="outline"]),
-:host([static-color="white"][variant="secondary"][treatment="outline"]) {
-    --spectrum-button-background-color-disabled: transparent;
-}
-
-:host([static-color="black"][quiet]),
-:host([static-color="white"][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-border-color-disabled: transparent;
-}
-
-:host([static-color="white"]) {
-    --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-    --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
-    --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-}
-
-:host([static-color="white"][treatment="outline"]) {
-    --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-    --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
-}
-
-:host([static-color="white"][variant="secondary"]) {
-    --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
-}
-
-:host([static-color="black"]) {
-    --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-    --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
-    --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
-}
-
-:host([static-color="black"][treatment="outline"]) {
-    --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-    --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
-}
-
-:host([static-color="black"][variant="secondary"]) {
-    --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
-}
-
-:host([treatment="outline"]),
-:host([quiet]) {
-    --spectrum-button-background-color-default: transparent;
-    --spectrum-button-background-color-disabled: transparent;
-}
-
-:host {
-    --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)));
-    --spectrum-button-line-height: var(--mod-button-line-height, 1.2);
-    --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));
-    --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));
-    --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));
-    --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));
-    --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));
-    --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));
-    --mod-progress-circle-position: absolute;
-    border-radius: var(--spectrum-button-border-radius);
-    border-width: var(--spectrum-button-border-width);
-    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(--spectrum-button-min-width);
-    min-block-size: var(--spectrum-button-height);
-    padding-block: 0;
-    padding-inline: var(--spectrum-button-edge-to-text);
-    margin-block: var(--mod-button-margin-block);
-    background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
-    border-style: solid;
-    border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
-    color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default, inherit)));
-    transition:
-        border var(--spectrum-button-animation-duration, 0.13s) linear,
-        color var(--spectrum-button-animation-duration, 0.13s) linear,
-        background-color var(--spectrum-button-animation-duration, 0.13s) linear;
-    margin-inline-start: var(--mod-button-margin-left);
-    margin-inline-end: var(--mod-button-margin-right);
-    position: relative;
-}
-
-:host([treatment="outline"]) {
-    background-color: initial;
-}
-
-:host:after {
-    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: "";
-    border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-focus-indicator-gap));
-    position: absolute;
-    inset: 0;
-}
-
-:host(: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)));
-    box-shadow: none;
-    outline: none;
-}
-
-:host([focused]):after,
-:host(:focus-visible):after {
-    box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color);
-}
-
-:host(:is(:active, [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)));
-    box-shadow: none;
-}
-
-@media (hover: hover) {
-    :host(: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)));
-        box-shadow: none;
-    }
-}
-
-:host .is-disabled,
-:host([pending]),
-:host([disabled]),
-:host([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)));
-}
-
-::slotted([slot="icon"]) {
-    --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));
-    margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2)));
-    margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)));
-}
-
-:host([icon-only]) {
-    padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
-}
-
-#label,
-::slotted([slot="icon"]) {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out;
-}
-
-.spectrum-ProgressCircle {
-    visibility: hidden;
-    opacity: 0;
-    transition:
-        opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out,
-        visibility 0s linear var(--spectrum-button-animation-duration, 0.13s);
-}
-
-:host([pending]),
-:host([pending]) {
-    cursor: default;
-}
-
-:host([pending]) .spectrum-ProgressCircle,
-:host([pending]) .spectrum-ProgressCircle {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out;
-}
-
-::slotted([slot="icon"]) {
-    --_icon-size-difference: max(0px, calc(var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))));
-    color: inherit;
-    flex-shrink: 0;
-    align-self: flex-start;
-    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)));
-    margin-inline-start: calc(var(--spectrum-button-edge-to-visual) - var(--spectrum-button-edge-to-text));
-}
-
-:host([icon-only]) {
-    min-inline-size: unset;
-    padding: calc(var(--spectrum-button-edge-to-visual-only) - var(--spectrum-button-border-width));
-    border-radius: 50%;
-}
-
-:host([icon-only]) ::slotted([slot="icon"]) {
-    align-self: center;
-    margin-block-start: 0;
-    margin-inline-start: 0;
-}
-
-:host([icon-only]):after {
-    border-radius: 50%;
-}
-
-[name="icon"] + #label {
-    text-align: var(--mod-button-text-align-with-icon, start);
-}
-
-#label {
-    line-height: var(--spectrum-button-line-height);
-    text-align: var(--mod-button-text-align, center);
-    align-self: start;
-    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));
-}
-
-:host([no-wrap]) #label {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-button-content-color-default: ButtonText;
-        --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;
-        --mod-progress-circle-track-border-color: ButtonText;
-        --mod-progress-circle-track-border-color-over-background: ButtonText;
-        --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
-        --spectrum-button-animation-duration: 0s;
-    }
-
-    #label {
-        forced-color-adjust: none;
-    }
-
-    :host(:focus-visible):after {
-        forced-color-adjust: none;
-        box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) ButtonText;
-    }
-
-    :host([variant="accent"][treatment="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-border-color-default: ButtonText;
-        --highcontrast-button-border-color-hover: Highlight;
-        --highcontrast-button-border-color-focus: Highlight;
-        --highcontrast-button-border-color-down: Highlight;
-    }
-
-    :host([static-color="white"][variant="accent"]) {
-        --highcontrast-button-content-color-disabled: GrayText;
-    }
-}
diff --git a/packages/button/stories/button-accent-fill.stories.ts b/packages/button/stories/button-accent-fill.stories.ts
index 5dcdcb86767..ebfb76cf9ef 100644
--- a/packages/button/stories/button-accent-fill.stories.ts
+++ b/packages/button/stories/button-accent-fill.stories.ts
@@ -18,7 +18,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-accent-outline.stories.ts b/packages/button/stories/button-accent-outline.stories.ts
index 79c10267270..f6335ae3bba 100644
--- a/packages/button/stories/button-accent-outline.stories.ts
+++ b/packages/button/stories/button-accent-outline.stories.ts
@@ -18,7 +18,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-black-fill.stories.ts b/packages/button/stories/button-black-fill.stories.ts
index 5ac6dfbb6b3..c9780c30931 100644
--- a/packages/button/stories/button-black-fill.stories.ts
+++ b/packages/button/stories/button-black-fill.stories.ts
@@ -19,7 +19,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-black-outline.stories.ts b/packages/button/stories/button-black-outline.stories.ts
index 7d6e465e7eb..0b45ad2c052 100644
--- a/packages/button/stories/button-black-outline.stories.ts
+++ b/packages/button/stories/button-black-outline.stories.ts
@@ -19,7 +19,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-negative-fill.stories.ts b/packages/button/stories/button-negative-fill.stories.ts
index 9932c8e844c..e82ef5ad256 100644
--- a/packages/button/stories/button-negative-fill.stories.ts
+++ b/packages/button/stories/button-negative-fill.stories.ts
@@ -18,7 +18,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-negative-outline.stories.ts b/packages/button/stories/button-negative-outline.stories.ts
index c1dd6362546..c23af3526d0 100644
--- a/packages/button/stories/button-negative-outline.stories.ts
+++ b/packages/button/stories/button-negative-outline.stories.ts
@@ -18,7 +18,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-primary-fill.stories.ts b/packages/button/stories/button-primary-fill.stories.ts
index 7f57eb13323..5942e5a1c88 100644
--- a/packages/button/stories/button-primary-fill.stories.ts
+++ b/packages/button/stories/button-primary-fill.stories.ts
@@ -19,7 +19,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-primary-outline.stories.ts b/packages/button/stories/button-primary-outline.stories.ts
index a97f8100ae5..325c402ac41 100644
--- a/packages/button/stories/button-primary-outline.stories.ts
+++ b/packages/button/stories/button-primary-outline.stories.ts
@@ -18,7 +18,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-secondary-fill.stories.ts b/packages/button/stories/button-secondary-fill.stories.ts
index ef4202f6b87..11455b2c334 100644
--- a/packages/button/stories/button-secondary-fill.stories.ts
+++ b/packages/button/stories/button-secondary-fill.stories.ts
@@ -18,7 +18,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-secondary-outline.stories.ts b/packages/button/stories/button-secondary-outline.stories.ts
index b895b90d35f..4922f468583 100644
--- a/packages/button/stories/button-secondary-outline.stories.ts
+++ b/packages/button/stories/button-secondary-outline.stories.ts
@@ -18,7 +18,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-white-fill.stories.ts b/packages/button/stories/button-white-fill.stories.ts
index 00f890be3ed..5b054f816c5 100644
--- a/packages/button/stories/button-white-fill.stories.ts
+++ b/packages/button/stories/button-white-fill.stories.ts
@@ -19,7 +19,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/button-white-outline.stories.ts b/packages/button/stories/button-white-outline.stories.ts
index 59231db30ed..ea0971accde 100644
--- a/packages/button/stories/button-white-outline.stories.ts
+++ b/packages/button/stories/button-white-outline.stories.ts
@@ -19,7 +19,7 @@ import {
     renderWithIcon,
     renderWithIconOnly,
 } from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
diff --git a/packages/button/stories/index.ts b/packages/button/stories/index.ts
index 5d5a4e8b2cb..025b1fff81d 100644
--- a/packages/button/stories/index.ts
+++ b/packages/button/stories/index.ts
@@ -14,7 +14,7 @@ import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 
 import type { Properties } from './template.js';
 export type { Properties };
@@ -93,12 +93,16 @@ export const makeOverBackground =
     (story: () => TemplateResult): TemplateResult => {
         const color =
             staticColor === 'black'
-                ? 'var(--spectrum-docs-static-black-background-color)'
-                : 'var(--spectrum-docs-static-white-background-color)';
+                ? 'linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255))'
+                : 'linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67))';
         return html`
+            <style>
+                :root {
+                    background-color: ${color};
+                }
+            </style>
             <div
                 style="
-                    background-color: ${color};
                     padding: calc(var(--swc-scale-factor) * 14px) calc(var(--swc-scale-factor) * 20px);
                     display: inline-block;
                 "
@@ -132,7 +136,7 @@ export function renderButtonSet(properties: Properties): TemplateResult {
     const disabled = Object.assign({}, properties, { disabled: true });
     const icon = Object.assign({}, properties, {
         content: html`
-            <sp-icon-help slot="icon"></sp-icon-help>
+            <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
             Click Me
         `,
     });
@@ -150,7 +154,7 @@ export function renderIconButtonSet(properties: Properties): TemplateResult {
     const iconOnly = Object.assign({}, properties, {
         iconOnly: true,
         content: html`
-            <sp-icon-help slot="icon"></sp-icon-help>
+            <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
         `,
     });
     return html`
@@ -177,7 +181,7 @@ export const renderWithIcon = (props: Properties): TemplateResult => {
             ${renderButtonSet({
                 ...props,
                 content: html`
-                    <sp-icon-help slot="icon"></sp-icon-help>
+                    <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
                     Help
                 `,
             })}
@@ -198,7 +202,7 @@ export const renderWithIconOnly = (props: Properties): TemplateResult => {
         ${renderIconButtonSet({
             ...props,
             content: html`
-                <sp-icon-help slot="icon"></sp-icon-help>
+                <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
             `,
         })}
     `;
diff --git a/packages/button/test/benchmark/test-basic.ts b/packages/button/test/benchmark/test-basic.ts
index 9b5a5c34637..482f2b6f9d3 100644
--- a/packages/button/test/benchmark/test-basic.ts
+++ b/packages/button/test/benchmark/test-basic.ts
@@ -11,7 +11,7 @@
  */
 
 import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import { html } from 'lit';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
 
@@ -19,7 +19,7 @@ measureFixtureCreation(html`
     <sp-button>Click Me</sp-button>
     <sp-button disabled>Click Me</sp-button>
     <sp-button>
-        <sp-icon-help slot="icon"></sp-icon-help>
+        <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
         Click Me
     </sp-button>
 `);
diff --git a/packages/card/package.json b/packages/card/package.json
index bb5b93836e2..e387989bb3b 100644
--- a/packages/card/package.json
+++ b/packages/card/package.json
@@ -29,7 +29,6 @@
             "development": "./src/Card.dev.js",
             "default": "./src/Card.js"
         },
-        "./src/card-overrides.css.js": "./src/card-overrides.css.js",
         "./src/card.css.js": "./src/card.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/card/src/card-overrides.css b/packages/card/src/card-overrides.css
deleted file mode 100644
index 423cf1cc610..00000000000
--- a/packages/card/src/card-overrides.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-card-border-color: var(--system-card-border-color);
-    --spectrum-card-border-color-hover: var(--system-card-border-color-hover);
-    --spectrum-card-divider-color: var(--system-card-divider-color);
-    --spectrum-card-preview-background-color: var(--system-card-preview-background-color);
-    --spectrum-card-preview-background-color-hover: var(--system-card-preview-background-color-hover);
-}
diff --git a/packages/card/src/card.css b/packages/card/src/card.css
index be68aa37227..9ea07047c07 100644
--- a/packages/card/src/card.css
+++ b/packages/card/src/card.css
@@ -10,91 +10,192 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-card.css");
-@import url("./card-overrides.css");
+/* Base variables */
+:host {
+    --spectrum-card-background-color: var(--spectrum-background-layer-2-color);
+    --spectrum-card-body-spacing: var(--spectrum-spacing-400);
+    --spectrum-card-body-padding-block-start: 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-block-start: 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-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-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-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-focus-indicator-color: var(--spectrum-focus-indicator-color);
+    --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
+    --spectrum-card-selected-background-opacity: 0.1;
+    --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100);
+    --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300);
+    --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200);
+    --spectrum-card-minimum-width: var(--spectrum-card-minimum-width-quiet);
+    --spectrum-card-border-color: var(--spectrum-blue-700);
 
-:host([href]:not([href=""])) {
+    min-inline-size: var(--spectrum-card-minimum-width);
+    border-width: var(--spectrum-card-border-width);
+    border-style: solid;
+    border-color: var(--spectrum-card-border-color);
+    border-radius: var(--spectrum-card-corner-radius);
+    background-color: var(--spectrum-card-background-color);
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    outline: none;
     cursor: pointer;
+    vertical-align: top;
+    text-decoration: none;
+    user-select: none;
+    touch-action: none;
+    transition:
+        border-color var(--spectrum-animation-duration-100) ease-in-out,
+        box-shadow var(--spectrum-animation-duration-100) ease-in-out;
 }
 
-#like-anchor {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
+:host([selected]) {
+    border-color: var(--highcontrast-card-border-color-selected);
+    background-color: var(--highcontrast-card-background-color-selected);
 }
 
-.action-button {
-    flex-grow: 0;
+:host([quiet]) {
 }
 
-:host([dir="ltr"]) .action-button {
-    margin-left: auto;
+.actions {
+    position: absolute;
+    inset-block-start: var(--spectrum-card-actions-spacing);
+    inset-inline-end: var(--spectrum-card-actions-spacing);
+    inline-size: var(--spectrum-card-actions-size);
+    block-size: var(--spectrum-card-actions-size);
+    border-radius: var(--spectrum-card-actions-border-radius);
+    background-color: rgb(var(--spectrum-card-actions-background-color-rgb), var(--spectrum-card-actions-background-color-opacity));
+    filter: drop-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));
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(8px);
+    transition:
+        transform var(--spectrum-animation-duration-100) ease-in-out,
+        opacity var(--spectrum-animation-duration-100) ease-in-out,
+        visibility 0s linear var(--spectrum-animation-duration-100);
 }
 
-:host([dir="rtl"]) .action-button {
-    margin-right: auto;
+.preview {
+    block-size: var(--spectrum-card-preview-minimum-height);
+    border-block-end-width: var(--spectrum-card-border-width);
+    border-block-end-style: solid;
+    background-color: var(--spectrum-card-preview-background-color);
+    border-block-end-color: var(--spectrum-card-border-color);
+    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));
+    overflow: hidden;
 }
 
-/* The description slot has a psuedo-element that also needs to receive the font styling.
-We need to add the declaration to the slot as well */
-slot[name="description"] {
-    font-size: var(--spectrum-card-subtitle-text-size, var(--spectrum-font-size-50));
+.body {
+    flex: 1;
+    box-sizing: border-box;
+    padding-block-start: var(--spectrum-card-body-padding-block-start);
+    padding-block-end: calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width));
+    padding-inline-start: calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width));
+    padding-inline-end: calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width));
+    min-block-size: 0;
 }
 
-#preview + #cover-photo {
-    display: none;
+.title {
+    margin: 0;
+    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);
 }
 
-#cover-photo ::slotted(*),
-:host(:not([variant="quiet"])) #preview ::slotted(*) {
-    width: 100%;
-    display: block;
+.content {
+    margin-block-start: var(--spectrum-card-content-margin-top);
+    margin-block-end: var(--spectrum-card-content-margin-bottom);
+    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);
+}
 
-    /* Since we're using <img> tags instead of background-image for the cover photo,
-    we need an additional object-fit property to preserve the aspect ratio of the image
-    In spectrum-css, background-size is used */
-    object-fit: cover;
+.footer {
+    border-block-start: var(--spectrum-card-border-width) solid var(--spectrum-card-divider-color);
+    margin-block-start: calc((var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom)) * -1);
+    margin-inline-start: var(--spectrum-card-body-spacing);
+    margin-inline-end: var(--spectrum-card-body-spacing);
+    padding-block-start: var(--spectrum-card-footer-padding-block-start);
+    padding-block-end: calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width));
 }
 
-:host(:not([variant="gallery"])) #preview ::slotted(*) {
-    height: 100%;
+:host([horizontal]) {
+    flex-direction: row;
 }
 
-:host([horizontal]) #preview {
-    width: auto;
+:host([horizontal]) .preview {
+    border-block-end: none;
+    border-inline-end: var(--spectrum-card-border-width) solid var(--spectrum-card-border-color);
+    border-start-end-radius: 0;
+    border-end-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
+
+    padding: var(--spectrum-card-horizontal-preview-padding);
 }
 
-:host([horizontal]) sp-asset {
-    height: inherit;
+:host([horizontal]) .body {
+    padding: var(--spectrum-card-horizontal-body-padding);
 }
 
-sp-popover {
-    align-items: center;
+:host(:hover) {
+    border-color: transparent;
 }
 
-.actions {
-    visibility: hidden;
-    margin: auto;
+:host(:hover) .preview {
+    background-color: var(--spectrum-card-preview-background-color);
 }
 
-/**
- * Allow that the heading element will take specified use of the available width whether
- * "actions" are supplied to the element or not.
- **/
-.title {
-    width: var(--spectrum-card-title-width);
+:host(:hover) .actions {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    transition:
+        transform var(--spectrum-animation-duration-100) ease-in-out,
+        opacity var(--spectrum-animation-duration-100) ease-in-out,
+        visibility 0s linear;
 }
 
-.subtitle {
-    font-family: var(--spectrum-sans-font-family-stack);
-    font-size: var(--spectrum-detail-size-s);
-    font-weight: var(--spectrum-detail-sans-serif-font-weight);
-    line-height: var(--spectrum-detail-line-height);
+:host(:focus-visible) {
+    outline: none;
 }
 
-:host:before,
-:host:after {
-    pointer-events: none;
+:host(:focus-visible):after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: var(--spectrum-card-corner-radius);
+    border: var(--spectrum-card-focus-indicator-width) solid var(--spectrum-card-focus-indicator-color);
 }
 
 :host([variant='quiet']:focus) #preview:after {
diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css
deleted file mode 100644
index fc615e8a651..00000000000
--- a/packages/card/src/spectrum-card.css
+++ /dev/null
@@ -1,442 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --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));
-    --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));
-    --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));
-    --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));
-    --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));
-    --spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1);
-    --spectrum-card-preview-border-width-selected: var(--mod-card-preview-border-width-selected, var(--spectrum-border-width-100));
-    --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));
-}
-
-:host([variant="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));
-}
-
-:host([variant="gallery"]) {
-    --spectrum-card-content-margin-top: var(--spectrum-spacing-100);
-}
-
-:host([drop-target]),
-:host([selected]) {
-    --spectrum-card-border-color: var(--mod-card-border-color-selected, var(--spectrum-blue-700));
-}
-
-:host {
-    box-sizing: border-box;
-    min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width));
-    block-size: 100%;
-    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));
-    background-color: var(--spectrum-card-background-color);
-    flex-direction: column;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    display: inline-flex;
-    position: relative;
-}
-
-:host:after,
-:host:before {
-    content: "";
-    block-size: 100%;
-    inline-size: 100%;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
-
-:host:after {
-    border-radius: var(--spectrum-card-corner-radius);
-    border: 0 solid #0000;
-    margin-block-start: calc(var(--spectrum-card-focus-indicator-width) * -1);
-    margin-inline-start: calc(var(--spectrum-card-focus-indicator-width) * -1);
-    inset-inline-end: 0;
-}
-
-:host(:focus-visible) {
-    outline: none;
-}
-
-:host(:focus-visible):after {
-    border-width: var(--spectrum-card-focus-indicator-width);
-    border-color: var(--spectrum-card-focus-indicator-color);
-}
-
-:host(:focus-visible) #cover-photo,
-:host(:focus-visible) #preview {
-    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));
-}
-
-:host([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));
-}
-
-:host([drop-target]) {
-    --mod-card-background-color: var(--spectrum-background-base-color);
-    box-shadow: 0 0 0 1px var(--spectrum-card-border-color);
-}
-
-:host([focused]) .actions,
-:host([focused]) .checkbox-toggle,
-:host([selected]) .actions,
-:host([selected]) .checkbox-toggle,
-:host(:focus) .actions,
-:host(:focus) .checkbox-toggle {
-    visibility: visible;
-    opacity: 1;
-    pointer-events: all;
-}
-
-.checkbox-toggle {
-    visibility: hidden;
-    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(--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));
-    pointer-events: auto;
-    box-sizing: border-box;
-    transition:
-        transform 0.13s ease-in-out,
-        opacity 0.13s ease-in-out,
-        visibility 0s linear 0.13s;
-    transition:
-        transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
-        opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
-        visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-    position: absolute;
-    inset-block-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));
-    inset-inline-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));
-}
-
-.actions {
-    inset-block-start: var(--spectrum-card-actions-spacing);
-    inset-inline-end: var(--spectrum-card-actions-spacing);
-}
-
-#cover-photo {
-    block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height));
-    box-sizing: border-box;
-    background-position: 50%;
-    background-size: cover;
-    background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color));
-    border-block-end-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
-    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;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-}
-
-.spectrum-Divider {
-    margin: 0;
-}
-
-.content {
-    align-items: center;
-    margin-block-start: var(--spectrum-card-content-margin-top);
-    display: flex;
-}
-
-.body {
-    padding-block-start: var(--spectrum-card-body-padding-block-start);
-    padding-block-end: var(--mod-card-body-padding-block-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-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
-}
-
-#preview {
-    color: var(--spectrum-card-body-font-color);
-    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;
-    align-items: center;
-    display: flex;
-    overflow: hidden;
-}
-
-.title {
-    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);
-    padding-inline-end: var(--spectrum-card-title-padding-right);
-}
-
-.subtitle {
-    color: var(--spectrum-card-title-font-color);
-    text-transform: none;
-    padding-inline-end: var(--spectrum-card-subtitle-padding-right);
-}
-
-.subtitle + ::slotted([slot="description"]):before {
-    content: "•";
-    padding-inline-end: var(--spectrum-card-subtitle-padding-right);
-}
-
-::slotted([slot="description"]) {
-    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);
-}
-
-::slotted([slot="description"]),
-::slotted([slot="footer"]) {
-    line-height: var(--spectrum-card-body-line-height);
-    color: var(--spectrum-card-body-font-color);
-}
-
-::slotted([slot="footer"]) {
-    border-block-start: 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((var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom)) * -1));
-    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-start: var(--spectrum-card-footer-padding-top);
-    padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
-}
-
-.header {
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-}
-
-.action-button {
-    z-index: 1;
-}
-
-:host([variant="quiet"]) #preview {
-    border: var(--spectrum-card-focus-indicator-width) solid transparent;
-}
-
-:host([variant="quiet"][focused]):after,
-:host([variant="quiet"]:focus):after {
-    border-width: 0;
-}
-
-:host([variant="quiet"][focused]) #preview:after,
-:host([variant="quiet"]:focus) #preview:after {
-    border-color: var(--spectrum-card-focus-indicator-color);
-}
-
-:host([variant="quiet"][selected]) #preview {
-    border: var(--spectrum-card-preview-border-width-selected) solid;
-    border-color: var(--spectrum-card-border-color);
-}
-
-:host([variant="gallery"]),
-:host([variant="quiet"]) {
-    --mod-card-border-color-hover: transparent;
-    background-color: initial;
-    border-width: 0;
-    border-color: #0000;
-    border-radius: 0;
-    overflow: visible;
-}
-
-:host([variant="gallery"]):before,
-:host([variant="quiet"]):before {
-    display: none;
-}
-
-:host([variant="gallery"]) #preview,
-:host([variant="quiet"]) #preview {
-    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%;
-    box-sizing: border-box;
-    transition: background-color var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)));
-    flex: 1;
-    margin: 0 auto;
-    position: relative;
-    overflow: visible;
-}
-
-:host([variant="gallery"]) #preview:before,
-:host([variant="quiet"]) #preview:before {
-    content: "";
-    block-size: 100%;
-    inline-size: 100%;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
-
-:host([variant="gallery"]) #preview:after,
-:host([variant="quiet"]) #preview:after {
-    content: "";
-    block-size: 100%;
-    inline-size: 100%;
-    border-radius: calc(var(--spectrum-card-corner-radius) + var(--spectrum-card-focus-indicator-width));
-    border: 0 solid #0000;
-    margin-block-start: calc(var(--spectrum-card-focus-indicator-width) * -1);
-    margin-inline-start: calc(var(--spectrum-card-focus-indicator-width) * -1);
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-}
-
-:host([variant="gallery"][drop-target]),
-:host([variant="quiet"][drop-target]) {
-    background-color: initial;
-    box-shadow: none;
-    border-color: #0000;
-}
-
-:host([variant="gallery"][drop-target]) #preview,
-:host([variant="quiet"][drop-target]) #preview {
-    background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color)));
-    transition: none;
-}
-
-:host([variant="gallery"][drop-target]) #preview:before,
-:host([variant="quiet"][drop-target]) #preview:before {
-    border-color: var(--spectrum-card-focus-indicator-color);
-    box-shadow: 0 0 0 1px var(--spectrum-card-focus-indicator-color);
-}
-
-:host([variant="gallery"][selected]) #preview:before,
-:host([variant="quiet"][selected]) #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)));
-}
-
-:host([variant="gallery"]) .body,
-:host([variant="quiet"]) .body {
-    margin-block-start: var(--spectrum-card-content-margin-top);
-    padding: 0;
-}
-
-:host([variant="gallery"]) ::slotted([slot="footer"]),
-:host([variant="quiet"]) ::slotted([slot="footer"]) {
-    margin-inline: 0;
-}
-
-:host([horizontal]) {
-    flex-direction: row;
-}
-
-@media (hover: hover) {
-    :host(:hover) {
-        --mod-card-border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
-    }
-
-    :host(:hover) .actions,
-    :host(:hover) .checkbox-toggle {
-        visibility: visible;
-        opacity: 1;
-        pointer-events: all;
-    }
-
-    :host([variant="gallery"]:hover) #preview,
-    :host([variant="quiet"]:hover) #preview {
-        background-color: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover)));
-    }
-
-    :host([horizontal]:hover) #preview {
-        border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
-    }
-}
-
-:host([horizontal]) #preview {
-    min-block-size: 0;
-    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));
-    border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-end-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-:host([horizontal]) .content,
-:host([horizontal]) .header {
-    block-size: auto;
-    margin-block-start: 0;
-}
-
-:host([horizontal]) .content {
-    margin-block-end: 0;
-}
-
-:host([horizontal]) .title {
-    padding-inline-end: 0;
-}
-
-:host([horizontal]) .body {
-    padding-block: 0;
-    padding-inline: var(--spectrum-card-horizontal-body-padding);
-    flex-direction: column;
-    flex-shrink: 0;
-    justify-content: center;
-    display: flex;
-}
-
-:host([variant="gallery"]) {
-    min-inline-size: 0;
-}
-
-:host([variant="gallery"]) #preview {
-    border-radius: 0;
-    padding: 0;
-}
diff --git a/packages/card/stories/card.stories.ts b/packages/card/stories/card.stories.ts
index caed449eb80..aa651268c3a 100644
--- a/packages/card/stories/card.stories.ts
+++ b/packages/card/stories/card.stories.ts
@@ -13,7 +13,7 @@ import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/card/sp-card.js';
 import { landscape, portrait } from './images';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-file-txt.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-file-text.js';
 import '@spectrum-web-components/textfield/sp-textfield.js';
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/menu/sp-menu.js';
@@ -329,10 +329,10 @@ export const Horizontal = (args: StoryArgs): TemplateResult => {
             heading="Card Heading"
             subheading="JPG"
         >
-            <sp-icon-file-txt
+            <sp-icon-file-text
                 slot="preview"
                 style="width: 36px; height: 36px;"
-            ></sp-icon-file-txt>
+            ></sp-icon-file-text>
         </sp-card>
     `;
 };
@@ -350,10 +350,10 @@ export const horizontalWithHREF = (args: StoryArgs): TemplateResult => {
             href="https://opensource.adobe.com/spectrum-web-components"
             target="_blank"
         >
-            <sp-icon-file-txt
+            <sp-icon-file-text
                 slot="preview"
                 style="width: 36px; height: 36px;"
-            ></sp-icon-file-txt>
+            ></sp-icon-file-text>
         </sp-card>
     `;
 };
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
index b4d9c5a6e42..eb02cd1f95b 100644
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -37,7 +37,6 @@
             "development": "./src/CheckboxMixin.dev.js",
             "default": "./src/CheckboxMixin.js"
         },
-        "./src/checkbox-overrides.css.js": "./src/checkbox-overrides.css.js",
         "./src/checkbox.css.js": "./src/checkbox.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/checkbox/src/checkbox-overrides.css b/packages/checkbox/src/checkbox-overrides.css
deleted file mode 100644
index f8712c75d91..00000000000
--- a/packages/checkbox/src/checkbox-overrides.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-checkbox-control-color-default: var(--system-checkbox-control-color-default);
-    --spectrum-checkbox-control-color-hover: var(--system-checkbox-control-color-hover);
-    --spectrum-checkbox-control-color-down: var(--system-checkbox-control-color-down);
-    --spectrum-checkbox-control-color-focus: var(--system-checkbox-control-color-focus);
-    --spectrum-checkbox-checkmark-color: var(--system-checkbox-checkmark-color);
-    --spectrum-checkbox-control-corner-radius: var(--system-checkbox-control-corner-radius);
-}
diff --git a/packages/checkbox/src/checkbox.css b/packages/checkbox/src/checkbox.css
index 38bbeb09ea6..aa190417a75 100644
--- a/packages/checkbox/src/checkbox.css
+++ b/packages/checkbox/src/checkbox.css
@@ -10,22 +10,203 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-checkbox.css");
-@import url("./checkbox-overrides.css");
+/* Base variables */
+:host {
+	/* Color */
+	--spectrum-checkbox-checkmark-color: var(--spectrum-gray-25);
+	--spectrum-checkbox-background-color: var(--spectrum-gray-25);
+	--spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default);
+	--spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down);
+	--spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+	--spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default);
+	--spectrum-checkbox-control-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-checkbox-control-color-down: var(--spectrum-neutral-content-color-down);
+	--spectrum-checkbox-control-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+	--spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color);
+	--spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color);
+
+	--spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
+	--spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);
+	--spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1000);
+	--spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000);
+
+	--spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-content-color-default);
+	--spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-content-color-hover);
+	--spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-content-color-down);
+	--spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-content-color-key-focus);
+
+	--spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-content-color-default);
+	--spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-content-color-down);
+
+	/* 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);
+	--spectrum-checkbox-text-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-checkbox-text-font-style: var(--spectrum-default-font-style);
+
+	/* 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-small-size-medium);
+	--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-animation-duration: var(--spectrum-animation-duration-100);
+
+	--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
+	--spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+	--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100);
+	--spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-medium);
+
+	--spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2);
+}
+
+:host([size="s"]) {
+    --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-small);
+    --spectrum-checkbox-font-size: var(--spectrum-font-size-75);
+    --spectrum-checkbox-height: var(--spectrum-component-height-75);
+    --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small);
+    --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75);
+    --spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+    --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75);
+    --spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-small);
+}
+
+:host([size="l"]) {
+    --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-large);
+    --spectrum-checkbox-font-size: var(--spectrum-font-size-200);
+    --spectrum-checkbox-height: var(--spectrum-component-height-200);
+    --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large);
+    --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200);
+    --spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+    --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200);
+    --spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-large);
+}
+
+:host([size="xl"]) {
+    --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-extra-large);
+    --spectrum-checkbox-font-size: var(--spectrum-font-size-300);
+    --spectrum-checkbox-height: var(--spectrum-component-height-300);
+    --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large);
+    --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300);
+    --spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
+    --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300);
+    --spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-extra-large);
+}
 
 :host {
-    display: inline-flex;
-    vertical-align: top;
+	color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)));
+	display: inline-flex;
+	align-items: flex-start;
+	position: relative;
+	min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height));
+	max-inline-size: 100%;
+	vertical-align: top;
+}
+
+:host(:active) .box {
+    border-color: var(--highcontrast-checkbox-highlight-color-down, var(--spectrum-checkbox-control-color-down));
+}
+
+:host(:active) .box.selected {
+    border-color: var(--highcontrast-checkbox-highlight-color-down, var(--spectrum-checkbox-control-selected-color-down));
+}
+
+:host(:active) .label {
+    color: var(--highcontrast-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down));
+}
+
+:host([invalid]) .box {
+    border-color: var(--highcontrast-checkbox-color-default, var(--spectrum-checkbox-invalid-color-default));
+
+    border-color: ButtonText;
+}
+
+:host([invalid]:hover) .box {
+    border-color: var(--highcontrast-checkbox-color-hover, var(--spectrum-checkbox-invalid-color-hover));
+}
+
+:host([checked]) .box,
+:host([indeterminate]) .box {
+    background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-checkmark-color));
+
+    border-color: var(--highcontrast-checkbox-highlight-color-default, var(--spectrum-checkbox-control-selected-color-default));
+    border-width: var(--spectrum-checkbox-selected-border-width);
+}
+
+:host([checked]) .label,
+:host([indeterminate]) .label {
+    color: var(--highcontrast-checkbox-color-default, var(--spectrum-checkbox-content-color-default));
+}
+
+:host([checked]:focus-visible) .box,
+:host([indeterminate]:focus-visible) .box {
+    border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--spectrum-checkbox-control-selected-color-focus));
+}
+
+:host([invalid][checked]) .box,
+:host([invalid][indeterminate]) .box {
+    border-color: var(--highcontrast-checkbox-color-default, var(--spectrum-checkbox-invalid-color-default));
+    border-width: var(--spectrum-checkbox-selected-border-width);
+}
+
+:host([emphasized]) .box {
+    border-color: var(--highcontrast-checkbox-highlight-color-default, var(--spectrum-checkbox-emphasized-color-default));
+
+    border-color: Highlight;
+}
+
+:host([emphasized]:focus-visible) .box {
+    border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--spectrum-checkbox-emphasized-color-focus));
+}
+
+:host([invalid]:focus-visible) .box {
+    border-color: var(--highcontrast-checkbox-color-default, var(--spectrum-checkbox-invalid-color-focus));
+}
+
+:host(:hover) .box {
+    border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-color-hover));
+}
+
+:host(:hover) .box.selected {
+    border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-selected-color-hover));
+}
+
+:host(:hover) .label {
+    color: var(--highcontrast-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover));
+}
+
+:host([checked]:hover) .box,
+:host([indeterminate]:hover) .box {
+    border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-selected-color-hover));
+}
+
+:host([checked]) .box,
+:host([indeterminate]) .box {
+    background-color: Highlight;
+    border-color: Highlight;
 }
 
-:host(:focus) {
-    outline: none;
+:host([checked]) .label,
+:host([indeterminate]) .label {
+    color: ButtonText;
 }
 
-:host([disabled]) {
-    pointer-events: none;
+:host([invalid][checked]) .box,
+:host([invalid][indeterminate]) .box {
+    background-color: ButtonText;
+    border-color: ButtonText;
 }
 
-:host(:empty) label {
-    display: none;
+:host([emphasized][checked]) .box,
+:host([emphasized][indeterminate]) .box {
+    background-color: Highlight;
+    border-color: Highlight;
 }
diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css
deleted file mode 100644
index ac3697cc602..00000000000
--- a/packages/checkbox/src/spectrum-checkbox.css
+++ /dev/null
@@ -1,399 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down);
-    --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
-    --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);
-    --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100);
-    --spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000);
-    --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900);
-    --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000);
-    --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100);
-    --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000);
-    --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default);
-    --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover);
-    --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down);
-    --spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-    --spectrum-checkbox-line-height: var(--spectrum-line-height-100);
-    --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --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);
-    --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100);
-}
-
-:host,
-:host {
-    --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);
-}
-
-:host([size="s"]) {
-    --spectrum-checkbox-font-size: var(--spectrum-font-size-75);
-    --spectrum-checkbox-height: var(--spectrum-component-height-75);
-    --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small);
-    --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75);
-    --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75);
-}
-
-:host([size="l"]) {
-    --spectrum-checkbox-font-size: var(--spectrum-font-size-200);
-    --spectrum-checkbox-height: var(--spectrum-component-height-200);
-    --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large);
-    --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200);
-    --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200);
-}
-
-:host([size="xl"]) {
-    --spectrum-checkbox-font-size: var(--spectrum-font-size-300);
-    --spectrum-checkbox-height: var(--spectrum-component-height-300);
-    --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large);
-    --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300);
-    --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300);
-}
-
-:host {
-    color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)));
-    min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height));
-    max-inline-size: 100%;
-    vertical-align: top;
-    align-items: flex-start;
-    display: inline-flex;
-    position: relative;
-}
-
-:host(:is(:active, [active])) #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-color-down, var(--spectrum-checkbox-control-color-down)));
-}
-
-:host(:is(:active, [active])) #input:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down)));
-}
-
-:host(:is(:active, [active])) #label {
-    color: var(--highcontrast-checkbox-content-color-down, var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down)));
-}
-
-:host([invalid][invalid]) #box:before,
-:host([invalid][invalid]) #input:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default)));
-}
-
-:host([invalid][invalid]) #input:focus-visible + #box:before,
-:host([invalid][invalid][indeterminate]) #input:focus-visible + #box:before {
-    border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
-}
-
-:host([readonly]) #input {
-    cursor: default;
-}
-
-:host([readonly]) #input:checked:disabled + #box:before,
-:host([readonly]) #input:disabled + #box:before {
-    border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));
-    background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)));
-}
-
-:host([readonly]) #input:checked:disabled ~ #label,
-:host([readonly]) #input:disabled ~ #label {
-    color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)));
-}
-
-:host([indeterminate]) #box:before,
-:host([indeterminate]) #input:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));
-    border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width));
-}
-
-:host([indeterminate]) #box #checkmark,
-:host([indeterminate]) #input:checked + #box #checkmark {
-    display: none;
-}
-
-:host([indeterminate]) #box #partialCheckmark,
-:host([indeterminate]) #input:checked + #box #partialCheckmark {
-    opacity: 1;
-    display: block;
-    transform: scale(1);
-}
-
-:host([indeterminate]) #input:focus-visible + #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus)));
-}
-
-:host([invalid][invalid][indeterminate]) #box:before,
-:host([invalid][invalid][indeterminate]) #input:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default)));
-    border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width));
-}
-
-:host([emphasized]) #input:checked + #box:before,
-:host([emphasized][indeterminate]) #box:before,
-:host([emphasized][indeterminate]) #input:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-default, var(--spectrum-checkbox-emphasized-color-default)));
-}
-
-:host([emphasized]) #input:focus-visible:checked + #box:before,
-:host([emphasized][indeterminate]) #input:focus-visible + #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-emphasized-color-focus, var(--spectrum-checkbox-emphasized-color-focus)));
-}
-
-:host([emphasized][invalid][invalid]) #input:focus-visible:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-focus, var(--spectrum-checkbox-invalid-color-focus)));
-}
-
-@media (hover: hover) {
-    :host(:hover) #box:before {
-        border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-color-hover, var(--spectrum-checkbox-control-color-hover)));
-    }
-
-    :host(:hover) #input:checked + #box:before {
-        border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover)));
-    }
-
-    :host(:hover) #label {
-        color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover)));
-    }
-
-    :host([invalid][invalid]:hover) #box:before,
-    :host([invalid][invalid]:hover) #input:checked + #box:before {
-        border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
-    }
-
-    :host([indeterminate]:hover) #box:before,
-    :host([indeterminate]:hover) #input:checked + #box:before {
-        border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover)));
-    }
-
-    :host([invalid][invalid][indeterminate]:hover) #box:before,
-    :host([invalid][invalid][indeterminate]:hover) #input:checked + #box:before {
-        border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
-    }
-
-    :host([invalid][invalid][indeterminate]:hover) #label {
-        color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover)));
-    }
-
-    :host([emphasized][indeterminate]:hover) #box:before,
-    :host([emphasized][indeterminate]:hover) #input:checked + #box:before,
-    :host([emphasized]:hover) #input:checked + #box:before {
-        border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover)));
-    }
-
-    :host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,
-    :host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked + #box:before,
-    :host([emphasized][invalid][invalid]:hover) #input:checked + #box:before {
-        border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
-    }
-
-    :host([emphasized][indeterminate]:hover) #box:before,
-    :host([emphasized][indeterminate]:hover) #input:checked + #box:before,
-    :host([emphasized]:hover) #input:checked + #box:before {
-        border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover)));
-    }
-}
-
-:host([emphasized][indeterminate]:is(:active, [active])) #box:before,
-:host([emphasized][indeterminate]:is(:active, [active])) #input:checked + #box:before,
-:host([emphasized]:is(:active, [active])) #input:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-down, var(--spectrum-checkbox-emphasized-color-down)));
-}
-
-:host([emphasized][invalid][invalid]:is(:active, [active])) #box:before,
-:host([emphasized][invalid][invalid]:is(:active, [active])) #input:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-invalid-color-down, var(--spectrum-checkbox-invalid-color-down)));
-}
-
-:host([emphasized]:focus-visible) #box:before,
-:host([emphasized]:focus-visible) #input:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus)));
-}
-
-#label {
-    text-align: start;
-    font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size));
-    transition: color var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out;
-    line-height: var(--mod-checkbox-line-height, var(--spectrum-checkbox-line-height));
-    margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text));
-    margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control));
-}
-
-#label:lang(ja),
-#label:lang(ko),
-#label:lang(zh) {
-    line-height: var(--mod-checkbox-line-height-cjk, var(--spectrum-checkbox-line-height-cjk));
-}
-
-#input {
-    color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default));
-    box-sizing: border-box;
-    inline-size: 100%;
-    block-size: 100%;
-    opacity: 0;
-    z-index: 1;
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    font-family: inherit;
-    font-size: 100%;
-    line-height: 1.15;
-    position: absolute;
-    overflow: visible;
-}
-
-#input:disabled {
-    cursor: default;
-}
-
-#input:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));
-    background-color: var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color));
-    border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width));
-}
-
-#input:checked + #box #checkmark {
-    opacity: 1;
-    transform: scale(1);
-}
-
-#input:focus-visible + #box:before {
-    border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus)));
-}
-
-#input:focus-visible + #box:after {
-    forced-color-adjust: none;
-    box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thinkness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)));
-    margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1);
-}
-
-#input:focus-visible + #label {
-    color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus)));
-}
-
-#input:focus-visible:checked + #box:before {
-    border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus)));
-}
-
-#box {
-    --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
-    margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0;
-    flex-grow: 0;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    position: relative;
-}
-
-#box,
-#box:before {
-    box-sizing: border-box;
-    inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
-    block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
-}
-
-#box:before {
-    forced-color-adjust: none;
-    border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)));
-    z-index: 0;
-    content: "";
-    border-radius: var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius));
-    border-width: var(--mod-checkbox-border-width, var(--spectrum-checkbox-border-width));
-    transition:
-        border var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out,
-        box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out;
-    border-style: solid;
-    display: block;
-    position: absolute;
-}
-
-#box:after {
-    border-radius: calc(var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)));
-    content: "";
-    margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap));
-    transition:
-        box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out,
-        margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out;
-    display: block;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0;
-    transform: translate(0);
-}
-
-#checkmark,
-#partialCheckmark {
-    color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)));
-    opacity: 0;
-    transition:
-        opacity var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out,
-        transform var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out;
-    transform: scale(0);
-}
-
-#partialCheckmark {
-    display: none;
-}
-
-#input:checked:disabled + #box:before,
-#input:disabled + #box:before {
-    border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled)));
-    background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)));
-}
-
-#input:checked:disabled ~ #label,
-#input:disabled ~ #label {
-    forced-color-adjust: none;
-    color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled)));
-}
-
-@media (forced-colors: active) {
-    #input:focus-visible + #box {
-        forced-color-adjust: none;
-        outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)));
-        outline-offset: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap));
-        outline-style: auto;
-        outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
-    }
-
-    #input:focus-visible + #box:after {
-        box-shadow: 0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)));
-    }
-
-    :host {
-        --highcontrast-checkbox-content-color-default: CanvasText;
-        --highcontrast-checkbox-content-color-hover: CanvasText;
-        --highcontrast-checkbox-content-color-down: CanvasText;
-        --highcontrast-checkbox-content-color-focus: CanvasText;
-        --highcontrast-checkbox-background-color-default: Canvas;
-        --highcontrast-checkbox-color-default: ButtonText;
-        --highcontrast-checkbox-color-hover: ButtonText;
-        --highcontrast-checkbox-color-focus: Highlight;
-        --highcontrast-checkbox-highlight-color-default: Highlight;
-        --highcontrast-checkbox-highlight-color-hover: Highlight;
-        --highcontrast-checkbox-highlight-color-down: Highlight;
-        --highcontrast-checkbox-highlight-color-focus: Highlight;
-        --highcontrast-checkbox-disabled-color-default: GrayText;
-        --highcontrast-checkbox-focus-indicator-color: CanvasText;
-    }
-}
diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json
index f32986661fb..0fa0ec22973 100644
--- a/packages/clear-button/package.json
+++ b/packages/clear-button/package.json
@@ -22,7 +22,6 @@
     "exports": {
         ".": "./src/clear-button.css.js",
         "./package.json": "./package.json",
-        "./src/clear-button-overrides.css.js": "./src/clear-button-overrides.css.js",
         "./src/clear-button.css.js": "./src/clear-button.css.js"
     },
     "scripts": {
diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css
deleted file mode 100644
index 13189584aaa..00000000000
--- a/packages/clear-button/src/clear-button-overrides.css
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-clear-button-background-color: var(--system-clear-button-background-color);
-    --spectrum-clear-button-background-color-hover: var(--system-clear-button-background-color-hover);
-    --spectrum-clear-button-background-color-down: var(--system-clear-button-background-color-down);
-    --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-background-color-key-focus);
-    --spectrum-clear-button-height: var(--system-clear-button-height);
-    --spectrum-clear-button-width: var(--system-clear-button-width);
-    --spectrum-clear-button-padding: var(--system-clear-button-padding);
-    --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color);
-    --spectrum-clear-button-icon-color-hover: var(--system-clear-button-icon-color-hover);
-    --spectrum-clear-button-icon-color-down: var(--system-clear-button-icon-color-down);
-    --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-icon-color-key-focus);
-}
-
-:host([size="s"]) {
-    --spectrum-clear-button-height: var(--system-clear-button-size-s-height);
-    --spectrum-clear-button-width: var(--system-clear-button-size-s-width);
-}
-
-:host([size="l"]) {
-    --spectrum-clear-button-height: var(--system-clear-button-size-l-height);
-    --spectrum-clear-button-width: var(--system-clear-button-size-l-width);
-}
-
-:host([size="xl"]) {
-    --spectrum-clear-button-height: var(--system-clear-button-size-xl-height);
-    --spectrum-clear-button-width: var(--system-clear-button-size-xl-width);
-}
-
-:host .spectrum-ClearButton--quiet {
-    --spectrum-clear-button-background-color: var(--system-clear-button-quiet-background-color);
-    --spectrum-clear-button-background-color-hover: var(--system-clear-button-quiet-background-color-hover);
-    --spectrum-clear-button-background-color-down: var(--system-clear-button-quiet-background-color-down);
-    --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-quiet-background-color-key-focus);
-}
-
-:host([variant="overBackground"]) {
-    --spectrum-clear-button-icon-color: var(--system-clear-button-over-background-icon-color);
-    --spectrum-clear-button-icon-color-hover: var(--system-clear-button-over-background-icon-color-hover);
-    --spectrum-clear-button-icon-color-down: var(--system-clear-button-over-background-icon-color-down);
-    --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-over-background-icon-color-key-focus);
-    --spectrum-clear-button-background-color: var(--system-clear-button-over-background-background-color);
-    --spectrum-clear-button-background-color-hover: var(--system-clear-button-over-background-background-color-hover);
-    --spectrum-clear-button-background-color-down: var(--system-clear-button-over-background-background-color-down);
-    --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-over-background-background-color-key-focus);
-}
-
-:host([disabled]),
-:host([disabled]) {
-    --spectrum-clear-button-icon-color: var(--system-clear-button-disabled-icon-color);
-    --spectrum-clear-button-icon-color-hover: var(--system-clear-button-disabled-icon-color-hover);
-    --spectrum-clear-button-icon-color-down: var(--system-clear-button-disabled-icon-color-down);
-    --spectrum-clear-button-background-color: var(--system-clear-button-disabled-background-color);
-}
diff --git a/packages/clear-button/src/clear-button.css b/packages/clear-button/src/clear-button.css
index 53c4706cea9..33c6edc5b63 100644
--- a/packages/clear-button/src/clear-button.css
+++ b/packages/clear-button/src/clear-button.css
@@ -10,9 +10,155 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-clear-button.css");
-@import url("./clear-button-overrides.css");
+:host {
+	--spectrum-clear-button-height: var(--spectrum-component-height-100);
+	--spectrum-clear-button-width: var(--spectrum-component-height-100);
+	--spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
+	--spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
+	--spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
+	--spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+	--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;
+}
+
+:host([size="s"]) {
+	--spectrum-clear-button-height: var(--spectrum-component-height-75);
+	--spectrum-clear-button-width: var(--spectrum-component-height-75);
+}
+
+:host([size="l"]) {
+	--spectrum-clear-button-height: var(--spectrum-component-height-200);
+	--spectrum-clear-button-width: var(--spectrum-component-height-200);
+}
+
+:host([size="xl"]) {
+	--spectrum-clear-button-height: var(--spectrum-component-height-300);
+	--spectrum-clear-button-width: var(--spectrum-component-height-300);
+}
+
+:host([quiet]) {
+	--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;
+}
+
+:host([static-color="white"]) {
+	--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);
+	--spectrum-clear-button-icon-color: var(--spectrum-white);
+	--spectrum-clear-button-icon-color-hover: var(--spectrum-white);
+	--spectrum-clear-button-icon-color-down: var(--spectrum-white);
+	--spectrum-clear-button-icon-color-key-focus: var(--spectrum-white);
+	--spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
+	--spectrum-clear-button-background-color: transparent;
+}
+
+:host([disabled]),
+:host(:disabled) {
+	--spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
+	--spectrum-clear-button-icon-color-hover: var(--spectrum-disabled-content-color);
+	--spectrum-clear-button-icon-color-down: var(--spectrum-disabled-content-color);
+	--spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
+}
 
 :host {
     box-sizing: border-box;
+	block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
+	inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
+	border-radius: 100%;
+	background-color: var(--mod-clear-button-background-color, transparent);
+	margin: 0;
+	padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
+	border: none;
+	color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
+}
+
+:host(:not([disabled])),
+:host(:not(:disabled)) {
+	cursor: pointer;
+}
+
+:host(:not([disabled]):hover),
+:host(:not(:disabled):hover) {
+	color: var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover));
+}
+
+:host(:not([disabled]):hover) .fill,
+:host(:not(:disabled):hover) .fill {
+	background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
+}
+
+.icon {
+	margin-block: 0;
+	margin-inline: auto;
+	color: inherit;
+}
+
+.fill {
+	background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color));
+	inline-size: 100%;
+	block-size: 100%;
+	border-radius: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+@media (hover: hover) {
+	:host(:not([disabled]):hover),
+	:host(:not(:disabled):hover) {
+		color: var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover));
+	}
+
+	:host(:not([disabled]):hover) .fill,
+	:host(:not(:disabled):hover) .fill {
+		background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
+	}
+}
+
+:host(:not([disabled]):active),
+:host(:not(:disabled):active) {
+	color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down));
+}
+
+:host(:not([disabled]):active) .fill,
+:host(:not(:disabled):active) .fill {
+	background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down));
+}
+
+:host(:not([disabled]):focus-visible),
+:host(:not([disabled]):focus-within),
+:host(:not(:disabled):focus-visible),
+:host(:not(:disabled):focus-within) {
+	color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus));
+}
+
+:host(:not([disabled]):focus-visible) .fill,
+:host(:not([disabled]):focus-within) .fill,
+:host(:not(:disabled):focus-visible) .fill,
+:host(:not(:disabled):focus-within) .fill {
+	background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus));
+}
+
+:host([static-color="white"]:focus-visible) {
+	outline: none;
+}
+
+@media (forced-colors: active) {
+	:host(:not([disabled]):hover),
+	:host(:not(:disabled):hover) {
+		color: Highlight;
+	}
+}
+
+@media (forced-colors: active) and (hover: hover) {
+	:host(:not([disabled]):hover),
+	:host(:not(:disabled):hover) {
+		color: Highlight;
+	}
 }
diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css
deleted file mode 100644
index 912e76ccc78..00000000000
--- a/packages/clear-button/src/spectrum-clear-button.css
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
-    inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
-    cursor: pointer;
-    background-color: initial;
-    background-color: var(--mod-clear-button-background-color, transparent);
-    padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
-    color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
-    border: none;
-    border-radius: 100%;
-    margin: 0;
-}
-
-.icon {
-    margin-block: 0;
-    margin-inline: auto;
-}
-
-@media (hover: hover) {
-    :host(:hover) {
-        color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)));
-    }
-
-    :host(:hover) .fill {
-        background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
-    }
-}
-
-:host(:is(:active, [active])) {
-    color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down));
-}
-
-:host(:is(:active, [active])) .fill {
-    background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down));
-}
-
-:host([focus-within]) .js-focus-within,
-:host(:focus-visible),
-:host:focus-within,
-:host([focus-within]) .js-focus-within {
-    color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus));
-}
-
-:host([focus-within]) .js-focus-within .fill,
-:host(:focus-visible) .fill,
-:host:focus-within .fill,
-:host([focus-within]) .js-focus-within .fill {
-    background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus));
-}
-
-:host([disabled]),
-:host([disabled]) {
-    --spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
-    --spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
-}
-
-.fill {
-    background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color));
-    inline-size: 100%;
-    block-size: 100%;
-    border-radius: 100%;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-:host([variant="overBackground"]:focus-visible) {
-    outline: none;
-}
-
-@media (forced-colors: active) {
-    :host:not(:disabled) {
-        --highcontrast-clear-button-icon-color-hover: Highlight;
-    }
-}
diff --git a/packages/close-button/package.json b/packages/close-button/package.json
index e2f75ae7792..48ba154988d 100644
--- a/packages/close-button/package.json
+++ b/packages/close-button/package.json
@@ -22,7 +22,6 @@
     "exports": {
         ".": "./src/close-button.css.js",
         "./package.json": "./package.json",
-        "./src/close-button-overrides.css.js": "./src/close-button-overrides.css.js",
         "./src/close-button.css.js": "./src/close-button.css.js"
     },
     "scripts": {
diff --git a/packages/close-button/src/close-button-overrides.css b/packages/close-button/src/close-button-overrides.css
deleted file mode 100644
index 9b023fa4f22..00000000000
--- a/packages/close-button/src/close-button-overrides.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-closebutton-background-color-default: var(--system-close-button-background-color-default);
-    --spectrum-closebutton-background-color-hover: var(--system-close-button-background-color-hover);
-    --spectrum-closebutton-background-color-down: var(--system-close-button-background-color-down);
-    --spectrum-closebutton-background-color-focus: var(--system-close-button-background-color-focus);
-}
-
-:host([static-color="white"]) {
-    --spectrum-closebutton-static-background-color-hover: var(--system-close-button-static-white-static-background-color-hover);
-    --spectrum-closebutton-static-background-color-down: var(--system-close-button-static-white-static-background-color-down);
-    --spectrum-closebutton-static-background-color-focus: var(--system-close-button-static-white-static-background-color-focus);
-}
-
-:host([static-color="black"]) {
-    --spectrum-closebutton-static-background-color-hover: var(--system-close-button-static-black-static-background-color-hover);
-    --spectrum-closebutton-static-background-color-down: var(--system-close-button-static-black-static-background-color-down);
-    --spectrum-closebutton-static-background-color-focus: var(--system-close-button-static-black-static-background-color-focus);
-}
diff --git a/packages/close-button/src/close-button.css b/packages/close-button/src/close-button.css
index d14e4515466..1144747fc03 100644
--- a/packages/close-button/src/close-button.css
+++ b/packages/close-button/src/close-button.css
@@ -10,5 +10,321 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-close-button.css");
-@import url("./close-button-overrides.css");
+/* Base variables */
+:host {
+    cursor: pointer;
+    user-select: none;
+    box-sizing: border-box;
+    font-family: var(--spectrum-sans-font-family-stack);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: var(--spectrum-line-height-100);
+    text-transform: none;
+    vertical-align: top;
+    appearance: auto;
+    transition:
+        background var(--spectrum-animation-duration-100) ease-out,
+        border-color var(--spectrum-animation-duration-100) ease-out,
+        color var(--spectrum-animation-duration-100) ease-out,
+        box-shadow var(--spectrum-animation-duration-100) ease-out;
+    border-style: solid;
+    margin: 0;
+    text-decoration: none;
+    overflow: visible;
+}
+
+:host(:focus) {
+    outline: none;
+}
+
+:host([disabled]),
+:host([disabled]) {
+    cursor: default;
+}
+
+:host a {
+    user-select: none;
+    appearance: none;
+}
+
+:host(:focus-visible):after {
+    forced-color-adjust: none;
+    margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap));
+    transition:
+        opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out,
+        margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out;
+
+    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)));
+}
+
+:host([static-color="black"]) {
+    --highcontrast-closebutton-static-background-color-default: ButtonFace;
+    --highcontrast-closebutton-icon-color-default: Highlight;
+    --highcontrast-closebutton-icon-color-disabled: GrayText;
+
+    --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);
+
+    --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);
+}
+
+:host([static-color="white"]) {
+}
+
+:host {
+    --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-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
+
+    --spectrum-closebutton-size: var(--spectrum-component-height-100);
+    --spectrum-closebutton-border-radius: var(--spectrum-component-height-100);
+    block-size: var(--spectrum-closebutton-size);
+    inline-size: var(--spectrum-closebutton-size);
+    color: inherit;
+    border-radius: var(--spectrum-closebutton-border-radius);
+    transition: border-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
+    margin-inline: 0;
+    margin-block-start: 0;
+    justify-content: center;
+    align-items: center;
+    align-self: flex-start;
+    border-width: 0;
+    border-color: #0000;
+    flex-direction: row;
+    padding: 0;
+    display: inline-flex;
+    position: relative;
+}
+
+:host([size="s"]) {
+}
+
+:host,
+:host {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
+
+:host:after {
+    pointer-events: none;
+    content: "";
+    margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1);
+    border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)));
+    transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0;
+}
+
+:host(:focus-visible) {
+    box-shadow: none;
+    outline: none;
+}
+
+:host(:not([disabled])) {
+    background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)));
+}
+
+:host(:not([disabled]):is(:active, [active])) {
+    background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down));
+}
+
+:host(:not([disabled]):is(:active, [active])) .icon {
+    color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)));
+}
+
+:host([focused]:not([disabled])),
+:host(:not([disabled]):focus-visible) {
+    background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus));
+}
+
+:host([focused]:not([disabled])) .icon,
+:host(:not([disabled]):focus-visible) .icon {
+    color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
+}
+
+:host(:not([disabled])) .icon {
+    color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
+}
+
+:host([focused]:not([disabled])) .icon,
+:host(:not([disabled]):focus) .icon {
+    color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
+}
+
+:host([disabled]) {
+    background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default));
+}
+
+:host([disabled]) .icon {
+    color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
+}
+
+:host([static-color="black"]:not([disabled])),
+:host([static-color="white"]:not([disabled])) {
+    background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default)));
+}
+
+:host(:not([disabled]):hover) .icon {
+    color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)));
+}
+
+:host([static-color="black"]:not([disabled]):hover),
+:host([static-color="white"]:not([disabled]):hover) {
+    background-color: var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover));
+}
+
+:host([static-color="black"]:not([disabled]):hover) .icon,
+:host([static-color="white"]:not([disabled]):hover) .icon {
+    color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)));
+}
+
+:host([static-color="black"]:not([disabled]):is(:active, [active])),
+:host([static-color="white"]:not([disabled]):is(:active, [active])) {
+    background-color: var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down));
+}
+
+:host([static-color="black"]:not([disabled]):is(:active, [active])) .icon,
+:host([static-color="white"]:not([disabled]):is(:active, [active])) .icon {
+    color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
+}
+
+:host([static-color="black"][focused]:not([disabled])),
+:host([static-color="black"]:not([disabled]):focus-visible),
+:host([static-color="white"][focused]:not([disabled])),
+:host([static-color="white"]:not([disabled]):focus-visible) {
+    background-color: var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus));
+}
+
+:host([static-color="black"][focused]:not([disabled])) .icon,
+:host([static-color="black"][focused]:not([disabled])) .icon,
+:host([static-color="black"]:not([disabled]):focus) .icon,
+:host([static-color="black"]:not([disabled]):focus-visible) .icon,
+:host([static-color="white"][focused]:not([disabled])) .icon,
+:host([static-color="white"][focused]:not([disabled])) .icon,
+:host([static-color="white"]:not([disabled]):focus) .icon,
+:host([static-color="white"]:not([disabled]):focus-visible) .icon {
+    color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
+}
+
+:host([static-color="black"]:not([disabled])) .icon,
+:host([static-color="white"]:not([disabled])) .icon {
+    color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
+}
+
+:host([static-color="black"][disabled]) .icon,
+:host([static-color="white"][disabled]) .icon {
+    color: var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled));
+}
+
+.icon {
+    margin: 0;
+}
+
+/* base variables */
+:host {
+    /* colors */
+    --spectrum-closebutton-background-color-default: var(--spectrum-gray-100);
+    --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);
+
+    /* focus indicator */
+
+    /* animation */
+
+    /* base styles */
+    cursor: pointer;
+    user-select: none;
+    box-sizing: border-box;
+    font-family: var(--spectrum-sans-font-family-stack);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: var(--spectrum-line-height-100);
+    text-transform: none;
+    vertical-align: top;
+    appearance: auto;
+
+    /* layout */
+    block-size: var(--spectrum-closebutton-size);
+    inline-size: var(--spectrum-closebutton-size);
+    color: inherit;
+    border-radius: var(--spectrum-closebutton-border-radius);
+    margin-inline: 0;
+    margin-block-start: 0;
+    padding: 0;
+    display: inline-flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    align-self: flex-start;
+
+    /* border */
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+
+    /* transitions */
+    transition:
+        background-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) 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-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
+
+    /* other */
+    margin: 0;
+    text-decoration: none;
+    overflow: visible;
+    flex-direction: row;
+    outline: none;
+    background-color: var(--mod-closebutton-background-color, var(--spectrum-closebutton-background-color-default));
+}
+
+/* size variants */
+:host([size="s"]) {
+}
+
+/* static color variants */
+:host([static-color="white"]) {
+}
+
+/* focus styles */
+:host(:focus) {
+    outline: none;
+}
+
+/* states */
+:host(:not([disabled])) {
+    background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)));
+}
+
+/* disabled state */
+:host([disabled]) {
+    cursor: default;
+    background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default));
+}
+
+/* icon styles */
+.icon {
+    block-size: var(--spectrum-closebutton-icon-size);
+    inline-size: var(--spectrum-closebutton-icon-size);
+    overflow: hidden;
+}
+
+/* link styles */
+:host a {
+    user-select: none;
+    appearance: none;
+}
diff --git a/packages/close-button/src/spectrum-close-button.css b/packages/close-button/src/spectrum-close-button.css
deleted file mode 100644
index 9e55dff056a..00000000000
--- a/packages/close-button/src/spectrum-close-button.css
+++ /dev/null
@@ -1,270 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    box-sizing: border-box;
-    font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
-    text-transform: none;
-    vertical-align: top;
-    -webkit-appearance: button;
-    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;
-    border-style: solid;
-    margin: 0;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    overflow: visible;
-}
-
-:host(:focus) {
-    outline: none;
-}
-
-:host([disabled]),
-:host([disabled]) {
-    cursor: default;
-}
-
-:host a {
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-appearance: none;
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-closebutton-icon-color-disabled: GrayText;
-        --highcontrast-closebutton-icon-color-down: Highlight;
-        --highcontrast-closebutton-icon-color-hover: Highlight;
-        --highcontrast-closebutton-icon-color-focus: Highlight;
-        --highcontrast-closebutton-background-color-default: ButtonFace;
-        --highcontrast-closebutton-focus-indicator-color: ButtonText;
-    }
-
-    :host(:focus-visible):after {
-        forced-color-adjust: none;
-        margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap));
-        transition:
-            opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out,
-            margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out;
-    }
-
-    :host([static-color="black"]) {
-        --highcontrast-closebutton-static-background-color-default: ButtonFace;
-        --highcontrast-closebutton-icon-color-default: Highlight;
-        --highcontrast-closebutton-icon-color-disabled: GrayText;
-    }
-
-    :host([static-color="white"]) {
-        --highcontrast-closebutton-static-background-color-default: ButtonFace;
-        --highcontrast-closebutton-icon-color-default: Highlight;
-        --highcontrast-closebutton-icon-color-disabled: Highlight;
-    }
-}
-
-:host {
-    --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);
-    --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);
-    block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size));
-    inline-size: var(--mod-closebutton-width, var(--mod-closebutton-height, var(--spectrum-closebutton-size)));
-    color: inherit;
-    border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius));
-    transition: border-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
-    margin-inline: var(--mod-closebutton-margin-inline);
-    justify-content: center;
-    align-items: center;
-    align-self: var(--mod-closebutton-align-self);
-    border-width: 0;
-    border-color: #0000;
-    flex-direction: row;
-    margin-block-start: var(--mod-closebutton-margin-top);
-    padding: 0;
-    display: inline-flex;
-    position: relative;
-}
-
-:host([size="s"]) {
-    --spectrum-closebutton-size: var(--spectrum-component-height-75);
-    --spectrum-closebutton-border-radius: var(--spectrum-component-height-75);
-}
-
-:host,
-:host {
-    --spectrum-closebutton-size: var(--spectrum-component-height-100);
-    --spectrum-closebutton-border-radius: var(--spectrum-component-height-100);
-}
-
-:host([size="l"]) {
-    --spectrum-closebutton-size: var(--spectrum-component-height-200);
-    --spectrum-closebutton-border-radius: var(--spectrum-component-height-200);
-}
-
-:host([size="xl"]) {
-    --spectrum-closebutton-size: var(--spectrum-component-height-300);
-    --spectrum-closebutton-border-radius: var(--spectrum-component-height-300);
-}
-
-:host([static-color="white"]) {
-    --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);
-}
-
-:host([static-color="black"]) {
-    --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);
-}
-
-:host:after {
-    pointer-events: none;
-    content: "";
-    margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1);
-    border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)));
-    transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0;
-}
-
-:host(:focus-visible) {
-    box-shadow: none;
-    outline: none;
-}
-
-:host(:focus-visible):after {
-    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)));
-}
-
-:host(:not([disabled])) {
-    background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)));
-}
-
-:host(:not([disabled]):is(:active, [active])) {
-    background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down));
-}
-
-:host(:not([disabled]):is(:active, [active])) .icon {
-    color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)));
-}
-
-:host([focused]:not([disabled])),
-:host(:not([disabled]):focus-visible) {
-    background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus));
-}
-
-:host([focused]:not([disabled])) .icon,
-:host(:not([disabled]):focus-visible) .icon {
-    color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
-}
-
-:host(:not([disabled])) .icon {
-    color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
-}
-
-:host([focused]:not([disabled])) .icon,
-:host(:not([disabled]):focus) .icon {
-    color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
-}
-
-:host([disabled]) {
-    background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default));
-}
-
-:host([disabled]) .icon {
-    color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
-}
-
-:host([static-color="black"]:not([disabled])),
-:host([static-color="white"]:not([disabled])) {
-    background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default)));
-}
-
-@media (hover: hover) {
-    :host(:not([disabled]):hover) {
-        background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover));
-    }
-
-    :host(:not([disabled]):hover) .icon {
-        color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)));
-    }
-
-    :host([static-color="black"]:not([disabled]):hover),
-    :host([static-color="white"]:not([disabled]):hover) {
-        background-color: var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover));
-    }
-
-    :host([static-color="black"]:not([disabled]):hover) .icon,
-    :host([static-color="white"]:not([disabled]):hover) .icon {
-        color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
-    }
-}
-
-:host([static-color="black"]:not([disabled]):is(:active, [active])),
-:host([static-color="white"]:not([disabled]):is(:active, [active])) {
-    background-color: var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down));
-}
-
-:host([static-color="black"]:not([disabled]):is(:active, [active])) .icon,
-:host([static-color="white"]:not([disabled]):is(:active, [active])) .icon {
-    color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
-}
-
-:host([static-color="black"][focused]:not([disabled])),
-:host([static-color="black"]:not([disabled]):focus-visible),
-:host([static-color="white"][focused]:not([disabled])),
-:host([static-color="white"]:not([disabled]):focus-visible) {
-    background-color: var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus));
-}
-
-:host([static-color="black"][focused]:not([disabled])) .icon,
-:host([static-color="black"][focused]:not([disabled])) .icon,
-:host([static-color="black"]:not([disabled]):focus) .icon,
-:host([static-color="black"]:not([disabled]):focus-visible) .icon,
-:host([static-color="white"][focused]:not([disabled])) .icon,
-:host([static-color="white"][focused]:not([disabled])) .icon,
-:host([static-color="white"]:not([disabled]):focus) .icon,
-:host([static-color="white"]:not([disabled]):focus-visible) .icon {
-    color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
-}
-
-:host([static-color="black"]:not([disabled])) .icon,
-:host([static-color="white"]:not([disabled])) .icon {
-    color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
-}
-
-:host([static-color="black"][disabled]) .icon,
-:host([static-color="white"][disabled]) .icon {
-    color: var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled));
-}
-
-.icon {
-    margin: 0;
-}
diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json
index f43c6db50ae..b105df3541c 100644
--- a/packages/coachmark/package.json
+++ b/packages/coachmark/package.json
@@ -37,9 +37,7 @@
             "development": "./src/CoachmarkItem.dev.js",
             "default": "./src/CoachmarkItem.js"
         },
-        "./src/coach-indicator-overrides.css.js": "./src/coach-indicator-overrides.css.js",
         "./src/coach-indicator.css.js": "./src/coach-indicator.css.js",
-        "./src/coachmark-overrides.css.js": "./src/coachmark-overrides.css.js",
         "./src/coachmark.css.js": "./src/coachmark.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
@@ -77,13 +75,25 @@
         "component",
         "css"
     ],
-    "dependencies": {
+    "peerDependencies": {
+        "@spectrum-web-components/asset": ">=1",
+        "@spectrum-web-components/base": ">=1",
+        "@spectrum-web-components/button": ">=1",
+        "@spectrum-web-components/button-group": ">=1",
+        "@spectrum-web-components/icon": ">=1",
+        "@spectrum-web-components/icons-ui": ">=1",
+        "@spectrum-web-components/popover": ">=1",
+        "@spectrum-web-components/reactive-controllers": ">=1",
+        "@spectrum-web-components/shared": ">=1"
+    },
+    "devDependencies": {
         "@spectrum-web-components/asset": "1.7.0",
         "@spectrum-web-components/base": "1.7.0",
         "@spectrum-web-components/button": "1.7.0",
         "@spectrum-web-components/button-group": "1.7.0",
         "@spectrum-web-components/icon": "1.7.0",
         "@spectrum-web-components/icons-ui": "1.7.0",
+        "@spectrum-web-components/popover": "1.7.0",
         "@spectrum-web-components/reactive-controllers": "1.7.0",
         "@spectrum-web-components/shared": "1.7.0"
     },
diff --git a/packages/coachmark/src/Coachmark.ts b/packages/coachmark/src/Coachmark.ts
index 7dffc8516eb..4d07a1a96ea 100644
--- a/packages/coachmark/src/Coachmark.ts
+++ b/packages/coachmark/src/Coachmark.ts
@@ -17,7 +17,10 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { when } from '@spectrum-web-components/base/src/directives.js';
+import {
+    classMap,
+    when,
+} from '@spectrum-web-components/base/src/directives.js';
 import coachmarkStyles from './coachmark.css.js';
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js';
@@ -88,6 +91,12 @@ export class Coachmark extends Popover {
     @property({ type: String, attribute: 'secondary-cta' })
     secondaryCTA?: string;
 
+    @property({ type: Boolean, attribute: 'fixed-height', reflect: true })
+    public fixedHeight = false;
+
+    @property({ type: Boolean })
+    public isMobile = false;
+
     // render video and images
     private renderMedia(): TemplateResult {
         const isImage = this.mediaType === MediaType.IMAGE;
@@ -98,7 +107,12 @@ export class Coachmark extends Popover {
         }
         return html`
             <sp-asset id="cover-photo">
-                <div class="image-wrapper">
+                <div
+                    class=${classMap({
+                        'image-wrapper': true,
+                        'fixed-height': this.fixedHeight,
+                    })}
+                >
                     <img
                         class="image"
                         loading="lazy"
@@ -284,7 +298,12 @@ export class Coachmark extends Popover {
     // render action menu
     protected renderActionMenu = (): TemplateResult => {
         return html`
-            <div class="action-menu">
+            <div
+                class=${classMap({
+                    'action-menu': true,
+                    mobile: this.isMobile,
+                })}
+            >
                 <slot name="actions"></slot>
             </div>
         `;
diff --git a/packages/coachmark/src/coach-indicator-overrides.css b/packages/coachmark/src/coach-indicator-overrides.css
deleted file mode 100644
index e3d8279b929..00000000000
--- a/packages/coachmark/src/coach-indicator-overrides.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-coach-indicator-ring-border-size: var(--system-coach-indicator-ring-border-size);
-    --spectrum-coach-indicator-min-inline-size: var(--system-coach-indicator-min-inline-size);
-    --spectrum-coach-indicator-min-block-size: var(--system-coach-indicator-min-block-size);
-    --spectrum-coach-indicator-inline-size: var(--system-coach-indicator-inline-size);
-    --spectrum-coach-indicator-block-size: var(--system-coach-indicator-block-size);
-    --spectrum-coach-indicator-ring-inline-size: var(--system-coach-indicator-ring-inline-size);
-    --spectrum-coach-indicator-ring-block-size: var(--system-coach-indicator-ring-block-size);
-    --spectrum-coach-indicator-ring-dark-color: var(--system-coach-indicator-ring-dark-color);
-    --spectrum-coach-indicator-ring-light-color: var(--system-coach-indicator-ring-light-color);
-    --spectrum-coach-indicator-top: var(--system-coach-indicator-top);
-    --spectrum-coach-indicator-left: var(--system-coach-indicator-left);
-    --spectrum-coach-animation-indicator-ring-duration: var(--system-coach-indicator-coach-animation-indicator-ring-duration);
-    --spectrum-coach-animation-indicator-ring-inner-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple);
-    --spectrum-coach-animation-indicator-ring-center-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple);
-    --spectrum-coach-animation-indicator-ring-outer-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple);
-    --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var(--system-coach-indicator-quiet-animation-ring-inner-delay-multiple);
-    --spectrum-coach-indicator-animation-name: var(--system-coach-indicator-animation-name);
-    --spectrum-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-inner-animation-delay-multiple);
-    --spectrum-coach-indicator-animation-keyframe-0-scale: var(--system-coach-indicator-animation-keyframe-0-scale);
-    --spectrum-coach-indicator-animation-keyframe-0-opacity: var(--system-coach-indicator-animation-keyframe-0-opacity);
-    --spectrum-coach-indicator-animation-keyframe-50-scale: var(--system-coach-indicator-animation-keyframe-50-scale);
-    --spectrum-coach-indicator-animation-keyframe-50-opacity: var(--system-coach-indicator-animation-keyframe-50-opacity);
-    --spectrum-coach-indicator-animation-keyframe-100-scale: var(--system-coach-indicator-animation-keyframe-100-scale);
-    --spectrum-coach-indicator-animation-keyframe-100-opacity: var(--system-coach-indicator-animation-keyframe-100-opacity);
-    --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var(--system-coach-indicator-quiet-animation-keyframe-0-scale);
-}
-
-:host([quiet]) {
-    --spectrum-coach-indicator-quiet-ring-diameter-size: var(--system-coach-indicator-quiet-quiet-ring-diameter-size);
-    --spectrum-coach-indicator-animation-name: var(--system-coach-indicator-quiet-animation-name);
-}
diff --git a/packages/coachmark/src/coach-indicator.css b/packages/coachmark/src/coach-indicator.css
index 88d0851dd21..5f231b6f522 100644
--- a/packages/coachmark/src/coach-indicator.css
+++ b/packages/coachmark/src/coach-indicator.css
@@ -1,8 +1,9 @@
 /**
- * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * 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
@@ -10,9 +11,94 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-coach-indicator.css");
-@import url("./coach-indicator-overrides.css");
-
 :host {
-    display: inline-block;
+	--spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
+	--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-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));
+
+	--spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
+	--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);
+
+	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(--spectrum-coach-indicator-inline-size);
+	block-size: var(--spectrum-coach-indicator-block-size);
+}
+
+:host([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);
+}
+
+:host([static-color="white"]) {
+	--spectrum-coach-indicator-ring-default-color: var(--spectrum-white);
+}
+
+:host([static-color="black"]) {
+	--spectrum-coach-indicator-ring-default-color: var(--spectrum-black);
+}
+
+.ring {
+	display: block;
+	position: absolute;
+
+	border-style: solid;
+	border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size));
+	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, 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-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;
+}
+
+.ring:first-child {
+	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));
+}
+
+.ring: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, -0.66));
+}
+
+.ring: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, -1));
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.ring {
+		animation: none;
+	}
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale(var(--spectrum-coach-indicator-animation-keyframe-scale-initial));
+		opacity: 0;
+	}
+
+	50% {
+		transform: scale(1.5);
+		opacity: 1;
+	}
+
+	100% {
+		transform: scale(2);
+		opacity: 0;
+	}
 }
diff --git a/packages/coachmark/src/coachmark-overrides.css b/packages/coachmark/src/coachmark-overrides.css
deleted file mode 100644
index d46f37f36ec..00000000000
--- a/packages/coachmark/src/coachmark-overrides.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-coachmark-min-width: var(--system-coach-mark-min-width);
-    --spectrum-coachmark-width: var(--system-coach-mark-width);
-    --spectrum-coachmark-max-width: var(--system-coach-mark-max-width);
-    --spectrum-coachmark-media-height: var(--system-coach-mark-media-height);
-    --spectrum-coachmark-media-min-height: var(--system-coach-mark-media-min-height);
-    --spectrum-coachmark-padding: var(--system-coach-mark-padding);
-    --spectrum-coachmark-heading-to-action-button: var(--system-coach-mark-heading-to-action-button);
-    --spectrum-coachmark-header-to-body: var(--system-coach-mark-header-to-body);
-    --spectrum-coachmark-body-to-footer: var(--system-coach-mark-body-to-footer);
-    --spectrum-coachmark-title-color: var(--system-coach-mark-title-color);
-    --spectrum-coachmark-title-font-family: var(--system-coach-mark-title-font-family);
-    --spectrum-coachmark-title-font-style: var(--system-coach-mark-title-font-style);
-    --spectrum-coachmark-title-text-font-weight: var(--system-coach-mark-title-text-font-weight);
-    --spectrum-coachmark-title-font-size: var(--system-coach-mark-title-font-size);
-    --spectrum-coachmark-title-text-line-height: var(--system-coach-mark-title-text-line-height);
-    --spectrum-coachmark-content-font-color: var(--system-coach-mark-content-font-color);
-    --spectrum-coachmark-content-font-weight: var(--system-coach-mark-content-font-weight);
-    --spectrum-coachmark-content-font-family: var(--system-coach-mark-content-font-family);
-    --spectrum-coachmark-content-font-style: var(--system-coach-mark-content-font-style);
-    --spectrum-coachmark-content-line-height: var(--system-coach-mark-content-line-height);
-    --spectrum-coachmark-content-font-size: var(--system-coach-mark-content-font-size);
-    --spectrum-coachmark-step-color: var(--system-coach-mark-step-color);
-    --spectrum-coachmark-step-font-weight: var(--system-coach-mark-step-font-weight);
-    --spectrum-coachmark-step-font-family: var(--system-coach-mark-step-font-family);
-    --spectrum-coachmark-step-font-style: var(--system-coach-mark-step-font-style);
-    --spectrum-coachmark-step-line-height: var(--system-coach-mark-step-line-height);
-    --spectrum-coachmark-step-font-size: var(--system-coach-mark-step-font-size);
-    --spectrum-coachmark-step-to-bottom: var(--system-coach-mark-step-to-bottom);
-    --spectrum-coachmark-popover-border-width: var(--system-coach-mark-popover-border-width);
-    --spectrum-coachmark-popover-corner-radius: var(--system-coach-mark-popover-corner-radius);
-    --spectrum-coachmark-buttongroup-spacing-horizontal: var(--system-coach-mark-buttongroup-spacing-horizontal);
-}
diff --git a/packages/coachmark/src/coachmark.css b/packages/coachmark/src/coachmark.css
index a438acfe0ce..853e40dc920 100644
--- a/packages/coachmark/src/coachmark.css
+++ b/packages/coachmark/src/coachmark.css
@@ -1,8 +1,9 @@
 /**
- * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * 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
@@ -10,56 +11,148 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-coachmark.css");
-@import url("./coachmark-overrides.css");
-
 :host {
-    /** custom to coachmark should be removed once keys component is developed by CSS **/
-    --spectrum-coachmark-dimension-size-175: 14px;
-    --spectrum-coachmark-dimension-size-200: 16px;
-    --spectrum-coachmark-dimension-size-100: 8px;
-    --spectrum-coachmark-dimension-size-50: 4px;
+	--spectrum-coachmark-width: var(--spectrum-coach-mark-width);
+	--spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width);
+	--spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width);
+	--spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
+
+	--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));
+
+	--spectrum-coachmark-media-fixed-height: var(--spectrum-coach-mark-media-height);
+	--spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content);
+	--spectrum-coachmark-image-to-heading: var(--spectrum-coach-mark-edge-to-content);
+	--spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
+	--spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);
+	--spectrum-coachmark-title-color: var(--spectrum-heading-color);
+	--spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font);
+	--spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-font-size);
+	--spectrum-coachmark-title-font-style: var(--spectrum-title-serif-font-style);
+	--spectrum-coachmark-title-text-font-weight: var(--spectrum-title-sans-serif-font-weight);
+	--spectrum-coachmark-title-text-line-height: var(--spectrum-title-line-height);
 
-    /** remove once font fixes are done from css team **/
+	--spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-font-size);
+	--spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+
+	--spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color);
+	--spectrum-coachmark-step-font-style: var(--spectrum-body-serif-font-style);
+	--spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-font-size);
+	--spectrum-coachmark-step-text-font-weight: var(--spectrum-medium-font-weight);
+	--spectrum-coachmark-step-text-line-height: var(--spectrum-line-height-200);
+	--spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
+	--mod-buttongroup-justify-content: flex-end;
+	--mod-popover-border-width: var(--spectrum-border-width-100);
+	--mod-popover-corner-radius: var(--spectrum-corner-radius-large-default);
+	--mod-popover-content-area-spacing: 0;
+	--mod-button-edge-to-visual-only: 9px;
+
+	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));
+}
+
+.image-wrapper {
+	min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-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;
+}
+
+.image-wrapper.fixed-height {
+	block-size: var(--mod-coachmark-media-fixed-height, var(--spectrum-coachmark-media-fixed-height));
+}
 
-    --spectrum-coachmark-content-font-family: var(--spectrum-font-family);
+img {
+	display: block;
+	inline-size: 100%;
+	block-size: 100%;
+	min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height));
+	object-fit: cover;
+	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));
 }
 
-/* These css needs to be added from css team once the keys component is created */
-.keyboard-shortcut {
-    align-items: center;
-    background-color: var(--spectrum-gray-200);
-    border: var(--spectrum-text-underline-gap) solid var(--spectrum-gray-200);
-    border-radius: var(--spectrum-spacing-75);
-    color: var(--spectrum-gray-800);
-    display: inline-flex;
-    flex-flow: row;
-    justify-content: center;
-    min-width: var(--spectrum-badge-min-width);
-    padding-block: var(--spectrum-coachmark-dimension-size-50);
-    padding-inline: var(--spectrum-coachmark-dimension-size-100);
+.header,
+.content,
+.footer {
+	padding-block: 0;
+	padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
 }
 
-.keys {
-    align-items: center;
-    gap: var(--spectrum-coachmark-dimension-size-175) var(--spectrum-coachmark-dimension-size-50);
-    display: flex;
-    flex-flow: wrap;
-    font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family));
+.header {
+	padding-block-start: var(--mod-coachmark-image-to-heading, var(--spectrum-coachmark-image-to-heading));
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body));
 }
 
-.flex-container {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spectrum-coachmark-dimension-size-175) var(--spectrum-coachmark-dimension-size-200);
+.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;
+}
+
+.action-menu {
+	--mod-popover-content-area-spacing: var(--spectrum-popover-content-area-spacing);
+
+	white-space: nowrap;
+	z-index: 1;
+	margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-spacing-300));
+	margin-block: var(--mod-coachmark-action-menu-vertical-offset, var(--spectrum-coachmark-action-menu-vertical-offset));
+	display: var(--spectrum-coachmark-menu-display);
+}
+
+.action-menu.mobile {
+	--spectrum-coachmark-menu-display: var(--spectrum-coachmark-menu-mobile-display);
+}
+
+.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-body-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-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 {
+	display: grid;
+	align-items: end;
+	margin-block-start: 0;
+	padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
+}
+
+.step {
+	justify-self: start;
+	margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)));
+
+	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-text-font-weight));
+	font-family: var(--spectrum-sans-serif-font);
+	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-text-line-height));
+	white-space: nowrap;
 }
 
-.static-item {
-    flex: 0;
-    align-self: flex-start;
+.buttongroup {
+	display: var(--spectrum-coachmark-buttongroup-display);
+	grid-column-start: 2;
 }
 
-#cover-photo {
-    display: contents;
+.buttongroup-mobile {
+	--spectrum-coachmark-buttongroup-display: var(--spectrum-coachmark-buttongroup-mobile-display);
+	--mod-buttongroup-spacing: var(--spectrum-spacing-100);
 }
diff --git a/packages/coachmark/src/spectrum-coach-indicator.css b/packages/coachmark/src/spectrum-coach-indicator.css
deleted file mode 100644
index f646632eb31..00000000000
--- a/packages/coachmark/src/spectrum-coach-indicator.css
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    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));
-    position: relative;
-}
-
-:host([quiet]) {
-    --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
-    --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
-    --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
-    --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
-    --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
-    --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
-    --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-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple));
-}
-
-.ring {
-    border-style: solid;
-    border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size));
-    border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color));
-    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;
-    border-radius: 50%;
-    display: block;
-    position: absolute;
-    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));
-}
-
-.ring:first-child {
-    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)));
-}
-
-.ring: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)));
-}
-
-.ring: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)));
-}
-
-:host([static-color="white"]) .ring {
-    border-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-coach-indicator-ring-light-color));
-}
-
-:host([static-color="black"]) .ring {
-    border-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-coach-indicator-ring-dark-color));
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .ring {
-        animation: none;
-    }
-}
-
-@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);
-    }
-
-    to {
-        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);
-    }
-
-    to {
-        transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
-        opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
-    }
-}
diff --git a/packages/coachmark/src/spectrum-coachmark.css b/packages/coachmark/src/spectrum-coachmark.css
deleted file mode 100644
index b536064dcd1..00000000000
--- a/packages/coachmark/src/spectrum-coachmark.css
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --mod-buttongroup-justify-content: flex-end;
-    --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width);
-    --mod-popover-corner-radius: var(--spectrum-coachmark-popover-corner-radius);
-    --mod-popover-content-area-spacing-vertical: 0;
-    --mod-button-edge-to-visual-only: 9px;
-    --spectrum-coachmark-border-size: var(--mod-popover-border-width);
-    --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
-    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));
-    position: relative;
-}
-
-.buttongroup {
-    display: var(--spectrum-coachmark-buttongroup-display);
-}
-
-.buttongroup-mobile {
-    --mod-buttongroup-spacing-horizontal: var(--spectrum-coachmark-buttongroup-spacing-horizontal);
-    display: var(--spectrum-coachmark-buttongroup-mobile-display);
-}
-
-.menu {
-    display: var(--spectrum-coachmark-menu-display);
-}
-
-.spectrum-CoachMark-menu--mobile {
-    display: var(--spectrum-coachmark-menu-mobile-display);
-}
-
-.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);
-    object-fit: cover;
-    object-position: center;
-    border-start-start-radius: inherit;
-    border-start-end-radius: inherit;
-}
-
-.image {
-    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)));
-    display: block;
-}
-
-.content,
-.footer,
-.header {
-    padding-block: 0;
-    padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
-}
-
-.header {
-    justify-content: space-between;
-    align-items: center;
-    margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body));
-    padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
-    display: flex;
-}
-
-.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));
-}
-
-.content {
-    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-coachmark-body-to-footer));
-}
-
-.footer {
-    align-items: end;
-    margin-block-start: 0;
-    padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
-    display: grid;
-}
-
-.footer .spectrum-ButtonGroup {
-    grid-column-start: 2;
-}
-
-.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;
-}
-
-.step {
-    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-text-font-weight));
-    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-text-line-height));
-    white-space: nowrap;
-    justify-self: start;
-    margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)));
-}
diff --git a/packages/coachmark/stories/coach-indicator-static.stories.ts b/packages/coachmark/stories/coach-indicator-static.stories.ts
index 44f3d083e1a..874f1d0b5f7 100644
--- a/packages/coachmark/stories/coach-indicator-static.stories.ts
+++ b/packages/coachmark/stories/coach-indicator-static.stories.ts
@@ -22,14 +22,18 @@ export default {
 
 export const staticWhite = (): TemplateResult => {
     return html`
-        <sp-coach-indicator static-color="white"></sp-coach-indicator>
-        <sp-coach-indicator quiet static-color="white"></sp-coach-indicator>
+        <div style="display: flex; flex-direction: row; gap: 10px;">
+            <sp-coach-indicator static-color="white"></sp-coach-indicator>
+            <sp-coach-indicator quiet static-color="white"></sp-coach-indicator>
+        </div>
     `;
 };
 
 export const staticBlack = (): TemplateResult => {
     return html`
-        <sp-coach-indicator static-color="black"></sp-coach-indicator>
-        <sp-coach-indicator quiet static-color="black"></sp-coach-indicator>
+        <div style="display: flex; flex-direction: row; gap: 10px;">
+            <sp-coach-indicator static-color="black"></sp-coach-indicator>
+            <sp-coach-indicator quiet static-color="black"></sp-coach-indicator>
+        </div>
     `;
 };
diff --git a/packages/color-area/package.json b/packages/color-area/package.json
index ff484170191..50ed93728a8 100644
--- a/packages/color-area/package.json
+++ b/packages/color-area/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ColorArea.dev.js",
             "default": "./src/ColorArea.js"
         },
-        "./src/color-area-overrides.css.js": "./src/color-area-overrides.css.js",
         "./src/color-area.css.js": "./src/color-area.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/color-area/src/color-area-overrides.css b/packages/color-area/src/color-area-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/color-area/src/color-area-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/color-area/src/color-area.css b/packages/color-area/src/color-area.css
index d6ec84955e4..e5c4a21995d 100644
--- a/packages/color-area/src/color-area.css
+++ b/packages/color-area/src/color-area.css
@@ -10,28 +10,90 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-color-area.css");
-@import url("./color-area-overrides.css");
+.gradient,
+:host([disabled]) {
+    forced-color-adjust: none;
+}
 
 :host {
+    --spectrum-colorarea-border-color: #0000001a;
+    cursor: default;
+    user-select: none;
+    min-inline-size: var(--spectrum-color-area-minimum-width);
+    min-block-size: var(--spectrum-color-area-minimum-height);
+    inline-size: var(--spectrum-color-area-width);
+    block-size: var(--spectrum-color-area-height);
+    box-sizing: border-box;
+    position: relative;
+    border-radius: var(--spectrum-color-area-border-rounding);
+    border: var(--spectrum-color-area-border-width) solid var(--highcontrast-colorarea-border-color, var(--spectrum-colorarea-border-color));
+
     touch-action: none;
 }
 
-:host:before {
+:host([focused]) {
+    z-index: 1;
+}
+
+:host([disabled]) {
     pointer-events: none;
+    background: var(--highcontrast-colorarea-fill-color-disabled, var(--spectrum-disabled-background-color));
+    border: var(--spectrum-color-area-border-width) solid var(--highcontrast-colorarea-border-color-disabled);
 }
 
-.gradient {
-    overflow: hidden;
+:host([disabled]) #handle {
+    display: none;
+}
+
+:host([disabled]) #gradient {
+    transform: translate(calc(var(--spectrum-color-area-width) - var(--spectrum-color-area-border-width)));
+}
+
+#gradient {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: var(--spectrum-color-area-border-rounding);
 }
 
 .handle {
+    inset-block-start: 0;
+
     transform: translate(var(--spectrum-colorarea-default-width), 0);
 }
 
+.handle:dir(rtl),
+:host([dir="rtl"]) .handle {
+    inset-inline-end: 0;
+}
+
+.gradient {
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding));
+
+    overflow: hidden;
+}
+
+.slider {
+    opacity: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    z-index: 0;
+    pointer-events: none;
+    margin: 0;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+}
+
+:host:before {
+    pointer-events: none;
+}
+
 ::slotted(*) {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
 }
 
 :host([dir="rtl"]) .gradient {
diff --git a/packages/color-area/src/spectrum-color-area.css b/packages/color-area/src/spectrum-color-area.css
deleted file mode 100644
index 3a2f44bbf6e..00000000000
--- a/packages/color-area/src/spectrum-color-area.css
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-colorarea-border-color-disabled: GrayText;
-        --highcontrast-colorarea-border-color: Canvas;
-        --highcontrast-colorarea-fill-color-disabled: Canvas;
-    }
-
-    .gradient,
-    :host([disabled]) {
-        forced-color-adjust: none;
-    }
-}
-
-:host {
-    --spectrum-colorarea-border-color: #0000001a;
-    cursor: default;
-    -webkit-user-select: none;
-    user-select: none;
-    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-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)));
-    display: inline-block;
-    position: relative;
-}
-
-:host([focused]) {
-    z-index: 1;
-}
-
-:host([disabled]) {
-    pointer-events: none;
-    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);
-}
-
-:host([disabled]) .gradient {
-    display: none;
-}
-
-.handle {
-    transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-color-area-width)) - var(--spectrum-color-area-border-width)));
-    inset-block-start: 0;
-}
-
-.handle:dir(rtl),
-:host([dir="rtl"]) .handle {
-    inset-inline-end: 0;
-}
-
-.gradient {
-    inline-size: 100%;
-    block-size: 100%;
-    border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding));
-}
-
-.slider {
-    opacity: 0;
-    inline-size: 100%;
-    block-size: 100%;
-    z-index: 0;
-    pointer-events: none;
-    margin: 0;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json
index c3f03438752..47873493af8 100644
--- a/packages/color-handle/package.json
+++ b/packages/color-handle/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ColorHandle.dev.js",
             "default": "./src/ColorHandle.js"
         },
-        "./src/color-handle-overrides.css.js": "./src/color-handle-overrides.css.js",
         "./src/color-handle.css.js": "./src/color-handle.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/color-handle/src/color-handle-overrides.css b/packages/color-handle/src/color-handle-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/color-handle/src/color-handle-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/color-handle/src/color-handle.css b/packages/color-handle/src/color-handle.css
index 7bd40a0b780..83fbe20b952 100644
--- a/packages/color-handle/src/color-handle.css
+++ b/packages/color-handle/src/color-handle.css
@@ -10,18 +10,94 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-color-handle.css");
-
+/* Base variables */
 :host {
+    /* variables */
+    --spectrum-colorhandle-outer-border-color: rgb(var(--spectrum-black-rgb) / var(--spectrum-color-handle-outer-border-opacity));
+    --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);
+    --spectrum-colorhandle-inner-border-color: rgb(var(--spectrum-black-rgb) / var(--spectrum-color-handle-inner-border-opacity));
+    --spectrum-opacity-checkerboard-position: 50%;
+
+    /* layout */
+    z-index: 1;
+    box-sizing: border-box;
+    inline-size: var(--spectrum-color-handle-size);
+    block-size: var(--spectrum-color-handle-size);
+    margin-inline: calc(var(--spectrum-color-handle-size) / 2 * -1);
+    margin-block: calc(var(--spectrum-color-handle-size) / 2 * -1);
+
+    /* borders */
+    border-width: var(--spectrum-color-handle-border-width);
+    border-color: var(--spectrum-white);
+    border-style: solid;
+    border-radius: 100%;
+
+    /* effects */
+    box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-width) var(--spectrum-colorhandle-outer-border-color);
+
+    /* interaction */
     touch-action: none;
+    position: absolute;
+    display: block;
+
+    /* animation */
     transition:
-        inline-size var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)),
-        block-size var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)),
-        border-width var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)),
-        margin-inline var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)),
-        margin-block var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing));
+        inline-size var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
+        block-size var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
+        border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
+        margin-inline var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
+        margin-block var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
+        all var(--spectrum-animation-duration-100) ease-in-out;
 }
 
+/* focus states */
 :host(:focus) {
     outline: none;
 }
+
+:host([focused]),
+:host(:focus-visible) {
+    inline-size: var(--spectrum-color-handle-size-key-focus);
+    block-size: var(--spectrum-color-handle-size-key-focus);
+    margin-inline: calc(var(--spectrum-color-handle-size) * -1);
+    margin-block: calc(var(--spectrum-color-handle-size) * -1);
+    outline: none;
+}
+
+/* hit area */
+:host:after {
+    content: "";
+    inset-inline: calc(50% - var(--spectrum-color-control-track-width) / 2);
+    inset-block: calc(50% - var(--spectrum-color-control-track-width) / 2);
+    inline-size: var(--spectrum-color-control-track-width);
+    block-size: var(--spectrum-color-control-track-width);
+    border-radius: var(--spectrum-colorhandle-hitarea-border-radius, 100%);
+    display: block;
+    position: absolute;
+}
+
+/* inner color display */
+.inner {
+    inline-size: 100%;
+    block-size: 100%;
+    box-shadow: inset 0 0 0 var(--spectrum-color-handle-inner-border-width) var(--spectrum-colorhandle-inner-border-color);
+    background-color: var(--spectrum-picked-color);
+    border-radius: 100%;
+}
+
+/* disabled state */
+:host([disabled]) {
+    pointer-events: none;
+    border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color));
+    background: var(--highcontrast-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color));
+    box-shadow: none;
+}
+
+:host([disabled]) .inner {
+    display: none;
+}
+
+:host([disabled]) {
+    --highcontrast-colorhandle-border-color-disabled: GrayText;
+    --highcontrast-colorhandle-fill-color-disabled: Canvas;
+}
diff --git a/packages/color-handle/src/spectrum-color-handle.css b/packages/color-handle/src/spectrum-color-handle.css
deleted file mode 100644
index 921b73b7829..00000000000
--- a/packages/color-handle/src/spectrum-color-handle.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        forced-color-adjust: none;
-    }
-
-    :host([disabled]) {
-        --highcontrast-colorhandle-border-color-disabled: GrayText;
-        --highcontrast-colorhandle-fill-color-disabled: Canvas;
-    }
-}
-
-:host {
-    --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);
-    --spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity));
-    --mod-opacity-checkerboard-position: 50%;
-    z-index: 1;
-    box-sizing: border-box;
-    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(var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) / 2 * -1);
-    margin-block: calc(var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) / 2 * -1);
-    border-width: var(--mod-colorhandle-border-width, var(--spectrum-color-handle-border-width));
-    border-color: var(--mod-colorhandle-border-color, var(--spectrum-white));
-    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));
-    transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
-    transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-animation-duration-100)) var(--mod-colorhandle-animation-easing, ease-in-out);
-    border-style: solid;
-}
-
-:host,
-:host:after {
-    border-radius: 100%;
-    display: block;
-    position: absolute;
-}
-
-:host:after {
-    content: "";
-    inset-inline: calc(50% - var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2);
-    inset-block: calc(50% - var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2);
-    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%);
-}
-
-:host([focused]),
-:host(:focus-visible) {
-    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(var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) * -1);
-    margin-block: calc(var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) * -1);
-    outline: none;
-}
-
-:host([disabled]) {
-    pointer-events: none;
-    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;
-}
-
-:host([disabled]) .inner {
-    display: none;
-}
-
-.inner {
-    inline-size: 100%;
-    block-size: 100%;
-    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);
-    border-radius: 100%;
-}
diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json
index 52c679ccab2..b5d3e075ccc 100644
--- a/packages/color-loupe/package.json
+++ b/packages/color-loupe/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ColorLoupe.dev.js",
             "default": "./src/ColorLoupe.js"
         },
-        "./src/color-loupe-overrides.css.js": "./src/color-loupe-overrides.css.js",
         "./src/color-loupe.css.js": "./src/color-loupe.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/color-loupe/src/color-loupe-overrides.css b/packages/color-loupe/src/color-loupe-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/color-loupe/src/color-loupe-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/color-loupe/src/color-loupe.css b/packages/color-loupe/src/color-loupe.css
index dcd8f779d4d..9ca5bf1f6f2 100644
--- a/packages/color-loupe/src/color-loupe.css
+++ b/packages/color-loupe/src/color-loupe.css
@@ -10,11 +10,81 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-color-loupe.css");
+/* Base variables */
+:host {
+    inline-size: var(--spectrum-color-loupe-width);
+    block-size: var(--spectrum-color-loupe-height);
+    transform: translateY(var(--spectrum-color-loupe-animation-distance, 8px));
+    opacity: 0;
+    transform-origin: bottom;
+    pointer-events: none;
+    filter: drop-shadow(var(--spectrum-drop-shadow-x) var(--spectrum-color-loupe-drop-shadow-y) var(--spectrum-color-loupe-drop-shadow-blur) var(--spectrum-color-loupe-drop-shadow-color));
+    transition:
+        transform 0.1s ease-in-out,
+        opacity 0.125s ease-in-out;
+    position: absolute;
+    inset-block-end: calc(var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--spectrum-color-loupe-bottom-to-color-handle));
+    inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2);
+}
+
+:host:dir(rtl),
+:host([dir="rtl"]) {
+    inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2 - 1px);
+}
+
+:host([open]) {
+    opacity: 1;
+    transform: translate(0);
+}
+
+:host .is-disabled {
+    opacity: 0;
+}
+
+.spectrum-ColorLoupe-inner-border {
+    fill: var(--spectrum-picked-color);
+    stroke: var(--spectrum-color-loupe-inner-border);
+    stroke-width: var(--spectrum-color-loupe-inner-border-width);
+}
+
+.spectrum-ColorLoupe-outer-border {
+    fill: none;
+    stroke: var(--highcontrast-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border));
+    stroke-width: calc(var(--spectrum-color-loupe-outer-border-width) + 2px);
+}
+
+.spectrum-ColorLoupe-checkerboard-pattern {
+    fill: var(--spectrum-opacity-checkerboard-square-dark);
+}
+
+.spectrum-ColorLoupe-checkerboard-background {
+    fill: var(--spectrum-opacity-checkerboard-square-light);
+}
+
+.spectrum-ColorLoupe-checkerboard-fill {
+    fill: var(--spectrum-colorloupe-checkerboard-fill);
+}
+
+/* sVG styles */
+svg {
+    display: block;
+}
+
+/* inner border */
+.inner {
+    stroke: var(--spectrum-color-loupe-inner-border);
+    stroke-width: var(--spectrum-color-loupe-inner-border-width);
+}
+
+/* outer border */
+.outer {
+    stroke: var(--highcontrast-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border));
+    stroke-width: calc(var(--spectrum-color-loupe-outer-border-width) + 2px);
+}
 
 svg {
-    width: inherit;
-    height: inherit;
+    inline-size: inherit;
+    block-size: inherit;
 }
 
 .loupe-clipped {
@@ -25,8 +95,8 @@ svg {
 
 .opacity-checkerboard {
     position: absolute;
-    top: 2px;
-    left: 2px;
+    inset-block-start: 2px;
+    inset-inline-start: 2px;
     block-size: 100%;
     inline-size: 100%;
 }
diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/packages/color-loupe/src/spectrum-color-loupe.css
deleted file mode 100644
index 98f200dc27d..00000000000
--- a/packages/color-loupe/src/spectrum-color-loupe.css
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    inline-size: var(--spectrum-color-loupe-width);
-    block-size: var(--spectrum-color-loupe-height);
-    transform: translateY(8px);
-    transform: translateY(var(--mod-colorloupe-animation-distance, 8px));
-    opacity: 0;
-    transform-origin: bottom;
-    pointer-events: none;
-    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)));
-    transition:
-        transform 0.1s ease-in-out,
-        opacity 0.125s ease-in-out;
-    position: absolute;
-    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);
-}
-
-:host:dir(rtl),
-:host([dir="rtl"]) {
-    inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2 - 1px);
-}
-
-:host([open]) {
-    opacity: 1;
-    transform: translate(0);
-}
-
-:host .is-disabled {
-    opacity: 0;
-}
-
-.spectrum-ColorLoupe-inner-border {
-    fill: var(--spectrum-picked-color);
-    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-color-loupe-outer-border)));
-    stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-color-loupe-outer-border-width)) + 2px);
-}
-
-.spectrum-ColorLoupe-checkerboard-pattern {
-    fill: var(--spectrum-opacity-checkerboard-square-dark);
-}
-
-.spectrum-ColorLoupe-checkerboard-background {
-    fill: var(--spectrum-opacity-checkerboard-square-light);
-}
-
-.spectrum-ColorLoupe-checkerboard-fill {
-    fill: var(--spectrum-colorloupe-checkerboard-fill);
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-colorloupe-outer-border-color: CanvasText;
-    }
-}
diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json
index e9e86c76f20..fc27b58e75d 100644
--- a/packages/color-slider/package.json
+++ b/packages/color-slider/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ColorSlider.dev.js",
             "default": "./src/ColorSlider.js"
         },
-        "./src/color-slider-overrides.css.js": "./src/color-slider-overrides.css.js",
         "./src/color-slider.css.js": "./src/color-slider.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/color-slider/src/color-slider-overrides.css b/packages/color-slider/src/color-slider-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/color-slider/src/color-slider-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/color-slider/src/color-slider.css b/packages/color-slider/src/color-slider.css
index 7ce8d8147e4..dc272fa709f 100644
--- a/packages/color-slider/src/color-slider.css
+++ b/packages/color-slider/src/color-slider.css
@@ -10,19 +10,95 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-color-slider.css");
-
 :host {
-    --sp-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, rgb(0 255 0) 33%, rgb(0 255 255) 50%, rgb(0 0 255) 67%, rgb(255 0 255) 83%, rgb(255 0 0) 100%;
+    --spectrum-color-slider-border-color-default: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
+    --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
+
+    --spectrum-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, rgb(0 255 0) 33%, rgb(0 255 255) 50%, rgb(0 0 255) 67%, rgb(255 0 255) 83%, rgb(255 0 0) 100%;
+    min-inline-size: var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length));
+    inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length));
+    block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-control-track-width));
+    user-select: none;
+    cursor: default;
+    display: block;
+    position: relative;
 
     touch-action: none;
 }
 
+:host([focused]) {
+    z-index: 2;
+}
+
+:host([disabled]) {
+    pointer-events: none;
+}
+
+:host([disabled]) .gradient {
+    display: none;
+}
+
+:host([vertical]) {
+    min-block-size: var(--mod-color-slider-vertical-minimum-height, var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length)));
+    block-size: var(--mod-color-slider-vertical-height, var(--mod-color-slider-length, var(--spectrum-color-slider-length)));
+    min-inline-size: 0;
+    inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width)));
+    display: inline-block;
+}
+
 :host([vertical]) .handle {
+    inset-inline-start: 50%;
+
     inset-block-start: unset;
     inset-block-end: 0;
 }
 
+.handle {
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+}
+
+.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-default)));
+}
+
+.checkerboard:before {
+    content: "";
+    z-index: 1;
+    box-shadow: inset 0 0 0 var(--mod-color-slider-border-width, var(--spectrum-color-slider-border-width)) var(--spectrum-color-slider-border-color-local);
+    border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding));
+    position: absolute;
+    inset: 0;
+}
+
+:host([disabled]) .checkerboard {
+    background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color)));
+}
+
+.checkerboard,
+.gradient {
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding));
+}
+
+.gradient:dir(rtl),
+:host([dir="rtl"]) .gradient {
+    transform: scaleX(-1);
+}
+
+.slider {
+    opacity: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    z-index: 0;
+    pointer-events: none;
+    margin: 0;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+}
+
 :host([vertical]) .slider {
     /* stylelint-disable-next-line declaration-property-value-no-unknown -- known experimental property */
     appearance: slider-vertical;
@@ -37,6 +113,6 @@
 }
 
 ::slotted(*) {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
 }
diff --git a/packages/color-slider/src/spectrum-color-slider.css b/packages/color-slider/src/spectrum-color-slider.css
deleted file mode 100644
index 39f8ffe3aa3..00000000000
--- a/packages/color-slider/src/spectrum-color-slider.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-color-slider-border-color: CanvasText;
-        --highcontrast-color-slider-border-color-disabled: GrayText;
-        --highcontrast-color-slider-background-color-disabled: Canvas;
-        forced-color-adjust: none;
-    }
-}
-
-:host {
-    --spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
-    --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
-    min-inline-size: var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length));
-    inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length));
-    block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-control-track-width));
-    -webkit-user-select: none;
-    user-select: none;
-    cursor: default;
-    display: block;
-    position: relative;
-}
-
-:host([focused]) {
-    z-index: 2;
-}
-
-:host([disabled]) {
-    pointer-events: none;
-}
-
-:host([disabled]) .gradient {
-    display: none;
-}
-
-:host([vertical]) {
-    min-block-size: var(--mod-color-slider-vertical-minimum-height, var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length)));
-    block-size: var(--mod-color-slider-vertical-height, var(--mod-color-slider-length, var(--spectrum-color-slider-length)));
-    min-inline-size: 0;
-    inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width)));
-    display: inline-block;
-}
-
-:host([vertical]) .handle {
-    inset-block-start: 0;
-    inset-inline-start: 50%;
-}
-
-.handle {
-    inset-block-start: 50%;
-    inset-inline-start: 0;
-}
-
-.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-default)));
-}
-
-.checkerboard:before {
-    content: "";
-    z-index: 1;
-    box-shadow: inset 0 0 0 var(--mod-color-slider-border-width, var(--spectrum-color-slider-border-width)) var(--spectrum-color-slider-border-color-local);
-    border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding));
-    position: absolute;
-    inset: 0;
-}
-
-:host([disabled]) .checkerboard {
-    --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color)));
-    background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color)));
-}
-
-.checkerboard,
-.gradient {
-    inline-size: 100%;
-    block-size: 100%;
-    border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding));
-}
-
-.gradient:dir(rtl),
-:host([dir="rtl"]) .gradient {
-    transform: scaleX(-1);
-}
-
-.slider {
-    opacity: 0;
-    inline-size: 100%;
-    block-size: 100%;
-    z-index: 0;
-    pointer-events: none;
-    margin: 0;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
diff --git a/packages/color-wheel/package.json b/packages/color-wheel/package.json
index 6c9bc27a58e..0fc92456b42 100644
--- a/packages/color-wheel/package.json
+++ b/packages/color-wheel/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ColorWheel.dev.js",
             "default": "./src/ColorWheel.js"
         },
-        "./src/color-wheel-overrides.css.js": "./src/color-wheel-overrides.css.js",
         "./src/color-wheel.css.js": "./src/color-wheel.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/color-wheel/src/color-wheel-overrides.css b/packages/color-wheel/src/color-wheel-overrides.css
deleted file mode 100644
index 16f7377b16a..00000000000
--- a/packages/color-wheel/src/color-wheel-overrides.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-colorwheel-border-color: var(--system-color-wheel-border-color);
-}
diff --git a/packages/color-wheel/src/color-wheel.css b/packages/color-wheel/src/color-wheel.css
index d1e04a61512..fcd93ffd60c 100644
--- a/packages/color-wheel/src/color-wheel.css
+++ b/packages/color-wheel/src/color-wheel.css
@@ -10,30 +10,171 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-color-wheel.css");
-@import url("./color-wheel-overrides.css");
-
+/* Base variables */
 :host {
+    /* layout */
+    --spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
+    --spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
+    --spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
+    --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
+    --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
+    --spectrum-colorwheel-colorarea-container-size: var(--spectrum-colorwheel-colorarea-container-size);
+    --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
+    --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
+    --spectrum-colorwheel-path-borders: var(--spectrum-colorwheel-path-borders);
+    --spectrum-colorwheel-path: var(--spectrum-colorwheel-path);
+    --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
+
+    /* base styles */
+    min-inline-size: var(--spectrum-color-wheel-minimum-width);
+    inline-size: var(--spectrum-colorwheel-width);
+    block-size: var(--spectrum-colorwheel-height);
+    user-select: none;
+    cursor: default;
+    display: inline-block;
+    position: relative;
     touch-action: none;
 }
 
+/* focus states */
 :host(:focus) {
     outline: none;
 }
 
+:host([focused]) {
+    z-index: 1;
+}
+
+/* disabled state */
+:host([disabled]) {
+    pointer-events: none;
+}
+
+/* dragged state */
+:host([dragged]) {
+    z-index: 1;
+}
+
+/* inner container */
+.inner {
+    inline-size: var(--spectrum-colorwheel-colorarea-container-size);
+    block-size: var(--spectrum-colorwheel-colorarea-container-size);
+    margin: auto;
+    display: flex;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0;
+}
+
+/* color area container */
+.colorarea-container {
+    block-size: auto;
+    inline-size: 100%;
+    margin: var(--spectrum-color-wheel-color-area-margin);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+}
+
+/* slider */
+.slider {
+    opacity: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    z-index: 0;
+    pointer-events: none;
+    margin: 0;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+}
+
+/* handle */
+.handle {
+    transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2));
+    inset-block-start: 50%;
+    inset-inline: 50%;
+}
+
+/* border */
+.border {
+    background-color: var(--spectrum-colorwheel-border-color);
+    inline-size: var(--spectrum-colorwheel-width);
+    block-size: var(--spectrum-colorwheel-height);
+    clip-path: path(evenodd, var(--spectrum-colorwheel-path-borders));
+    position: relative;
+}
+
+:host([disabled]) .border {
+    background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
+}
+
+/* color wheel */
+.wheel {
+    inset-block: var(--spectrum-colorwheel-border-width);
+    inset-inline: var(--spectrum-colorwheel-border-width);
+    clip-path: path(evenodd, var(--spectrum-colorwheel-path));
+    background: conic-gradient(from 90deg, red, #ff8000, #ff0, #80ff00, #0f0, #00ff80, #0ff, #0080ff, #00f, #8000ff, #f0f, #ff0080, red);
+    position: absolute;
+}
+
+:host([disabled]) .wheel {
+    pointer-events: none;
+    background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
+}
+
+/* gradient slot */
 ::slotted([slot="gradient"]) {
-    border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
+    border-color: var(--spectrum-colorwheel-border-color);
     border-radius: 100%;
     border-style: solid;
     border-width: var(--_border-width);
     box-sizing: border-box;
-    block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height));
+    block-size: var(--spectrum-colorwheel-height);
     position: relative;
-    inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
+    inline-size: var(--spectrum-colorwheel-width);
     z-index: 0;
 }
 
+/* rTL support */
 :host([dir="rtl"]) .wheel,
 :host([dir="rtl"]) ::slotted([slot="gradient"]) {
     transform: scaleX(-1);
 }
+
+#colorarea-container {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+    inline-size: var(--spectrum-colorwheel-colorarea-container-size);
+    block-size: var(--spectrum-colorwheel-colorarea-container-size);
+}
+
+#colorarea {
+    margin: var(--spectrum-color-wheel-color-area-margin);
+}
+
+#wheel {
+    position: relative;
+    display: inline-block;
+    block-size: var(--spectrum-colorwheel-height);
+    inline-size: var(--spectrum-colorwheel-width);
+}
+
+#border {
+    position: absolute;
+    inset: 0;
+    background-color: var(--spectrum-colorwheel-border-color);
+    clip-path: path(evenodd, var(--spectrum-colorwheel-path-borders));
+}
+
+#gradient {
+    position: absolute;
+    inset: 0;
+    clip-path: path(evenodd, var(--spectrum-colorwheel-path));
+}
+
+:host([disabled]) {
+    border-color: var(--spectrum-colorwheel-border-color);
+}
diff --git a/packages/color-wheel/src/spectrum-color-wheel.css b/packages/color-wheel/src/spectrum-color-wheel.css
deleted file mode 100644
index 27b5aa4d4bb..00000000000
--- a/packages/color-wheel/src/spectrum-color-wheel.css
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-colorwheel-border-color-disabled: GrayText;
-        --highcontrast-colorwheel-fill-color-disabled: Canvas;
-        forced-color-adjust: none;
-    }
-}
-
-:host {
-    --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));
-    --_track-width: var(--spectrum-colorwheel-track-width);
-    --_border-width: var(--spectrum-colorwheel-border-width);
-    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);
-    -webkit-user-select: none;
-    user-select: none;
-    cursor: default;
-    display: block;
-    position: relative;
-}
-
-:host([focused]) {
-    z-index: 1;
-}
-
-:host([disabled]) {
-    pointer-events: none;
-}
-
-:host([dragged]) {
-    z-index: 1;
-}
-
-.inner {
-    inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
-    block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
-    margin: auto;
-    display: flex;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0;
-}
-
-.colorarea-container {
-    block-size: auto;
-    inline-size: 100%;
-    margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin));
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-.slider {
-    opacity: 0;
-    inline-size: 100%;
-    block-size: 100%;
-    z-index: 0;
-    pointer-events: none;
-    margin: 0;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
-
-.handle {
-    transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2));
-    inset-block-start: 50%;
-    inset-inline: 50%;
-}
-
-.border {
-    background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
-    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)));
-    position: relative;
-}
-
-:host([disabled]) .border {
-    background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
-}
-
-.wheel {
-    inset-block: var(--spectrum-colorwheel-border-width);
-    inset-inline: var(--spectrum-colorwheel-border-width);
-    clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)));
-    background: conic-gradient(from 90deg, red, #ff8000, #ff0, #80ff00, #0f0, #00ff80, #0ff, #0080ff, #00f, #8000ff, #f0f, #ff0080, red);
-    position: absolute;
-}
-
-:host([disabled]) .wheel {
-    pointer-events: none;
-    background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
-}
diff --git a/packages/combobox/package.json b/packages/combobox/package.json
index 70414aa2947..902dc4aa95b 100644
--- a/packages/combobox/package.json
+++ b/packages/combobox/package.json
@@ -29,7 +29,6 @@
             "development": "./src/Combobox.dev.js",
             "default": "./src/Combobox.js"
         },
-        "./src/combobox-overrides.css.js": "./src/combobox-overrides.css.js",
         "./src/combobox.css.js": "./src/combobox.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index 48eb87ccc23..956e88365a3 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -24,6 +24,7 @@ import {
     state,
 } from '@spectrum-web-components/base/src/decorators.js';
 import {
+    classMap,
     ifDefined,
     live,
     repeat,
@@ -437,7 +438,10 @@ export class Combobox extends Textfield {
                 @click=${this.toggleOpen}
                 @keydown=${this.handleComboboxKeydown}
                 id="input"
-                class="input"
+                class=${classMap({
+                    input: true,
+                    'is-keyboardFocused': this.focused,
+                })}
                 role="combobox"
                 type="text"
                 .value=${live(this.displayValue)}
@@ -469,23 +473,28 @@ export class Combobox extends Textfield {
         }
 
         return html`
-            ${super.render()}
-            <sp-picker-button
-                aria-controls="listbox-menu"
-                aria-describedby="${this.helpTextId} tooltip"
-                aria-expanded=${this.open ? 'true' : 'false'}
-                aria-label=${ifDefined(this.label || this.appliedLabel)}
-                aria-labelledby="applied-label label"
-                @click=${this.toggleOpen}
-                tabindex="-1"
-                class="button ${this.focused
-                    ? 'focus-visible is-keyboardFocused'
-                    : ''}"
-                ?disabled=${this.disabled}
-                ?focused=${this.focused}
-                ?quiet=${this.quiet}
-                size=${this.size}
-            ></sp-picker-button>
+            <div class="content">
+                ${super.render()}
+                <sp-picker-button
+                    aria-controls="listbox-menu"
+                    aria-describedby="${this.helpTextId} tooltip"
+                    aria-expanded=${this.open ? 'true' : 'false'}
+                    aria-label=${ifDefined(this.label || this.appliedLabel)}
+                    aria-labelledby="applied-label label"
+                    @click=${this.toggleOpen}
+                    tabindex="-1"
+                    class=${classMap({
+                        button: true,
+                        'focus-visible': this.focused,
+                        'is-keyboardFocused': this.focused,
+                        'is-invalid': this.invalid,
+                    })}
+                    ?disabled=${this.disabled}
+                    ?focused=${this.focused}
+                    ?quiet=${this.quiet}
+                    size=${this.size}
+                ></sp-picker-button>
+            </div>
             <sp-overlay
                 ?open=${this.open}
                 .triggerElement=${this.input}
diff --git a/packages/combobox/src/combobox-overrides.css b/packages/combobox/src/combobox-overrides.css
deleted file mode 100644
index 20271af13af..00000000000
--- a/packages/combobox/src/combobox-overrides.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-combobox-border-color-default: var(--system-combobox-border-color-default);
-    --spectrum-combobox-border-color-hover: var(--system-combobox-border-color-hover);
-    --spectrum-combobox-border-color-focus: var(--system-combobox-border-color-focus);
-    --spectrum-combobox-border-color-focus-hover: var(--system-combobox-border-color-focus-hover);
-    --spectrum-combobox-border-color-key-focus: var(--system-combobox-border-color-key-focus);
-    --spectrum-combobox-readonly-input-border-color: var(--system-combobox-readonly-input-border-color);
-    --spectrum-combobox-background-color-disabled: var(--system-combobox-background-color-disabled);
-    --spectrum-combobox-border-color-disabled: var(--system-combobox-border-color-disabled);
-}
diff --git a/packages/combobox/src/combobox.css b/packages/combobox/src/combobox.css
index 10d57422f0d..ae04896f9ba 100644
--- a/packages/combobox/src/combobox.css
+++ b/packages/combobox/src/combobox.css
@@ -1,8 +1,9 @@
 /**
- * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * 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
@@ -10,78 +11,442 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-combobox.css");
-@import url("./combobox-overrides.css");
-
 :host {
-    display: inline-flex;
-    flex-wrap: wrap;
+    --spectrum-combobox-block-size: var(--spectrum-component-height-100);
+    --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
+    --spectrum-combobox-font-size: var(--spectrum-font-size-100);
+    --spectrum-combobox-line-height: var(--spectrum-line-height-100);
+
+    --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button);
+    --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
+    --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
+    --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100);
+    --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100);
+    --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100);
+    --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-100);
+
+    --spectrum-combobox-spacing-to-help-text: var(--spectrum-help-text-to-component);
+
+    --spectrum-combobox-inline-size: var(--spectrum-field-width-medium);
+    --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size));
+    --spectrum-combobox-button-width: var(--spectrum-combobox-block-size);
+
+    --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+    --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-medium);
+    --spectrum-combobox-border-width: var(--spectrum-border-width-200);
+
+    --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component);
+    --spectrum-combobox-spacing-side-label-to-field: var(--spectrum-spacing-200);
+
+    --spectrum-combobox-font-style: var(--spectrum-default-font-style);
+    --spectrum-combobox-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-combobox-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+    --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25);
+
+    --spectrum-combobox-background-color-default: var(--spectrum-gray-25);
+    --spectrum-combobox-border-color-default: var(--spectrum-gray-300);
+    --spectrum-combobox-border-color-hover: var(--spectrum-gray-400);
+    --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-border-color-disabled: var(--spectrum-disabled-border-color);
+
+    --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default);
+    --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
+    --spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
+    --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
+    --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus);
+
+    --spectrum-combobox-background-color-autofill: rgb(var(--spectrum-blue-900-rgb), 0.3);
+
+    --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-medium);
+
+    /* @passthroughs start -- settings for nested Textfield component */
+    --mod-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap));
+    --mod-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--spectrum-combobox-focus-indicator-thickness));
+    --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, var(--spectrum-combobox-background-color-disabled));
+
+    --mod-textfield-font-family: var(--mod-combobox-font-family);
+    --mod-textfield-font-weight: var(--spectrum-combobox-font-weight);
+    --mod-textfield-font-size: var(--spectrum-combobox-font-size);
+    --mod-textfield-font-style: var(--spectrum-combobox-font-style);
+    --mod-textfield-spacing-block-start: var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text));
+    --mod-textfield-spacing-block-end: var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text));
+    --mod-textfield-text-color-default: var(--mod-combobox-font-color-default);
+    --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover);
+    --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus);
+    --mod-textfield-text-color-focus-hover: var(--mod-combobox-font-color-focus-hover);
+    --mod-textfield-text-color-keyboard-focus: var(--mod-combobox-font-color-key-focus);
+    --mod-textfield-text-color-disabled: var(--mod-combobox-font-color-disabled);
+
+    --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, var(--spectrum-combobox-border-color-disabled));
+    --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));
+    --mod-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus));
+    --mod-textfield-corner-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius));
+
+    --mod-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default));
+    --mod-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover));
+    --mod-textfield-border-color-invalid-focus: var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus));
+    --mod-textfield-border-color-invalid-focus-hover: var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover));
+    --mod-textfield-border-color-invalid-keyboard-focus: var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus));
+
+    --mod-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color);
+
+    /* @passthroughs end -- settings for nested Textfield component */
+
+    /* @passthroughs start -- settings for nested Picker Button component */
+    --mod-picker-button-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width));
+    --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default));
+    --mod-picker-button-background-color: var(--mod-combobox-background-color-default);
+    --mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled);
+    --mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled);
+    --mod-picker-button-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
+
+    /* @passthroughs end -- settings for nested Picker Button component */
+
+    /*** Read-only Colors ***/
+    --spectrum-combobox-readonly-input-background-color: var(--spectrum-combobox-background-color-default);
+    --spectrum-combobox-readonly-border-color-invalid-default: var(--spectrum-negative-border-color-default);
+    --spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color);
+    --spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color);
+    --spectrum-combobox-readonly-border-color-disabled: var(--spectrum-disabled-border-color);
+    --spectrum-combobox-readonly-input-border-color: var(--spectrum-combobox-border-color-default);
+
+    /* @passthroughs start -- settings for nested divider component */
+    --mod-divider-inline-minimum-size: auto;
+
+    /* @passthroughs end -- settings for nested divider component */
 }
 
-:host([label-position="inline-start"]) {
-    flex-wrap: nowrap;
+:host([size="s"]) {
+    --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-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
+    --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
+    --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-icon-to-text: var(--spectrum-text-to-visual-75);
+    --spectrum-combobox-inline-size: var(--spectrum-field-width-small);
+    --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-small);
+    --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-small);
 }
 
-:host([readonly]) sp-picker-button {
-    visibility: hidden;
-    pointer-events: none;
+:host([size="l"]) {
+    --spectrum-combobox-block-size: var(--spectrum-component-height-200);
+    --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200);
+    --spectrum-combobox-font-size: var(--spectrum-font-size-200);
+
+    --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
+    --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-200);
+    --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200);
+    --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200);
+    --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200);
+    --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-200);
+    --spectrum-combobox-inline-size: var(--spectrum-field-width-large);
+    --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-large);
+    --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-large);
 }
 
-sp-field-label {
-    display: block;
-    width: 100%;
+:host([size="xl"]) {
+    --spectrum-combobox-block-size: var(--spectrum-component-height-300);
+    --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300);
+    --spectrum-combobox-font-size: var(--spectrum-font-size-300);
+
+    --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
+    --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-300);
+    --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300);
+    --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300);
+    --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300);
+    --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-300);
+    --spectrum-combobox-inline-size: var(--spectrum-field-width-extra-large);
+    --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+    --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
 }
 
-:host([label-position="inline-start"]) sp-field-label {
-    width: auto;
+:host {
+    position: relative;
+    display: inline-grid;
+    inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size));
+    margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox));
 }
 
-sp-popover {
-    max-block-size: var(--sp-combobox-popover-max-block-size);
+#label,
+.content {
+    min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size));
 }
 
-sp-popover:not(sp-overlay sp-popover) {
-    display: none;
+#listbox {
+    --mod-popover-animation-distance: var(--mod-combobox-popover-animation-distance);
 }
 
-.icon {
-    margin: 0;
+#input[readonly].is-keyboardFocused {
+    outline-offset: var(--mod-textfield-focus-indicator-gap);
+    outline: var(--mod-textfield-focus-indicator-width) solid;
+    outline-color: var(--mod-textfield-focus-indicator-color);
 }
 
-/* TODO: The following two selector blocks are meant to override the #textfield:hover styles.
- * #textfield:hover .input was overriding the disabled border colors in S2 foundations, as well
- * as the border colors when a combobox was focused+hovered.
- */
-:host([disabled]) #textfield .input,
-:host([disabled]) #textfield:hover .input {
-    border-color: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
+#input[readonly] {
+    background-color: var(--highcontrast-combobox-background-color-default, var(--spectrum-combobox-readonly-input-background-color));
+    border-color: var(--highcontrast-combobox-readonly-border-color, var(--spectrum-combobox-readonly-input-border-color));
 }
 
-#textfield:hover .input:focus {
-    border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-focus-hover));
+#input[readonly]:hover {
+    background-color: revert;
 }
 
-::slotted([slot="option"]) {
-    display: none;
+#input[readonly][aria-invalid] {
+    border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
 }
 
-.button {
-    bottom: 0;
+#input[readonly][disabled] {
+    background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
+    border-color: var(--mod-combobox-readonly-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled, transparent));
+    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
 }
 
-[hidden] {
-    display: none !important;
+#input[readonly][disabled]:hover {
+    background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
 }
 
-.visually-hidden {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: 0 -1px -1px 0;
-    overflow: hidden;
-    padding: 0;
+/* LOADING INDICATOR */
+sp-progress-circle {
     position: absolute;
-    width: 1px;
-    white-space: nowrap;
+    inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
+    inset-block-start: var(--mod-combobox-block-spacing-edge-to-progress-circle, var(--spectrum-combobox-block-spacing-edge-to-progress-circle));
+    inset-block-end: var(--mod-combobox-block-spacing-edge-to-icon, var(--spectrum-combobox-block-spacing-edge-to-icon));
+    padding-inline-start: var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text));
+}
+
+sp-progress-circle:dir(rtl) {
+    inset-inline-end: inherit;
+    inset-inline-start: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
+}
+
+.label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* PICKER BUTTON */
+sp-picker-button {
+    position: absolute;
+    inset-inline-end: 0;
+}
+
+/* Default */
+sp-picker-button:not(:disabled, .is-invalid, [quiet]) {
+    --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default));
+}
+
+sp-picker-button:not(:disabled, .is-invalid, [quiet]).focus-visible,
+sp-picker-button:not(:disabled, .is-invalid, [quiet]):focus,
+:host(:has(:focus)) sp-picker-button:not(:disabled, .is-invalid, [quiet]) {
+    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus)));
+}
+
+sp-picker-button:not(:disabled, .is-invalid, [quiet]).is-keyboardFocused,
+sp-picker-button:not(:disabled, .is-invalid, [quiet]):focus-visible {
+    --mod-picker-button-border-color: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus));
+}
+
+sp-picker-button:not(:disabled, .is-invalid, [quiet]):hover,
+sp-picker-button:not(:disabled, .is-invalid, [quiet]):active,
+:host(:hover) sp-picker-button:not(:disabled, .is-invalid, [quiet]),
+:host(:has(:active)) sp-picker-button:not(:disabled, .is-invalid, [quiet]) {
+    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)));
+}
+
+sp-picker-button:not(:disabled, .is-invalid, [quiet]):focus:hover,
+sp-picker-button:not(:disabled, .is-invalid, [quiet]).is-focused:hover,
+:host(:hover:has(:focus)) sp-picker-button:not(:disabled, .is-invalid, [quiet]),
+:host(.is-focused:hover) sp-picker-button:not(:disabled, .is-invalid, [quiet]) {
+    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover)));
+}
+
+/* Invalid */
+sp-picker-button.is-invalid:not(:disabled, [quiet]) {
+    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)));
+}
+
+sp-picker-button.is-invalid:not(:disabled, [quiet]).focus-visible,
+sp-picker-button.is-invalid:not(:disabled, [quiet]):focus,
+:host(.is-focused) sp-picker-button.is-invalid:not(:disabled, [quiet]),
+:host(:has(:focus)) sp-picker-button.is-invalid:not(:disabled, [quiet]) {
+    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus)));
+}
+
+sp-picker-button.is-invalid:not(:disabled, [quiet]).is-keyboardFocused,
+sp-picker-button.is-invalid:not(:disabled, [quiet]):focus-visible,
+:host(.is-keyboardFocused) sp-picker-button.is-invalid:not(:disabled, [quiet]),
+:host(:has(:focus)) sp-picker-button.is-invalid:not(:disabled, [quiet]) {
+    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus)));
+}
+
+sp-picker-button.is-invalid:not(:disabled, [quiet]):hover,
+sp-picker-button.is-invalid:not(:disabled, [quiet]):active,
+:host(:hover) sp-picker-button.is-invalid:not(:disabled, [quiet]),
+:host(:has(:active)) sp-picker-button.is-invalid:not(:disabled, [quiet]) {
+    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)));
+}
+
+sp-picker-button.is-invalid:not(:disabled, [quiet]):focus:hover,
+sp-picker-button.is-invalid:not(:disabled, [quiet]).is-focused:hover,
+:host(:hover:has(:focus)) sp-picker-button.is-invalid:not(:disabled, [quiet]),
+:host(.is-focused:hover) sp-picker-button.is-invalid:not(:disabled, [quiet]) {
+    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover)));
+}
+
+.content {
+    display: inline-grid;
+    block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size));
+    position: relative;
+}
+
+/* TEXT INPUT */
+input {
+    background-color: var(--highcontrast-combobox-background-color-default, var(--mod-combobox-textfield-background-color, var(--spectrum-combobox-background-color-default)));
+    padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)));
+    padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)));
+    backface-visibility: hidden;
+    line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-block-size));
+}
+
+input::placeholder {
+    --mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder);
+}
+
+/* Hover */
+:host(:hover) input,
+input:hover,
+input:active {
+    --mod-textfield-background-color: var(--mod-combobox-background-color-hover);
+}
+
+/* Focus */
+:host(:focus) input,
+input:focus {
+    --mod-combobox-border-color-default: var(--spectrum-combobox-border-color-focus);
+    --mod-textfield-background-color: var(--mod-combobox-background-color-focus);
+}
+
+/* Focus + Hover */
+:host(:focus) input:hover,
+input:focus: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 */
+input.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);
+}
+
+/* ****** Invalid & Loading ****** */
+input[aria-invalid],
+input[pending] {
+    padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-alert-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)));
+}
+
+input:lang(ja),
+input:lang(zh),
+input:lang(ko) {
+    --mod-combobox-line-height: var(--mod-combobox-line-height-cjk, var(--spectrum-combobox-line-height-cjk));
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active,
+input:-internal-autofill-selected,
+input[aria-autocomplete] {
+    border-color: var(--spectrum-combobox-border-color-default);
+    box-shadow: 0 0 0 30px var(--highcontrast-combobox-background-color-default, var(--spectrum-combobox-background-color-default)) inset !important;
+    transition: background-color 200ms ease-in-out 0s;
+    -webkit-text-fill-color: var(--highcontrast-textfield-text-color-default, var(--spectrum-neutral-content-color-default)) !important;
+    line-height: var(--spectrum-combobox-line-height);
+}
+
+input:-webkit-autofill::selection,
+input:-webkit-autofill:hover::selection,
+input:-webkit-autofill:focus::selection,
+input:-webkit-autofill:active::selection,
+input:-internal-autofill-selected::selection,
+input[aria-autocomplete]::selection {
+    background-color: var(--spectrum-combobox-background-color-autofill);
+}
+
+#tooltip {
+    inset-block-start: var(--mod-combobox-spacing-to-help-text, var(--spectrum-combobox-spacing-to-help-text));
+}
+
+::slotted([slot="tooltip"]) {
+    inline-size: 100%;
+    word-wrap: break-word;
+    text-wrap: wrap;
+}
+
+/* @todo add side-label markup support */
+:host([side-label]) {
+    #input {
+        inline-size: auto;
+    }
+
+    #label {
+        grid-row: 1;
+        grid-column: 1 / span 1;
+        padding-inline-end: var(--mod-combobox-spacing-side-label-to-field, var(--spectrum-combobox-spacing-side-label-to-field));
+        overflow-wrap: anywhere;
+    }
+
+    .content {
+        grid-row: 1 / span 1;
+        grid-column: 2 / span 1;
+    }
+
+    #tooltip {
+        grid-row: 2 / span 2;
+        grid-column: 2 / span 1;
+    }
+}
+
+/* VALIDATION ICON */
+#invalid {
+    inline-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size));
+    block-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size));
+
+    inset-block-start: var(--mod-combobox-block-spacing-edge-to-icon, var(--spectrum-combobox-block-spacing-edge-to-icon));
+    inset-block-end: var(--mod-combobox-block-spacing-edge-to-icon, var(--spectrum-combobox-block-spacing-edge-to-icon));
+    inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
+    padding-inline-start: var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text));
+}
+
+#input[disabled] .icon,
+#input[readonly] .icon,
+#input[pending] .icon {
+    display: none;
+}
+
+@media (forced-colors: active) {
+    :host {
+        --highcontrast-combobox-border-color-highlight: Highlight;
+        --highcontrast-combobox-border-color-invalid: Highlight;
+        --highcontrast-combobox-background-color-default: Canvas;
+        --highcontrast-combobox-readonly-border-color: CanvasText;
+    }
 }
diff --git a/packages/combobox/src/spectrum-combobox.css b/packages/combobox/src/spectrum-combobox.css
deleted file mode 100644
index cd99f4aa7b9..00000000000
--- a/packages/combobox/src/spectrum-combobox.css
+++ /dev/null
@@ -1,411 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-combobox-inline-size: var(--spectrum-field-width);
-    --spectrum-combobox-block-size: var(--spectrum-component-height-100);
-    --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size));
-    --spectrum-combobox-button-width: var(--spectrum-combobox-block-size);
-    --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-combobox-font-size: var(--spectrum-font-size-100);
-    --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium);
-    --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
-    --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium);
-    --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium);
-    --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100);
-    --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100);
-    --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100);
-    --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100);
-    --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100);
-    --spectrum-combobox-border-width: var(--spectrum-border-width-100);
-    --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component);
-    --spectrum-combobox-font-style: var(--spectrum-default-font-style);
-    --spectrum-combobox-line-height: var(--spectrum-line-height-100);
-    --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default);
-    --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
-    --spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
-    --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
-    --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus);
-    --mod-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap));
-    --mod-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--spectrum-combobox-focus-indicator-thickness));
-    --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, var(--spectrum-combobox-background-color-disabled));
-    --mod-textfield-font-family: var(--mod-combobox-font-family);
-    --mod-textfield-font-weight: var(--mod-combobox-font-weight);
-    --mod-textfield-text-color-default: var(--mod-combobox-font-color-default);
-    --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover);
-    --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus);
-    --mod-textfield-text-color-focus-hover: var(--mod-combobox-font-color-focus-hover);
-    --mod-textfield-text-color-keyboard-focus: var(--mod-combobox-font-color-key-focus);
-    --mod-textfield-text-color-disabled: var(--mod-combobox-font-color-disabled);
-    --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, var(--spectrum-combobox-border-color-disabled));
-    --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));
-    --mod-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus));
-    --mod-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default));
-    --mod-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover));
-    --mod-textfield-border-color-invalid-focus: var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus));
-    --mod-textfield-border-color-invalid-focus-hover: var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover));
-    --mod-textfield-border-color-invalid-keyboard-focus: var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus));
-    --mod-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color);
-    --mod-picker-button-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width));
-    --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default));
-    --mod-picker-button-background-color: var(--mod-combobox-background-color-default);
-    --mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled);
-    --mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled);
-    --mod-picker-button-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
-    --spectrum-combobox-readonly-input-background-color: var(--spectrum-gray-50);
-    --spectrum-combobox-readonly-border-color-invalid-default: var(--spectrum-negative-border-color-default);
-    --spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color);
-    --spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-combobox-readonly-border-color-disabled: var(--spectrum-disabled-border-color);
-}
-
-:host,
-:host {
-    --spectrum-combobox-block-size: var(--spectrum-component-height-100);
-    --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-combobox-font-size: var(--spectrum-font-size-100);
-    --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium);
-    --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
-    --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium);
-    --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium);
-    --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100);
-    --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100);
-    --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100);
-    --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100);
-}
-
-:host([size="s"]) {
-    --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);
-}
-
-:host([size="l"]) {
-    --spectrum-combobox-block-size: var(--spectrum-component-height-200);
-    --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200);
-    --spectrum-combobox-font-size: var(--spectrum-font-size-200);
-    --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large);
-    --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
-    --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large);
-    --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large);
-    --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200);
-    --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200);
-    --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200);
-    --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200);
-}
-
-:host([size="xl"]) {
-    --spectrum-combobox-block-size: var(--spectrum-component-height-300);
-    --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300);
-    --spectrum-combobox-font-size: var(--spectrum-font-size-300);
-    --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large);
-    --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
-    --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large);
-    --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large);
-    --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300);
-    --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300);
-    --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300);
-    --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300);
-}
-
-:host([quiet]) {
-    --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--spectrum-combobox-block-size));
-    --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet);
-    --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);
-    --mod-picker-button-background-color-quiet: transparent;
-    --mod-picker-button-border-color-quiet: transparent;
-}
-
-:host([quiet][size="s"]) {
-    --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small);
-}
-
-:host([quiet]) {
-    --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium);
-}
-
-:host([quiet][size="l"]) {
-    --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large);
-}
-
-:host([quiet][size="xl"]) {
-    --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large);
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-combobox-border-color-highlight: Highlight;
-        --highcontrast-combobox-border-color-invalid: Highlight;
-    }
-
-    .button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill {
-        forced-color-adjust: none;
-    }
-
-    .button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon {
-        color: initial;
-    }
-}
-
-:host {
-    inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size));
-    min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size));
-    block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size));
-    border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius));
-    flex-flow: row;
-    margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox));
-    display: inline-flex;
-    position: relative;
-}
-
-.spectrum-Popover.is-open {
-    transform: translateY(var(--mod-combobox-spacing-edge-to-menu, var(--spectrum-combobox-spacing-edge-to-menu)));
-}
-
-:host([keyboard-focused]) .is-readOnly:not(.spectrum-Combobox--quiet) #textfield #input {
-    outline-offset: var(--mod-textfield-focus-indicator-gap);
-    outline: var(--mod-textfield-focus-indicator-width) solid;
-    outline-color: var(--mod-textfield-focus-indicator-color);
-}
-
-:host .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only {
-    background-color: var(--spectrum-combobox-readonly-input-background-color);
-    border-color: var(--spectrum-combobox-readonly-input-border-color);
-}
-
-:host([invalid]) .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only {
-    border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
-}
-
-:host([disabled]) .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only {
-    background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
-    border-color: #0000;
-    border-color: var(--mod-combobox-readonly-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled, transparent));
-    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
-}
-
-.progress-circle {
-    position: absolute;
-    inset-block-start: var(--mod-combobox-block-spacing-edge-to-progress-circle, var(--spectrum-combobox-block-spacing-edge-to-progress-circle));
-    inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert));
-    inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
-}
-
-.progress-circle:dir(rtl),
-:host([dir="rtl"]) .progress-circle {
-    inset-inline-start: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
-    inset-inline-end: inherit;
-}
-
-.button {
-    position: absolute;
-    inset-inline-end: calc(var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)) * -1);
-}
-
-.button:not(:disabled, .is-invalid, [quiet]) {
-    --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default));
-}
-
-:host([focused]) .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet),
-.button:not(:disabled, .is-invalid, [quiet]):focus,
-:host([focused]) .button:not(:disabled, .is-invalid, [quiet]),
-:host:has(:focus) .button:not(:disabled, .is-invalid, [quiet]) {
-    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus)));
-}
-
-:host([keyboard-focused]) .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet),
-.button:not(:disabled, .is-invalid, [quiet]):focus-visible,
-:host([keyboard-focused]) .button:not(:disabled, .is-invalid, [quiet]) {
-    --mod-picker-button-border-color: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus));
-}
-
-.button:not(:disabled, .is-invalid, [quiet]):active,
-:host:has(:active) .button:not(:disabled, .is-invalid, [quiet]) {
-    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)));
-}
-
-:host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet) {
-    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)));
-}
-
-:host([invalid][focused]) .button:not(:disabled, .spectrum-PickerButton--quiet),
-:host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):focus,
-:host([focused][invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet),
-:host([invalid]):has(:focus) .button:not(:disabled, .spectrum-PickerButton--quiet) {
-    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus)));
-}
-
-:host([invalid][keyboard-focused]) .button:not(:disabled, .spectrum-PickerButton--quiet),
-:host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):focus-visible,
-:host([keyboard-focused][invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet) {
-    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus)));
-}
-
-:host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):active,
-:host([invalid]):has(:active) .button:not(:disabled, .spectrum-PickerButton--quiet) {
-    --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)));
-}
-
-#textfield {
-    inline-size: 100%;
-}
-
-#input {
-    backface-visibility: hidden;
-    line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-line-height));
-    font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size));
-    font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style));
-    padding-block-start: calc(var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)));
-    padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)));
-    padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)));
-    padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2);
-}
-
-#input::placeholder {
-    --mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder);
-}
-
-#input:active {
-    --mod-textfield-background-color: var(--mod-combobox-background-color-hover);
-}
-
-#input:focus,
-:host([focused]) #textfield #input {
-    --mod-combobox-border-color-default: var(--spectrum-combobox-border-color-focus);
-    --mod-textfield-background-color: var(--mod-combobox-background-color-focus);
-}
-
-@media (hover: hover) {
-    :host .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only:hover {
-        background-color: revert;
-    }
-
-    :host([disabled]) .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only:hover {
-        background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
-    }
-
-    .button:not(:disabled, .is-invalid, [quiet]):hover,
-    :host(:hover) .button:not(:disabled, .is-invalid, [quiet]) {
-        --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)));
-    }
-
-    :host([focused]) .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover,
-    .button:not(:disabled, .is-invalid, [quiet]):focus:hover,
-    :host([focused]:hover) .button:not(:disabled, .is-invalid, [quiet]),
-    :host(:hover):has(:focus) .button:not(:disabled, .is-invalid, [quiet]) {
-        --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover)));
-    }
-
-    :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):hover,
-    :host([invalid]:hover) .button:not(:disabled, .spectrum-PickerButton--quiet) {
-        --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)));
-    }
-
-    :host([invalid][focused]) .button:not(:disabled, .spectrum-PickerButton--quiet):hover,
-    :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):focus:hover,
-    :host([focused][invalid]:hover) .button:not(:disabled, .spectrum-PickerButton--quiet),
-    :host([invalid]:hover):has(:focus) .button:not(:disabled, .spectrum-PickerButton--quiet) {
-        --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover)));
-    }
-
-    #input:hover,
-    #textfield:hover #input {
-        --mod-textfield-background-color: var(--mod-combobox-background-color-hover);
-    }
-
-    #input:focus:hover,
-    :host([focused]) #textfield #input:hover {
-        --mod-combobox-border-color-default: var(--spectrum-combobox-border-color-focus-hover);
-        --mod-textfield-background-color: var(--mod-combobox-background-color-focus-hover);
-    }
-}
-
-:host([keyboard-focused]) #textfield #input {
-    --mod-combobox-border-color-default: var(--spectrum-combobox-border-color-key-focus);
-    --mod-textfield-background-color: var(--mod-combobox-background-color-key-focus);
-}
-
-:host([invalid]) #textfield #input,
-:host([pending]) #textfield #input {
-    padding-inline-end: calc(
-        var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)) -
-            var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2
-    );
-}
-
-:host([invalid]) #textfield .icon {
-    inline-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size));
-    block-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size));
-    inset-block-start: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert));
-    inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert));
-    inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
-}
-
-:host([disabled]) #textfield .icon,
-:host([pending]) #textfield .icon,
-#textfield.is-readOnly .icon {
-    display: none;
-}
-
-:host([quiet]) {
-    border-radius: 0;
-}
-
-:host([quiet][invalid]) #textfield .icon {
-    inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width));
-}
-
-:host([quiet]) #textfield.is-readOnly #input:read-only {
-    border-block-end: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) solid var(--mod-combobox-readonly-input-border-color, var(--spectrum-combobox-readonly-input-border-color));
-}
-
-:host([quiet][invalid]) #textfield.is-readOnly > #input:read-only {
-    border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
-}
-
-:host([quiet][disabled]) #textfield.is-readOnly #input:read-only {
-    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
-    border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled));
-}
-
-:host([quiet]) #input {
-    border-block-end-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width));
-    padding-block-start: var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text));
-    padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)));
-    padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text));
-    padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)));
-}
-
-:host([quiet][invalid]) #textfield #input,
-:host([quiet][pending]) #textfield #input {
-    padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)));
-}
diff --git a/packages/contextual-help/package.json b/packages/contextual-help/package.json
index 3d13db524e1..23f1f5d0ac3 100644
--- a/packages/contextual-help/package.json
+++ b/packages/contextual-help/package.json
@@ -29,7 +29,6 @@
             "development": "./src/ContextualHelp.dev.js",
             "default": "./src/ContextualHelp.js"
         },
-        "./src/contextual-help-overrides.css.js": "./src/contextual-help-overrides.css.js",
         "./src/contextual-help.css.js": "./src/contextual-help.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/contextual-help/src/ContextualHelp.ts b/packages/contextual-help/src/ContextualHelp.ts
index 6a34ed2550c..308f0ae3d16 100644
--- a/packages/contextual-help/src/ContextualHelp.ts
+++ b/packages/contextual-help/src/ContextualHelp.ts
@@ -18,8 +18,8 @@ import {
 } from '@spectrum-web-components/base';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-outline.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-outline.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-circle.js';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import type { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';
@@ -152,14 +152,14 @@ export class ContextualHelp extends SpectrumElement {
             >
                 ${this.variant === 'help'
                     ? html`
-                          <sp-icon-help-outline
+                          <sp-icon-help-circle
                               slot="icon"
-                          ></sp-icon-help-outline>
+                          ></sp-icon-help-circle>
                       `
                     : html`
-                          <sp-icon-info-outline
+                          <sp-icon-info-circle
                               slot="icon"
-                          ></sp-icon-info-outline>
+                          ></sp-icon-info-circle>
                       `}
             </sp-action-button>
             <sp-overlay
diff --git a/packages/contextual-help/src/contextual-help-overrides.css b/packages/contextual-help/src/contextual-help-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/contextual-help/src/contextual-help-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/contextual-help/src/contextual-help.css b/packages/contextual-help/src/contextual-help.css
index 988e8ab3be2..cd7ec4c9dcd 100644
--- a/packages/contextual-help/src/contextual-help.css
+++ b/packages/contextual-help/src/contextual-help.css
@@ -10,13 +10,33 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-contextual-help.css");
-@import url("./contextual-help-overrides.css");
+.popover {
+    min-inline-size: var(--spectrum-contextual-help-minimum-width);
+    padding-block: var(--spectrum-spacing-400);
+    padding-inline: var(--spectrum-spacing-400);
+    font-size: var(--spectrum-contextual-help-body-size);
+    color: var(--highcontrast-contextual-help-body-color, var(--spectrum-body-color));
+    max-inline-size: var(--spectrum-contextual-help-popover-maximum-width);
+    position: relative;
+}
 
-:host {
-    display: inline-block;
+.popover .body,
+.popover ::slotted([slot="heading"]) {
+    margin: 0;
+}
+
+.popover ::slotted([slot="heading"]) {
+    font-size: var(--spectrum-contextual-help-title-size);
+    color: var(--highcontrast-contextual-help-heading-color, var(--spectrum-heading-color));
+    margin-block-end: var(--spectrum-contextual-help-content-spacing);
 }
 
 ::slotted([slot="link"]) {
+    margin-block-start: var(--spectrum-spacing-300);
+
     display: block;
 }
+
+:host {
+    display: inline-block;
+}
diff --git a/packages/contextual-help/src/spectrum-contextual-help.css b/packages/contextual-help/src/spectrum-contextual-help.css
deleted file mode 100644
index 2b9a2856a6a..00000000000
--- a/packages/contextual-help/src/spectrum-contextual-help.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-.popover {
-    min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width));
-    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-body-color)));
-    max-inline-size: var(--mod-spectrum-contextual-help-popover-maximum-width);
-    position: relative;
-}
-
-.popover .body,
-.popover ::slotted([slot="heading"]) {
-    margin: 0;
-}
-
-.popover ::slotted([slot="heading"]) {
-    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)));
-    margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing));
-}
-
-::slotted([slot="link"]) {
-    margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-spacing-300));
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-contextual-help-heading-color: CanvasText;
-        --highcontrast-contextual-help-body-color: CanvasText;
-    }
-}
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index 3b4e51d2baa..257d930b3ab 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -37,7 +37,6 @@
             "development": "./src/DialogWrapper.dev.js",
             "default": "./src/DialogWrapper.js"
         },
-        "./src/dialog-overrides.css.js": "./src/dialog-overrides.css.js",
         "./src/dialog.css.js": "./src/dialog.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
index ac4e52dd5f9..e824a51cc5d 100644
--- a/packages/dialog/src/Dialog.ts
+++ b/packages/dialog/src/Dialog.ts
@@ -25,7 +25,7 @@ import {
 import '@spectrum-web-components/button-group/sp-button-group.js';
 import '@spectrum-web-components/button/sp-close-button.js';
 import '@spectrum-web-components/divider/sp-divider.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared';
 
 import { AlertDialog } from '@spectrum-web-components/alert-dialog/src/AlertDialog.js';
@@ -140,7 +140,9 @@ export class Dialog extends ObserveSlotPresence(AlertDialog, [
                 ${this.renderHero()} ${this.renderHeading()}
                 ${this.error
                     ? html`
-                          <sp-icon-alert class="type-icon"></sp-icon-alert>
+                          <sp-icon-alert-triangle
+                              class="type-icon"
+                          ></sp-icon-alert-triangle>
                       `
                     : nothing}
                 ${this.noDivider
diff --git a/packages/dialog/src/dialog-overrides.css b/packages/dialog/src/dialog-overrides.css
deleted file mode 100644
index 68deb9971a6..00000000000
--- a/packages/dialog/src/dialog-overrides.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-dialog-fullscreen-header-text-size: var(--system-dialog-fullscreen-header-text-size);
-    --spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size);
-    --spectrum-dialog-confirm-small-width: var(--system-dialog-confirm-small-width);
-    --spectrum-dialog-confirm-medium-width: var(--system-dialog-confirm-medium-width);
-    --spectrum-dialog-confirm-large-width: var(--system-dialog-confirm-large-width);
-    --spectrum-dialog-confirm-divider-block-spacing-start: var(--system-dialog-confirm-divider-block-spacing-start);
-    --spectrum-dialog-confirm-divider-block-spacing-end: var(--system-dialog-confirm-divider-block-spacing-end);
-    --spectrum-dialog-confirm-description-text-color: var(--system-dialog-confirm-description-text-color);
-    --spectrum-dialog-confirm-title-text-color: var(--system-dialog-confirm-title-text-color);
-    --spectrum-dialog-confirm-description-text-line-height: var(--system-dialog-confirm-description-text-line-height);
-    --spectrum-dialog-confirm-title-text-line-height: var(--system-dialog-confirm-title-text-line-height);
-    --spectrum-dialog-heading-font-weight: var(--system-dialog-heading-font-weight);
-    --spectrum-dialog-confirm-description-padding: var(--system-dialog-confirm-description-padding);
-    --spectrum-dialog-confirm-description-margin: var(--system-dialog-confirm-description-margin);
-    --spectrum-dialog-confirm-footer-padding-top: var(--system-dialog-confirm-footer-padding-top);
-    --spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size);
-    --spectrum-dialog-confirm-buttongroup-padding-top: var(--system-dialog-confirm-buttongroup-padding-top);
-    --spectrum-dialog-confirm-close-button-size: var(--system-dialog-confirm-close-button-size);
-    --spectrum-dialog-confirm-close-button-padding: var(--system-dialog-confirm-close-button-padding);
-    --spectrum-dialog-confirm-divider-height: var(--system-dialog-confirm-divider-height);
-}
diff --git a/packages/dialog/src/dialog.css b/packages/dialog/src/dialog.css
index f2379c27a4d..e5d6779117e 100644
--- a/packages/dialog/src/dialog.css
+++ b/packages/dialog/src/dialog.css
@@ -10,24 +10,75 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-dialog.css");
-@import url("./dialog-overrides.css");
-
+/* Base variables */
 :host {
-    --swc-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);
+    --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);
+
+    box-sizing: border-box;
+    min-inline-size: var(--spectrum-dialog-min-inline-size);
+    inline-size: var(--spectrum-dialog-confirm-medium-width, fit-content);
+    max-inline-size: 100%;
+    max-block-size: inherit;
+    outline: none;
+    display: flex;
+}
+
+:host([size="s"]) {
+    inline-size: var(--spectrum-dialog-confirm-small-width);
+}
+
+:host([size="l"]) {
+    inline-size: var(--spectrum-dialog-confirm-large-width);
 }
 
 .content {
     overflow: hidden;
+
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
+    font-size: var(--spectrum-dialog-confirm-description-text-size);
+    font-weight: var(--spectrum-regular-font-weight);
+    line-height: var(--spectrum-dialog-confirm-description-text-line-height);
+    color: var(--spectrum-dialog-confirm-description-text-color);
+    padding: calc(var(--spectrum-dialog-confirm-description-padding) * 2);
+    margin: 0 var(--spectrum-dialog-confirm-description-margin);
+    outline: none;
+    grid-area: content;
+    overflow-y: auto;
 }
 
 .footer {
     color: var(--spectrum-dialog-confirm-description-text-color, var(--spectrum-gray-800));
+
+    outline: none;
+    flex-wrap: wrap;
+    grid-area: footer;
+    padding-block-start: var(--spectrum-dialog-confirm-footer-padding-top);
+    display: flex;
 }
 
 .type-icon {
     grid-area: typeIcon;
-    color: var(--mod-alert-dialog-error-icon-color, var(--swc-alert-dialog-error-icon-color));
+    color: var(--spectrum-negative-visual-color);
 }
 
 .content[tabindex] {
@@ -35,25 +86,26 @@
 }
 
 ::slotted(img[slot="hero"]) {
-    width: 100%;
-    height: auto;
+    inline-size: 100%;
+    block-size: auto;
 }
 
-/* We may remove this override when CSS fixes unused `header` and `typeIcon` areas */
 .grid {
+    inline-size: 100%;
+    display: grid;
+    grid-template-rows: auto var(--spectrum-dialog-confirm-padding-grid) auto auto 1fr auto var(--spectrum-dialog-confirm-padding-grid);
+    grid-template-columns: var(--spectrum-dialog-confirm-padding-grid) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-confirm-padding-grid);
     grid-template-areas:
         "hero hero hero hero hero hero"
         ". . . . . ."
-        ". heading heading heading typeIcon . "
+        ". heading header header header ."
         ". divider divider divider divider ."
         ". content content content content ."
         ". footer footer buttonGroup buttonGroup ."
         ". . . . . .";
-    inline-size: 100%;
-    display: grid;
 }
 
-/* Needed while `error` attribute still exists as deprecated */
+/* needed while `error` attribute still exists as deprecated */
 :host(:not([error], [dismissable], [mode])) .grid {
     grid-template-areas:
         "hero hero hero hero hero hero"
@@ -66,3 +118,195 @@
     inline-size: 100%;
     display: grid;
 }
+
+::slotted([slot="hero"]) {
+    block-size: var(--spectrum-dialog-confirm-hero-height);
+    background-position: 50%;
+    background-size: cover;
+    border-start-start-radius: var(--spectrum-dialog-confirm-border-radius);
+    border-start-end-radius: var(--spectrum-dialog-confirm-border-radius);
+    grid-area: hero;
+    overflow: hidden;
+}
+
+::slotted([slot="heading"]) {
+    font-size: var(--spectrum-dialog-confirm-title-text-size);
+    font-weight: var(--spectrum-dialog-heading-font-weight);
+    line-height: var(--spectrum-dialog-confirm-title-text-line-height);
+    color: var(--spectrum-dialog-confirm-title-text-color);
+    outline: none;
+    grid-area: heading;
+    margin: 0;
+    padding-inline-end: var(--spectrum-dialog-confirm-gap-size);
+}
+
+.no-header::slotted([slot="heading"]) {
+    grid-area: heading-start / heading-start / header-end / header-end;
+    padding-inline-end: 0;
+}
+
+.header {
+    box-sizing: border-box;
+    outline: none;
+    grid-area: header;
+    align-items: center;
+    display: flex;
+
+    justify-content: flex-start;
+}
+
+.divider {
+    inline-size: 100%;
+    grid-area: divider;
+    margin-block-start: var(--spectrum-dialog-confirm-divider-block-spacing-end);
+    margin-block-end: var(--spectrum-dialog-confirm-divider-block-spacing-start);
+}
+
+:host([mode="fullscreen"]) [name="heading"] + .divider {
+    margin-block-end: calc(var(--spectrum-dialog-confirm-divider-block-spacing-start) - var(--spectrum-dialog-confirm-description-padding) * 2);
+}
+
+:host([no-divider]) .divider {
+    display: none;
+}
+
+:host([no-divider]) ::slotted([slot="heading"]) {
+    padding-block-end: calc(var(--spectrum-dialog-confirm-divider-block-spacing-end) + var(--spectrum-dialog-confirm-divider-block-spacing-start) + var(--spectrum-dialog-confirm-divider-height));
+}
+
+.footer > *,
+.footer > .spectrum-Button + .spectrum-Button {
+    margin-block-end: 0;
+}
+
+.button-group {
+    grid-area: buttonGroup;
+    justify-content: flex-end;
+    padding-block-start: var(--spectrum-dialog-confirm-buttongroup-padding-top);
+    padding-inline-start: var(--spectrum-dialog-confirm-gap-size);
+    display: flex;
+}
+
+.button-group.button-group--noFooter {
+    grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end;
+}
+
+:host([dismissable]) .grid {
+    grid-template-rows: auto var(--spectrum-dialog-confirm-padding-grid) auto auto 1fr auto var(--spectrum-dialog-confirm-padding-grid);
+
+    grid-template-columns: var(--spectrum-dialog-confirm-padding-grid) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding-grid);
+    grid-template-areas:
+        "hero hero hero hero hero hero hero"
+        ". . . . . closeButton closeButton"
+        ". heading heading heading heading closeButton closeButton"
+        ". header header header header header ."
+        ". divider divider divider divider divider ."
+        ". content content content content content ."
+        ". footer footer buttonGroup buttonGroup buttonGroup ."
+        ". . . . . . .";
+}
+
+:host([dismissable]) .grid .button-group {
+    display: none;
+}
+
+:host([dismissable]) .grid .footer {
+    color: var(--spectrum-dialog-confirm-description-text-color);
+    grid-area: footer / footer / buttonGroup / buttonGroup;
+}
+
+.close-button {
+    grid-area: closeButton;
+    place-self: start end;
+    margin-block-start: var(--spectrum-dialog-confirm-close-button-padding);
+    margin-inline-end: var(--spectrum-dialog-confirm-close-button-padding);
+}
+
+:host([mode="fullscreen"]) {
+    inline-size: 100%;
+    block-size: 100%;
+}
+
+:host([mode="fullscreenTakeover"]) {
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: 0;
+}
+
+:host([mode="fullscreen"]),
+:host([mode="fullscreenTakeover"]) {
+    max-block-size: none;
+    max-inline-size: none;
+}
+
+:host([mode="fullscreen"]) .grid,
+:host([mode="fullscreenTakeover"]) .grid {
+    grid-template-columns: var(--spectrum-dialog-confirm-padding-grid) 1fr var(--spectrum-dialog-confirm-padding-grid);
+    grid-template-rows: var(--spectrum-dialog-confirm-padding-grid) auto auto auto 1fr auto var(--spectrum-dialog-confirm-padding-grid);
+    grid-template-areas:
+        ". . ."
+        ". heading ."
+        ". header ."
+        ". divider ."
+        ". content ."
+        ". buttonGroup ."
+        ". . .";
+}
+
+:host([mode="fullscreen"]) ::slotted([slot="heading"]),
+:host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) {
+    font-size: var(--spectrum-dialog-fullscreen-header-text-size);
+}
+
+:host([mode="fullscreen"]) .content,
+:host([mode="fullscreenTakeover"]) .content {
+    max-block-size: none;
+}
+
+:host([mode="fullscreen"]) .button-group,
+:host([mode="fullscreen"]) .footer,
+:host([mode="fullscreenTakeover"]) .button-group,
+:host([mode="fullscreenTakeover"]) .footer {
+    padding-block-start: 0;
+}
+
+:host([mode="fullscreen"]) .footer,
+:host([mode="fullscreenTakeover"]) .footer {
+    display: none;
+}
+
+:host([mode="fullscreen"]) .button-group,
+:host([mode="fullscreenTakeover"]) .button-group {
+    grid-area: buttonGroup;
+    align-self: start;
+}
+
+.grid,
+:host([dismissable]) .grid {
+    grid-template-rows: auto var(--spectrum-dialog-confirm-padding-grid) auto auto auto 1fr auto var(--spectrum-dialog-confirm-padding-grid);
+}
+
+:host([mode="fullscreen"]) .grid,
+:host([mode="fullscreenTakeover"]) .grid {
+    grid-template-columns: var(--spectrum-dialog-confirm-padding-grid) 1fr var(--spectrum-dialog-confirm-padding-grid);
+    grid-template-rows: var(--spectrum-dialog-confirm-padding-grid) auto auto auto 1fr auto var(--spectrum-dialog-confirm-padding-grid);
+    grid-template-areas:
+        ". . ."
+        ". heading ."
+        ". header ."
+        ". divider ."
+        ". content ."
+        ". buttonGroup ."
+        ". . .";
+    display: grid;
+}
+
+:host([mode="fullscreen"]) .button-group,
+:host([mode="fullscreenTakeover"]) .button-group {
+    padding-block-start: var(--spectrum-dialog-confirm-buttongroup-padding-top);
+}
+
+:host([mode="fullscreen"]) ::slotted([slot="heading"]),
+:host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) {
+    font-size: var(--spectrum-dialog-confirm-title-text-size);
+}
diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css
deleted file mode 100644
index 12e8a9d355e..00000000000
--- a/packages/dialog/src/spectrum-dialog.css
+++ /dev/null
@@ -1,296 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    box-sizing: border-box;
-    inline-size: fit-content;
-    min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size));
-    max-inline-size: 100%;
-    max-block-size: inherit;
-    outline: none;
-    display: flex;
-}
-
-:host([size="s"]) {
-    inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width));
-}
-
-:host([size="m"]) {
-    inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width));
-}
-
-:host([size="l"]) {
-    inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width));
-}
-
-::slotted([slot="hero"]) {
-    block-size: var(--mod-dialog-confirm-hero-height, var(--spectrum-dialog-confirm-hero-height));
-    background-position: 50%;
-    background-size: cover;
-    border-start-start-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius));
-    border-start-end-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius));
-    grid-area: hero;
-    overflow: hidden;
-}
-
-.grid {
-    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-areas:
-        "hero hero hero hero hero hero"
-        ". . . . . ."
-        ". heading header header header ."
-        ". divider divider divider divider ."
-        ". 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%;
-    display: grid;
-}
-
-::slotted([slot="heading"]) {
-    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));
-    outline: none;
-    grid-area: heading;
-    margin: 0;
-    padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size));
-}
-
-.no-header::slotted([slot="heading"]) {
-    grid-area: heading-start / heading-start / header-end / header-end;
-    padding-inline-end: 0;
-}
-
-.header {
-    box-sizing: border-box;
-    outline: none;
-    grid-area: header;
-    justify-content: flex-end;
-    align-items: center;
-    display: flex;
-}
-
-.divider {
-    inline-size: 100%;
-    grid-area: divider;
-    margin-block-start: var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end));
-    margin-block-end: var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start));
-}
-
-:host([mode="fullscreen"]) [name="heading"] + .divider {
-    margin-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) - var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2);
-}
-
-:host([no-divider]) .divider {
-    display: none;
-}
-
-:host([no-divider]) ::slotted([slot="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)));
-}
-
-.content {
-    box-sizing: border-box;
-    -webkit-overflow-scrolling: touch;
-    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));
-    color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));
-    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));
-    outline: none;
-    grid-area: content;
-    overflow-y: auto;
-}
-
-.footer {
-    outline: none;
-    flex-wrap: wrap;
-    grid-area: footer;
-    padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top));
-    display: flex;
-}
-
-.footer > *,
-.footer > .spectrum-Button + .spectrum-Button {
-    margin-block-end: 0;
-}
-
-.button-group {
-    grid-area: buttonGroup;
-    justify-content: flex-end;
-    padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top));
-    padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size));
-    display: flex;
-}
-
-.button-group.button-group--noFooter {
-    grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end;
-}
-
-:host([dismissable]) .grid {
-    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-areas:
-        "hero hero hero hero hero hero hero"
-        ". . . . . closeButton closeButton"
-        ". heading header header typeIcon closeButton closeButton"
-        ". divider divider divider divider divider ."
-        ". 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));
-}
-
-:host([dismissable]) .grid .button-group {
-    display: none;
-}
-
-:host([dismissable]) .grid .footer {
-    color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));
-    grid-area: footer / footer / buttonGroup / buttonGroup;
-}
-
-.close-button {
-    grid-area: closeButton;
-    place-self: start end;
-    margin-block-start: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding));
-    margin-inline-end: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding));
-}
-
-:host([mode="fullscreen"]) {
-    inline-size: 100%;
-    block-size: 100%;
-}
-
-:host([mode="fullscreenTakeover"]) {
-    inline-size: 100%;
-    block-size: 100%;
-    border-radius: 0;
-}
-
-:host([mode="fullscreen"]),
-:host([mode="fullscreenTakeover"]) {
-    max-block-size: none;
-    max-inline-size: none;
-}
-
-:host([mode="fullscreen"]) .grid,
-:host([mode="fullscreenTakeover"]) .grid {
-    grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr auto auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-    grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-    grid-template-areas:
-        ". . . . ."
-        ". heading header buttonGroup ."
-        ". divider divider divider ."
-        ". content content content ."
-        ". . . . .";
-    display: grid;
-}
-
-:host([mode="fullscreen"]) ::slotted([slot="heading"]),
-:host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) {
-    font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size));
-}
-
-:host([mode="fullscreen"]) .content,
-:host([mode="fullscreenTakeover"]) .content {
-    max-block-size: none;
-}
-
-:host([mode="fullscreen"]) .button-group,
-:host([mode="fullscreen"]) .footer,
-:host([mode="fullscreenTakeover"]) .button-group,
-:host([mode="fullscreenTakeover"]) .footer {
-    padding-block-start: 0;
-}
-
-:host([mode="fullscreen"]) .footer,
-:host([mode="fullscreenTakeover"]) .footer {
-    display: none;
-}
-
-:host([mode="fullscreen"]) .button-group,
-:host([mode="fullscreenTakeover"]) .button-group {
-    grid-area: buttonGroup;
-    align-self: start;
-}
-
-@media screen and (width <= 700px) {
-    .grid {
-        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-areas:
-            "hero hero hero hero hero hero"
-            ". . . . . ."
-            ". heading heading heading heading ."
-            ". header header header header ."
-            ". divider divider divider divider ."
-            ". content content content content ."
-            ". footer footer buttonGroup buttonGroup ."
-            ". . . . . .";
-    }
-
-    .grid,
-    :host([dismissable]) .grid {
-        grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-    }
-
-    :host([dismissable]) .grid {
-        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-areas:
-            "hero hero hero hero hero hero hero"
-            ". . . . . closeButton closeButton"
-            ". heading heading heading heading closeButton closeButton"
-            ". header header header header header ."
-            ". divider divider divider divider divider ."
-            ". content content content content content ."
-            ". footer footer buttonGroup buttonGroup buttonGroup ."
-            ". . . . . . .";
-    }
-
-    .header {
-        justify-content: flex-start;
-    }
-
-    :host([mode="fullscreen"]) .grid,
-    :host([mode="fullscreenTakeover"]) .grid {
-        grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-        grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-        grid-template-areas:
-            ". . ."
-            ". heading ."
-            ". header ."
-            ". divider ."
-            ". content ."
-            ". buttonGroup ."
-            ". . .";
-        display: grid;
-    }
-
-    :host([mode="fullscreen"]) .button-group,
-    :host([mode="fullscreenTakeover"]) .button-group {
-        padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top));
-    }
-
-    :host([mode="fullscreen"]) ::slotted([slot="heading"]),
-    :host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) {
-        font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size));
-    }
-}
-
-@media (forced-colors: active) {
-    :host {
-        border: solid;
-    }
-}
diff --git a/packages/dialog/test/dialog-base.test.ts b/packages/dialog/test/dialog-base.test.ts
index 44f6fa7f7da..d0d372d1001 100644
--- a/packages/dialog/test/dialog-base.test.ts
+++ b/packages/dialog/test/dialog-base.test.ts
@@ -34,7 +34,7 @@ async function styledFixture<T extends Element>(
     story: TemplateResult
 ): Promise<T> {
     const test = await fixture<Theme>(html`
-        <sp-theme system="spectrum" scale="medium" color="dark">
+        <sp-theme system="spectrum" scale="medium" style="color-scheme: dark;">
             ${story}
         </sp-theme>
     `);
diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts
index 9be967fe7cc..3ca88071a74 100644
--- a/packages/dialog/test/dialog-wrapper.test.ts
+++ b/packages/dialog/test/dialog-wrapper.test.ts
@@ -50,7 +50,7 @@ async function styledFixture<T extends Element>(
     story: TemplateResult
 ): Promise<T> {
     const test = await fixture<Theme>(html`
-        <sp-theme system="spectrum" scale="medium" color="dark">
+        <sp-theme system="spectrum" scale="medium" style="color-scheme: dark;">
             ${story}
         </sp-theme>
     `);
diff --git a/packages/divider/package.json b/packages/divider/package.json
index f92ebfeda17..8b0814b89c5 100644
--- a/packages/divider/package.json
+++ b/packages/divider/package.json
@@ -29,7 +29,6 @@
             "development": "./src/Divider.dev.js",
             "default": "./src/Divider.js"
         },
-        "./src/divider-overrides.css.js": "./src/divider-overrides.css.js",
         "./src/divider.css.js": "./src/divider.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
@@ -64,7 +63,8 @@
         "css"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "1.7.0"
+        "@spectrum-web-components/base": "1.7.0",
+        "@spectrum-web-components/styles": "1.7.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/divider/src/divider-overrides.css b/packages/divider/src/divider-overrides.css
deleted file mode 100644
index 55170027adb..00000000000
--- a/packages/divider/src/divider-overrides.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-divider-background-color: var(--system-divider-background-color);
-    --spectrum-divider-background-color-static-white: var(--system-divider-background-color-static-white);
-    --spectrum-divider-background-color-static-black: var(--system-divider-background-color-static-black);
-}
diff --git a/packages/divider/src/divider.css b/packages/divider/src/divider.css
index 27ab0099bc4..f67069cf7d4 100644
--- a/packages/divider/src/divider.css
+++ b/packages/divider/src/divider.css
@@ -10,14 +10,69 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-divider.css");
-@import url("./divider-overrides.css");
+:host {
+    --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
+}
+
+:host([size="s"]) {
+    --spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
+}
+
+:host([size="l"]) {
+    --spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
+    --spectrum-divider-background-color: var(--spectrum-gray-800);
+}
+
+:host([static-color="white"]) {
+    --spectrum-divider-background-color: var(--spectrum-divider-background-color-static-white);
+}
+
+:host([static-color="white"][size="s"]) {
+    --spectrum-divider-background-color: var(--spectrum-divider-background-color-static-white);
+}
+
+:host([static-color="white"][size="l"]) {
+    --spectrum-divider-background-color: var(--spectrum-transparent-white-800);
+}
+
+:host([static-color="black"]) {
+    --spectrum-divider-background-color: var(--spectrum-divider-background-color-static-black);
+}
+
+:host([static-color="black"][size="s"]) {
+    --spectrum-divider-background-color: var(--spectrum-divider-background-color-static-black);
+}
+
+:host([static-color="black"][size="l"]) {
+    --spectrum-divider-background-color: var(--spectrum-transparent-black-800);
+}
 
 :host {
     display: block;
+    block-size: var(--spectrum-divider-thickness);
+    inline-size: 100%;
+    border: none;
+    border-width: var(--spectrum-divider-thickness);
+    border-radius: var(--spectrum-divider-thickness);
+    background-color: var(--spectrum-divider-background-color);
+    overflow: visible;
+}
+
+:host([vertical]) {
+    inline-size: var(--spectrum-divider-thickness);
+    block-size: 100%;
+    block-size: var(--spectrum-divider-vertical-height, 100%);
+    margin-block: var(--spectrum-divider-vertical-margin);
+    align-self: var(--spectrum-divider-vertical-align);
 }
 
 hr {
     border: none;
     margin: 0;
 }
+
+@media (forced-colors: active) {
+    :host {
+        background-color: CanvasText;
+    }
+}
diff --git a/packages/divider/src/spectrum-divider.css b/packages/divider/src/spectrum-divider.css
deleted file mode 100644
index 3cb844a9e29..00000000000
--- a/packages/divider/src/spectrum-divider.css
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-divider-background-color: CanvasText;
-    }
-}
-
-:host {
-    --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
-}
-
-:host([size="s"]) {
-    --spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
-}
-
-:host([size="l"]) {
-    --spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
-    --spectrum-divider-background-color: var(--spectrum-gray-800);
-}
-
-:host([static-color="white"]) {
-    --mod-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-static-white));
-}
-
-:host([static-color="white"][size="s"]) {
-    --mod-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-static-white));
-}
-
-:host([static-color="white"][size="l"]) {
-    --mod-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-transparent-white-800));
-}
-
-:host([static-color="black"]) {
-    --mod-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-static-black));
-}
-
-:host([static-color="black"][size="s"]) {
-    --mod-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-static-black));
-}
-
-:host([static-color="black"][size="l"]) {
-    --mod-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-transparent-black-800));
-}
-
-:host {
-    block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
-    inline-size: 100%;
-    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)));
-    overflow: visible;
-}
-
-:host([vertical]) {
-    inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
-    block-size: 100%;
-    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/packages/divider/stories/typography-decorator.ts b/packages/divider/stories/typography-decorator.ts
index 6c7db01aab5..0a9d4a65e4d 100644
--- a/packages/divider/stories/typography-decorator.ts
+++ b/packages/divider/stories/typography-decorator.ts
@@ -21,7 +21,7 @@ import {
     property,
 } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from '@spectrum-web-components/theme/src/typography.css.js';
+import styles from '@spectrum-web-components/styles/typography.js';
 
 /**
  * @element typography-decorator
diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json
index 0737f352012..a63dc3047e9 100644
--- a/packages/dropzone/package.json
+++ b/packages/dropzone/package.json
@@ -29,7 +29,6 @@
             "development": "./src/Dropzone.dev.js",
             "default": "./src/Dropzone.js"
         },
-        "./src/dropzone-overrides.css.js": "./src/dropzone-overrides.css.js",
         "./src/dropzone.css.js": "./src/dropzone.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/dropzone/src/dropzone-overrides.css b/packages/dropzone/src/dropzone-overrides.css
deleted file mode 100644
index e780fc00d25..00000000000
--- a/packages/dropzone/src/dropzone-overrides.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-drop-zone-border-color: var(--system-drop-zone-border-color);
-}
diff --git a/packages/dropzone/src/dropzone.css b/packages/dropzone/src/dropzone.css
index 7c3ea7115c1..5e9f41717d3 100644
--- a/packages/dropzone/src/dropzone.css
+++ b/packages/dropzone/src/dropzone.css
@@ -10,22 +10,110 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-dropzone.css");
-@import url("./dropzone-overrides.css");
-
-/*
- * Host is inline-block by default which caused all the computed styling to be wrong.
- * We need it as a block
- */
+/* Base variables */
 :host {
+    --spectrum-drop-zone-border-width: var(--spectrum-border-width-200);
+    --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-content-background-color: var(--spectrum-accent-visual-color);
+    --spectrum-illustrated-message-content-maximum-width: var(--spectrum-drop-zone-content-maximum-width);
+    --spectrum-illustrated-message-illustration-color: var(--spectrum-drop-zone-illustration-color);
+    --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400);
+    --spectrum-illustrated-message-heading-to-body: var(--spectrum-spacing-75);
+    --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+    --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style);
+    --spectrum-illustrated-message-title-font-size: var(--spectrum-drop-zone-title-size);
+    --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height);
+    --spectrum-illustrated-message-title-color: var(--spectrum-heading-color);
+    --spectrum-illustrated-message-description-position: relative;
+    --spectrum-illustrated-message-description-z-index: 1;
+    --spectrum-illustrated-message-heading-to-description: 0;
+    --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight);
+    --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style);
+    --spectrum-illustrated-message-description-font-size: var(--spectrum-drop-zone-body-size);
+    --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height);
+    --spectrum-illustrated-message-description-color: var(--spectrum-body-color);
+    --spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
+    --spectrum-actionbutton-label-color: var(--spectrum-white);
+    --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-300);
+
+    /* colors */
+    --spectrum-drop-zone-border-color: var(--spectrum-gray-400);
+
+    /* base styles */
     display: block;
+    box-sizing: border-box;
+    min-block-size: var(--spectrum-dropzone-min-height);
+    inline-size: var(--spectrum-drop-zone-width);
+    padding: calc(var(--spectrum-spacing-400) - var(--spectrum-drop-zone-border-width));
+    padding: var(--spectrum-dropzone-padding);
+    border-width: var(--spectrum-dropzone-border-width);
+    border-style: var(--spectrum-drop-zone-border-style, dashed);
+    border-radius: var(--spectrum-dropzone-border-radius, var(--spectrum-corner-radius-100));
+    border-color: var(--spectrum-drop-zone-border-color, var(--spectrum-gray-400));
+    background-color: var(--spectrum-drop-zone-background-color);
+    text-align: center;
+    background-size: cover;
+}
+
+:host(:lang(ja), :lang(ko), :lang(zh)) {
+}
+
+:host([dragged]) {
+    --spectrum-drop-zone-border-style: var(--spectrum-drop-zone-border-style-dragged, solid);
+}
+
+:host([filled]) {
+    --spectrum-illustrated-message-display: none;
+}
+
+:host([filled][dragged]) {
+    --spectrum-drop-zone-content-display: flex;
+}
+
+:host(:focus-visible) {
+    outline: 0;
+}
+
+.spectrum-DropZone-content {
+    display: none;
+    display: var(--spectrum-drop-zone-content-display, none);
+    block-size: 100%;
+    z-index: 1;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.spectrum-DropZone-button {
+    box-sizing: border-box;
+    block-size: var(--spectrum-drop-zone-content-height, var(--spectrum-component-height-300));
+    max-inline-size: var(--spectrum-drop-zone-content-maximum-width);
+    font-family: var(--spectrum-drop-zone-content-font-family, var(--spectrum-sans-font-family-stack));
+    font-weight: var(--spectrum-drop-zone-content-font-weight, var(--spectrum-bold-font-weight));
+    font-style: var(--spectrum-drop-zone-content-font-style, var(--spectrum-default-font-style));
+    line-height: var(--spectrum-drop-zone-content-line-height, var(--spectrum-line-height-100));
+    border: none;
+    padding-block-start: var(--spectrum-drop-zone-content-top-to-text, var(--spectrum-component-top-to-text-300));
+    padding-block-end: var(--spectrum-drop-zone-content-bottom-to-text, var(--spectrum-component-bottom-to-text-300));
+}
+
+.spectrum-DropZone-button,
+.spectrum-DropZone-button:focus {
+    background-color: var(--spectrum-drop-zone-content-background-color);
+}
+
+#illustrated-message {
 }
 
 ::slotted(*) {
-    font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-sans-font-family-stack));
-    font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-size));
-    font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-body-sans-serif-font-weight));
-    line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-body-line-height));
-    font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-body-sans-serif-font-style));
+    font-family: var(--spectrum-drop-zone-body-font-family, var(--spectrum-sans-font-family-stack));
+    font-size: var(--spectrum-drop-zone-body-font-size, var(--spectrum-drop-zone-body-size));
+    font-weight: var(--spectrum-drop-zone-body-font-weight, var(--spectrum-body-sans-serif-font-weight));
+    line-height: var(--spectrum-drop-zone-body-line-height, var(--spectrum-body-line-height));
+    font-style: var(--spectrum-drop-zone-body-font-style, var(--spectrum-body-sans-serif-font-style));
     margin-block: 0;
 }
diff --git a/packages/dropzone/src/spectrum-dropzone.css b/packages/dropzone/src/spectrum-dropzone.css
deleted file mode 100644
index 32e9d1e6d45..00000000000
--- a/packages/dropzone/src/spectrum-dropzone.css
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-drop-zone-border-width: var(--spectrum-border-width-200);
-    --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-content-background-color: var(--spectrum-accent-visual-color);
-    --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-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: 1;
-    --mod-illustrated-message-heading-to-description: 0;
-    --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));
-    --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));
-    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-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-corner-radius-100));
-    border-style: dashed;
-    border-style: var(--mod-drop-zone-border-style, dashed);
-    background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color));
-    background-size: cover;
-}
-
-:host:lang(ja),
-:host:lang(ko),
-:host:lang(zh) {
-    --mod-illustrated-message-title-font-size: var(--spectrum-drop-zone-cjk-title-size);
-}
-
-:host([dragged]) {
-    --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)));
-    --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)));
-    --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-accent-visual-color));
-}
-
-:host([filled]) {
-    --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)));
-    --mod-illustrated-message-display: none;
-}
-
-:host([filled][dragged]) {
-    --mod-drop-zone-content-display: flex;
-}
-
-:host(:focus-visible) {
-    --mod-drop-zone-border-style: solid;
-    --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;
-}
-
-.spectrum-DropZone-content {
-    display: none;
-    display: var(--mod-drop-zone-content-display, none);
-    block-size: 100%;
-    z-index: 1;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-}
-
-.spectrum-DropZone-button {
-    box-sizing: border-box;
-    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));
-    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));
-    border: none;
-    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));
-}
-
-.spectrum-DropZone-button,
-.spectrum-DropZone-button:focus {
-    background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color));
-}
-
-@media (hover: hover) {
-    .spectrum-DropZone-button:hover {
-        background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color));
-    }
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-drop-zone-illustration-color: CanvasText;
-        --highcontrast-drop-zone-border-color-hover: Highlight;
-        --highcontrast-illustrated-message-illustration-color: var(--highcontrast-drop-zone-illustration-color);
-    }
-}
diff --git a/packages/field-group/package.json b/packages/field-group/package.json
index 43e78c30473..5f0c086b711 100644
--- a/packages/field-group/package.json
+++ b/packages/field-group/package.json
@@ -29,7 +29,6 @@
             "development": "./src/FieldGroup.dev.js",
             "default": "./src/FieldGroup.js"
         },
-        "./src/field-group-overrides.css.js": "./src/field-group-overrides.css.js",
         "./src/field-group.css.js": "./src/field-group.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/field-group/src/field-group-overrides.css b/packages/field-group/src/field-group-overrides.css
deleted file mode 100644
index 49f1cf3e2d2..00000000000
--- a/packages/field-group/src/field-group-overrides.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-fieldgroup-margin: var(--system-field-group-margin);
-    --spectrum-fieldgroup-readonly-delimiter: var(--system-field-group-readonly-delimiter);
-}
diff --git a/packages/field-group/src/field-group.css b/packages/field-group/src/field-group.css
index c1c4c6f496e..86bf01bd9a1 100644
--- a/packages/field-group/src/field-group.css
+++ b/packages/field-group/src/field-group.css
@@ -10,17 +10,49 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-field-group.css");
-@import url("./field-group-overrides.css");
+/* Base variables */
+:host {
+    /* layout */
+    --spectrum-fieldgroup-margin: var(--spectrum-spacing-300);
+    --spectrum-fieldgroup-readonly-delimiter: ",";
+}
+
+/* base styles */
+.group {
+    display: flex;
+    flex-flow: column wrap;
+}
+
+/* layout variants */
+:host([vertical]) .group {
+    flex-direction: column;
+}
+
+:host([horizontal]) .group {
+    flex-direction: row;
+}
 
+/* rTL support */
 :host([horizontal][dir="rtl"]) slot:not([name])::slotted(*:not(:last-child)),
 :host([dir="rtl"]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)) {
-    /* .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item+.spectrum-FieldGroup-item */
     margin: 0 0 0 var(--spectrum-fieldgroup-margin);
 }
 
 :host([horizontal][dir="ltr"]) slot:not([name])::slotted(*:not(:last-child)),
 :host([dir="ltr"]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)) {
-    /* .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item+.spectrum-FieldGroup-item */
     margin: 0 var(--spectrum-fieldgroup-margin) 0 0;
 }
+
+:host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)) {
+    margin-inline-end: var(--spectrum-fieldgroup-margin);
+}
+
+/* help text positioning */
+:host([horizontal]) .group .spectrum-HelpText {
+    flex-basis: 100%;
+}
+
+.group {
+    forced-color-adjust: none;
+    border-color: var(--highcontrast-fieldgroup-border-color);
+}
diff --git a/packages/field-label/package.json b/packages/field-label/package.json
index ac95d80f476..6e93130e901 100644
--- a/packages/field-label/package.json
+++ b/packages/field-label/package.json
@@ -29,7 +29,6 @@
             "development": "./src/FieldLabel.dev.js",
             "default": "./src/FieldLabel.js"
         },
-        "./src/field-label-overrides.css.js": "./src/field-label-overrides.css.js",
         "./src/field-label.css.js": "./src/field-label.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/field-label/src/field-label-overrides.css b/packages/field-label/src/field-label-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/field-label/src/field-label-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/field-label/src/field-label.css b/packages/field-label/src/field-label.css
index 0982c449565..97a3f227fb7 100644
--- a/packages/field-label/src/field-label.css
+++ b/packages/field-label/src/field-label.css
@@ -10,9 +10,120 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-field-label.css");
-@import url("./field-label-overrides.css");
+:host {
+	--spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
+	--spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
 
-label {
-    display: inline-block;
+	--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-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
+
+	--spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
+	--spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
+
+	--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
+	--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+}
+
+:host(:lang(ja)),
+:host(:lang(ko)),
+:host(:lang(zh)) {
+	--mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100));
+}
+
+:host([disabled]) {
+	--spectrum-fieldlabel-color: var(--highcontrast-fieldlabel-disabled-content-color, var(--spectrum-disabled-content-color));
+}
+
+:host([size="s"]) {
+	--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-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
+
+	--spectrum-fieldlabel-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);
+}
+
+:host([size="l"]) {
+	--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-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
+
+	--spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
+
+	--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
+	--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+}
+
+:host([size="xl"]) {
+	--spectrum-fieldlabel-min-height: var(--spectrum-component-height-300);
+	--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300);
+	--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
+	--spectrum-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
+
+	--spectrum-fieldlabel-font-size: var(--spectrum-font-size-300);
+
+	--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
+	--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+}
+
+:host([static-color="black"]) {
+	--spectrum-fieldlabel-color: var(--spectrum-black);
+}
+
+:host([static-color="white"]) {
+	--spectrum-fieldlabel-color: var(--spectrum-white);
+}
+
+:host {
+	display: block;
+	text-wrap: pretty;
+	box-sizing: border-box;
+	min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
+
+	padding-block: var(--mod-fieldlabel-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-fieldlabel-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text));
+	padding-inline: var(--mod-fieldlabel-padding-inline, 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));
+
+	line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height));
+
+	-webkit-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: auto;
+
+	color: var(--spectrum-fieldlabel-color);
+}
+
+.required-icon {
+	color: inherit;
+	margin-block: 0;
+	margin-inline: var(--mod-fieldlabel-text-to-asterisk, var(--spectrum-fieldlabel-text-to-asterisk)) 0;
+	vertical-align: var(--mod-fieldlabel-asterisk-vertical-align, baseline);
+}
+
+:host([side-aligned="start"]),
+:host([side-aligned="end"]) {
+	display: inline-block;
+
+	margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start));
+	margin-block-end: 0;
+	margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
+
+	vertical-align: top;
+}
+
+:host([side-aligned="end"]) {
+	text-align: end;
+}
+
+@media (forced-colors: active) {
+	:host {
+		--highcontrast-fieldlabel-disabled-content-color: GrayText;
+	}
 }
diff --git a/packages/field-label/src/spectrum-field-label.css b/packages/field-label/src/spectrum-field-label.css
deleted file mode 100644
index 28123191e46..00000000000
--- a/packages/field-label/src/spectrum-field-label.css
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host,
-:host {
-    --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-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
-}
-
-:host([size="s"]) {
-    --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-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);
-}
-
-:host([size="l"]) {
-    --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-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);
-}
-
-:host([size="xl"]) {
-    --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-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);
-}
-
-:host {
-    box-sizing: border-box;
-    min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height));
-    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: 0;
-    padding-inline: var(--mod-fieldlabel-padding-inline, 0);
-    margin-block: 0;
-    margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0));
-    margin-inline: 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-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-line-height-100));
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: auto;
-    color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default)));
-    display: block;
-}
-
-:host(:lang(ja)),
-:host(:lang(ko)),
-:host(:lang(zh)) {
-    --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100));
-}
-
-:host([disabled]) {
-    --mod-fieldlabel-color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
-}
-
-.required-icon {
-    color: inherit;
-    margin-block: 0;
-    margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
-    vertical-align: initial;
-    vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
-}
-
-:host([side-aligned="start"]),
-:host([side-aligned="end"]) {
-    vertical-align: top;
-    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-field-label-side-padding-right));
-    display: inline-block;
-}
-
-:host([side-aligned="end"]) {
-    text-align: end;
-}
-
-@media (forced-colors: active) {
-    :host([disabled]) {
-        --highcontrast-field-label-content-color: GrayText;
-    }
-}
diff --git a/packages/help-text/package.json b/packages/help-text/package.json
index f7b5161a8d5..a74f4744d16 100644
--- a/packages/help-text/package.json
+++ b/packages/help-text/package.json
@@ -37,7 +37,6 @@
             "development": "./src/HelpTextManager.dev.js",
             "default": "./src/HelpTextManager.js"
         },
-        "./src/help-text-overrides.css.js": "./src/help-text-overrides.css.js",
         "./src/help-text.css.js": "./src/help-text.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
diff --git a/packages/help-text/src/HelpText.ts b/packages/help-text/src/HelpText.ts
index 082dbc50f36..d5bffdbae1e 100644
--- a/packages/help-text/src/HelpText.ts
+++ b/packages/help-text/src/HelpText.ts
@@ -19,7 +19,7 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 
 import styles from './help-text.css.js';
 
@@ -48,7 +48,9 @@ export class HelpText extends SizedMixin(SpectrumElement, {
         return html`
             ${this.variant === 'negative' && this.icon
                 ? html`
-                      <sp-icon-alert class="icon"></sp-icon-alert>
+                      <sp-icon-alert-triangle
+                          class="icon"
+                      ></sp-icon-alert-triangle>
                   `
                 : nothing}
             <div class="text"><slot></slot></div>
diff --git a/packages/help-text/src/help-text-overrides.css b/packages/help-text/src/help-text-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/help-text/src/help-text-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/help-text/src/help-text.css b/packages/help-text/src/help-text.css
index 857fd5110ba..df286b53f5a 100644
--- a/packages/help-text/src/help-text.css
+++ b/packages/help-text/src/help-text.css
@@ -1,8 +1,9 @@
 /**
  * Copyright 2025 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
+ * 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
@@ -10,4 +11,129 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-help-text.css");
+:host {
+	/* Spacing */
+	--spectrum-helptext-min-height: var(--spectrum-component-height-100);
+	--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
+	--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
+	--spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100);
+	--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
+	--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+
+	/* Typpography */
+	--spectrum-helptext-font-size: var(--spectrum-font-size-100);
+	--spectrum-helptext-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-helptext-font-style: var(--spectrum-default-font-style);
+	--spectrum-helptext-line-height: var(--spectrum-line-height-100);
+	--spectrum-helptext-font-weight: var(--spectrum-regular-font-weight);
+}
+
+:host(:lang(ja)),
+:host(:lang(zh)),
+:host(:lang(ko)) {
+    --mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100));
+}
+
+:host([size="s"]) {
+    --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-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-75);
+    --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
+    --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+}
+
+:host([size="l"]) {
+    --spectrum-helptext-min-height: var(--spectrum-component-height-200);
+    --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
+    --spectrum-helptext-font-size: var(--spectrum-font-size-200);
+    --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200);
+    --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-200);
+    --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200);
+    --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+}
+
+:host([size="xl"]) {
+    --spectrum-helptext-min-height: var(--spectrum-component-height-300);
+    --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
+    --spectrum-helptext-font-size: var(--spectrum-font-size-300);
+    --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-300);
+    --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-300);
+    --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-300);
+    --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
+}
+
+:host {
+    --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
+    --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+}
+
+:host([variant="negative"]) {
+    --spectrum-helptext-content-color-default: var(--spectrum-negative-content-color-default);
+    --spectrum-helptext-icon-color-default: var(--spectrum-negative-content-color-default);
+}
+
+:host([disabled]) {
+    --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color);
+    --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color);
+}
+
+:host {
+	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));
+}
+
+.icon {
+    margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual));
+    padding-block-start: var(--mod-helptext-top-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon));
+    padding-block-end: var(--mod-helptext-bottom-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon));
+    flex-shrink: 0;
+    block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size));
+    inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size));
+}
+
+.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));
+    font-family: var(--mod-helptext-font-family, var(--spectrum-helptext-font-family));
+    font-style: var(--mod-helptext-font-style, var(--spectrum-helptext-font-style));
+    font-weight: var(--mod-helptext-font-weight, var(--spectrum-helptext-font-weight));
+}
+
+/* Variants -- Neutral, negative, disabled */
+:host([variant="neutral"]) .text {
+    color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
+}
+
+:host([variant="neutral"]) .icon {
+    color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default)));
+}
+
+:host([variant="negative"]) .text {
+    color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
+}
+
+:host([variant="negative"]) .icon {
+    color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default)));
+}
+
+:host([disabled]) .text {
+    color: var(--highcontrast-helptext-content-color-disabled, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
+}
+
+:host([disabled]) .icon {
+    color: var(--highcontrast-helptext-icon-color-disabled, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default)));
+}
+
+@media (forced-colors: active) {
+	:host {
+		--highcontrast-helptext-content-color-default: CanvasText;
+		--highcontrast-helptext-icon-color-default: CanvasText;
+		--highcontrast-helptext-icon-color-disabled: GrayText;
+		--highcontrast-helptext-content-color-disabled: GrayText;
+	}
+}
diff --git a/packages/help-text/src/spectrum-help-text.css b/packages/help-text/src/spectrum-help-text.css
deleted file mode 100644
index 8781ee8bb2d..00000000000
--- a/packages/help-text/src/spectrum-help-text.css
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-helptext-content-color-default: CanvasText;
-        --highcontrast-helptext-icon-color-default: CanvasText;
-    }
-
-    :host,
-    .text,
-    .icon {
-        forced-color-adjust: none;
-    }
-}
-
-:host {
-    --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
-    --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
-    color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
-    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));
-    display: flex;
-}
-
-:host([size="s"]) {
-    --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);
-}
-
-:host,
-:host {
-    --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);
-}
-
-:host([size="l"]) {
-    --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);
-}
-
-:host([size="xl"]) {
-    --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);
-}
-
-:host([variant="neutral"]) {
-    --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
-    --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
-}
-
-:host([variant="negative"]) {
-    --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900);
-    --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900);
-}
-
-:host([disabled]) {
-    --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color);
-    --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color);
-}
-
-:host(:lang(ja)),
-:host(:lang(ko)),
-:host(:lang(zh)) {
-    --mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100));
-}
-
-.icon {
-    block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size));
-    inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size));
-    flex-shrink: 0;
-    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));
-    padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon));
-}
-
-.text {
-    line-height: var(--mod-helptext-line-height, var(--spectrum-line-height-100));
-    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));
-}
-
-:host([variant="neutral"]) .text {
-    color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
-}
-
-:host([variant="neutral"]) .icon {
-    color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default)));
-}
-
-:host([variant="negative"]) .text {
-    color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
-}
-
-:host([variant="negative"]) .icon {
-    color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default)));
-}
-
-:host([disabled]) .text {
-    color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
-}
-
-:host([disabled]) .icon {
-    color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default)));
-}
diff --git a/packages/icon/package.json b/packages/icon/package.json
index fc8f4553c6c..a34ee4bdd41 100644
--- a/packages/icon/package.json
+++ b/packages/icon/package.json
@@ -33,21 +33,12 @@
             "development": "./src/IconBase.dev.js",
             "default": "./src/IconBase.js"
         },
-        "./src/icon-arrow-overrides.css.js": "./src/icon-arrow-overrides.css.js",
-        "./src/icon-asterisk-overrides.css.js": "./src/icon-asterisk-overrides.css.js",
-        "./src/icon-checkmark-overrides.css.js": "./src/icon-checkmark-overrides.css.js",
-        "./src/icon-chevron-overrides.css.js": "./src/icon-chevron-overrides.css.js",
-        "./src/icon-corner-triangle-overrides.css.js": "./src/icon-corner-triangle-overrides.css.js",
-        "./src/icon-cross-overrides.css.js": "./src/icon-cross-overrides.css.js",
-        "./src/icon-dash-overrides.css.js": "./src/icon-dash-overrides.css.js",
-        "./src/icon-overrides.css.js": "./src/icon-overrides.css.js",
-        "./src/icon-single-gripper-overrides.css.js": "./src/icon-single-gripper-overrides.css.js",
-        "./src/icon-triple-gripper-overrides.css.js": "./src/icon-triple-gripper-overrides.css.js",
         "./src/icon.css.js": "./src/icon.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
+        "./src/spectrum-icon-add.css.js": "./src/spectrum-icon-add.css.js",
         "./src/spectrum-icon-arrow.css.js": "./src/spectrum-icon-arrow.css.js",
         "./src/spectrum-icon-asterisk.css.js": "./src/spectrum-icon-asterisk.css.js",
         "./src/spectrum-icon-checkmark.css.js": "./src/spectrum-icon-checkmark.css.js",
@@ -55,9 +46,9 @@
         "./src/spectrum-icon-corner-triangle.css.js": "./src/spectrum-icon-corner-triangle.css.js",
         "./src/spectrum-icon-cross.css.js": "./src/spectrum-icon-cross.css.js",
         "./src/spectrum-icon-dash.css.js": "./src/spectrum-icon-dash.css.js",
-        "./src/spectrum-icon-double-gripper.css.js": "./src/spectrum-icon-double-gripper.css.js",
-        "./src/spectrum-icon-single-gripper.css.js": "./src/spectrum-icon-single-gripper.css.js",
-        "./src/spectrum-icon-triple-gripper.css.js": "./src/spectrum-icon-triple-gripper.css.js",
+        "./src/spectrum-icon-drag-handle.css.js": "./src/spectrum-icon-drag-handle.css.js",
+        "./src/spectrum-icon-gripper.css.js": "./src/spectrum-icon-gripper.css.js",
+        "./src/spectrum-icon-link-out.css.js": "./src/spectrum-icon-link-out.css.js",
         "./sp-icon.js": {
             "development": "./sp-icon.dev.js",
             "default": "./sp-icon.js"
diff --git a/packages/icon/src/IconBase.ts b/packages/icon/src/IconBase.ts
index fb90095bf67..8539404c2ca 100644
--- a/packages/icon/src/IconBase.ts
+++ b/packages/icon/src/IconBase.ts
@@ -17,15 +17,8 @@ import {
     SpectrumElement,
     TemplateResult,
 } from '@spectrum-web-components/base';
-import {
-    SystemResolutionController,
-    systemResolverUpdatedSymbol,
-} from '@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js';
 
-import {
-    property,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import iconStyles from './icon.css.js';
 
@@ -34,11 +27,6 @@ export class IconBase extends SpectrumElement {
         return [iconStyles];
     }
 
-    private unsubscribeSystemContext: (() => void) | null = null;
-
-    @state()
-    public spectrumVersion = 1;
-
     @property({ reflect: true })
     public label = '';
 
@@ -51,14 +39,8 @@ export class IconBase extends SpectrumElement {
 
     public override disconnectedCallback(): void {
         super.disconnectedCallback();
-        if (this.unsubscribeSystemContext) {
-            this.unsubscribeSystemContext();
-            this.unsubscribeSystemContext = null;
-        }
     }
 
-    private systemResolver = new SystemResolutionController(this);
-
     protected override update(changes: PropertyValues): void {
         if (changes.has('label')) {
             if (this.label) {
@@ -68,11 +50,6 @@ export class IconBase extends SpectrumElement {
             }
         }
 
-        if (changes.has(systemResolverUpdatedSymbol)) {
-            this.spectrumVersion =
-                this.systemResolver.system === 'spectrum-two' ? 2 : 1;
-        }
-
         super.update(changes);
     }
 
diff --git a/packages/icon/src/icon-arrow-overrides.css b/packages/icon/src/icon-arrow-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-arrow-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-asterisk-overrides.css b/packages/icon/src/icon-asterisk-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-asterisk-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-checkmark-overrides.css b/packages/icon/src/icon-checkmark-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-checkmark-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-chevron-overrides.css b/packages/icon/src/icon-chevron-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-chevron-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-corner-triangle-overrides.css b/packages/icon/src/icon-corner-triangle-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-corner-triangle-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-cross-overrides.css b/packages/icon/src/icon-cross-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-cross-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-dash-overrides.css b/packages/icon/src/icon-dash-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-dash-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-double-gripper-overrides.css b/packages/icon/src/icon-double-gripper-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-double-gripper-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-overrides.css b/packages/icon/src/icon-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-single-gripper-overrides.css b/packages/icon/src/icon-single-gripper-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-single-gripper-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon-triple-gripper-overrides.css b/packages/icon/src/icon-triple-gripper-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/icon-triple-gripper-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/icon.css b/packages/icon/src/icon.css
index d60ede990ea..5d6665ea125 100644
--- a/packages/icon/src/icon.css
+++ b/packages/icon/src/icon.css
@@ -10,29 +10,66 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-icon.css");
+/* Base variables */
+:host {
+    /* layout */
+    --spectrum-icon-inline-size: var(--spectrum-icon-size);
+    --spectrum-icon-block-size: var(--spectrum-icon-size);
 
+    /* colors */
+    color: inherit;
+
+    /* base styles */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    inline-size: var(--spectrum-icon-inline-size);
+    block-size: var(--spectrum-icon-block-size);
+    overflow: hidden;
+}
+
+:host([size="xs"]) {
+	--spectrum-icon-size: var(--spectrum-workflow-icon-size-50);
+}
+
+:host([size="s"]) {
+	--spectrum-icon-size: var(--spectrum-workflow-icon-size-75);
+}
+
+:host([size="l"]) {
+	--spectrum-icon-size: var(--spectrum-workflow-icon-size-200);
+}
+
+:host([size="xl"]) {
+	--spectrum-icon-size: var(--spectrum-workflow-icon-size-300);
+}
+
+/* Container styles */
 #container {
-    height: 100%;
+    block-size: 100%;
 }
 
+/* content Styles */
 img,
 svg,
 ::slotted(*) {
-    height: 100%;
-    width: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     vertical-align: top;
     color: inherit;
 }
 
-@media (forced-colors: active) {
-    img,
-    svg,
-    ::slotted(*) {
-        forced-color-adjust: auto;
-    }
+img,
+svg,
+::slotted(*) {
+    forced-color-adjust: auto;
 }
 
-:host(:not(:root)) {
-    overflow: hidden;
+/* SVG styles */
+svg {
+    block-size: 100%;
+    inline-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
 }
diff --git a/tools/styles/express/scale-large.css b/packages/icon/src/spectrum-icon-add.css
similarity index 59%
rename from tools/styles/express/scale-large.css
rename to packages/icon/src/spectrum-icon-add.css
index cd76be719ab..d0daed94212 100644
--- a/tools/styles/express/scale-large.css
+++ b/packages/icon/src/spectrum-icon-add.css
@@ -10,10 +10,22 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./spectrum-scale-large.css";
+.spectrum-UIIcon-Add50 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-50);
+}
+
+.spectrum-UIIcon-Add75 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-75);
+}
+
+.spectrum-UIIcon-Add100 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-100);
+}
+
+.spectrum-UIIcon-Add200 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-200);
+}
 
-:host,
-:root {
-    --spectrum-global-alias-appframe-border-size: 1px;
-    --swc-scale-factor: 1.25;
+.spectrum-UIIcon-Add300 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-300);
 }
diff --git a/packages/icon/src/spectrum-icon-arrow.css b/packages/icon/src/spectrum-icon-arrow.css
index b8018cdab38..9dcb1308744 100644
--- a/packages/icon/src/spectrum-icon-arrow.css
+++ b/packages/icon/src/spectrum-icon-arrow.css
@@ -11,134 +11,134 @@
  */
 
 .spectrum-UIIcon-ArrowRight75 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
 }
 
 .spectrum-UIIcon-ArrowRight100 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
 }
 
 .spectrum-UIIcon-ArrowRight200 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
 }
 
 .spectrum-UIIcon-ArrowRight300 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
 }
 
 .spectrum-UIIcon-ArrowRight400 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
 }
 
 .spectrum-UIIcon-ArrowRight500 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
 }
 
 .spectrum-UIIcon-ArrowRight600 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
 }
 
 .spectrum-UIIcon-ArrowDown75 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ArrowDown100 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ArrowDown200 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ArrowDown300 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ArrowDown400 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ArrowDown500 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ArrowDown600 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ArrowLeft75 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ArrowLeft100 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ArrowLeft200 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ArrowLeft300 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ArrowLeft400 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ArrowLeft500 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ArrowLeft600 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ArrowUp75 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ArrowUp100 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ArrowUp200 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ArrowUp300 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ArrowUp400 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ArrowUp500 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ArrowUp600 {
-    --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
+	transform: rotate(270deg);
 }
diff --git a/packages/icon/src/spectrum-icon-asterisk.css b/packages/icon/src/spectrum-icon-asterisk.css
index 07ac73c2892..478bce0b15f 100644
--- a/packages/icon/src/spectrum-icon-asterisk.css
+++ b/packages/icon/src/spectrum-icon-asterisk.css
@@ -11,17 +11,17 @@
  */
 
 .spectrum-UIIcon-Asterisk75 {
-    --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75);
+	--spectrum-icon-size: var(--spectrum-asterisk-icon-size-75);
 }
 
 .spectrum-UIIcon-Asterisk100 {
-    --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100);
+	--spectrum-icon-size: var(--spectrum-asterisk-icon-size-100);
 }
 
 .spectrum-UIIcon-Asterisk200 {
-    --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200);
+	--spectrum-icon-size: var(--spectrum-asterisk-icon-size-200);
 }
 
 .spectrum-UIIcon-Asterisk300 {
-    --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300);
+	--spectrum-icon-size: var(--spectrum-asterisk-icon-size-300);
 }
diff --git a/packages/icon/src/spectrum-icon-checkmark.css b/packages/icon/src/spectrum-icon-checkmark.css
index 9286ccdbedb..f636e7c786a 100644
--- a/packages/icon/src/spectrum-icon-checkmark.css
+++ b/packages/icon/src/spectrum-icon-checkmark.css
@@ -11,33 +11,33 @@
  */
 
 .spectrum-UIIcon-Checkmark50 {
-    --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50);
+	--spectrum-icon-size: var(--spectrum-checkmark-icon-size-50);
 }
 
 .spectrum-UIIcon-Checkmark75 {
-    --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75);
+	--spectrum-icon-size: var(--spectrum-checkmark-icon-size-75);
 }
 
 .spectrum-UIIcon-Checkmark100 {
-    --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100);
+	--spectrum-icon-size: var(--spectrum-checkmark-icon-size-100);
 }
 
 .spectrum-UIIcon-Checkmark200 {
-    --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200);
+	--spectrum-icon-size: var(--spectrum-checkmark-icon-size-200);
 }
 
 .spectrum-UIIcon-Checkmark300 {
-    --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300);
+	--spectrum-icon-size: var(--spectrum-checkmark-icon-size-300);
 }
 
 .spectrum-UIIcon-Checkmark400 {
-    --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400);
+	--spectrum-icon-size: var(--spectrum-checkmark-icon-size-400);
 }
 
 .spectrum-UIIcon-Checkmark500 {
-    --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500);
+	--spectrum-icon-size: var(--spectrum-checkmark-icon-size-500);
 }
 
 .spectrum-UIIcon-Checkmark600 {
-    --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600);
+	--spectrum-icon-size: var(--spectrum-checkmark-icon-size-600);
 }
diff --git a/packages/icon/src/spectrum-icon-chevron.css b/packages/icon/src/spectrum-icon-chevron.css
index 7cda477e69f..4046fb1c72c 100644
--- a/packages/icon/src/spectrum-icon-chevron.css
+++ b/packages/icon/src/spectrum-icon-chevron.css
@@ -11,134 +11,134 @@
  */
 
 .spectrum-UIIcon-ChevronRight50 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
 }
 
 .spectrum-UIIcon-ChevronRight75 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
 }
 
 .spectrum-UIIcon-ChevronRight100 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
 }
 
 .spectrum-UIIcon-ChevronRight200 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
 }
 
 .spectrum-UIIcon-ChevronRight300 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
 }
 
 .spectrum-UIIcon-ChevronRight400 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
 }
 
 .spectrum-UIIcon-ChevronRight500 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
 }
 
 .spectrum-UIIcon-ChevronDown50 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ChevronDown75 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ChevronDown100 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ChevronDown200 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ChevronDown300 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ChevronDown400 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ChevronDown500 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
-    transform: rotate(90deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
+	transform: rotate(90deg);
 }
 
 .spectrum-UIIcon-ChevronLeft50 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ChevronLeft75 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ChevronLeft100 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ChevronLeft200 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ChevronLeft300 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ChevronLeft400 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ChevronLeft500 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
-    transform: rotate(180deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
+	transform: rotate(180deg);
 }
 
 .spectrum-UIIcon-ChevronUp50 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ChevronUp75 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ChevronUp100 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ChevronUp200 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ChevronUp300 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ChevronUp400 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
+	transform: rotate(270deg);
 }
 
 .spectrum-UIIcon-ChevronUp500 {
-    --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
-    transform: rotate(270deg);
+	--spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
+	transform: rotate(270deg);
 }
diff --git a/packages/icon/src/spectrum-icon-corner-triangle.css b/packages/icon/src/spectrum-icon-corner-triangle.css
index a397b229717..77e29184fa1 100644
--- a/packages/icon/src/spectrum-icon-corner-triangle.css
+++ b/packages/icon/src/spectrum-icon-corner-triangle.css
@@ -11,17 +11,17 @@
  */
 
 .spectrum-UIIcon-CornerTriangle75 {
-    --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75);
+	--spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75);
 }
 
 .spectrum-UIIcon-CornerTriangle100 {
-    --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100);
+	--spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100);
 }
 
 .spectrum-UIIcon-CornerTriangle200 {
-    --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200);
+	--spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200);
 }
 
 .spectrum-UIIcon-CornerTriangle300 {
-    --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300);
+	--spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300);
 }
diff --git a/packages/icon/src/spectrum-icon-cross.css b/packages/icon/src/spectrum-icon-cross.css
index ca3da6019a1..2a139cbc77a 100644
--- a/packages/icon/src/spectrum-icon-cross.css
+++ b/packages/icon/src/spectrum-icon-cross.css
@@ -11,29 +11,29 @@
  */
 
 .spectrum-UIIcon-Cross75 {
-    --spectrum-icon-size: var(--spectrum-cross-icon-size-75);
+	--spectrum-icon-size: var(--spectrum-cross-icon-size-75);
 }
 
 .spectrum-UIIcon-Cross100 {
-    --spectrum-icon-size: var(--spectrum-cross-icon-size-100);
+	--spectrum-icon-size: var(--spectrum-cross-icon-size-100);
 }
 
 .spectrum-UIIcon-Cross200 {
-    --spectrum-icon-size: var(--spectrum-cross-icon-size-200);
+	--spectrum-icon-size: var(--spectrum-cross-icon-size-200);
 }
 
 .spectrum-UIIcon-Cross300 {
-    --spectrum-icon-size: var(--spectrum-cross-icon-size-300);
+	--spectrum-icon-size: var(--spectrum-cross-icon-size-300);
 }
 
 .spectrum-UIIcon-Cross400 {
-    --spectrum-icon-size: var(--spectrum-cross-icon-size-400);
+	--spectrum-icon-size: var(--spectrum-cross-icon-size-400);
 }
 
 .spectrum-UIIcon-Cross500 {
-    --spectrum-icon-size: var(--spectrum-cross-icon-size-500);
+	--spectrum-icon-size: var(--spectrum-cross-icon-size-500);
 }
 
 .spectrum-UIIcon-Cross600 {
-    --spectrum-icon-size: var(--spectrum-cross-icon-size-600);
+	--spectrum-icon-size: var(--spectrum-cross-icon-size-600);
 }
diff --git a/packages/icon/src/spectrum-icon-dash.css b/packages/icon/src/spectrum-icon-dash.css
index 654ed92cc1b..5321f47c4ed 100644
--- a/packages/icon/src/spectrum-icon-dash.css
+++ b/packages/icon/src/spectrum-icon-dash.css
@@ -11,33 +11,33 @@
  */
 
 .spectrum-UIIcon-Dash50 {
-    --spectrum-icon-size: var(--spectrum-dash-icon-size-50);
+	--spectrum-icon-size: var(--spectrum-dash-icon-size-50);
 }
 
 .spectrum-UIIcon-Dash75 {
-    --spectrum-icon-size: var(--spectrum-dash-icon-size-75);
+	--spectrum-icon-size: var(--spectrum-dash-icon-size-75);
 }
 
 .spectrum-UIIcon-Dash100 {
-    --spectrum-icon-size: var(--spectrum-dash-icon-size-100);
+	--spectrum-icon-size: var(--spectrum-dash-icon-size-100);
 }
 
 .spectrum-UIIcon-Dash200 {
-    --spectrum-icon-size: var(--spectrum-dash-icon-size-200);
+	--spectrum-icon-size: var(--spectrum-dash-icon-size-200);
 }
 
 .spectrum-UIIcon-Dash300 {
-    --spectrum-icon-size: var(--spectrum-dash-icon-size-300);
+	--spectrum-icon-size: var(--spectrum-dash-icon-size-300);
 }
 
 .spectrum-UIIcon-Dash400 {
-    --spectrum-icon-size: var(--spectrum-dash-icon-size-400);
+	--spectrum-icon-size: var(--spectrum-dash-icon-size-400);
 }
 
 .spectrum-UIIcon-Dash500 {
-    --spectrum-icon-size: var(--spectrum-dash-icon-size-500);
+	--spectrum-icon-size: var(--spectrum-dash-icon-size-500);
 }
 
 .spectrum-UIIcon-Dash600 {
-    --spectrum-icon-size: var(--spectrum-dash-icon-size-600);
+	--spectrum-icon-size: var(--spectrum-dash-icon-size-600);
 }
diff --git a/packages/icon/src/spectrum-icon-double-gripper.css b/packages/icon/src/spectrum-icon-double-gripper.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/spectrum-icon-double-gripper.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/tools/styles/express/core-global.css b/packages/icon/src/spectrum-icon-drag-handle.css
similarity index 60%
rename from tools/styles/express/core-global.css
rename to packages/icon/src/spectrum-icon-drag-handle.css
index 012a8a3aa57..7e9e4a49197 100644
--- a/tools/styles/express/core-global.css
+++ b/packages/icon/src/spectrum-icon-drag-handle.css
@@ -10,9 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./spectrum-core-global.css";
+.spectrum-UIIcon-DragHandle75 {
+	--spectrum-icon-size: var(--spectrum-drag-handle-icon-size-75);
+}
+
+.spectrum-UIIcon-DragHandle100 {
+	--spectrum-icon-size: var(--spectrum-drag-handle-icon-size-100);
+}
+
+.spectrum-UIIcon-DragHandle200 {
+	--spectrum-icon-size: var(--spectrum-drag-handle-icon-size-200);
+}
 
-:host,
-:root {
-    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+.spectrum-UIIcon-DragHandle300 {
+	--spectrum-icon-size: var(--spectrum-drag-handle-icon-size-300);
 }
diff --git a/tools/styles/express/theme-dark.css b/packages/icon/src/spectrum-icon-gripper.css
similarity index 87%
rename from tools/styles/express/theme-dark.css
rename to packages/icon/src/spectrum-icon-gripper.css
index f60d61f6759..d16fa0f13ad 100644
--- a/tools/styles/express/theme-dark.css
+++ b/packages/icon/src/spectrum-icon-gripper.css
@@ -10,9 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./spectrum-theme-dark.css";
 
-:host,
-:root {
-    color-scheme: dark;
+.spectrum-UIIcon-Gripper100 {
+	--spectrum-icon-size: var(--spectrum-gripper-icon-size-100);
 }
diff --git a/packages/table/src/spectrum-table-head.css b/packages/icon/src/spectrum-icon-link-out.css
similarity index 62%
rename from packages/table/src/spectrum-table-head.css
rename to packages/icon/src/spectrum-icon-link-out.css
index 07ce1ac8fde..15b2f269580 100644
--- a/packages/table/src/spectrum-table-head.css
+++ b/packages/icon/src/spectrum-icon-link-out.css
@@ -10,12 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-:host {
-    display: table-header-group;
+.spectrum-UIIcon-LinkOut100 {
+	--spectrum-icon-size: var(--spectrum-link-out-icon-size-100);
 }
 
-:host .spectrum-Table-scroller {
-    z-index: 1;
-    position: sticky;
-    inset-block-start: 0;
+.spectrum-UIIcon-LinkOut200 {
+	--spectrum-icon-size: var(--spectrum-link-out-icon-size-200);
+}
+
+.spectrum-UIIcon-LinkOut300 {
+	--spectrum-icon-size: var(--spectrum-link-out-icon-size-300);
+}
+
+.spectrum-UIIcon-LinkOut400 {
+	--spectrum-icon-size: var(--spectrum-link-out-icon-size-400);
 }
diff --git a/packages/icon/src/spectrum-icon-single-gripper.css b/packages/icon/src/spectrum-icon-single-gripper.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/spectrum-icon-single-gripper.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/spectrum-icon-triple-gripper.css b/packages/icon/src/spectrum-icon-triple-gripper.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/icon/src/spectrum-icon-triple-gripper.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/icon/src/spectrum-icon.css b/packages/icon/src/spectrum-icon.css
deleted file mode 100644
index 193b426885e..00000000000
--- a/packages/icon/src/spectrum-icon.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)));
-    --spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)));
-    inline-size: var(--spectrum-icon-inline-size);
-    block-size: var(--spectrum-icon-block-size);
-    color: inherit;
-    color: var(--mod-icon-color, inherit);
-    fill: currentColor;
-    pointer-events: none;
-    display: inline-block;
-}
-
-@media (forced-colors: active) {
-    :host {
-        forced-color-adjust: auto;
-    }
-}
-
-:host {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
-}
-
-:host([size="xxs"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs);
-}
-
-:host([size="xs"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-50);
-}
-
-:host([size="s"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-75);
-}
-
-:host([size="l"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-200);
-}
-
-:host([size="xl"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-300);
-}
-
-:host([size="xxl"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl);
-}
diff --git a/packages/icons-ui/.gitignore b/packages/icons-ui/.gitignore
index 167e9e4eb30..1fd8d7c1e4d 100644
--- a/packages/icons-ui/.gitignore
+++ b/packages/icons-ui/.gitignore
@@ -1,11 +1,7 @@
 src/icons
-src/icons-s2
 src/icons.ts
-src/icons-s2.ts
 src/elements
-src/elements-s2
 icons/
 stories/icon-manifest.ts
 
 !bin/build.js
-!src/DefaultIcon.ts
\ No newline at end of file
diff --git a/packages/icons-ui/bin/build.js b/packages/icons-ui/bin/build.js
index 3d46d62adaf..5bd5a762b5b 100644
--- a/packages/icons-ui/bin/build.js
+++ b/packages/icons-ui/bin/build.js
@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/**
+/*!
  * Copyright 2025 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
@@ -11,404 +10,321 @@
  * governing permissions and limitations under the License.
  */
 
-import fs from 'fs';
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
 import fg from 'fast-glob';
-import path from 'path';
 import { load } from 'cheerio';
-import prettier from 'prettier';
 import Case from 'case';
-import { fileURLToPath } from 'url';
+import nunjucks from 'nunjucks';
+import 'colors';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const iconsDir = path.join(__dirname, '..');
+const rootDir = path.join(__dirname, '..', '..', '..');
 
-const rootDir = path.join(__dirname, '../../../');
+/**
+ * A simple logger utility to write messages to the console
+ * @type {object} log
+ * @property {(string) => void} log.error
+ * @property {(string) => void} log.write
+ * @property {(string) => void} log.success
+ * @property {(string) => void} log.info
+ */
+const log = {
+	error: (error) => process.stderr.write(`${'❌'.red}  ${error}\n\n`),
+    write: (msg) => process.stdout.write(msg),
+    success: (msg) => process.stdout.write(`${'✓'.green}  ${msg}\n`),
+    info: (msg) => process.stdout.write(`${'ℹ️'.blue}  ${msg}\n`),
+};
+
+/** @type {(string) => string} */
+const relativePrint = (filename, { cwd = rootDir } = {}) =>
+    path.relative(cwd, filename);
+
+const env = new nunjucks.Environment(undefined, {
+    autoescape: false,
+    throwOnUndefined: true,
+    trimBlocks: true,
+    lstripBlocks: true,
+});
 
-const disclaimer = `
-/*
-Copyright 2020 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
+/**
+ * Formats the content and writes it to the file path
+ * @param {string} filePath - The path to the file to write
+ * @param {string} content - The content to format
+ * @returns {Promise<void>} - A promise that resolves when the file is written
+ */
+const formatAndWrite = async (filePath, content) => {
+    return fsp.writeFile(filePath, content, { encoding: 'utf-8' });
+};
 
-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.
-*/`;
+/**
+ * Writes a template to a file
+ * @param {string} filename - The name of the template to write
+ * @param {string} filepath - The path to the file to write
+ * @param {Object} data - The data to pass to the template
+ * @returns {Promise<void>} - A promise that resolves when the file is written
+ */
+async function writeToTemplate(filename, filepath, data) {
+    const templatePath = path.join(__dirname, 'templates', filename);
+    // Check if the template exists
+    if (!fs.existsSync(templatePath)) {
+        log.error(`Template ${templatePath.cyan} does not exist.`);
+        return Promise.reject(
+            new Error(`Template ${templatePath.cyan} does not exist`)
+        );
+    }
 
-const S1IConsPackageDir = '@spectrum-css/ui-icons/dist/medium';
-const S2IConsPackageDir = '@spectrum-css/ui-icons-s2/dist/medium';
-const keepColors = '';
+    const template = await fsp.readFile(templatePath, 'utf-8');
 
-if (!fs.existsSync(`${rootDir}packages/icons-ui/src`)) {
-    fs.mkdirSync(`${rootDir}packages/icons-ui/src`);
-}
-if (!fs.existsSync(`${rootDir}packages/icons-ui/src/icons`)) {
-    fs.mkdirSync(`${rootDir}packages/icons-ui/src/icons`);
-}
-if (!fs.existsSync(`${rootDir}packages/icons-ui/src/icons-s2`)) {
-    fs.mkdirSync(`${rootDir}packages/icons-ui/src/icons-s2`);
-}
-if (!fs.existsSync(`${rootDir}packages/icons-ui/src/elements`)) {
-    fs.mkdirSync(`${rootDir}packages/icons-ui/src/elements`);
-}
-if (!fs.existsSync(`${rootDir}packages/icons-ui/icons`)) {
-    fs.mkdirSync(`${rootDir}packages/icons-ui/icons`);
-}
-fs.writeFileSync(
-    path.join(rootDir, 'packages', 'icons-ui', 'src', 'icons.ts'),
-    disclaimer,
-    'utf-8'
-);
-fs.writeFileSync(
-    path.join(rootDir, 'packages', 'icons-ui', 'src', 'icons-s2.ts'),
-    disclaimer,
-    'utf-8'
-);
-const manifestPath = path.join(
-    rootDir,
-    'packages',
-    'icons-ui',
-    'stories',
-    'icon-manifest.ts'
-);
-fs.writeFileSync(manifestPath, disclaimer, 'utf-8');
-let manifestImports = `import {
-    html,
-    TemplateResult
-} from '@spectrum-web-components/base';\r\n`;
-let manifestListings = `\r\nexport const iconManifest = [\r\n`;
+    // Render the template
+    /** @type {import('@types/nunjucks').Environment.render} */
+    const content = env.renderString(template, data);
 
-const defaultIconImport = `import { DefaultIcon as AlternateIcon } from '../DefaultIcon.js';\r\n`;
-
-async function buildIcons(icons, tag, iconsNameList) {
-    icons.forEach((i) => {
-        const svg = fs.readFileSync(i, 'utf-8');
-        let id = path
-            .basename(i, '.svg')
-            .replace('S2_Icon_', '')
-            .replace('_20_N', '')
-            .replace('_22x20_N', '');
-        if (id.search(/^Ad[A-Z]/) !== -1) {
-            id = id.replace(/^Ad/, '');
-            id += 'Advert';
-        }
+    return formatAndWrite(filepath, content);
+}
 
-        if (id === 'UnLink') {
-            id = 'Unlink';
-        }
-        if (id === 'TextStrikeThrough') {
-            id = 'TextStrikethrough';
-        }
+/**
+ * Builds the icons and writes them to the correct directories
+ * @param {string} filepath - The filepath to the icon to build
+ * @returns {Promise<{imports: string, listings: string}>} - The imports and listings for the icon
+ */
+async function buildIcon(filepath) {
+    const svg = await fsp
+        .readFile(path.join(iconsDir, 'src', 'svg', filepath), 'utf-8')
+        .catch((error) => {
+            log.error(
+                `Error reading icon ${filepath} from ${path.join(iconsDir, 'src', 'svg')}:`,
+                error
+            );
+            return Promise.reject(error);
+        });
 
-        let ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id);
+    const $ = load(svg, { xmlMode: true });
+    let id = path
+        .basename(filepath, '.svg')
+        .replace('S2_Icon_', '')
+        .replace('_20_N', '')
+        .replace('_22x20_N', '');
 
-        if (ComponentName === 'TextStrikeThrough') {
-            ComponentName = 'TextStrikethrough';
-        }
-        if (ComponentName === 'UnLink') {
-            ComponentName = 'Unlink';
+    [
+        {
+            find: /^Ad[A-Z](.*?)$/,
+            replace: '$1Advert',
+        },
+        {
+            find: 'github',
+            replace: 'GitHub',
+        },
+        {
+            find: 'UnLink',
+            replace: 'Unlink',
+        },
+        {
+            find: 'TextStrikeThrough',
+            replace: 'TextStrikethrough',
+        },
+    ].forEach(({ find, replace }) => {
+        if (id === find) id = replace;
+        if (id.search(find) !== -1) {
+            id = id.replace(find, replace);
         }
+    });
 
-        const $ = load(svg, {
-            xmlMode: true,
-        });
-        const title = Case.capital(id);
-        const fileName = `${id}.ts`;
-        const location = path.join(
-            rootDir,
-            'packages/icons-ui/src',
-            tag,
-            fileName
+    // Skip if the first character is a number
+    if (/^\d/.test(id))
+        return Promise.reject(
+            new Error(
+                `Icon ${id} has a number as the first character in the name which is not valid.`
+            )
         );
 
-        if (!Number.isNaN(Number(ComponentName[0]))) {
-            return;
+    // @todo can we remove this now that icons are being pre-processed?
+    $('*').each((_, el) => {
+        if (el.name === 'svg') {
+            $(el).attr('aria-hidden', '...');
+            $(el).attr('role', 'img');
+            /* @todo: can this be removed in favor of the --iconPrimary */
+            $(el).attr('fill', 'currentColor');
+            $(el).attr('aria-label', '...');
+            $(el).removeAttr('id');
+            $(el).attr('width', '...');
+            $(el).attr('height', '...');
         }
-
-        $('*').each((index, el) => {
-            if (el.name === 'svg') {
-                $(el).attr('aria-hidden', '...');
-                $(el).attr('role', 'img');
-                if (keepColors !== 'keep') {
-                    $(el).attr('fill', 'currentColor');
-                }
-                $(el).attr('aria-label', '...');
-                $(el).removeAttr('id');
-                $(el).attr('width', '...');
-                $(el).attr('height', '...');
+        if (el.name === 'defs') {
+            $(el).remove();
+        }
+        Object.keys(el.attribs).forEach((x) => {
+            if (x === 'class') {
+                $(el).removeAttr(x);
             }
-            if (el.name === 'defs') {
-                $(el).remove();
+            if (x === 'stroke') {
+                $(el).attr(x, 'currentColor');
+            }
+            if (x === 'fill') {
+                $(el).attr(x, 'currentColor');
             }
-            Object.keys(el.attribs).forEach((x) => {
-                if (x === 'class') {
-                    $(el).removeAttr(x);
-                }
-                if (keepColors !== 'keep' && x === 'stroke') {
-                    $(el).attr(x, 'currentColor');
-                }
-                if (keepColors !== 'keep' && x === 'fill') {
-                    $(el).attr(x, 'currentColor');
-                }
-            });
         });
+    });
 
-        const iconLiteral = `
-        ${disclaimer}
-
-        import {tag as html, TemplateResult} from '../custom-tag.js';
-
-        export {setCustomTemplateLiteralTag} from '../custom-tag.js';
-        export const ${ComponentName}Icon = ({
-        width = 24,
-        height = 24,
-        hidden = false,
-        title = '${title}',
-        } = {},): string | TemplateResult => {
-        return html\`${$('svg')
-            .toString()
-            .replace(
-                'aria-hidden="..."',
-                "aria-hidden=${hidden ? 'true' : 'false'}"
-            )
-            .replace('width="..."', 'width="${width}"')
-            .replace('height="..."', 'height="${height}"')
-            .replace('aria-label="..."', 'aria-label="${title}"')}\`;
-        }
-    `;
-
-        prettier
-            .format(iconLiteral, {
-                printWidth: 100,
-                tabWidth: 2,
-                useTabs: false,
-                semi: true,
-                singleQuote: true,
-                trailingComma: 'all',
-                bracketSpacing: true,
-                jsxBracketSameLine: false,
-                arrowParens: 'avoid',
-                parser: 'typescript',
-            })
-            .then((icon) => {
-                fs.writeFileSync(location, icon, 'utf-8');
-            });
-
-        const exportString = `export {${ComponentName}Icon} from './${tag}/${id}.js';\r\n`;
-        fs.appendFileSync(
-            path.join(rootDir, 'packages', 'icons-ui', 'src', tag + '.ts'),
-            exportString,
-            'utf-8'
-        );
-
-        const iconElementName = `sp-icon-${Case.kebab(ComponentName)}`;
-
-        const currenVersionIconImport = `import { ${ComponentName}Icon as CurrentIcon } from '../${tag}/${id}.js';\r\n`;
-
-        // check if the icon is present in the other version
-        let otherVersionIconImport = defaultIconImport;
-
-        if (iconsNameList.includes(ComponentName)) {
-            const alternateTag = tag === 'icons' ? 'icons-s2' : 'icons';
-            otherVersionIconImport = `import { ${ComponentName}Icon as AlternateIcon } from '../${alternateTag}/${id}.js';\r\n`;
-        }
-
-        const spectrumVersion = tag === 'icons' ? 1 : 2;
-
-        const iconElement = `
-        ${disclaimer}
-
-        import {
-            html,
-            TemplateResult
-        } from '@spectrum-web-components/base';
-        import {
-            IconBase
-        } from '@spectrum-web-components/icon';
-        import {
-            setCustomTemplateLiteralTag
-        } from '../custom-tag.js';
-
-        ${currenVersionIconImport}
-        ${otherVersionIconImport}
-
-        /**
-         * @element ${iconElementName}
-         */
-        export class Icon${ComponentName} extends IconBase {
-            protected override render(): TemplateResult {
-                setCustomTemplateLiteralTag(html);
-
-                if(this.spectrumVersion === ${spectrumVersion}){
-                    return CurrentIcon({ hidden: !this.label, title: this.label }) as TemplateResult;
-                }
-                return AlternateIcon({ hidden: !this.label, title: this.label }) as TemplateResult;
-
+    const parsedSvg = $('svg')
+        .toString()
+        .replace(
+            'aria-hidden="..."',
+            `aria-hidden='\${hidden ? 'true' : 'false'}'`
+        )
+        .replace('width="..."', `width="\${width}"`)
+        .replace('height="..."', `height="\${height}"`)
+        .replace('aria-label="..."', `aria-label="\${title}"`);
+
+    return Promise.all([
+        writeToTemplate(
+            'id.ts.njk',
+            path.join(iconsDir, 'src', 'icons', `${id}.ts`),
+            {
+                ComponentName: Case.pascal(id),
+                id,
+                iconElementName: `sp-icon-${Case.kebab(id)}`,
+                title: Case.capital(id),
+                width: 24,
+                height: 24,
+                svg: parsedSvg,
             }
-        }
-        `;
-
-        prettier
-            .format(iconElement, {
-                printWidth: 100,
-                tabWidth: 2,
-                useTabs: false,
-                semi: true,
-                singleQuote: true,
-                trailingComma: 'all',
-                bracketSpacing: true,
-                jsxBracketSameLine: false,
-                arrowParens: 'avoid',
-                parser: 'typescript',
-            })
-            .then((iconElementFile) => {
-                fs.writeFileSync(
-                    path.join(
-                        rootDir,
-                        'packages',
-                        'icons-ui',
-                        'src',
-                        'elements',
-                        `Icon${id}.ts`
-                    ),
-                    iconElementFile,
-                    'utf-8'
-                );
-            });
-
-        const iconRegistration = `
-        ${disclaimer}
-
-        import { Icon${ComponentName} } from '../src/elements/Icon${id}.js';
-        import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
-
-        defineElement('${iconElementName}', Icon${ComponentName});
-
-        declare global {
-            interface HTMLElementTagNameMap {
-                '${iconElementName}': Icon${ComponentName};
+        ),
+        writeToTemplate(
+            'IconID.ts.njk',
+            path.join(iconsDir, 'src', 'elements', `Icon${id}.ts`),
+            {
+                ComponentName: Case.pascal(id),
+                id,
+                iconElementName: `sp-icon-${Case.kebab(id)}`,
+                title: Case.capital(id),
+                width: 24,
+                height: 24,
+                svg: parsedSvg,
             }
-        }
-        `;
+        ),
+        writeToTemplate(
+            'ElementName.ts.njk',
+            path.join(iconsDir, 'icons', `sp-icon-${Case.kebab(id)}.ts`),
+            {
+                ComponentName: Case.pascal(id),
+                id,
+                iconElementName: `sp-icon-${Case.kebab(id)}`,
+                title: Case.capital(id),
+                width: 24,
+                height: 24,
+                svg: parsedSvg,
+            }
+        ),
+    ]).then(() => ({
+        id,
+        exports: `export {${Case.pascal(id)}Icon} from './icons/${id}.js';`,
+        imports: `import '@spectrum-web-components/icons-ui/icons/sp-icon-${Case.kebab(id)}.js';`,
+        listings: `{ name: '${Case.sentence(id)}', tag: '<sp-icon-${Case.kebab(id)}>', story: (size: string): TemplateResult => html\`<sp-icon-${Case.kebab(id)} size=\$\{size\}></sp-icon-${Case.kebab(id)}>\` }`,
+    }));
+}
 
-        prettier
-            .format(iconRegistration, {
-                printWidth: 100,
-                tabWidth: 2,
-                useTabs: false,
-                semi: true,
-                singleQuote: true,
-                trailingComma: 'all',
-                bracketSpacing: true,
-                jsxBracketSameLine: false,
-                arrowParens: 'avoid',
-                parser: 'typescript',
-            })
-            .then((iconRegistrationFile) => {
-                fs.writeFileSync(
-                    path.join(
-                        rootDir,
-                        'packages',
-                        'icons-ui',
-                        'icons',
-                        `${iconElementName}.ts`
-                    ),
-                    iconRegistrationFile,
-                    'utf-8'
+/**
+ * Builds the icons and writes them to the correct directories
+ * @param {Object} options - The options for the build
+ * @param {boolean} options.verbose - Whether to log verbose output
+ * @returns {Promise<void>} - A promise that resolves when the build is complete
+ */
+async function main({ verbose = false } = {}) {
+    // Kick off the directory creation
+    const makeDirs = Promise.all(
+        ['src/icons', 'src/elements', 'icons', 'stories'].map((dirPath) => {
+            if (!fs.existsSync(path.join(iconsDir, dirPath))) {
+                return fsp.mkdir(path.join(iconsDir, dirPath), {
+                    recursive: true,
+                });
+            }
+            return Promise.resolve();
+        })
+    );
+
+    // Read the icons
+    return fg(`*.svg`, {
+        cwd: path.join(iconsDir, 'src/svg'),
+    }).then(async (icons) => {
+        // Don't start building until the directories are created
+        await makeDirs.then(() => {
+            if (verbose)
+                log.info(
+                    'All directories have been created if they did not already exist.'
                 );
-            });
+        });
 
-        const importStatement = `\r\nimport '@spectrum-web-components/icons-ui/icons/${iconElementName}.js';`;
-        const metadata = `{name: '${Case.sentence(
-            ComponentName
-        )}', tag: '<${iconElementName}>', story: (size: string): TemplateResult => html\`<${iconElementName} size=\$\{size\}></${iconElementName}>\`},\r\n`;
-        manifestImports += importStatement;
-        manifestListings += metadata;
+        // Build the icons
+        return Promise.all(icons.map(buildIcon)).then(async (results) => {
+            results = results.sort((a, b) =>
+                a.id.localeCompare(b.id, 'en', { numeric: true })
+            );
+            // Create the exports, imports, and listings
+            const exports = [
+                "export { setCustomTemplateLiteralTag } from './custom-tag.js';",
+                ...results.map(({ exports }) => exports),
+            ];
+            const imports = results.map(({ imports }) => imports);
+            const listings = results.map(({ listings }) => listings);
+
+            const promises = [
+                formatAndWrite(
+                    path.join(iconsDir, 'src', 'icons.ts'),
+                    exports.join('\r\n') + '\r\n'
+                ).then(() => {
+                    log.success(
+                        `Successfully wrote exports to ${'src/icons.ts'.cyan}.`
+                    );
+                }),
+                writeToTemplate(
+                    'icon-manifest.ts.njk',
+                    path.join(iconsDir, 'stories', 'icon-manifest.ts'),
+                    {
+                        imports: imports.join('\r\n'),
+                        listings: listings.join(',\r\n\t'),
+                    }
+                ).then(() => {
+                    log.success(
+                        `Successfully wrote icon manifest to ${'stories/icon-manifest.ts'.cyan}.`
+                    );
+                }),
+            ];
+
+            // Process all files with ESLint
+            promises.push(
+                fg(['src/icons/*.ts'], {
+                    cwd: iconsDir,
+                    absolute: true,
+                    ignore: ['src/icons/*.d.ts'],
+                }).then((builtAssets) => {
+                    // Write results to the files
+                    return Promise.all(
+                        builtAssets.map(
+                            async (filePath) => {
+                                const output = await fsp.readFile(filePath, 'utf-8');
+                                if (!output) return Promise.resolve();
+                                return formatAndWrite(
+                                    filePath,
+                                    output
+                                ).then(() => {
+                                    log.success(
+                                        `${path.basename(filePath, '.ts').green} to ${relativePrint(filePath).cyan}.`
+                                    );
+                                });
+                            }
+                        )
+                    );
+                })
+            );
+
+            return Promise.all(promises);
+        });
     });
 }
 
-const iconsV1 = (
-    await fg(`${rootDir}/node_modules/${S1IConsPackageDir}/**.svg`)
-).sort();
-
-const iconsV2 = (
-    await fg(`${rootDir}/node_modules/${S2IConsPackageDir}/**.svg`)
-).sort();
-
-const iconsV1NameList = iconsV1.map((i) => {
-    let id = path
-        .basename(i, '.svg')
-        .replace('S2_Icon_', '')
-        .replace('_20_N', '')
-        .replace('_22x20_N', '');
-
-    if (id.search(/^Ad[A-Z]/) !== -1) {
-        id = id.replace(/^Ad/, '');
-        id += 'Advert';
-    }
-
-    if (id === 'UnLink') {
-        id = 'Unlink';
-    }
-    if (id === 'TextStrikeThrough') {
-        id = 'TextStrikethrough';
-    }
-
-    let ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id);
-
-    if (ComponentName === 'TextStrikeThrough') {
-        ComponentName = 'TextStrikethrough';
-    }
-    if (ComponentName === 'UnLink') {
-        ComponentName = 'Unlink';
-    }
-
-    return ComponentName;
-});
-const iconsV2NameList = iconsV2.map((i) => {
-    let id = path
-        .basename(i, '.svg')
-        .replace('S2_Icon_', '')
-        .replace('_20_N', '')
-        .replace('_22x20_N', '');
-
-    if (id.search(/^Ad[A-Z]/) !== -1) {
-        id = id.replace(/^Ad/, '');
-        id += 'Advert';
-    }
-
-    if (id === 'UnLink') {
-        id = 'Unlink';
-    }
-    if (id === 'TextStrikeThrough') {
-        id = 'TextStrikethrough';
-    }
-
-    let ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id);
-
-    if (ComponentName === 'TextStrikeThrough') {
-        ComponentName = 'TextStrikethrough';
-    }
-    if (ComponentName === 'UnLink') {
-        ComponentName = 'Unlink';
-    }
-
-    return ComponentName;
-});
-
-await buildIcons(iconsV1, 'icons', iconsV2NameList);
-await buildIcons(iconsV2, 'icons-s2', iconsV1NameList);
-
-const exportString = `\r\nexport { setCustomTemplateLiteralTag } from './custom-tag.js';\r\n`;
-fs.appendFileSync(
-    path.join(rootDir, 'packages', 'icons-ui', 'src', 'icons.ts'),
-    exportString,
-    'utf-8'
-);
-
-fs.appendFileSync(
-    manifestPath,
-    `${manifestImports}${manifestListings}];\r\n`,
-    'utf-8'
-);
+main();
diff --git a/tools/theme/src/scale-medium.css b/packages/icons-ui/bin/templates/ElementName.ts.njk
similarity index 64%
rename from tools/theme/src/scale-medium.css
rename to packages/icons-ui/bin/templates/ElementName.ts.njk
index 36e25d838e2..30ca5b3d6c9 100644
--- a/tools/theme/src/scale-medium.css
+++ b/packages/icons-ui/bin/templates/ElementName.ts.njk
@@ -1,4 +1,4 @@
-/**
+/*!
  * Copyright 2025 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
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("@spectrum-web-components/styles/scale-medium.css");
-@import url("@spectrum-web-components/styles/tokens/medium-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/medium-vars.css");
+import { Icon{{ ComponentName }} } from '../src/elements/Icon{{ id }}.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 2px;
-    --swc-scale-factor: 1;
+defineElement('{{ iconElementName }}', Icon{{ ComponentName }});
+
+declare global {
+    interface HTMLElementTagNameMap {
+        '{{ iconElementName }}': Icon{{ ComponentName }};
+    }
 }
diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/icons-ui/bin/templates/IconID.ts.njk
similarity index 51%
rename from packages/field-group/src/spectrum-field-group.css
rename to packages/icons-ui/bin/templates/IconID.ts.njk
index f5317cbd74c..fbc20850c5b 100644
--- a/packages/field-group/src/spectrum-field-group.css
+++ b/packages/icons-ui/bin/templates/IconID.ts.njk
@@ -1,4 +1,4 @@
-/**
+/*!
  * Copyright 2025 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
@@ -10,36 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-.group {
-    flex-flow: column wrap;
-    display: flex;
-}
-
-.spectrum-FieldGroup--toplabel {
-    flex-direction: column;
-}
-
-.spectrum-FieldGroup--sidelabel {
-    flex-direction: row;
-}
-
-.group {
-    flex-flow: column wrap;
-    display: flex;
-}
-
-:host([vertical]) .group {
-    flex-direction: column;
-}
-
-:host([horizontal]) .group {
-    flex-direction: row;
-}
-
-:host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)) {
-    margin-inline-end: var(--spectrum-fieldgroup-margin);
-}
+import { html, TemplateResult } from '@spectrum-web-components/base';
+import { IconBase } from '@spectrum-web-components/icon';
+import { setCustomTemplateLiteralTag } from '../custom-tag.js';
+import { {{ ComponentName }}Icon as Icon } from '../icons/{{ id }}.js';
 
-:host([horizontal]) .group .spectrum-HelpText {
-    flex-basis: 100%;
+/**
+ * @element {{ iconElementName }}
+ * @description The {{ title }} icon
+ */
+export class Icon{{ ComponentName }} extends IconBase {
+    protected override render(): TemplateResult {
+        setCustomTemplateLiteralTag(html);
+        return Icon({ hidden: !this.label, title: this.label }) as TemplateResult;
+    }
 }
diff --git a/tools/theme/src/express/core-tokens.ts b/packages/icons-ui/bin/templates/icon-manifest.ts.njk
similarity index 65%
rename from tools/theme/src/express/core-tokens.ts
rename to packages/icons-ui/bin/templates/icon-manifest.ts.njk
index bb8e0308555..f58c5f46bb9 100644
--- a/tools/theme/src/express/core-tokens.ts
+++ b/packages/icons-ui/bin/templates/icon-manifest.ts.njk
@@ -1,4 +1,4 @@
-/**
+/*!
  * Copyright 2025 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
@@ -10,8 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import { Theme } from '../Theme.js';
+import { TemplateResult, html } from '@spectrum-web-components/base';
 
-import coreStyles from './theme-core-tokens.css.js';
+{{ imports }}
 
-Theme.registerThemeFragment('express', 'system', coreStyles);
+type IconSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+
+type IconStory = {
+    name: string;
+    tag: string;
+    story: (size: IconSize) => TemplateResult;
+};
+
+export const iconManifest: IconStory[] = [
+    {{ listings }}
+];
diff --git a/packages/icons-ui/bin/templates/id.ts.njk b/packages/icons-ui/bin/templates/id.ts.njk
new file mode 100644
index 00000000000..32a211685a4
--- /dev/null
+++ b/packages/icons-ui/bin/templates/id.ts.njk
@@ -0,0 +1,32 @@
+/*!
+ * Copyright 2025 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.
+ */
+
+import {tag as html, TemplateResult} from '../custom-tag.js';
+
+export { setCustomTemplateLiteralTag } from '../custom-tag.js';
+
+/**
+ * @param {Object} props - The properties for the icon
+ * @param {number} [props.width] - The width of the icon
+ * @param {number} [props.height] - The height of the icon
+ * @param {boolean} [props.hidden] - Whether the icon is hidden
+ * @param {string} [props.title] - The title of the icon
+ * @returns {string | TemplateResult} - The icon as a string or a TemplateResult
+ */
+export const {{ ComponentName }}Icon = ({
+    width = {{ width }},
+    height = {{ height }},
+    hidden = false,
+    title = '{{ title }}',
+} = {}): string | TemplateResult => {
+    return html`{{ svg }}`;
+};
diff --git a/packages/icons-ui/package.json b/packages/icons-ui/package.json
index f367c05a436..0888e21e298 100644
--- a/packages/icons-ui/package.json
+++ b/packages/icons-ui/package.json
@@ -50,25 +50,23 @@
         "css"
     ],
     "dependencies": {
+        "@spectrum-css/ui-icons": "^2.0.0-next.1",
         "@spectrum-web-components/base": "1.7.0",
         "@spectrum-web-components/icon": "1.7.0",
         "@spectrum-web-components/iconset": "1.7.0"
     },
     "devDependencies": {
-        "@spectrum-css/ui-icons": "^1.1.2",
-        "@spectrum-css/ui-icons-s2": "npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10",
-        "case": "^1.6.1",
-        "cheerio": "^1.0.0-rc.2",
+        "@types/nunjucks": "^3.2.6",
+        "case": "^1.6.3",
+        "cheerio": "^1.0.0",
+        "colors": "^1.4.0",
         "fast-glob": "^3.3.3",
-        "fs": "^0.0.1-security",
-        "path": "^0.12.7",
-        "prettier": "^3.5.3"
+        "nunjucks": "^3.2.4"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./src/index.js",
-        "./icons/*",
-        "./icons-s2/*"
+        "./icons/*"
     ]
 }
diff --git a/packages/icons-ui/src/svg/Add100.svg b/packages/icons-ui/src/svg/Add100.svg
new file mode 100644
index 00000000000..e7ee1e377da
--- /dev/null
+++ b/packages/icons-ui/src/svg/Add100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M8.5 4H6V1.5a1 1 0 1 0-2 0V4H1.5a1 1 0 1 0 0 2H4v2.5a1 1 0 1 0 2 0V6h2.5a1 1 0 1 0 0-2"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Add200.svg b/packages/icons-ui/src/svg/Add200.svg
new file mode 100644
index 00000000000..9b06a05fb02
--- /dev/null
+++ b/packages/icons-ui/src/svg/Add200.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <path fill="var(--iconPrimary, #222)" d="M10.021 4.959h-2.98v-2.98a1.04 1.04 0 1 0-2.082 0v2.98h-2.98a1.04 1.04 0 1 0 0 2.082h2.98v2.98a1.04 1.04 0 1 0 2.082 0v-2.98h2.98a1.04 1.04 0 1 0 0-2.082"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Add300.svg b/packages/icons-ui/src/svg/Add300.svg
new file mode 100644
index 00000000000..5bb196ecb15
--- /dev/null
+++ b/packages/icons-ui/src/svg/Add300.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <path fill="var(--iconPrimary, #222)" d="M10.61 4.915H7.085V1.39a1.084 1.084 0 1 0-2.17 0v3.525H1.39a1.084 1.084 0 1 0 0 2.17h3.525v3.525a1.084 1.084 0 1 0 2.17 0V7.085h3.525a1.084 1.084 0 1 0 0-2.17"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Add50.svg b/packages/icons-ui/src/svg/Add50.svg
new file mode 100644
index 00000000000..b579d36fe25
--- /dev/null
+++ b/packages/icons-ui/src/svg/Add50.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" class="spectrum-UIIcon" viewBox="0 0 8 8">
+  <path fill="var(--iconPrimary, #222)" d="M6.625 3.078H4.922V1.375a.922.922 0 0 0-1.844 0v1.703H1.375a.922.922 0 0 0 0 1.844h1.703v1.703a.922.922 0 0 0 1.844 0V4.922h1.703a.922.922 0 0 0 0-1.844"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Add75.svg b/packages/icons-ui/src/svg/Add75.svg
new file mode 100644
index 00000000000..403ac24cd67
--- /dev/null
+++ b/packages/icons-ui/src/svg/Add75.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" class="spectrum-UIIcon" viewBox="0 0 8 8">
+  <path fill="var(--iconPrimary, #222)" d="M7 3.04H4.96V1a.96.96 0 1 0-1.92 0v2.04H1a.96.96 0 1 0 0 1.92h2.04V7a.96.96 0 1 0 1.92 0V4.96H7a.96.96 0 1 0 0-1.92"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Arrow100.svg b/packages/icons-ui/src/svg/Arrow100.svg
new file mode 100644
index 00000000000..a6c433499cd
--- /dev/null
+++ b/packages/icons-ui/src/svg/Arrow100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M9.95 4.997c0-.052-.02-.102-.03-.153-.01-.058-.013-.118-.035-.173l-.003-.009a.8.8 0 0 0-.136-.203c-.018-.023-.026-.05-.047-.072l-.005-.005V4.38l-3.07-3.12a.875.875 0 1 0-1.248 1.227l1.61 1.637H.926a.875.875 0 1 0 0 1.75h6.062L5.376 7.512a.875.875 0 1 0 1.248 1.226l3.07-3.119.005-.006c.021-.021.029-.049.047-.072a.8.8 0 0 0 .136-.203l.003-.009c.022-.055.024-.115.035-.173.01-.051.03-.1.03-.153z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Arrow400.svg b/packages/icons-ui/src/svg/Arrow400.svg
new file mode 100644
index 00000000000..af171ce0e68
--- /dev/null
+++ b/packages/icons-ui/src/svg/Arrow400.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="spectrum-UIIcon" viewBox="0 0 16 16">
+  <path fill="var(--iconPrimary, #222)" d="M14.786 8.378a.99.99 0 0 0-.214-1.078l-4.63-4.63a.988.988 0 1 0-1.399 1.398l2.942 2.943H1.87a.99.99 0 0 0 0 1.978h9.615l-2.942 2.943a.989.989 0 1 0 1.398 1.398l4.63-4.63a1 1 0 0 0 .215-.322"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Asterisk100.svg b/packages/icons-ui/src/svg/Asterisk100.svg
new file mode 100644
index 00000000000..af668563976
--- /dev/null
+++ b/packages/icons-ui/src/svg/Asterisk100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" class="spectrum-UIIcon" viewBox="0 0 8 8">
+  <path fill="var(--iconPrimary, #222)" d="M6.575 6.555c.055.056.092.13 0 .2l-1.149.741c-.092.056-.129.019-.166-.074L3.834 4.94 1.963 7c-.019.036-.074.073-.129 0l-.889-.927c-.093-.055-.074-.111 0-.166l2.111-1.76L.648 3.24c-.037 0-.092-.074-.056-.167l.63-1.259a.1.1 0 0 1 .121-.066.1.1 0 0 1 .046.03L3.5 3.148l.13-2.7a.1.1 0 0 1 .081-.11h.03l1.537.2c.093 0 .111.036.093.13l-.723 2.646 2.445-.741c.055-.037.111-.037.148.074l.241 1.37c.018.093 0 .13-.074.13l-2.556.2z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Asterisk200.svg b/packages/icons-ui/src/svg/Asterisk200.svg
new file mode 100644
index 00000000000..91754591db9
--- /dev/null
+++ b/packages/icons-ui/src/svg/Asterisk200.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M7.861 7.953c.062.063.1.146 0 .23l-1.293.834c-.1.063-.145.021-.187-.083l-1.6-2.793-2.105 2.314c-.021.04-.083.082-.145 0l-1-1.043c-.1-.062-.083-.125 0-.187l2.375-1.981-2.715-1.026c-.042 0-.1-.083-.063-.188l.707-1.412a.11.11 0 0 1 .136-.074q.03.01.052.034l2.378 1.54.146-3.043A.11.11 0 0 1 4.638.95h.034l1.73.23c.1 0 .125.042.1.146l-.814 2.979 2.751-.834c.062-.042.125-.042.167.083l.271 1.542c.02.1 0 .146-.083.146l-2.876.23z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Asterisk300.svg b/packages/icons-ui/src/svg/Asterisk300.svg
new file mode 100644
index 00000000000..3cbd7e379f5
--- /dev/null
+++ b/packages/icons-ui/src/svg/Asterisk300.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M8.266 8.324c.07.071.116.164 0 .258l-1.454.938c-.116.071-.163.024-.21-.094l-1.8-3.141-2.367 2.6c-.024.045-.094.092-.163 0l-1.13-1.167c-.118-.07-.094-.141 0-.21l2.671-2.227L.766 4.13c-.047 0-.116-.094-.071-.211l.8-1.593a.124.124 0 0 1 .153-.084.13.13 0 0 1 .058.038l2.669 1.738.164-3.422a.124.124 0 0 1 .1-.14h.038l1.945.258c.118 0 .14.047.118.164l-.915 3.349 3.094-.938c.07-.047.14-.047.187.094l.3 1.734c.023.118 0 .164-.094.164l-3.234.258z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Checkmark100.svg b/packages/icons-ui/src/svg/Checkmark100.svg
new file mode 100644
index 00000000000..6d082e8f7f3
--- /dev/null
+++ b/packages/icons-ui/src/svg/Checkmark100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M3.5 9.503a1 1 0 0 1-.774-.367l-2.45-3A1 1 0 1 1 1.823 4.87L3.481 6.9 8.161.888a1 1 0 0 1 1.579 1.23l-5.45 7a1 1 0 0 1-.777.385z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Checkmark200.svg b/packages/icons-ui/src/svg/Checkmark200.svg
new file mode 100644
index 00000000000..8aae373b1c5
--- /dev/null
+++ b/packages/icons-ui/src/svg/Checkmark200.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <path fill="var(--iconPrimary, #222)" d="M4.313 10.98c-.308 0-.602-.137-.8-.375L.648 7.165a1.042 1.042 0 0 1 1.6-1.334L4.29 8.283l5.442-6.93a1.043 1.043 0 0 1 1.64 1.288l-6.24 7.941a1.04 1.04 0 0 1-.804.397z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Checkmark300.svg b/packages/icons-ui/src/svg/Checkmark300.svg
new file mode 100644
index 00000000000..bdcc9296de7
--- /dev/null
+++ b/packages/icons-ui/src/svg/Checkmark300.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="spectrum-UIIcon" viewBox="0 0 14 14">
+  <path fill="var(--iconPrimary, #222)" d="M5.102 12.517c-.322 0-.627-.143-.833-.391L.989 8.191a1.083 1.083 0 0 1 .139-1.527 1.08 1.08 0 0 1 1.527.139l2.422 2.904 6.243-7.946a1.086 1.086 0 0 1 1.707 1.34l-7.072 9a1.09 1.09 0 0 1-.838.416z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Checkmark400.svg b/packages/icons-ui/src/svg/Checkmark400.svg
new file mode 100644
index 00000000000..9400f42a2a3
--- /dev/null
+++ b/packages/icons-ui/src/svg/Checkmark400.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="spectrum-UIIcon" viewBox="0 0 16 16">
+  <path fill="var(--iconPrimary, #222)" d="M5.864 14.115c-.335 0-.653-.15-.868-.407L1.25 9.21a1.13 1.13 0 1 1 1.736-1.447l2.854 3.424 7.148-9.1a1.13 1.13 0 1 1 1.777 1.396l-8.011 10.2a1.13 1.13 0 0 1-.872.432z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Checkmark50.svg b/packages/icons-ui/src/svg/Checkmark50.svg
new file mode 100644
index 00000000000..704b869ecce
--- /dev/null
+++ b/packages/icons-ui/src/svg/Checkmark50.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M3.815 8.69a.92.92 0 0 1-.708-.333L1.216 6.09a.922.922 0 0 1 1.416-1.18l1.162 1.394 3.56-4.532a.92.92 0 1 1 1.45 1.14L4.54 8.336a.92.92 0 0 1-.712.352z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Checkmark75.svg b/packages/icons-ui/src/svg/Checkmark75.svg
new file mode 100644
index 00000000000..9b0c902d8a2
--- /dev/null
+++ b/packages/icons-ui/src/svg/Checkmark75.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M3.667 9.074a.96.96 0 0 1-.737-.345L.753 6.116a.96.96 0 1 1 1.474-1.228l1.418 1.7 4.112-5.233a.96.96 0 1 1 1.51 1.186L4.422 8.707a.96.96 0 0 1-.741.367z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Chevron100.svg b/packages/icons-ui/src/svg/Chevron100.svg
new file mode 100644
index 00000000000..5edaf03b675
--- /dev/null
+++ b/packages/icons-ui/src/svg/Chevron100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M7.965 5.178C7.978 5.118 8 5.061 8 5s-.021-.118-.034-.178c-.01-.05-.01-.102-.03-.15-.023-.058-.068-.107-.104-.16-.03-.042-.047-.09-.084-.127l-.004-.003-.003-.004L3.615.303a.875.875 0 1 0-1.23 1.244L5.88 5 2.385 8.453a.875.875 0 1 0 1.23 1.244L7.74 5.622l.003-.004.004-.003c.037-.038.055-.085.084-.127.036-.053.08-.102.104-.16.02-.048.02-.1.03-.15"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Chevron200.svg b/packages/icons-ui/src/svg/Chevron200.svg
new file mode 100644
index 00000000000..f6f23faf52c
--- /dev/null
+++ b/packages/icons-ui/src/svg/Chevron200.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <path fill="var(--iconPrimary, #222)" d="M9.301 6c0-.049-.02-.095-.028-.143-.01-.068-.013-.136-.039-.2a.9.9 0 0 0-.2-.302L4.343.663a.912.912 0 0 0-1.29 1.29L7.102 6l-4.047 4.048a.912.912 0 0 0 1.289 1.289l4.691-4.692a.9.9 0 0 0 .2-.302c.026-.064.028-.132.04-.2C9.28 6.095 9.3 6.05 9.3 6"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Chevron300.svg b/packages/icons-ui/src/svg/Chevron300.svg
new file mode 100644
index 00000000000..06ad2ade3f5
--- /dev/null
+++ b/packages/icons-ui/src/svg/Chevron300.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="spectrum-UIIcon" viewBox="0 0 14 14">
+  <path fill="var(--iconPrimary, #222)" d="M10.361 6.328 5.03.996a.954.954 0 0 0-1.343 0 .95.95 0 0 0 0 1.344L8.346 7l-4.66 4.66a.95.95 0 0 0 1.344 1.344l5.331-5.332a.95.95 0 0 0 0-1.344"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Chevron400.svg b/packages/icons-ui/src/svg/Chevron400.svg
new file mode 100644
index 00000000000..f8a01dbcabb
--- /dev/null
+++ b/packages/icons-ui/src/svg/Chevron400.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="spectrum-UIIcon" viewBox="0 0 16 16">
+  <path fill="var(--iconPrimary, #222)" d="M11.726 7.3 5.67 1.247a.988.988 0 1 0-1.4 1.398L9.628 8 4.27 13.355a.988.988 0 1 0 1.399 1.399l6.056-6.055a.99.99 0 0 0 0-1.398"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Chevron50.svg b/packages/icons-ui/src/svg/Chevron50.svg
new file mode 100644
index 00000000000..6c80a8c3080
--- /dev/null
+++ b/packages/icons-ui/src/svg/Chevron50.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" class="spectrum-UIIcon" viewBox="0 0 6 6">
+  <path fill="var(--iconPrimary, #222)" d="M1.985 5.961a.695.695 0 0 1-.7-.704.7.7 0 0 1 .209-.493L3.279 3 1.51 1.251A.7.7 0 0 1 1.3.757.696.696 0 0 1 2.492.255l2.275 2.247a.7.7 0 0 1 0 .996L2.477 5.76a.7.7 0 0 1-.492.201"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Chevron75.svg b/packages/icons-ui/src/svg/Chevron75.svg
new file mode 100644
index 00000000000..1913da9f1cd
--- /dev/null
+++ b/packages/icons-ui/src/svg/Chevron75.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M7.483 4.406 3.86.783a.84.84 0 1 0-1.188 1.188L5.702 5l-3.03 3.03A.84.84 0 1 0 3.86 9.216l3.623-3.623a.84.84 0 0 0 0-1.188"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/CornerTriangle100.svg b/packages/icons-ui/src/svg/CornerTriangle100.svg
new file mode 100644
index 00000000000..8b45d75972a
--- /dev/null
+++ b/packages/icons-ui/src/svg/CornerTriangle100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5" class="spectrum-UIIcon" viewBox="0 0 5 5">
+  <path fill="var(--iconPrimary, #222)" d="M.154 4.146 4.147.154A.5.5 0 0 1 5 .507V4.25a.75.75 0 0 1-.75.75H.507a.5.5 0 0 1-.354-.854"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/CornerTriangle200.svg b/packages/icons-ui/src/svg/CornerTriangle200.svg
new file mode 100644
index 00000000000..73f555eeb10
--- /dev/null
+++ b/packages/icons-ui/src/svg/CornerTriangle200.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" class="spectrum-UIIcon" viewBox="0 0 6 6">
+  <path fill="var(--iconPrimary, #222)" d="M.826 5.146 5.147.826a.5.5 0 0 1 .854.353L6 5.25a.75.75 0 0 1-.75.75H1.18a.5.5 0 0 1-.354-.854"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/CornerTriangle300.svg b/packages/icons-ui/src/svg/CornerTriangle300.svg
new file mode 100644
index 00000000000..f3e396f8d19
--- /dev/null
+++ b/packages/icons-ui/src/svg/CornerTriangle300.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="7" height="7" class="spectrum-UIIcon" viewBox="0 0 7 7">
+  <path fill="var(--iconPrimary, #222)" d="M.821 6.146 6.147.821A.5.5 0 0 1 7 1.175L6.999 6.25a.75.75 0 0 1-.75.75H1.174a.5.5 0 0 1-.353-.854"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/CornerTriangle75.svg b/packages/icons-ui/src/svg/CornerTriangle75.svg
new file mode 100644
index 00000000000..adc2a60646c
--- /dev/null
+++ b/packages/icons-ui/src/svg/CornerTriangle75.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5" class="spectrum-UIIcon" viewBox="0 0 5 5">
+  <path fill="var(--iconPrimary, #222)" d="M.764 4.488 4.489.762a.3.3 0 0 1 .513.212L5 4.25a.75.75 0 0 1-.75.75H.976a.3.3 0 0 1-.212-.512"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Cross100.svg b/packages/icons-ui/src/svg/Cross100.svg
new file mode 100644
index 00000000000..c29d221fd64
--- /dev/null
+++ b/packages/icons-ui/src/svg/Cross100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" class="spectrum-UIIcon" viewBox="0 0 8 8">
+  <path fill="var(--iconPrimary, #222)" d="m5.238 4 2.456-2.456A.876.876 0 0 0 6.457.306L4 2.762 1.543.306A.875.875 0 1 0 .306 1.544L2.762 4 .306 6.456a.876.876 0 0 0 1.237 1.238L4 5.238l2.457 2.456a.87.87 0 0 0 1.237 0 .876.876 0 0 0 0-1.238z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Cross200.svg b/packages/icons-ui/src/svg/Cross200.svg
new file mode 100644
index 00000000000..303de9df8d4
--- /dev/null
+++ b/packages/icons-ui/src/svg/Cross200.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="m6.289 5 2.922-2.923A.912.912 0 0 0 7.922.788L5 3.711 2.078.788a.912.912 0 0 0-1.29 1.29L3.712 5 .789 7.923a.912.912 0 0 0 1.289 1.289L5 6.289l2.922 2.923a.91.91 0 0 0 1.29 0 .91.91 0 0 0 0-1.29z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Cross300.svg b/packages/icons-ui/src/svg/Cross300.svg
new file mode 100644
index 00000000000..cf60cae4390
--- /dev/null
+++ b/packages/icons-ui/src/svg/Cross300.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <path fill="var(--iconPrimary, #222)" d="m7.342 6 3.396-3.396a.95.95 0 1 0-1.342-1.342L6 4.658 2.604 1.262a.95.95 0 1 0-1.343 1.342L4.659 6 1.262 9.396a.95.95 0 1 0 1.343 1.342L6 7.342l3.396 3.396a.946.946 0 0 0 1.342.001.95.95 0 0 0 0-1.343z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Cross400.svg b/packages/icons-ui/src/svg/Cross400.svg
new file mode 100644
index 00000000000..17ae1b7cae5
--- /dev/null
+++ b/packages/icons-ui/src/svg/Cross400.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <path fill="var(--iconPrimary, #222)" d="m7.398 6 3.932-3.932A.989.989 0 1 0 9.932.67L6 4.602 2.068.67A.988.988 0 1 0 .67 2.068L4.602 6 .67 9.932a.989.989 0 1 0 1.398 1.398L6 7.398l3.932 3.932a.985.985 0 0 0 1.398 0 .99.99 0 0 0 0-1.398z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Cross500.svg b/packages/icons-ui/src/svg/Cross500.svg
new file mode 100644
index 00000000000..e315377ec13
--- /dev/null
+++ b/packages/icons-ui/src/svg/Cross500.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="spectrum-UIIcon" viewBox="0 0 14 14">
+  <path fill="var(--iconPrimary, #222)" d="m8.457 7 4.54-4.54a1.031 1.031 0 0 0-1.457-1.456L7 5.543l-4.54-4.54a1.03 1.03 0 0 0-1.457 1.458L5.543 7l-4.54 4.54a1.031 1.031 0 0 0 1.457 1.456L7 8.457l4.54 4.54a1.027 1.027 0 0 0 1.457 0 1.03 1.03 0 0 0 0-1.458z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Cross600.svg b/packages/icons-ui/src/svg/Cross600.svg
new file mode 100644
index 00000000000..ac09b6343ca
--- /dev/null
+++ b/packages/icons-ui/src/svg/Cross600.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="spectrum-UIIcon" viewBox="0 0 16 16">
+  <path fill="var(--iconPrimary, #222)" d="m9.518 8 5.23-5.229a1.073 1.073 0 0 0-1.519-1.517L8 6.483l-5.229-5.23a1.073 1.073 0 0 0-1.518 1.518l5.23 5.23-5.23 5.228a1.073 1.073 0 0 0 1.518 1.518l5.23-5.229 5.228 5.23a1.073 1.073 0 1 0 1.518-1.519z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Cross75.svg b/packages/icons-ui/src/svg/Cross75.svg
new file mode 100644
index 00000000000..e13a110f942
--- /dev/null
+++ b/packages/icons-ui/src/svg/Cross75.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" class="spectrum-UIIcon" viewBox="0 0 8 8">
+  <path fill="var(--iconPrimary, #222)" d="m5.188 4 2.14-2.14A.84.84 0 0 0 6.14.671L4 2.812 1.86.672A.84.84 0 0 0 .672 1.859L2.812 4 .672 6.14A.84.84 0 0 0 1.86 7.329L4 5.188l2.14 2.14a.84.84 0 0 0 1.188 0 .84.84 0 0 0 0-1.187z"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Dash100.svg b/packages/icons-ui/src/svg/Dash100.svg
new file mode 100644
index 00000000000..b999e39178a
--- /dev/null
+++ b/packages/icons-ui/src/svg/Dash100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M8.5 6h-7a1 1 0 1 1 0-2h7a1 1 0 1 1 0 2"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Dash200.svg b/packages/icons-ui/src/svg/Dash200.svg
new file mode 100644
index 00000000000..ad1fb7fd198
--- /dev/null
+++ b/packages/icons-ui/src/svg/Dash200.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <path fill="var(--iconPrimary, #222)" d="M10.021 7.041H1.98a1.04 1.04 0 1 1 0-2.082h8.042a1.04 1.04 0 1 1 0 2.082"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Dash300.svg b/packages/icons-ui/src/svg/Dash300.svg
new file mode 100644
index 00000000000..088990ab145
--- /dev/null
+++ b/packages/icons-ui/src/svg/Dash300.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <path fill="var(--iconPrimary, #222)" d="M10.61 7.085H1.39a1.084 1.084 0 1 1 0-2.17h9.22a1.084 1.084 0 1 1 0 2.17"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Dash50.svg b/packages/icons-ui/src/svg/Dash50.svg
new file mode 100644
index 00000000000..3a364e588a1
--- /dev/null
+++ b/packages/icons-ui/src/svg/Dash50.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" class="spectrum-UIIcon" viewBox="0 0 8 8">
+  <path fill="var(--iconPrimary, #222)" d="M6.634 4.922H1.366a.922.922 0 0 1 0-1.844h5.268a.922.922 0 0 1 0 1.844"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Dash75.svg b/packages/icons-ui/src/svg/Dash75.svg
new file mode 100644
index 00000000000..c0df96d142b
--- /dev/null
+++ b/packages/icons-ui/src/svg/Dash75.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" class="spectrum-UIIcon" viewBox="0 0 8 8">
+  <path fill="var(--iconPrimary, #222)" d="M6.99 4.96H1.01a.96.96 0 1 1 0-1.92h5.98a.96.96 0 1 1 0 1.92"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/DragHandle100.svg b/packages/icons-ui/src/svg/DragHandle100.svg
new file mode 100644
index 00000000000..264652db857
--- /dev/null
+++ b/packages/icons-ui/src/svg/DragHandle100.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <circle cx="3" cy="9" r="1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="3" cy="5" r="1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="3" cy="1" r="1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="7" cy="9" r="1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="7" cy="5" r="1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="7" cy="1" r="1" fill="var(--iconPrimary, #222)"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/DragHandle200.svg b/packages/icons-ui/src/svg/DragHandle200.svg
new file mode 100644
index 00000000000..8c5bc6bafd9
--- /dev/null
+++ b/packages/icons-ui/src/svg/DragHandle200.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <circle cx="3.8" cy="10.4" r="1.1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="3.8" cy="6" r="1.1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="3.8" cy="1.6" r="1.1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="8.2" cy="10.4" r="1.1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="8.2" cy="6" r="1.1" fill="var(--iconPrimary, #222)"/>
+  <circle cx="8.2" cy="1.6" r="1.1" fill="var(--iconPrimary, #222)"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/DragHandle300.svg b/packages/icons-ui/src/svg/DragHandle300.svg
new file mode 100644
index 00000000000..0ad3a96f80b
--- /dev/null
+++ b/packages/icons-ui/src/svg/DragHandle300.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="spectrum-UIIcon" viewBox="0 0 14 14">
+  <circle cx="4.6" cy="11.8" r="1.2" fill="var(--iconPrimary, #222)"/>
+  <circle cx="4.6" cy="7" r="1.2" fill="var(--iconPrimary, #222)"/>
+  <circle cx="4.6" cy="2.2" r="1.2" fill="var(--iconPrimary, #222)"/>
+  <circle cx="9.4" cy="11.8" r="1.2" fill="var(--iconPrimary, #222)"/>
+  <circle cx="9.4" cy="7" r="1.2" fill="var(--iconPrimary, #222)"/>
+  <circle cx="9.4" cy="2.2" r="1.2" fill="var(--iconPrimary, #222)"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/DragHandle75.svg b/packages/icons-ui/src/svg/DragHandle75.svg
new file mode 100644
index 00000000000..d92e06449c8
--- /dev/null
+++ b/packages/icons-ui/src/svg/DragHandle75.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <circle cx="3.2" cy="8.6" r=".9" fill="var(--iconPrimary, #222)"/>
+  <circle cx="3.2" cy="5" r=".9" fill="var(--iconPrimary, #222)"/>
+  <circle cx="3.2" cy="1.4" r=".9" fill="var(--iconPrimary, #222)"/>
+  <circle cx="6.8" cy="8.6" r=".9" fill="var(--iconPrimary, #222)"/>
+  <circle cx="6.8" cy="5" r=".9" fill="var(--iconPrimary, #222)"/>
+  <circle cx="6.8" cy="1.4" r=".9" fill="var(--iconPrimary, #222)"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/Gripper100.svg b/packages/icons-ui/src/svg/Gripper100.svg
new file mode 100644
index 00000000000..01f54f829e4
--- /dev/null
+++ b/packages/icons-ui/src/svg/Gripper100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="4" class="spectrum-UIIcon" viewBox="0 0 24 4">
+  <path fill="var(--iconPrimary, #222)" d="M22 4H2a2 2 0 0 1 0-4h20a2 2 0 0 1 0 4"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/LinkOut100.svg b/packages/icons-ui/src/svg/LinkOut100.svg
new file mode 100644
index 00000000000..59c2f637488
--- /dev/null
+++ b/packages/icons-ui/src/svg/LinkOut100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" class="spectrum-UIIcon" viewBox="0 0 10 10">
+  <path fill="var(--iconPrimary, #222)" d="M8.125 1H3.741a.875.875 0 1 0 0 1.75h2.27l-4.88 4.88a.88.88 0 0 0 0 1.24.873.873 0 0 0 1.238 0L7.25 3.987v2.27a.875.875 0 1 0 1.75 0V1.876A.875.875 0 0 0 8.125 1"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/LinkOut200.svg b/packages/icons-ui/src/svg/LinkOut200.svg
new file mode 100644
index 00000000000..c0c5b0627d0
--- /dev/null
+++ b/packages/icons-ui/src/svg/LinkOut200.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="spectrum-UIIcon" viewBox="0 0 12 12">
+  <path fill="var(--iconPrimary, #222)" d="M10.089 1h-5.51a.911.911 0 0 0 0 1.822h3.31L1.355 9.355a.91.91 0 1 0 1.29 1.29L9.178 4.11v3.31a.911.911 0 0 0 1.822 0V1.91a.91.91 0 0 0-.911-.91"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/LinkOut300.svg b/packages/icons-ui/src/svg/LinkOut300.svg
new file mode 100644
index 00000000000..df33010cb05
--- /dev/null
+++ b/packages/icons-ui/src/svg/LinkOut300.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="spectrum-UIIcon" viewBox="0 0 14 14">
+  <path fill="var(--iconPrimary, #222)" d="M12.05 1H5.164a.949.949 0 1 0 0 1.898h4.595l-8.18 8.18a.95.95 0 0 0 1.344 1.344l8.18-8.18v4.595a.949.949 0 1 0 1.898 0V1.949A.95.95 0 0 0 12.05 1"/>
+</svg>
diff --git a/packages/icons-ui/src/svg/LinkOut400.svg b/packages/icons-ui/src/svg/LinkOut400.svg
new file mode 100644
index 00000000000..d98e1fd7397
--- /dev/null
+++ b/packages/icons-ui/src/svg/LinkOut400.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="spectrum-UIIcon" viewBox="0 0 16 16">
+  <path fill="var(--iconPrimary, #222)" d="M14.01 1h-8a.99.99 0 0 0 0 1.979h5.613L1.551 13.05a.988.988 0 1 0 1.398 1.398L13.021 4.377v5.612a.99.99 0 0 0 1.979 0v-8A.99.99 0 0 0 14.01 1"/>
+</svg>
diff --git a/packages/icons-ui/test/benchmark/test-attribute-many.ts b/packages/icons-ui/test/benchmark/test-attribute-many.ts
index 75080b2fabc..023bcdc5392 100644
--- a/packages/icons-ui/test/benchmark/test-attribute-many.ts
+++ b/packages/icons-ui/test/benchmark/test-attribute-many.ts
@@ -19,52 +19,51 @@ const iconset = document.createElement('sp-icons-medium');
 document.body.append(iconset);
 
 measureFixtureCreation(html`
+    <sp-icon name="ui:Add50"></sp-icon>
+    <sp-icon name="ui:Add75"></sp-icon>
+    <sp-icon name="ui:Add100"></sp-icon>
+    <sp-icon name="ui:Add200"></sp-icon>
+    <sp-icon name="ui:Add300"></sp-icon>
     <sp-icon name="ui:Arrow100"></sp-icon>
-    <sp-icon name="ui:Arrow200"></sp-icon>
-    <sp-icon name="ui:Arrow300"></sp-icon>
     <sp-icon name="ui:Arrow400"></sp-icon>
-    <sp-icon name="ui:Arrow500"></sp-icon>
-    <sp-icon name="ui:Arrow600"></sp-icon>
-    <sp-icon name="ui:Arrow75"></sp-icon>
     <sp-icon name="ui:Asterisk100"></sp-icon>
     <sp-icon name="ui:Asterisk200"></sp-icon>
     <sp-icon name="ui:Asterisk300"></sp-icon>
-    <sp-icon name="ui:Asterisk75"></sp-icon>
+    <sp-icon name="ui:Checkmark50"></sp-icon>
+    <sp-icon name="ui:Checkmark75"></sp-icon>
     <sp-icon name="ui:Checkmark100"></sp-icon>
     <sp-icon name="ui:Checkmark200"></sp-icon>
     <sp-icon name="ui:Checkmark300"></sp-icon>
     <sp-icon name="ui:Checkmark400"></sp-icon>
-    <sp-icon name="ui:Checkmark50"></sp-icon>
-    <sp-icon name="ui:Checkmark500"></sp-icon>
-    <sp-icon name="ui:Checkmark600"></sp-icon>
-    <sp-icon name="ui:Checkmark75"></sp-icon>
+    <sp-icon name="ui:Chevron50"></sp-icon>
+    <sp-icon name="ui:Chevron75"></sp-icon>
     <sp-icon name="ui:Chevron100"></sp-icon>
     <sp-icon name="ui:Chevron200"></sp-icon>
     <sp-icon name="ui:Chevron300"></sp-icon>
     <sp-icon name="ui:Chevron400"></sp-icon>
-    <sp-icon name="ui:Chevron500"></sp-icon>
-    <sp-icon name="ui:Chevron600"></sp-icon>
-    <sp-icon name="ui:Chevron75"></sp-icon>
+    <sp-icon name="ui:CornerTriangle75"></sp-icon>
     <sp-icon name="ui:CornerTriangle100"></sp-icon>
     <sp-icon name="ui:CornerTriangle200"></sp-icon>
     <sp-icon name="ui:CornerTriangle300"></sp-icon>
-    <sp-icon name="ui:CornerTriangle75"></sp-icon>
+    <sp-icon name="ui:Cross75"></sp-icon>
     <sp-icon name="ui:Cross100"></sp-icon>
     <sp-icon name="ui:Cross200"></sp-icon>
     <sp-icon name="ui:Cross300"></sp-icon>
     <sp-icon name="ui:Cross400"></sp-icon>
     <sp-icon name="ui:Cross500"></sp-icon>
     <sp-icon name="ui:Cross600"></sp-icon>
-    <sp-icon name="ui:Cross75"></sp-icon>
+    <sp-icon name="ui:Dash50"></sp-icon>
+    <sp-icon name="ui:Dash75"></sp-icon>
     <sp-icon name="ui:Dash100"></sp-icon>
     <sp-icon name="ui:Dash200"></sp-icon>
     <sp-icon name="ui:Dash300"></sp-icon>
-    <sp-icon name="ui:Dash400"></sp-icon>
-    <sp-icon name="ui:Dash50"></sp-icon>
-    <sp-icon name="ui:Dash500"></sp-icon>
-    <sp-icon name="ui:Dash600"></sp-icon>
-    <sp-icon name="ui:Dash75"></sp-icon>
-    <sp-icon name="ui:DoubleGripper"></sp-icon>
-    <sp-icon name="ui:SingleGripper"></sp-icon>
-    <sp-icon name="ui:TripleGripper"></sp-icon>
+    <sp-icon name="ui:DragHandle75"></sp-icon>
+    <sp-icon name="ui:DragHandle100"></sp-icon>
+    <sp-icon name="ui:DragHandle200"></sp-icon>
+    <sp-icon name="ui:DragHandle300"></sp-icon>
+    <sp-icon name="ui:Gripper100"></sp-icon>
+    <sp-icon name="ui:LinkOut100"></sp-icon>
+    <sp-icon name="ui:LinkOut200"></sp-icon>
+    <sp-icon name="ui:LinkOut300"></sp-icon>
+    <sp-icon name="ui:LinkOut400"></sp-icon>
 `);
diff --git a/packages/icons-ui/test/benchmark/test-injected-many.ts b/packages/icons-ui/test/benchmark/test-injected-many.ts
index a9bd9a7367f..e886d1e4609 100644
--- a/packages/icons-ui/test/benchmark/test-injected-many.ts
+++ b/packages/icons-ui/test/benchmark/test-injected-many.ts
@@ -11,14 +11,13 @@
  */
 
 import '@spectrum-web-components/icon/sp-icon.js';
-import { Arrow75Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow75.js';
+import { Add50Icon } from '@spectrum-web-components/icons-ui/src/icons/Add50.js';
+import { Add75Icon } from '@spectrum-web-components/icons-ui/src/icons/Add75.js';
+import { Add100Icon } from '@spectrum-web-components/icons-ui/src/icons/Add100.js';
+import { Add200Icon } from '@spectrum-web-components/icons-ui/src/icons/Add200.js';
+import { Add300Icon } from '@spectrum-web-components/icons-ui/src/icons/Add300.js';
 import { Arrow100Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow100.js';
-import { Arrow200Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow200.js';
-import { Arrow300Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow300.js';
 import { Arrow400Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow400.js';
-import { Arrow500Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow500.js';
-import { Arrow600Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow600.js';
-import { Asterisk75Icon } from '@spectrum-web-components/icons-ui/src/icons/Asterisk75.js';
 import { Asterisk100Icon } from '@spectrum-web-components/icons-ui/src/icons/Asterisk100.js';
 import { Asterisk200Icon } from '@spectrum-web-components/icons-ui/src/icons/Asterisk200.js';
 import { Asterisk300Icon } from '@spectrum-web-components/icons-ui/src/icons/Asterisk300.js';
@@ -28,15 +27,12 @@ import { Checkmark100Icon } from '@spectrum-web-components/icons-ui/src/icons/Ch
 import { Checkmark200Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark200.js';
 import { Checkmark300Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark300.js';
 import { Checkmark400Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark400.js';
-import { Checkmark500Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark500.js';
-import { Checkmark600Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark600.js';
+import { Chevron50Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron50.js';
 import { Chevron75Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron75.js';
 import { Chevron100Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron100.js';
 import { Chevron200Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron200.js';
 import { Chevron300Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron300.js';
 import { Chevron400Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron400.js';
-import { Chevron500Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron500.js';
-import { Chevron600Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron600.js';
 import { CornerTriangle75Icon } from '@spectrum-web-components/icons-ui/src/icons/CornerTriangle75.js';
 import { CornerTriangle100Icon } from '@spectrum-web-components/icons-ui/src/icons/CornerTriangle100.js';
 import { CornerTriangle200Icon } from '@spectrum-web-components/icons-ui/src/icons/CornerTriangle200.js';
@@ -53,12 +49,15 @@ import { Dash75Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash75.j
 import { Dash100Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash100.js';
 import { Dash200Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash200.js';
 import { Dash300Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash300.js';
-import { Dash400Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash400.js';
-import { Dash500Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash500.js';
-import { Dash600Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash600.js';
-import { DoubleGripperIcon } from '@spectrum-web-components/icons-ui/src/icons/DoubleGripper.js';
-import { SingleGripperIcon } from '@spectrum-web-components/icons-ui/src/icons/SingleGripper.js';
-import { TripleGripperIcon } from '@spectrum-web-components/icons-ui/src/icons/TripleGripper.js';
+import { DragHandle75Icon } from '@spectrum-web-components/icons-ui/src/icons/DragHandle75.js';
+import { DragHandle100Icon } from '@spectrum-web-components/icons-ui/src/icons/DragHandle100.js';
+import { DragHandle200Icon } from '@spectrum-web-components/icons-ui/src/icons/DragHandle200.js';
+import { DragHandle300Icon } from '@spectrum-web-components/icons-ui/src/icons/DragHandle300.js';
+import { Gripper100Icon } from '@spectrum-web-components/icons-ui/src/icons/Gripper100.js';
+import { LinkOut100Icon } from '@spectrum-web-components/icons-ui/src/icons/LinkOut100.js';
+import { LinkOut200Icon } from '@spectrum-web-components/icons-ui/src/icons/LinkOut200.js';
+import { LinkOut300Icon } from '@spectrum-web-components/icons-ui/src/icons/LinkOut300.js';
+import { LinkOut400Icon } from '@spectrum-web-components/icons-ui/src/icons/LinkOut400.js';
 import { setCustomTemplateLiteralTag } from '@spectrum-web-components/icons-ui/src/custom-tag.js';
 import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
@@ -66,14 +65,13 @@ import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
 setCustomTemplateLiteralTag(html);
 
 measureFixtureCreation(html`
-    <sp-icon>${Arrow75Icon()}</sp-icon>
+    <sp-icon>${Add50Icon()}</sp-icon>
+    <sp-icon>${Add75Icon()}</sp-icon>
+    <sp-icon>${Add100Icon()}</sp-icon>
+    <sp-icon>${Add200Icon()}</sp-icon>
+    <sp-icon>${Add300Icon()}</sp-icon>
     <sp-icon>${Arrow100Icon()}</sp-icon>
-    <sp-icon>${Arrow200Icon()}</sp-icon>
-    <sp-icon>${Arrow300Icon()}</sp-icon>
     <sp-icon>${Arrow400Icon()}</sp-icon>
-    <sp-icon>${Arrow500Icon()}</sp-icon>
-    <sp-icon>${Arrow600Icon()}</sp-icon>
-    <sp-icon>${Asterisk75Icon()}</sp-icon>
     <sp-icon>${Asterisk100Icon()}</sp-icon>
     <sp-icon>${Asterisk200Icon()}</sp-icon>
     <sp-icon>${Asterisk300Icon()}</sp-icon>
@@ -83,15 +81,12 @@ measureFixtureCreation(html`
     <sp-icon>${Checkmark200Icon()}</sp-icon>
     <sp-icon>${Checkmark300Icon()}</sp-icon>
     <sp-icon>${Checkmark400Icon()}</sp-icon>
-    <sp-icon>${Checkmark500Icon()}</sp-icon>
-    <sp-icon>${Checkmark600Icon()}</sp-icon>
+    <sp-icon>${Chevron50Icon()}</sp-icon>
     <sp-icon>${Chevron75Icon()}</sp-icon>
     <sp-icon>${Chevron100Icon()}</sp-icon>
     <sp-icon>${Chevron200Icon()}</sp-icon>
     <sp-icon>${Chevron300Icon()}</sp-icon>
     <sp-icon>${Chevron400Icon()}</sp-icon>
-    <sp-icon>${Chevron500Icon()}</sp-icon>
-    <sp-icon>${Chevron600Icon()}</sp-icon>
     <sp-icon>${CornerTriangle75Icon()}</sp-icon>
     <sp-icon>${CornerTriangle100Icon()}</sp-icon>
     <sp-icon>${CornerTriangle200Icon()}</sp-icon>
@@ -108,10 +103,13 @@ measureFixtureCreation(html`
     <sp-icon>${Dash100Icon()}</sp-icon>
     <sp-icon>${Dash200Icon()}</sp-icon>
     <sp-icon>${Dash300Icon()}</sp-icon>
-    <sp-icon>${Dash400Icon()}</sp-icon>
-    <sp-icon>${Dash500Icon()}</sp-icon>
-    <sp-icon>${Dash600Icon()}</sp-icon>
-    <sp-icon>${DoubleGripperIcon()}</sp-icon>
-    <sp-icon>${SingleGripperIcon()}</sp-icon>
-    <sp-icon>${TripleGripperIcon()}</sp-icon>
+    <sp-icon>${DragHandle75Icon()}</sp-icon>
+    <sp-icon>${DragHandle100Icon()}</sp-icon>
+    <sp-icon>${DragHandle200Icon()}</sp-icon>
+    <sp-icon>${DragHandle300Icon()}</sp-icon>
+    <sp-icon>${Gripper100Icon()}</sp-icon>
+    <sp-icon>${LinkOut100Icon()}</sp-icon>
+    <sp-icon>${LinkOut200Icon()}</sp-icon>
+    <sp-icon>${LinkOut300Icon()}</sp-icon>
+    <sp-icon>${LinkOut400Icon()}</sp-icon>
 `);
diff --git a/packages/icons-ui/test/benchmark/test-injected.ts b/packages/icons-ui/test/benchmark/test-injected.ts
index f912f897925..170e6c943e9 100644
--- a/packages/icons-ui/test/benchmark/test-injected.ts
+++ b/packages/icons-ui/test/benchmark/test-injected.ts
@@ -11,7 +11,7 @@
  */
 
 import '@spectrum-web-components/icon/sp-icon.js';
-import { Arrow75Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow75.js';
+import { Arrow100Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow100.js';
 import { setCustomTemplateLiteralTag } from '@spectrum-web-components/icons-ui/src/custom-tag.js';
 import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
@@ -19,40 +19,39 @@ import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
 setCustomTemplateLiteralTag(html);
 
 measureFixtureCreation(html`
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
-    <sp-icon>${Arrow75Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
+    <sp-icon>${Arrow100Icon()}</sp-icon>
 `);
diff --git a/packages/icons-ui/tsconfig.json b/packages/icons-ui/tsconfig.json
index b58bd73c9fc..3a0c8e30505 100644
--- a/packages/icons-ui/tsconfig.json
+++ b/packages/icons-ui/tsconfig.json
@@ -6,9 +6,9 @@
     },
     "include": [
         "icons/**/*.ts",
-        "icons-s2/**/*.ts",
         "src/**/*.ts",
-        "../../global.d.ts"
+        "../../global.d.ts",
+        "src/icons.ts"
     ],
     "exclude": ["test/*.ts", "stories/*.ts"],
     "references": [{ "path": "../../tools/base" }, { "path": "../icon" }]
diff --git a/packages/icons-workflow/.gitignore b/packages/icons-workflow/.gitignore
index c12e52301e8..d7dfd205bd9 100644
--- a/packages/icons-workflow/.gitignore
+++ b/packages/icons-workflow/.gitignore
@@ -1,15 +1,9 @@
 src/icons
-src/icons-s2
 src/icons.ts
-src/icons-s2.ts
 src/elements
-src/elements-s2
-src/DefaultIcon.ts
 icons
 stories/icon-manifest.ts
 
 !bin/build.js
-!bin/build-icons-mapping.js
 !bin/icons-mapping.json
-!src/DefaultIcon.ts
-bin/*.csv
\ No newline at end of file
+bin/*.csv
diff --git a/packages/icons-workflow/bin/build-icons-mapping.js b/packages/icons-workflow/bin/build-icons-mapping.js
deleted file mode 100644
index 5e74794b755..00000000000
--- a/packages/icons-workflow/bin/build-icons-mapping.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-/*
-Copyright 2020 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.
-*/
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-import { getComponentName } from './build.js';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-/*
- * You can run this script by running the `build-icons-mapping ` on `packages/icons-workflow/package.json`,
- * which generates the icons mapping from an internal CSV file.
- * This is a manual step and should only be run when the icons team provides updates.
- * Place the CSV file under the `packages/icons-workflow/bin` folder and run the script to generate the new JSON mapping file.
- * This JSON mapping should be committed to the repository.
- */
-const saveIconsMapping = async () => {
-    // check if there is file with .csv extension in the bin folder
-    const files = fs.promises.readdir(__dirname);
-    let data = '';
-    try {
-        const fileNames = await files;
-        const csvFile = fileNames.find((file) => file.endsWith('.csv'));
-        if (csvFile) {
-            data = await fs.promises.readFile(
-                path.join(__dirname, csvFile),
-                'utf8'
-            );
-        }
-    } catch (error) {
-        throw new Error(`Error reading the bin directory: ${error.message}`);
-    }
-
-    if (!data) {
-        throw new Error(
-            'No csv file found in the src folder. Please make sure you have the csv file in the "packages/icons-workflow/bin" folder'
-        );
-    }
-
-    const rows = data.split('\n');
-    const mapping = {};
-    rows.forEach((row) => {
-        const columns = row.split(',');
-        // if the third column says "name change"
-        if (columns.length >= 3 && columns[2] === 'name change') {
-            const oldName = getComponentName(columns[0]);
-            const newName = getComponentName(columns[1]);
-
-            // skip if the old or new name is a number
-            if (
-                !Number.isNaN(Number(oldName)) ||
-                !Number.isNaN(Number(newName))
-            ) {
-                return;
-            }
-
-            mapping[oldName] = newName;
-            mapping[newName] = oldName;
-        }
-    });
-
-    if (Object.keys(mapping).length === 0) {
-        console.warn('No valid name changes found in the CSV file.');
-    }
-
-    const outputPath = path.join(__dirname, './icons-mapping.json');
-    try {
-        await fs.promises.writeFile(
-            outputPath,
-            JSON.stringify(mapping),
-            'utf8'
-        );
-    } catch (error) {
-        throw new Error(`Error saving the icons mapping: ${error.message}`);
-    }
-};
-
-await saveIconsMapping();
diff --git a/packages/icons-workflow/bin/build.js b/packages/icons-workflow/bin/build.js
index 7ee5c4e4ff1..e22492b0516 100644
--- a/packages/icons-workflow/bin/build.js
+++ b/packages/icons-workflow/bin/build.js
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-/**
+/*!
  * Copyright 2025 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
@@ -11,373 +11,313 @@
  * governing permissions and limitations under the License.
  */
 
-import fs from 'fs';
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
 import fg from 'fast-glob';
-import path from 'path';
 import { load } from 'cheerio';
-import prettier from 'prettier';
 import Case from 'case';
-import { fileURLToPath } from 'url';
-
-import systemsIconMapping from './icons-mapping.json' assert { type: 'json' };
+import nunjucks from 'nunjucks';
+import 'colors';
 
+const require = createRequire(import.meta.url);
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const iconsDir = path.join(__dirname, '..');
+const rootDir = path.join(__dirname, '..', '..', '..');
 
-const rootDir = path.join(__dirname, '../../../');
-
-const disclaimer = `
-/*
-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
+/**
+ * A simple logger utility to write messages to the console
+ * @type {object} log
+ * @property {(string) => void} log.error
+ * @property {(string) => void} log.write
+ * @property {(string) => void} log.success
+ * @property {(string) => void} log.info
+ */
+const log = {
+	error: (error) => process.stderr.write(`${'❌'.red}  ${error}\n\n`),
+    write: (msg) => process.stdout.write(msg),
+    success: (msg) => process.stdout.write(`${'✓'.green}  ${msg}\n`),
+    info: (msg) => process.stdout.write(`${'ℹ️'.blue}  ${msg}\n`),
+};
 
-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.
-*/`;
+/** @type {(string) => string} */
+const relativePrint = (filename, { cwd = rootDir } = {}) =>
+    path.relative(cwd, filename);
 
-const S1IConsPackageDir = '@adobe/spectrum-css-workflow-icons/dist/18';
-const S2IConsPackageDir =
-    '@adobe/spectrum-css-workflow-icons-s2/dist/assets/svg';
-const keepColors = '';
+const env = new nunjucks.Environment(undefined, {
+    autoescape: false,
+    throwOnUndefined: true,
+    trimBlocks: true,
+    lstripBlocks: true,
+});
 
-const ensureDirectoryExists = (dirPath) => {
-    if (!fs.existsSync(dirPath)) {
-        fs.mkdirSync(dirPath);
-    }
+/**
+ * Formats the content and writes it to the file path
+ * @param {string} filePath - The path to the file to write
+ * @param {string} content - The content to format
+ * @returns {Promise<void>} - A promise that resolves when the file is written
+ */
+const formatAndWrite = async (filePath, content) => {
+    return fsp.writeFile(filePath, content, { encoding: 'utf-8' });
 };
 
-const directories = [
-    `${rootDir}packages/icons-workflow/src`,
-    `${rootDir}packages/icons-workflow/src/icons`,
-    `${rootDir}packages/icons-workflow/src/icons-s2`,
-    `${rootDir}packages/icons-workflow/src/elements`,
-    `${rootDir}packages/icons-workflow/icons`,
-];
+/**
+ * Writes to a template
+ * @param {string} filename - The filename of the template
+ * @param {string} filepath - The path to the file to write
+ * @param {object} data - The data to pass to the template
+ * @returns {Promise<void>} - A promise that resolves when the file is written
+ */
+async function writeToTemplate(filename, filepath, data) {
+    const templatePath = path.join(__dirname, 'templates', filename);
+    // Check if the template exists
+    if (!fs.existsSync(templatePath)) {
+        console.error(`Template ${templatePath} does not exist`);
+        return Promise.reject(
+            new Error(`Template ${templatePath} does not exist`)
+        );
+    }
 
-directories.forEach(ensureDirectoryExists);
+    const template = await fsp.readFile(templatePath, 'utf-8');
 
-fs.writeFileSync(
-    path.join(rootDir, 'packages', 'icons-workflow', 'src', 'icons.ts'),
-    disclaimer,
-    'utf-8'
-);
-fs.writeFileSync(
-    path.join(rootDir, 'packages', 'icons-workflow', 'src', 'icons-s2.ts'),
-    disclaimer,
-    'utf-8'
-);
-const manifestPath = path.join(
-    rootDir,
-    'packages',
-    'icons-workflow',
-    'stories',
-    'icon-manifest.ts'
-);
-fs.writeFileSync(manifestPath, disclaimer, 'utf-8');
-let manifestImports = `import {
-    html,
-    TemplateResult
-} from '@spectrum-web-components/base';\r\n`;
-let manifestListings = `\r\nexport const iconManifest = [\r\n`;
+    // Render the template as a string
+    const content = env.renderString(template, data);
 
-const defaultIconImport = `import { DefaultIcon as AlternateIcon } from '../DefaultIcon.js';\r\n`;
+    return formatAndWrite(filepath, content);
+}
 
-// Temporary replacements for a few icon names that have different names in the new S2 icon set
-const replacements = {
-    UnLink: 'Unlink',
-    TextStrikeThrough: 'TextStrikethrough',
-    ChevronDownSize300: 'ChevronDown',
-    CheckmarkSize300: 'Checkmark',
-};
+/**
+ * Builds the icons and writes them to the correct directories
+ * @param {string} filepath - The filepath to the icon to build
+ * @returns {Promise<{imports: string, listings: string}>} - The imports and listings for the icon
+ */
+async function buildIcon(filepath) {
+    const svg = await fsp.readFile(filepath, 'utf-8').catch((error) => {
+        console.error(`Error reading icon ${filepath}:`, error);
+        return Promise.reject(error);
+    });
 
-// A function that process the raw svg name and returns the component name
-export const getComponentName = (i) => {
+    const $ = load(svg, { xmlMode: true });
     let id = path
-        .basename(i, '.svg')
-        .replace(/^(S2_Icon_|S_)/, '')
-        .replace(/(_20_N|_22x20_N|_18_N@2x)$/, '');
-    if (i.startsWith('Ad')) {
-        id = i.replace(/^Ad/, '') + 'Advert';
-    }
-    return Case.pascal(replacements[id] || id);
-};
-
-async function buildIcons(icons, tag, iconsNameList) {
-    icons.forEach((i) => {
-        const svg = fs.readFileSync(i, 'utf-8');
-        let id = path
-            .basename(i, '.svg')
-            .replace('S2_Icon_', '')
-            .replace('_20_N', '')
-            .replace('_22x20_N', '');
-        if (id.search(/^Ad[A-Z]/) !== -1) {
-            id = id.replace(/^Ad/, '');
-            id += 'Advert';
+        .basename(filepath, '.svg')
+        .replace('S2_Icon_', '')
+        .replace('_20_N', '')
+        .replace('_22x20_N', '');
+
+    [
+        {
+            find: /^Ad[A-Z](.*?)$/,
+            replace: '$1Advert',
+        },
+        {
+            find: 'github',
+            replace: 'GitHub',
+        },
+        {
+            find: 'UnLink',
+            replace: 'Unlink',
+        },
+        {
+            find: 'TextStrikeThrough',
+            replace: 'TextStrikethrough',
+        },
+        {
+            find: /^3D/,
+            replace: 'ThreeD',
+        },
+    ].forEach(({ find, replace }) => {
+        if (id === find) id = replace;
+        if (id.search(find) !== -1) {
+            id = id.replace(find, replace);
         }
+    });
 
-        // use replacements for icons that have different names in the icon set and update the id
-        id = replacements[id] || id;
-
-        const ComponentName = Case.pascal(id);
-
-        const $ = load(svg, {
-            xmlMode: true,
-        });
-        const title = Case.capital(id);
-        const fileName = `${id}.ts`;
-        const location = path.join(
-            rootDir,
-            'packages/icons-workflow/src',
-            tag,
-            fileName
+    // Skip if the first character is a number
+    if (/^\d/.test(id))
+        return Promise.reject(
+            new Error(
+                `Icon ${id} has a number as the first character in the name which is not valid.`
+            )
         );
 
-        if (!Number.isNaN(Number(ComponentName[0]))) {
-            return;
+    // @todo can we remove this now that icons are being pre-processed?
+    $('*').each((_, el) => {
+        if (el.name === 'svg') {
+            $(el).attr('aria-hidden', '...');
+            $(el).attr('role', 'img');
+            $(el).attr('fill', 'currentColor');
+            $(el).attr('aria-label', '...');
+            $(el).removeAttr('id');
+            $(el).attr('width', '...');
+            $(el).attr('height', '...');
         }
-
-        $('*').each((index, el) => {
-            if (el.name === 'svg') {
-                $(el).attr('aria-hidden', '...');
-                $(el).attr('role', 'img');
-                if (keepColors !== 'keep') {
-                    $(el).attr('fill', 'currentColor');
-                }
-                $(el).attr('aria-label', '...');
-                $(el).removeAttr('id');
-                $(el).attr('width', '...');
-                $(el).attr('height', '...');
+        if (el.name === 'defs') {
+            $(el).remove();
+        }
+        Object.keys(el.attribs).forEach((x) => {
+            if (x === 'class') {
+                $(el).removeAttr(x);
             }
-            if (el.name === 'defs') {
-                $(el).remove();
+            if (x === 'stroke') {
+                $(el).attr(x, 'currentColor');
+            }
+            if (x === 'fill') {
+                $(el).attr(x, 'currentColor');
             }
-            Object.keys(el.attribs).forEach((x) => {
-                if (x === 'class') {
-                    $(el).removeAttr(x);
-                }
-                if (keepColors !== 'keep' && x === 'stroke') {
-                    $(el).attr(x, 'currentColor');
-                }
-                if (keepColors !== 'keep' && x === 'fill') {
-                    $(el).attr(x, 'currentColor');
-                }
-            });
         });
+    });
 
-        const iconLiteral = `
-        ${disclaimer}
-    
-        import {tag as html, TemplateResult} from '../custom-tag.js';
-    
-        export {setCustomTemplateLiteralTag} from '../custom-tag.js';
-        export const ${ComponentName}Icon = ({
-        width = 24,
-        height = 24,
-        hidden = false,
-        title = '${title}',
-        } = {},): string | TemplateResult => {
-        return html\`${$('svg')
-            .toString()
-            .replace(
-                'aria-hidden="..."',
-                "aria-hidden=${hidden ? 'true' : 'false'}"
-            )
-            .replace('width="..."', 'width="${width}"')
-            .replace('height="..."', 'height="${height}"')
-            .replace('aria-label="..."', 'aria-label="${title}"')}\`;
-        }
-    `;
-
-        prettier
-            .format(iconLiteral, {
-                printWidth: 100,
-                tabWidth: 2,
-                useTabs: false,
-                semi: true,
-                singleQuote: true,
-                trailingComma: 'all',
-                bracketSpacing: true,
-                jsxBracketSameLine: false,
-                arrowParens: 'avoid',
-                parser: 'typescript',
-            })
-            .then((icon) => {
-                fs.writeFileSync(location, icon, 'utf-8');
-            });
-
-        const exportString = `export {${ComponentName}Icon} from './${tag}/${id}.js';\r\n`;
-        fs.appendFileSync(
-            path.join(
-                rootDir,
-                'packages',
-                'icons-workflow',
-                'src',
-                tag + '.ts'
-            ),
-            exportString,
-            'utf-8'
-        );
-
-        const iconElementName = `sp-icon-${Case.kebab(ComponentName)}`;
-
-        const currenVersionIconImport = `import { ${ComponentName}Icon as CurrentIcon } from '../${tag}/${id}.js';\r\n`;
-
-        // check if the icon is present in the other version
-        let otherVersionIconImport = defaultIconImport;
-
-        const alternateTag = tag === 'icons' ? 'icons-s2' : 'icons';
-        // if there is a mapping icon found from the above iconset update otherVersionIconImport
-        if (systemsIconMapping[ComponentName]) {
-            otherVersionIconImport = `import { ${systemsIconMapping[ComponentName]}Icon as AlternateIcon } from '../${alternateTag}/${systemsIconMapping[ComponentName]}.js';\r\n`;
-        } else if (iconsNameList.includes(ComponentName)) {
-            // if there is a no mapping icon found reset to DefaultIcon
-            otherVersionIconImport = `import { ${ComponentName}Icon as AlternateIcon } from '../${alternateTag}/${id}.js';\r\n`;
-        }
-
-        const spectrumVersion = tag === 'icons' ? 1 : 2;
-
-        const iconElement = `
-        ${disclaimer}
-        
-        import {
-            html,
-            TemplateResult
-        } from '@spectrum-web-components/base';
-        import {
-            IconBase
-        } from '@spectrum-web-components/icon';
-        import {
-            setCustomTemplateLiteralTag
-        } from '../custom-tag.js';
-        
-        ${currenVersionIconImport}
-        ${otherVersionIconImport}
-        
-        /**
-         * @element ${iconElementName}
-         */
-        export class Icon${ComponentName} extends IconBase {
-            protected override render(): TemplateResult {
-                setCustomTemplateLiteralTag(html);
-    
-                if(this.spectrumVersion === ${spectrumVersion}){
-                    return CurrentIcon({ hidden: !this.label, title: this.label }) as TemplateResult;
-                }
-                return AlternateIcon({ hidden: !this.label, title: this.label }) as TemplateResult;
-    
+    const parsedSvg = $('svg')
+        .toString()
+        .replace(
+            'aria-hidden="..."',
+            `aria-hidden='\${hidden ? 'true' : 'false'}'`
+        )
+        .replace('width="..."', `width="\${width}"`)
+        .replace('height="..."', `height="\${height}"`)
+        .replace('aria-label="..."', `aria-label="\${title}"`);
+
+    return Promise.all([
+        writeToTemplate(
+            'id.ts.njk',
+            path.join(iconsDir, 'src', 'icons', `${id}.ts`),
+            {
+                ComponentName: Case.pascal(id),
+                id,
+                iconElementName: `sp-icon-${Case.kebab(id)}`,
+                title: Case.capital(id),
+                width: 24,
+                height: 24,
+                svg: parsedSvg,
             }
-        }
-        `;
-
-        prettier
-            .format(iconElement, {
-                printWidth: 100,
-                tabWidth: 2,
-                useTabs: false,
-                semi: true,
-                singleQuote: true,
-                trailingComma: 'all',
-                bracketSpacing: true,
-                jsxBracketSameLine: false,
-                arrowParens: 'avoid',
-                parser: 'typescript',
-            })
-            .then((iconElementFile) => {
-                fs.writeFileSync(
-                    path.join(
-                        rootDir,
-                        'packages',
-                        'icons-workflow',
-                        'src',
-                        'elements',
-                        `Icon${id}.ts`
-                    ),
-                    iconElementFile,
-                    'utf-8'
-                );
-            });
-
-        const iconRegistration = `
-        ${disclaimer}
-    
-        import { Icon${ComponentName} } from '../src/elements/Icon${id}.js';
-        import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
-    
-        defineElement('${iconElementName}', Icon${ComponentName});
-    
-        declare global {
-            interface HTMLElementTagNameMap {
-                '${iconElementName}': Icon${ComponentName};
+        ),
+        writeToTemplate(
+            'IconID.ts.njk',
+            path.join(iconsDir, 'src', 'elements', `Icon${id}.ts`),
+            {
+                ComponentName: Case.pascal(id),
+                id,
+                iconElementName: `sp-icon-${Case.kebab(id)}`,
+                title: Case.capital(id),
             }
-        }
-        `;
+        ),
+        writeToTemplate(
+            'ElementName.ts.njk',
+            path.join(iconsDir, 'icons', `sp-icon-${Case.kebab(id)}.ts`),
+            {
+                ComponentName: Case.pascal(id),
+                id,
+                iconElementName: `sp-icon-${Case.kebab(id)}`,
+                title: Case.capital(id),
+            }
+        ),
+    ]).then(() => ({
+        id,
+        exports: `export {${Case.pascal(id)}Icon} from './icons/${id}.js';`,
+        imports: `import '@spectrum-web-components/icons-workflow/icons/sp-icon-${Case.kebab(id)}.js';`,
+        listings: `{ name: '${Case.sentence(id)}', tag: '<sp-icon-${Case.kebab(id)}>', story: (size: IconSize): TemplateResult => html\`<sp-icon-${Case.kebab(id)} size=\$\{size\}></sp-icon-${Case.kebab(id)}>\` }`,
+    }));
+}
 
-        prettier
-            .format(iconRegistration, {
-                printWidth: 100,
-                tabWidth: 2,
-                useTabs: false,
-                semi: true,
-                singleQuote: true,
-                trailingComma: 'all',
-                bracketSpacing: true,
-                jsxBracketSameLine: false,
-                arrowParens: 'avoid',
-                parser: 'typescript',
+async function main({ verbose = false } = {}) {
+    // Kick off the directory creation
+    const makeDirs = Promise.all(
+        ['src/icons', 'src/elements', 'icons', 'stories'].map((dirPath) => {
+            if (!fs.existsSync(path.join(iconsDir, dirPath))) {
+                return fsp.mkdir(path.join(iconsDir, dirPath), {
+                    recursive: true,
+                });
+            }
+            return Promise.resolve();
+        })
+    );
+
+    // Read the icons
+    return fg(`assets/svg/**.svg`, {
+        cwd: path.dirname(
+            require.resolve('@adobe/spectrum-css-workflow-icons', {
+                paths: [iconsDir, path.join(iconsDir, '..', '..')],
             })
-            .then((iconRegistrationFile) => {
-                fs.writeFileSync(
-                    path.join(
-                        rootDir,
-                        'packages',
-                        'icons-workflow',
-                        'icons',
-                        `${iconElementName}.ts`
-                    ),
-                    iconRegistrationFile,
-                    'utf-8'
+        ),
+        absolute: true,
+    }).then(async (icons) => {
+        // Don't start building until the directories are created
+        await makeDirs.then(() => {
+            if (verbose)
+                log.info(
+                    'All directories have been created if they did not already exist.'
                 );
-            });
+        });
 
-        const importStatement = `\r\nimport '@spectrum-web-components/icons-workflow/icons/${iconElementName}.js';`;
-        const metadata = `{name: '${Case.sentence(
-            ComponentName
-        )}', tag: '<${iconElementName}>', story: (size: string): TemplateResult => html\`<${iconElementName} size=\$\{size\}></${iconElementName}>\`},\r\n`;
-        manifestImports += importStatement;
-        manifestListings += metadata;
+        // Build the icons
+        return Promise.all(icons.map(buildIcon)).then(async (results) => {
+            results = results.sort((a, b) =>
+                a.id.localeCompare(b.id, 'en', { numeric: true })
+            );
+            // Create the exports, imports, and listings
+            const exports = [
+                "export { setCustomTemplateLiteralTag } from './custom-tag.js';",
+                ...results.map(({ exports }) => exports),
+            ];
+            const imports = results.map(({ imports }) => imports);
+            const listings = results.map(({ listings }) => listings);
+
+            const promises = [
+                formatAndWrite(
+                    path.join(iconsDir, 'src', 'icons.ts'),
+                    exports.join('\r\n') + '\r\n'
+                ).then(() => {
+                    log.success(
+                        `Successfully wrote exports to ${'src/icons.ts'.cyan}.`
+                    );
+                }),
+                writeToTemplate(
+                    'icon-manifest.ts.njk',
+                    path.join(iconsDir, 'stories', 'icon-manifest.ts'),
+                    {
+                        imports: imports.join('\r\n'),
+                        listings: listings.join(',\r\n\t'),
+                    }
+                ).then(() => {
+                    log.success(
+                        `Successfully wrote icon manifest to ${'stories/icon-manifest.ts'.cyan}.`
+                    );
+                }),
+            ];
+
+            // Process all files with ESLint
+            promises.push(
+                fg(['src/icons/**'], {
+                    cwd: iconsDir,
+                    absolute: true,
+                    ignore: ['src/icons/*.d.ts'],
+                }).then((builtAssets) => {
+                        // Write results to the files
+                        return Promise.all(
+                            builtAssets.map(
+                                async (filePath) => {
+                                    const output = await fsp.readFile(filePath, 'utf-8');
+                                    if (!output) return Promise.resolve();
+                                    return formatAndWrite(
+                                        filePath,
+                                        output
+                                    ).then(() => {
+                                        log.success(
+                                            `${path.basename(filePath, '.ts').green} to ${relativePrint(filePath).cyan}.`
+                                        );
+                                    });
+                                }
+                            )
+                        );
+                    })
+            );
+
+            return Promise.all(promises);
+        });
     });
 }
 
-const iconsV1 = (
-    await fg(`${rootDir}/node_modules/${S1IConsPackageDir}/**.svg`)
-).sort();
-
-const iconsV2 = (
-    await fg(`${rootDir}/node_modules/${S2IConsPackageDir}/**.svg`)
-).sort();
-
-const iconsV1NameList = iconsV1.map((i) => {
-    return getComponentName(i);
-});
-const iconsV2NameList = iconsV2.map((i) => {
-    return getComponentName(i);
-});
-
-await buildIcons(iconsV1, 'icons', iconsV2NameList);
-await buildIcons(iconsV2, 'icons-s2', iconsV1NameList);
-
-const exportString = `\r\nexport { setCustomTemplateLiteralTag } from './custom-tag.js';\r\n`;
-fs.appendFileSync(
-    path.join(rootDir, 'packages', 'icons-workflow', 'src', 'icons.ts'),
-    exportString,
-    'utf-8'
-);
-
-fs.appendFileSync(
-    manifestPath,
-    `${manifestImports}${manifestListings}];\r\n`,
-    'utf-8'
-);
+main({ verbose: true });
diff --git a/packages/icons-workflow/bin/icons-mapping.json b/packages/icons-workflow/bin/icons-mapping.json
deleted file mode 100644
index 009084e20a3..00000000000
--- a/packages/icons-workflow/bin/icons-mapping.json
+++ /dev/null
@@ -1,164 +0,0 @@
-{
-    "Alert": "AlertTriangle",
-    "AlertTriangle": "Alert",
-    "AlertCircle": "AlertDiamond",
-    "AlertDiamond": "AlertCircleFilled",
-    "AlertCircleFilled": "AlertDiamond",
-    "AnchorSelect": "DirectSelect",
-    "DirectSelect": "AnchorSelect",
-    "AssetsAdded": "AddContent",
-    "AddContent": "AssetsAdded",
-    "At": "Mention",
-    "Mention": "At",
-    "Audio": "MusicNote",
-    "MusicNote": "Audio",
-    "Beaker": "BetaApp",
-    "BetaApp": "Beaker",
-    "Boolean": "Toggle",
-    "Toggle": "Boolean",
-    "Border": "EffectBorder",
-    "EffectBorder": "Border",
-    "Browse": "Binoculars",
-    "Binoculars": "Browse",
-    "Capitals": "TextCapsAll",
-    "TextCapsAll": "Capitals",
-    "CircleFilled": "Circle",
-    "Circle": "CircleFilled",
-    "ClassicGridView": "ViewGrid",
-    "ViewGrid": "ClassicGridView",
-    "CloneStamp": "StampClone",
-    "StampClone": "CloneStamp",
-    "CloudDisconnected": "CloudStateDisconnected",
-    "CloudStateDisconnected": "CloudDisconnected",
-    "CloudError": "CloudStateError",
-    "CloudStateError": "CloudError",
-    "CloudOutline": "Cloud",
-    "Cloud": "CloudOutline",
-    "Compass": "Discover",
-    "Discover": "Compass",
-    "Date": "CalendarDay",
-    "CalendarDay": "Date",
-    "Deselect": "SelectNo",
-    "SelectNo": "Deselect",
-    "DesktopAndMobile": "DeviceDesktopMobile",
-    "DeviceDesktopMobile": "DesktopAndMobile",
-    "Devices": "DeviceMobile",
-    "DeviceMobile": "Devices",
-    "DeviceTablet": "DeviceTablet",
-    "DistributeHorizontally": "DistributeSpaceHorizontally",
-    "DistributeSpaceHorizontally": "DistributeSpaceHoriz",
-    "DistributeSpaceHoriz": "DistributeSpaceHorizontally",
-    "DistributeSpaceVert": "DistributeSpaceVertically",
-    "DistributeSpaceVertically": "DistributeVertically",
-    "DistributeVertically": "DistributeSpaceVertically",
-    "Document": "File",
-    "File": "DocumentOutline",
-    "DocumentOutline": "File",
-    "EmailOutline": "Email",
-    "Email": "EmailOutline",
-    "Engagement": "Interaction",
-    "Interaction": "Engagement",
-    "Events": "CursorClick",
-    "CursorClick": "Events",
-    "Export": "Export",
-    "ExportTo": "MoveTo",
-    "FileTxt": "FileText",
-    "FileText": "FileTxt",
-    "FolderOutline": "Folder",
-    "Folder": "FolderOutline",
-    "Help": "HelpCircle",
-    "HelpCircle": "Help",
-    "Homepage": "WebPage",
-    "WebPage": "Homepage",
-    "ImageProfile": "UserAvatar",
-    "UserAvatar": "RealTimeCustomerProfile",
-    "Info": "InfoCircle",
-    "InfoCircle": "InfoOutline",
-    "InfoOutline": "InfoCircle",
-    "InvertAdj": "Invert",
-    "Invert": "InvertAdj",
-    "Label": "Tag",
-    "Tag": "Label",
-    "Landscape": "OrientationLandscape",
-    "OrientationLandscape": "Landscape",
-    "Light": "Lighten",
-    "Lighten": "Light",
-    "LinearGradient": "GradientHorizontal",
-    "GradientHorizontal": "LinearGradient",
-    "LinkOff": "Unlink",
-    "Unlink": "LinkOff",
-    "LinkOut": "ExportTo",
-    "LockClosed": "Lock",
-    "Lock": "LockClosed",
-    "LockOpen": "LockOpen",
-    "Looks": "Filters",
-    "Filters": "Looks",
-    "Magnify": "Search",
-    "Search": "Magnify",
-    "Measure": "Ruler",
-    "Ruler": "Measure",
-    "Move": "Move",
-    "MoveTo": "ExportTo",
-    "NewItem": "New",
-    "New": "NewItem",
-    "NoEdit": "EditNo",
-    "EditNo": "NoEdit",
-    "Pending": "ClockPending",
-    "ClockPending": "Pending",
-    "Portrait": "OrientationPortrait",
-    "OrientationPortrait": "Portrait",
-    "ProjectAdd": "ProjectCreate",
-    "ProjectCreate": "ProjectAdd",
-    "PublishRemove": "PublishNo",
-    "PublishNo": "PublishRemove",
-    "RadialGradient": "GradientRadial",
-    "GradientRadial": "RadialGradient",
-    "RealTimeCustomerProfile": "UserAvatar",
-    "Rectangle": "RectangleHoriz",
-    "RectangleHoriz": "Rectangle",
-    "RectSelect": "SelectRectangle",
-    "SelectRectangle": "RectSelect",
-    "RegionSelect": "LassoSelect",
-    "LassoSelect": "RegionSelect",
-    "RotateRight": "RotateOrientation",
-    "RotateOrientation": "RotateRight",
-    "Sampler": "Eyedropper",
-    "Eyedropper": "Sampler",
-    "SaveTo": "Download",
-    "Download": "SaveTo",
-    "SelectBox": "CheckBox",
-    "CheckBox": "SelectBox",
-    "SelectBoxAll": "SelectMulti",
-    "SelectMulti": "SelectBoxAll",
-    "Shop": "Market",
-    "Market": "Shop",
-    "ShowMenu": "MenuHamburger",
-    "MenuHamburger": "ShowMenu",
-    "SmallCaps": "TextCapsSmall",
-    "TextCapsSmall": "SmallCaps",
-    "SortOrderDown": "SortDown",
-    "SortDown": "SortOrderDown",
-    "SortOrderUp": "SortUp",
-    "SortUp": "SortOrderUp",
-    "Star": "StarOutline",
-    "StarFilled": "Star",
-    "StarOutline": "Star",
-    "TaskList": "ListMultiSelect",
-    "ListMultiSelect": "TaskList",
-    "TextBulleted": "ListBulleted",
-    "ListBulleted": "TextBulleted",
-    "Tips": "Lightbulb",
-    "Lightbulb": "Tips",
-    "Transparency": "ViewTransparency",
-    "ViewTransparency": "Transparency",
-    "Underline": "TextUnderline",
-    "TextUnderline": "Underline",
-    "Ungroup": "GroupNo",
-    "GroupNo": "Ungroup",
-    "ViewWeek": "CalendarWeek",
-    "CalendarWeek": "ViewWeek",
-    "VoiceOver": "Microphone",
-    "Microphone": "VoiceOver",
-    "VolumeMute": "VolumeOff",
-    "VolumeOff": "VolumeMute"
-}
diff --git a/packages/tabs/src/tabs-overrides.css b/packages/icons-workflow/bin/templates/ElementName.ts.njk
similarity index 64%
rename from packages/tabs/src/tabs-overrides.css
rename to packages/icons-workflow/bin/templates/ElementName.ts.njk
index c946869303d..30ca5b3d6c9 100644
--- a/packages/tabs/src/tabs-overrides.css
+++ b/packages/icons-workflow/bin/templates/ElementName.ts.njk
@@ -1,4 +1,4 @@
-/**
+/*!
  * Copyright 2025 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
@@ -10,7 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-#list {
-    --spectrum-tabs-font-weight: var(--system-tabs-font-weight);
-    --spectrum-tabs-divider-background-color: var(--system-tabs-divider-background-color);
+import { Icon{{ ComponentName }} } from '../src/elements/Icon{{ id }}.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+
+defineElement('{{ iconElementName }}', Icon{{ ComponentName }});
+
+declare global {
+    interface HTMLElementTagNameMap {
+        '{{ iconElementName }}': Icon{{ ComponentName }};
+    }
 }
diff --git a/packages/swatch/src/spectrum-swatch-group.css b/packages/icons-workflow/bin/templates/IconID.ts.njk
similarity index 53%
rename from packages/swatch/src/spectrum-swatch-group.css
rename to packages/icons-workflow/bin/templates/IconID.ts.njk
index 874b4ed81bf..c086922224f 100644
--- a/packages/swatch/src/spectrum-swatch-group.css
+++ b/packages/icons-workflow/bin/templates/IconID.ts.njk
@@ -1,4 +1,4 @@
-/**
+/*!
  * Copyright 2025 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
@@ -10,18 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-:host {
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular));
-    flex-flow: wrap;
-    display: inline-flex;
-}
-
-:host([density="compact"]) {
-    gap: var(--mod-swatchgroup-spacing-compact, var(--spectrum-swatchgroup-spacing-compact));
-}
+import { html, TemplateResult } from '@spectrum-web-components/base';
+import { IconBase } from '@spectrum-web-components/icon';
+import { setCustomTemplateLiteralTag } from '../custom-tag.js';
+import { {{ ComponentName }}Icon as Icon } from '../icons/{{ id }}.js';
 
-:host([density="spacious"]) {
-    gap: var(--mod-swatchgroup-spacing-spacious, var(--spectrum-swatchgroup-spacing-spacious));
+/**
+ * @element {{ iconElementName }}
+ */
+export class Icon{{ ComponentName }} extends IconBase {
+    protected override render(): TemplateResult {
+        setCustomTemplateLiteralTag(html);
+        return Icon({ hidden: !this.label, title: this.label }) as TemplateResult;
+    }
 }
diff --git a/packages/icons-workflow/bin/templates/icon-manifest.ts.njk b/packages/icons-workflow/bin/templates/icon-manifest.ts.njk
new file mode 100644
index 00000000000..8d8558d7587
--- /dev/null
+++ b/packages/icons-workflow/bin/templates/icon-manifest.ts.njk
@@ -0,0 +1,15 @@
+import { TemplateResult, html } from '@spectrum-web-components/base';
+
+{{ imports }}
+
+type IconSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+
+type IconStory = {
+    name: string;
+    tag: string;
+    story: (size: IconSize) => TemplateResult;
+};
+
+export const iconManifest: IconStory[] = [
+    {{ listings }}
+];
diff --git a/tools/theme/src/express/core.ts b/packages/icons-workflow/bin/templates/id.ts.njk
similarity index 64%
rename from tools/theme/src/express/core.ts
rename to packages/icons-workflow/bin/templates/id.ts.njk
index d81aaead8f3..2b3df2f3c0e 100644
--- a/tools/theme/src/express/core.ts
+++ b/packages/icons-workflow/bin/templates/id.ts.njk
@@ -1,4 +1,4 @@
-/**
+/*!
  * Copyright 2025 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
@@ -10,8 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import { Theme } from '../Theme.js';
+import { tag as html, TemplateResult } from '../custom-tag.js';
 
-import coreStyles from './theme.css.js';
+export { setCustomTemplateLiteralTag } from '../custom-tag.js';
 
-Theme.registerThemeFragment('express', 'system', coreStyles);
+export const {{ ComponentName }}Icon = ({
+    width = {{ width }},
+    height = {{ height }},
+    hidden = false,
+    title = '{{ title }}',
+} = {}): string | TemplateResult => {
+    return html`{{ svg }}`;
+};
diff --git a/packages/icons-workflow/package.json b/packages/icons-workflow/package.json
index e957a6f9a15..c7e71c8072c 100644
--- a/packages/icons-workflow/package.json
+++ b/packages/icons-workflow/package.json
@@ -26,8 +26,7 @@
         "./package.json": "./package.json"
     },
     "scripts": {
-        "build": "node ./bin/build.js",
-        "build-icons-mapping": "node ./bin/build-icons-mapping.js"
+        "build": "node ./bin/build.js"
     },
     "files": [
         "**/*.d.ts",
@@ -55,14 +54,13 @@
         "@spectrum-web-components/icon": "1.7.0"
     },
     "devDependencies": {
-        "@adobe/spectrum-css-workflow-icons": "1.7.0",
-        "@adobe/spectrum-css-workflow-icons-s2": "npm:@adobe/spectrum-css-workflow-icons@4.1.0",
-        "case": "^1.6.1",
-        "cheerio": "^1.0.0-rc.2",
+        "@adobe/spectrum-css-workflow-icons": "^4.1.0",
+        "@types/nunjucks": "^3.2.6",
+        "case": "^1.6.3",
+        "cheerio": "^1.0.0",
+        "colors": "^1.4.0",
         "fast-glob": "^3.3.3",
-        "fs": "^0.0.1-security",
-        "path": "^0.12.7",
-        "prettier": "^3.5.3"
+        "nunjucks": "^3.2.4"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/icons-workflow/src/DefaultIcon.ts b/packages/icons-workflow/src/DefaultIcon.ts
deleted file mode 100644
index ad3dca37f85..00000000000
--- a/packages/icons-workflow/src/DefaultIcon.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import { tag as html, TemplateResult } from './custom-tag.js';
-
-export { setCustomTemplateLiteralTag } from './custom-tag.js';
-export const DefaultIcon = ({
-    width = 24,
-    height = 24,
-    hidden = false,
-    title = 'Default',
-} = {}): string | TemplateResult => {
-    return html`
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            role="img"
-            fill="currentColor"
-            width=${width}
-            height=${height}
-            aria-hidden=${hidden ? 'true' : 'false'}
-            aria-label=${hidden ? undefined : title}
-        >
-            <path
-                d="m10,18.75c-4.82471,0-8.75-3.9248-8.75-8.75S5.17529,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.92529,8.75-8.75,8.75Zm0-16c-3.99756,0-7.25,3.25195-7.25,7.25s3.25244,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25244-7.25-7.25-7.25Z"
-                fill="currentColor"
-                stroke-width="0"
-            ></path>
-        </svg>
-    `;
-};
diff --git a/packages/icons-workflow/stories/icons-workflow.stories.ts b/packages/icons-workflow/stories/icons-workflow.stories.ts
index 3967be481a8..684b5f9fbd4 100644
--- a/packages/icons-workflow/stories/icons-workflow.stories.ts
+++ b/packages/icons-workflow/stories/icons-workflow.stories.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import '@spectrum-web-components/icon/sp-icon.js';
-import '../../iconset/stories/icons-demo.js';
+import '../../../packages/iconset/stories/icons-demo.js';
 import { html, TemplateResult } from '@spectrum-web-components/base';
 import { until } from '@spectrum-web-components/base/src/directives.js';
 
@@ -76,7 +76,7 @@ export const elements = ({ color, size }: Properties): TemplateResult => {
 };
 
 export const Icons = ({ color, size }: Properties): TemplateResult => {
-    const content = import('../').then((icons) => {
+    const content = import('../src/index.js').then((icons) => {
         const iconTemplates: {
             template: () => TemplateResult;
             name: string;
diff --git a/packages/icons-workflow/test/benchmark/test-injected-many.ts b/packages/icons-workflow/test/benchmark/test-injected-many.ts
index 633291fbde9..7d14eb08afc 100644
--- a/packages/icons-workflow/test/benchmark/test-injected-many.ts
+++ b/packages/icons-workflow/test/benchmark/test-injected-many.ts
@@ -12,82 +12,45 @@
 
 import '@spectrum-web-components/icon/sp-icon.js';
 import { AbcIcon } from '@spectrum-web-components/icons-workflow/src/icons/ABC.js';
-import { ActionsIcon } from '@spectrum-web-components/icons-workflow/src/icons/Actions.js';
-import { DisplayAdvertIcon } from '@spectrum-web-components/icons-workflow/src/icons/DisplayAdvert.js';
-import { PrintAdvertIcon } from '@spectrum-web-components/icons-workflow/src/icons/PrintAdvert.js';
+import { AccessibilityIcon } from '@spectrum-web-components/icons-workflow/src/icons/Accessibility.js';
 import { AddIcon } from '@spectrum-web-components/icons-workflow/src/icons/Add.js';
 import { AddCircleIcon } from '@spectrum-web-components/icons-workflow/src/icons/AddCircle.js';
-import { AddToIcon } from '@spectrum-web-components/icons-workflow/src/icons/AddTo.js';
-import { AddToSelectionIcon } from '@spectrum-web-components/icons-workflow/src/icons/AddToSelection.js';
-import { AEMScreensIcon } from '@spectrum-web-components/icons-workflow/src/icons/AEMScreens.js';
-import { AirplaneIcon } from '@spectrum-web-components/icons-workflow/src/icons/Airplane.js';
-import { AlertIcon } from '@spectrum-web-components/icons-workflow/src/icons/Alert.js';
-import { AlertAddIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertAdd.js';
-import { AlertCheckIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertCheck.js';
-import { AlertCircleIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertCircle.js';
-import { AlertCircleFilledIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertCircleFilled.js';
-import { AlgorithmIcon } from '@spectrum-web-components/icons-workflow/src/icons/Algorithm.js';
-import { AliasIcon } from '@spectrum-web-components/icons-workflow/src/icons/Alias.js';
-import { ArrowLeftIcon } from '@spectrum-web-components/icons-workflow/src/icons/ArrowLeft.js';
+import { AddContentIcon } from '@spectrum-web-components/icons-workflow/src/icons/AddContent.js';
+import { AlertDiamondIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertDiamond.js';
+import { AlertTriangleIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertTriangle.js';
 import { AlignCenterIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignCenter.js';
 import { AlignTopIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignTop.js';
 import { AlignBottomIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignBottom.js';
 import { AlignLeftIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignLeft.js';
 import { AlignRightIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignRight.js';
-import { AnnotateIcon } from '@spectrum-web-components/icons-workflow/src/icons/Annotate.js';
-import { AnnotatePenIcon } from '@spectrum-web-components/icons-workflow/src/icons/AnnotatePen.js';
 import { AssetIcon } from '@spectrum-web-components/icons-workflow/src/icons/Asset.js';
-import { AssetsAddedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsAdded.js';
-import { AssetsDownloadedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsDownloaded.js';
-import { AssetsExpiredIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsExpired.js';
-import { AssetsLinkedPublishedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsLinkedPublished.js';
-import { AssetsModifiedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsModified.js';
-import { AssetsPublishedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsPublished.js';
-import { BookIcon } from '@spectrum-web-components/icons-workflow/src/icons/Book.js';
 import { BookmarkIcon } from '@spectrum-web-components/icons-workflow/src/icons/Bookmark.js';
-import { BookmarkSingleIcon } from '@spectrum-web-components/icons-workflow/src/icons/BookmarkSingle.js';
-import { BookmarkSingleOutlineIcon } from '@spectrum-web-components/icons-workflow/src/icons/BookmarkSingleOutline.js';
+import { BrandIcon } from '@spectrum-web-components/icons-workflow/src/icons/Brand.js';
+import { BriefcaseIcon } from '@spectrum-web-components/icons-workflow/src/icons/Briefcase.js';
 import { setCustomTemplateLiteralTag } from '@spectrum-web-components/icons-workflow/src/custom-tag.js';
 import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
 
+type IconSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+const size: IconSize = 'm';
+
 setCustomTemplateLiteralTag(html);
 
 measureFixtureCreation(html`
-    <sp-icon>${AbcIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${ActionsIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${DisplayAdvertIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${PrintAdvertIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AddIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AddCircleIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AddToIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AddToSelectionIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AEMScreensIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AirplaneIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlertIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlertAddIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlertCheckIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlertCircleIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlertCircleFilledIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlgorithmIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AliasIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${ArrowLeftIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlignCenterIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlignTopIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlignBottomIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlignLeftIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AlignRightIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AnnotateIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AnnotatePenIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AssetIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AssetsAddedIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AssetsDownloadedIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AssetsExpiredIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AssetsLinkedPublishedIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AssetsModifiedIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${AssetsPublishedIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${BookIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${BookmarkIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${BookmarkSingleIcon({ hidden: true })}</sp-icon>
-    <sp-icon>${BookmarkSingleOutlineIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AbcIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AccessibilityIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AddContentIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AddIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AddCircleIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AlertDiamondIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AlertTriangleIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AlignCenterIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AlignTopIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AlignBottomIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AlignLeftIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AlignRightIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${AssetIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${BookmarkIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${BrandIcon({ hidden: true })}</sp-icon>
+    <sp-icon size=${size}>${BriefcaseIcon({ hidden: true })}</sp-icon>
 `);
diff --git a/packages/icons-workflow/test/benchmark/test-registered-many.ts b/packages/icons-workflow/test/benchmark/test-registered-many.ts
index b1f918c2236..e44e64c6716 100644
--- a/packages/icons-workflow/test/benchmark/test-registered-many.ts
+++ b/packages/icons-workflow/test/benchmark/test-registered-many.ts
@@ -11,79 +11,60 @@
  */
 
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-abc.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-actions.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-display-advert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-print-advert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-accessibility.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-add-circle.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-add-to.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-add-to-selection.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-aemscreens.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-airplane.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-add.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-check.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-circle.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-circle-filled.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-algorithm.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alias.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-arrow-left.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-center.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-top.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-add-content.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-diamond.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-bottom.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-center.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-left.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-middle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-right.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-annotate.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-annotate-pen.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-top.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-animation-no.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-animation.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-app.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-apps-all.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-apps.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-archive.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-arrow-head-tool.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-artboard.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-aspect-ratio.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-asset.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-added.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-downloaded.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-expired.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-linked-published.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-modified.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-published.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-book.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-bookmark.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-bookmark-single.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-bookmark-single-outline.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-attach.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-audio-wave.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-auto-select-subject.js';
 import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
 
 measureFixtureCreation(html`
     <sp-icon-abc></sp-icon-abc>
-    <sp-icon-actions></sp-icon-actions>
-    <sp-icon-display-advert></sp-icon-display-advert>
-    <sp-icon-print-advert></sp-icon-print-advert>
-    <sp-icon-add></sp-icon-add>
+    <sp-icon-accessibility></sp-icon-accessibility>
     <sp-icon-add-circle></sp-icon-add-circle>
-    <sp-icon-add-to></sp-icon-add-to>
-    <sp-icon-add-to-selection></sp-icon-add-to-selection>
-    <sp-icon-aemscreens></sp-icon-aemscreens>
-    <sp-icon-airplane></sp-icon-airplane>
-    <sp-icon-alert></sp-icon-alert>
-    <sp-icon-alert-add></sp-icon-alert-add>
-    <sp-icon-alert-check></sp-icon-alert-check>
-    <sp-icon-alert-circle></sp-icon-alert-circle>
-    <sp-icon-alert-circle-filled></sp-icon-alert-circle-filled>
-    <sp-icon-algorithm></sp-icon-algorithm>
-    <sp-icon-alias></sp-icon-alias>
-    <sp-icon-arrow-left></sp-icon-arrow-left>
+    <sp-icon-add-content></sp-icon-add-content>
+    <sp-icon-add></sp-icon-add>
+    <sp-icon-alert-diamond></sp-icon-alert-diamond>
+    <sp-icon-alert-triangle></sp-icon-alert-triangle>
+    <sp-icon-align-bottom></sp-icon-align-bottom>
+    <sp-icon-align-middle></sp-icon-align-middle>
     <sp-icon-align-center></sp-icon-align-center>
     <sp-icon-align-top></sp-icon-align-top>
     <sp-icon-align-bottom></sp-icon-align-bottom>
     <sp-icon-align-left></sp-icon-align-left>
     <sp-icon-align-right></sp-icon-align-right>
-    <sp-icon-annotate></sp-icon-annotate>
-    <sp-icon-annotate-pen></sp-icon-annotate-pen>
+    <sp-icon-animation-no></sp-icon-animation-no>
+    <sp-icon-animation></sp-icon-animation>
+    <sp-icon-app></sp-icon-app>
+    <sp-icon-apps-all></sp-icon-apps-all>
+    <sp-icon-apps></sp-icon-apps>
+    <sp-icon-archive></sp-icon-archive>
+    <sp-icon-arrow-head-tool></sp-icon-arrow-head-tool>
+    <sp-icon-artboard></sp-icon-artboard>
+    <sp-icon-aspect-ratio></sp-icon-aspect-ratio>
     <sp-icon-asset></sp-icon-asset>
-    <sp-icon-assets-added></sp-icon-assets-added>
-    <sp-icon-assets-downloaded></sp-icon-assets-downloaded>
-    <sp-icon-assets-expired></sp-icon-assets-expired>
-    <sp-icon-assets-linked-published></sp-icon-assets-linked-published>
-    <sp-icon-assets-modified></sp-icon-assets-modified>
-    <sp-icon-assets-published></sp-icon-assets-published>
-    <sp-icon-book></sp-icon-book>
-    <sp-icon-bookmark></sp-icon-bookmark>
-    <sp-icon-bookmark-single></sp-icon-bookmark-single>
-    <sp-icon-bookmark-single-outline></sp-icon-bookmark-single-outline>
+    <sp-icon-attach></sp-icon-attach>
+    <sp-icon-audio-wave></sp-icon-audio-wave>
+    <sp-icon-auto-select-subject></sp-icon-auto-select-subject>
 `);
diff --git a/packages/icons-workflow/tsconfig.json b/packages/icons-workflow/tsconfig.json
index 3114412c878..3a0c8e30505 100644
--- a/packages/icons-workflow/tsconfig.json
+++ b/packages/icons-workflow/tsconfig.json
@@ -4,7 +4,12 @@
         "composite": true,
         "rootDir": "./"
     },
-    "include": ["icons/**/*.ts", "src/**/*.ts", "../../global.d.ts"],
+    "include": [
+        "icons/**/*.ts",
+        "src/**/*.ts",
+        "../../global.d.ts",
+        "src/icons.ts"
+    ],
     "exclude": ["test/*.ts", "stories/*.ts"],
     "references": [{ "path": "../../tools/base" }, { "path": "../icon" }]
 }
diff --git a/packages/icons/src/icons-large.svg.ts b/packages/icons/src/icons-large.svg.ts
index c24942eab2d..abacfaffd9c 100644
--- a/packages/icons/src/icons-large.svg.ts
+++ b/packages/icons/src/icons-large.svg.ts
@@ -1,13 +1 @@
-/**
- * Copyright 2025 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.
- */
-import { svg } from '@spectrum-web-components/base';
-export default svg`<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spectrum-icon-Arrow100" viewBox="0 0 14 14"><path d="M12.93 6.227 9.023 2.32a1.094 1.094 0 1 0-1.546 1.547l2.039 2.04H1.844a1.094 1.094 0 1 0 0 2.187h7.672l-2.04 2.039a1.094 1.094 0 0 0 1.547 1.547l3.907-3.907a1.093 1.093 0 0 0 0-1.546"/></symbol><symbol id="spectrum-icon-Arrow200" viewBox="0 0 16 16"><path d="m14.606 7.194-4.458-4.459a1.14 1.14 0 1 0-1.612 1.612L11.05 6.86H2.108a1.14 1.14 0 0 0 0 2.28h8.942l-2.514 2.513a1.14 1.14 0 1 0 1.611 1.612l4.46-4.46a1.14 1.14 0 0 0 0-1.61z"/></symbol><symbol id="spectrum-icon-Arrow300" viewBox="0 0 16 16"><path d="m15.364 7.161-5.083-5.083a1.186 1.186 0 0 0-1.678 1.678l3.057 3.058H1.277a1.187 1.187 0 1 0 0 2.373H11.66l-3.056 3.057a1.186 1.186 0 1 0 1.677 1.678l5.083-5.083a1.185 1.185 0 0 0 0-1.678"/></symbol><symbol id="spectrum-icon-Arrow400" viewBox="0 0 18 18"><path d="m17.216 8.126-5.79-5.79a1.236 1.236 0 0 0-1.746 1.75l3.683 3.683c-.008 0-.014-.004-.021-.004H1.337a1.236 1.236 0 0 0 0 2.472H13.34l.02-.004-3.68 3.682a1.236 1.236 0 1 0 1.748 1.748l5.789-5.789a1.237 1.237 0 0 0 0-1.748zm-2.643.895c0-.008.004-.014.004-.021s-.004-.013-.004-.02l.02.02z"/></symbol><symbol id="spectrum-icon-Arrow500" viewBox="0 0 22 22"><path d="m20.17 10.089-6.585-6.585a1.289 1.289 0 0 0-1.822 1.822l4.386 4.386H2.276a1.288 1.288 0 0 0 0 2.576h13.873l-4.386 4.386a1.289 1.289 0 0 0 1.822 1.822l6.585-6.585a1.29 1.29 0 0 0 0-1.822"/></symbol><symbol id="spectrum-icon-Arrow600" viewBox="0 0 24 24"><path d="m22.24 11.052-7.485-7.485a1.341 1.341 0 0 0-1.897 1.897l5.194 5.194H2.079a1.342 1.342 0 0 0 0 2.684h15.973l-5.194 5.194a1.341 1.341 0 1 0 1.897 1.897l7.484-7.485a1.34 1.34 0 0 0 0-1.896z"/></symbol><symbol id="spectrum-icon-Arrow75" viewBox="0 0 12 12"><path d="M11.325 5.258 7.91 1.84a1.05 1.05 0 0 0-1.486 1.484L8.048 4.95H1.494a1.05 1.05 0 0 0 0 2.1h6.554L6.423 8.675a1.05 1.05 0 0 0 1.486 1.484l3.416-3.417a1.05 1.05 0 0 0 0-1.484"/></symbol><symbol id="spectrum-icon-Asterisk100" viewBox="0 0 10 10"><path d="M8.176 8.281c.069.07.115.163 0 .255l-1.437.927c-.115.07-.161.024-.208-.092l-1.783-3.1-2.339 2.571c-.024.045-.093.091-.161 0L1.136 7.678c-.116-.069-.093-.139 0-.208l2.639-2.2-3.01-1.134c-.046 0-.115-.092-.07-.209l.788-1.574a.123.123 0 0 1 .151-.083.13.13 0 0 1 .058.038l2.639 1.713L4.494.64a.12.12 0 0 1 .1-.139h.038l1.922.255c.116 0 .139.046.116.163l-.9 3.31 3.057-.927c.069-.046.139-.046.185.092l.3 1.713c.023.116 0 .162-.093.162l-3.2.255z"/></symbol><symbol id="spectrum-icon-Asterisk200" viewBox="0 0 12 12"><path d="M9.575 9.696c.077.079.129.183 0 .287L7.96 11.025c-.129.079-.182.027-.234-.1L5.72 7.433l-2.633 2.893c-.027.051-.1.1-.182 0l-1.251-1.3c-.131-.077-.1-.156 0-.234l2.97-2.476-3.388-1.285c-.052 0-.129-.1-.079-.235l.886-1.771a.14.14 0 0 1 .17-.093.14.14 0 0 1 .065.042l2.97 1.928.183-3.8a.137.137 0 0 1 .114-.156.2.2 0 0 1 .042 0l2.163.287c.131 0 .156.052.131.183L6.86 5.136l3.44-1.043c.077-.052.156-.052.208.1l.339 1.928c.025.13 0 .183-.1.183l-3.6.287z"/></symbol><symbol id="spectrum-icon-Asterisk300" viewBox="0 0 12 12"><path d="M10.024 10.155c.087.089.146.206 0 .323l-1.819 1.173c-.146.089-.2.03-.263-.117L5.685 7.605l-2.962 3.254c-.03.057-.117.116-.2 0L1.116 9.392c-.147-.087-.117-.176 0-.263l3.339-2.785L.642 4.908c-.059 0-.146-.117-.089-.264l1-1.993a.156.156 0 0 1 .192-.1.16.16 0 0 1 .073.048l3.337 2.163.206-4.28a.155.155 0 0 1 .128-.176.2.2 0 0 1 .047 0l2.433.323c.147 0 .176.059.147.206l-1.144 4.19 3.87-1.173c.087-.06.176-.06.234.117l.381 2.169c.028.147 0 .206-.117.206l-4.046.323z"/></symbol><symbol id="spectrum-icon-Asterisk75" viewBox="0 0 8 8"><path d="M6.825 6.903c.061.062.1.144 0 .227l-1.277.824c-.1.062-.143.02-.185-.082L3.78 5.112 1.7 7.398c-.021.04-.082.08-.143 0L.569 6.367c-.1-.061-.082-.123 0-.185l2.347-1.957-2.68-1.007c-.041 0-.1-.082-.062-.186l.7-1.4a.11.11 0 0 1 .135-.073.1.1 0 0 1 .051.033l2.347 1.523.145-3.006a.11.11 0 0 1 .09-.123h.033l1.709.227c.1 0 .123.04.1.144l-.8 2.943 2.718-.824c.061-.041.123-.041.165.082l.268 1.523c.02.1 0 .144-.082.144l-2.842.227z"/></symbol><symbol id="spectrum-icon-Checkmark100" viewBox="0 0 14 14"><path d="M5.125 12.625a1.25 1.25 0 0 1-.96-.45L1.04 8.425a1.25 1.25 0 0 1 1.92-1.6l2.136 2.563 5.922-7.536a1.25 1.25 0 1 1 1.964 1.545l-6.874 8.75a1.25 1.25 0 0 1-.965.478z"/></symbol><symbol id="spectrum-icon-Checkmark200" viewBox="0 0 14 14"><path d="M4.891 13.224a1.3 1.3 0 0 1-1.005-.474l-3.54-4.3a1.302 1.302 0 0 1 2.011-1.655l2.508 3.046 6.758-8.647a1.302 1.302 0 1 1 2.05 1.604l-7.756 9.926a1.3 1.3 0 0 1-1.01.5z"/></symbol><symbol id="spectrum-icon-Checkmark300" viewBox="0 0 16 16"><path d="M5.627 14.894a1.36 1.36 0 0 1-1.042-.488l-4.1-4.92A1.357 1.357 0 0 1 2.569 7.75l3.027 3.631L13.4 1.448a1.356 1.356 0 0 1 2.133 1.675l-8.84 11.252a1.36 1.36 0 0 1-1.048.519z"/></symbol><symbol id="spectrum-icon-Checkmark400" viewBox="0 0 18 18"><path d="M6.33 16.642a1.42 1.42 0 0 1-1.086-.509l-4.683-5.62a1.413 1.413 0 0 1 2.171-1.81l3.566 4.28 8.936-11.374a1.413 1.413 0 0 1 2.223 1.746L7.441 16.102a1.42 1.42 0 0 1-1.09.54z"/></symbol><symbol id="spectrum-icon-Checkmark50" viewBox="0 0 12 12"><path d="M4.519 10.608a1.15 1.15 0 0 1-.885-.414L1.27 7.358a1.152 1.152 0 0 1 1.77-1.476l1.453 1.743 4.45-5.665a1.152 1.152 0 0 1 1.813 1.424l-5.331 6.784a1.15 1.15 0 0 1-.89.44z"/></symbol><symbol id="spectrum-icon-Checkmark500" viewBox="0 0 20 20"><path d="M6.997 18.48a1.47 1.47 0 0 1-1.13-.53L.521 11.538a1.471 1.471 0 1 1 2.26-1.885l4.182 5.017L17.18 1.666a1.472 1.472 0 1 1 2.314 1.818L8.154 17.917a1.47 1.47 0 0 1-1.135.562z"/></symbol><symbol id="spectrum-icon-Checkmark600" viewBox="0 0 24 24"><path d="M8.621 21.417a1.54 1.54 0 0 1-1.178-.552l-6.091-7.31a1.533 1.533 0 1 1 2.355-1.962l4.879 5.854L20.249 2.602a1.533 1.533 0 1 1 2.41 1.895L9.826 20.831a1.53 1.53 0 0 1-1.182.585z"/></symbol><symbol id="spectrum-icon-Checkmark75" viewBox="0 0 12 12"><path d="M4.333 11.09a1.2 1.2 0 0 1-.922-.433L.69 7.392a1.2 1.2 0 1 1 1.844-1.536l1.772 2.126 5.14-6.542a1.2 1.2 0 1 1 1.886 1.482L5.277 10.63a1.2 1.2 0 0 1-.927.459z"/></symbol><symbol id="spectrum-icon-Chevron100" viewBox="0 0 14 14"><path d="M4.5 13.25a1.094 1.094 0 0 1-.773-1.868L8.109 7 3.727 2.618A1.094 1.094 0 0 1 5.273 1.07l5.157 5.156a1.094 1.094 0 0 1 0 1.546L5.273 12.93a1.1 1.1 0 0 1-.773.321z"/></symbol><symbol id="spectrum-icon-Chevron200" viewBox="0 0 16 16"><path d="M5.123 15.005a1.14 1.14 0 0 1-.806-1.945L9.377 8l-5.06-5.06a1.14 1.14 0 0 1 1.612-1.61l5.865 5.864a1.14 1.14 0 0 1 0 1.612L5.929 14.67a1.14 1.14 0 0 1-.806.334z"/></symbol><symbol id="spectrum-icon-Chevron300" viewBox="0 0 16 16"><path d="M4.696 15.853a1.187 1.187 0 0 1-.84-2.026L9.684 8 3.856 2.173A1.187 1.187 0 0 1 5.536.495L12.2 7.16a1.187 1.187 0 0 1 0 1.678l-6.666 6.666a1.18 1.18 0 0 1-.84.348z"/></symbol><symbol id="spectrum-icon-Chevron400" viewBox="0 0 18 18"><path d="M5.213 17.805a1.236 1.236 0 0 1-.874-2.11L11.034 9 4.34 2.305A1.236 1.236 0 0 1 6.087.557l7.57 7.569a1.235 1.235 0 0 1 0 1.748l-7.57 7.569a1.23 1.23 0 0 1-.874.362"/></symbol><symbol id="spectrum-icon-Chevron500" viewBox="0 0 20 20"><path d="M5.667 19.876a1.288 1.288 0 0 1-.91-2.199L12.433 10 4.756 2.323A1.288 1.288 0 0 1 6.578.502l8.588 8.587a1.29 1.29 0 0 1 0 1.822l-8.588 8.588a1.28 1.28 0 0 1-.911.377"/></symbol><symbol id="spectrum-icon-Chevron600" viewBox="0 0 24 24"><path d="M7.05 23.078a1.341 1.341 0 0 1-.948-2.29L14.89 12 6.102 3.212a1.341 1.341 0 0 1 1.896-1.898l9.737 9.737a1.34 1.34 0 0 1 0 1.898l-9.737 9.737a1.34 1.34 0 0 1-.948.392"/></symbol><symbol id="spectrum-icon-Chevron75" viewBox="0 0 12 12"><path d="M3.833 11.578a1.05 1.05 0 0 1-.742-1.793L6.876 6 3.091 2.215A1.05 1.05 0 1 1 4.575.73l4.529 4.527a1.05 1.05 0 0 1 0 1.486L4.575 11.27a1.05 1.05 0 0 1-.742.308"/></symbol><symbol id="spectrum-icon-CornerTriangle100" viewBox="0 0 7 7"><path d="M6.687.75a.3.3 0 0 0-.221.091L.842 6.466a.312.312 0 0 0 .221.533h5.624a.31.31 0 0 0 .312-.312V1.062A.31.31 0 0 0 6.687.75"/></symbol><symbol id="spectrum-icon-CornerTriangle200" viewBox="0 0 8 8"><path d="M7.65.97a.35.35 0 0 0-.249.1L1.07 7.401a.352.352 0 0 0 .249.6H7.65a.35.35 0 0 0 .352-.352V1.322A.35.35 0 0 0 7.65.97"/></symbol><symbol id="spectrum-icon-CornerTriangle300" viewBox="0 0 8 8"><path d="M7.605.09a.4.4 0 0 0-.28.116L.206 7.325A.4.4 0 0 0 .49 8h7.115a.4.4 0 0 0 .4-.4V.49a.4.4 0 0 0-.4-.4"/></symbol><symbol id="spectrum-icon-CornerTriangle75" viewBox="0 0 6 6"><path d="M5.718.44a.28.28 0 0 0-.2.081l-5 5a.278.278 0 0 0 .2.474h5a.28.28 0 0 0 .278-.278v-5A.28.28 0 0 0 5.718.44"/></symbol><symbol id="spectrum-icon-Cross100" viewBox="0 0 10 10"><path d="M6.548 5 9.63 1.917A1.094 1.094 0 0 0 8.084.371L5.001 3.454 1.917.37A1.094 1.094 0 0 0 .371 1.917L3.454 5 .37 8.085A1.094 1.094 0 1 0 1.917 9.63l3.084-3.083L8.084 9.63a1.094 1.094 0 1 0 1.547-1.546z"/></symbol><symbol id="spectrum-icon-Cross200" viewBox="0 0 12 12"><path d="m7.611 6 3.654-3.653A1.14 1.14 0 0 0 9.653.735L6 4.39 2.347.735A1.14 1.14 0 0 0 .735 2.347L4.39 6 .735 9.653a1.14 1.14 0 1 0 1.612 1.612L6 7.61l3.653 3.654a1.14 1.14 0 0 0 1.612-1.612z"/></symbol><symbol id="spectrum-icon-Cross300" viewBox="0 0 14 14"><path d="m8.678 7 4.245-4.244a1.186 1.186 0 0 0-1.678-1.678L7.001 5.323 2.755 1.077a1.187 1.187 0 0 0-1.678 1.678L5.322 7l-4.244 4.244a1.187 1.187 0 0 0 1.678 1.678l4.245-4.245 4.244 4.245a1.186 1.186 0 0 0 1.678-1.678z"/></symbol><symbol id="spectrum-icon-Cross400" viewBox="0 0 16 16"><path d="m9.748 8 4.915-4.915a1.236 1.236 0 0 0-1.748-1.748L8 6.252 3.085 1.337a1.236 1.236 0 0 0-1.748 1.748L6.252 8l-4.915 4.915a1.236 1.236 0 1 0 1.748 1.748L8 9.748l4.915 4.915a1.236 1.236 0 0 0 1.748-1.748z"/></symbol><symbol id="spectrum-icon-Cross500" viewBox="0 0 16 16"><path d="m9.823 8 5.674-5.674A1.289 1.289 0 1 0 13.675.504L8 6.179 2.326.503A1.288 1.288 0 0 0 .504 2.326l5.674 5.675-5.674 5.674a1.288 1.288 0 0 0 1.822 1.822L8 9.822l5.674 5.675a1.289 1.289 0 1 0 1.823-1.822z"/></symbol><symbol id="spectrum-icon-Cross600" viewBox="0 0 18 18"><path d="m10.897 9 6.537-6.536A1.341 1.341 0 1 0 15.537.567L9 7.104 2.465.567A1.341 1.341 0 0 0 .567 2.464L7.104 9 .567 15.537a1.341 1.341 0 1 0 1.897 1.897L9 10.897l6.536 6.537a1.341 1.341 0 1 0 1.897-1.897z"/></symbol><symbol id="spectrum-icon-Cross75" viewBox="0 0 10 10"><path d="m6.485 5 2.674-2.674A1.05 1.05 0 1 0 7.674.84L5 3.515 2.326.84A1.05 1.05 0 0 0 .84 2.326L3.515 5 .84 7.674A1.05 1.05 0 0 0 2.326 9.16L5 6.485 7.674 9.16A1.05 1.05 0 1 0 9.16 7.674z"/></symbol><symbol id="spectrum-icon-Dash100" viewBox="0 0 12 12"><path d="M10.375 7.25h-8.75a1.25 1.25 0 0 1 0-2.5h8.75a1.25 1.25 0 0 1 0 2.5"/></symbol><symbol id="spectrum-icon-Dash200" viewBox="0 0 14 14"><path d="M12.026 8.302H1.974a1.302 1.302 0 0 1 0-2.604h10.052a1.302 1.302 0 0 1 0 2.604"/></symbol><symbol id="spectrum-icon-Dash300" viewBox="0 0 16 16"><path d="M13.763 9.356H2.237a1.356 1.356 0 0 1 0-2.712h11.526a1.356 1.356 0 0 1 0 2.712"/></symbol><symbol id="spectrum-icon-Dash400" viewBox="0 0 18 18"><path d="M15.596 10.413H2.404a1.413 1.413 0 0 1 0-2.826h13.192a1.413 1.413 0 0 1 0 2.826"/></symbol><symbol id="spectrum-icon-Dash50" viewBox="0 0 10 10"><path d="M8.293 6.152H1.708a1.152 1.152 0 0 1 0-2.304h6.585a1.152 1.152 0 1 1 0 2.304"/></symbol><symbol id="spectrum-icon-Dash500" viewBox="0 0 20 20"><path d="M17.54 11.472H2.461a1.472 1.472 0 0 1 0-2.944h15.077a1.472 1.472 0 0 1 0 2.944z"/></symbol><symbol id="spectrum-icon-Dash600" viewBox="0 0 22 22"><path d="M19.604 12.533H2.398a1.533 1.533 0 1 1 0-3.066h17.206a1.533 1.533 0 0 1 0 3.066"/></symbol><symbol id="spectrum-icon-Dash75" viewBox="0 0 10 10"><path d="M8.75 6.2h-7.5a1.2 1.2 0 0 1 0-2.4h7.5a1.2 1.2 0 1 1 0 2.4"/></symbol><symbol id="spectrum-icon-DoubleGripper" viewBox="0 0 20 6"><path d="M19.375 1.75H.625a.625.625 0 0 1 0-1.25h18.75a.625.625 0 0 1 0 1.25M20 4.875a.626.626 0 0 0-.625-.625H.625a.625.625 0 0 0 0 1.25h18.75A.626.626 0 0 0 20 4.875"/></symbol><symbol id="spectrum-icon-SingleGripper" viewBox="0 0 30 4"><path d="M28.75 3.25H1.25a1.25 1.25 0 0 1 0-2.5h27.5a1.25 1.25 0 0 1 0 2.5"/></symbol><symbol id="spectrum-icon-TripleGripper" viewBox="0 0 14 10"><path d="M12.625 1.25H1.375a.625.625 0 0 1 0-1.25h11.25a.625.625 0 0 1 0 1.25m.625 3.125a.626.626 0 0 0-.625-.625H1.375a.625.625 0 0 0 0 1.25h11.25a.626.626 0 0 0 .625-.625m0 3.75a.626.626 0 0 0-.625-.625H1.375a.625.625 0 0 0 0 1.25h11.25a.626.626 0 0 0 .625-.625"/></symbol></svg>`;
+import { svg } from '@spectrum-web-components/base'; export default svg`<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spectrum-icon-Arrow100" viewBox="0 0 14 14"><path d="M12.93 6.227 9.023 2.32a1.094 1.094 0 1 0-1.546 1.547l2.039 2.04H1.844a1.094 1.094 0 1 0 0 2.187h7.672l-2.04 2.039a1.094 1.094 0 0 0 1.547 1.547l3.907-3.907a1.093 1.093 0 0 0 0-1.546"/></symbol><symbol id="spectrum-icon-Arrow200" viewBox="0 0 16 16"><path d="m14.606 7.194-4.458-4.459a1.14 1.14 0 1 0-1.612 1.612L11.05 6.86H2.108a1.14 1.14 0 0 0 0 2.28h8.942l-2.514 2.513a1.14 1.14 0 1 0 1.611 1.612l4.46-4.46a1.14 1.14 0 0 0 0-1.61z"/></symbol><symbol id="spectrum-icon-Arrow300" viewBox="0 0 16 16"><path d="m15.364 7.161-5.083-5.083a1.186 1.186 0 0 0-1.678 1.678l3.057 3.058H1.277a1.187 1.187 0 1 0 0 2.373H11.66l-3.056 3.057a1.186 1.186 0 1 0 1.677 1.678l5.083-5.083a1.185 1.185 0 0 0 0-1.678"/></symbol><symbol id="spectrum-icon-Arrow400" viewBox="0 0 18 18"><path d="m17.216 8.126-5.79-5.79a1.236 1.236 0 0 0-1.746 1.75l3.683 3.683c-.008 0-.014-.004-.021-.004H1.337a1.236 1.236 0 0 0 0 2.472H13.34l.02-.004-3.68 3.682a1.236 1.236 0 1 0 1.748 1.748l5.789-5.789a1.237 1.237 0 0 0 0-1.748zm-2.643.895c0-.008.004-.014.004-.021s-.004-.013-.004-.02l.02.02z"/></symbol><symbol id="spectrum-icon-Arrow500" viewBox="0 0 22 22"><path d="m20.17 10.089-6.585-6.585a1.289 1.289 0 0 0-1.822 1.822l4.386 4.386H2.276a1.288 1.288 0 0 0 0 2.576h13.873l-4.386 4.386a1.289 1.289 0 0 0 1.822 1.822l6.585-6.585a1.29 1.29 0 0 0 0-1.822"/></symbol><symbol id="spectrum-icon-Arrow600" viewBox="0 0 24 24"><path d="m22.24 11.052-7.485-7.485a1.341 1.341 0 0 0-1.897 1.897l5.194 5.194H2.079a1.342 1.342 0 0 0 0 2.684h15.973l-5.194 5.194a1.341 1.341 0 1 0 1.897 1.897l7.484-7.485a1.34 1.34 0 0 0 0-1.896z"/></symbol><symbol id="spectrum-icon-Arrow75" viewBox="0 0 12 12"><path d="M11.325 5.258 7.91 1.84a1.05 1.05 0 0 0-1.486 1.484L8.048 4.95H1.494a1.05 1.05 0 0 0 0 2.1h6.554L6.423 8.675a1.05 1.05 0 0 0 1.486 1.484l3.416-3.417a1.05 1.05 0 0 0 0-1.484"/></symbol><symbol id="spectrum-icon-Asterisk100" viewBox="0 0 10 10"><path d="M8.176 8.281c.069.07.115.163 0 .255l-1.437.927c-.115.07-.161.024-.208-.092l-1.783-3.1-2.339 2.571c-.024.045-.093.091-.161 0L1.136 7.678c-.116-.069-.093-.139 0-.208l2.639-2.2-3.01-1.134c-.046 0-.115-.092-.07-.209l.788-1.574a.123.123 0 0 1 .151-.083.13.13 0 0 1 .058.038l2.639 1.713L4.494.64a.12.12 0 0 1 .1-.139h.038l1.922.255c.116 0 .139.046.116.163l-.9 3.31 3.057-.927c.069-.046.139-.046.185.092l.3 1.713c.023.116 0 .162-.093.162l-3.2.255z"/></symbol><symbol id="spectrum-icon-Asterisk200" viewBox="0 0 12 12"><path d="M9.575 9.696c.077.079.129.183 0 .287L7.96 11.025c-.129.079-.182.027-.234-.1L5.72 7.433l-2.633 2.893c-.027.051-.1.1-.182 0l-1.251-1.3c-.131-.077-.1-.156 0-.234l2.97-2.476-3.388-1.285c-.052 0-.129-.1-.079-.235l.886-1.771a.14.14 0 0 1 .17-.093.14.14 0 0 1 .065.042l2.97 1.928.183-3.8a.137.137 0 0 1 .114-.156.2.2 0 0 1 .042 0l2.163.287c.131 0 .156.052.131.183L6.86 5.136l3.44-1.043c.077-.052.156-.052.208.1l.339 1.928c.025.13 0 .183-.1.183l-3.6.287z"/></symbol><symbol id="spectrum-icon-Asterisk300" viewBox="0 0 12 12"><path d="M10.024 10.155c.087.089.146.206 0 .323l-1.819 1.173c-.146.089-.2.03-.263-.117L5.685 7.605l-2.962 3.254c-.03.057-.117.116-.2 0L1.116 9.392c-.147-.087-.117-.176 0-.263l3.339-2.785L.642 4.908c-.059 0-.146-.117-.089-.264l1-1.993a.156.156 0 0 1 .192-.1.16.16 0 0 1 .073.048l3.337 2.163.206-4.28a.155.155 0 0 1 .128-.176.2.2 0 0 1 .047 0l2.433.323c.147 0 .176.059.147.206l-1.144 4.19 3.87-1.173c.087-.06.176-.06.234.117l.381 2.169c.028.147 0 .206-.117.206l-4.046.323z"/></symbol><symbol id="spectrum-icon-Asterisk75" viewBox="0 0 8 8"><path d="M6.825 6.903c.061.062.1.144 0 .227l-1.277.824c-.1.062-.143.02-.185-.082L3.78 5.112 1.7 7.398c-.021.04-.082.08-.143 0L.569 6.367c-.1-.061-.082-.123 0-.185l2.347-1.957-2.68-1.007c-.041 0-.1-.082-.062-.186l.7-1.4a.11.11 0 0 1 .135-.073.1.1 0 0 1 .051.033l2.347 1.523.145-3.006a.11.11 0 0 1 .09-.123h.033l1.709.227c.1 0 .123.04.1.144l-.8 2.943 2.718-.824c.061-.041.123-.041.165.082l.268 1.523c.02.1 0 .144-.082.144l-2.842.227z"/></symbol><symbol id="spectrum-icon-Checkmark100" viewBox="0 0 14 14"><path d="M5.125 12.625a1.25 1.25 0 0 1-.96-.45L1.04 8.425a1.25 1.25 0 0 1 1.92-1.6l2.136 2.563 5.922-7.536a1.25 1.25 0 1 1 1.964 1.545l-6.874 8.75a1.25 1.25 0 0 1-.965.478z"/></symbol><symbol id="spectrum-icon-Checkmark200" viewBox="0 0 14 14"><path d="M4.891 13.224a1.3 1.3 0 0 1-1.005-.474l-3.54-4.3a1.302 1.302 0 0 1 2.011-1.655l2.508 3.046 6.758-8.647a1.302 1.302 0 1 1 2.05 1.604l-7.756 9.926a1.3 1.3 0 0 1-1.01.5z"/></symbol><symbol id="spectrum-icon-Checkmark300" viewBox="0 0 16 16"><path d="M5.627 14.894a1.36 1.36 0 0 1-1.042-.488l-4.1-4.92A1.357 1.357 0 0 1 2.569 7.75l3.027 3.631L13.4 1.448a1.356 1.356 0 0 1 2.133 1.675l-8.84 11.252a1.36 1.36 0 0 1-1.048.519z"/></symbol><symbol id="spectrum-icon-Checkmark400" viewBox="0 0 18 18"><path d="M6.33 16.642a1.42 1.42 0 0 1-1.086-.509l-4.683-5.62a1.413 1.413 0 0 1 2.171-1.81l3.566 4.28 8.936-11.374a1.413 1.413 0 0 1 2.223 1.746L7.441 16.102a1.42 1.42 0 0 1-1.09.54z"/></symbol><symbol id="spectrum-icon-Checkmark50" viewBox="0 0 12 12"><path d="M4.519 10.608a1.15 1.15 0 0 1-.885-.414L1.27 7.358a1.152 1.152 0 0 1 1.77-1.476l1.453 1.743 4.45-5.665a1.152 1.152 0 0 1 1.813 1.424l-5.331 6.784a1.15 1.15 0 0 1-.89.44z"/></symbol><symbol id="spectrum-icon-Checkmark500" viewBox="0 0 20 20"><path d="M6.997 18.48a1.47 1.47 0 0 1-1.13-.53L.521 11.538a1.471 1.471 0 1 1 2.26-1.885l4.182 5.017L17.18 1.666a1.472 1.472 0 1 1 2.314 1.818L8.154 17.917a1.47 1.47 0 0 1-1.135.562z"/></symbol><symbol id="spectrum-icon-Checkmark600" viewBox="0 0 24 24"><path d="M8.621 21.417a1.54 1.54 0 0 1-1.178-.552l-6.091-7.31a1.533 1.533 0 1 1 2.355-1.962l4.879 5.854L20.249 2.602a1.533 1.533 0 1 1 2.41 1.895L9.826 20.831a1.53 1.53 0 0 1-1.182.585z"/></symbol><symbol id="spectrum-icon-Checkmark75" viewBox="0 0 12 12"><path d="M4.333 11.09a1.2 1.2 0 0 1-.922-.433L.69 7.392a1.2 1.2 0 1 1 1.844-1.536l1.772 2.126 5.14-6.542a1.2 1.2 0 1 1 1.886 1.482L5.277 10.63a1.2 1.2 0 0 1-.927.459z"/></symbol><symbol id="spectrum-icon-Chevron100" viewBox="0 0 14 14"><path d="M4.5 13.25a1.094 1.094 0 0 1-.773-1.868L8.109 7 3.727 2.618A1.094 1.094 0 0 1 5.273 1.07l5.157 5.156a1.094 1.094 0 0 1 0 1.546L5.273 12.93a1.1 1.1 0 0 1-.773.321z"/></symbol><symbol id="spectrum-icon-Chevron200" viewBox="0 0 16 16"><path d="M5.123 15.005a1.14 1.14 0 0 1-.806-1.945L9.377 8l-5.06-5.06a1.14 1.14 0 0 1 1.612-1.61l5.865 5.864a1.14 1.14 0 0 1 0 1.612L5.929 14.67a1.14 1.14 0 0 1-.806.334z"/></symbol><symbol id="spectrum-icon-Chevron300" viewBox="0 0 16 16"><path d="M4.696 15.853a1.187 1.187 0 0 1-.84-2.026L9.684 8 3.856 2.173A1.187 1.187 0 0 1 5.536.495L12.2 7.16a1.187 1.187 0 0 1 0 1.678l-6.666 6.666a1.18 1.18 0 0 1-.84.348z"/></symbol><symbol id="spectrum-icon-Chevron400" viewBox="0 0 18 18"><path d="M5.213 17.805a1.236 1.236 0 0 1-.874-2.11L11.034 9 4.34 2.305A1.236 1.236 0 0 1 6.087.557l7.57 7.569a1.235 1.235 0 0 1 0 1.748l-7.57 7.569a1.23 1.23 0 0 1-.874.362"/></symbol><symbol id="spectrum-icon-Chevron500" viewBox="0 0 20 20"><path d="M5.667 19.876a1.288 1.288 0 0 1-.91-2.199L12.433 10 4.756 2.323A1.288 1.288 0 0 1 6.578.502l8.588 8.587a1.29 1.29 0 0 1 0 1.822l-8.588 8.588a1.28 1.28 0 0 1-.911.377"/></symbol><symbol id="spectrum-icon-Chevron600" viewBox="0 0 24 24"><path d="M7.05 23.078a1.341 1.341 0 0 1-.948-2.29L14.89 12 6.102 3.212a1.341 1.341 0 0 1 1.896-1.898l9.737 9.737a1.34 1.34 0 0 1 0 1.898l-9.737 9.737a1.34 1.34 0 0 1-.948.392"/></symbol><symbol id="spectrum-icon-Chevron75" viewBox="0 0 12 12"><path d="M3.833 11.578a1.05 1.05 0 0 1-.742-1.793L6.876 6 3.091 2.215A1.05 1.05 0 1 1 4.575.73l4.529 4.527a1.05 1.05 0 0 1 0 1.486L4.575 11.27a1.05 1.05 0 0 1-.742.308"/></symbol><symbol id="spectrum-icon-CornerTriangle100" viewBox="0 0 7 7"><path d="M6.687.75a.3.3 0 0 0-.221.091L.842 6.466a.312.312 0 0 0 .221.533h5.624a.31.31 0 0 0 .312-.312V1.062A.31.31 0 0 0 6.687.75"/></symbol><symbol id="spectrum-icon-CornerTriangle200" viewBox="0 0 8 8"><path d="M7.65.97a.35.35 0 0 0-.249.1L1.07 7.401a.352.352 0 0 0 .249.6H7.65a.35.35 0 0 0 .352-.352V1.322A.35.35 0 0 0 7.65.97"/></symbol><symbol id="spectrum-icon-CornerTriangle300" viewBox="0 0 8 8"><path d="M7.605.09a.4.4 0 0 0-.28.116L.206 7.325A.4.4 0 0 0 .49 8h7.115a.4.4 0 0 0 .4-.4V.49a.4.4 0 0 0-.4-.4"/></symbol><symbol id="spectrum-icon-CornerTriangle75" viewBox="0 0 6 6"><path d="M5.718.44a.28.28 0 0 0-.2.081l-5 5a.278.278 0 0 0 .2.474h5a.28.28 0 0 0 .278-.278v-5A.28.28 0 0 0 5.718.44"/></symbol><symbol id="spectrum-icon-Cross100" viewBox="0 0 10 10"><path d="M6.548 5 9.63 1.917A1.094 1.094 0 0 0 8.084.371L5.001 3.454 1.917.37A1.094 1.094 0 0 0 .371 1.917L3.454 5 .37 8.085A1.094 1.094 0 1 0 1.917 9.63l3.084-3.083L8.084 9.63a1.094 1.094 0 1 0 1.547-1.546z"/></symbol><symbol id="spectrum-icon-Cross200" viewBox="0 0 12 12"><path d="m7.611 6 3.654-3.653A1.14 1.14 0 0 0 9.653.735L6 4.39 2.347.735A1.14 1.14 0 0 0 .735 2.347L4.39 6 .735 9.653a1.14 1.14 0 1 0 1.612 1.612L6 7.61l3.653 3.654a1.14 1.14 0 0 0 1.612-1.612z"/></symbol><symbol id="spectrum-icon-Cross300" viewBox="0 0 14 14"><path d="m8.678 7 4.245-4.244a1.186 1.186 0 0 0-1.678-1.678L7.001 5.323 2.755 1.077a1.187 1.187 0 0 0-1.678 1.678L5.322 7l-4.244 4.244a1.187 1.187 0 0 0 1.678 1.678l4.245-4.245 4.244 4.245a1.186 1.186 0 0 0 1.678-1.678z"/></symbol><symbol id="spectrum-icon-Cross400" viewBox="0 0 16 16"><path d="m9.748 8 4.915-4.915a1.236 1.236 0 0 0-1.748-1.748L8 6.252 3.085 1.337a1.236 1.236 0 0 0-1.748 1.748L6.252 8l-4.915 4.915a1.236 1.236 0 1 0 1.748 1.748L8 9.748l4.915 4.915a1.236 1.236 0 0 0 1.748-1.748z"/></symbol><symbol id="spectrum-icon-Cross500" viewBox="0 0 16 16"><path d="m9.823 8 5.674-5.674A1.289 1.289 0 1 0 13.675.504L8 6.179 2.326.503A1.288 1.288 0 0 0 .504 2.326l5.674 5.675-5.674 5.674a1.288 1.288 0 0 0 1.822 1.822L8 9.822l5.674 5.675a1.289 1.289 0 1 0 1.823-1.822z"/></symbol><symbol id="spectrum-icon-Cross600" viewBox="0 0 18 18"><path d="m10.897 9 6.537-6.536A1.341 1.341 0 1 0 15.537.567L9 7.104 2.465.567A1.341 1.341 0 0 0 .567 2.464L7.104 9 .567 15.537a1.341 1.341 0 1 0 1.897 1.897L9 10.897l6.536 6.537a1.341 1.341 0 1 0 1.897-1.897z"/></symbol><symbol id="spectrum-icon-Cross75" viewBox="0 0 10 10"><path d="m6.485 5 2.674-2.674A1.05 1.05 0 1 0 7.674.84L5 3.515 2.326.84A1.05 1.05 0 0 0 .84 2.326L3.515 5 .84 7.674A1.05 1.05 0 0 0 2.326 9.16L5 6.485 7.674 9.16A1.05 1.05 0 1 0 9.16 7.674z"/></symbol><symbol id="spectrum-icon-Dash100" viewBox="0 0 12 12"><path d="M10.375 7.25h-8.75a1.25 1.25 0 0 1 0-2.5h8.75a1.25 1.25 0 0 1 0 2.5"/></symbol><symbol id="spectrum-icon-Dash200" viewBox="0 0 14 14"><path d="M12.026 8.302H1.974a1.302 1.302 0 0 1 0-2.604h10.052a1.302 1.302 0 0 1 0 2.604"/></symbol><symbol id="spectrum-icon-Dash300" viewBox="0 0 16 16"><path d="M13.763 9.356H2.237a1.356 1.356 0 0 1 0-2.712h11.526a1.356 1.356 0 0 1 0 2.712"/></symbol><symbol id="spectrum-icon-Dash400" viewBox="0 0 18 18"><path d="M15.596 10.413H2.404a1.413 1.413 0 0 1 0-2.826h13.192a1.413 1.413 0 0 1 0 2.826"/></symbol><symbol id="spectrum-icon-Dash50" viewBox="0 0 10 10"><path d="M8.293 6.152H1.708a1.152 1.152 0 0 1 0-2.304h6.585a1.152 1.152 0 1 1 0 2.304"/></symbol><symbol id="spectrum-icon-Dash500" viewBox="0 0 20 20"><path d="M17.54 11.472H2.461a1.472 1.472 0 0 1 0-2.944h15.077a1.472 1.472 0 0 1 0 2.944z"/></symbol><symbol id="spectrum-icon-Dash600" viewBox="0 0 22 22"><path d="M19.604 12.533H2.398a1.533 1.533 0 1 1 0-3.066h17.206a1.533 1.533 0 0 1 0 3.066"/></symbol><symbol id="spectrum-icon-Dash75" viewBox="0 0 10 10"><path d="M8.75 6.2h-7.5a1.2 1.2 0 0 1 0-2.4h7.5a1.2 1.2 0 1 1 0 2.4"/></symbol><symbol id="spectrum-icon-DoubleGripper" viewBox="0 0 20 6"><path d="M19.375 1.75H.625a.625.625 0 0 1 0-1.25h18.75a.625.625 0 0 1 0 1.25M20 4.875a.626.626 0 0 0-.625-.625H.625a.625.625 0 0 0 0 1.25h18.75A.626.626 0 0 0 20 4.875"/></symbol><symbol id="spectrum-icon-SingleGripper" viewBox="0 0 30 4"><path d="M28.75 3.25H1.25a1.25 1.25 0 0 1 0-2.5h27.5a1.25 1.25 0 0 1 0 2.5"/></symbol><symbol id="spectrum-icon-TripleGripper" viewBox="0 0 14 10"><path d="M12.625 1.25H1.375a.625.625 0 0 1 0-1.25h11.25a.625.625 0 0 1 0 1.25m.625 3.125a.626.626 0 0 0-.625-.625H1.375a.625.625 0 0 0 0 1.25h11.25a.626.626 0 0 0 .625-.625m0 3.75a.626.626 0 0 0-.625-.625H1.375a.625.625 0 0 0 0 1.25h11.25a.626.626 0 0 0 .625-.625"/></symbol></svg>`;
\ No newline at end of file
diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts
index 4790ea4d69d..f49351f19b8 100644
--- a/packages/icons/src/icons-medium.svg.ts
+++ b/packages/icons/src/icons-medium.svg.ts
@@ -1,13 +1 @@
-/**
- * Copyright 2025 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.
- */
-import { svg } from '@spectrum-web-components/base';
-export default svg`<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spectrum-icon-Arrow100" viewBox="0 0 10 10"><path d="M9.7 4.387 6.623 1.262a.875.875 0 1 0-1.247 1.226l1.61 1.637H.925a.875.875 0 0 0 0 1.75h6.062l-1.61 1.637a.875.875 0 1 0 1.247 1.226l3.075-3.125a.874.874 0 0 0 0-1.226z"/></symbol><symbol id="spectrum-icon-Arrow200" viewBox="0 0 12 12"><path d="M11.284 5.356 7.718 1.788a.911.911 0 1 0-1.29 1.29l2.012 2.01H1.286a.911.911 0 1 0 0 1.823H8.44L6.429 8.923a.911.911 0 0 0 1.289 1.289l3.566-3.567a.91.91 0 0 0 0-1.29z"/></symbol><symbol id="spectrum-icon-Arrow300" viewBox="0 0 14 14"><path d="M12.893 6.33 8.826 2.261a.95.95 0 1 0-1.344 1.341L9.93 6.051H1.621a.95.95 0 1 0 0 1.898H9.93l-2.447 2.447a.95.95 0 0 0 1.344 1.342l4.067-4.067a.95.95 0 0 0 0-1.342z"/></symbol><symbol id="spectrum-icon-Arrow400" viewBox="0 0 16 16"><path d="m14.572 7.3-4.63-4.63a.989.989 0 0 0-1.399 1.398l2.942 2.943H1.87a.99.99 0 0 0 0 1.978h9.615l-2.942 2.943a.989.989 0 1 0 1.398 1.398l4.631-4.63a.99.99 0 0 0 0-1.4"/></symbol><symbol id="spectrum-icon-Arrow500" viewBox="0 0 18 18"><path d="m16.336 8.271-5.269-5.267A1.03 1.03 0 1 0 9.61 4.46l3.51 3.509H2.021a1.03 1.03 0 0 0 0 2.06H13.12l-3.51 3.51a1.03 1.03 0 1 0 1.457 1.456l5.269-5.268a1.03 1.03 0 0 0 0-1.456"/></symbol><symbol id="spectrum-icon-Arrow600" viewBox="0 0 20 20"><path d="m18.191 9.241-5.986-5.987a1.073 1.073 0 0 0-1.518 1.517l4.155 4.156H2.063a1.073 1.073 0 1 0 0 2.146h12.779l-4.154 4.155a1.073 1.073 0 1 0 1.517 1.518l5.986-5.987a1.073 1.073 0 0 0 0-1.518"/></symbol><symbol id="spectrum-icon-Arrow75" viewBox="0 0 10 10"><path d="M9.26 4.406 6.528 1.672A.84.84 0 0 0 5.34 2.859l1.3 1.301H1.396a.84.84 0 0 0 0 1.68H6.64l-1.301 1.3a.84.84 0 0 0 1.188 1.188l2.734-2.734a.84.84 0 0 0 0-1.188z"/></symbol><symbol id="spectrum-icon-Asterisk100" viewBox="0 0 8 8"><path d="M6.575 6.555c.055.056.092.13 0 .2l-1.149.741c-.092.056-.129.019-.166-.074L3.834 4.94 1.963 7c-.019.036-.074.073-.129 0l-.889-.927c-.093-.055-.074-.111 0-.166l2.111-1.76L.648 3.24c-.037 0-.092-.074-.056-.167l.63-1.259a.097.097 0 0 1 .167-.036L3.5 3.148l.13-2.7a.1.1 0 0 1 .081-.111h.03l1.537.2c.093 0 .111.037.093.13l-.723 2.647 2.445-.741c.055-.037.111-.037.148.074l.241 1.37c.018.093 0 .13-.074.13l-2.556.2z"/></symbol><symbol id="spectrum-icon-Asterisk200" viewBox="0 0 10 10"><path d="M7.861 7.953c.062.063.1.146 0 .23l-1.293.834c-.1.063-.145.021-.187-.083l-1.6-2.793-2.105 2.314c-.021.04-.083.082-.145 0l-1-1.043c-.1-.062-.083-.125 0-.187l2.375-1.981-2.715-1.026c-.042 0-.1-.083-.063-.188l.707-1.412a.11.11 0 0 1 .136-.074.1.1 0 0 1 .052.034l2.378 1.54.146-3.043A.11.11 0 0 1 4.638.95h.034l1.73.23c.1 0 .125.042.1.146l-.814 2.979 2.751-.834c.062-.042.125-.042.167.083l.271 1.542c.02.1 0 .146-.083.146l-2.876.23z"/></symbol><symbol id="spectrum-icon-Asterisk300" viewBox="0 0 10 10"><path d="M8.266 8.324c.07.071.116.164 0 .258l-1.454.938c-.116.071-.163.024-.21-.094l-1.8-3.141-2.367 2.6c-.024.045-.094.092-.163 0l-1.13-1.167c-.118-.07-.094-.141 0-.21l2.671-2.227L.766 4.13c-.047 0-.116-.094-.071-.211l.8-1.593a.124.124 0 0 1 .153-.084.13.13 0 0 1 .058.038l2.669 1.738.164-3.422a.124.124 0 0 1 .1-.14h.038l1.945.258c.118 0 .14.047.118.164l-.915 3.349 3.094-.938c.07-.047.14-.047.187.094l.3 1.734c.023.118 0 .164-.094.164l-3.234.258z"/></symbol><symbol id="spectrum-icon-Asterisk75" viewBox="0 0 8 8"><path d="M6.26 6.463c.049.05.082.116 0 .181l-1.022.659c-.082.05-.115.017-.148-.066L3.822 5.03 2.16 6.859c-.017.032-.066.065-.115 0l-.79-.824c-.083-.049-.066-.1 0-.148l1.877-1.565L.99 3.516c-.033 0-.082-.066-.05-.148l.56-1.119a.087.087 0 0 1 .108-.059.1.1 0 0 1 .04.027l1.878 1.218.116-2.4a.087.087 0 0 1 .072-.1h.027l1.367.181c.083 0 .1.033.083.116L4.55 3.581l2.174-.659c.049-.033.1-.033.132.066l.214 1.218c.016.083 0 .115-.066.115l-2.273.181z"/></symbol><symbol id="spectrum-icon-Checkmark100" viewBox="0 0 10 10"><path d="M3.5 9.5a1 1 0 0 1-.774-.368l-2.45-3a1 1 0 1 1 1.548-1.264l1.657 2.028 4.68-6.01A1 1 0 0 1 9.74 2.114l-5.45 7a1 1 0 0 1-.777.386z"/></symbol><symbol id="spectrum-icon-Checkmark200" viewBox="0 0 12 12"><path d="M4.313 10.98a1.04 1.04 0 0 1-.8-.375L.647 7.165a1.042 1.042 0 0 1 1.6-1.333l2.042 2.45 5.443-6.928a1.042 1.042 0 0 1 1.64 1.287l-6.24 7.94a1.04 1.04 0 0 1-.804.399z"/></symbol><symbol id="spectrum-icon-Checkmark300" viewBox="0 0 14 14"><path d="M5.102 12.514a1.09 1.09 0 0 1-.834-.39L.988 8.19A1.085 1.085 0 0 1 2.656 6.8l2.421 2.906 6.243-7.947a1.085 1.085 0 0 1 1.707 1.34L5.955 12.1a1.09 1.09 0 0 1-.838.415z"/></symbol><symbol id="spectrum-icon-Checkmark400" viewBox="0 0 16 16"><path d="M5.864 14.114a1.13 1.13 0 0 1-.868-.407L1.25 9.21a1.13 1.13 0 1 1 1.736-1.448l2.854 3.425 7.148-9.1a1.13 1.13 0 1 1 1.778 1.397L6.753 13.682a1.13 1.13 0 0 1-.872.432z"/></symbol><symbol id="spectrum-icon-Checkmark50" viewBox="0 0 10 10"><path d="M3.815 8.687a.92.92 0 0 1-.708-.332l-1.891-2.27a.921.921 0 0 1 1.416-1.18L3.794 6.3l3.56-4.531a.921.921 0 1 1 1.45 1.138L4.54 8.335a.92.92 0 0 1-.712.351z"/></symbol><symbol id="spectrum-icon-Checkmark500" viewBox="0 0 16 16"><path d="M5.597 14.784a1.18 1.18 0 0 1-.905-.424L.417 9.229a1.177 1.177 0 1 1 1.809-1.508l3.343 4.013 8.174-10.402a1.177 1.177 0 0 1 1.852 1.456L6.523 14.334a1.18 1.18 0 0 1-.91.45z"/></symbol><symbol id="spectrum-icon-Checkmark600" viewBox="0 0 18 18"><path d="M6.297 16.534a1.23 1.23 0 0 1-.942-.442L.48 10.244a1.227 1.227 0 0 1 1.885-1.57l3.904 4.684L15.6 1.482a1.227 1.227 0 0 1 1.93 1.516L7.262 16.065a1.23 1.23 0 0 1-.947.469z"/></symbol><symbol id="spectrum-icon-Checkmark75" viewBox="0 0 10 10"><path d="M3.667 9.07a.96.96 0 0 1-.737-.344L.753 6.114a.96.96 0 1 1 1.474-1.23l1.418 1.701 4.112-5.233a.96.96 0 0 1 1.51 1.186L4.422 8.704a.96.96 0 0 1-.741.367z"/></symbol><symbol id="spectrum-icon-Chevron100" viewBox="0 0 10 10"><path d="M3 9.95a.875.875 0 0 1-.615-1.498L5.88 5 2.385 1.547A.875.875 0 0 1 3.615.302L7.74 4.377a.876.876 0 0 1 0 1.246L3.615 9.698A.87.87 0 0 1 3 9.95"/></symbol><symbol id="spectrum-icon-Chevron200" viewBox="0 0 12 12"><path d="M9.034 5.356 4.343.663a.911.911 0 0 0-1.29 1.289L7.102 6l-4.047 4.047a.911.911 0 1 0 1.289 1.29l4.691-4.692a.91.91 0 0 0 0-1.29z"/></symbol><symbol id="spectrum-icon-Chevron300" viewBox="0 0 14 14"><path d="M10.639 7a.95.95 0 0 0-.278-.671l-.003-.002-5.33-5.33a.95.95 0 0 0-1.342 1.342L8.346 7l-4.661 4.66a.95.95 0 1 0 1.342 1.343l5.33-5.33.003-.001A.95.95 0 0 0 10.64 7z"/></symbol><symbol id="spectrum-icon-Chevron400" viewBox="0 0 16 16"><path d="M4.97 15.044a.989.989 0 0 1-.698-1.688L9.627 8 4.27 2.644a.989.989 0 0 1 1.4-1.398L11.726 7.3a.99.99 0 0 1 0 1.398L5.67 14.754a1 1 0 0 1-.7.29"/></symbol><symbol id="spectrum-icon-Chevron500" viewBox="0 0 16 16"><path d="M12.133 7.271 5.263.401a1.03 1.03 0 0 0-1.457 1.457L9.947 8l-6.141 6.142a1.03 1.03 0 0 0 1.457 1.457l6.87-6.87a1.03 1.03 0 0 0 0-1.457z"/></symbol><symbol id="spectrum-icon-Chevron600" viewBox="0 0 18 18"><path d="M5.04 17.863a1.073 1.073 0 0 1-.759-1.832L11.313 9 4.28 1.969A1.073 1.073 0 0 1 5.8.45l7.79 7.79a1.073 1.073 0 0 1 0 1.518l-7.79 7.79a1.07 1.07 0 0 1-.759.314z"/></symbol><symbol id="spectrum-icon-Chevron75" viewBox="0 0 10 10"><path d="m7.482 4.406-.001-.001L3.86.783a.84.84 0 0 0-1.188 1.188L5.702 5l-3.03 3.03A.84.84 0 0 0 3.86 9.216l3.621-3.622h.001a.84.84 0 0 0 0-1.19z"/></symbol><symbol id="spectrum-icon-CornerTriangle100" viewBox="0 0 5 5"><path d="M4.763 0a.25.25 0 0 0-.177.073l-4.5 4.5A.25.25 0 0 0 .263 5h4.5a.25.25 0 0 0 .25-.25V.25a.25.25 0 0 0-.25-.25"/></symbol><symbol id="spectrum-icon-CornerTriangle200" viewBox="0 0 6 6"><path d="M5.719.37a.28.28 0 0 0-.2.082L.452 5.519a.281.281 0 0 0 .2.481h5.067A.28.28 0 0 0 6 5.719V.652A.28.28 0 0 0 5.72.37z"/></symbol><symbol id="spectrum-icon-CornerTriangle300" viewBox="0 0 7 7"><path d="M6.683.67a.32.32 0 0 0-.223.093l-5.7 5.7a.316.316 0 0 0 .224.54h5.7A.316.316 0 0 0 7 6.687V.986A.316.316 0 0 0 6.684.67z"/></symbol><symbol id="spectrum-icon-CornerTriangle75" viewBox="0 0 5 5"><path d="M4.78.558a.22.22 0 0 0-.157.065l-4 4a.222.222 0 0 0 .157.379h4a.22.22 0 0 0 .222-.222v-4A.22.22 0 0 0 4.78.558"/></symbol><symbol id="spectrum-icon-Cross100" viewBox="0 0 8 8"><path d="m5.238 4 2.456-2.457A.875.875 0 1 0 6.456.306L4 2.763 1.543.306A.875.875 0 0 0 .306 1.544L2.763 4 .306 6.457a.875.875 0 1 0 1.238 1.237L4 5.237l2.456 2.457a.875.875 0 1 0 1.238-1.237z"/></symbol><symbol id="spectrum-icon-Cross200" viewBox="0 0 10 10"><path d="m6.29 5 2.922-2.922a.911.911 0 0 0-1.29-1.29L5 3.712 2.078.789a.911.911 0 0 0-1.29 1.289L3.712 5 .79 7.922a.911.911 0 1 0 1.289 1.29L5 6.288 7.923 9.21a.911.911 0 0 0 1.289-1.289z"/></symbol><symbol id="spectrum-icon-Cross300" viewBox="0 0 12 12"><path d="m7.344 6 3.395-3.396a.95.95 0 0 0-1.344-1.342L6 4.657 2.604 1.262a.95.95 0 0 0-1.342 1.342L4.657 6 1.262 9.396a.95.95 0 0 0 1.343 1.343L6 7.344l3.395 3.395a.95.95 0 0 0 1.344-1.344z"/></symbol><symbol id="spectrum-icon-Cross400" viewBox="0 0 12 12"><path d="m7.398 6 3.932-3.932A.989.989 0 0 0 9.932.67L6 4.602 2.068.67A.989.989 0 0 0 .67 2.068L4.602 6 .67 9.932a.989.989 0 1 0 1.398 1.398L6 7.398l3.932 3.932a.989.989 0 0 0 1.398-1.398z"/></symbol><symbol id="spectrum-icon-Cross500" viewBox="0 0 14 14"><path d="m8.457 7 4.54-4.54a1.03 1.03 0 0 0-1.458-1.456L7 5.543l-4.54-4.54a1.03 1.03 0 0 0-1.457 1.458L5.543 7l-4.54 4.54a1.03 1.03 0 1 0 1.457 1.456L7 8.457l4.54 4.54a1.03 1.03 0 0 0 1.456-1.458z"/></symbol><symbol id="spectrum-icon-Cross600" viewBox="0 0 16 16"><path d="m9.518 8 5.23-5.228a1.073 1.073 0 0 0-1.518-1.518L8.001 6.483l-5.229-5.23a1.073 1.073 0 0 0-1.518 1.519L6.483 8l-5.23 5.229a1.073 1.073 0 1 0 1.518 1.518l5.23-5.23 5.228 5.23a1.073 1.073 0 0 0 1.518-1.518z"/></symbol><symbol id="spectrum-icon-Cross75" viewBox="0 0 8 8"><path d="m5.188 4 2.14-2.14A.84.84 0 1 0 6.141.672L4 2.812 1.86.672A.84.84 0 0 0 .672 1.86L2.812 4 .672 6.14A.84.84 0 1 0 1.86 7.328L4 5.188l2.14 2.14A.84.84 0 1 0 7.328 6.14z"/></symbol><symbol id="spectrum-icon-Dash100" viewBox="0 0 10 10"><path d="M8.5 6h-7a1 1 0 0 1 0-2h7a1 1 0 0 1 0 2"/></symbol><symbol id="spectrum-icon-Dash200" viewBox="0 0 12 12"><path d="M10.021 7.042H1.98a1.042 1.042 0 1 1 0-2.083h8.043a1.042 1.042 0 0 1 0 2.083z"/></symbol><symbol id="spectrum-icon-Dash300" viewBox="0 0 12 12"><path d="M10.61 7.085H1.39a1.085 1.085 0 0 1 0-2.17h9.22a1.085 1.085 0 0 1 0 2.17"/></symbol><symbol id="spectrum-icon-Dash400" viewBox="0 0 14 14"><path d="M12.277 8.13H1.723a1.13 1.13 0 1 1 0-2.26h10.554a1.13 1.13 0 1 1 0 2.26"/></symbol><symbol id="spectrum-icon-Dash50" viewBox="0 0 8 8"><path d="M6.634 4.921H1.366a.921.921 0 0 1 0-1.842h5.268a.921.921 0 1 1 0 1.842"/></symbol><symbol id="spectrum-icon-Dash500" viewBox="0 0 16 16"><path d="M14.03 9.178H1.969a1.178 1.178 0 1 1 0-2.356H14.03a1.178 1.178 0 0 1 0 2.356"/></symbol><symbol id="spectrum-icon-Dash600" viewBox="0 0 18 18"><path d="M15.882 10.227H2.117a1.227 1.227 0 0 1 0-2.454h13.765a1.227 1.227 0 0 1 0 2.454"/></symbol><symbol id="spectrum-icon-Dash75" viewBox="0 0 8 8"><path d="M6.99 4.96H1.01a.96.96 0 0 1 0-1.92h5.98a.96.96 0 0 1 0 1.92"/></symbol><symbol id="spectrum-icon-DoubleGripper" viewBox="0 0 16 4"><path d="M15.45 1.05H.55a.5.5 0 0 1 0-1h14.9a.5.5 0 0 1 0 1m.5 2.4a.5.5 0 0 0-.5-.5H.55a.5.5 0 0 0 0 1h14.9a.5.5 0 0 0 .5-.5"/></symbol><symbol id="spectrum-icon-SingleGripper" viewBox="0 0 24 2"><path d="M23 2H1a1 1 0 0 1 0-2h22a1 1 0 0 1 0 2"/></symbol><symbol id="spectrum-icon-TripleGripper" viewBox="0 0 10 8"><path d="M9.45 1.05H.55a.5.5 0 0 1 0-1h8.9a.5.5 0 0 1 0 1m.5 2.45a.5.5 0 0 0-.5-.5H.55a.5.5 0 0 0 0 1h8.9a.5.5 0 0 0 .5-.5m0 3a.5.5 0 0 0-.5-.5H.55a.5.5 0 0 0 0 1h8.9a.5.5 0 0 0 .5-.5"/></symbol></svg>`;
+import { svg } from '@spectrum-web-components/base'; export default svg`<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spectrum-icon-Arrow100" viewBox="0 0 10 10"><path d="M9.7 4.387 6.623 1.262a.875.875 0 1 0-1.247 1.226l1.61 1.637H.925a.875.875 0 0 0 0 1.75h6.062l-1.61 1.637a.875.875 0 1 0 1.247 1.226l3.075-3.125a.874.874 0 0 0 0-1.226z"/></symbol><symbol id="spectrum-icon-Arrow200" viewBox="0 0 12 12"><path d="M11.284 5.356 7.718 1.788a.911.911 0 1 0-1.29 1.29l2.012 2.01H1.286a.911.911 0 1 0 0 1.823H8.44L6.429 8.923a.911.911 0 0 0 1.289 1.289l3.566-3.567a.91.91 0 0 0 0-1.29z"/></symbol><symbol id="spectrum-icon-Arrow300" viewBox="0 0 14 14"><path d="M12.893 6.33 8.826 2.261a.95.95 0 1 0-1.344 1.341L9.93 6.051H1.621a.95.95 0 1 0 0 1.898H9.93l-2.447 2.447a.95.95 0 0 0 1.344 1.342l4.067-4.067a.95.95 0 0 0 0-1.342z"/></symbol><symbol id="spectrum-icon-Arrow400" viewBox="0 0 16 16"><path d="m14.572 7.3-4.63-4.63a.989.989 0 0 0-1.399 1.398l2.942 2.943H1.87a.99.99 0 0 0 0 1.978h9.615l-2.942 2.943a.989.989 0 1 0 1.398 1.398l4.631-4.63a.99.99 0 0 0 0-1.4"/></symbol><symbol id="spectrum-icon-Arrow500" viewBox="0 0 18 18"><path d="m16.336 8.271-5.269-5.267A1.03 1.03 0 1 0 9.61 4.46l3.51 3.509H2.021a1.03 1.03 0 0 0 0 2.06H13.12l-3.51 3.51a1.03 1.03 0 1 0 1.457 1.456l5.269-5.268a1.03 1.03 0 0 0 0-1.456"/></symbol><symbol id="spectrum-icon-Arrow600" viewBox="0 0 20 20"><path d="m18.191 9.241-5.986-5.987a1.073 1.073 0 0 0-1.518 1.517l4.155 4.156H2.063a1.073 1.073 0 1 0 0 2.146h12.779l-4.154 4.155a1.073 1.073 0 1 0 1.517 1.518l5.986-5.987a1.073 1.073 0 0 0 0-1.518"/></symbol><symbol id="spectrum-icon-Arrow75" viewBox="0 0 10 10"><path d="M9.26 4.406 6.528 1.672A.84.84 0 0 0 5.34 2.859l1.3 1.301H1.396a.84.84 0 0 0 0 1.68H6.64l-1.301 1.3a.84.84 0 0 0 1.188 1.188l2.734-2.734a.84.84 0 0 0 0-1.188z"/></symbol><symbol id="spectrum-icon-Asterisk100" viewBox="0 0 8 8"><path d="M6.575 6.555c.055.056.092.13 0 .2l-1.149.741c-.092.056-.129.019-.166-.074L3.834 4.94 1.963 7c-.019.036-.074.073-.129 0l-.889-.927c-.093-.055-.074-.111 0-.166l2.111-1.76L.648 3.24c-.037 0-.092-.074-.056-.167l.63-1.259a.097.097 0 0 1 .167-.036L3.5 3.148l.13-2.7a.1.1 0 0 1 .081-.111h.03l1.537.2c.093 0 .111.037.093.13l-.723 2.647 2.445-.741c.055-.037.111-.037.148.074l.241 1.37c.018.093 0 .13-.074.13l-2.556.2z"/></symbol><symbol id="spectrum-icon-Asterisk200" viewBox="0 0 10 10"><path d="M7.861 7.953c.062.063.1.146 0 .23l-1.293.834c-.1.063-.145.021-.187-.083l-1.6-2.793-2.105 2.314c-.021.04-.083.082-.145 0l-1-1.043c-.1-.062-.083-.125 0-.187l2.375-1.981-2.715-1.026c-.042 0-.1-.083-.063-.188l.707-1.412a.11.11 0 0 1 .136-.074.1.1 0 0 1 .052.034l2.378 1.54.146-3.043A.11.11 0 0 1 4.638.95h.034l1.73.23c.1 0 .125.042.1.146l-.814 2.979 2.751-.834c.062-.042.125-.042.167.083l.271 1.542c.02.1 0 .146-.083.146l-2.876.23z"/></symbol><symbol id="spectrum-icon-Asterisk300" viewBox="0 0 10 10"><path d="M8.266 8.324c.07.071.116.164 0 .258l-1.454.938c-.116.071-.163.024-.21-.094l-1.8-3.141-2.367 2.6c-.024.045-.094.092-.163 0l-1.13-1.167c-.118-.07-.094-.141 0-.21l2.671-2.227L.766 4.13c-.047 0-.116-.094-.071-.211l.8-1.593a.124.124 0 0 1 .153-.084.13.13 0 0 1 .058.038l2.669 1.738.164-3.422a.124.124 0 0 1 .1-.14h.038l1.945.258c.118 0 .14.047.118.164l-.915 3.349 3.094-.938c.07-.047.14-.047.187.094l.3 1.734c.023.118 0 .164-.094.164l-3.234.258z"/></symbol><symbol id="spectrum-icon-Asterisk75" viewBox="0 0 8 8"><path d="M6.26 6.463c.049.05.082.116 0 .181l-1.022.659c-.082.05-.115.017-.148-.066L3.822 5.03 2.16 6.859c-.017.032-.066.065-.115 0l-.79-.824c-.083-.049-.066-.1 0-.148l1.877-1.565L.99 3.516c-.033 0-.082-.066-.05-.148l.56-1.119a.087.087 0 0 1 .108-.059.1.1 0 0 1 .04.027l1.878 1.218.116-2.4a.087.087 0 0 1 .072-.1h.027l1.367.181c.083 0 .1.033.083.116L4.55 3.581l2.174-.659c.049-.033.1-.033.132.066l.214 1.218c.016.083 0 .115-.066.115l-2.273.181z"/></symbol><symbol id="spectrum-icon-Checkmark100" viewBox="0 0 10 10"><path d="M3.5 9.5a1 1 0 0 1-.774-.368l-2.45-3a1 1 0 1 1 1.548-1.264l1.657 2.028 4.68-6.01A1 1 0 0 1 9.74 2.114l-5.45 7a1 1 0 0 1-.777.386z"/></symbol><symbol id="spectrum-icon-Checkmark200" viewBox="0 0 12 12"><path d="M4.313 10.98a1.04 1.04 0 0 1-.8-.375L.647 7.165a1.042 1.042 0 0 1 1.6-1.333l2.042 2.45 5.443-6.928a1.042 1.042 0 0 1 1.64 1.287l-6.24 7.94a1.04 1.04 0 0 1-.804.399z"/></symbol><symbol id="spectrum-icon-Checkmark300" viewBox="0 0 14 14"><path d="M5.102 12.514a1.09 1.09 0 0 1-.834-.39L.988 8.19A1.085 1.085 0 0 1 2.656 6.8l2.421 2.906 6.243-7.947a1.085 1.085 0 0 1 1.707 1.34L5.955 12.1a1.09 1.09 0 0 1-.838.415z"/></symbol><symbol id="spectrum-icon-Checkmark400" viewBox="0 0 16 16"><path d="M5.864 14.114a1.13 1.13 0 0 1-.868-.407L1.25 9.21a1.13 1.13 0 1 1 1.736-1.448l2.854 3.425 7.148-9.1a1.13 1.13 0 1 1 1.778 1.397L6.753 13.682a1.13 1.13 0 0 1-.872.432z"/></symbol><symbol id="spectrum-icon-Checkmark50" viewBox="0 0 10 10"><path d="M3.815 8.687a.92.92 0 0 1-.708-.332l-1.891-2.27a.921.921 0 0 1 1.416-1.18L3.794 6.3l3.56-4.531a.921.921 0 1 1 1.45 1.138L4.54 8.335a.92.92 0 0 1-.712.351z"/></symbol><symbol id="spectrum-icon-Checkmark500" viewBox="0 0 16 16"><path d="M5.597 14.784a1.18 1.18 0 0 1-.905-.424L.417 9.229a1.177 1.177 0 1 1 1.809-1.508l3.343 4.013 8.174-10.402a1.177 1.177 0 0 1 1.852 1.456L6.523 14.334a1.18 1.18 0 0 1-.91.45z"/></symbol><symbol id="spectrum-icon-Checkmark600" viewBox="0 0 18 18"><path d="M6.297 16.534a1.23 1.23 0 0 1-.942-.442L.48 10.244a1.227 1.227 0 0 1 1.885-1.57l3.904 4.684L15.6 1.482a1.227 1.227 0 0 1 1.93 1.516L7.262 16.065a1.23 1.23 0 0 1-.947.469z"/></symbol><symbol id="spectrum-icon-Checkmark75" viewBox="0 0 10 10"><path d="M3.667 9.07a.96.96 0 0 1-.737-.344L.753 6.114a.96.96 0 1 1 1.474-1.23l1.418 1.701 4.112-5.233a.96.96 0 0 1 1.51 1.186L4.422 8.704a.96.96 0 0 1-.741.367z"/></symbol><symbol id="spectrum-icon-Chevron100" viewBox="0 0 10 10"><path d="M3 9.95a.875.875 0 0 1-.615-1.498L5.88 5 2.385 1.547A.875.875 0 0 1 3.615.302L7.74 4.377a.876.876 0 0 1 0 1.246L3.615 9.698A.87.87 0 0 1 3 9.95"/></symbol><symbol id="spectrum-icon-Chevron200" viewBox="0 0 12 12"><path d="M9.034 5.356 4.343.663a.911.911 0 0 0-1.29 1.289L7.102 6l-4.047 4.047a.911.911 0 1 0 1.289 1.29l4.691-4.692a.91.91 0 0 0 0-1.29z"/></symbol><symbol id="spectrum-icon-Chevron300" viewBox="0 0 14 14"><path d="M10.639 7a.95.95 0 0 0-.278-.671l-.003-.002-5.33-5.33a.95.95 0 0 0-1.342 1.342L8.346 7l-4.661 4.66a.95.95 0 1 0 1.342 1.343l5.33-5.33.003-.001A.95.95 0 0 0 10.64 7z"/></symbol><symbol id="spectrum-icon-Chevron400" viewBox="0 0 16 16"><path d="M4.97 15.044a.989.989 0 0 1-.698-1.688L9.627 8 4.27 2.644a.989.989 0 0 1 1.4-1.398L11.726 7.3a.99.99 0 0 1 0 1.398L5.67 14.754a1 1 0 0 1-.7.29"/></symbol><symbol id="spectrum-icon-Chevron500" viewBox="0 0 16 16"><path d="M12.133 7.271 5.263.401a1.03 1.03 0 0 0-1.457 1.457L9.947 8l-6.141 6.142a1.03 1.03 0 0 0 1.457 1.457l6.87-6.87a1.03 1.03 0 0 0 0-1.457z"/></symbol><symbol id="spectrum-icon-Chevron600" viewBox="0 0 18 18"><path d="M5.04 17.863a1.073 1.073 0 0 1-.759-1.832L11.313 9 4.28 1.969A1.073 1.073 0 0 1 5.8.45l7.79 7.79a1.073 1.073 0 0 1 0 1.518l-7.79 7.79a1.07 1.07 0 0 1-.759.314z"/></symbol><symbol id="spectrum-icon-Chevron75" viewBox="0 0 10 10"><path d="m7.482 4.406-.001-.001L3.86.783a.84.84 0 0 0-1.188 1.188L5.702 5l-3.03 3.03A.84.84 0 0 0 3.86 9.216l3.621-3.622h.001a.84.84 0 0 0 0-1.19z"/></symbol><symbol id="spectrum-icon-CornerTriangle100" viewBox="0 0 5 5"><path d="M4.763 0a.25.25 0 0 0-.177.073l-4.5 4.5A.25.25 0 0 0 .263 5h4.5a.25.25 0 0 0 .25-.25V.25a.25.25 0 0 0-.25-.25"/></symbol><symbol id="spectrum-icon-CornerTriangle200" viewBox="0 0 6 6"><path d="M5.719.37a.28.28 0 0 0-.2.082L.452 5.519a.281.281 0 0 0 .2.481h5.067A.28.28 0 0 0 6 5.719V.652A.28.28 0 0 0 5.72.37z"/></symbol><symbol id="spectrum-icon-CornerTriangle300" viewBox="0 0 7 7"><path d="M6.683.67a.32.32 0 0 0-.223.093l-5.7 5.7a.316.316 0 0 0 .224.54h5.7A.316.316 0 0 0 7 6.687V.986A.316.316 0 0 0 6.684.67z"/></symbol><symbol id="spectrum-icon-CornerTriangle75" viewBox="0 0 5 5"><path d="M4.78.558a.22.22 0 0 0-.157.065l-4 4a.222.222 0 0 0 .157.379h4a.22.22 0 0 0 .222-.222v-4A.22.22 0 0 0 4.78.558"/></symbol><symbol id="spectrum-icon-Cross100" viewBox="0 0 8 8"><path d="m5.238 4 2.456-2.457A.875.875 0 1 0 6.456.306L4 2.763 1.543.306A.875.875 0 0 0 .306 1.544L2.763 4 .306 6.457a.875.875 0 1 0 1.238 1.237L4 5.237l2.456 2.457a.875.875 0 1 0 1.238-1.237z"/></symbol><symbol id="spectrum-icon-Cross200" viewBox="0 0 10 10"><path d="m6.29 5 2.922-2.922a.911.911 0 0 0-1.29-1.29L5 3.712 2.078.789a.911.911 0 0 0-1.29 1.289L3.712 5 .79 7.922a.911.911 0 1 0 1.289 1.29L5 6.288 7.923 9.21a.911.911 0 0 0 1.289-1.289z"/></symbol><symbol id="spectrum-icon-Cross300" viewBox="0 0 12 12"><path d="m7.344 6 3.395-3.396a.95.95 0 0 0-1.344-1.342L6 4.657 2.604 1.262a.95.95 0 0 0-1.342 1.342L4.657 6 1.262 9.396a.95.95 0 0 0 1.343 1.343L6 7.344l3.395 3.395a.95.95 0 0 0 1.344-1.344z"/></symbol><symbol id="spectrum-icon-Cross400" viewBox="0 0 12 12"><path d="m7.398 6 3.932-3.932A.989.989 0 0 0 9.932.67L6 4.602 2.068.67A.989.989 0 0 0 .67 2.068L4.602 6 .67 9.932a.989.989 0 1 0 1.398 1.398L6 7.398l3.932 3.932a.989.989 0 0 0 1.398-1.398z"/></symbol><symbol id="spectrum-icon-Cross500" viewBox="0 0 14 14"><path d="m8.457 7 4.54-4.54a1.03 1.03 0 0 0-1.458-1.456L7 5.543l-4.54-4.54a1.03 1.03 0 0 0-1.457 1.458L5.543 7l-4.54 4.54a1.03 1.03 0 1 0 1.457 1.456L7 8.457l4.54 4.54a1.03 1.03 0 0 0 1.456-1.458z"/></symbol><symbol id="spectrum-icon-Cross600" viewBox="0 0 16 16"><path d="m9.518 8 5.23-5.228a1.073 1.073 0 0 0-1.518-1.518L8.001 6.483l-5.229-5.23a1.073 1.073 0 0 0-1.518 1.519L6.483 8l-5.23 5.229a1.073 1.073 0 1 0 1.518 1.518l5.23-5.23 5.228 5.23a1.073 1.073 0 0 0 1.518-1.518z"/></symbol><symbol id="spectrum-icon-Cross75" viewBox="0 0 8 8"><path d="m5.188 4 2.14-2.14A.84.84 0 1 0 6.141.672L4 2.812 1.86.672A.84.84 0 0 0 .672 1.86L2.812 4 .672 6.14A.84.84 0 1 0 1.86 7.328L4 5.188l2.14 2.14A.84.84 0 1 0 7.328 6.14z"/></symbol><symbol id="spectrum-icon-Dash100" viewBox="0 0 10 10"><path d="M8.5 6h-7a1 1 0 0 1 0-2h7a1 1 0 0 1 0 2"/></symbol><symbol id="spectrum-icon-Dash200" viewBox="0 0 12 12"><path d="M10.021 7.042H1.98a1.042 1.042 0 1 1 0-2.083h8.043a1.042 1.042 0 0 1 0 2.083z"/></symbol><symbol id="spectrum-icon-Dash300" viewBox="0 0 12 12"><path d="M10.61 7.085H1.39a1.085 1.085 0 0 1 0-2.17h9.22a1.085 1.085 0 0 1 0 2.17"/></symbol><symbol id="spectrum-icon-Dash400" viewBox="0 0 14 14"><path d="M12.277 8.13H1.723a1.13 1.13 0 1 1 0-2.26h10.554a1.13 1.13 0 1 1 0 2.26"/></symbol><symbol id="spectrum-icon-Dash50" viewBox="0 0 8 8"><path d="M6.634 4.921H1.366a.921.921 0 0 1 0-1.842h5.268a.921.921 0 1 1 0 1.842"/></symbol><symbol id="spectrum-icon-Dash500" viewBox="0 0 16 16"><path d="M14.03 9.178H1.969a1.178 1.178 0 1 1 0-2.356H14.03a1.178 1.178 0 0 1 0 2.356"/></symbol><symbol id="spectrum-icon-Dash600" viewBox="0 0 18 18"><path d="M15.882 10.227H2.117a1.227 1.227 0 0 1 0-2.454h13.765a1.227 1.227 0 0 1 0 2.454"/></symbol><symbol id="spectrum-icon-Dash75" viewBox="0 0 8 8"><path d="M6.99 4.96H1.01a.96.96 0 0 1 0-1.92h5.98a.96.96 0 0 1 0 1.92"/></symbol><symbol id="spectrum-icon-DoubleGripper" viewBox="0 0 16 4"><path d="M15.45 1.05H.55a.5.5 0 0 1 0-1h14.9a.5.5 0 0 1 0 1m.5 2.4a.5.5 0 0 0-.5-.5H.55a.5.5 0 0 0 0 1h14.9a.5.5 0 0 0 .5-.5"/></symbol><symbol id="spectrum-icon-SingleGripper" viewBox="0 0 24 2"><path d="M23 2H1a1 1 0 0 1 0-2h22a1 1 0 0 1 0 2"/></symbol><symbol id="spectrum-icon-TripleGripper" viewBox="0 0 10 8"><path d="M9.45 1.05H.55a.5.5 0 0 1 0-1h8.9a.5.5 0 0 1 0 1m.5 2.45a.5.5 0 0 0-.5-.5H.55a.5.5 0 0 0 0 1h8.9a.5.5 0 0 0 .5-.5m0 3a.5.5 0 0 0-.5-.5H.55a.5.5 0 0 0 0 1h8.9a.5.5 0 0 0 .5-.5"/></symbol></svg>`;
\ No newline at end of file
diff --git a/packages/iconset/stories/icons-demo.ts b/packages/iconset/stories/icons-demo.ts
index 471f856fe0e..bccb1a0d680 100644
--- a/packages/iconset/stories/icons-demo.ts
+++ b/packages/iconset/stories/icons-demo.ts
@@ -9,6 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+
 import { IconsetAddedDetail } from '@spectrum-web-components/iconset';
 import {
     css,
@@ -32,12 +33,6 @@ import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/help-text/sp-help-text.js';
 
 import iconsList from './iconsList.json' assert { type: 'json' };
-
-import {
-    SystemResolutionController,
-    systemResolverUpdatedSymbol,
-} from '@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js';
-
 @customElement('delayed-ready')
 export class DelayedReady extends SpectrumElement {
     _delayedReady!: Promise<void>;
@@ -148,15 +143,7 @@ export class IconsDemo extends SpectrumElement {
         this.filteredIcons = filteredIcons;
     }
 
-    private systemResolver = new SystemResolutionController(this);
-
     protected override update(changes: PropertyValues): void {
-        if (changes.has(systemResolverUpdatedSymbol)) {
-            this.spectrumVersion =
-                this.systemResolver.system === 'spectrum-two' ? 2 : 1;
-            this.filterIconsBySpectrumVersion();
-        }
-
         if (changes.has('icons')) {
             this.filterIconsBySpectrumVersion();
         }
diff --git a/packages/illustrated-message/package.json b/packages/illustrated-message/package.json
index bbff4c80cb0..958a832f270 100644
--- a/packages/illustrated-message/package.json
+++ b/packages/illustrated-message/package.json
@@ -30,7 +30,6 @@
             "default": "./src/IllustratedMessage.js"
         },
         "./src/illustrated-message.css.js": "./src/illustrated-message.css.js",
-        "./src/illustratedmessage-overrides.css.js": "./src/illustratedmessage-overrides.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
diff --git a/packages/illustrated-message/src/illustrated-message.css b/packages/illustrated-message/src/illustrated-message.css
index a93ebc71220..75a3a321146 100644
--- a/packages/illustrated-message/src/illustrated-message.css
+++ b/packages/illustrated-message/src/illustrated-message.css
@@ -10,10 +10,85 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-illustratedmessage.css");
-@import url("./illustratedmessage-overrides.css");
+/* Base variables */
+:host {
+    --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
+    --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
+    --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400);
+    --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75);
+    --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color);
+    --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color);
+    --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+    --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style);
+    --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size);
+    --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height);
+    --spectrum-illustrated-message-title-color: var(--spectrum-heading-color);
+    --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight);
+    --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style);
+    --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size);
+    --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height);
+    --spectrum-illustrated-message-description-color: var(--spectrum-body-color);
 
-/* Ensure that SVGs with viewBox attributes size correctly. */
+    block-size: 100%;
+    display: var(--spectrum-illustrated-message-display, flex);
+    text-align: center;
+    pointer-events: var(--spectrum-illustrated-message-pointer-events, auto);
+    max-inline-size: var(--spectrum-illustrated-message-content-maximum-width);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+}
+
+:host(:lang(ja)),
+:host(:lang(ko)),
+:host(:lang(zh)) {
+}
+
+#illustration {
+    color: var(--highcontrast-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color));
+    fill: currentColor;
+    stroke: currentColor;
+    margin-block-end: var(--spectrum-illustrated-message-title-to-heading);
+}
+
+.spectrum-IllustratedMessage-accent {
+    color: var(--highcontrast-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color));
+    fill: currentColor;
+    stroke: currentColor;
+}
+
+#heading {
+    font-family: var(--spectrum-illustrated-message-title-font-family);
+    font-weight: var(--spectrum-illustrated-message-title-font-weight);
+    font-style: var(--spectrum-illustrated-message-title-font-style);
+    font-size: var(--spectrum-illustrated-message-title-font-size);
+    line-height: var(--spectrum-illustrated-message-title-line-height);
+    color: var(--spectrum-illustrated-message-title-color);
+    max-inline-size: var(--spectrum-illustrated-message-heading-max-inline-size);
+    margin-block-start: 0;
+    margin-block-end: 0;
+}
+
+#description {
+    position: relative;
+    z-index: 1;
+    pointer-events: var(--spectrum-illustrated-message-description-pointer-events, auto);
+    font-family: var(--spectrum-illustrated-message-description-font-family);
+    font-weight: var(--spectrum-illustrated-message-description-font-weight);
+    font-style: var(--spectrum-illustrated-message-description-font-style);
+    font-size: var(--spectrum-illustrated-message-description-font-size);
+    line-height: var(--spectrum-illustrated-message-description-line-height);
+    color: var(--spectrum-illustrated-message-description-color);
+    max-inline-size: var(--spectrum-illustrated-message-description-max-inline-size);
+    margin-block-start: var(--spectrum-illustrated-message-heading-to-description);
+    margin-block-end: 0;
+}
+
+/* ensure that SVGs with viewBox attributes size correctly. */
 ::slotted(svg[viewBox]) {
-    width: 100%;
+    inline-size: 100%;
 }
diff --git a/packages/illustrated-message/src/illustratedmessage-overrides.css b/packages/illustrated-message/src/illustratedmessage-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/illustrated-message/src/illustratedmessage-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/illustrated-message/src/spectrum-illustratedmessage.css b/packages/illustrated-message/src/spectrum-illustratedmessage.css
deleted file mode 100644
index c03ef4adf1e..00000000000
--- a/packages/illustrated-message/src/spectrum-illustratedmessage.css
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-illustrated-message-illustration-color: CanvasText;
-        --highcontrast-illustrated-message-illustration-accent-color: Highlight;
-    }
-}
-
-:host {
-    --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
-    --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
-    --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400);
-    --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75);
-    --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color);
-    --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color);
-    --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-    --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style);
-    --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size);
-    --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height);
-    --spectrum-illustrated-message-title-color: var(--spectrum-heading-color);
-    --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight);
-    --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style);
-    --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size);
-    --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height);
-    --spectrum-illustrated-message-description-color: var(--spectrum-body-color);
-    block-size: 100%;
-    display: flex;
-    display: var(--mod-illustrated-message-display, flex);
-    text-align: center;
-    pointer-events: auto;
-    pointer-events: var(--mod-illustrated-message-pointer-events, auto);
-    max-inline-size: var(--mod-illustrated-message-content-maximum-width);
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-:host:lang(ja),
-:host:lang(ko),
-:host:lang(zh) {
-    --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size);
-}
-
-#illustration {
-    color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color)));
-    fill: currentColor;
-    stroke: currentColor;
-    margin-block-end: var(--mod-illustrated-message-title-to-heading, var(--spectrum-illustrated-message-title-to-heading));
-}
-
-.spectrum-IllustratedMessage-accent {
-    color: var(--highcontrast-illustrated-message-illustration-accent-color, var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color)));
-    fill: currentColor;
-    stroke: currentColor;
-}
-
-#heading {
-    font-family: var(--mod-illustrated-message-title-font-family, var(--spectrum-illustrated-message-title-font-family));
-    font-weight: var(--mod-illustrated-message-title-font-weight, var(--spectrum-illustrated-message-title-font-weight));
-    font-style: var(--mod-illustrated-message-title-font-style, var(--spectrum-illustrated-message-title-font-style));
-    font-size: var(--mod-illustrated-message-title-font-size, var(--spectrum-illustrated-message-title-font-size));
-    line-height: var(--mod-illustrated-message-title-line-height, var(--spectrum-illustrated-message-title-line-height));
-    color: var(--mod-illustrated-message-title-color, var(--spectrum-illustrated-message-title-color));
-    max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size));
-    margin-block-start: 0;
-    margin-block-end: var(--mod-illustrated-message-heading-to-body, 0);
-}
-
-#description {
-    position: var(--mod-illustrated-message-description-position);
-    z-index: var(--mod-illustrated-message-description-z-index);
-    pointer-events: auto;
-    pointer-events: var(--mod-illustrated-message-description-pointer-events, auto);
-    font-family: var(--mod-illustrated-message-description-font-family, var(--spectrum-illustrated-message-description-font-family));
-    font-weight: var(--mod-illustrated-message-description-font-weight, var(--spectrum-illustrated-message-description-font-weight));
-    font-style: var(--mod-illustrated-message-description-font-style, var(--spectrum-illustrated-message-description-font-style));
-    font-size: var(--mod-illustrated-message-description-font-size, var(--spectrum-illustrated-message-description-font-size));
-    line-height: var(--mod-illustrated-message-description-line-height, var(--spectrum-illustrated-message-description-line-height));
-    color: var(--mod-illustrated-message-description-color, var(--spectrum-illustrated-message-description-color));
-    max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size));
-    margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description));
-    margin-block-end: 0;
-}
diff --git a/packages/infield-button/package.json b/packages/infield-button/package.json
index efd55b2564a..ea0f5254756 100644
--- a/packages/infield-button/package.json
+++ b/packages/infield-button/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/infield-button-overrides.css.js": "./src/infield-button-overrides.css.js",
         "./src/infield-button.css.js": "./src/infield-button.css.js",
         "./sp-infield-button.js": {
             "development": "./sp-infield-button.dev.js",
diff --git a/packages/infield-button/src/infield-button-overrides.css b/packages/infield-button/src/infield-button-overrides.css
deleted file mode 100644
index 195f9826dc1..00000000000
--- a/packages/infield-button/src/infield-button-overrides.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-infield-button-border-width: var(--system-infield-button-border-width);
-    --spectrum-infield-button-border-color: var(--system-infield-button-border-color);
-    --spectrum-infield-button-border-radius: var(--system-infield-button-border-radius);
-    --spectrum-infield-button-border-radius-reset: var(--system-infield-button-border-radius-reset);
-    --spectrum-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-stacked-top-border-radius-start-start);
-    --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-stacked-bottom-border-radius-end-start);
-    --spectrum-infield-button-background-color: var(--system-infield-button-background-color);
-    --spectrum-infield-button-background-color-hover: var(--system-infield-button-background-color-hover);
-    --spectrum-infield-button-background-color-down: var(--system-infield-button-background-color-down);
-    --spectrum-infield-button-background-color-key-focus: var(--system-infield-button-background-color-key-focus);
-}
-
-:host([disabled]) {
-    --spectrum-infield-button-border-color: var(--system-infield-button-disabled-border-color);
-}
diff --git a/packages/infield-button/src/infield-button.css b/packages/infield-button/src/infield-button.css
index 346c844079d..d9dd7cb8a7b 100644
--- a/packages/infield-button/src/infield-button.css
+++ b/packages/infield-button/src/infield-button.css
@@ -10,14 +10,238 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-infield-button.css");
-@import url("./infield-button-overrides.css");
 
 :host {
+    --spectrum-infield-button-border-width: var(--system-infield-button-border-width);
+    --spectrum-infield-button-border-color: var(--system-infield-button-border-color);
+    --spectrum-infield-button-border-radius: var(--system-infield-button-border-radius);
+    --spectrum-infield-button-border-radius-reset: var(--system-infield-button-border-radius-reset);
+    --spectrum-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-stacked-top-border-radius-start-start);
+    --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-stacked-bottom-border-radius-end-start);
+    --spectrum-infield-button-background-color: var(--system-infield-button-background-color);
+    --spectrum-infield-button-background-color-hover: var(--system-infield-button-background-color-hover);
+    --spectrum-infield-button-background-color-down: var(--system-infield-button-background-color-down);
+    --spectrum-infield-button-background-color-key-focus: var(--system-infield-button-background-color-key-focus);
+    --spectrum-infield-button-height: var(--spectrum-component-height-100);
+    --spectrum-infield-button-width: var(--spectrum-component-height-100);
+    --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
+    --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill);
+    --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill);
+    --spectrum-infield-button-fill-padding: 0px;
+    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium);
+    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
+    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium);
+    --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-infield-button-fill-justify-content: center;
+}
+
+:host([disabled]) {
+    --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-infield-button-border-color));
+    --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
+    --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
+    --mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
+    --mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color));
+}
+
+:host([size="s"]) {
+    --spectrum-infield-button-height: var(--spectrum-component-height-75);
+    --spectrum-infield-button-width: var(--spectrum-component-height-75);
+    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small);
+    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
+    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small);
+}
+
+:host([size="l"]) {
+    --spectrum-infield-button-height: var(--spectrum-component-height-200);
+    --spectrum-infield-button-width: var(--spectrum-component-height-200);
+    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large);
+    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
+    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large);
+}
+
+:host([size="xl"]) {
+    --spectrum-infield-button-height: var(--spectrum-component-height-300);
+    --spectrum-infield-button-width: var(--spectrum-component-height-300);
+    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large);
+    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
+    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large);
+}
+
+:host([block="end"]),
+:host([block="start"]) {
+    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium));
+}
+
+:host([block="end"][size="s"]),
+:host([block="start"][size="s"]) {
+    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small));
+}
+
+:host([block="end"][size="l"]),
+:host([block="start"][size="l"]) {
+    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large));
+}
+
+:host([block="end"][size="xl"]),
+:host([block="start"][size="xl"]) {
+    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large));
+}
+
+:host([quiet]) {
+    --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent);
+    --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent);
+    --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent);
+    --mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent);
+    --mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent);
+    --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0);
+}
+
+:host([quiet][disabled]) {
+    --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent);
+    --mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent);
+}
+
+@media (hover: hover) {
+    :host(: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));
+    }
+}
+
+:host(:is(:active, [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));
+}
+
+:host(: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) {
+    :host {
+        --highcontrast-infield-button-border-color: ButtonText;
+        --highcontrast-infield-button-border-color-active: Highlight;
+    }
+
+    :host([disabled]) {
+        --highcontrast-infield-button-border-color: inherit;
+    }
+
+    :host(:is(:active, [active])):not(:disabled),
+    :host:not(:disabled):focus-visible {
+        --highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active);
+    }
+
+    @media (hover: hover) {
+        :host:not(:disabled):hover {
+            --highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active);
+        }
+    }
+}
+
+:host {
+    background-color: initial;
+    cursor: pointer;
+    block-size: var(--mod-infield-button-height, var(--spectrum-infield-button-height));
+    inline-size: var(--mod-infield-button-width, var(--spectrum-infield-button-width));
+    padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill));
+    border-style: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
     box-sizing: border-box;
     user-select: none;
 }
 
+:host([disabled]) {
+    --spectrum-infield-button-border-color: var(--system-infield-button-disabled-border-color);
+
+    cursor: auto;
+}
+
+:host(:focus-visible) {
+    outline: none;
+}
+
+:host([block="end"]),
+:host([block="start"]) {
+    block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2);
+}
+
+:host([block="start"]) {
+    padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
+}
+
+:host([block="end"]) {
+    padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
+}
+
+.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)));
+    padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding));
+    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;
+    border-start-start-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-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));
+    display: flex;
+}
+
+:host([inline="end"]) .fill {
+    border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+    border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+}
+
+:host([inline="start"]) .fill {
+    border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+    border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+}
+
+:host([block="end"]) .fill,
+:host([block="start"]) .fill {
+    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)));
+}
+
+:host([block="start"]) .fill {
+    border-block-end: none;
+    border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start));
+    border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
+    border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
+    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)));
+}
+
+:host([block="end"]) .fill {
+    border-block-end-width: var(--mod-infield-button-stacked-bottom-border-block-end-width, var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
+    border-start-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
+    border-start-end-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-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)));
+    border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start));
+    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)));
+}
+
 ::slotted(*) {
     --spectrum-icon-size: inherit;
+
+    display: initial;
+    color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color));
+    flex-shrink: 0;
+    margin: 0 !important;
 }
diff --git a/packages/infield-button/src/spectrum-infield-button.css b/packages/infield-button/src/spectrum-infield-button.css
deleted file mode 100644
index a3570226fbf..00000000000
--- a/packages/infield-button/src/spectrum-infield-button.css
+++ /dev/null
@@ -1,230 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-infield-button-height: var(--spectrum-component-height-100);
-    --spectrum-infield-button-width: var(--spectrum-component-height-100);
-    --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
-    --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill);
-    --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill);
-    --spectrum-infield-button-fill-padding: 0px;
-    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium);
-    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
-    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium);
-    --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default);
-    --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down);
-    --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-infield-button-fill-justify-content: center;
-}
-
-:host([disabled]) {
-    --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-infield-button-border-color));
-    --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
-    --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
-    --mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
-    --mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color));
-}
-
-:host([size="s"]) {
-    --spectrum-infield-button-height: var(--spectrum-component-height-75);
-    --spectrum-infield-button-width: var(--spectrum-component-height-75);
-    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small);
-    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
-    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small);
-}
-
-:host([size="l"]) {
-    --spectrum-infield-button-height: var(--spectrum-component-height-200);
-    --spectrum-infield-button-width: var(--spectrum-component-height-200);
-    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large);
-    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
-    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large);
-}
-
-:host([size="xl"]) {
-    --spectrum-infield-button-height: var(--spectrum-component-height-300);
-    --spectrum-infield-button-width: var(--spectrum-component-height-300);
-    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large);
-    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
-    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large);
-}
-
-:host([block="end"]),
-:host([block="start"]) {
-    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium));
-}
-
-:host([block="end"][size="s"]),
-:host([block="start"][size="s"]) {
-    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small));
-}
-
-:host([block="end"][size="l"]),
-:host([block="start"][size="l"]) {
-    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large));
-}
-
-:host([block="end"][size="xl"]),
-:host([block="start"][size="xl"]) {
-    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large));
-}
-
-:host([quiet]) {
-    --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent);
-    --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent);
-    --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent);
-    --mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent);
-    --mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent);
-    --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0);
-}
-
-:host([quiet][disabled]) {
-    --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent);
-    --mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent);
-}
-
-@media (hover: hover) {
-    :host(: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));
-    }
-}
-
-:host(:is(:active, [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));
-}
-
-:host(: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) {
-    :host {
-        --highcontrast-infield-button-border-color: ButtonText;
-        --highcontrast-infield-button-border-color-active: Highlight;
-    }
-
-    :host([disabled]) {
-        --highcontrast-infield-button-border-color: inherit;
-    }
-
-    :host(:is(:active, [active])):not(:disabled),
-    :host:not(:disabled):focus-visible {
-        --highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active);
-    }
-
-    @media (hover: hover) {
-        :host:not(:disabled):hover {
-            --highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active);
-        }
-    }
-}
-
-:host {
-    background-color: initial;
-    cursor: pointer;
-    block-size: var(--mod-infield-button-height, var(--spectrum-infield-button-height));
-    inline-size: var(--mod-infield-button-width, var(--spectrum-infield-button-width));
-    padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill));
-    border-style: none;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-:host([disabled]) {
-    cursor: auto;
-}
-
-:host(:focus-visible) {
-    outline: none;
-}
-
-:host([block="end"]),
-:host([block="start"]) {
-    block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2);
-}
-
-:host([block="start"]) {
-    padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
-}
-
-:host([block="end"]) {
-    padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
-}
-
-.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)));
-    padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding));
-    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;
-    border-start-start-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-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));
-    display: flex;
-}
-
-:host([inline="end"]) .fill {
-    border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
-    border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
-}
-
-:host([inline="start"]) .fill {
-    border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
-    border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
-}
-
-:host([block="end"]) .fill,
-:host([block="start"]) .fill {
-    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)));
-}
-
-:host([block="start"]) .fill {
-    border-block-end: none;
-    border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start));
-    border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
-    border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
-    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)));
-}
-
-:host([block="end"]) .fill {
-    border-block-end-width: var(--mod-infield-button-stacked-bottom-border-block-end-width, var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
-    border-start-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
-    border-start-end-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-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)));
-    border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start));
-    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)));
-}
-
-::slotted(*) {
-    display: initial;
-    color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color));
-    flex-shrink: 0;
-    margin: 0 !important;
-}
diff --git a/packages/link/package.json b/packages/link/package.json
index 79644284e66..da3ad395f8b 100644
--- a/packages/link/package.json
+++ b/packages/link/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/link-overrides.css.js": "./src/link-overrides.css.js",
         "./src/link.css.js": "./src/link.css.js",
         "./sp-link.js": {
             "development": "./sp-link.dev.js",
diff --git a/packages/link/src/link-overrides.css b/packages/link/src/link-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/link/src/link-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/link/src/link.css b/packages/link/src/link.css
index b9b4435d559..1f0c1248b39 100644
--- a/packages/link/src/link.css
+++ b/packages/link/src/link.css
@@ -10,23 +10,62 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-link.css");
-@import url("./link-overrides.css");
-
+/* Base variables */
 :host {
     display: inline;
 }
 
+/* link Element Styles */
+a {
+    background-color: initial;
+    text-decoration-skip: objects;
+    transition: color var(--spectrum-animation-duration-100) ease-out;
+    cursor: pointer;
+    color: var(--spectrum-accent-content-color-default);
+    outline: none;
+    text-decoration: underline;
+}
+
+/* focus States */
 :host(:focus) {
     outline: none;
 }
 
 :host([href]) a:focus-visible {
-    /* .spectrum-Link.focus-ring */
+    --spectrum-link-text-color: var(--spectrum-accent-content-color-key-focus);
+
+    text-decoration: underline double;
+    text-decoration-color: inherit;
+}
+
+/* active State */
+a:active {
+}
+
+:host([quiet]) a:hover {
     text-decoration: underline;
-    text-decoration-style: double;
 }
 
+/* disabled State */
 :host([disabled]) {
     pointer-events: none;
 }
+
+/* variant: Secondary */
+:host([variant="secondary"]) a {
+    --spectrum-link-text-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-link-text-color-active: var(--spectrum-neutral-content-color-down);
+    --spectrum-link-text-color-focus: var(--spectrum-neutral-content-color-key-focus);
+}
+
+/* quiet Variant */
+:host([quiet]) a {
+    text-decoration: none;
+}
+
+/* static Colors */
+:host([static-color="white"]) a {
+}
+
+:host([static-color="black"]) a {
+}
diff --git a/packages/link/src/spectrum-link.css b/packages/link/src/spectrum-link.css
deleted file mode 100644
index 923fa0ed8db..00000000000
--- a/packages/link/src/spectrum-link.css
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-link-text-color: LinkText;
-    }
-}
-
-:host([variant="secondary"]) a {
-    --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));
-}
-
-a {
-    background-color: initial;
-    -webkit-text-decoration-skip: objects;
-    text-decoration-skip: objects;
-    transition: color var(--mod-link-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
-    cursor: pointer;
-    color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))));
-    outline: none;
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-}
-
-a:active {
-    --mod-link-text-color: var(--mod-link-text-color-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down)));
-}
-
-a:focus-visible {
-    --mod-link-text-color: var(--mod-link-text-color-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus)));
-    -webkit-text-decoration: underline double;
-    text-decoration: underline double;
-    text-decoration-color: inherit;
-}
-
-:host([quiet]) a {
-    -webkit-text-decoration: none;
-    text-decoration: none;
-}
-
-@media (hover: hover) {
-    a:hover {
-        --mod-link-text-color: var(--mod-link-text-color-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover)));
-    }
-
-    :host([quiet]) a:hover {
-        -webkit-text-decoration: underline;
-        text-decoration: underline;
-    }
-}
-
-:host([static-color="white"]) a {
-    --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));
-}
-
-:host([static-color="black"]) a {
-    --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/packages/menu/package.json b/packages/menu/package.json
index 3875054a3cb..9ebfb52b954 100644
--- a/packages/menu/package.json
+++ b/packages/menu/package.json
@@ -41,18 +41,13 @@
             "development": "./src/MenuItem.dev.js",
             "default": "./src/MenuItem.js"
         },
-        "./src/checkmark-overrides.css.js": "./src/checkmark-overrides.css.js",
-        "./src/chevron-overrides.css.js": "./src/chevron-overrides.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/menu-divider-overrides.css.js": "./src/menu-divider-overrides.css.js",
         "./src/menu-divider.css.js": "./src/menu-divider.css.js",
         "./src/menu-group.css.js": "./src/menu-group.css.js",
-        "./src/menu-item-overrides.css.js": "./src/menu-item-overrides.css.js",
         "./src/menu-item.css.js": "./src/menu-item.css.js",
-        "./src/menu-overrides.css.js": "./src/menu-overrides.css.js",
         "./src/menu.css.js": "./src/menu.css.js",
         "./sp-menu.js": {
             "development": "./sp-menu.dev.js",
diff --git a/packages/menu/src/checkmark-overrides.css b/packages/menu/src/checkmark-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/menu/src/checkmark-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/menu/src/chevron-overrides.css b/packages/menu/src/chevron-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/menu/src/chevron-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/menu/src/menu-divider-overrides.css b/packages/menu/src/menu-divider-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/menu/src/menu-divider-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/menu/src/menu-divider.css b/packages/menu/src/menu-divider.css
index c0ab861847b..8ca8cab66f7 100644
--- a/packages/menu/src/menu-divider.css
+++ b/packages/menu/src/menu-divider.css
@@ -10,8 +10,52 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-menu-divider.css");
-@import url("./menu-divider-overrides.css");
+/* Base variables */
+:host {
+    --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium);
+
+    inline-size: auto;
+    margin-block: var(--spectrum-menu-section-divider-margin-block, max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness)) / 2));
+    margin-inline: var(--spectrum-menu-item-label-inline-edge-to-content);
+    overflow: visible;
+}
+
+.spectrum-Menu-back:focus-visible {
+    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
+    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
+    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
+    border-radius: var(--spectrum-menu-item-corner-radius);
+}
+
+.spectrum-Menu-back {
+    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
+    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
+    flex-flow: wrap;
+    align-items: center;
+    display: flex;
+}
+
+.spectrum-Menu-backButton {
+    cursor: pointer;
+    background: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+}
+
+.spectrum-Menu-backButton:focus-visible {
+    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
+    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
+}
+
+.spectrum-Menu-backHeading {
+    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
+    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));
+    display: block;
+}
 
 :host {
     display: block;
diff --git a/packages/menu/src/menu-group.css b/packages/menu/src/menu-group.css
index fba9b26d121..a058b3342e3 100644
--- a/packages/menu/src/menu-group.css
+++ b/packages/menu/src/menu-group.css
@@ -10,8 +10,61 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-menu-sectionHeading.css");
+.spectrum-Menu-back:focus-visible {
+    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
+    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
+    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
+    border-radius: var(--spectrum-menu-item-corner-radius);
+}
+
+.header {
+    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
+    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));
+    grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1;
+    display: block;
+}
+
+.spectrum-Menu-back {
+    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
+    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
+    flex-flow: wrap;
+    align-items: center;
+    display: flex;
+}
+
+.spectrum-Menu-back .header {
+    padding: 0;
+}
+
+.spectrum-Menu-backButton {
+    cursor: pointer;
+    background: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+}
+
+.spectrum-Menu-backButton:focus-visible {
+    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
+    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
+}
+
+.spectrum-Menu-backHeading {
+    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
+    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));
+    display: block;
+}
 
+/* Base variables */
 :host {
     margin: 0;
     display: flex;
diff --git a/packages/menu/src/menu-item-overrides.css b/packages/menu/src/menu-item-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/menu/src/menu-item-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/menu/src/menu-item.css b/packages/menu/src/menu-item.css
index d6c82a5b689..a82137e6ef6 100644
--- a/packages/menu/src/menu-item.css
+++ b/packages/menu/src/menu-item.css
@@ -10,10 +10,397 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-checkmark.css");
-@import url("./spectrum-chevron.css");
-@import url("./spectrum-menu-item.css");
-@import url("./menu-item-overrides.css");
+.checkmark {
+    display: var(--mod-menu-checkmark-display, var(--spectrum-menu-checkmark-display));
+    block-size: var(--mod-menu-item-checkmark-height, var(--spectrum-menu-item-checkmark-height));
+    inline-size: var(--mod-menu-item-checkmark-width, var(--spectrum-menu-item-checkmark-width));
+    fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default)));
+    color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default)));
+    opacity: 1;
+    grid-area: checkmarkArea;
+    align-self: start;
+    margin-block-start: calc(var(--mod-menu-item-top-to-checkmark, var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
+    margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
+}
+
+.spectrum-Menu-back:focus-visible {
+    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
+    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
+    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
+    border-radius: var(--spectrum-menu-item-corner-radius);
+}
+
+.spectrum-Menu-back {
+    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
+    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
+    flex-flow: wrap;
+    align-items: center;
+    display: flex;
+}
+
+.spectrum-Menu-backButton {
+    cursor: pointer;
+    background: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+}
+
+.spectrum-Menu-backButton:focus-visible {
+    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
+    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
+}
+
+.spectrum-Menu-backHeading {
+    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
+    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));
+    display: block;
+}
+
+.chevron {
+    block-size: var(--spectrum-menu-item-checkmark-height);
+    inline-size: var(--spectrum-menu-item-checkmark-width);
+    grid-area: chevronArea;
+    align-self: center;
+    margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
+}
+
+::slotted([slot="icon"]) {
+    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)));
+    grid-area: iconArea;
+    align-self: start;
+
+    margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual));
+}
+
+/* Base variables */
+:host {
+    cursor: pointer;
+    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)));
+    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));
+    margin: calc((var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-spacing-multiplier));
+    grid-template:
+        ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . ." 1fr
+        "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"
+        ". . . . descriptionArea . . ."
+        ". . . . submenuArea . . ."
+        / auto auto auto auto 1fr auto auto auto;
+    align-items: center;
+    text-decoration: none;
+    display: grid;
+    position: relative;
+}
+
+.spectrum-Menu-itemCheckbox {
+    --mod-checkbox-top-to-text: 0;
+    --mod-checkbox-text-to-control: 0;
+    min-block-size: 0;
+}
+
+.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box {
+    margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox));
+    margin-block-end: 0;
+    margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
+}
+
+.spectrum-Menu-itemSwitch {
+    min-block-size: 0;
+}
+
+.spectrum-Menu-itemSwitch .spectrum-Switch-switch {
+    margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action));
+    margin-block-end: 0;
+}
+
+#label {
+    --mod-switch-control-label-spacing: 0;
+    --mod-switch-spacing-top-to-label: 0;
+    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;
+    grid-area: labelArea;
+}
+
+::slotted([slot="value"]) {
+    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));
+    grid-area: valueArea;
+    justify-self: end;
+}
+
+:host([focused]),
+:host(:focus) {
+    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;
+}
+
+:host([focused]) > #label,
+:host(:focus) > #label {
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus)));
+}
+
+:host([focused]) > [name="description"]::slotted(*),
+:host(:focus) > [name="description"]::slotted(*) {
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus)));
+}
+
+:host([focused]) > ::slotted([slot="value"]),
+:host(:focus) > ::slotted([slot="value"]) {
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
+}
+
+:host([focused]) > .icon:not(.chevron, .checkmark),
+:host(:focus) > .icon:not(.chevron, .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)));
+}
+
+:host([focused]) > .chevron,
+:host(:focus) > .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)));
+}
+
+:host([focused]) > .checkmark,
+:host(:focus) > .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)));
+}
+
+:host(:is(:active, [active])) {
+    background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down)));
+}
+
+:host(:is(:active, [active])) > #label {
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
+}
+
+:host(:is(:active, [active])) > [name="description"]::slotted(*) {
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down)));
+}
+
+:host(:is(:active, [active])) > ::slotted([slot="value"]) {
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
+}
+
+:host(:is(:active, [active])) > .icon:not(.chevron, .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)));
+}
+
+:host(:is(:active, [active])) > .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)));
+}
+
+:host(:is(:active, [active])) > .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)));
+}
+
+:host([disabled]),
+:host([aria-disabled="true"]) {
+    background-color: initial;
+}
+
+:host([disabled]) #label,
+:host([disabled]) ::slotted([slot="value"]),
+:host([aria-disabled="true"]) #label,
+:host([aria-disabled="true"]) ::slotted([slot="value"]) {
+    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
+}
+
+:host([disabled]) [name="description"]::slotted(*),
+:host([aria-disabled="true"]) [name="description"]::slotted(*) {
+    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
+}
+
+:host([disabled]) ::slotted([slot="icon"]),
+:host([aria-disabled="true"]) ::slotted([slot="icon"]) {
+    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)));
+}
+
+:host([focused]) .spectrum-Menu-back,
+:host([focused]) {
+    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
+    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
+    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
+    border-radius: var(--spectrum-menu-item-corner-radius);
+}
+
+.spectrum-Menu-itemSelection {
+    grid-area: selectedArea;
+}
+
+.spectrum-Menu-itemActions,
+::slotted([slot="value"]) {
+    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 {
+    grid-area: actionsArea;
+}
+
+[name="description"]::slotted(*) {
+    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;
+    overflow-wrap: break-word;
+    line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height));
+    grid-area: descriptionArea;
+    margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description-spacing));
+}
+
+:host([no-wrap]) #label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    display: block;
+}
+
+.spectrum-Menu-item--collapsible.is-open {
+    padding-block-end: 0;
+}
+
+.spectrum-Menu-item--collapsible.is-open .chevron {
+    transform: rotate(90deg);
+}
+
+:host([focused]) .spectrum-Menu-item--collapsible.is-open,
+:host(:is(:active, [active])) .spectrum-Menu-item--collapsible.is-open,
+.spectrum-Menu-item--collapsible.is-open:focus {
+    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-item--collapsible ::slotted([slot="icon"]) {
+    grid-area: headingIconArea;
+}
+
+.spectrum-Menu-item--collapsible > ::slotted([slot="icon"]) {
+    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)));
+}
+
+.spectrum-Menu-item--collapsible .chevron {
+    grid-area: chevronAreaCollapsible;
+}
+
+:host([has-submenu]) .chevron {
+    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)));
+    grid-area: chevronAreaDrillIn;
+    margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
+    margin-inline-end: 0;
+}
+
+:host([has-submenu]) .is-open {
+    --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
+}
+
+:host([has-submenu]) .is-open .icon:not(.chevron, .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)));
+}
+
+:host([has-submenu]) .is-open .chevron {
+    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
+}
+
+:host([has-submenu]) .is-open .checkmark {
+    fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
+    color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
+}
+
+:host(:hover) > #label {
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover)));
+}
+
+:host(:hover) > [name="description"]::slotted(*) {
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover)));
+}
+
+:host(:hover) > ::slotted([slot="value"]) {
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
+}
+
+:host(:hover) > .icon:not(.chevron, .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)));
+}
+
+:host(:hover) > .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)));
+}
+
+:host(:hover) > .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)));
+}
+
+:host([disabled]:hover),
+:host([aria-disabled="true"]:hover) {
+    cursor: default;
+    background-color: initial;
+}
+
+:host([disabled]:hover) #label,
+:host([disabled]:hover) ::slotted([slot="value"]),
+:host([aria-disabled="true"]:hover) #label,
+:host([aria-disabled="true"]:hover) ::slotted([slot="value"]) {
+    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
+}
+
+:host([disabled]:hover) [name="description"]::slotted(*),
+:host([aria-disabled="true"]:hover) [name="description"]::slotted(*) {
+    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
+}
+
+:host([disabled]:hover) ::slotted([slot="icon"]),
+:host([aria-disabled="true"]:hover) ::slotted([slot="icon"]) {
+    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.is-open:hover {
+    background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
+}
+
+:host([has-submenu]:hover) .chevron {
+    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
+}
+
+:host([has-submenu][focused]) .chevron,
+:host([has-submenu]:focus) .chevron {
+    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
+}
+
+:host([has-submenu]:is(:active, [active])) .chevron {
+    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
+    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
+}
+
+:host([focused]) .spectrum-Menu-backButton {
+    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
+    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
+}
 
 :host {
     text-align: initial;
@@ -41,34 +428,20 @@
 }
 
 :host([dir="ltr"]) [icon-only]::slotted(:last-of-type) {
-    margin-right: auto;
+    margin-inline-end: auto;
 }
 
 :host([dir="rtl"]) [icon-only]::slotted(:last-of-type) {
-    margin-left: auto;
-}
-
-/* N: Manually adding this selector because I can't use this selector in
-** spectrum-menu.css without touching all the other `.spectrum-Menu-item`s in
-** that file which I don't want to surface
-*/
-@media (forced-colors: active) {
-    :host {
-        forced-color-adjust: none;
-    }
+    margin-inline-start: auto;
 }
 
 ::slotted([slot="submenu"]) {
-    width: max-content;
-    max-width: 100%;
+    inline-size: max-content;
+    max-inline-size: 100%;
     overflow-y: auto;
 }
 
-:host([no-wrap]) #label {
-    display: block;
-}
-
-/** Host is :focus bt not :focus-visible so we remove the outline */
+/* * Host is :focus bt not :focus-visible so we remove the outline */
 :host([focused]:not(:focus-visible)) {
     outline: none;
     box-shadow: none;
diff --git a/packages/menu/src/menu-overrides.css b/packages/menu/src/menu-overrides.css
deleted file mode 100644
index 5e107c13229..00000000000
--- a/packages/menu/src/menu-overrides.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-menu-item-background-color-hover: var(--system-menu-item-background-color-hover);
-    --spectrum-menu-item-background-color-down: var(--system-menu-item-background-color-down);
-    --spectrum-menu-item-background-color-key-focus: var(--system-menu-item-background-color-key-focus);
-    --spectrum-menu-item-corner-radius: var(--system-menu-item-corner-radius);
-    --spectrum-menu-item-focus-indicator-shadow: var(--system-menu-item-focus-indicator-shadow);
-    --spectrum-menu-item-focus-indicator-offset: var(--system-menu-item-focus-indicator-offset);
-    --spectrum-menu-item-spacing-multiplier: var(--system-menu-item-spacing-multiplier);
-    --spectrum-menu-item-focus-indicator-outline-style: var(--system-menu-item-focus-indicator-outline-style);
-}
diff --git a/packages/menu/src/menu-sectionHeading-overrides.css b/packages/menu/src/menu-sectionHeading-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/menu/src/menu-sectionHeading-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/menu/src/menu.css b/packages/menu/src/menu.css
index e582664b6d5..ed4c4009da4 100644
--- a/packages/menu/src/menu.css
+++ b/packages/menu/src/menu.css
@@ -10,25 +10,212 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./menu-overrides.css");
-@import url("./spectrum-menu.css");
-
+/* Base variables */
 :host {
+    /* system Variables */
+    --spectrum-menu-item-background-color-hover: rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+    --spectrum-menu-item-background-color-down: rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+    --spectrum-menu-item-background-color-key-focus: rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+    --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-menu-item-focus-indicator-shadow: none;
+    --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50);
+    --spectrum-menu-item-spacing-multiplier: 1;
+    --spectrum-menu-item-focus-indicator-outline-style: solid;
+
+    /* menu Item Spacing */
+    --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
+    --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
+    --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description);
+    --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100);
+
+    /* focus Indicator */
+    --spectrum-menu-item-focus-indicator-width: var(--spectrum-border-width-200);
+    --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800);
+
+    /* colors */
+    --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color);
+
+    /* icon Colors */
+    --spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color);
+
+    /* description Colors */
+    --spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default);
+    --spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+    --spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down);
+    --spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+    --spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color);
+
+    /* section Header */
+    --spectrum-menu-section-header-color: var(--spectrum-gray-900);
+    --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900);
+
+    /* checkmark Colors */
+    --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900);
+    --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000);
+    --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100);
+    --spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000);
+
+    /* drill-in Colors */
+    --spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+    --spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+    --spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
+    --spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+    /* value Colors */
+    --spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default);
+    --spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+    --spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down);
+    --spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+    /* display Properties */
+    --spectrum-menu-checkmark-display-hidden: none;
+    --spectrum-menu-checkmark-display-shown: block;
+    --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
+
+    /* base Sizing */
+    --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-description-font-size: var(--spectrum-font-size-75);
+    --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100);
+    --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100);
+
+    /* line Heights */
+    --spectrum-menu-item-label-line-height: var(--spectrum-menu-item-label-line-height-cjk);
+    --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
+    --spectrum-menu-item-description-line-height: var(--spectrum-menu-item-description-line-height-cjk);
+    --spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100);
+    --spectrum-menu-section-header-line-height: var(--spectrum-menu-section-header-line-height-cjk);
+    --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+    /* spacing */
+    --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-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-100);
+
+    /* font Weight */
+    --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight);
+
+    /* checkmark and Back Icon */
+    --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-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-medium);
+
+    /* focus Indicator */
+    --spectrum-menu-item-focus-indicator-color-default: var(--highcontrast-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color));
+    --spectrum-menu-item-focus-indicator-border-width: calc(var(--spectrum-menu-item-focus-indicator-width) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1));
+
+    /* layout */
     flex-direction: column;
+    inline-size: var(--swc-menu-width);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: inline-block;
+    overflow: auto;
+}
+
+/* size Variants */
+:host([size="s"]) {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
+
+/* rTL Support */
+:host(:dir(rtl)),
+:host([dir="rtl"]) {
+    --spectrum-menu-item-focus-indicator-direction-scalar: -1;
+}
+
+/* language-specific Line Heights */
+:host(:lang(ja)),
+:host(:lang(ko)),
+:host(:lang(zh)) {
+}
+
+/* selection States */
+:host([selects]) ::slotted(sp-menu-item) {
+    padding-inline-start: var(--spectrum-menu-item-selectable-edge-to-text-not-selected);
+}
+
+:host([selects]) ::slotted(sp-menu-item[selected]) {
+    padding-inline-start: var(--spectrum-menu-item-label-inline-edge-to-content);
+}
+
+/* back Navigation */
+.spectrum-Menu-backIcon {
+    margin-block: var(--spectrum-menu-back-icon-margin);
+    margin-inline: var(--spectrum-menu-back-icon-margin);
+    fill: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-section-header-color));
+    color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-section-header-color));
+}
+
+.spectrum-Menu-back:focus-visible {
+    outline: none;
+}
+
+.spectrum-Menu-sectionHeading {
+    font-weight: var(--spectrum-menu-section-header-font-weight);
+    line-height: var(--spectrum-menu-section-header-line-height);
+    font-size: var(--spectrum-menu-section-header-font-size);
+    color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-section-header-color));
+}
+
+.spectrum-Menu-back {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--spectrum-menu-section-header-min-width);
+    text-decoration: none;
+}
+
+.spectrum-Menu-back .spectrum-Menu-sectionHeading {
+    margin-block: 0;
+}
+
+.spectrum-Menu-backButton {
+    appearance: none;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.spectrum-Menu-backButton:focus-visible {
+    outline: none;
+}
 
-    /**
-     * Allow menu elements to be foreced to width 100% when placed inside of a Tray
-     **/
-    width: var(--swc-menu-width);
+.spectrum-Menu-backHeading {
+    display: flex;
+    align-items: center;
 }
 
+/* focus State */
 :host(:focus) {
     outline: none;
 }
 
+/* slot Styles */
 ::slotted(*) {
-    /**
-     * Remove when Spectrum CSS supports this correctly
-     */
     flex-shrink: 0;
 }
diff --git a/packages/menu/src/spectrum-checkmark.css b/packages/menu/src/spectrum-checkmark.css
deleted file mode 100644
index 0302d8ed77f..00000000000
--- a/packages/menu/src/spectrum-checkmark.css
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-.checkmark {
-    display: var(--mod-menu-checkmark-display, var(--spectrum-menu-checkmark-display));
-    block-size: var(--mod-menu-item-checkmark-height, var(--spectrum-menu-item-checkmark-height));
-    inline-size: var(--mod-menu-item-checkmark-width, var(--spectrum-menu-item-checkmark-width));
-    fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default)));
-    color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default)));
-    opacity: 1;
-    grid-area: checkmarkArea;
-    align-self: start;
-    margin-block-start: calc(var(--mod-menu-item-top-to-checkmark, var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
-    margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
-}
-
-.spectrum-Menu-back:focus-visible {
-    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
-    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
-    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
-    border-radius: var(--spectrum-menu-item-corner-radius);
-}
-
-.spectrum-Menu-back {
-    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
-    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
-    flex-flow: wrap;
-    align-items: center;
-    display: flex;
-}
-
-.spectrum-Menu-backButton {
-    cursor: pointer;
-    background: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-}
-
-.spectrum-Menu-backButton:focus-visible {
-    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
-    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
-}
-
-.spectrum-Menu-backHeading {
-    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
-    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));
-    display: block;
-}
diff --git a/packages/menu/src/spectrum-chevron.css b/packages/menu/src/spectrum-chevron.css
deleted file mode 100644
index 0fd7b436df6..00000000000
--- a/packages/menu/src/spectrum-chevron.css
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-.chevron {
-    block-size: var(--spectrum-menu-item-checkmark-height);
-    inline-size: var(--spectrum-menu-item-checkmark-width);
-    grid-area: chevronArea;
-    align-self: center;
-    margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
-}
-
-.spectrum-Menu-back:focus-visible {
-    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
-    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
-    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
-    border-radius: var(--spectrum-menu-item-corner-radius);
-}
-
-.spectrum-Menu-back {
-    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
-    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
-    flex-flow: wrap;
-    align-items: center;
-    display: flex;
-}
-
-.spectrum-Menu-backButton {
-    cursor: pointer;
-    background: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-}
-
-.spectrum-Menu-backButton:focus-visible {
-    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
-    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
-}
-
-.spectrum-Menu-backHeading {
-    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
-    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));
-    display: block;
-}
diff --git a/packages/menu/src/spectrum-menu-divider.css b/packages/menu/src/spectrum-menu-divider.css
deleted file mode 100644
index b22773195d2..00000000000
--- a/packages/menu/src/spectrum-menu-divider.css
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium);
-    inline-size: auto;
-    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));
-    overflow: visible;
-}
-
-.spectrum-Menu-back:focus-visible {
-    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
-    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
-    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
-    border-radius: var(--spectrum-menu-item-corner-radius);
-}
-
-.spectrum-Menu-back {
-    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
-    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
-    flex-flow: wrap;
-    align-items: center;
-    display: flex;
-}
-
-.spectrum-Menu-backButton {
-    cursor: pointer;
-    background: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-}
-
-.spectrum-Menu-backButton:focus-visible {
-    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
-    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
-}
-
-.spectrum-Menu-backHeading {
-    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
-    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));
-    display: block;
-}
diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css
deleted file mode 100644
index 8a07e4c96c1..00000000000
--- a/packages/menu/src/spectrum-menu-item.css
+++ /dev/null
@@ -1,384 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-::slotted([slot="icon"]) {
-    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)));
-    grid-area: iconArea;
-    align-self: start;
-}
-
-::slotted([slot="icon"]) {
-    margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual));
-}
-
-:host {
-    cursor: pointer;
-    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)));
-    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));
-    margin: calc((var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-spacing-multiplier));
-    grid-template:
-        ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . ." 1fr
-        "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"
-        ". . . . descriptionArea . . ."
-        ". . . . submenuArea . . ."
-        / auto auto auto auto 1fr auto auto auto;
-    align-items: center;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    display: grid;
-    position: relative;
-}
-
-.spectrum-Menu-itemCheckbox {
-    --mod-checkbox-top-to-text: 0;
-    --mod-checkbox-text-to-control: 0;
-    min-block-size: 0;
-}
-
-.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box {
-    margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox));
-    margin-block-end: 0;
-    margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
-}
-
-.spectrum-Menu-itemSwitch {
-    min-block-size: 0;
-}
-
-.spectrum-Menu-itemSwitch .spectrum-Switch-switch {
-    margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action));
-    margin-block-end: 0;
-}
-
-#label {
-    grid-area: submenuItemLabelArea;
-}
-
-::slotted([slot="value"]) {
-    grid-area: submenuItemValueArea;
-}
-
-:host([focused]),
-:host(:focus) {
-    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;
-}
-
-:host([focused]) > #label,
-:host(:focus) > #label {
-    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus)));
-}
-
-:host([focused]) > [name="description"]::slotted(*),
-:host(:focus) > [name="description"]::slotted(*) {
-    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus)));
-}
-
-:host([focused]) > ::slotted([slot="value"]),
-:host(:focus) > ::slotted([slot="value"]) {
-    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
-}
-
-:host([focused]) > .icon:not(.chevron, .checkmark),
-:host(:focus) > .icon:not(.chevron, .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)));
-}
-
-:host([focused]) > .chevron,
-:host(:focus) > .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)));
-}
-
-:host([focused]) > .checkmark,
-:host(:focus) > .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)));
-}
-
-:host(:is(:active, [active])) {
-    background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down)));
-}
-
-:host(:is(:active, [active])) > #label {
-    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
-}
-
-:host(:is(:active, [active])) > [name="description"]::slotted(*) {
-    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down)));
-}
-
-:host(:is(:active, [active])) > ::slotted([slot="value"]) {
-    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
-}
-
-:host(:is(:active, [active])) > .icon:not(.chevron, .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)));
-}
-
-:host(:is(:active, [active])) > .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)));
-}
-
-:host(:is(:active, [active])) > .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)));
-}
-
-:host([disabled]),
-:host([aria-disabled="true"]) {
-    background-color: initial;
-}
-
-:host([disabled]) #label,
-:host([disabled]) ::slotted([slot="value"]),
-:host([aria-disabled="true"]) #label,
-:host([aria-disabled="true"]) ::slotted([slot="value"]) {
-    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
-}
-
-:host([disabled]) [name="description"]::slotted(*),
-:host([aria-disabled="true"]) [name="description"]::slotted(*) {
-    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
-}
-
-:host([disabled]) ::slotted([slot="icon"]),
-:host([aria-disabled="true"]) ::slotted([slot="icon"]) {
-    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)));
-}
-
-:host([focused]) .spectrum-Menu-back,
-:host([focused]) {
-    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
-    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
-    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
-    border-radius: var(--spectrum-menu-item-corner-radius);
-}
-
-.spectrum-Menu-itemSelection {
-    grid-area: selectedArea;
-}
-
-#label {
-    --mod-switch-control-label-spacing: 0;
-    --mod-switch-spacing-top-to-label: 0;
-    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;
-    grid-area: labelArea;
-}
-
-::slotted([slot="value"]) {
-    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));
-    grid-area: valueArea;
-    justify-self: end;
-}
-
-.spectrum-Menu-itemActions,
-::slotted([slot="value"]) {
-    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 {
-    grid-area: actionsArea;
-}
-
-[name="description"]::slotted(*) {
-    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;
-    overflow-wrap: break-word;
-    line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height));
-    grid-area: descriptionArea;
-    margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description-spacing));
-}
-
-:host([no-wrap]) #label {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.spectrum-Menu-item--collapsible.is-open {
-    padding-block-end: 0;
-}
-
-.spectrum-Menu-item--collapsible.is-open .chevron {
-    transform: rotate(90deg);
-}
-
-:host([focused]) .spectrum-Menu-item--collapsible.is-open,
-:host(:is(:active, [active])) .spectrum-Menu-item--collapsible.is-open,
-.spectrum-Menu-item--collapsible.is-open:focus {
-    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-item--collapsible ::slotted([slot="icon"]) {
-    grid-area: headingIconArea;
-}
-
-.spectrum-Menu-item--collapsible > ::slotted([slot="icon"]) {
-    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)));
-}
-
-.spectrum-Menu-item--collapsible .chevron {
-    grid-area: chevronAreaCollapsible;
-}
-
-:host([has-submenu]) .chevron {
-    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)));
-    grid-area: chevronAreaDrillIn;
-    margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
-    margin-inline-end: 0;
-}
-
-:host([has-submenu]) .is-open {
-    --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
-}
-
-:host([has-submenu]) .is-open .icon:not(.chevron, .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)));
-}
-
-:host([has-submenu]) .is-open .chevron {
-    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
-    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
-}
-
-:host([has-submenu]) .is-open .checkmark {
-    fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
-    color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
-}
-
-@media (hover: hover) {
-    :host(:hover) {
-        background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
-    }
-
-    :host(:hover) > #label {
-        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover)));
-    }
-
-    :host(:hover) > [name="description"]::slotted(*) {
-        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover)));
-    }
-
-    :host(:hover) > ::slotted([slot="value"]) {
-        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
-    }
-
-    :host(:hover) > .icon:not(.chevron, .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)));
-    }
-
-    :host(:hover) > .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)));
-    }
-
-    :host(:hover) > .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)));
-    }
-
-    :host([disabled]:hover),
-    :host([aria-disabled="true"]:hover) {
-        cursor: default;
-        background-color: initial;
-    }
-
-    :host([disabled]:hover) #label,
-    :host([disabled]:hover) ::slotted([slot="value"]),
-    :host([aria-disabled="true"]:hover) #label,
-    :host([aria-disabled="true"]:hover) ::slotted([slot="value"]) {
-        color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
-    }
-
-    :host([disabled]:hover) [name="description"]::slotted(*),
-    :host([aria-disabled="true"]:hover) [name="description"]::slotted(*) {
-        color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
-    }
-
-    :host([disabled]:hover) ::slotted([slot="icon"]),
-    :host([aria-disabled="true"]:hover) ::slotted([slot="icon"]) {
-        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.is-open:hover {
-        background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
-    }
-
-    :host([has-submenu]:hover) .chevron {
-        fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
-        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
-    }
-}
-
-:host([has-submenu][focused]) .chevron,
-:host([has-submenu]:focus) .chevron {
-    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
-    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
-}
-
-:host([has-submenu]:is(:active, [active])) .chevron {
-    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
-    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
-}
-
-.spectrum-Menu-back {
-    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
-    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
-    flex-flow: wrap;
-    align-items: center;
-    display: flex;
-}
-
-.spectrum-Menu-backButton {
-    cursor: pointer;
-    background: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-}
-
-:host([focused]) .spectrum-Menu-backButton {
-    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
-    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
-}
-
-.spectrum-Menu-backHeading {
-    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
-    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));
-    display: block;
-}
diff --git a/packages/menu/src/spectrum-menu-sectionHeading.css b/packages/menu/src/spectrum-menu-sectionHeading.css
deleted file mode 100644
index 119def21c19..00000000000
--- a/packages/menu/src/spectrum-menu-sectionHeading.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright 2025 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-Menu-back:focus-visible {
-    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
-    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
-    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
-    border-radius: var(--spectrum-menu-item-corner-radius);
-}
-
-.header {
-    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
-    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));
-    grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1;
-    display: block;
-}
-
-.spectrum-Menu-back {
-    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
-    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
-    flex-flow: wrap;
-    align-items: center;
-    display: flex;
-}
-
-.spectrum-Menu-back .header {
-    padding: 0;
-}
-
-.spectrum-Menu-backButton {
-    cursor: pointer;
-    background: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-}
-
-.spectrum-Menu-backButton:focus-visible {
-    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
-    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
-}
-
-.spectrum-Menu-backHeading {
-    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
-    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));
-    display: block;
-}
diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css
deleted file mode 100644
index 66df013a67e..00000000000
--- a/packages/menu/src/spectrum-menu.css
+++ /dev/null
@@ -1,254 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --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;
-        --highcontrast-menu-item-selected-background-color: Highlight;
-        --highcontrast-menu-item-selected-color: HighlightText;
-    }
-
-    @supports (color: SelectedItem) {
-        :host {
-            --highcontrast-menu-item-selected-background-color: SelectedItem;
-            --highcontrast-menu-item-selected-color: SelectedItemText;
-        }
-    }
-}
-
-:host {
-    --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
-    --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
-    --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100);
-    --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description);
-    --spectrum-menu-item-focus-indicator-width: var(--mod-menu-item-focus-indicator-width, var(--spectrum-border-width-200));
-    --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800);
-    --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100);
-    --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down);
-    --spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down);
-    --spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-menu-item-description-line-height: var(--spectrum-line-height-100);
-    --spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default);
-    --spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
-    --spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down);
-    --spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100);
-    --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight);
-    --spectrum-menu-section-header-color: var(--spectrum-gray-900);
-    --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900);
-    --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900);
-    --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000);
-    --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100);
-    --spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000);
-    --spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
-    --spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
-    --spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
-    --spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default);
-    --spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
-    --spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down);
-    --spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --spectrum-menu-checkmark-display-hidden: none;
-    --spectrum-menu-checkmark-display-shown: block;
-    --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
-    --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-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-100);
-    --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75);
-    --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-medium);
-    --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-medium);
-    --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-item-focus-indicator-color-default: var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
-    --spectrum-menu-item-focus-indicator-border-width: calc(var(--spectrum-menu-item-focus-indicator-width) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1));
-}
-
-:host([size="s"]) {
-    --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-text-to-control: var(--spectrum-text-to-control-75);
-    --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-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-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small);
-}
-
-:host([size="l"]) {
-    --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-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-200);
-    --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100);
-    --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-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-large);
-}
-
-:host([size="xl"]) {
-    --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-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-text-to-control: var(--spectrum-text-to-control-300);
-    --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200);
-    --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300);
-    --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300);
-    --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-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-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
-}
-
-:host:dir(rtl),
-:host([dir="rtl"]) {
-    --spectrum-menu-item-focus-indicator-direction-scalar: -1;
-}
-
-:host {
-    inline-size: var(--mod-menu-inline-size, auto);
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    display: inline-block;
-    overflow: auto;
-}
-
-:host:lang(ja),
-:host:lang(ko),
-:host:lang(zh) {
-    --spectrum-menu-item-label-line-height: var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk));
-    --spectrum-menu-item-description-line-height: var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk));
-    --spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk));
-}
-
-:host([selects]) ::slotted(sp-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));
-}
-
-:host([selects]) ::slotted(sp-menu-item[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-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-back:focus-visible {
-    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
-    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
-    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
-    border-radius: var(--spectrum-menu-item-corner-radius);
-}
-
-.spectrum-Menu-sectionHeading {
-    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
-    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));
-    grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1;
-    display: block;
-}
-
-.spectrum-Menu-back {
-    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
-    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
-    flex-flow: wrap;
-    align-items: center;
-    display: flex;
-}
-
-.spectrum-Menu-back .spectrum-Menu-sectionHeading {
-    padding: 0;
-}
-
-.spectrum-Menu-backButton {
-    cursor: pointer;
-    background: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-}
-
-.spectrum-Menu-backButton:focus-visible {
-    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
-    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
-}
-
-.spectrum-Menu-backHeading {
-    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
-    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));
-    display: block;
-}
diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts
index bebe33f6148..e90da93c8fa 100644
--- a/packages/menu/stories/menu.stories.ts
+++ b/packages/menu/stories/menu.stories.ts
@@ -27,7 +27,7 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.j
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-circle.js';
 
 export default {
     component: 'sp-menu',
diff --git a/packages/menu/stories/submenu.stories.ts b/packages/menu/stories/submenu.stories.ts
index e986bd0778b..135a2a451ab 100644
--- a/packages/menu/stories/submenu.stories.ts
+++ b/packages/menu/stories/submenu.stories.ts
@@ -19,7 +19,7 @@ import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/menu/sp-menu-group.js';
 import { Overlay, VirtualTrigger } from '@spectrum-web-components/overlay';
 import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-circle.js';
 import type { ActionMenu } from '@spectrum-web-components/action-menu';
 import type { Menu, MenuItem } from '@spectrum-web-components/menu';
 
@@ -164,7 +164,7 @@ export const submenu = (): TemplateResult => {
             @change=${handleRootChange}
             @sp-opened=${clearValues}
         >
-            <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
+            <sp-icon-circle slot="icon"></sp-icon-circle>
             <sp-menu-group
                 @change=${() => console.log('group change')}
                 role="none"
diff --git a/packages/menu/test/submenu.test.ts b/packages/menu/test/submenu.test.ts
index 5e5e0ab9c9c..3ddc9eec959 100644
--- a/packages/menu/test/submenu.test.ts
+++ b/packages/menu/test/submenu.test.ts
@@ -33,8 +33,8 @@ import { ActionMenu } from '@spectrum-web-components/action-menu';
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/menu/sp-menu-group.js';
 import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
-import { TemplateResult } from 'lit-html';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-circle.js';
+import { TemplateResult } from '@spectrum-web-components/base';
 import { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';
 import { isWebKit } from '@spectrum-web-components/shared';
 
@@ -572,7 +572,7 @@ describe('Submenu', () => {
     it('closes all descendant submenus when closing a ancestor menu', async () => {
         const el = await fixture<ActionMenu>(html`
             <sp-action-menu label="Closing ancestors will close submenus">
-                <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
+                <sp-icon-circle slot="icon"></sp-icon-circle>
                 <sp-menu-group role="none" id="group">
                     <span slot="header">New York</span>
                     <sp-menu-item>Bronx</sp-menu-item>
@@ -644,7 +644,7 @@ describe('Submenu', () => {
         beforeEach(async function () {
             this.el = await fixture<ActionMenu>(html`
                 <sp-action-menu id="action-menu" label="Deep submenu tree">
-                    <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
+                    <sp-icon-circle slot="icon"></sp-icon-circle>
                     <sp-menu-group role="none">
                         <span slot="header">New York</span>
                         <sp-menu-item id="no-submenu">Bronx</sp-menu-item>
diff --git a/packages/meter/package.json b/packages/meter/package.json
index ea905be837a..0e40bf6640b 100644
--- a/packages/meter/package.json
+++ b/packages/meter/package.json
@@ -33,9 +33,7 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/meter-overrides.css.js": "./src/meter-overrides.css.js",
         "./src/meter.css.js": "./src/meter.css.js",
-        "./src/progress-bar-overrides.css.js": "./src/progress-bar-overrides.css.js",
         "./sp-meter.js": {
             "development": "./sp-meter.dev.js",
             "default": "./sp-meter.js"
diff --git a/packages/meter/src/meter-overrides.css b/packages/meter/src/meter-overrides.css
deleted file mode 100644
index 609762307c2..00000000000
--- a/packages/meter/src/meter-overrides.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-meter-min-width: var(--system-meter-min-width);
-    --spectrum-meter-max-width: var(--system-meter-max-width);
-    --spectrum-meter-inline-size: var(--system-meter-inline-size);
-    --spectrum-meter-top-to-text: var(--system-meter-top-to-text);
-    --spectrum-meter-fill-color-positive: var(--system-meter-fill-color-positive);
-    --spectrum-meter-fill-color-notice: var(--system-meter-fill-color-notice);
-    --spectrum-meter-fill-color-negative: var(--system-meter-fill-color-negative);
-    --spectrum-meter-thickness: var(--system-meter-thickness);
-    --spectrum-meter-font-size: var(--system-meter-font-size);
-}
-
-:host([size="s"]) {
-    --spectrum-meter-thickness: var(--system-meter-size-s-thickness);
-    --spectrum-meter-inline-size: var(--system-meter-size-s-inline-size);
-    --spectrum-meter-font-size: var(--system-meter-size-s-font-size);
-    --spectrum-meter-top-to-text: var(--system-meter-size-s-top-to-text);
-}
-
-:host([size="l"]) {
-    --spectrum-meter-thickness: var(--system-meter-size-l-thickness);
-    --spectrum-meter-inline-size: var(--system-meter-size-l-inline-size);
-    --spectrum-meter-font-size: var(--system-meter-size-l-font-size);
-    --spectrum-meter-top-to-text: var(--system-meter-size-l-top-to-text);
-}
diff --git a/packages/meter/src/meter.css b/packages/meter/src/meter.css
index e65ef9785fd..84b11037524 100644
--- a/packages/meter/src/meter.css
+++ b/packages/meter/src/meter.css
@@ -10,15 +10,241 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-progress-bar.css");
-@import url("./progress-bar-overrides.css");
-@import url("./spectrum-meter.css");
-@import url("./meter-overrides.css");
+/* Base variables */
+:host {
+    /* Static tokens */
+	--spectrum-meter-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
+	--spectrum-meter-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
+	--spectrum-meter-corner-radius: var(--spectrum-corner-radius-full);
+
+	--spectrum-meter-fill-size-indeterminate: 70%;
+
+	/* Size */
+	--spectrum-meter-thickness: var(--spectrum-meter-thickness-medium);
+	--spectrum-meter-inline-size: var(--spectrum-meter-width);
+
+	--spectrum-meter-font-size: var(--spectrum-font-size-100);
+	--spectrum-meter-line-height: var(--spectrum-line-height-100);
+	--spectrum-meter-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+	--spectrum-meter-min-size: var(--spectrum-progress-bar-minimum-width);
+	--spectrum-meter-max-size: var(--spectrum-progress-bar-maximum-width);
+
+	/* Spacing */
+	--spectrum-meter-spacing-label-to-progressbar: var(--spectrum-spacing-75);
+	--spectrum-meter-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
+	--spectrum-meter-spacing-label-to-text: var(--spectrum-spacing-200);
+
+	/* Color */
+	--spectrum-meter-text-color: var(--spectrum-neutral-subdued-content-color-default);
+	--spectrum-meter-track-color: var(--spectrum-track-color);
+	--spectrum-meter-fill-color: var(--spectrum-accent-content-color-default);
+	--spectrum-meter-label-and-value-white: var(--spectrum-static-white-text-color);
+	--spectrum-meter-track-color-white: var(--spectrum-static-white-track-color);
+	--spectrum-meter-fill-color-white: var(--spectrum-static-white-track-indicator-color);
+	--spectrum-meter-label-and-value-black: var(--spectrum-static-black-text-color);
+	--spectrum-meter-track-color-black: var(--spectrum-static-black-track-color);
+	--spectrum-meter-fill-color-black: var(--spectrum-static-black-track-indicator-color);
+}
+
+:host([size="s"]) {
+    --spectrum-meter-thickness: var(--spectrum-meter-thickness-small);
+	--spectrum-meter-font-size: var(--spectrum-font-size-75);
+	--spectrum-meter-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+}
+
+:host([size="l"]) {
+    --spectrum-meter-thickness: var(--spectrum-meter-thickness-large);
+	--spectrum-meter-font-size: var(--spectrum-font-size-200);
+	--spectrum-meter-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
+}
+
+:host([size="xl"]) {
+    --spectrum-meter-thickness: var(--spectrum-meter-thickness-extra-large);
+	--spectrum-meter-font-size: var(--spectrum-font-size-300);
+	--spectrum-meter-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
+}
+
+:host([variant="positive"]) {
+    --mod-meter-fill-color: var(--spectrum-positive-visual-color);
+}
+
+:host([variant="notice"]) {
+    --mod-meter-fill-color: var(--spectrum-notice-visual-color);
+}
+
+:host([variant="negative"]) {
+    --mod-meter-fill-color: var(--spectrum-negative-visual-color);
+}
+
+.helptext {
+    margin-block-start: var(--mod-meter-help-text-to-progress-bar, var(--spectrum-spacing-75));
+}
+
+:host {
+	position: relative;
+	display: inline-flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+	align-items: center;
+	vertical-align: top;
+	overflow-wrap: break-word;
+
+	inline-size: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size));
+	max-inline-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width));
+	min-inline-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width));
+    color: var(--mod-meter-text-color, var(--spectrum-meter-text-color));
+}
+
+/* Label and Percentage */
+.label,
+.percentage {
+    text-align: start;
+    margin-block-start: var(--mod-meter-spacing-top-to-text, var(--spectrum-meter-spacing-top-to-text));
+    margin-block-end: var(--mod-meter-spacing-label-to-progressbar, var(--spectrum-meter-spacing-label-to-progressbar));
+    line-height: var(--mod-meter-line-height, var(--spectrum-meter-line-height));
+    font-size: var(--mod-meter-font-size, var(--spectrum-meter-font-size));
+}
+
+:host(:lang(ja)),
+:host(:lang(zh)),
+:host(:lang(ko)) {
+    line-height: var(--mod-meter-line-height-cjk, var(--spectrum-meter-line-height-cjk));
+}
+
+/* Label */
+.label {
+    flex: 1 1 0%;
+}
+
+/* Percentage */
+.percentage {
+    align-self: flex-start;
+    margin-inline-start: var(--mod-meter-spacing-label-to-text, var(--spectrum-meter-spacing-label-to-text));
+    word-break: normal;
+}
+
+/* Track */
+.track {
+    /* Visually apply border radius to child elements */
+    overflow: hidden;
+    inline-size: 100%;
+    block-size: var(--mod-meter-thickness, var(--spectrum-meter-thickness));
+    border-radius: var(--spectrum-meter-corner-radius);
+
+    background: var(--highcontrast-progressbar-track-color, var(--mod-meter-track-color, var(--spectrum-meter-track-color)));
+}
 
 .fill {
-    transform-origin: left;
+    border: none;
+    block-size: var(--mod-meter-thickness, var(--spectrum-meter-thickness));
+    transition: width 1s;
+    background: var(--highcontrast-progressbar-fill-color, var(--mod-meter-fill-color, var(--spectrum-meter-fill-color)));
+    border-radius: var(--spectrum-meter-corner-radius);
+}
+
+:host([indeterminate]) .fill {
+    inline-size: var(--mod-meter-fill-size-indeterminate, var(--spectrum-meter-fill-size-indeterminate));
+    position: relative;
+    animation-timing-function: var(--mod-meter-animation-ease-in-out-indeterminate, var(--spectrum-meter-animation-ease-in-out-indeterminate));
+	will-change: transform;
+}
+
+/* Variants  */
+/* Side Label */
+:host([side-label]) {
+    display: inline-flex;
+    flex-flow: row;
+    justify-content: space-between;
+	word-break: normal;
+}
+
+:host([side-label]) .track {
+    flex: 1 1 var(--mod-meter-inline-size, var(--spectrum-meter-inline-size));
+}
+
+:host([side-label]) .label {
+    flex-grow: 0;
+    margin-inline-end: var(--mod-meter-spacing-label-to-text, var(--spectrum-meter-spacing-label-to-text));
+    margin-block-end: 0;
+    margin-block-start: 0;
+}
+
+:host([side-label]) .percentage {
+    order: 3;
+    text-align: end;
+    margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-meter-spacing-label-to-text));
+    margin-block-end: 0;
+    margin-block-start: 0;
+    align-self: center;
+}
+
+/* Static White */
+:host([static-color="white"]) .fill {
+    color: var(--mod-meter-label-and-value-white, var(--spectrum-meter-label-and-value-white));
+    background: var(--highcontrast-progressbar-fill-color-white, var(--mod-meter-fill-color-white, var(--spectrum-meter-fill-color-white)));
+}
+
+:host([static-color="white"]) .label,
+:host([static-color="white"]) .percentage {
+    color: var(--mod-meter-label-and-value-white, var(--spectrum-meter-label-and-value-white));
+}
+
+:host([static-color="white"]) .track {
+    background: var(--spectrum-meter-track-color-white);
 }
 
-:host([dir="rtl"]) .fill {
-    transform-origin: right;
+:host([static-color="black"]) .fill {
+    color: var(--mod-meter-label-and-value-black, var(--spectrum-meter-label-and-value-black));
+    background: var(--highcontrast-progressbar-fill-color-black, var(--mod-meter-fill-color-black, var(--spectrum-meter-fill-color-black)));
+}
+
+:host([static-color="black"]) .label,
+:host([static-color="black"]) .percentage {
+    color: var(--mod-meter-label-and-value-black, var(--spectrum-meter-label-and-value-black));
+}
+
+:host([static-color="black"]) .track {
+    background: var(--spectrum-meter-track-color-black);
+}
+
+/* Animations  */
+:host([indeterminate]) .fill {
+    animation: indeterminate-loop-ltr var(--mod-meter-animation-duration-indeterminate, var(--spectrum-meter-animation-duration-indeterminate)) infinite;
+}
+
+:host([indeterminate]) .fill:dir(rtl) {
+	animation: indeterminate-loop-rtl var(--mod-meter-animation-duration-indeterminate, var(--spectrum-meter-animation-duration-indeterminate)) infinite;
+}
+
+@keyframes indeterminate-loop-ltr {
+	0% {
+		transform: translate(-100%);
+	}
+
+	100% {
+		transform: translate(var(--spectrum-meter-inline-size));
+	}
+}
+
+@keyframes indeterminate-loop-rtl {
+	0% {
+		transform: translate(100%);
+	}
+
+	100% {
+		transform: translate(calc(var(--spectrum-meter-inline-size) * -1));
+	}
+}
+
+@media (forced-colors: active) {
+    .track {
+		--highcontrast-progressbar-fill-color: ButtonText;
+		--highcontrast-progressbar-track-color: ButtonFace;
+		--highcontrast-progressbar-fill-color-white: ButtonText;
+		--highcontrast-progressbar-fill-color-black: ButtonText;
+
+		forced-color-adjust: none;
+		border: 1px solid ButtonText;
+	}
 }
diff --git a/packages/meter/src/progress-bar-overrides.css b/packages/meter/src/progress-bar-overrides.css
deleted file mode 100644
index 722272bc7c0..00000000000
--- a/packages/meter/src/progress-bar-overrides.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--system-progress-bar-animation-ease-in-out-indeterminate);
-    --spectrum-progressbar-animation-duration-indeterminate: var(--system-progress-bar-animation-duration-indeterminate);
-    --spectrum-progressbar-corner-radius: var(--system-progress-bar-corner-radius);
-    --spectrum-progressbar-fill-size-indeterminate: var(--system-progress-bar-fill-size-indeterminate);
-    --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400);
-    --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500);
-    --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800);
-    --spectrum-progressbar-line-height-cjk: var(--system-progress-bar-line-height-cjk);
-    --spectrum-progressbar-min-size: var(--system-progress-bar-min-size);
-    --spectrum-progressbar-max-size: var(--system-progress-bar-max-size);
-    --spectrum-progressbar-line-height: var(--system-progress-bar-line-height);
-    --spectrum-progressbar-spacing-label-to-progressbar: var(--system-progress-bar-spacing-label-to);
-    --spectrum-progressbar-spacing-label-to-text: var(--system-progress-bar-spacing-label-to-text);
-    --spectrum-progressbar-text-color: var(--system-progress-bar-text-color);
-    --spectrum-progressbar-track-color: var(--system-progress-bar-track-color);
-    --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color);
-    --spectrum-progressbar-label-and-value-white: var(--system-progress-bar-label-and-value-white);
-    --spectrum-progressbar-track-color-white: var(--system-progress-bar-track-color-white);
-    --spectrum-progressbar-fill-color-white: var(--system-progress-bar-fill-color-white);
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-spacing-top-to-text);
-}
-
-.spectrum-ProgressBar--sizeM {
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-m-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-size-m-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-size-m-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-m-spacing-top-to-text);
-}
-
-.spectrum-ProgressBar--sizeS {
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-s-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-size-s-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-size-s-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-s-spacing-top-to-text);
-}
-
-.spectrum-ProgressBar--sizeL {
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-l-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-size-l-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-size-l-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-l-spacing-top-to-text);
-}
-
-.spectrum-ProgressBar--sizeXL {
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-xl-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-size-xl-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-size-xl-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-xl-spacing-top-to-text);
-}
diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css
deleted file mode 100644
index 5fad393467e..00000000000
--- a/packages/meter/src/spectrum-meter.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size));
-    --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width));
-    --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width));
-    --mod-progressbar-thickness: var(--spectrum-meter-thickness);
-    --mod-progressbar-font-size: var(--spectrum-meter-font-size);
-    --mod-progressbar-spacing-top-to-text: var(--spectrum-meter-top-to-text);
-}
-
-:host([variant="positive"]) {
-    --mod-progressbar-fill-color: var(--mod-meter-fill-color-positive, var(--spectrum-meter-fill-color-positive));
-}
-
-:host([variant="notice"]) {
-    --mod-progressbar-fill-color: var(--mod-meter-fill-color-notice, var(--spectrum-meter-fill-color-notice));
-}
-
-:host([variant="negative"]) {
-    --mod-progressbar-fill-color: var(--mod-meter-fill-color-negative, var(--spectrum-meter-fill-color-negative));
-}
diff --git a/packages/meter/src/spectrum-progress-bar.css b/packages/meter/src/spectrum-progress-bar.css
deleted file mode 100644
index 6ce38cc4e67..00000000000
--- a/packages/meter/src/spectrum-progress-bar.css
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    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));
-    flex-flow: wrap;
-    justify-content: space-between;
-    align-items: center;
-    display: inline-flex;
-    position: relative;
-}
-
-.label,
-.percentage {
-    text-align: start;
-    line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height));
-    color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color));
-    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));
-}
-
-.label:lang(ja),
-.label:lang(ko),
-.label:lang(zh),
-.percentage:lang(ja),
-.percentage:lang(ko),
-.percentage:lang(zh) {
-    line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk));
-}
-
-.label {
-    flex: 1;
-}
-
-.percentage {
-    align-self: flex-start;
-    margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
-}
-
-.track {
-    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)));
-    overflow: hidden;
-}
-
-.fill {
-    block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
-    background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
-    border: none;
-    transition: width 1s;
-}
-
-:host([indeterminate]) .fill {
-    inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate));
-    animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate));
-    will-change: transform;
-    animation-name: indeterminate-loop-ltr;
-    animation-duration: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate));
-    animation-iteration-count: infinite;
-    position: relative;
-}
-
-:host([indeterminate]) .fill:dir(rtl),
-:host([dir="rtl"][indeterminate]) .fill {
-    animation-name: indeterminate-loop-rtl;
-}
-
-:host([side-label]) {
-    flex-flow: row;
-    justify-content: space-between;
-    display: inline-flex;
-}
-
-:host([side-label]) .track {
-    flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
-}
-
-:host([side-label]) .label {
-    flex-grow: 0;
-    margin-block-end: 0;
-    margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
-}
-
-:host([side-label]) .percentage {
-    text-align: end;
-    order: 3;
-    margin-block-end: 0;
-    margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
-}
-
-:host([static-color="white"]) .fill {
-    background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
-}
-
-:host([static-color="white"]) .fill,
-:host([static-color="white"]) .label,
-:host([static-color="white"]) .percentage {
-    color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
-}
-
-:host([static-color="white"]) .track {
-    background: var(--spectrum-progressbar-track-color-white);
-}
-
-@keyframes indeterminate-loop-ltr {
-    0% {
-        transform: translate(calc(var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)) * -1));
-    }
-
-    to {
-        transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)));
-    }
-}
-
-@keyframes indeterminate-loop-rtl {
-    0% {
-        transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate)));
-    }
-
-    to {
-        transform: translate(calc(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)) * -1));
-    }
-}
-
-@media (forced-colors: active) {
-    .track {
-        --highcontrast-progressbar-fill-color: ButtonText;
-        --highcontrast-progressbar-track-color: ButtonFace;
-        forced-color-adjust: none;
-        border: 1px solid ButtonText;
-    }
-}
diff --git a/packages/modal/package.json b/packages/modal/package.json
index 863dd9fdc42..544afbf4d8f 100644
--- a/packages/modal/package.json
+++ b/packages/modal/package.json
@@ -22,7 +22,6 @@
     "exports": {
         ".": "./src/modal-wrapper.css.js",
         "./package.json": "./package.json",
-        "./src/modal-overrides.css.js": "./src/modal-overrides.css.js",
         "./src/modal-wrapper.css.js": "./src/modal-wrapper.css.js",
         "./src/modal.css.js": "./src/modal.css.js"
     },
diff --git a/packages/modal/src/modal-overrides.css b/packages/modal/src/modal-overrides.css
deleted file mode 100644
index 731ba78ae42..00000000000
--- a/packages/modal/src/modal-overrides.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-modal-background-color: var(--system-modal-background-color);
-}
diff --git a/packages/modal/src/modal-wrapper-overrides.css b/packages/modal/src/modal-wrapper-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/modal/src/modal-wrapper-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/modal/src/modal-wrapper.css b/packages/modal/src/modal-wrapper.css
index 31656321a0c..5c5f9d8f20c 100644
--- a/packages/modal/src/modal-wrapper.css
+++ b/packages/modal/src/modal-wrapper.css
@@ -10,4 +10,28 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-modal-wrapper.css");
+/* Base variables */
+:host {
+    /* animation */
+    --spectrum-modal-wrapper-animation-duration: var(--spectrum-animation-duration-100);
+
+    /* layout */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    inset: 0;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1;
+    transition: visibility 0s linear var(--spectrum-modal-wrapper-animation-duration);
+}
+
+/* states */
+:host([open]) {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+    transition: visibility 0s linear;
+}
diff --git a/packages/modal/src/modal.css b/packages/modal/src/modal.css
index 996d22d3d6d..a7c46371fc9 100644
--- a/packages/modal/src/modal.css
+++ b/packages/modal/src/modal.css
@@ -10,17 +10,109 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-modal.css");
-@import url("./modal-overrides.css");
-
+/* Base variables */
 :host {
+    /* animation */
+    --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
+    --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
+    --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
+    --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
+    --spectrum-modal-animation-distance: var(--spectrum-dialog-confirm-entry-animation-distance);
+    --spectrum-modal-fullscreen-margin: 32px;
+
+    /* colors */
+    --spectrum-modal-background-color: var(--spectrum-background-layer-2-color);
+
+    /* testing overrides */
     --spectrum-dialog-confirm-exit-animation-duration: var(--swc-test-duration);
     --spectrum-dialog-confirm-entry-animation-duration: var(--swc-test-duration);
     --spectrum-modal-confirm-entry-animation-distance: var(--spectrum-dialog-confirm-entry-animation-distance);
 
-    height: 100dvh;
+    /* layout */
+    display: inline-flex;
+    flex-direction: column;
+    position: relative;
+    outline: none;
+    transform: translateY(var(--spectrum-dialog-confirm-entry-animation-distance));
+    visibility: hidden;
+    opacity: 0;
+    transition:
+        opacity var(--spectrum-animation-duration-100) ease-in-out,
+        visibility 0ms linear var(--spectrum-animation-duration-100),
+        transform var(--spectrum-animation-duration-100) ease-in-out;
+
+    /* layout */
+    block-size: 100dvh;
 }
 
+/* base styles */
 .modal {
+    /* layout */
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(var(--spectrum-dialog-confirm-entry-animation-distance));
+    z-index: 1;
+    pointer-events: auto;
+    outline: none;
     overflow: visible;
+
+    /* dimensions */
+    max-block-size: var(--spectrum-modal-max-height, 90vh);
+    max-inline-size: var(--spectrum-modal-max-width, 90%);
+
+    /* visual */
+    background: var(--spectrum-modal-background-color);
+    border-radius: var(--spectrum-modal-confirm-border-radius, var(--spectrum-corner-radius-100));
+
+    /* animation */
+    transition:
+        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));
+}
+
+/* states */
+:host([open]) {
+    max-block-size: 90vh;
+    max-inline-size: 90%;
+    visibility: visible;
+    opacity: 1;
+    background: var(--spectrum-modal-background-color);
+    border-radius: var(--spectrum-corner-radius-100);
+    transform: translateY(0);
+    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);
+}
+
+/* fullscreen styles */
+.fullscreen {
+    max-inline-size: none;
+    max-block-size: none;
+    position: fixed;
+    inset-block-start: var(--spectrum-modal-fullscreen-margin);
+    inset-block-end: var(--spectrum-modal-fullscreen-margin);
+    inset-inline-start: var(--spectrum-modal-fullscreen-margin);
+    inset-inline-end: var(--spectrum-modal-fullscreen-margin);
+}
+
+.fullscreenTakeover {
+    max-inline-size: none;
+    max-block-size: none;
+    box-sizing: border-box;
+    border: none;
+    border-radius: 0;
+    position: fixed;
+    inset: 0;
+    transform: none;
+}
+
+:host([open]) .fullscreenTakeover {
+    transform: none;
+}
+
+.modal {
+    background-color: var(--highcontrast-modal-background-color);
+    border: 1px solid var(--highcontrast-modal-border-color);
+    forced-color-adjust: none;
 }
diff --git a/packages/modal/src/spectrum-modal-wrapper.css b/packages/modal/src/spectrum-modal-wrapper.css
deleted file mode 100644
index 4d2e343bfba..00000000000
--- a/packages/modal/src/spectrum-modal-wrapper.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    box-sizing: border-box;
-    inline-size: 100vw;
-    block-size: 100vh;
-    block-size: -webkit-fill-available;
-    block-size: stretch;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: 1;
-    transition: visibility 0s linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100));
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    position: fixed;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
-
-:host([open]) {
-    visibility: visible;
-}
-
-@media only screen and (device-height <= 350px), only screen and (device-width <= 400px) {
-    :host([responsive]) {
-        inline-size: 100%;
-        block-size: 100%;
-        max-inline-size: 100%;
-        max-block-size: 100%;
-        border-radius: 0;
-    }
-
-    :host([responsive]) {
-        margin-block-start: 0;
-    }
-}
diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css
deleted file mode 100644
index 96a29482e2f..00000000000
--- a/packages/modal/src/spectrum-modal.css
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500));
-    --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)));
-    --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));
-    --spectrum-modal-fullscreen-margin: var(--mod-modal-fullscreen-margin, 32px);
-}
-
-.modal {
-    visibility: hidden;
-    opacity: 0;
-    transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance)));
-    z-index: 1;
-    max-block-size: 90vh;
-    max-block-size: var(--mod-modal-max-height, 90vh);
-    max-inline-size: 90%;
-    max-inline-size: var(--mod-modal-max-width, 90%);
-    background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
-    border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100));
-    pointer-events: auto;
-    transition:
-        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));
-    outline: none;
-    overflow: hidden;
-}
-
-:host([open]) .modal {
-    pointer-events: auto;
-    visibility: visible;
-    opacity: 1;
-    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);
-}
-
-@media only screen and (device-height <= 350px), only screen and (device-width <= 400px) {
-    :host([responsive]) .modal {
-        inline-size: 100%;
-        block-size: 100%;
-        max-inline-size: 100%;
-        max-block-size: 100%;
-        border-radius: 0;
-    }
-}
-
-.fullscreen {
-    max-inline-size: none;
-    max-block-size: none;
-    position: fixed;
-    inset-block-start: var(--spectrum-modal-fullscreen-margin);
-    inset-block-end: var(--spectrum-modal-fullscreen-margin);
-    inset-inline-start: var(--spectrum-modal-fullscreen-margin);
-    inset-inline-end: var(--spectrum-modal-fullscreen-margin);
-}
-
-.fullscreenTakeover {
-    max-inline-size: none;
-    max-block-size: none;
-    box-sizing: border-box;
-    border: none;
-    border-radius: 0;
-    position: fixed;
-    inset: 0;
-}
-
-.fullscreenTakeover,
-:host([open]) .fullscreenTakeover {
-    transform: none;
-}
diff --git a/packages/number-field/package.json b/packages/number-field/package.json
index e2790da346b..3690de764a4 100644
--- a/packages/number-field/package.json
+++ b/packages/number-field/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/number-field-overrides.css.js": "./src/number-field-overrides.css.js",
         "./src/number-field.css.js": "./src/number-field.css.js",
         "./sp-number-field.js": {
             "development": "./sp-number-field.dev.js",
diff --git a/packages/number-field/src/number-field-overrides.css b/packages/number-field/src/number-field-overrides.css
deleted file mode 100644
index 86806b44807..00000000000
--- a/packages/number-field/src/number-field-overrides.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-stepper-border-width: var(--system-stepper-border-width);
-    --spectrum-stepper-border-color-default: var(--system-stepper-border-color-default);
-    --spectrum-stepper-border-color-hover: var(--system-stepper-border-color-hover);
-    --spectrum-stepper-border-color-focus: var(--system-stepper-border-color-focus);
-    --spectrum-stepper-border-color-focus-hover: var(--system-stepper-border-color-focus-hover);
-    --spectrum-stepper-border-color-keyboard-focus: var(--system-stepper-border-color-keyboard-focus);
-    --spectrum-stepper-buttons-border-style: var(--system-stepper-buttons-border-style);
-    --spectrum-stepper-buttons-border-width: var(--system-stepper-buttons-border-width);
-    --spectrum-stepper-buttons-border-color: var(--system-stepper-buttons-border-color);
-    --spectrum-stepper-buttons-background-color: var(--system-stepper-buttons-background-color);
-    --spectrum-stepper-buttons-border-color-hover: var(--system-stepper-buttons-border-color-hover);
-    --spectrum-stepper-buttons-border-color-focus: var(--system-stepper-buttons-border-color-focus);
-    --spectrum-stepper-buttons-border-color-keyboard-focus: var(--system-stepper-buttons-border-color-keyboard-focus);
-    --spectrum-stepper-button-border-width: var(--system-stepper-button-border-width);
-    --spectrum-stepper-border-color-invalid: var(--system-stepper-border-color-invalid);
-    --spectrum-stepper-border-color-focus-invalid: var(--system-stepper-border-color-focus-invalid);
-    --spectrum-stepper-border-color-focus-hover-invalid: var(--system-stepper-border-color-focus-hover-invalid);
-    --spectrum-stepper-border-color-keyboard-focus-invalid: var(--system-stepper-border-color-keyboard-focus-invalid);
-    --spectrum-stepper-border-color-disabled: var(--system-stepper-border-color-disabled);
-    --spectrum-stepper-button-border-width-disabled: var(--system-stepper-button-border-width-disabled);
-    --spectrum-stepper-buttons-background-color-disabled: var(--system-stepper-buttons-background-color-disabled);
-}
-
-:host([quiet]) #textfield {
-    --spectrum-stepper-buttons-border-style: var(--system-stepper-quiet-buttons-border-style);
-    --spectrum-stepper-button-edge-to-fill: var(--system-stepper-quiet-button-edge-to-fill);
-}
diff --git a/packages/number-field/src/number-field.css b/packages/number-field/src/number-field.css
index 9d0dd9e3aa7..6b4d7e8c3a8 100644
--- a/packages/number-field/src/number-field.css
+++ b/packages/number-field/src/number-field.css
@@ -10,51 +10,291 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-number-field.css");
-@import url("./number-field-overrides.css");
 
-/* sets the missing variables for the width calcs for each size- found in spectrum-number-field.css */
-:host,
-:host([size="m"]) {
-    --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));
+:host([invalid]) #textfield {
+    --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;
+
+    --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(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)));
+    --mod-textfield-icon-spacing-inline-start-invalid: 0;
 }
 
-:host([size="s"]) {
-    --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));
+:host([disabled]) #textfield {
+    --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+
+    --spectrum-stepper-buttons-border-width: var(--spectrum-stepper-button-border-width-disabled);
+    --spectrum-stepper-buttons-background-color: var(--spectrum-stepper-buttons-background-color-disabled);
 }
 
-:host([size="l"]) {
-    --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));
+:host([focused]:not([disabled])) #textfield,
+:host(:not([disabled])) #textfield:focus {
 }
 
-:host([size="xl"]) {
-    --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));
+:host([focused]:not([disabled]):hover) #textfield,
+:host(:not([disabled]):hover) #textfield:focus {
+}
+
+:host([keyboard-focused]:not([disabled])) #textfield,
+:host(:not([disabled])) #textfield:focus-visible {
+}
+
+.input {
+    --highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
+
+    border-inline-end-width: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+
+    font-variant-numeric: tabular-nums;
+}
+
+.button {
+    --highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
+    --highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
 }
 
 :host {
-    /* TODO: added stepper-button-width multiplied by 2 just to give extra space to the input field.
+    --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));
+
+    --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));
+    --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+    --mod-textfield-border-color: var(--spectrum-stepper-border-color);
+
+    /* tODO: added stepper-button-width multiplied by 2 just to give extra space to the input field.
     That "2" is a magic number and should be removed when we are able (possibly after S2 migration). */
-    --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)) * 2 + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);
+    --spectrum-stepper-width: calc(var(--spectrum-stepper-height) * var(--spectrum-text-field-minimum-width-multiplier) + var(--spectrum-stepper-button-width) * 2 + var(--spectrum-stepper-border-width) * 2);
 
     /* resets the inline-size of sp-number-field to the newly defined stepper-width */
-    inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
+    inline-size: var(--spectrum-stepper-width);
 }
 
-:host([hide-stepper]) {
-    --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);
+#textfield,
+:host([size="m"]) #textfield {
+    --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));
+}
+
+:host([size="s"]) #textfield {
+}
+
+:host([size="l"]) #textfield {
+}
+
+:host([size="xl"]) #textfield {
+}
+
+:host([focused]:not([disabled])) #textfield,
+:host(:not([disabled])) #textfield:focus {
+    --mod-stepper-buttons-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
+}
+
+:host([keyboard-focused]:not([disabled])) #textfield {
+}
+
+:host([quiet]) #textfield {
+    --mod-stepper-buttons-background-color: transparent;
+
+    --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width));
+    --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;
+    --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);
+    --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)));
+
+    --spectrum-stepper-buttons-border-style: none;
+    --spectrum-stepper-button-edge-to-fill: 0;
+
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+}
+
+:host([quiet][keyboard-focused]:not([disabled])) #textfield {
+    --mod-stepper-focus-indicator-visibility: visible;
+}
+
+:host([quiet][invalid]) #textfield {
+}
+
+#textfield:not(.spectrum-Stepper--quiet) {
+    --mod-textfield-border-color-disabled: var(--spectrum-stepper-border-color-disabled);
+}
+
+:host(:not([disabled])[focused]) #textfield,
+:host(:not([disabled])) #textfield:focus {
+    --mod-textfield-focus-indicator-width: 0;
+}
+
+:host([keyboard-focused]:not([disabled])) #textfield,
+:host(:not([disabled])) #textfield:focus-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);
+}
+
+:host([invalid][focused]) #textfield,
+:host([invalid]) #textfield:focus {
+}
+
+:host([invalid][keyboard-focused]) #textfield,
+:host([invalid]) #textfield:focus-visible {
+}
+
+:host([quiet][focused]:not([disabled])) #textfield,
+:host([quiet]:not([disabled])) #textfield:focus {
+}
+
+:host([focused]:not([disabled]):hover) #textfield,
+:host(:not([disabled]):hover) #textfield:focus {
+}
+
+:host([quiet]:not([disabled]):hover) #textfield {
+}
+
+:host(:hover) #textfield:not(.is-invalid, .is-disabled, .is-focused) {
+}
+
+:host(:not([disabled])[focused]:hover) #textfield,
+:host(:not([disabled]):hover) #textfield:focus {
+}
+
+:host([invalid]:hover) #textfield {
+}
+
+:host([invalid][focused]:hover) #textfield,
+:host([invalid]:hover) #textfield:focus {
+}
+
+:host([quiet][focused]:not([disabled]):hover) #textfield,
+:host([quiet]:not([disabled]):hover) #textfield:focus {
+}
+
+:host([quiet][keyboard-focused]:not([disabled]):hover) #textfield {
 }
 
-/* keeps the textfield 100% of the width of the sp-number-field so there isn't a gap between the containers */
 #textfield {
+    inline-size: var(--spectrum-stepper-width);
+    block-size: var(--spectrum-stepper-height);
+    border-radius: var(--spectrum-stepper-border-radius);
+    flex-flow: row;
+    display: inline-flex;
+    position: relative;
+}
+
+#textfield:before {
+    content: "";
+}
+
+.buttons {
+    box-sizing: border-box;
+    block-size: var(--spectrum-stepper-height);
+    inline-size: var(--spectrum-stepper-button-width);
+    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)));
+    background-color: var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color));
+    transition: border-color var(--spectrum-stepper-animation-duration) ease-in-out;
+    border-inline-start-width: 0;
+    flex-direction: column;
+    justify-content: center;
+    display: flex;
+}
+
+.buttons,
+#textfield.hide-stepper .input {
+    border-start-end-radius: var(--spectrum-stepper-border-radius);
+    border-end-end-radius: var(--spectrum-stepper-border-radius);
+}
+
+#textfield.hide-stepper .input {
+    border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+}
+
+:host([quiet]) .hide-stepper .input {
+    border-inline-end-width: 0;
+    border-end-end-radius: 0;
+}
+
+:host([quiet]):after {
+    visibility: hidden;
+    visibility: var(--mod-stepper-focus-indicator-visibility, hidden);
+    content: "";
     inline-size: 100%;
+    block-size: var(--spectrum-stepper-focus-indicator-width);
+    background-color: var(--spectrum-stepper-focus-indicator-color);
+    position: absolute;
+    inset-block-end: calc((var(--spectrum-stepper-focus-indicator-gap) + var(--spectrum-stepper-focus-indicator-width)) * -1);
+    inset-inline-start: 0;
 }
 
-.input {
-    font-variant-numeric: tabular-nums;
+:host([quiet][keyboard-focused]:not([disabled])) {
+    outline: none;
+}
+
+/* number field tokens */
+:host {
+    --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-900);
+    --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-800);
+    --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
+    --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-800);
+    --spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
+    --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-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);
+}
+
+/* sets the missing variables for the width calcs for each size- found in spectrum-number-field.css */
+:host,
+:host([size="m"]) {
+}
+
+:host([size="s"]) {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
+
+:host([hide-stepper]) {
+}
+
+/* keeps the textfield 100% of the width of the sp-number-field so there isn't a gap between the containers */
+#textfield {
+    inline-size: 100%;
 }
 
 :host([readonly]) .buttons {
@@ -67,18 +307,12 @@
 }
 
 :host([hide-stepper]:not([quiet])) #textfield input {
-    border: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) solid var(--mod-textfield-border-color, var(--spectrum-textfield-border-color));
+    border: var(--spectrum-textfield-border-width) solid var(--spectrum-textfield-border-color);
     border-radius: var(--spectrum-textfield-corner-radius);
 }
 
-:host([quiet]) #textfield .button {
-    --mod-infield-button-border-color: var(--mod-infield-border-color-quiet, transparent);
-    --mod-infield-button-edge-to-fill: 0;
-    --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0);
-}
-
 :host([focused]:not([disabled])) #textfield:hover {
-    --mod-stepper-buttons-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover));
+    --spectrum-stepper-buttons-border-color-focus-hover: var(--spectrum-stepper-border-color-focus-hover);
 }
 
 /* visually places the validation icon inside the input field */
@@ -89,5 +323,5 @@
 
 /* includes the alert icon size in the input's padding similar to the valid variant */
 :host([invalid]) .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)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
+    padding-inline-end: calc(var(--spectrum-textfield-icon-spacing-inline-start-valid) + var(--spectrum-textfield-icon-size-valid) + var(--spectrum-textfield-icon-spacing-inline-end-valid) - var(--spectrum-textfield-border-width));
 }
diff --git a/packages/number-field/src/spectrum-number-field.css b/packages/number-field/src/spectrum-number-field.css
deleted file mode 100644
index dd420075632..00000000000
--- a/packages/number-field/src/spectrum-number-field.css
+++ /dev/null
@@ -1,321 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --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;
-    }
-
-    :host([invalid]) #textfield {
-        --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;
-    }
-
-    :host([disabled]) #textfield {
-        --highcontrast-stepper-border-color: GrayText;
-        --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
-    }
-
-    :host([focused]:not([disabled])) #textfield,
-    :host(:not([disabled])) #textfield:focus {
-        --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
-    }
-
-    @media (hover: hover) {
-        :host(:not([disabled]):hover) #textfield {
-            --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
-        }
-
-        :host([focused]:not([disabled]):hover) #textfield,
-        :host(:not([disabled]):hover) #textfield:focus {
-            --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
-        }
-    }
-
-    :host([keyboard-focused]:not([disabled])) #textfield,
-    :host(:not([disabled])) #textfield:focus-visible {
-        --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
-    }
-
-    .input {
-        --highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
-    }
-
-    .button {
-        --highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
-        --highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
-    }
-}
-
-:host {
-    --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));
-}
-
-#textfield,
-:host([size="m"]) #textfield {
-    --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));
-}
-
-:host([size="s"]) #textfield {
-    --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));
-}
-
-:host([size="l"]) #textfield {
-    --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));
-}
-
-:host([size="xl"]) #textfield {
-    --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));
-}
-
-:host([disabled]) #textfield {
-    --spectrum-stepper-buttons-border-width: var(--spectrum-stepper-button-border-width-disabled);
-    --spectrum-stepper-buttons-background-color: var(--spectrum-stepper-buttons-background-color-disabled);
-}
-
-:host([invalid]) #textfield {
-    --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));
-}
-
-:host([focused]:not([disabled])) #textfield,
-:host(:not([disabled])) #textfield: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)));
-}
-
-:host([keyboard-focused]:not([disabled])) #textfield {
-    --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
-}
-
-:host([quiet]) #textfield {
-    --mod-stepper-buttons-background-color: transparent;
-}
-
-:host([quiet][keyboard-focused]:not([disabled])) #textfield {
-    --mod-stepper-focus-indicator-visibility: visible;
-}
-
-:host([quiet][invalid]) #textfield {
-    --mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default));
-}
-
-:host {
-    --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));
-    --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
-    --mod-textfield-border-color: var(--spectrum-stepper-border-color);
-}
-
-#textfield:not(.spectrum-Stepper--quiet) {
-    --mod-textfield-border-color-disabled: var(--spectrum-stepper-border-color-disabled);
-}
-
-:host(:not([disabled])[focused]) #textfield,
-:host(:not([disabled])) #textfield: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;
-}
-
-:host([keyboard-focused]:not([disabled])) #textfield,
-:host(:not([disabled])) #textfield: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)));
-    outline: var(--spectrum-stepper-focus-indicator-width) solid;
-    outline-color: var(--spectrum-stepper-focus-indicator-color);
-    outline-offset: var(--spectrum-stepper-focus-indicator-gap);
-}
-
-:host([invalid]) #textfield {
-    --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;
-}
-
-:host([invalid][focused]) #textfield,
-:host([invalid]) #textfield: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)));
-}
-
-:host([invalid][keyboard-focused]) #textfield,
-:host([invalid]) #textfield: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)));
-}
-
-:host([quiet]) #textfield {
-    --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;
-    --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);
-    --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)));
-}
-
-:host([quiet][focused]:not([disabled])) #textfield,
-:host([quiet]:not([disabled])) #textfield:focus {
-    --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
-}
-
-:host([quiet][keyboard-focused]:not([disabled])) #textfield {
-    --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
-}
-
-@media (hover: hover) {
-    :host(:not([disabled]):hover) #textfield {
-        --mod-stepper-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
-    }
-
-    :host([focused]:not([disabled]):hover) #textfield,
-    :host(:not([disabled]):hover) #textfield:focus {
-        --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)));
-    }
-
-    :host([quiet]:not([disabled]):hover) #textfield {
-        --mod-stepper-buttons-background-color: transparent;
-    }
-
-    :host(:hover) #textfield:not(.is-invalid, .is-disabled, .is-focused) {
-        --mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover));
-    }
-
-    :host(:not([disabled])[focused]:hover) #textfield,
-    :host(:not([disabled]):hover) #textfield:focus {
-        --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)));
-    }
-
-    :host([invalid]:hover) #textfield {
-        --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)));
-    }
-
-    :host([invalid][focused]:hover) #textfield,
-    :host([invalid]:hover) #textfield:focus {
-        --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)));
-    }
-
-    :host([quiet]:not([disabled]):hover) #textfield {
-        --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)));
-    }
-
-    :host([quiet][focused]:not([disabled]):hover) #textfield,
-    :host([quiet]:not([disabled]):hover) #textfield:focus {
-        --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
-    }
-
-    :host([quiet][keyboard-focused]:not([disabled]):hover) #textfield {
-        --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
-    }
-}
-
-#textfield {
-    --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));
-    inline-size: var(--spectrum-stepper-width);
-    block-size: var(--spectrum-stepper-height);
-    border-radius: var(--spectrum-stepper-border-radius);
-    flex-flow: row;
-    display: inline-flex;
-    position: relative;
-}
-
-#textfield:before {
-    content: "";
-}
-
-.input {
-    border-inline-end-width: 0;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-}
-
-.buttons {
-    box-sizing: border-box;
-    block-size: var(--spectrum-stepper-height);
-    inline-size: var(--spectrum-stepper-button-width);
-    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)));
-    background-color: var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color));
-    transition: border-color var(--spectrum-stepper-animation-duration) ease-in-out;
-    border-inline-start-width: 0;
-    flex-direction: column;
-    justify-content: center;
-    display: flex;
-}
-
-.buttons,
-#textfield.hide-stepper .input {
-    border-start-end-radius: var(--spectrum-stepper-border-radius);
-    border-end-end-radius: var(--spectrum-stepper-border-radius);
-}
-
-#textfield.hide-stepper .input {
-    border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
-}
-
-:host([quiet]) #textfield {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-}
-
-:host([quiet]) .hide-stepper .input {
-    border-inline-end-width: 0;
-    border-end-end-radius: 0;
-}
-
-:host([quiet]):after {
-    visibility: hidden;
-    visibility: var(--mod-stepper-focus-indicator-visibility, hidden);
-    content: "";
-    inline-size: 100%;
-    block-size: var(--spectrum-stepper-focus-indicator-width);
-    background-color: var(--spectrum-stepper-focus-indicator-color);
-    position: absolute;
-    inset-block-end: calc((var(--spectrum-stepper-focus-indicator-gap) + var(--spectrum-stepper-focus-indicator-width)) * -1);
-    inset-inline-start: 0;
-}
-
-:host([quiet][keyboard-focused]:not([disabled])) {
-    outline: none;
-}
diff --git a/packages/overlay/src/overlay.css b/packages/overlay/src/overlay.css
index 74202e5f601..b3d6b711a9f 100644
--- a/packages/overlay/src/overlay.css
+++ b/packages/overlay/src/overlay.css
@@ -10,29 +10,22 @@
  * governing permissions and limitations under the License.
  */
 
+/* Base variables */
 :host {
+    /* animation Distance Variable */
+    --swc-overlay-animation-distance: var(--spectrum-spacing-100);
     display: contents;
     pointer-events: none;
-
-    /**
-     * Duplicate --spectrum-overlay-animation-distance, which is out of scope.
-     * Currently is is statically `--spectrum-spacing-100` across a number of places
-     * so that is leveraged here as the default.
-     **/
-    --swc-overlay-animation-distance: var(--spectrum-spacing-100);
 }
 
-/**
- * :host(:has(...)) {} currently only work in Firefox and Safari
- * Chromium will resolve to the default of 6px above. Tooltip leverages a scale custom
- * value for this measurement, this adopts it where we can.
- **/
-
+/* tooltip-specific Animation Distance */
 :host(:has(> sp-tooltip)) {
-    --swc-overlay-animation-distance: var(--spectrum-tooltip-animation-distance);
 }
 
+/* dialog Base Styles */
 .dialog {
+    --spectrum-overlay-open: true;
+
     margin: 0;
     border: 0;
     background: none;
@@ -41,18 +34,17 @@
     overflow: visible;
     opacity: 1 !important;
     box-sizing: border-box;
-    max-height: calc(100vh - 16px);
-    max-height: calc(100dvh - 16px);
-    max-width: calc(100vw - 16px);
-    height: auto;
+    max-block-size: calc(100vh - 16px);
+    max-block-size: calc(100dvh - 16px);
+    max-inline-size: calc(100vw - 16px);
+    block-size: auto;
     inset: auto;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     display: flex;
-
-    --sp-overlay-open: true;
 }
 
+/* dialog States */
 .dialog:not([is-visible]) {
     display: none;
 }
@@ -62,13 +54,13 @@
 }
 
 dialog:modal {
-    --mod-popover-filter: var(--spectrum-popover-filter);
+    --spectrum-popover-filter: var(--spectrum-popover-filter);
 }
 
 :host(:not([open])) .dialog {
-    --sp-overlay-open: false;
 }
 
+/* dialog Backdrop and Overlay */
 .dialog::backdrop {
     display: none;
 }
@@ -84,10 +76,12 @@ dialog:modal {
     display: none;
 }
 
+/* dialog Content */
 .dialog > div {
-    width: 100%;
+    inline-size: 100%;
 }
 
+/* slotted Content */
 ::slotted(*) {
     pointer-events: auto;
     visibility: visible !important;
@@ -97,106 +91,63 @@ dialog:modal {
     position: static;
 }
 
-/**
- * Offset the transition displacement from the trigger edge by
- * padding the equivelent distance off of the opposite edge.
- *
- * <HACK>
- * Prepare for Context Menus with [popover] by adding margin/border
- * that _should_ still be under the pointer when `pointerup` is dispatched.
- * </HACK>
- **/
+/* placement Styles - Default */
 .dialog:not([actual-placement])[placement*="top"] {
     padding-block: var(--swc-overlay-animation-distance);
-    margin-top: var(--swc-overlay-animation-distance);
+    margin-block-start: var(--swc-overlay-animation-distance);
 }
 
 .dialog:not([actual-placement])[placement*="right"] {
     padding-inline: var(--swc-overlay-animation-distance);
-    margin-left: calc(-1 * var(--swc-overlay-animation-distance));
+    margin-inline-start: calc(-1 * var(--swc-overlay-animation-distance));
 }
 
 .dialog:not([actual-placement])[placement*="bottom"] {
     padding-block: var(--swc-overlay-animation-distance);
-    margin-top: calc(-1 * var(--swc-overlay-animation-distance));
+    margin-block-start: calc(-1 * var(--swc-overlay-animation-distance));
 }
 
 .dialog:not([actual-placement])[placement*="left"] {
     padding-inline: var(--swc-overlay-animation-distance);
-    margin-left: var(--swc-overlay-animation-distance);
+    margin-inline-start: var(--swc-overlay-animation-distance);
 }
 
+/* placement Styles - Actual */
 .dialog[actual-placement*="top"] {
     padding-block: var(--swc-overlay-animation-distance);
-    margin-top: var(--swc-overlay-animation-distance);
+    margin-block-start: var(--swc-overlay-animation-distance);
 }
 
 .dialog[actual-placement*="right"] {
     padding-inline: var(--swc-overlay-animation-distance);
-    margin-left: calc(-1 * var(--swc-overlay-animation-distance));
+    margin-inline-start: calc(-1 * var(--swc-overlay-animation-distance));
 }
 
 .dialog[actual-placement*="bottom"] {
     padding-block: var(--swc-overlay-animation-distance);
-    margin-top: calc(-1 * var(--swc-overlay-animation-distance));
+    margin-block-start: calc(-1 * var(--swc-overlay-animation-distance));
 }
 
 .dialog[actual-placement*="left"] {
     padding-inline: var(--swc-overlay-animation-distance);
-    margin-left: var(--swc-overlay-animation-distance);
+    margin-inline-start: var(--swc-overlay-animation-distance);
 }
 
+/* longpress Descriptor */
 slot[name="longpress-describedby-descriptor"] {
     display: none;
 }
 
-/* stylelint-disable */
-@supports selector(:open) {
-    .dialog {
-        opacity: 0;
-    }
-
-    .dialog:open {
-        opacity: 1;
-
-        --mod-popover-filter: var(--spectrum-popover-filter);
-    }
-}
-
-@supports selector(:popover-open) {
-    .dialog {
-        opacity: 0;
-    }
-
-    .dialog:popover-open {
-        opacity: 1;
-
-        --mod-popover-filter: var(--spectrum-popover-filter);
-    }
+.dialog:open {
+    opacity: 1;
 }
 
-@supports (overlay: auto) {
-    .dialog {
-        display: none;
-        transition:
-            all var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)),
-            translate 0s,
-            display var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
-        transition-behavior: allow-discrete;
-    }
+.dialog:popover-open {
+    opacity: 1;
 
-    .dialog:popover-open {
-        display: flex;
-    }
+    display: flex;
 }
 
-@supports (not selector(:open)) and (not selector(:popover-open)) {
-    :host:not([open]) .dialog {
-        pointer-events: none;
-    }
-
-    .dialog[actual-placement] {
-        z-index: calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count));
-    }
+.dialog[actual-placement] {
+    z-index: calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count));
 }
-/* stylelint-enable */
diff --git a/packages/overlay/stories/overlay-directive.stories.ts b/packages/overlay/stories/overlay-directive.stories.ts
index 4a3e123d6ed..f40881da6b3 100644
--- a/packages/overlay/stories/overlay-directive.stories.ts
+++ b/packages/overlay/stories/overlay-directive.stories.ts
@@ -25,7 +25,7 @@ import '@spectrum-web-components/action-group/sp-action-group.js';
 import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';
 import '@spectrum-web-components/overlay/overlay-trigger.js';
 import {
diff --git a/packages/overlay/stories/overlay-element.stories.ts b/packages/overlay/stories/overlay-element.stories.ts
index d94690c76d7..e840ab5f486 100644
--- a/packages/overlay/stories/overlay-element.stories.ts
+++ b/packages/overlay/stories/overlay-element.stories.ts
@@ -25,8 +25,8 @@ import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/link/sp-link.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-select.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-select.js';
 import '@spectrum-web-components/textfield/sp-textfield.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/table/sp-table.js';
@@ -37,7 +37,7 @@ import '@spectrum-web-components/table/sp-table-body.js';
 import '@spectrum-web-components/table/sp-table-row.js';
 import '@spectrum-web-components/table/sp-table-cell.js';
 
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-select-rectangle.js';
 import { Placement } from '@floating-ui/dom';
 import { OverlayTypes } from '../src/overlay-types.js';
 import { notAgain } from '../../dialog/stories/dialog-base.stories.js';
@@ -317,14 +317,14 @@ export const complexSlowPage = (): TemplateResult => html`
                         </sp-table>
                         <sp-action-group>
                             <sp-action-button>
-                                <sp-icon-anchor-select
+                                <sp-icon-select
                                     slot="icon"
-                                ></sp-icon-anchor-select>
+                                ></sp-icon-select>
                             </sp-action-button>
                             <sp-action-button>
-                                <sp-icon-polygon-select
+                                <sp-icon-select
                                     slot="icon"
-                                ></sp-icon-polygon-select>
+                                ></sp-icon-select>
                             </sp-action-button>
                             <sp-slider
                                 value="5"
@@ -558,15 +558,15 @@ export const actionGroup = ({ delayed }: Properties): TemplateResult => {
         <sp-popover open class="root">
             <sp-action-group vertical quiet emphasized selects="single">
                 <sp-action-button id="trigger-1" hold-affordance>
-                    <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
+                    <sp-icon-select slot="icon"></sp-icon-select>
                 </sp-action-button>
                 <sp-action-button id="trigger-2" hold-affordance>
-                    <sp-icon-polygon-select
+                    <sp-icon-select
                         slot="icon"
-                    ></sp-icon-polygon-select>
+                    ></sp-icon-select>
                 </sp-action-button>
                 <sp-action-button id="trigger-3" hold-affordance>
-                    <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                    <sp-icon-select-rectangle slot="icon"></sp-icon-select-rectangle>
                 </sp-action-button>
                 <sp-action-menu label="More Actions" placement="left">
                     <sp-menu-group id="cms">
@@ -617,17 +617,17 @@ export const actionGroup = ({ delayed }: Properties): TemplateResult => {
             <sp-popover tip>
                 <sp-action-group vertical quiet>
                     <sp-action-button>
-                        <sp-icon-anchor-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-anchor-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-polygon-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-polygon-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                        <sp-icon-select-rectangle slot="icon"></sp-icon-select-rectangle>
                     </sp-action-button>
                 </sp-action-group>
             </sp-popover>
@@ -644,17 +644,17 @@ export const actionGroup = ({ delayed }: Properties): TemplateResult => {
             <sp-popover tip>
                 <sp-action-group vertical quiet>
                     <sp-action-button>
-                        <sp-icon-anchor-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-anchor-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-polygon-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-polygon-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                        <sp-icon-select-rectangle slot="icon"></sp-icon-select-rectangle>
                     </sp-action-button>
                 </sp-action-group>
             </sp-popover>
@@ -676,17 +676,17 @@ export const actionGroup = ({ delayed }: Properties): TemplateResult => {
             <sp-popover tip>
                 <sp-action-group vertical quiet>
                     <sp-action-button>
-                        <sp-icon-anchor-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-anchor-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-polygon-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-polygon-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                        <sp-icon-select-rectangle slot="icon"></sp-icon-select-rectangle>
                     </sp-action-button>
                 </sp-action-group>
             </sp-popover>
@@ -737,7 +737,7 @@ export const actionGroupWithFilters = ({
         <sp-popover open class="root">
             <sp-action-group vertical quiet emphasized selects="single">
                 <sp-action-button id="trigger-1" hold-affordance>
-                    <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
+                    <sp-icon-select slot="icon"></sp-icon-select>
                     <sp-tooltip ?delayed=${delayed} self-managed>
                         Hover
                     </sp-tooltip>
@@ -750,31 +750,31 @@ export const actionGroupWithFilters = ({
                         <sp-popover tip>
                             <sp-action-group vertical quiet>
                                 <sp-action-button>
-                                    <sp-icon-anchor-select
+                                    <sp-icon-select
                                         slot="icon"
-                                    ></sp-icon-anchor-select>
+                                    ></sp-icon-select>
                                 </sp-action-button>
                                 <sp-action-button>
-                                    <sp-icon-polygon-select
+                                    <sp-icon-select
                                         slot="icon"
-                                    ></sp-icon-polygon-select>
+                                    ></sp-icon-select>
                                 </sp-action-button>
                                 <sp-action-button>
-                                    <sp-icon-rect-select
+                                    <sp-icon-select-rectangle
                                         slot="icon"
-                                    ></sp-icon-rect-select>
+                                    ></sp-icon-select-rectangle>
                                 </sp-action-button>
                             </sp-action-group>
                         </sp-popover>
                     </sp-overlay>
                 </sp-action-button>
                 <sp-action-button id="trigger-2" hold-affordance>
-                    <sp-icon-polygon-select
+                    <sp-icon-select
                         slot="icon"
-                    ></sp-icon-polygon-select>
+                    ></sp-icon-select>
                 </sp-action-button>
                 <sp-action-button id="trigger-3" hold-affordance>
-                    <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                    <sp-icon-select-rectangle slot="icon"></sp-icon-select-rectangle>
                     <sp-tooltip ?delayed=${delayed} self-managed>
                         Hover
                     </sp-tooltip>
@@ -828,17 +828,17 @@ export const actionGroupWithFilters = ({
             <sp-popover tip>
                 <sp-action-group vertical quiet>
                     <sp-action-button>
-                        <sp-icon-anchor-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-anchor-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-polygon-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-polygon-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                        <sp-icon-select-rectangle slot="icon"></sp-icon-select-rectangle>
                     </sp-action-button>
                 </sp-action-group>
             </sp-popover>
@@ -852,17 +852,17 @@ export const actionGroupWithFilters = ({
             <sp-popover tip>
                 <sp-action-group vertical quiet>
                     <sp-action-button>
-                        <sp-icon-anchor-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-anchor-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-polygon-select
+                        <sp-icon-select
                             slot="icon"
-                        ></sp-icon-polygon-select>
+                        ></sp-icon-select>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                        <sp-icon-select-rectangle slot="icon"></sp-icon-select-rectangle>
                     </sp-action-button>
                 </sp-action-group>
             </sp-popover>
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 52031d0cefe..b5ea611be3a 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -18,7 +18,7 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
 import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
 import '@spectrum-web-components/dialog/sp-dialog.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';
 import {
     openOverlay,
@@ -54,7 +54,7 @@ import '../../../projects/story-decorator/src/types.js';
 
 import { Button } from '@spectrum-web-components/button';
 import { Popover } from '@spectrum-web-components/popover';
-import { render } from 'lit-html';
+import { render } from '@spectrum-web-components/base';
 import './overlay-story-components.js';
 import { PopoverContent } from './overlay-story-components.js';
 
@@ -642,13 +642,11 @@ export const deepNesting = (): TemplateResult => {
         ${storyStyles}
         <sp-theme
             color=${outter}
-            system=${window.__swc_hack_knobs__.defaultSystemVariant}
             scale=${window.__swc_hack_knobs__.defaultScale}
             dir=${window.__swc_hack_knobs__.defaultDirection}
         >
             <sp-theme
                 color=${color}
-                system=${window.__swc_hack_knobs__.defaultSystemVariant}
                 scale=${window.__swc_hack_knobs__.defaultScale}
                 dir=${window.__swc_hack_knobs__.defaultDirection}
             >
@@ -924,7 +922,7 @@ export const longpress = (): TemplateResult => {
     return html`
         <overlay-trigger triggered-by="longpress" placement="right-start">
             <sp-action-button slot="trigger" hold-affordance>
-                <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
             </sp-action-button>
             <sp-tooltip slot="hover-content">Search real hard...</sp-tooltip>
             <sp-popover slot="longpress-content" tip>
@@ -938,13 +936,13 @@ export const longpress = (): TemplateResult => {
                     style="margin: calc(var(--spectrum-actiongroup-button-gap-y,calc(var(--swc-scale-factor) * 10px)) / 2);"
                 >
                     <sp-action-button>
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                        <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                        <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                     </sp-action-button>
                     <sp-action-button>
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                        <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                     </sp-action-button>
                 </sp-action-group>
             </sp-popover>
diff --git a/packages/overlay/test/overlay-trigger-click.test.ts b/packages/overlay/test/overlay-trigger-click.test.ts
index 013521b3f64..456ba3fa48e 100644
--- a/packages/overlay/test/overlay-trigger-click.test.ts
+++ b/packages/overlay/test/overlay-trigger-click.test.ts
@@ -23,7 +23,7 @@ import '@spectrum-web-components/tooltip/sp-tooltip.js';
 
 import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
 import {
     OverlayTrigger,
     TriggerInteractionsV1,
@@ -46,7 +46,7 @@ describe('Overlay Trigger - Click', () => {
                     @sp-closed=${() => closedSpy()}
                 >
                     <sp-action-button slot="trigger">
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                        <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                     </sp-action-button>
                     <sp-popover slot="click-content" tip></sp-popover>
                 </overlay-trigger>
@@ -95,7 +95,7 @@ describe('Overlay Trigger - Click', () => {
                                 slot="trigger"
                                 style="margin: 50vh 0 100vh;"
                             >
-                                <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                                <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                             </sp-action-button>
                             <sp-popover slot="click-content" tip>
                                 Content
@@ -145,7 +145,7 @@ describe('Overlay Trigger - Click', () => {
                 @sp-closed=${() => closedSpy()}
             >
                 <sp-action-button slot="trigger">
-                    <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                    <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                 </sp-action-button>
                 <sp-popover slot="click-content" tip></sp-popover>
             </overlay-trigger>
diff --git a/packages/overlay/test/overlay-trigger-hover-click.test.ts b/packages/overlay/test/overlay-trigger-hover-click.test.ts
index b9678c09263..b6b0c56bda5 100644
--- a/packages/overlay/test/overlay-trigger-hover-click.test.ts
+++ b/packages/overlay/test/overlay-trigger-hover-click.test.ts
@@ -20,7 +20,7 @@ import {
 import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
 import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import { OverlayTrigger } from '@spectrum-web-components/overlay/src/OverlayTrigger';
diff --git a/packages/overlay/test/overlay-trigger-hover.test.ts b/packages/overlay/test/overlay-trigger-hover.test.ts
index 4e0f4a395cc..f76289ce3bd 100644
--- a/packages/overlay/test/overlay-trigger-hover.test.ts
+++ b/packages/overlay/test/overlay-trigger-hover.test.ts
@@ -23,7 +23,7 @@ import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
 import { OverlayTrigger } from '@spectrum-web-components/overlay';
 import { spy } from 'sinon';
 import { ActionButton } from '@spectrum-web-components/action-button';
@@ -65,7 +65,7 @@ describe('Overlay Trigger - Hover', () => {
                     @sp-closed=${() => closedSpy()}
                 >
                     <sp-action-button slot="trigger">
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                        <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                     </sp-action-button>
                     <sp-popover slot="hover-content" tip></sp-popover>
                 </overlay-trigger>
@@ -95,7 +95,7 @@ describe('Overlay Trigger - Hover', () => {
                 (() => html`
                     <overlay-trigger placement="right-start">
                         <sp-action-button slot="trigger">
-                            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                         </sp-action-button>
                         <sp-tooltip slot="hover-content" tip>
                             Magnify
@@ -205,7 +205,7 @@ describe('Overlay Trigger - Hover', () => {
             (() => html`
                 <overlay-trigger placement="right-start">
                     <sp-action-button slot="trigger">
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                        <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                     </sp-action-button>
                     <sp-popover slot="hover-content" tip></sp-popover>
                 </overlay-trigger>
@@ -238,7 +238,7 @@ describe('Overlay Trigger - Hover', () => {
             (() => html`
                 <overlay-trigger placement="right-start">
                     <sp-action-button slot="trigger">
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                        <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                     </sp-action-button>
                     <sp-popover slot="hover-content" tip></sp-popover>
                     <sp-popover slot="longpress-content" tip></sp-popover>
@@ -275,7 +275,7 @@ describe('Overlay Trigger - Hover', () => {
             (() => html`
                 <overlay-trigger placement="right-start" type="modal">
                     <sp-action-button slot="trigger">
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                        <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                     </sp-action-button>
                     <sp-popover slot="hover-content" tip></sp-popover>
                 </overlay-trigger>
diff --git a/packages/overlay/test/overlay-trigger-longpress.test.ts b/packages/overlay/test/overlay-trigger-longpress.test.ts
index e91aae93acc..4de99850871 100644
--- a/packages/overlay/test/overlay-trigger-longpress.test.ts
+++ b/packages/overlay/test/overlay-trigger-longpress.test.ts
@@ -22,7 +22,7 @@ import { ActionButton } from '@spectrum-web-components/action-button';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
 import type { Popover } from '@spectrum-web-components/popover';
 import type { Tooltip } from '@spectrum-web-components/tooltip';
 import '@spectrum-web-components/popover/sp-popover.js';
@@ -290,7 +290,7 @@ describe('Overlay Trigger - Longpress', () => {
                     @sp-closed=${() => closedSpy()}
                 >
                     <sp-action-button slot="trigger" hold-affordance>
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                        <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                     </sp-action-button>
                     <sp-popover slot="longpress-content" tip></sp-popover>
                 </overlay-trigger>
@@ -323,13 +323,13 @@ describe('Overlay Trigger - Longpress', () => {
                         style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-spacing-200)) / 2);"
                     >
                         <sp-action-button>
-                            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                         </sp-action-button>
                         <sp-action-button>
-                            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                         </sp-action-button>
                         <sp-action-button>
-                            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                         </sp-action-button>
                     </sp-action-group>
                 </sp-popover>
@@ -400,13 +400,13 @@ describe('Overlay Trigger - Longpress', () => {
                         style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-spacing-200)) / 2);"
                     >
                         <sp-action-button>
-                            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                         </sp-action-button>
                         <sp-action-button>
-                            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                         </sp-action-button>
                         <sp-action-button>
-                            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                         </sp-action-button>
                     </sp-action-group>
                 </sp-popover>
@@ -469,7 +469,7 @@ describe('Overlay Trigger - Longpress', () => {
                             style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-spacing-200)) / 2);"
                         >
                             <sp-action-button>
-                                <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                                <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                             </sp-action-button>
                         </sp-action-group>
                     </sp-popover>
@@ -485,7 +485,7 @@ describe('Overlay Trigger - Longpress', () => {
                             style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-spacing-200)) / 2);"
                         >
                             <sp-action-button>
-                                <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                                <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                             </sp-action-button>
                         </sp-action-group>
                     </sp-popover>
@@ -522,13 +522,13 @@ describe('Overlay Trigger - Longpress', () => {
                             style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-spacing-200)) / 2);"
                         >
                             <sp-action-button>
-                                <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                                <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                             </sp-action-button>
                             <sp-action-button>
-                                <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                                <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                             </sp-action-button>
                             <sp-action-button>
-                                <sp-icon-magnify slot="icon"></sp-icon-magnify>
+                                <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
                             </sp-action-button>
                         </sp-action-group>
                     </sp-popover>
diff --git a/packages/overlay/test/overlay-v1.test.ts b/packages/overlay/test/overlay-v1.test.ts
index 27a870f7b96..0d46ca88cff 100644
--- a/packages/overlay/test/overlay-v1.test.ts
+++ b/packages/overlay/test/overlay-v1.test.ts
@@ -53,7 +53,7 @@ async function styledFixture<T extends Element>(
     story: TemplateResult
 ): Promise<T> {
     const test = await fixture<Theme>(html`
-        <sp-theme system="spectrum" scale="medium" color="dark">
+        <sp-theme system="spectrum" scale="medium" style="color-scheme: dark;">
             ${story}
         </sp-theme>
     `);
diff --git a/packages/overlay/test/overlay.test.ts b/packages/overlay/test/overlay.test.ts
index 11c13b2ece9..01e070d8beb 100644
--- a/packages/overlay/test/overlay.test.ts
+++ b/packages/overlay/test/overlay.test.ts
@@ -58,7 +58,7 @@ async function styledFixture<T extends Element>(
     story: TemplateResult
 ): Promise<T> {
     const test = await fixture<Theme>(html`
-        <sp-theme system="spectrum" scale="medium" color="dark">
+        <sp-theme system="spectrum" scale="medium" style="color-scheme: dark;">
             ${story}
         </sp-theme>
     `);
diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json
index 5ce8d897175..9449096643d 100644
--- a/packages/picker-button/package.json
+++ b/packages/picker-button/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/picker-button-overrides.css.js": "./src/picker-button-overrides.css.js",
         "./src/picker-button.css.js": "./src/picker-button.css.js",
         "./sp-picker-button.js": {
             "development": "./sp-picker-button.dev.js",
diff --git a/packages/picker-button/src/PickerButton.ts b/packages/picker-button/src/PickerButton.ts
index ce850c759ae..800f51fbf0f 100644
--- a/packages/picker-button/src/PickerButton.ts
+++ b/packages/picker-button/src/PickerButton.ts
@@ -48,23 +48,25 @@ export class PickerButton extends SizedMixin(
     @property({ reflect: true })
     position: 'left' | 'right' = 'right';
 
+    @property({ type: Boolean, reflect: true })
+    rounded = false;
+
     protected get hasText(): boolean {
         return this.slotContentIsPresent;
     }
 
     protected override render(): TemplateResult {
-        const rootClasses = {
-            root: true,
-            uiicononly: !this.hasText,
-            textuiicon: this.hasText,
-        };
         return html`
-            <div class=${classMap(rootClasses)}>
-                <div class="spectrum-PickerButton-fill">
-                    <span
-                        class="spectrum-PickerButton-label is-placeholder"
-                        ?hidden=${!this.hasText}
-                    >
+            <div
+                class=${classMap({
+                    root: true,
+                    uiicononly: !this.hasText,
+                    textuiicon: this.hasText,
+                    rounded: this.rounded,
+                })}
+            >
+                <div class="fill">
+                    <span class="label is-placeholder" ?hidden=${!this.hasText}>
                         <slot name="label"></slot>
                     </span>
                     <slot name="icon">
diff --git a/packages/picker-button/src/picker-button-overrides.css b/packages/picker-button/src/picker-button-overrides.css
deleted file mode 100644
index c71c79cfa81..00000000000
--- a/packages/picker-button/src/picker-button-overrides.css
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-.root {
-    --spectrum-picker-button-background-color: var(--system-picker-button-background-color);
-    --spectrum-picker-button-background-color-hover: var(--system-picker-button-background-color-hover);
-    --spectrum-picker-button-background-color-down: var(--system-picker-button-background-color-down);
-    --spectrum-picker-button-background-color-key-focus: var(--system-picker-button-background-color-key-focus);
-    --spectrum-picker-button-border-color: var(--system-picker-button-border-color);
-    --spectrum-picker-button-border-radius: var(--system-picker-button-border-radius);
-    --spectrum-picker-button-border-radius-rounded-sided: var(--system-picker-button-border-radius-rounded-sided);
-    --spectrum-picker-button-border-radius-sided: var(--system-picker-button-border-radius-sided);
-    --spectrum-picker-button-border-width: var(--system-picker-button-border-width);
-    --spectrum-picker-button-padding: var(--system-picker-button-padding);
-}
diff --git a/packages/picker-button/src/picker-button.css b/packages/picker-button/src/picker-button.css
index eef2d1abff2..5c9343a1715 100644
--- a/packages/picker-button/src/picker-button.css
+++ b/packages/picker-button/src/picker-button.css
@@ -1,8 +1,9 @@
 /**
- * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * 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
@@ -10,13 +11,223 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-picker-button.css");
-@import url("./picker-button-overrides.css");
+:host {
+	/* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */
+	--spectrum-picker-button-padding: 4px;
+
+	--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-label-padding: var(--spectrum-text-to-visual-50);
+	--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100);
+
+	--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);
+	--spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+	--spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default);
+	--spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down);
+	--spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+	--spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-picker-button-font-style: var(--spectrum-default-font-style);
+	--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-color: inherit;
+	--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
+	--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-border-radius-rounded: var(--spectrum-corner-radius-200);
+
+	--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-background-animation-duration: var(--spectrum-animation-duration-100);
+}
+
+:host(: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));
+}
+
+:host(:active),
+:host([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));
+}
+
+:host(:focus),
+:host([focused]),
+:host(:focus-visible),
+:host([keyboard-focused]) {
+    --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));
+}
+
+:host([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));
+    --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
+    --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color));
+
+    --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color));
+    --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color));
+    --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color));
+
+    --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color));
+    --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
+    --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
+}
+
+:host([quiet]) {
+    --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent);
+    --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent);
+    --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent);
+    --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent);
+
+    --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent);
+}
+
+:host([size="s"]) {
+    --spectrum-picker-button-height: var(--spectrum-component-height-75);
+    --spectrum-picker-button-width: var(--spectrum-component-height-75);
+    --spectrum-picker-button-label-padding: var(--spectrum-spacing-75);
+    --spectrum-picker-button-font-size: var(--spectrum-font-size-75);
+    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
+}
+
+:host([size="l"]) {
+    --spectrum-picker-button-height: var(--spectrum-component-height-200);
+    --spectrum-picker-button-width: var(--spectrum-component-height-200);
+    --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200);
+    --spectrum-picker-button-font-size: var(--spectrum-font-size-200);
+    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
+}
+
+:host([size="xl"]) {
+    --spectrum-picker-button-height: var(--spectrum-component-height-300);
+    --spectrum-picker-button-width: var(--spectrum-component-height-300);
+    --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300);
+    --spectrum-picker-button-font-size: var(--spectrum-font-size-300);
+    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
+}
 
 :host {
-    display: inline-flex;
+	border-style: none;
+	background-color: transparent;
+	block-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width));
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding));
+}
+
+.uiicononly {
+    inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height));
+}
+
+.label {
+	/* Be the biggest, but also shrink! */
+	flex: 1 1 auto;
+	color: var(--mod-picker-button-font-color, var(--spectrum-picker-button-font-color));
+
+	white-space: nowrap;
+	overflow: hidden;
+	padding-block-end: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
+	padding-block-start: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
+
+	font-family: var(--mod-picker-button-font-family, var(--spectrum-picker-button-font-family));
+	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));
+}
+
+.uiicononly .label {
+    display: none;
+}
+
+.fill {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	block-size: 100%;
+	inline-size: 100%;
+	gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap));
+
+	background-color: var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color));
+	border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color));
+	border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width));
+	border-style: solid;
+	padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)));
+
+	border-end-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
+	border-end-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
+	border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
+	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;
+}
+
+:host([position="right"]) .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));
+}
+
+:host([position="right"][rounded]) .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));
+}
+
+:host([position="left"]) .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));
+}
+
+:host([position="left"][rounded]) .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));
+}
+
+:host([rounded]) .fill {
+    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));
 }
 
-.root {
-    display: flex;
+.uiicononly .fill {
+    padding: 0;
+}
+
+.textuiicon .fill {
+    inline-size: auto;
+}
+
+::slotted([slot="icon"]) {
+	/* don't be small, ever */
+	flex-shrink: 0;
+	color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
+}
+
+
+@media (forced-colors: active) {
+    :host([quiet]) .fill {
+        forced-color-adjust: none;
+    }
+
+    ::slotted([slot="icon"]) {
+        /* Should match foreground color of the Textfield. */
+        color: CanvasText;
+    }
 }
diff --git a/packages/picker-button/src/spectrum-picker-button-modifier.css b/packages/picker-button/src/spectrum-picker-button-modifier.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/picker-button/src/spectrum-picker-button-modifier.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/picker-button/src/spectrum-picker-button.css b/packages/picker-button/src/spectrum-picker-button.css
deleted file mode 100644
index 4571d552e23..00000000000
--- a/packages/picker-button/src/spectrum-picker-button.css
+++ /dev/null
@@ -1,194 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-.root {
-    --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-label-padding: var(--spectrum-text-to-visual-50);
-    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100);
-    --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);
-    --spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default);
-    --spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down);
-    --spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-picker-button-font-style: var(--spectrum-default-font-style);
-    --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);
-}
-
-@media (hover: hover) {
-    .root: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));
-    }
-}
-
-:host([open]) .root,
-:host(:is(:active, [active])) .root {
-    --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));
-}
-
-:host([focused]) .root,
-.root.is-keyboardFocused,
-.root:focus,
-.root:focus-visible {
-    --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));
-}
-
-:host([disabled]) .root {
-    --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));
-    --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
-    --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color));
-    --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color));
-    --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color));
-    --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color));
-    --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color));
-    --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
-    --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
-}
-
-:host([quiet]) .root {
-    --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent);
-    --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent);
-    --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent);
-    --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent);
-    --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent);
-}
-
-:host([size="s"]) .root {
-    --spectrum-picker-button-height: var(--spectrum-component-height-75);
-    --spectrum-picker-button-width: var(--spectrum-component-height-75);
-    --spectrum-picker-button-label-padding: var(--spectrum-spacing-75);
-    --spectrum-picker-button-font-size: var(--spectrum-font-size-75);
-    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
-}
-
-:host([size="l"]) .root {
-    --spectrum-picker-button-height: var(--spectrum-component-height-200);
-    --spectrum-picker-button-width: var(--spectrum-component-height-200);
-    --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200);
-    --spectrum-picker-button-font-size: var(--spectrum-font-size-200);
-    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
-}
-
-:host([size="xl"]) .root {
-    --spectrum-picker-button-height: var(--spectrum-component-height-300);
-    --spectrum-picker-button-width: var(--spectrum-component-height-300);
-    --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300);
-    --spectrum-picker-button-font-size: var(--spectrum-font-size-300);
-    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
-}
-
-.root {
-    background-color: initial;
-    block-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width));
-    box-sizing: border-box;
-    padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding));
-    border-style: none;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-.root.uiicononly {
-    inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height));
-}
-
-.spectrum-PickerButton-label {
-    color: var(--mod-picker-button-font-color, var(--spectrum-picker-button-font-color));
-    white-space: nowrap;
-    font-family: var(--mod-picker-button-font-family, var(--spectrum-picker-button-font-family));
-    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));
-    flex: auto;
-    padding-block-start: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
-    padding-block-end: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
-    overflow: hidden;
-}
-
-.uiicononly .spectrum-PickerButton-label {
-    display: none;
-}
-
-.spectrum-PickerButton-fill {
-    box-sizing: border-box;
-    block-size: 100%;
-    inline-size: 100%;
-    justify-content: center;
-    align-items: center;
-    gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap));
-    background-color: var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color));
-    border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color));
-    border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width));
-    padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)));
-    transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
-    border-style: solid;
-    border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
-    border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
-    border-end-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
-    border-end-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
-    display: flex;
-}
-
-:host([position="right"]) .spectrum-PickerButton-fill {
-    border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-    border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-}
-
-:host([position="right"][rounded]) .spectrum-PickerButton-fill {
-    border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-    border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-}
-
-:host([position="left"]) .spectrum-PickerButton-fill {
-    border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-    border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-}
-
-:host([position="left"][rounded]) .spectrum-PickerButton-fill {
-    border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-    border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-}
-
-:host([rounded]) .spectrum-PickerButton-fill {
-    border-start-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-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));
-}
-
-.uiicononly .spectrum-PickerButton-fill {
-    padding: 0;
-}
-
-.textuiicon .spectrum-PickerButton-fill {
-    inline-size: auto;
-}
-
-.spectrum-PickerButton-icon {
-    color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
-    flex-shrink: 0;
-}
diff --git a/packages/picker/package.json b/packages/picker/package.json
index e45dcdadd4e..46a02faa3a5 100644
--- a/packages/picker/package.json
+++ b/packages/picker/package.json
@@ -45,7 +45,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/picker-overrides.css.js": "./src/picker-overrides.css.js",
         "./src/picker.css.js": "./src/picker.css.js",
         "./src/strategies.js": {
             "development": "./src/strategies.dev.js",
diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index 9c48aaf6452..7ce64d031e0 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -38,7 +38,7 @@ import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevr
 
 import type { Tooltip } from '@spectrum-web-components/tooltip';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 import '@spectrum-web-components/menu/sp-menu.js';
 import type {
     Menu,
@@ -494,9 +494,9 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
                       `}
                 ${this.invalid && !this.pending
                     ? html`
-                          <sp-icon-alert
+                          <sp-icon-alert-triangle
                               class="validation-icon"
-                          ></sp-icon-alert>
+                          ></sp-icon-alert-triangle>
                       `
                     : nothing}
                 ${this.pendingStateController.renderPendingState()}
diff --git a/packages/picker/src/picker-overrides.css b/packages/picker/src/picker-overrides.css
deleted file mode 100644
index 9ab103531b1..00000000000
--- a/packages/picker/src/picker-overrides.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-picker-background-color-default: var(--system-picker-background-color-default);
-    --spectrum-picker-background-color-default-open: var(--system-picker-background-color-default-open);
-    --spectrum-picker-background-color-hover: var(--system-picker-background-color-hover);
-    --spectrum-picker-background-color-hover-open: var(--system-picker-background-color-hover-open);
-    --spectrum-picker-background-color-active: var(--system-picker-background-color-active);
-    --spectrum-picker-background-color-key-focus: var(--system-picker-background-color-key-focus);
-    --spectrum-picker-border-color-default: var(--system-picker-border-color-default);
-    --spectrum-picker-border-color-default-open: var(--system-picker-border-color-default-open);
-    --spectrum-picker-border-color-hover: var(--system-picker-border-color-hover);
-    --spectrum-picker-border-color-hover-open: var(--system-picker-border-color-hover-open);
-    --spectrum-picker-border-color-active: var(--system-picker-border-color-active);
-    --spectrum-picker-border-color-key-focus: var(--system-picker-border-color-key-focus);
-    --spectrum-picker-border-color-disabled: var(--system-picker-border-color-disabled);
-    --spectrum-picker-border-width: var(--system-picker-border-width);
-}
diff --git a/packages/picker/src/picker.css b/packages/picker/src/picker.css
index f0fcef7b4c5..0f128d190c2 100644
--- a/packages/picker/src/picker.css
+++ b/packages/picker/src/picker.css
@@ -10,45 +10,499 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-picker.css");
-@import url("./picker-overrides.css");
+#button {
+    cursor: pointer;
+    user-select: none;
+    font-family: var(--spectrum-sans-font-family-stack);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: var(--spectrum-line-height-100);
+    text-transform: none;
+    vertical-align: top;
+    appearance: auto;
+    transition:
+        background var(--spectrum-animation-duration-100) ease-out,
+        border-color var(--spectrum-animation-duration-100) ease-out,
+        color var(--spectrum-animation-duration-100) ease-out,
+        box-shadow var(--spectrum-animation-duration-100) ease-out;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+    overflow: visible;
+}
+
+#button::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
 
+#button:focus {
+    outline: none;
+}
+
+/* Base variables */
 :host {
-    display: inline-flex;
+    --spectrum-picker-font-size: var(--spectrum-font-size-100);
+    --spectrum-picker-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style);
+    --spectrum-picker-line-height: var(--spectrum-line-height-100);
+    --spectrum-picker-block-size: var(--spectrum-component-height-100);
+    --spectrum-picker-inline-size: var(--spectrum-field-width);
+    --spectrum-picker-border-radius: var(--spectrum-corner-radius-100);
+    --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
+    --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+    --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100);
+    --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet);
+    --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
+    --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100);
+    --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium);
+    --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium);
+    --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
+    --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium);
+    --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
+    --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
+    --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-picker-animation-duration: var(--spectrum-animation-duration-100);
+    --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus);
+    --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
+    --spectrum-picker-font-color-active: var(--spectrum-neutral-content-color-down);
+    --spectrum-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-picker-icon-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus);
+    --spectrum-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
+    --spectrum-picker-icon-color-active: var(--spectrum-neutral-content-color-down);
+    --spectrum-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-picker-border-color-error-default: var(--spectrum-negative-border-color-default);
+    --spectrum-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus);
+    --spectrum-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover);
+    --spectrum-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover);
+    --spectrum-picker-border-color-error-active: var(--spectrum-negative-border-color-down);
+    --spectrum-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus);
+    --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color);
+    --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color);
+    --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color);
+    --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color);
+    --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);
+}
+
+:host([size="s"]) {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
+
+#button.is-keyboardFocused,
+#button:focus-visible {
+    --highcontrast-picker-border-color-hover: ButtonText;
+}
+
+#button .label,
+#button:after {
+    forced-color-adjust: none;
+}
+
+#button {
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--spectrum-picker-block-size));
+    inline-size: var(--spectrum-picker-inline-size);
+    block-size: var(--spectrum-picker-block-size);
+    border-width: var(--spectrum-picker-border-width);
+    border-radius: var(--spectrum-picker-border-radius);
+    transition:
+        background-color var(--spectrum-picker-animation-duration),
+        box-shadow var(--spectrum-picker-animation-duration),
+        border-color var(--spectrum-picker-animation-duration) ease-in-out;
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-default));
+    background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-default));
+    border-style: solid;
+    border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-default));
+    margin-block-start: var(--spectrum-picker-spacing-label-to-picker);
+    padding-block: 0;
+    padding-inline-start: var(--spectrum-picker-spacing-edge-to-text);
+    padding-inline-end: var(--spectrum-picker-spacing-edge-to-disclosure-icon);
+    display: flex;
+}
+
+#button:after {
+    pointer-events: none;
+    content: "";
+    block-size: calc(100% + var(--spectrum-picker-focus-indicator-gap) * 2 + var(--spectrum-picker-border-width) * 2);
+    inline-size: calc(100% + var(--spectrum-picker-focus-indicator-gap) * 2 + var(--spectrum-picker-border-width) * 2);
+    border-style: solid;
+    border-width: var(--spectrum-picker-focus-indicator-thickness);
+    border-radius: calc(var(--spectrum-picker-border-radius) + var(--spectrum-picker-focus-indicator-gap) + var(--spectrum-picker-border-width));
+    border-color: var(--highcontrast-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color));
+    margin-block-start: calc((var(--spectrum-picker-focus-indicator-gap) + var(--spectrum-picker-focus-indicator-thickness) + var(--spectrum-picker-border-width)) * -1);
+    margin-inline-start: calc((var(--spectrum-picker-focus-indicator-gap) + var(--spectrum-picker-focus-indicator-thickness) + var(--spectrum-picker-border-width)) * -1);
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0;
+}
+
+#button:active {
+    background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-active));
+    border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-active));
+}
+
+#button:active:after {
+    border-color: #0000;
+}
+
+#button.placeholder:active .label {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-active));
+}
+
+#button.is-keyboardFocused,
+#button:focus-visible {
+    background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-key-focus));
+    border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-key-focus));
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-key-focus));
+    outline: none;
+}
+
+#button.is-keyboardFocused:after,
+#button:focus-visible:after {
+    border-color: var(--highcontrast-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color));
+}
+
+#button.is-keyboardFocused .label.placeholder,
+#button:focus-visible .label.placeholder {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-key-focus));
+}
+
+#button.is-keyboardFocused .picker,
+#button:focus-visible .picker {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-key-focus));
+}
+
+:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-default-open));
+    background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-default-open));
+    border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-default-open));
+}
+
+:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .picker {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-default-open));
+}
+
+:host([invalid]) #button:not(:disabled, .is-disabled) {
+    border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-error-default));
+}
+
+:host([invalid]) #button:not(:disabled, .is-disabled) .validation-icon {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-error));
+}
+
+:host([invalid]) #button:not(:disabled, .is-disabled):active {
+    border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-error-active));
+}
+
+:host([invalid][open]) #button:not(:disabled, .is-disabled) {
+    border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-error-default-open));
+}
+
+:host([invalid]) #button.is-keyboardFocused:not(:disabled, .is-disabled),
+:host([invalid]) #button:not(:disabled, .is-disabled):focus-visible {
+    border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-error-key-focus));
+}
+
+:host([pending]) #button .picker {
+    color: var(--highcontrast-picker-content-color-disabled, var(--spectrum-picker-icon-color-disabled));
+}
+
+:host([invalid]) #button .label,
+:host([pending]) #button .label {
+    margin-inline-end: var(--spectrum-picker-spacing-text-to-icon-inline-end, var(--spectrum-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end)));
+}
+
+.icon {
+    flex-shrink: 0;
+    margin-inline-end: var(--spectrum-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
+}
+
+.label {
+    white-space: nowrap;
+    font-size: var(--spectrum-picker-font-size);
+    line-height: var(--spectrum-picker-line-height);
+    font-weight: var(--spectrum-picker-font-weight);
+    text-overflow: ellipsis;
+    text-align: start;
+    flex: auto;
+    padding-block-start: var(--spectrum-picker-spacing-top-to-text);
+    padding-block-end: calc(var(--spectrum-picker-spacing-bottom-to-text) - var(--spectrum-picker-border-width));
+    overflow: hidden;
+}
+
+.label.placeholder {
+    font-weight: var(--spectrum-picker-font-weight);
+    font-style: var(--spectrum-picker-placeholder-font-style);
+    transition: color var(--spectrum-picker-animation-duration) ease-in-out;
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-default));
+}
+
+.label.placeholder:active {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-active));
+}
+
+.picker {
+    vertical-align: top;
+    transition: color var(--spectrum-picker-animation-duration) ease-out;
+    margin-inline-start: var(--spectrum-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
+    margin-block: var(--spectrum-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon));
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-default));
+    flex-shrink: 0;
+    display: inline-block;
+    position: relative;
+}
+
+.picker:active {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-active));
+}
+
+.validation-icon {
+    flex-shrink: 0;
+    margin-block-start: calc(var(--spectrum-picker-spacing-top-to-alert-icon) - var(--spectrum-picker-border-width));
+    margin-block-end: calc(var(--spectrum-picker-spacing-top-to-alert-icon) - var(--spectrum-picker-border-width));
+}
+
+#button .progress-circle {
+    margin-block-start: calc(var(--spectrum-picker-spacing-top-to-progress-circle) - var(--spectrum-picker-border-width));
+    margin-block-end: calc(var(--spectrum-picker-spacing-top-to-progress-circle) - var(--spectrum-picker-border-width));
+}
+
+.label ~ .picker {
+    margin-inline-start: var(--spectrum-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
+}
+
+:host([quiet]) #button {
+    inline-size: auto;
+    min-inline-size: 0;
+    padding-inline: var(--spectrum-picker-spacing-edge-to-text-quiet, var(--spectrum-picker-spacing-edge-to-text-quiet));
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-default));
+    background-color: initial;
+    background-color: var(--highcontrast-picker-background-color, transparent);
+    border: none;
+    border-radius: 0;
+    margin-block-start: calc(var(--spectrum-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px);
+}
+
+:host([quiet]) #button.label-inline {
+    margin-block-start: 0;
+}
+
+:host([quiet]) #button .picker {
+    margin-inline-end: var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet));
+}
+
+:host([quiet]) #button:after {
+    block-size: auto;
+    inline-size: auto;
+    border: none;
+}
+
+#button:hover .picker {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-hover));
+}
+
+:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-hover-open));
+    background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-hover-open));
+    border-color: var(--highcontrast-picker-border-color-hover, var(--spectrum-picker-border-color-hover-open));
+}
+
+:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .picker {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-hover-open));
+}
+
+:host([invalid]) #button:not(:disabled, .is-disabled):hover {
+    border-color: var(--highcontrast-picker-border-color-hover, var(--spectrum-picker-border-color-error-hover));
+}
+
+:host([invalid][open]) #button:not(:disabled, .is-disabled):hover {
+    border-color: var(--highcontrast-picker-border-color-hover, var(--spectrum-picker-border-color-error-hover-open));
+}
+
+.label.placeholder:hover {
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-hover));
+}
+
+:host([quiet]) #button:hover {
+    background-color: initial;
+    background-color: var(--highcontrast-picker-background-color, transparent);
+}
+
+:host([quiet]) #button.is-keyboardFocused,
+:host([quiet]) #button:focus-visible {
+    background-color: initial;
+    background-color: var(--highcontrast-picker-background-color, transparent);
+}
+
+:host([quiet]) #button.is-keyboardFocused:after,
+:host([quiet]) #button:focus-visible:after {
+    box-shadow: 0 var(--spectrum-picker-focus-indicator-thickness) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color));
+    margin: calc((var(--spectrum-picker-focus-indicator-gap) + var(--spectrum-picker-border-width)) * -1) 0;
+    border: none;
+    border-radius: 0;
+}
+
+:host([quiet][open]) #button,
+:host([quiet][disabled]) #button#button,
+:host([quiet]) #button#button:disabled,
+:host([quiet]) #button:active {
+    background-color: initial;
+    background-color: var(--highcontrast-picker-background-color, transparent);
+}
+
+.label-inline {
     vertical-align: top;
+    display: inline-flex;
+}
+
+:host([disabled]) #button,
+#button:disabled {
+    cursor: default;
+    background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-disabled));
+    border-color: var(--highcontrast-picker-border-color-disabled, var(--spectrum-picker-border-color-disabled));
+    color: var(--highcontrast-picker-content-color-disabled, var(--spectrum-picker-font-color-disabled));
+}
+
+:host([disabled]) #button .icon,
+:host([disabled]) #button .picker,
+:host([disabled]) #button .validation-icon,
+#button:disabled .icon,
+#button:disabled .picker,
+#button:disabled .validation-icon {
+    color: var(--highcontrast-picker-content-color-disabled, var(--spectrum-picker-icon-color-disabled));
+}
+
+:host([disabled]) #button .label.placeholder,
+#button:disabled .label.placeholder {
+    color: var(--highcontrast-picker-content-color-disabled, var(--spectrum-picker-font-color-disabled));
+}
+
+/* base variables */
+:host {
+    /* layout */
+    --spectrum-picker-border-width: var(--spectrum-border-width-100);
+
+    /* typography */
+
+    /* spacing */
+
+    /* animation */
+
+    /* colors */
+    --spectrum-picker-background-color-default: var(--spectrum-gray-75);
+    --spectrum-picker-background-color-default-open: var(--spectrum-gray-200);
+    --spectrum-picker-background-color-hover: var(--spectrum-gray-100);
+    --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300);
+    --spectrum-picker-background-color-active: var(--spectrum-gray-300);
+    --spectrum-picker-background-color-key-focus: var(--spectrum-gray-75);
+    --spectrum-picker-border-color-default: var(--spectrum-gray-500);
+    --spectrum-picker-border-color-default-open: var(--spectrum-gray-600);
+    --spectrum-picker-border-color-hover: var(--spectrum-gray-600);
+    --spectrum-picker-border-color-hover-open: var(--spectrum-gray-700);
+    --spectrum-picker-border-color-active: var(--spectrum-gray-700);
+    --spectrum-picker-border-color-key-focus: var(--spectrum-gray-800);
+    --spectrum-picker-border-color-disabled: var(--spectrum-disabled-border-color);
+
+    /* text Colors */
+
+    /* icon Colors */
+
+    /* error states */
+
+    /* disabled states */
+
+    /* focus indicator */
 
-    /**
-     * .spectrum-Picker
-     * Move width management to :host
-     **/
+    /* layout */
+    display: inline-flex;
+    vertical-align: top;
     max-inline-size: 100%;
-    inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size));
-    min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size)));
+    inline-size: var(--spectrum-picker-inline-size);
+    min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--spectrum-picker-block-size));
 }
 
+/* size variants */
+:host([size="s"]) {
+}
+
+/* states */
 :host([quiet]) {
-    width: auto;
-    min-width: 0;
+    inline-size: auto;
+    min-inline-size: 0;
 }
 
 :host([disabled]) {
     pointer-events: none;
 }
 
+:host([readonly]) #button {
+    user-select: inherit;
+}
+
+/* button base styles */
 #button {
-    width: 100%;
-    min-width: 100%;
-    max-width: 100%;
+    cursor: pointer;
+    user-select: none;
+    font-family: var(--spectrum-sans-font-family-stack);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: var(--spectrum-line-height-100);
+    text-transform: none;
+    vertical-align: top;
+
+    /* required for proper button styling in Safari */
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-appearance: button;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    text-decoration: none;
+    position: relative;
+    overflow: visible;
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--spectrum-picker-block-size));
+    inline-size: var(--spectrum-picker-inline-size);
+    block-size: var(--spectrum-picker-block-size);
+    border-width: var(--spectrum-picker-border-width);
+    border-radius: var(--spectrum-picker-border-radius);
+    transition:
+        background var(--spectrum-animation-duration-100) ease-out,
+        border-color var(--spectrum-animation-duration-100) ease-out,
+        color var(--spectrum-animation-duration-100) ease-out,
+        box-shadow var(--spectrum-animation-duration-100) ease-out,
+        background-color var(--spectrum-picker-animation-duration);
+    color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-default));
+    background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-default));
+    border-style: solid;
+    border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-default));
+    margin-block-start: var(--spectrum-picker-spacing-label-to-picker);
+    padding-block: 0;
+    padding-inline-start: var(--spectrum-picker-spacing-edge-to-text);
+    padding-inline-end: var(--spectrum-picker-spacing-edge-to-disclosure-icon);
+    display: flex;
 }
 
 #icon:not([hidden]) {
     display: inline-flex;
 }
 
-:host([readonly]) #button {
-    user-select: inherit;
-}
-
 .picker,
 .validation-icon {
     flex-shrink: 0;
@@ -66,12 +520,12 @@ sp-menu {
     display: none;
 }
 
-/**
+/* *
  * The accessibility team would prefer that it be possible to override the :focus-visible
  * heuristics in _some_ cases, like when clicking an `sp-field-label`...
  *
  * From Picker
- **/
+ * */
 :host([focused]:not([quiet])) #button #label.placeholder {
     /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-label.is-placeholder */
     color: var(--spectrum-picker-placeholder-text-color-key-focus, var(--spectrum-alias-placeholder-text-color-hover));
@@ -87,42 +541,31 @@ sp-menu {
 }
 
 .visually-hidden {
-    border: 0;
     clip: rect(0, 0, 0, 0);
     clip-path: inset(50%);
-    height: 1px;
-    margin: 0 -1px -1px 0;
+    block-size: 1px;
     overflow: hidden;
-    padding: 0;
     position: absolute;
-    width: 1px;
     white-space: nowrap;
+    inline-size: 1px;
 }
 
 sp-overlay:not(:defined) {
     display: none;
 }
 
-/* remove-focus-ring-safari-hack is a custom css class that we are using to
-unset the focus ring styles in safari. This is a temporary fix because safari
-sets the :focus-visible pseudo class on the parent element when the dialog is closed.
-*/
 #button.remove-focus-ring-safari-hack:focus-visible {
-    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default)));
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default)));
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
+    outline: none;
 }
 
 #button.remove-focus-ring-safari-hack:after {
-    border: none;
+    display: none;
 }
 
 #button.remove-focus-ring-safari-hack:focus-visible:after {
-    box-shadow: none;
+    display: block;
 }
 
 #button.remove-focus-ring-safari-hack:active {
-    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default)));
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default)));
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
+    outline: none;
 }
diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css
deleted file mode 100644
index d667cb6397e..00000000000
--- a/packages/picker/src/spectrum-picker.css
+++ /dev/null
@@ -1,454 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-#button {
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
-    text-transform: none;
-    vertical-align: top;
-    -webkit-appearance: button;
-    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;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    display: inline-flex;
-    position: relative;
-    overflow: visible;
-}
-
-#button::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-}
-
-#button:focus {
-    outline: none;
-}
-
-:host {
-    --spectrum-picker-font-size: var(--spectrum-font-size-100);
-    --spectrum-picker-font-weight: var(--spectrum-regular-font-weight);
-    --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style);
-    --spectrum-picker-line-height: var(--spectrum-line-height-100);
-    --spectrum-picker-block-size: var(--spectrum-component-height-100);
-    --spectrum-picker-inline-size: var(--spectrum-field-width);
-    --spectrum-picker-border-radius: var(--spectrum-corner-radius-100);
-    --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
-    --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-    --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100);
-    --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet);
-    --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
-    --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100);
-    --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium);
-    --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium);
-    --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
-    --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium);
-    --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
-    --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
-    --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-picker-animation-duration: var(--spectrum-animation-duration-100);
-    --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus);
-    --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
-    --spectrum-picker-font-color-active: var(--spectrum-neutral-content-color-down);
-    --spectrum-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-picker-icon-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus);
-    --spectrum-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
-    --spectrum-picker-icon-color-active: var(--spectrum-neutral-content-color-down);
-    --spectrum-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-picker-border-color-error-default: var(--spectrum-negative-border-color-default);
-    --spectrum-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus);
-    --spectrum-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover);
-    --spectrum-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover);
-    --spectrum-picker-border-color-error-active: var(--spectrum-negative-border-color-down);
-    --spectrum-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus);
-    --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color);
-    --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color);
-    --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color);
-    --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);
-}
-
-:host([size="s"]) {
-    --spectrum-picker-font-size: var(--spectrum-font-size-75);
-    --spectrum-picker-block-size: var(--spectrum-component-height-75);
-    --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-    --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75);
-    --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75);
-    --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small);
-    --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small);
-    --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small);
-    --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small);
-    --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
-    --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
-    --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
-}
-
-:host([size="l"]) {
-    --spectrum-picker-font-size: var(--spectrum-font-size-200);
-    --spectrum-picker-block-size: var(--spectrum-component-height-200);
-    --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
-    --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
-    --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200);
-    --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200);
-    --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large);
-    --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large);
-    --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large);
-    --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large);
-    --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
-    --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
-    --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
-}
-
-:host([size="xl"]) {
-    --spectrum-picker-font-size: var(--spectrum-font-size-300);
-    --spectrum-picker-block-size: var(--spectrum-component-height-300);
-    --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
-    --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
-    --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300);
-    --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300);
-    --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large);
-    --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large);
-    --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
-    --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large);
-    --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
-    --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
-    --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-picker-focus-indicator-color: Highlight;
-        --highcontrast-picker-border-color-default: ButtonBorder;
-        --highcontrast-picker-border-color-hover: Highlight;
-        --highcontrast-picker-border-color-disabled: GrayText;
-        --highcontrast-picker-content-color-default: ButtonText;
-        --highcontrast-picker-content-color-disabled: GrayText;
-        --highcontrast-picker-background-color: ButtonFace;
-    }
-
-    #button.is-keyboardFocused,
-    #button:focus-visible {
-        --highcontrast-picker-border-color-hover: ButtonText;
-    }
-
-    #button .label,
-    #button:after {
-        forced-color-adjust: none;
-    }
-}
-
-#button {
-    box-sizing: border-box;
-    max-inline-size: 100%;
-    min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size)));
-    inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size));
-    block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size));
-    border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width));
-    border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius));
-    transition:
-        background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)),
-        box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)),
-        border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out;
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
-    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default)));
-    border-style: solid;
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default)));
-    margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker));
-    padding-block: 0;
-    padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text));
-    padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon));
-    display: flex;
-}
-
-#button:after {
-    pointer-events: none;
-    content: "";
-    block-size: calc(100% + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2);
-    inline-size: calc(100% + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2);
-    border-style: solid;
-    border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness));
-    border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
-    border-color: #0000;
-    margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1);
-    margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1);
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0;
-}
-
-#button:active {
-    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active)));
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active)));
-}
-
-#button:active:after {
-    border-color: #0000;
-}
-
-#button.placeholder:active .label {
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active)));
-}
-
-#button.is-keyboardFocused,
-#button:focus-visible {
-    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-key-focus, var(--spectrum-picker-background-color-key-focus)));
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-key-focus, var(--spectrum-picker-border-color-key-focus)));
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus)));
-    outline: none;
-}
-
-#button.is-keyboardFocused:after,
-#button:focus-visible:after {
-    border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
-}
-
-#button.is-keyboardFocused .label.placeholder,
-#button:focus-visible .label.placeholder {
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus)));
-}
-
-#button.is-keyboardFocused .picker,
-#button:focus-visible .picker {
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-key-focus, var(--spectrum-picker-icon-color-key-focus)));
-}
-
-:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) {
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open)));
-    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open)));
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open)));
-}
-
-:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .picker {
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default-open, var(--spectrum-picker-icon-color-default-open)));
-}
-
-:host([invalid]) #button:not(:disabled, .is-disabled) {
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default, var(--spectrum-picker-border-color-error-default)));
-}
-
-:host([invalid]) #button:not(:disabled, .is-disabled) .validation-icon {
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-error, var(--spectrum-picker-icon-color-error)));
-}
-
-:host([invalid]) #button:not(:disabled, .is-disabled):active {
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-active, var(--spectrum-picker-border-color-error-active)));
-}
-
-:host([invalid][open]) #button:not(:disabled, .is-disabled) {
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default-open, var(--spectrum-picker-border-color-error-default-open)));
-}
-
-:host([invalid]) #button.is-keyboardFocused:not(:disabled, .is-disabled),
-:host([invalid]) #button:not(:disabled, .is-disabled):focus-visible {
-    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus)));
-}
-
-:host([pending]) #button .picker {
-    color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled)));
-}
-
-:host([invalid]) #button .label,
-:host([pending]) #button .label {
-    margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end)));
-}
-
-.icon {
-    flex-shrink: 0;
-    margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
-}
-
-.label {
-    white-space: nowrap;
-    font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size));
-    line-height: var(--mod-picker-line-height, var(--spectrum-picker-line-height));
-    font-weight: var(--mod-picker-font-weight, var(--spectrum-picker-font-weight));
-    text-overflow: ellipsis;
-    text-align: start;
-    flex: auto;
-    padding-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text));
-    padding-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
-    overflow: hidden;
-}
-
-.label.placeholder {
-    font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight));
-    font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style));
-    transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out;
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
-}
-
-.label.placeholder:active {
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active)));
-}
-
-.picker {
-    vertical-align: top;
-    transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out;
-    margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
-    margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon));
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default)));
-    flex-shrink: 0;
-    display: inline-block;
-    position: relative;
-}
-
-.picker:active {
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-active, var(--spectrum-picker-icon-color-active)));
-}
-
-.validation-icon {
-    flex-shrink: 0;
-    margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
-    margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
-}
-
-#button .progress-circle {
-    margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
-    margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
-}
-
-.label ~ .picker {
-    margin-inline-start: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
-}
-
-:host([quiet]) #button {
-    inline-size: auto;
-    min-inline-size: 0;
-    padding-inline: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-picker-spacing-edge-to-text-quiet));
-    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
-    background-color: initial;
-    background-color: var(--highcontrast-picker-background-color, transparent);
-    border: none;
-    border-radius: 0;
-    margin-block-start: calc(var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px);
-}
-
-:host([quiet]) #button.label-inline {
-    margin-block-start: 0;
-}
-
-:host([quiet]) #button .picker {
-    margin-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet));
-}
-
-:host([quiet]) #button:after {
-    block-size: auto;
-    inline-size: auto;
-    border: none;
-}
-
-@media (hover: hover) {
-    #button:hover {
-        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover)));
-        background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover)));
-        border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover, var(--spectrum-picker-border-color-hover)));
-    }
-
-    #button:hover .picker {
-        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover, var(--spectrum-picker-icon-color-hover)));
-    }
-
-    :host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover {
-        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open)));
-        background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open)));
-        border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover-open, var(--spectrum-picker-border-color-hover-open)));
-    }
-
-    :host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .picker {
-        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover-open, var(--spectrum-picker-icon-color-hover-open)));
-    }
-
-    :host([invalid]) #button:not(:disabled, .is-disabled):hover {
-        border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover, var(--spectrum-picker-border-color-error-hover)));
-    }
-
-    :host([invalid][open]) #button:not(:disabled, .is-disabled):hover {
-        border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open)));
-    }
-
-    .label.placeholder:hover {
-        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover)));
-    }
-
-    :host([quiet]) #button:hover {
-        background-color: initial;
-        background-color: var(--highcontrast-picker-background-color, transparent);
-    }
-}
-
-:host([quiet]) #button.is-keyboardFocused,
-:host([quiet]) #button:focus-visible {
-    background-color: initial;
-    background-color: var(--highcontrast-picker-background-color, transparent);
-}
-
-:host([quiet]) #button.is-keyboardFocused:after,
-:host([quiet]) #button:focus-visible:after {
-    box-shadow: 0 var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
-    margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0;
-    border: none;
-    border-radius: 0;
-}
-
-:host([quiet][open]) #button,
-:host([quiet][disabled]) #button#button,
-:host([quiet]) #button#button:disabled,
-:host([quiet]) #button:active {
-    background-color: initial;
-    background-color: var(--highcontrast-picker-background-color, transparent);
-}
-
-.label-inline {
-    vertical-align: top;
-    display: inline-flex;
-}
-
-:host([disabled]) #button,
-#button: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, 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)));
-}
-
-:host([disabled]) #button .icon,
-:host([disabled]) #button .picker,
-:host([disabled]) #button .validation-icon,
-#button:disabled .icon,
-#button:disabled .picker,
-#button:disabled .validation-icon {
-    color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled)));
-}
-
-:host([disabled]) #button .label.placeholder,
-#button:disabled .label.placeholder {
-    color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
-}
diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts
index 1d9eb39391f..7737682a9be 100644
--- a/packages/picker/stories/picker.stories.ts
+++ b/packages/picker/stories/picker.stories.ts
@@ -24,7 +24,7 @@ import '@spectrum-web-components/picker/sp-picker.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import '@spectrum-web-components/overlay/sp-overlay.js';
 import '@spectrum-web-components/popover/sp-popover.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { spreadProps } from '../../../test/lit-helpers.js';
 import '../../overlay/stories/index.js';
 import { areIconsPresent, isOverlayOpen } from '../../overlay/stories/index.js';
diff --git a/packages/picker/stories/template.ts b/packages/picker/stories/template.ts
index d1ef504a1a1..6dd6bcb6517 100644
--- a/packages/picker/stories/template.ts
+++ b/packages/picker/stories/template.ts
@@ -21,7 +21,7 @@ import '@spectrum-web-components/picker/sp-picker.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 
 import { spreadProps } from '../../../test/lit-helpers.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 export interface StoryArgs {
     disabled?: boolean;
diff --git a/packages/popover/package.json b/packages/popover/package.json
index 2a88520313e..f3e7a133c64 100644
--- a/packages/popover/package.json
+++ b/packages/popover/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/popover-overrides.css.js": "./src/popover-overrides.css.js",
         "./src/popover.css.js": "./src/popover.css.js",
         "./sp-popover.js": {
             "development": "./sp-popover.dev.js",
diff --git a/packages/popover/src/popover-overrides.css b/packages/popover/src/popover-overrides.css
deleted file mode 100644
index 5786433f550..00000000000
--- a/packages/popover/src/popover-overrides.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-popover-border-width: var(--system-popover-border-width);
-}
diff --git a/packages/popover/src/popover.css b/packages/popover/src/popover.css
index ed49a891ab5..d6fb5d31fce 100644
--- a/packages/popover/src/popover.css
+++ b/packages/popover/src/popover.css
@@ -10,13 +10,316 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-popover.css");
-@import url("./popover-overrides.css");
+/* Base variables */
+:host {
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    transition:
+        transform 0.13s ease-in-out,
+        opacity 0.13s ease-in-out,
+        visibility 0s linear 0.13s;
+    transition:
+        transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
+        opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
+        visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
+}
+
+:host([open]) {
+    pointer-events: auto;
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 0s;
+    transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s));
+}
 
 :host {
-    min-width: min-content;
-    max-height: 100%;
-    max-width: 100%;
+    --spectrum-popover-animation-distance: var(--spectrum-spacing-100);
+    --spectrum-popover-background-color: var(--spectrum-background-layer-2-color);
+    --spectrum-popover-border-color: var(--spectrum-gray-400);
+    --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
+    --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x);
+    --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y);
+    --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur);
+    --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color);
+    --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width);
+    --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height);
+    --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2);
+    --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2);
+
+    --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color)));
+    box-sizing: border-box;
+    padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0;
+    border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius));
+    border-style: solid;
+    border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
+    border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
+    background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
+    filter: var(--mod-popover-filter, var(--spectrum-popover-filter));
+    outline: none;
+    flex-direction: column;
+    display: inline-flex;
+    position: absolute;
+}
+
+:host([tip]) {
+    overflow: visible;
+}
+
+:host([tip]) #tip .triangle {
+    stroke-linecap: square;
+    stroke-linejoin: miter;
+    fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
+    stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
+    stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
+}
+
+* {
+    --mod-popover-filter: none;
+}
+
+:host([tip]) .spectrum-Popover--top-end,
+:host([tip]) .spectrum-Popover--top-left,
+:host([tip]) .spectrum-Popover--top-right,
+:host([tip]) .spectrum-Popover--top-start,
+:host([placement*="top"][tip]) {
+    margin-block-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+}
+
+:host([open]) .spectrum-Popover--top-end,
+:host([open]) .spectrum-Popover--top-left,
+:host([open]) .spectrum-Popover--top-right,
+:host([open]) .spectrum-Popover--top-start,
+:host([placement*="top"][open]) {
+    transform: translateY(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
+}
+
+:host([tip]) .spectrum-Popover--bottom-end,
+:host([tip]) .spectrum-Popover--bottom-left,
+:host([tip]) .spectrum-Popover--bottom-right,
+:host([tip]) .spectrum-Popover--bottom-start,
+:host([placement*="bottom"][tip]) {
+    margin-block-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+}
+
+:host([open]) .spectrum-Popover--bottom-end,
+:host([open]) .spectrum-Popover--bottom-left,
+:host([open]) .spectrum-Popover--bottom-right,
+:host([open]) .spectrum-Popover--bottom-start,
+:host([placement*="bottom"][open]) {
+    transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
+}
+
+:host([tip]) .spectrum-Popover--right-bottom,
+:host([tip]) .spectrum-Popover--right-top,
+:host([placement*="right"][tip]) {
+    margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+}
+
+:host([open]) .spectrum-Popover--right-bottom,
+:host([open]) .spectrum-Popover--right-top,
+:host([placement*="right"][open]) {
+    transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
+}
+
+:host([tip]) .spectrum-Popover--left-bottom,
+:host([tip]) .spectrum-Popover--left-top,
+:host([placement*="left"][tip]) {
+    margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+}
+
+:host([open]) .spectrum-Popover--left-bottom,
+:host([open]) .spectrum-Popover--left-top,
+:host([placement*="left"][open]) {
+    transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
+}
+
+:host([tip]) .spectrum-Popover--start-bottom,
+:host([tip]) .spectrum-Popover--start-top,
+:host([tip]) .spectrum-Popover--start {
+    margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+}
+
+:host([open]) .spectrum-Popover--start-bottom,
+:host([open]) .spectrum-Popover--start-top,
+:host([open]) .spectrum-Popover--start {
+    transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
+}
+
+:host([open]) .spectrum-Popover--start-bottom:dir(rtl),
+:host([open]) .spectrum-Popover--start-top:dir(rtl),
+:host([open]) .spectrum-Popover--start:dir(rtl),
+:host([dir="rtl"][open]) .spectrum-Popover--start-bottom,
+:host([dir="rtl"][open]) .spectrum-Popover--start-top,
+:host([dir="rtl"][open]) .spectrum-Popover--start {
+    transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
+}
+
+:host([tip]) .spectrum-Popover--end-bottom,
+:host([tip]) .spectrum-Popover--end-top,
+:host([tip]) .spectrum-Popover--end {
+    margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+}
+
+:host([open]) .spectrum-Popover--end-bottom,
+:host([open]) .spectrum-Popover--end-top,
+:host([open]) .spectrum-Popover--end {
+    transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
+}
+
+:host([open]) .spectrum-Popover--end-bottom:dir(rtl),
+:host([open]) .spectrum-Popover--end-top:dir(rtl),
+:host([open]) .spectrum-Popover--end:dir(rtl),
+:host([dir="rtl"][open]) .spectrum-Popover--end-bottom,
+:host([dir="rtl"][open]) .spectrum-Popover--end-top,
+:host([dir="rtl"][open]) .spectrum-Popover--end {
+    transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
+}
+
+:host([tip]) #tip,
+:host([tip][placement*="bottom"]) #tip,
+:host([tip]) .spectrum-Popover--bottom-end #tip,
+:host([tip]) .spectrum-Popover--bottom-left #tip,
+:host([tip]) .spectrum-Popover--bottom-right #tip,
+:host([tip]) .spectrum-Popover--bottom-start #tip,
+:host([tip][placement*="top"]) #tip,
+:host([tip]) .spectrum-Popover--top-end #tip,
+:host([tip]) .spectrum-Popover--top-left #tip,
+:host([tip]) .spectrum-Popover--top-right #tip,
+:host([tip]) .spectrum-Popover--top-start #tip {
+    inline-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width));
+    block-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height));
+    margin: auto;
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline: 0;
+    transform: translate(0);
+}
+
+:host([tip]) .spectrum-Popover--top-left #tip {
+    inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto;
+}
+
+:host([tip]) .spectrum-Popover--top-right #tip {
+    inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
+}
+
+:host([tip]) .spectrum-Popover--top-start #tip {
+    margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
+}
+
+:host([tip]) .spectrum-Popover--top-end #tip {
+    margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
+}
+
+:host([tip][placement*="bottom"]) #tip,
+:host([tip]) .spectrum-Popover--bottom-end #tip,
+:host([tip]) .spectrum-Popover--bottom-left #tip,
+:host([tip]) .spectrum-Popover--bottom-right #tip,
+:host([tip]) .spectrum-Popover--bottom-start #tip {
+    inset-block: auto 100%;
+    transform: scaleY(-1);
+}
+
+:host([tip]) .spectrum-Popover--bottom-left #tip {
+    inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto;
+}
+
+:host([tip]) .spectrum-Popover--bottom-right #tip {
+    inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
+}
+
+:host([tip]) .spectrum-Popover--bottom-start #tip {
+    margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
+}
+
+:host([tip]) .spectrum-Popover--bottom-end #tip {
+    margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
+}
+
+:host([tip]) .spectrum-Popover--end #tip,
+:host([tip]) .spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top #tip,
+:host([tip][placement*="left"]) #tip,
+:host([tip]) .spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--left-top #tip,
+:host([tip][placement*="right"]) #tip,
+:host([tip]) .spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--start #tip,
+:host([tip]) .spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--start-top #tip {
+    inline-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height));
+    block-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width));
+    inset-block: 0;
+}
+
+:host([tip][placement*="left"]) #tip,
+:host([tip]) .spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--left-top #tip {
+    inset-inline: 100% auto;
+}
+
+:host([tip][placement*="right"]) #tip,
+:host([tip]) .spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--right-top #tip {
+    inset-inline: auto 100%;
+    transform: scaleX(-1);
+}
+
+:host([tip]) .spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--start-top #tip {
+    inset-block: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto;
+}
+
+:host([tip]) .spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--start-bottom #tip {
+    inset-block: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
+}
+
+:host([tip]) .spectrum-Popover--start #tip,
+:host([tip]) .spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--start-top #tip {
+    margin-inline-start: 100%;
+}
+
+:host([tip]) .spectrum-Popover--start #tip:dir(rtl),
+:host([tip]) .spectrum-Popover--start-bottom #tip:dir(rtl),
+:host([tip]) .spectrum-Popover--start-top #tip:dir(rtl),
+:host([dir="rtl"][tip]) .spectrum-Popover--start #tip,
+:host([dir="rtl"][tip]) .spectrum-Popover--start-bottom #tip,
+:host([dir="rtl"][tip]) .spectrum-Popover--start-top #tip {
+    transform: none;
+}
+
+:host([tip]) .spectrum-Popover--end #tip,
+:host([tip]) .spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top #tip {
+    margin-inline-end: 100%;
+    transform: scaleX(-1);
+}
+
+:host([tip]) .spectrum-Popover--end #tip:dir(rtl),
+:host([tip]) .spectrum-Popover--end-bottom #tip:dir(rtl),
+:host([tip]) .spectrum-Popover--end-top #tip:dir(rtl),
+:host([dir="rtl"][tip]) .spectrum-Popover--end #tip,
+:host([dir="rtl"][tip]) .spectrum-Popover--end-bottom #tip,
+:host([dir="rtl"][tip]) .spectrum-Popover--end-top #tip {
+    transform: scaleX(1);
+}
+
+/* popover tokens */
+:host {
+    --spectrum-popover-border-width: var(--spectrum-border-width-100);
+
+    min-inline-size: min-content;
+    max-block-size: 100%;
+    max-inline-size: 100%;
     clip-path: none;
 }
 
@@ -38,8 +341,8 @@
 
 .block,
 .inline {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     display: block;
 }
 
@@ -57,12 +360,12 @@
     border: 0;
     clip: rect(0, 0, 0, 0);
     clip-path: inset(50%);
-    height: 1px;
+    block-size: 1px;
     margin: 0 -1px -1px 0;
     overflow: hidden;
     padding: 0;
     position: absolute;
-    width: 1px;
+    inline-size: 1px;
     white-space: nowrap;
 }
 
@@ -71,10 +374,10 @@
 }
 
 :host([dialog]) {
-    min-width: var(--mod-popover-dialog-min-width, var(--spectrum-popover-dialog-min-width, 270px));
+    min-inline-size: var(--mod-popover-dialog-min-width, var(--spectrum-popover-dialog-min-width, 270px));
     padding: var(--mod-popover-dialog-padding, var(--spectrum-popover-dialog-padding, 30px 29px));
 }
 
 :host([tip][placement]) #tip {
-    height: auto;
+    block-size: auto;
 }
diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css
deleted file mode 100644
index 2e9ade1f7af..00000000000
--- a/packages/popover/src/spectrum-popover.css
+++ /dev/null
@@ -1,323 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    pointer-events: none;
-    visibility: hidden;
-    opacity: 0;
-    transition:
-        transform 0.13s ease-in-out,
-        opacity 0.13s ease-in-out,
-        visibility 0s linear 0.13s;
-    transition:
-        transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
-        opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
-        visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
-}
-
-:host([open]) {
-    pointer-events: auto;
-    visibility: visible;
-    opacity: 1;
-    transition-delay: 0s;
-    transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s));
-}
-
-:host {
-    --spectrum-popover-animation-distance: var(--spectrum-spacing-100);
-    --spectrum-popover-background-color: var(--spectrum-background-layer-2-color);
-    --spectrum-popover-border-color: var(--spectrum-gray-400);
-    --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
-    --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x);
-    --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y);
-    --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur);
-    --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color);
-    --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100);
-    --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width);
-    --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height);
-    --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2);
-    --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2);
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-popover-border-color: CanvasText;
-    }
-}
-
-:host {
-    --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color)));
-    box-sizing: border-box;
-    padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0;
-    border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius));
-    border-style: solid;
-    border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
-    border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
-    background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
-    filter: var(--mod-popover-filter, var(--spectrum-popover-filter));
-    outline: none;
-    flex-direction: column;
-    display: inline-flex;
-    position: absolute;
-}
-
-:host([tip]) {
-    overflow: visible;
-}
-
-:host([tip]) #tip .triangle {
-    stroke-linecap: square;
-    stroke-linejoin: miter;
-    fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
-    stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
-    stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
-}
-
-* {
-    --mod-popover-filter: none;
-}
-
-:host([tip]) .spectrum-Popover--top-end,
-:host([tip]) .spectrum-Popover--top-left,
-:host([tip]) .spectrum-Popover--top-right,
-:host([tip]) .spectrum-Popover--top-start,
-:host([placement*="top"][tip]) {
-    margin-block-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
-}
-
-:host([open]) .spectrum-Popover--top-end,
-:host([open]) .spectrum-Popover--top-left,
-:host([open]) .spectrum-Popover--top-right,
-:host([open]) .spectrum-Popover--top-start,
-:host([placement*="top"][open]) {
-    transform: translateY(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
-}
-
-:host([tip]) .spectrum-Popover--bottom-end,
-:host([tip]) .spectrum-Popover--bottom-left,
-:host([tip]) .spectrum-Popover--bottom-right,
-:host([tip]) .spectrum-Popover--bottom-start,
-:host([placement*="bottom"][tip]) {
-    margin-block-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
-}
-
-:host([open]) .spectrum-Popover--bottom-end,
-:host([open]) .spectrum-Popover--bottom-left,
-:host([open]) .spectrum-Popover--bottom-right,
-:host([open]) .spectrum-Popover--bottom-start,
-:host([placement*="bottom"][open]) {
-    transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
-}
-
-:host([tip]) .spectrum-Popover--right-bottom,
-:host([tip]) .spectrum-Popover--right-top,
-:host([placement*="right"][tip]) {
-    margin-left: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
-}
-
-:host([open]) .spectrum-Popover--right-bottom,
-:host([open]) .spectrum-Popover--right-top,
-:host([placement*="right"][open]) {
-    transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
-}
-
-:host([tip]) .spectrum-Popover--left-bottom,
-:host([tip]) .spectrum-Popover--left-top,
-:host([placement*="left"][tip]) {
-    margin-right: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
-}
-
-:host([open]) .spectrum-Popover--left-bottom,
-:host([open]) .spectrum-Popover--left-top,
-:host([placement*="left"][open]) {
-    transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
-}
-
-:host([tip]) .spectrum-Popover--start-bottom,
-:host([tip]) .spectrum-Popover--start-top,
-:host([tip]) .spectrum-Popover--start {
-    margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
-}
-
-:host([open]) .spectrum-Popover--start-bottom,
-:host([open]) .spectrum-Popover--start-top,
-:host([open]) .spectrum-Popover--start {
-    transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
-}
-
-:host([open]) .spectrum-Popover--start-bottom:dir(rtl),
-:host([open]) .spectrum-Popover--start-top:dir(rtl),
-:host([open]) .spectrum-Popover--start:dir(rtl),
-:host([dir="rtl"][open]) .spectrum-Popover--start-bottom,
-:host([dir="rtl"][open]) .spectrum-Popover--start-top,
-:host([dir="rtl"][open]) .spectrum-Popover--start {
-    transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
-}
-
-:host([tip]) .spectrum-Popover--end-bottom,
-:host([tip]) .spectrum-Popover--end-top,
-:host([tip]) .spectrum-Popover--end {
-    margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
-}
-
-:host([open]) .spectrum-Popover--end-bottom,
-:host([open]) .spectrum-Popover--end-top,
-:host([open]) .spectrum-Popover--end {
-    transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
-}
-
-:host([open]) .spectrum-Popover--end-bottom:dir(rtl),
-:host([open]) .spectrum-Popover--end-top:dir(rtl),
-:host([open]) .spectrum-Popover--end:dir(rtl),
-:host([dir="rtl"][open]) .spectrum-Popover--end-bottom,
-:host([dir="rtl"][open]) .spectrum-Popover--end-top,
-:host([dir="rtl"][open]) .spectrum-Popover--end {
-    transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
-}
-
-:host([tip]) #tip,
-:host([tip][placement*="bottom"]) #tip,
-:host([tip]) .spectrum-Popover--bottom-end #tip,
-:host([tip]) .spectrum-Popover--bottom-left #tip,
-:host([tip]) .spectrum-Popover--bottom-right #tip,
-:host([tip]) .spectrum-Popover--bottom-start #tip,
-:host([tip][placement*="top"]) #tip,
-:host([tip]) .spectrum-Popover--top-end #tip,
-:host([tip]) .spectrum-Popover--top-left #tip,
-:host([tip]) .spectrum-Popover--top-right #tip,
-:host([tip]) .spectrum-Popover--top-start #tip {
-    inline-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width));
-    block-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height));
-    margin: auto;
-    position: absolute;
-    inset-block-start: 100%;
-    inset-inline: 0;
-    transform: translate(0);
-}
-
-:host([tip]) .spectrum-Popover--top-left #tip {
-    inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto;
-}
-
-:host([tip]) .spectrum-Popover--top-right #tip {
-    inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
-}
-
-:host([tip]) .spectrum-Popover--top-start #tip {
-    margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
-}
-
-:host([tip]) .spectrum-Popover--top-end #tip {
-    margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
-}
-
-:host([tip][placement*="bottom"]) #tip,
-:host([tip]) .spectrum-Popover--bottom-end #tip,
-:host([tip]) .spectrum-Popover--bottom-left #tip,
-:host([tip]) .spectrum-Popover--bottom-right #tip,
-:host([tip]) .spectrum-Popover--bottom-start #tip {
-    inset-block: auto 100%;
-    transform: scaleY(-1);
-}
-
-:host([tip]) .spectrum-Popover--bottom-left #tip {
-    inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto;
-}
-
-:host([tip]) .spectrum-Popover--bottom-right #tip {
-    inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
-}
-
-:host([tip]) .spectrum-Popover--bottom-start #tip {
-    margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
-}
-
-:host([tip]) .spectrum-Popover--bottom-end #tip {
-    margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
-}
-
-:host([tip]) .spectrum-Popover--end #tip,
-:host([tip]) .spectrum-Popover--end-bottom #tip,
-:host([tip]) .spectrum-Popover--end-top #tip,
-:host([tip][placement*="left"]) #tip,
-:host([tip]) .spectrum-Popover--left-bottom #tip,
-:host([tip]) .spectrum-Popover--left-top #tip,
-:host([tip][placement*="right"]) #tip,
-:host([tip]) .spectrum-Popover--right-bottom #tip,
-:host([tip]) .spectrum-Popover--right-top #tip,
-:host([tip]) .spectrum-Popover--start #tip,
-:host([tip]) .spectrum-Popover--start-bottom #tip,
-:host([tip]) .spectrum-Popover--start-top #tip {
-    inline-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height));
-    block-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width));
-    inset-block: 0;
-}
-
-:host([tip][placement*="left"]) #tip,
-:host([tip]) .spectrum-Popover--left-bottom #tip,
-:host([tip]) .spectrum-Popover--left-top #tip {
-    left: 100%;
-    right: auto;
-}
-
-:host([tip][placement*="right"]) #tip,
-:host([tip]) .spectrum-Popover--right-bottom #tip,
-:host([tip]) .spectrum-Popover--right-top #tip {
-    left: auto;
-    right: 100%;
-    transform: scaleX(-1);
-}
-
-:host([tip]) .spectrum-Popover--end-top #tip,
-:host([tip]) .spectrum-Popover--left-top #tip,
-:host([tip]) .spectrum-Popover--right-top #tip,
-:host([tip]) .spectrum-Popover--start-top #tip {
-    inset-block: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto;
-}
-
-:host([tip]) .spectrum-Popover--end-bottom #tip,
-:host([tip]) .spectrum-Popover--left-bottom #tip,
-:host([tip]) .spectrum-Popover--right-bottom #tip,
-:host([tip]) .spectrum-Popover--start-bottom #tip {
-    inset-block: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing));
-}
-
-:host([tip]) .spectrum-Popover--start #tip,
-:host([tip]) .spectrum-Popover--start-bottom #tip,
-:host([tip]) .spectrum-Popover--start-top #tip {
-    margin-inline-start: 100%;
-}
-
-:host([tip]) .spectrum-Popover--start #tip:dir(rtl),
-:host([tip]) .spectrum-Popover--start-bottom #tip:dir(rtl),
-:host([tip]) .spectrum-Popover--start-top #tip:dir(rtl),
-:host([dir="rtl"][tip]) .spectrum-Popover--start #tip,
-:host([dir="rtl"][tip]) .spectrum-Popover--start-bottom #tip,
-:host([dir="rtl"][tip]) .spectrum-Popover--start-top #tip {
-    transform: none;
-}
-
-:host([tip]) .spectrum-Popover--end #tip,
-:host([tip]) .spectrum-Popover--end-bottom #tip,
-:host([tip]) .spectrum-Popover--end-top #tip {
-    margin-inline-end: 100%;
-    transform: scaleX(-1);
-}
-
-:host([tip]) .spectrum-Popover--end #tip:dir(rtl),
-:host([tip]) .spectrum-Popover--end-bottom #tip:dir(rtl),
-:host([tip]) .spectrum-Popover--end-top #tip:dir(rtl),
-:host([dir="rtl"][tip]) .spectrum-Popover--end #tip,
-:host([dir="rtl"][tip]) .spectrum-Popover--end-bottom #tip,
-:host([dir="rtl"][tip]) .spectrum-Popover--end-top #tip {
-    transform: scaleX(1);
-}
diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json
index 9ef3ee57269..50377f4eb52 100644
--- a/packages/progress-bar/package.json
+++ b/packages/progress-bar/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/progress-bar-overrides.css.js": "./src/progress-bar-overrides.css.js",
         "./src/progress-bar.css.js": "./src/progress-bar.css.js",
         "./sp-progress-bar.js": {
             "development": "./sp-progress-bar.dev.js",
diff --git a/packages/progress-bar/src/progress-bar-overrides.css b/packages/progress-bar/src/progress-bar-overrides.css
deleted file mode 100644
index ff68028684a..00000000000
--- a/packages/progress-bar/src/progress-bar-overrides.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--system-progress-bar-animation-ease-in-out-indeterminate);
-    --spectrum-progressbar-animation-duration-indeterminate: var(--system-progress-bar-animation-duration-indeterminate);
-    --spectrum-progressbar-corner-radius: var(--system-progress-bar-corner-radius);
-    --spectrum-progressbar-fill-size-indeterminate: var(--system-progress-bar-fill-size-indeterminate);
-    --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400);
-    --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500);
-    --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800);
-    --spectrum-progressbar-line-height-cjk: var(--system-progress-bar-line-height-cjk);
-    --spectrum-progressbar-min-size: var(--system-progress-bar-min-size);
-    --spectrum-progressbar-max-size: var(--system-progress-bar-max-size);
-    --spectrum-progressbar-line-height: var(--system-progress-bar-line-height);
-    --spectrum-progressbar-spacing-label-to-progressbar: var(--system-progress-bar-spacing-label-to);
-    --spectrum-progressbar-spacing-label-to-text: var(--system-progress-bar-spacing-label-to-text);
-    --spectrum-progressbar-text-color: var(--system-progress-bar-text-color);
-    --spectrum-progressbar-track-color: var(--system-progress-bar-track-color);
-    --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color);
-    --spectrum-progressbar-label-and-value-white: var(--system-progress-bar-label-and-value-white);
-    --spectrum-progressbar-track-color-white: var(--system-progress-bar-track-color-white);
-    --spectrum-progressbar-fill-color-white: var(--system-progress-bar-fill-color-white);
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-spacing-top-to-text);
-}
-
-:host {
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-m-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-size-m-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-size-m-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-m-spacing-top-to-text);
-}
-
-:host([size="s"]) {
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-s-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-size-s-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-size-s-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-s-spacing-top-to-text);
-}
-
-:host([size="l"]) {
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-l-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-size-l-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-size-l-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-l-spacing-top-to-text);
-}
-
-:host([size="xl"]) {
-    --spectrum-progressbar-size-default: var(--system-progress-bar-size-xl-size-default);
-    --spectrum-progressbar-font-size: var(--system-progress-bar-size-xl-font-size);
-    --spectrum-progressbar-thickness: var(--system-progress-bar-size-xl-thickness);
-    --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-xl-spacing-top-to-text);
-}
diff --git a/packages/progress-bar/src/progress-bar.css b/packages/progress-bar/src/progress-bar.css
index a8ca73df200..3a24691e376 100644
--- a/packages/progress-bar/src/progress-bar.css
+++ b/packages/progress-bar/src/progress-bar.css
@@ -10,11 +10,172 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-progress-bar.css");
-@import url("./progress-bar-overrides.css");
+/* Base variables */
+:host {
+    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));
+    flex-flow: wrap;
+    justify-content: space-between;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+}
+
+.label,
+.percentage {
+    text-align: start;
+    line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height));
+    color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color));
+    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));
+}
+
+.label:lang(ja),
+.label:lang(ko),
+.label:lang(zh),
+.percentage:lang(ja),
+.percentage:lang(ko),
+.percentage:lang(zh) {
+    line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk));
+}
+
+.label {
+    flex: 1;
+}
+
+.percentage {
+    align-self: flex-start;
+    margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
+}
+
+.track {
+    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)));
+    overflow: hidden;
+}
+
+.fill {
+    block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
+    background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
+    border: none;
+    transition: width 1s;
+}
+
+:host([indeterminate]) .fill {
+    inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate));
+    animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate));
+    will-change: transform;
+    animation-name: indeterminate-loop-ltr;
+    animation-duration: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate));
+    animation-iteration-count: infinite;
+    position: relative;
+}
+
+:host([indeterminate]) .fill:dir(rtl),
+:host([dir="rtl"][indeterminate]) .fill {
+    animation-name: indeterminate-loop-rtl;
+}
+
+:host([side-label]) {
+    flex-flow: row;
+    justify-content: space-between;
+    display: inline-flex;
+}
+
+:host([side-label]) .track {
+    flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
+}
+
+:host([side-label]) .label {
+    flex-grow: 0;
+    margin-block-end: 0;
+    margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
+}
+
+:host([side-label]) .percentage {
+    text-align: end;
+    order: 3;
+    margin-block-end: 0;
+    margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
+}
+
+:host([static-color="white"]) .fill {
+    background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
+}
+
+:host([static-color="white"]) .fill,
+:host([static-color="white"]) .label,
+:host([static-color="white"]) .percentage {
+    color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
+}
+
+:host([static-color="white"]) .track {
+    background: var(--spectrum-progressbar-track-color-white);
+}
+
+100% {
+    transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)));
+
+    transform: translate(calc(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)) * -1));
+}
+
+/* base variables */
+/* Base variables */
+:host {
+    /* layout */
+    --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width);
+    --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width);
+    --spectrum-progressbar-size-default: var(--spectrum-progress-bar-size-2400);
+    --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
+    --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-progressbar-fill-size-indeterminate: 70%;
+
+    /* typography */
+    --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
+    --spectrum-progressbar-line-height: var(--spectrum-line-height-100);
+    --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+    /* spacing */
+    --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75);
+    --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200);
+    --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+
+    /* colors */
+    --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-progressbar-track-color: var(--spectrum-gray-200);
+    --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900);
+    --spectrum-progressbar-label-and-value-white: var(--spectrum-white);
+    --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400);
+    --spectrum-progressbar-fill-color-white: var(--spectrum-white);
+
+    /* animation */
+    --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
+    --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
+
+    /* sizes */
+    --spectrum-progressbar-size-2400: 192px;
+    --spectrum-progressbar-size-2500: 200px;
+    --spectrum-progressbar-size-2800: 224px;
+}
+
+/* size variants */
+:host([size="s"]) {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
 
+/* layout */
 .fill {
-    width: 100%;
+    inline-size: 100%;
     transform-origin: left;
 }
 
diff --git a/packages/progress-bar/src/spectrum-progress-bar.css b/packages/progress-bar/src/spectrum-progress-bar.css
deleted file mode 100644
index 6ce38cc4e67..00000000000
--- a/packages/progress-bar/src/spectrum-progress-bar.css
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    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));
-    flex-flow: wrap;
-    justify-content: space-between;
-    align-items: center;
-    display: inline-flex;
-    position: relative;
-}
-
-.label,
-.percentage {
-    text-align: start;
-    line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height));
-    color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color));
-    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));
-}
-
-.label:lang(ja),
-.label:lang(ko),
-.label:lang(zh),
-.percentage:lang(ja),
-.percentage:lang(ko),
-.percentage:lang(zh) {
-    line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk));
-}
-
-.label {
-    flex: 1;
-}
-
-.percentage {
-    align-self: flex-start;
-    margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
-}
-
-.track {
-    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)));
-    overflow: hidden;
-}
-
-.fill {
-    block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
-    background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
-    border: none;
-    transition: width 1s;
-}
-
-:host([indeterminate]) .fill {
-    inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate));
-    animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate));
-    will-change: transform;
-    animation-name: indeterminate-loop-ltr;
-    animation-duration: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate));
-    animation-iteration-count: infinite;
-    position: relative;
-}
-
-:host([indeterminate]) .fill:dir(rtl),
-:host([dir="rtl"][indeterminate]) .fill {
-    animation-name: indeterminate-loop-rtl;
-}
-
-:host([side-label]) {
-    flex-flow: row;
-    justify-content: space-between;
-    display: inline-flex;
-}
-
-:host([side-label]) .track {
-    flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
-}
-
-:host([side-label]) .label {
-    flex-grow: 0;
-    margin-block-end: 0;
-    margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
-}
-
-:host([side-label]) .percentage {
-    text-align: end;
-    order: 3;
-    margin-block-end: 0;
-    margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
-}
-
-:host([static-color="white"]) .fill {
-    background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
-}
-
-:host([static-color="white"]) .fill,
-:host([static-color="white"]) .label,
-:host([static-color="white"]) .percentage {
-    color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
-}
-
-:host([static-color="white"]) .track {
-    background: var(--spectrum-progressbar-track-color-white);
-}
-
-@keyframes indeterminate-loop-ltr {
-    0% {
-        transform: translate(calc(var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)) * -1));
-    }
-
-    to {
-        transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)));
-    }
-}
-
-@keyframes indeterminate-loop-rtl {
-    0% {
-        transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate)));
-    }
-
-    to {
-        transform: translate(calc(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)) * -1));
-    }
-}
-
-@media (forced-colors: active) {
-    .track {
-        --highcontrast-progressbar-fill-color: ButtonText;
-        --highcontrast-progressbar-track-color: ButtonFace;
-        forced-color-adjust: none;
-        border: 1px solid ButtonText;
-    }
-}
diff --git a/packages/progress-circle/package.json b/packages/progress-circle/package.json
index e6f251c7e64..e8dcf1c261f 100644
--- a/packages/progress-circle/package.json
+++ b/packages/progress-circle/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/progress-circle-overrides.css.js": "./src/progress-circle-overrides.css.js",
         "./src/progress-circle.css.js": "./src/progress-circle.css.js",
         "./sp-progress-circle.js": {
             "development": "./sp-progress-circle.dev.js",
diff --git a/packages/progress-circle/src/progress-circle-overrides.css b/packages/progress-circle/src/progress-circle-overrides.css
deleted file mode 100644
index 7c78f1598c8..00000000000
--- a/packages/progress-circle/src/progress-circle-overrides.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-progress-circle-track-border-color: var(--system-progress-circle-track-border-color);
-    --spectrum-progress-circle-track-border-color-over-background: var(--system-progress-circle-track-border-color-over-background);
-    --spectrum-progress-circle-fill-border-color-over-background: var(--system-progress-circle-fill-border-color-over-background);
-}
diff --git a/packages/progress-circle/src/progress-circle.css b/packages/progress-circle/src/progress-circle.css
index 4e345be75f1..bc71e4c1f52 100644
--- a/packages/progress-circle/src/progress-circle.css
+++ b/packages/progress-circle/src/progress-circle.css
@@ -10,46 +10,514 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-progress-circle.css");
-@import url("./progress-circle-overrides.css");
+.track {
+    --spectrum-progress-circle-track-border-style: double;
+
+    box-sizing: border-box;
+    inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
+    block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
+    border-style: var(--mod-progress-circle-track-border-style, var(--spectrum-progress-circle-track-border-style));
+    border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
+    border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
+    border-color: var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color));
+}
 
 :host {
-    block-size: var(--mod-progress-circle-size, var(--_spectrum-progress-circle-size));
-    inline-size: var(--mod-progress-circle-size, var(--_spectrum-progress-circle-size));
+    --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
+    --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default);
+    --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);
 
-    --spectrum-progress-circle-size: inherit;
-    --spectrum-progresscircle-m-over-background-track-fill-color: var(--spectrum-alias-track-fill-color-overbackground);
-    --_spectrum-progress-circle-size: var(--spectrum-progress-circle-size, var(--spectrum-progress-circle-size-medium));
+    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
+    --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
+    inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
+    block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
+    direction: ltr;
+    display: inline-block;
+    position: relative;
+    transform: translateZ(0);
 }
 
 :host([size="s"]) {
-    --_spectrum-progress-circle-size: var(--spectrum-progress-circle-size, var(--spectrum-progress-circle-size-small));
 }
 
 :host([size="l"]) {
-    --_spectrum-progress-circle-size: var(--spectrum-progress-circle-size, var(--spectrum-progress-circle-size-large));
 }
 
-slot {
-    display: none;
+.fills {
+    inline-size: 100%;
+    block-size: 100%;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+}
+
+.fill {
+    box-sizing: border-box;
+    inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
+    block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
+    border-style: solid;
+    border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
+    border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
+    border-color: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color)));
+}
+
+:host([static-color="white"]) .track {
+    border-color: var(--mod-progress-circle-track-border-color-over-background, var(--spectrum-progress-circle-track-border-color-over-background));
+}
+
+:host([static-color="white"]) .fill {
+    border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background)));
+}
+
+.fillMask1,
+.fillMask2 {
+    inline-size: 50%;
+    block-size: 100%;
+    transform-origin: 100%;
+    position: absolute;
+    overflow: hidden;
+    transform: rotate(180deg);
+}
+
+.fillSubMask1,
+.fillSubMask2 {
+    inline-size: 100%;
+    block-size: 100%;
+    transform-origin: 100%;
+    overflow: hidden;
+    transform: rotate(-180deg);
+}
+
+.fillMask2 {
+    transform: rotate(0);
+}
+
+:host([indeterminate]) .fills {
+    will-change: transform;
+    transform-origin: center;
+    animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite spectrum-fills-rotate;
+    transform: translateZ(0);
+}
+
+:host([indeterminate]) .fillSubMask1 {
+    will-change: transform;
+    animation: 1s linear infinite spectrum-fill-mask-1;
+    transform: translateZ(0);
+}
+
+:host([indeterminate]) .fillSubMask2 {
+    will-change: transform;
+    animation: 1s linear infinite spectrum-fill-mask-2;
+    transform: translateZ(0);
+}
+
+.fill-submask-2 {
+    animation: 1s linear infinite spectrum-fill-mask-2;
+}
+
+/* Component structure:
+ * The progress circle consists of two main parts:
+ * 1. Track: The background circle that shows the total progress range
+ * 2. Fill: The colored circle that indicates the current progress
+ *
+ * The component supports different sizes and can be used over various backgrounds
+ * with appropriate color adjustments.
+ */
+
+:host {
+    /* Track appearance - defines the unfilled portion of the circle */
+    --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
+    --spectrum-progress-circle-track-border-style: solid;
+
+    /* Fill appearance - defines the progress indicator */
+    --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default);
+
+    /* Over background variants - for use on dark or colored backgrounds */
+    --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);
+    --spectrum-progresscircle-m-over-background-track-fill-color: var(--spectrum-alias-track-fill-color-overbackground);
+
+    /* Size configuration - supports small, medium, and large variants */
+    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size, var(--spectrum-progress-circle-size-medium, inherit));
+
+    /* Component positioning */
+    position: var(--spectrum-progress-circle-position, relative);
+    direction: ltr;
+    display: inline-block;
+    transform: translateZ(0);
+    block-size: var(--spectrum-progress-circle-size);
+    inline-size: var(--spectrum-progress-circle-size);
+}
+
+:host([size="s"]) {
+    --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
 }
 
 .track {
-    block-size: var(--mod-progress-circle-size, var(--_spectrum-progress-circle-size));
-    border-radius: var(--mod-progress-circle-size, var(--_spectrum-progress-circle-size));
-    inline-size: var(--mod-progress-circle-size, var(--_spectrum-progress-circle-size));
+    box-sizing: border-box;
+    border-style: var(--spectrum-progress-circle-track-border-style);
+    border-width: var(--spectrum-progress-circle-thickness);
+    border-color: var(--spectrum-progress-circle-track-border-color);
+
+    block-size: var(--spectrum-progress-circle-size);
+    border-radius: var(--spectrum-progress-circle-size);
+    inline-size: var(--spectrum-progress-circle-size);
+}
+
+.fills {
+    inline-size: 100%;
+    block-size: 100%;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
 }
 
 .fill {
-    block-size: var(--mod-progress-circle-size, var(--_spectrum-progress-circle-size));
-    border-radius: var(--mod-progress-circle-size, var(--_spectrum-progress-circle-size));
-    inline-size: var(--mod-progress-circle-size, var(--_spectrum-progress-circle-size));
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: var(--spectrum-progress-circle-thickness);
+    border-color: var(--highcontrast-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color));
+
+    block-size: var(--spectrum-progress-circle-size);
+    border-radius: var(--spectrum-progress-circle-size);
+    inline-size: var(--spectrum-progress-circle-size);
+}
+
+:host([static-color="white"]) .track {
+    border-color: var(--spectrum-progress-circle-track-border-color-over-background);
+}
+
+:host([static-color="white"]) .fill {
+    border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background));
+}
+
+.fillMask1,
+.fillMask2 {
+    inline-size: 50%;
+    block-size: 100%;
+    transform-origin: 100%;
+    position: absolute;
+    overflow: hidden;
+    transform: rotate(180deg);
+}
+
+.fillSubMask1,
+.fillSubMask2 {
+    inline-size: 100%;
+    block-size: 100%;
+    transform-origin: 100%;
+    overflow: hidden;
+    transform: rotate(-180deg);
+}
+
+.fillMask2 {
+    transform: rotate(0);
+}
+
+:host([indeterminate]) .fills {
+    will-change: transform;
+    transform-origin: center;
+    animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite spectrum-fills-rotate;
+    transform: translateZ(0);
+}
+
+:host([indeterminate]) .fillSubMask1 {
+    will-change: transform;
+    animation: 1s linear infinite spectrum-fill-mask-1;
+    transform: translateZ(0);
+}
+
+:host([indeterminate]) .fillSubMask2 {
+    will-change: transform;
+    animation: 1s linear infinite spectrum-fill-mask-2;
+    transform: translateZ(0);
+}
+
+.fill-submask-2 {
+    animation: 1s linear infinite spectrum-fill-mask-2;
+}
+
+slot {
+    display: none;
 }
 
-/* stylelint-disable */
 :host([indeterminate]) .fills,
 :host([indeterminate]) .fillSubMask1,
 :host([indeterminate]) .fillSubMask2 {
     animation-duration: var(--spectrum-animation-duration-2000);
 }
-/* stylelint-enable */
+
+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(0);
+
+    transform: rotate(179.2deg);
+}
+
+11.86% {
+    transform: rotate(0);
+
+    transform: rotate(164deg);
+}
+
+13.56% {
+    transform: rotate(0);
+
+    transform: rotate(151.8deg);
+}
+
+15.25% {
+    transform: rotate(0);
+
+    transform: rotate(140.8deg);
+}
+
+16.95% {
+    transform: rotate(0);
+
+    transform: rotate(130.3deg);
+}
+
+18.64% {
+    transform: rotate(0);
+
+    transform: rotate(120.4deg);
+}
+
+20.34% {
+    transform: rotate(0);
+
+    transform: rotate(110.8deg);
+}
+
+22.03% {
+    transform: rotate(0);
+
+    transform: rotate(101.6deg);
+}
+
+23.73% {
+    transform: rotate(0);
+
+    transform: rotate(93.5deg);
+}
+
+25.42% {
+    transform: rotate(0);
+
+    transform: rotate(85.4deg);
+}
+
+27.12% {
+    transform: rotate(0);
+
+    transform: rotate(78.1deg);
+}
+
+28.81% {
+    transform: rotate(0);
+
+    transform: rotate(71.2deg);
+}
+
+30.51% {
+    transform: rotate(0);
+
+    transform: rotate(89.1deg);
+}
+
+32.2% {
+    transform: rotate(0);
+
+    transform: rotate(105.5deg);
+}
+
+33.9% {
+    transform: rotate(0);
+
+    transform: rotate(121.3deg);
+}
+
+35.59% {
+    transform: rotate(0);
+
+    transform: rotate(135.5deg);
+}
+
+37.29% {
+    transform: rotate(0);
+
+    transform: rotate(148.4deg);
+}
+
+38.98% {
+    transform: rotate(0);
+
+    transform: rotate(161deg);
+}
+
+40.68% {
+    transform: rotate(0);
+
+    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(270deg);
+}
diff --git a/packages/progress-circle/src/spectrum-progress-circle.css b/packages/progress-circle/src/spectrum-progress-circle.css
deleted file mode 100644
index 62827d507cd..00000000000
--- a/packages/progress-circle/src/spectrum-progress-circle.css
+++ /dev/null
@@ -1,628 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-progress-circle-fill-border-color: Highlight;
-        --highcontrast-progress-circle-fill-border-color-over-background: Highlight;
-    }
-
-    .track {
-        --spectrum-progress-circle-track-border-style: double;
-    }
-}
-
-:host {
-    --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
-    --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default);
-    --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);
-    --spectrum-progress-circle-track-border-style: solid;
-    inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-    block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-    position: var(--mod-progress-circle-position, relative);
-    direction: ltr;
-    display: inline-block;
-    position: relative;
-    transform: translateZ(0);
-}
-
-:host([size="s"]) {
-    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
-    --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
-}
-
-:host {
-    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
-    --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
-}
-
-:host([size="l"]) {
-    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
-    --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
-}
-
-.track {
-    box-sizing: border-box;
-    inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-    block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-    border-style: var(--mod-progress-circle-track-border-style, var(--spectrum-progress-circle-track-border-style));
-    border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
-    border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-    border-color: var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color));
-}
-
-.fills {
-    inline-size: 100%;
-    block-size: 100%;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
-
-.fill {
-    box-sizing: border-box;
-    inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-    block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-    border-style: solid;
-    border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
-    border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-    border-color: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color)));
-}
-
-:host([static-color="white"]) .track {
-    border-color: var(--mod-progress-circle-track-border-color-over-background, var(--spectrum-progress-circle-track-border-color-over-background));
-}
-
-:host([static-color="white"]) .fill {
-    border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background)));
-}
-
-.fillMask1,
-.fillMask2 {
-    inline-size: 50%;
-    block-size: 100%;
-    transform-origin: 100%;
-    position: absolute;
-    overflow: hidden;
-    transform: rotate(180deg);
-}
-
-.fillSubMask1,
-.fillSubMask2 {
-    inline-size: 100%;
-    block-size: 100%;
-    transform-origin: 100%;
-    overflow: hidden;
-    transform: rotate(-180deg);
-}
-
-.fillMask2 {
-    transform: rotate(0);
-}
-
-:host([indeterminate]) .fills {
-    will-change: transform;
-    transform-origin: center;
-    animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite spectrum-fills-rotate;
-    transform: translateZ(0);
-}
-
-:host([indeterminate]) .fillSubMask1 {
-    will-change: transform;
-    animation: 1s linear infinite spectrum-fill-mask-1;
-    transform: translateZ(0);
-}
-
-:host([indeterminate]) .fillSubMask2 {
-    will-change: transform;
-    animation: 1s linear infinite spectrum-fill-mask-2;
-    transform: translateZ(0);
-}
-
-.fill-submask-2 {
-    animation: 1s linear infinite 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(0);
-    }
-
-    11.86% {
-        transform: rotate(0);
-    }
-
-    13.56% {
-        transform: rotate(0);
-    }
-
-    15.25% {
-        transform: rotate(0);
-    }
-
-    16.95% {
-        transform: rotate(0);
-    }
-
-    18.64% {
-        transform: rotate(0);
-    }
-
-    20.34% {
-        transform: rotate(0);
-    }
-
-    22.03% {
-        transform: rotate(0);
-    }
-
-    23.73% {
-        transform: rotate(0);
-    }
-
-    25.42% {
-        transform: rotate(0);
-    }
-
-    27.12% {
-        transform: rotate(0);
-    }
-
-    28.81% {
-        transform: rotate(0);
-    }
-
-    30.51% {
-        transform: rotate(0);
-    }
-
-    32.2% {
-        transform: rotate(0);
-    }
-
-    33.9% {
-        transform: rotate(0);
-    }
-
-    35.59% {
-        transform: rotate(0);
-    }
-
-    37.29% {
-        transform: rotate(0);
-    }
-
-    38.98% {
-        transform: rotate(0);
-    }
-
-    40.68% {
-        transform: rotate(0);
-    }
-
-    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);
-    }
-
-    to {
-        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);
-    }
-
-    to {
-        transform: rotate(180deg);
-    }
-}
-
-@keyframes spectrum-fills-rotate {
-    0% {
-        transform: rotate(-90deg);
-    }
-
-    to {
-        transform: rotate(270deg);
-    }
-}
diff --git a/packages/radio/package.json b/packages/radio/package.json
index 5d2c4cfe269..bb57474e31e 100644
--- a/packages/radio/package.json
+++ b/packages/radio/package.json
@@ -37,7 +37,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/radio-overrides.css.js": "./src/radio-overrides.css.js",
         "./src/radio.css.js": "./src/radio.css.js",
         "./sp-radio.js": {
             "development": "./sp-radio.dev.js",
diff --git a/packages/radio/src/radio-overrides.css b/packages/radio/src/radio-overrides.css
deleted file mode 100644
index 49dcb2a38ca..00000000000
--- a/packages/radio/src/radio-overrides.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-radio-button-border-color-default: var(--system-radio-button-border-color-default);
-    --spectrum-radio-button-border-color-hover: var(--system-radio-button-border-color-hover);
-    --spectrum-radio-button-border-color-down: var(--system-radio-button-border-color-down);
-    --spectrum-radio-button-border-color-focus: var(--system-radio-button-border-color-focus);
-    --spectrum-radio-neutral-content-color: var(--system-radio-neutral-content-color);
-    --spectrum-radio-neutral-content-color-hover: var(--system-radio-neutral-content-color-hover);
-    --spectrum-radio-neutral-content-color-down: var(--system-radio-neutral-content-color-down);
-    --spectrum-radio-neutral-content-color-focus: var(--system-radio-neutral-content-color-focus);
-    --spectrum-radio-focus-indicator-thickness: var(--system-radio-focus-indicator-thickness);
-    --spectrum-radio-focus-indicator-gap: var(--system-radio-focus-indicator-gap);
-    --spectrum-radio-focus-indicator-color: var(--system-radio-focus-indicator-color);
-    --spectrum-radio-disabled-content-color: var(--system-radio-disabled-content-color);
-    --spectrum-radio-disabled-border-color: var(--system-radio-disabled-border-color);
-    --spectrum-radio-emphasized-accent-color: var(--system-radio-emphasized-accent-color);
-    --spectrum-radio-emphasized-accent-color-hover: var(--system-radio-emphasized-accent-color-hover);
-    --spectrum-radio-emphasized-accent-color-down: var(--system-radio-emphasized-accent-color-down);
-    --spectrum-radio-emphasized-accent-color-focus: var(--system-radio-emphasized-accent-color-focus);
-    --spectrum-radio-border-width: var(--system-radio-border-width);
-    --spectrum-radio-button-background-color: var(--system-radio-button-background-color);
-    --spectrum-radio-button-checked-border-color-default: var(--system-radio-button-checked-border-color-default);
-    --spectrum-radio-button-checked-border-color-hover: var(--system-radio-button-checked-border-color-hover);
-    --spectrum-radio-button-checked-border-color-down: var(--system-radio-button-checked-border-color-down);
-    --spectrum-radio-button-checked-border-color-focus: var(--system-radio-button-checked-border-color-focus);
-    --spectrum-radio-line-height: var(--system-radio-line-height);
-    --spectrum-radio-animation-duration: var(--system-radio-animation-duration);
-    --spectrum-radio-height: var(--system-radio-height);
-    --spectrum-radio-button-control-size: var(--system-radio-button-control-size);
-    --spectrum-radio-text-to-control: var(--system-radio-text-to-control);
-    --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text);
-    --spectrum-radio-label-bottom-to-text: var(--system-radio-label-bottom-to-text);
-    --spectrum-radio-button-top-to-control: var(--system-radio-button-top-to-control);
-    --spectrum-radio-font-size: var(--system-radio-font-size);
-}
-
-:host(:lang(ja)) {
-    --spectrum-radio-line-height-cjk: var(--system-radio-lang-ja-line-height-cjk);
-}
-
-:host(:lang(zh)) {
-    --spectrum-radio-line-height-cjk: var(--system-radio-lang-zh-line-height-cjk);
-}
-
-:host(:lang(ko)) {
-    --spectrum-radio-line-height-cjk: var(--system-radio-lang-ko-line-height-cjk);
-}
-
-:host {
-    --spectrum-radio-height: var(--system-radio-size-m-height);
-    --spectrum-radio-button-control-size: var(--system-radio-size-m-button-control-size);
-    --spectrum-radio-text-to-control: var(--system-radio-size-m-text-to-control);
-    --spectrum-radio-label-top-to-text: var(--system-radio-size-m-label-top-to-text);
-    --spectrum-radio-label-bottom-to-text: var(--system-radio-size-m-label-bottom-to-text);
-    --spectrum-radio-button-top-to-control: var(--system-radio-size-m-button-top-to-control);
-    --spectrum-radio-font-size: var(--system-radio-size-m-font-size);
-}
-
-:host([size="s"]) {
-    --spectrum-radio-height: var(--system-radio-size-s-height);
-    --spectrum-radio-button-control-size: var(--system-radio-size-s-button-control-size);
-    --spectrum-radio-text-to-control: var(--system-radio-size-s-text-to-control);
-    --spectrum-radio-label-top-to-text: var(--system-radio-size-s-label-top-to-text);
-    --spectrum-radio-label-bottom-to-text: var(--system-radio-size-s-label-bottom-to-text);
-    --spectrum-radio-button-top-to-control: var(--system-radio-size-s-button-top-to-control);
-    --spectrum-radio-font-size: var(--system-radio-size-s-font-size);
-}
-
-:host([size="l"]) {
-    --spectrum-radio-height: var(--system-radio-size-l-height);
-    --spectrum-radio-button-control-size: var(--system-radio-size-l-button-control-size);
-    --spectrum-radio-text-to-control: var(--system-radio-size-l-text-to-control);
-    --spectrum-radio-label-top-to-text: var(--system-radio-size-l-label-top-to-text);
-    --spectrum-radio-label-bottom-to-text: var(--system-radio-size-l-label-bottom-to-text);
-    --spectrum-radio-button-top-to-control: var(--system-radio-size-l-button-top-to-control);
-    --spectrum-radio-font-size: var(--system-radio-size-l-font-size);
-}
-
-:host([size="xl"]) {
-    --spectrum-radio-height: var(--system-radio-size-xl-height);
-    --spectrum-radio-button-control-size: var(--system-radio-size-xl-button-control-size);
-    --spectrum-radio-text-to-control: var(--system-radio-size-xl-text-to-control);
-    --spectrum-radio-label-top-to-text: var(--system-radio-size-xl-label-top-to-text);
-    --spectrum-radio-label-bottom-to-text: var(--system-radio-size-xl-label-bottom-to-text);
-    --spectrum-radio-button-top-to-control: var(--system-radio-size-xl-button-top-to-control);
-    --spectrum-radio-font-size: var(--system-radio-size-xl-font-size);
-}
-
-:host([emphasized]) {
-    --spectrum-radio-button-checked-border-color-default: var(--system-radio-emphasized-button-checked-border-color-default);
-    --spectrum-radio-button-checked-border-color-hover: var(--system-radio-emphasized-button-checked-border-color-hover);
-    --spectrum-radio-button-checked-border-color-down: var(--system-radio-emphasized-button-checked-border-color-down);
-    --spectrum-radio-button-checked-border-color-focus: var(--system-radio-emphasized-button-checked-border-color-focus);
-}
diff --git a/packages/radio/src/radio.css b/packages/radio/src/radio.css
index 892d6fd2353..64de6ca4574 100644
--- a/packages/radio/src/radio.css
+++ b/packages/radio/src/radio.css
@@ -10,24 +10,248 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-radio.css");
-@import url("./radio-overrides.css");
+/* base variables */
+/* Base variables */
+:host {
+    /* colors */
+    --spectrum-radio-button-border-color-default: var(--spectrum-gray-500);
+    --spectrum-radio-button-border-color-hover: var(--spectrum-gray-600);
+    --spectrum-radio-button-border-color-down: var(--spectrum-gray-700);
+    --spectrum-radio-button-border-color-focus: var(--spectrum-gray-800);
+    --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
+    --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
+    --spectrum-radio-disabled-border-color: var(--spectrum-disabled-border-color);
+    --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-default);
+    --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-hover);
+    --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-down);
+    --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-key-focus);
+    --spectrum-radio-button-background-color: var(--spectrum-gray-25);
+    --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-default);
+    --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-hover);
+    --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-down);
+    --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-key-focus);
 
-:host(:focus) {
-    outline: none;
+    /* layout */
+    --spectrum-radio-border-width: var(--spectrum-border-width-200);
+    --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-radio-line-height: var(--spectrum-line-height-100);
+    --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
+    --spectrum-radio-height: var(--spectrum-component-height-100);
+    --spectrum-radio-button-control-size: var(--spectrum-radio-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-component-top-to-control-100);
+    --spectrum-radio-font-size: var(--spectrum-font-size-100);
 }
 
-:host([disabled]) {
-    pointer-events: none;
+/* language-specific line height */
+:host(:lang(ja)) {
+    --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
 }
 
-/**
- * Work around for https://github.com/adobe/spectrum-css/issues/2251
- **/
+:host(:lang(zh)) {
+}
+
+:host(:lang(ko)) {
+}
+
+/* size variants */
+:host,
+:host([size="m"]) {
+}
+
+:host([size="s"]) {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
+
+/* base styles */
+:host {
+    min-block-size: var(--spectrum-radio-height);
+    position: relative;
+    display: inline-flex;
+    align-items: flex-start;
+    line-height: var(--spectrum-radio-line-height);
+}
+
+/* input styles */
+#input {
+    inline-size: var(--spectrum-radio-button-control-size);
+    block-size: var(--spectrum-radio-button-control-size);
+    margin: 0;
+    margin-block-start: var(--spectrum-radio-button-top-to-control);
+    position: absolute;
+    opacity: 0;
+    z-index: 1;
+}
+
+/* button styles */
+#button {
+    display: inline-block;
+    box-sizing: border-box;
+    inline-size: var(--spectrum-radio-button-control-size);
+    block-size: var(--spectrum-radio-button-control-size);
+    background-color: var(--highcontrast-radio-button-background-color, var(--spectrum-radio-button-background-color));
+    border-width: var(--spectrum-radio-border-width);
+    border-color: var(--highcontrast-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default));
+    border-style: solid;
+    border-radius: 50%;
+    transition:
+        border var(--spectrum-radio-animation-duration) ease-in-out,
+        box-shadow var(--spectrum-radio-animation-duration) ease-in-out;
+}
+
+#button:after {
+    content: "";
+    display: block;
+    position: relative;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    transition:
+        opacity var(--spectrum-radio-animation-duration) ease-out,
+        margin var(--spectrum-radio-animation-duration) ease-out;
+    opacity: 0;
+
+    forced-color-adjust: none;
+}
+
+/* label styles */
+#label {
+    margin: 0;
+    font-size: var(--spectrum-radio-font-size);
+    color: var(--highcontrast-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color));
+    line-height: var(--spectrum-radio-line-height);
+    transition: color var(--spectrum-radio-animation-duration) ease-in-out;
+    margin-block-start: 0;
+    margin-inline-start: var(--spectrum-radio-text-to-control);
+}
+
+:host(:lang(ja)),
+:host(:lang(ko)),
+:host(:lang(zh)) {
+    line-height: var(--spectrum-radio-line-height-cjk);
+}
+
+:host(:hover) #button.checked {
+    border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover));
+}
+
+:host(:hover) #label {
+    color: var(--highcontrast-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover));
+}
+
+:host(:hover) #button.emphasized {
+    border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover));
+}
+
+/* active */
+:host(:active) #button {
+    border-color: var(--highcontrast-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down));
+}
+
+:host(:active) #button.checked {
+    border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down));
+}
+
+:host(:active) #label {
+    color: var(--highcontrast-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down));
+}
+
+/* focus */
+:host(:focus-visible) #button {
+    border-color: var(--highcontrast-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus));
+}
+
+:host(:focus-visible) #button:before {
+    content: "";
+    position: absolute;
+    border-color: var(--highcontrast-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color));
+    border-width: var(--spectrum-radio-focus-indicator-thickness);
+    border-style: solid;
+    border-radius: 50%;
+}
+
+:host(:focus-visible) #button.checked {
+    border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus));
+}
+
+:host(:focus-visible) #label {
+    color: var(--highcontrast-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus));
+}
+
+/* checked */
+#button.checked {
+    border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default));
+}
+
+/* emphasized */
+#button.emphasized {
+    border-color: var(--highcontrast-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color));
+}
+
+:host(:active) #button.emphasized {
+    border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down));
+}
+
+:host(:focus-visible) #button.emphasized {
+    border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus));
+}
+
+/* disabled */
+:host([disabled]) #button {
+    border-color: var(--highcontrast-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color));
+}
+
+:host([disabled]) #label {
+    color: var(--highcontrast-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color));
+}
+
+:host([disabled]) #button:after {
+    opacity: 0;
+}
+
+:host([disabled]) #button.checked:after {
+    opacity: 1;
+}
+
+:host([disabled]) #button.emphasized {
+    color: var(--highcontrast-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color));
+}
+
+/* readonly */
+:host([readonly]) #input:read-only {
+    cursor: auto;
+}
+
+:host([readonly]) #button {
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    position: fixed;
+    inset-block-end: 100%;
+    inset-inline-end: 100%;
+}
+
+:host([readonly][checked][disabled]) #input ~ #label,
+:host([readonly][disabled]) #input ~ #label,
+:host([readonly]) #label {
+    color: var(--highcontrast-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color));
+    margin-inline-start: 0;
+}
+
+/* rTL Support */
+:host:dir(rtl) #button:after,
 :host([dir="rtl"]) #button:after {
     transform: translateX(50%) translateY(-50%);
 }
-
-/**
- * End workaround
- **/
diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css
deleted file mode 100644
index 9bffd22f1e1..00000000000
--- a/packages/radio/src/spectrum-radio.css
+++ /dev/null
@@ -1,235 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-radio-neutral-content-color: CanvasText;
-        --highcontrast-radio-neutral-content-color-hover: CanvasText;
-        --highcontrast-radio-neutral-content-color-down: CanvasText;
-        --highcontrast-radio-neutral-content-color-focus: CanvasText;
-        --highcontrast-radio-button-border-color-default: ButtonText;
-        --highcontrast-radio-button-border-color-hover: Highlight;
-        --highcontrast-radio-button-border-color-down: ButtonText;
-        --highcontrast-radio-button-border-color-focus: Highlight;
-        --highcontrast-radio-emphasized-accent-color: ButtonText;
-        --highcontrast-radio-emphasized-accent-color-hover: Highlight;
-        --highcontrast-radio-emphasized-accent-color-down: ButtonText;
-        --highcontrast-radio-emphasized-accent-color-focus: Highlight;
-        --highcontrast-radio-button-checked-border-color-default: Highlight;
-        --highcontrast-radio-button-checked-border-color-hover: Highlight;
-        --highcontrast-radio-button-checked-border-color-down: Highlight;
-        --highcontrast-radio-button-checked-border-color-focus: Highlight;
-        --highcontrast-radio-disabled-content-color: GrayText;
-        --highcontrast-radio-disabled-border-color: GrayText;
-        --highcontrast-radio-focus-indicator-color: CanvasText;
-    }
-
-    #button:after {
-        forced-color-adjust: none;
-    }
-}
-
-:host {
-    vertical-align: top;
-    min-block-size: var(--mod-radio-height, var(--spectrum-radio-height));
-    max-inline-size: 100%;
-    align-items: flex-start;
-    display: inline-flex;
-    position: relative;
-}
-
-:host(:active) #button:before {
-    border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down)));
-}
-
-:host(:active[checked]) #input + #button:before {
-    border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down)));
-}
-
-:host(:active) #label {
-    color: var(--highcontrast-radio-neutral-content-color-down, var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down)));
-}
-
-:host(:focus-visible) #button:before {
-    border-color: var(--highcontrast-radio-button-border-color-focus, var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus)));
-}
-
-:host(:focus-visible) #button:after {
-    border-style: solid;
-    border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)));
-    border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness));
-    inline-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2);
-    block-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2);
-}
-
-:host(:focus-visible[checked]) #input + #button:before {
-    border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus)));
-}
-
-:host(:focus-visible) #label {
-    color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus)));
-}
-
-:host([readonly]) #input:read-only {
-    cursor: auto;
-}
-
-:host([readonly]) #button {
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    position: fixed;
-    inset-block-end: 100%;
-    inset-inline-end: 100%;
-}
-
-:host([readonly][checked][disabled]) #input ~ #label,
-:host([readonly][disabled]) #input ~ #label,
-:host([readonly]) #label {
-    color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
-    margin-inline-start: 0;
-}
-
-:host([emphasized][checked]) #input + #button:before {
-    border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color)));
-}
-
-@media (hover: hover) {
-    :host(:hover) #button:before {
-        border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover)));
-    }
-
-    :host([checked]:hover) #input + #button:before {
-        border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover)));
-    }
-
-    :host(:hover) #label {
-        color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover)));
-    }
-
-    :host([emphasized][checked]:hover) #input + #button:before {
-        border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover)));
-    }
-}
-
-:host([emphasized]:active[checked]) #input + #button:before {
-    border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down)));
-}
-
-:host([emphasized]:focus-visible[checked]) #input + #button:before {
-    border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus)));
-}
-
-:host([checked][disabled]) #input + #button:before,
-:host([disabled]) #input + #button:before {
-    border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color)));
-}
-
-:host([checked][disabled]) #input ~ #label,
-:host([disabled]) #input ~ #label {
-    color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color)));
-}
-
-#input {
-    font-family: inherit;
-    font-size: 100%;
-    line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
-    box-sizing: border-box;
-    inline-size: 100%;
-    block-size: 100%;
-    opacity: 0;
-    z-index: 1;
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    overflow: visible;
-}
-
-:host([disabled]) #input {
-    cursor: default;
-}
-
-:host([checked]) #input + #button:before {
-    border-width: calc(var(--spectrum-radio-button-control-size) / 2 - var(--spectrum-radio-button-selection-indicator) / 2);
-    border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default)));
-}
-
-#input:focus-visible + #button:after {
-    border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness));
-    border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)));
-    inline-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2);
-    block-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2);
-    border-style: solid;
-}
-
-#label {
-    text-align: start;
-    font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size));
-    color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
-    line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
-    transition: color var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;
-    margin-block-start: var(--spectrum-radio-label-top-to-text);
-    margin-block-end: var(--spectrum-radio-label-bottom-to-text);
-    margin-inline-start: var(--mod-radio-text-to-control, var(--spectrum-radio-text-to-control));
-}
-
-#label:lang(ja),
-#label:lang(ko),
-#label:lang(zh) {
-    line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk));
-}
-
-#button {
-    box-sizing: border-box;
-    inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
-    block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin-block-start: var(--mod-radio-button-top-to-control, var(--spectrum-radio-button-top-to-control));
-    position: relative;
-}
-
-#button:before {
-    z-index: 0;
-    content: "";
-    box-sizing: border-box;
-    inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
-    block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
-    background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)));
-    border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width));
-    border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default)));
-    transition:
-        border var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out,
-        box-shadow var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;
-    border-style: solid;
-    border-radius: 50%;
-    display: block;
-    position: absolute;
-}
-
-#button:after {
-    content: "";
-    transition:
-        opacity var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out,
-        margin var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out;
-    border-radius: 50%;
-    display: block;
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    transform: translateX(-50%) translateY(-50%);
-}
-
-:host:dir(rtl) #button:after,
-:host([dir="rtl"]) #button:after {
-    transform: translateX(50%) translateY(-50%);
-}
diff --git a/packages/search/package.json b/packages/search/package.json
index 5ff50df5068..7d0a0b6abde 100644
--- a/packages/search/package.json
+++ b/packages/search/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/search-overrides.css.js": "./src/search-overrides.css.js",
         "./src/search.css.js": "./src/search.css.js",
         "./sp-search.js": {
             "development": "./sp-search.dev.js",
diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css
deleted file mode 100644
index 4f6b7d9c473..00000000000
--- a/packages/search/src/search-overrides.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-search-border-color-default: var(--system-search-border-color-default);
-    --spectrum-search-border-color-hover: var(--system-search-border-color-hover);
-    --spectrum-search-border-color-focus: var(--system-search-border-color-focus);
-    --spectrum-search-border-color-focus-hover: var(--system-search-border-color-focus-hover);
-    --spectrum-search-border-color-key-focus: var(--system-search-border-color-key-focus);
-    --spectrum-search-background-color: var(--system-search-background-color);
-    --spectrum-search-background-color-disabled: var(--system-search-background-color-disabled);
-    --spectrum-search-border-color-disabled: var(--system-search-border-color-disabled);
-    --spectrum-search-border-radius: var(--system-search-border-radius);
-    --spectrum-search-edge-to-visual: var(--system-search-edge-to-visual);
-}
-
-:host([size="m"]) #textfield {
-    --spectrum-search-border-radius: var(--system-search-size-m-border-radius);
-    --spectrum-search-edge-to-visual: var(--system-search-size-m-edge-to-visual);
-}
-
-:host([quiet]) {
-    --spectrum-search-background-color-disabled: var(--system-search-quiet-background-color-disabled);
-    --spectrum-search-border-color-disabled: var(--system-search-quiet-border-color-disabled);
-}
diff --git a/packages/search/src/search.css b/packages/search/src/search.css
index 33d7969db7a..0bc9d5ede7b 100644
--- a/packages/search/src/search.css
+++ b/packages/search/src/search.css
@@ -10,42 +10,189 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-search.css");
-@import url("./search-overrides.css");
-
+/* base variables */
+/* Base variables */
 :host {
+    /* colors */
+    --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-800);
+    --spectrum-search-background-color: var(--spectrum-gray-25);
+    --spectrum-search-background-color-disabled: var(--spectrum-gray-25);
+    --spectrum-search-border-color-disabled: var(--spectrum-gray-300);
+    --spectrum-search-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus);
+    --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
+    --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
+
+    /* dimensions */
+    --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+    --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
+    --spectrum-search-inline-size: var(--spectrum-field-width);
+    --spectrum-search-block-size: var(--spectrum-component-height-100);
+    --spectrum-search-button-inline-size: var(--spectrum-search-block-size);
+    --spectrum-search-min-inline-size: calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size));
+    --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100);
+    --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100);
+    --spectrum-search-to-help-text: var(--spectrum-help-text-to-component);
+    --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100);
+    --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+    --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color);
+    --spectrum-search-border-width: var(--spectrum-border-width-100);
+
+    /* typography */
+    --spectrum-search-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-search-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-search-font-style: var(--spectrum-default-font-style);
+    --spectrum-search-line-height: var(--spectrum-line-height-100);
+
+    /* textfield overrides */
     --mod-textfield-spacing-inline: var(--spectrum-alias-infieldbutton-full-height-m);
 }
 
-input::-webkit-search-cancel-button {
-    display: none;
+/* size variants */
+:host([size="s"]) #textfield {
 }
 
-:host([size="s"]) #textfield {
-    --spectrum-search-border-radius: var(--system-search-size-s-border-radius);
-    --spectrum-search-edge-to-visual: var(--system-search-size-s-edge-to-visual);
+:host([size="m"]) #textfield {
 }
 
 :host([size="l"]) #textfield {
-    --spectrum-search-border-radius: var(--system-search-size-l-border-radius);
-    --spectrum-search-edge-to-visual: var(--system-search-size-l-edge-to-visual);
 }
 
 :host([size="xl"]) #textfield {
-    --spectrum-search-border-radius: var(--system-search-size-xl-border-radius);
-    --spectrum-search-edge-to-visual: var(--system-search-size-xl-edge-to-visual);
 }
 
-/**
- * While overriding the need for `size="m"` in SWC, these values correct the
- * cascade when attempting to delivery the Clear Button within the Search UI.
- **/
-@media (forced-colors: active) {
-    sp-clear-button {
-        --spectrum-clearbutton-fill-background-color: transparent;
-        --spectrum-clearbutton-fill-background-color-disabled: transparent;
-        --spectrum-clearbutton-fill-background-color-down: transparent;
-        --spectrum-clearbutton-fill-background-color-hover: transparent;
-        --spectrum-clearbutton-fill-background-color-key-focus: transparent;
-    }
+/* textfield styles */
+#textfield {
+    --mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family));
+    --mod-textfield-font-weight: var(--mod-search-font-weight, var(--spectrum-search-font-weight));
+    --mod-textfield-corner-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
+    --mod-textfield-border-width: var(--mod-search-border-width, var(--spectrum-search-border-width));
+    --mod-textfield-focus-indicator-gap: var(--mod-search-focus-indicator-gap, var(--spectrum-search-focus-indicator-gap));
+    --mod-textfield-focus-indicator-width: var(--mod-search-focus-indicator-thickness, var(--spectrum-search-focus-indicator-thickness));
+    --mod-textfield-focus-indicator-color: var(--mod-search-focus-indicator-color, var(--spectrum-search-focus-indicator-color));
+    --mod-textfield-text-color-default: var(--mod-search-color-default, var(--spectrum-search-color-default));
+    --mod-textfield-text-color-hover: var(--mod-search-color-hover, var(--spectrum-search-color-hover));
+    --mod-textfield-text-color-focus: var(--mod-search-color-focus, var(--spectrum-search-color-focus));
+    --mod-textfield-text-color-focus-hover: var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover));
+    --mod-textfield-text-color-keyboard-focus: var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus));
+    --mod-textfield-text-color-disabled: var(--mod-search-color-disabled, var(--spectrum-search-color-disabled));
+    --mod-textfield-border-color: var(--mod-search-border-color-default, var(--spectrum-search-border-color-default));
+    --mod-textfield-border-color-hover: var(--mod-search-border-color-hover, var(--spectrum-search-border-color-hover));
+    --mod-textfield-border-color-focus: var(--mod-search-border-color-focus, var(--spectrum-search-border-color-focus));
+    --mod-textfield-border-color-focus-hover: var(--mod-search-border-color-focus-hover, var(--spectrum-search-border-color-focus-hover));
+    --mod-textfield-border-color-keyboard-focus: var(--mod-search-border-color-key-focus, var(--spectrum-search-border-color-key-focus));
+    --mod-textfield-border-color-disabled: var(--mod-search-border-color-disabled, var(--spectrum-search-border-color-disabled));
+    --mod-textfield-background-color: var(--mod-search-background-color, var(--spectrum-search-background-color));
+    --mod-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled));
+    inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size));
+    min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size));
+    display: inline-block;
+    position: relative;
+}
+
+#textfield .spectrum-HelpText {
+    margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text));
+}
+
+/* input styles */
+.input {
+    appearance: none;
+    block-size: var(--mod-search-block-size, var(--spectrum-search-block-size));
+    font-style: var(--mod-search-font-style, var(--spectrum-search-font-style));
+    line-height: var(--mod-search-line-height, var(--spectrum-search-line-height));
+    padding-block-start: calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));
+    padding-block-end: calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));
+}
+
+/* hide native search UI */
+input::-webkit-search-cancel-button,
+.input::-webkit-search-cancel-button,
+.input::-webkit-search-decoration {
+    display: none;
+    appearance: none;
+}
+
+/* search icon styles */
+.icon-search {
+    --spectrum-search-color: var(--highcontrast-search-color-default, var(--mod-search-color-default, var(--spectrum-search-color-default)));
+    color: var(--spectrum-search-color);
+    margin-block: auto;
+    display: block;
+    position: absolute;
+    inset-block: 0;
+}
+
+#textfield.is-focused .icon-search {
+}
+
+#textfield.is-keyboardFocused .icon-search {
+}
+
+#textfield.is-disabled .icon-search {
+}
+
+/* clear button styles */
+#button {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+}
+
+#button,
+#button .spectrum-ClearButton-fill {
+    border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
+}
+
+#textfield.is-disabled #button {
+    display: none;
+}
+
+/* layout variants */
+:host(:not([quiet])) #textfield .icon-search {
+    inset-inline-start: var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual));
+}
+
+:host(:not([quiet])) #textfield .input {
+    padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + 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));
+}
+
+/* quiet variant */
+:host([quiet]) {
+    --mod-search-border-radius: 0;
+    --mod-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet);
+}
+
+:host([quiet]) .input {
+    border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
+    padding-block-start: var(--mod-search-top-to-text, var(--spectrum-search-top-to-text));
+    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));
+}
+
+#textfield.is-focused:hover .icon-search {
+}
+
+#textfield.is-disabled:hover .icon-search {
+}
+
+#textfield #button .spectrum-ClearButton-fill {
+    forced-color-adjust: none;
+    background-color: initial;
+}
+
+sp-clear-button {
+    --spectrum-clearbutton-fill-background-color: transparent;
+    --spectrum-clearbutton-fill-background-color-disabled: transparent;
+    --spectrum-clearbutton-fill-background-color-down: transparent;
+    --spectrum-clearbutton-fill-background-color-hover: transparent;
+    --spectrum-clearbutton-fill-background-color-key-focus: transparent;
 }
diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css
deleted file mode 100644
index 91ba2d6eeb9..00000000000
--- a/packages/search/src/spectrum-search.css
+++ /dev/null
@@ -1,191 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-#textfield {
-    --spectrum-search-inline-size: var(--spectrum-field-width);
-    --spectrum-search-block-size: var(--spectrum-component-height-100);
-    --spectrum-search-button-inline-size: var(--spectrum-search-block-size);
-    --spectrum-search-min-inline-size: calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size));
-    --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100);
-    --spectrum-search-to-help-text: var(--spectrum-help-text-to-component);
-    --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100);
-    --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-    --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --spectrum-search-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-search-font-weight: var(--spectrum-regular-font-weight);
-    --spectrum-search-font-style: var(--spectrum-default-font-style);
-    --spectrum-search-line-height: var(--spectrum-line-height-100);
-    --spectrum-search-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus);
-    --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
-    --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-search-border-width: var(--spectrum-border-width-100);
-    --spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
-    --mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family));
-    --mod-textfield-font-weight: var(--mod-search-font-weight, var(--spectrum-search-font-weight));
-    --mod-textfield-corner-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
-    --mod-textfield-border-width: var(--mod-search-border-width, var(--spectrum-search-border-width));
-    --mod-textfield-focus-indicator-gap: var(--mod-search-focus-indicator-gap, var(--spectrum-search-focus-indicator-gap));
-    --mod-textfield-focus-indicator-width: var(--mod-search-focus-indicator-thickness, var(--spectrum-search-focus-indicator-thickness));
-    --mod-textfield-focus-indicator-color: var(--mod-search-focus-indicator-color, var(--spectrum-search-focus-indicator-color));
-    --mod-textfield-text-color-default: var(--mod-search-color-default, var(--spectrum-search-color-default));
-    --mod-textfield-text-color-hover: var(--mod-search-color-hover, var(--spectrum-search-color-hover));
-    --mod-textfield-text-color-focus: var(--mod-search-color-focus, var(--spectrum-search-color-focus));
-    --mod-textfield-text-color-focus-hover: var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover));
-    --mod-textfield-text-color-keyboard-focus: var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus));
-    --mod-textfield-text-color-disabled: var(--mod-search-color-disabled, var(--spectrum-search-color-disabled));
-    --mod-textfield-border-color: var(--mod-search-border-color-default, var(--spectrum-search-border-color-default));
-    --mod-textfield-border-color-hover: var(--mod-search-border-color-hover, var(--spectrum-search-border-color-hover));
-    --mod-textfield-border-color-focus: var(--mod-search-border-color-focus, var(--spectrum-search-border-color-focus));
-    --mod-textfield-border-color-focus-hover: var(--mod-search-border-color-focus-hover, var(--spectrum-search-border-color-focus-hover));
-    --mod-textfield-border-color-keyboard-focus: var(--mod-search-border-color-key-focus, var(--spectrum-search-border-color-key-focus));
-    --mod-textfield-border-color-disabled: var(--mod-search-border-color-disabled, var(--spectrum-search-border-color-disabled));
-    --mod-textfield-background-color: var(--mod-search-background-color, var(--spectrum-search-background-color));
-    --mod-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled));
-    inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size));
-    min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size));
-    display: inline-block;
-    position: relative;
-}
-
-#textfield .spectrum-HelpText {
-    margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text));
-}
-
-:host([size="s"]) #textfield {
-    --spectrum-search-block-size: var(--spectrum-component-height-75);
-    --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75);
-    --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75);
-}
-
-:host([size="l"]) #textfield {
-    --spectrum-search-block-size: var(--spectrum-component-height-200);
-    --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200);
-    --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200);
-}
-
-:host([size="xl"]) #textfield {
-    --spectrum-search-block-size: var(--spectrum-component-height-300);
-    --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300);
-    --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
-}
-
-@media (forced-colors: active) {
-    #textfield #textfield,
-    #textfield #textfield .input {
-        --highcontrast-search-color-default: CanvasText;
-        --highcontrast-search-color-hover: CanvasText;
-        --highcontrast-search-color-focus: CanvasText;
-        --highcontrast-search-color-disabled: GrayText;
-    }
-
-    #textfield #button .spectrum-ClearButton-fill {
-        forced-color-adjust: none;
-        background-color: initial;
-    }
-}
-
-#button {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-}
-
-#button,
-#button .spectrum-ClearButton-fill {
-    border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
-}
-
-#textfield.is-disabled #button {
-    display: none;
-}
-
-#textfield {
-    inline-size: 100%;
-}
-
-.icon-search {
-    --spectrum-search-color: var(--highcontrast-search-color-default, var(--mod-search-color-default, var(--spectrum-search-color-default)));
-    color: var(--spectrum-search-color);
-    margin-block: auto;
-    display: block;
-    position: absolute;
-    inset-block: 0;
-}
-
-#textfield.is-focused .icon-search {
-    --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus, var(--spectrum-search-color-focus)));
-}
-
-#textfield.is-keyboardFocused .icon-search {
-    --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus)));
-}
-
-#textfield.is-disabled .icon-search {
-    --spectrum-search-color: var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)));
-}
-
-@media (hover: hover) {
-    #textfield:hover .icon-search {
-        --spectrum-search-color: var(--highcontrast-search-color-hover, var(--mod-search-color-hover, var(--spectrum-search-color-hover)));
-    }
-
-    #textfield.is-focused:hover .icon-search {
-        --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover)));
-    }
-
-    #textfield.is-disabled:hover .icon-search {
-        --spectrum-search-color: var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)));
-    }
-}
-
-.input {
-    appearance: none;
-    block-size: var(--mod-search-block-size, var(--spectrum-search-block-size));
-    font-style: var(--mod-search-font-style, var(--spectrum-search-font-style));
-    line-height: var(--mod-search-line-height, var(--spectrum-search-line-height));
-    padding-block-start: calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));
-    padding-block-end: calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));
-}
-
-.input::-webkit-search-cancel-button,
-.input::-webkit-search-decoration {
-    appearance: none;
-}
-
-:host(:not([quiet])) #textfield .icon-search {
-    inset-inline-start: var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual));
-}
-
-:host(:not([quiet])) #textfield .input {
-    padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + 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));
-}
-
-:host([quiet]) {
-    --spectrum-search-background-color: transparent;
-    --spectrum-search-background-color-disabled: transparent;
-    --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
-    --mod-search-border-radius: 0;
-    --mod-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet);
-}
-
-:host([quiet]) .input {
-    border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
-    padding-block-start: var(--mod-search-top-to-text, var(--spectrum-search-top-to-text));
-    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/packages/sidenav/package.json b/packages/sidenav/package.json
index 6275013b989..efb637b6139 100644
--- a/packages/sidenav/package.json
+++ b/packages/sidenav/package.json
@@ -41,11 +41,8 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/sidenav-heading-overrides.css.js": "./src/sidenav-heading-overrides.css.js",
         "./src/sidenav-heading.css.js": "./src/sidenav-heading.css.js",
-        "./src/sidenav-item-overrides.css.js": "./src/sidenav-item-overrides.css.js",
         "./src/sidenav-item.css.js": "./src/sidenav-item.css.js",
-        "./src/sidenav-overrides.css.js": "./src/sidenav-overrides.css.js",
         "./src/sidenav.css.js": "./src/sidenav.css.js",
         "./sp-sidenav.js": {
             "development": "./sp-sidenav.dev.js",
diff --git a/packages/sidenav/src/sidenav-heading-overrides.css b/packages/sidenav/src/sidenav-heading-overrides.css
deleted file mode 100644
index c4099ad0eaf..00000000000
--- a/packages/sidenav/src/sidenav-heading-overrides.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-#list {
-    --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover);
-    --spectrum-sidenav-item-background-down: var(--system-side-nav-item-background-down);
-    --spectrum-sidenav-background-key-focus: var(--system-side-nav-background-key-focus);
-    --spectrum-sidenav-item-background-default-selected: var(--system-side-nav-item-background-default-selected);
-    --spectrum-sidenav-background-hover-selected: var(--system-side-nav-background-hover-selected);
-    --spectrum-sidenav-item-background-down-selected: var(--system-side-nav-item-background-down-selected);
-    --spectrum-sidenav-background-key-focus-selected: var(--system-side-nav-background-key-focus-selected);
-}
diff --git a/packages/sidenav/src/sidenav-heading.css b/packages/sidenav/src/sidenav-heading.css
index e702ab720a7..57f22d68308 100644
--- a/packages/sidenav/src/sidenav-heading.css
+++ b/packages/sidenav/src/sidenav-heading.css
@@ -10,9 +10,91 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-sidenav-heading.css");
-@import url("./sidenav-heading-overrides.css");
-
+/* Base variables */
 :host {
     display: block;
 }
+
+/* sidenav heading tokens */
+#list {
+    --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-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);
+    --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
+    --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color);
+    --spectrum-sidenav-min-height: var(--spectrum-component-height-100);
+    --spectrum-sidenav-width: 100%;
+    --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width);
+    --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width);
+    --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100);
+    --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100);
+    --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100);
+    --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100);
+    --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item);
+    --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
+    --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100);
+    --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text);
+    --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text);
+    --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header);
+    --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item);
+    --spectrum-sidenav-background-disabled: transparent;
+    --spectrum-sidenav-background-default: transparent;
+    --spectrum-sidenav-header-color: var(--spectrum-gray-600);
+    --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color);
+    --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default);
+    --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover);
+    --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down);
+    --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style);
+    --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
+    --spectrum-sidenav-text-line-height: var(--spectrum-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);
+    --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);
+
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+}
+
+/* cJK support */
+#list:lang(ja),
+#list:lang(ko),
+#list:lang(zh) {
+}
+
+/* heading styles */
+#heading {
+    padding-inline: var(--spectrum-sidenav-inline-padding);
+    color: var(--spectrum-sidenav-header-color);
+    font-family: var(--spectrum-sidenav-header-font-family);
+    font-size: var(--spectrum-sidenav-header-font-size);
+    font-weight: var(--spectrum-sidenav-header-font-weight);
+    font-style: var(--spectrum-sidenav-header-font-style);
+    line-height: var(--spectrum-sidenav-header-line-height);
+    margin-block-start: calc(var(--spectrum-sidenav-heading-top-margin) - var(--spectrum-sidenav-gap));
+    margin-block-end: var(--spectrum-sidenav-heading-bottom-margin);
+}
diff --git a/packages/sidenav/src/sidenav-item-overrides.css b/packages/sidenav/src/sidenav-item-overrides.css
deleted file mode 100644
index c4099ad0eaf..00000000000
--- a/packages/sidenav/src/sidenav-item-overrides.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-#list {
-    --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover);
-    --spectrum-sidenav-item-background-down: var(--system-side-nav-item-background-down);
-    --spectrum-sidenav-background-key-focus: var(--system-side-nav-background-key-focus);
-    --spectrum-sidenav-item-background-default-selected: var(--system-side-nav-item-background-default-selected);
-    --spectrum-sidenav-background-hover-selected: var(--system-side-nav-background-hover-selected);
-    --spectrum-sidenav-item-background-down-selected: var(--system-side-nav-item-background-down-selected);
-    --spectrum-sidenav-background-key-focus-selected: var(--system-side-nav-background-key-focus-selected);
-}
diff --git a/packages/sidenav/src/sidenav-item.css b/packages/sidenav/src/sidenav-item.css
index 4a9a1038616..f48880cdc99 100644
--- a/packages/sidenav/src/sidenav-item.css
+++ b/packages/sidenav/src/sidenav-item.css
@@ -10,17 +10,226 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-sidenav-item.css");
-@import url("./sidenav-item-overrides.css");
+#list {
+    --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
+    --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color);
+    --spectrum-sidenav-min-height: var(--spectrum-component-height-100);
+    --spectrum-sidenav-width: 100%;
+    --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width);
+    --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width);
+    --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100);
+    --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100);
+    --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100);
+    --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100);
+    --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item);
+    --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
+    --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100);
+    --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text);
+    --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text);
+    --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header);
+    --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item);
+    --spectrum-sidenav-background-disabled: transparent;
+    --spectrum-sidenav-background-default: transparent;
+    --spectrum-sidenav-header-color: var(--spectrum-gray-600);
+    --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color);
+    --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default);
+    --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover);
+    --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down);
+    --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style);
+    --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
+    --spectrum-sidenav-text-line-height: var(--spectrum-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);
+    --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);
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+}
+
+#list:lang(ja),
+#list:lang(ko),
+#list:lang(zh) {
+}
 
+/* Base variables */
 :host {
-    display: block;
+    margin-inline: 0;
+    list-style-type: none;
 }
 
 :host([disabled]) {
+    background-color: var(--spectrum-sidenav-background-disabled);
+    color: var(--highcontrast-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color));
+
     pointer-events: none;
 }
 
+:host([selected]) {
+    background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected));
+    color: var(--highcontrast-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected));
+}
+
+:host([selected]:active) {
+    background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected));
+    color: var(--spectrum-sidenav-content-color-down-selected);
+}
+
+:host([selected]:focus-visible) {
+    background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected));
+    color: var(--spectrum-sidenav-content-color-key-focus-selected);
+}
+
+:host {
+    --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;
+    padding-inline: var(--spectrum-sidenav-inline-padding);
+    border-radius: var(--spectrum-sidenav-border-radius);
+    background-color: var(--spectrum-sidenav-background-default);
+    color: var(--highcontrast-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default));
+    inline-size: var(--spectrum-sidenav-width);
+    min-inline-size: var(--spectrum-sidenav-min-width);
+    max-inline-size: var(--spectrum-sidenav-max-width);
+    min-block-size: var(--spectrum-sidenav-min-height);
+    font-family: var(--spectrum-sidenav-text-font-family);
+    font-size: var(--spectrum-sidenav-text-font-size);
+    font-weight: var(--spectrum-sidenav-text-font-weight);
+    font-style: var(--spectrum-sidenav-text-font-style);
+    line-height: var(--spectrum-sidenav-text-line-height);
+    margin-block-end: var(--spectrum-sidenav-gap);
+
+    display: block;
+    forced-color-adjust: none;
+}
+
+.label {
+    margin-block-start: var(--spectrum-sidenav-top-to-label);
+    margin-block-end: var(--spectrum-sidenav-bottom-to-label);
+}
+
+::slotted([slot="icon"]) {
+    inline-size: var(--spectrum-sidenav-icon-size);
+    block-size: var(--spectrum-sidenav-icon-size);
+    margin-block-start: var(--spectrum-sidenav-top-to-icon);
+    margin-inline-end: var(--spectrum-sidenav-icon-spacing);
+}
+
+:host([selected]:hover) {
+    background-color: var(--highcontrast-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected));
+    color: var(--spectrum-sidenav-content-color-hover-selected);
+}
+
+:host(:hover) {
+    background-color: var(--highcontrast-sidenav-background-hover, var(--spectrum-sidenav-background-hover));
+    color: var(--highcontrast-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover));
+}
+
+:host(:active) {
+    background-color: var(--highcontrast-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down));
+    color: var(--highcontrast-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down));
+}
+
+#item-link {
+    padding-inline: var(--spectrum-sidenav-inline-padding);
+    box-sizing: border-box;
+    word-break: break-all;
+    hyphens: auto;
+    cursor: pointer;
+    transition:
+        background-color var(--spectrum-animation-duration-100) ease-out,
+        color var(--spectrum-animation-duration-100) ease-out;
+    border-radius: var(--spectrum-sidenav-border-radius);
+    background-color: var(--spectrum-sidenav-background-default);
+    color: var(--highcontrast-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default));
+    inline-size: var(--spectrum-sidenav-width);
+    min-inline-size: var(--spectrum-sidenav-min-width);
+    max-inline-size: var(--spectrum-sidenav-max-width);
+    min-block-size: var(--spectrum-sidenav-min-height);
+    font-family: var(--spectrum-sidenav-text-font-family);
+    font-size: var(--spectrum-sidenav-text-font-size);
+    font-weight: var(--spectrum-sidenav-text-font-weight);
+    font-style: var(--spectrum-sidenav-text-font-style);
+    line-height: var(--spectrum-sidenav-text-line-height);
+    justify-content: start;
+    margin-block-end: var(--spectrum-sidenav-gap);
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+}
+
+#item-link #link-text {
+    margin-block-start: var(--spectrum-sidenav-top-to-label);
+    margin-block-end: var(--spectrum-sidenav-bottom-to-label);
+}
+
+#item-link[data-level] {
+    color: var(--highcontrast-sidenav-top-level-font-color);
+    font-family: var(--spectrum-sidenav-top-level-font-family);
+    font-weight: var(--spectrum-sidenav-top-level-font-weight);
+    font-style: var(--spectrum-sidenav-top-level-font-style);
+    font-size: var(--spectrum-sidenav-top-level-font-size);
+    line-height: var(--spectrum-sidenav-top-level-line-height);
+}
+
+#item-link:not([data-level="0"]) {
+    font-weight: var(--spectrum-sidenav-text-font-weight);
+    padding-inline-start: var(--spectrum-sidenav-start-to-content-second-level);
+}
+
+#item-link[data-level="2"] {
+    padding-inline-start: var(--spectrum-sidenav-start-to-content-third-level);
+}
+
+.spectrum-SideNav--hasIcon#item-link:not([data-level="0"]) {
+    padding-inline-start: var(--spectrum-sidenav-start-to-content-with-icon-second-level);
+}
+
+.spectrum-SideNav--hasIcon#item-link[data-level="2"] {
+    padding-inline-start: var(--spectrum-sidenav-start-to-content-with-icon-third-level);
+}
+
+/* sidenav tokens */
+#list {
+    --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-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);
+}
+
 a ::slotted(sp-sidenav-item) {
     display: none;
 }
diff --git a/packages/sidenav/src/sidenav-overrides.css b/packages/sidenav/src/sidenav-overrides.css
deleted file mode 100644
index d5a91cc7cf8..00000000000
--- a/packages/sidenav/src/sidenav-overrides.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover);
-    --spectrum-sidenav-item-background-down: var(--system-side-nav-item-background-down);
-    --spectrum-sidenav-background-key-focus: var(--system-side-nav-background-key-focus);
-    --spectrum-sidenav-item-background-default-selected: var(--system-side-nav-item-background-default-selected);
-    --spectrum-sidenav-background-hover-selected: var(--system-side-nav-background-hover-selected);
-    --spectrum-sidenav-item-background-down-selected: var(--system-side-nav-item-background-down-selected);
-    --spectrum-sidenav-background-key-focus-selected: var(--system-side-nav-background-key-focus-selected);
-}
diff --git a/packages/sidenav/src/sidenav.css b/packages/sidenav/src/sidenav.css
index 9c7e8fa87fa..4e4fc360dec 100644
--- a/packages/sidenav/src/sidenav.css
+++ b/packages/sidenav/src/sidenav.css
@@ -10,16 +10,237 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-sidenav.css");
-@import url("./sidenav-overrides.css");
+/* Component structure:
+ * The sidenav component provides a hierarchical navigation structure with up to three levels.
+ * Each level can contain items with or without icons, and the spacing adjusts accordingly.
+ * The component supports various states: default, hover, selected, and disabled.
+ */
 
+/* Base variables */
 :host {
-    display: block;
-    width: 240px;
+    --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
+    --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color);
+    --spectrum-sidenav-min-height: var(--spectrum-component-height-100);
+    --spectrum-sidenav-width: 100%;
+    --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width);
+    --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width);
+    --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100);
+    --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100);
+    --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100);
+    --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100);
+    --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item);
+    --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
+    --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100);
+    --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text);
+    --spectrum-sidenav-start-to-content-first-level: var(--spectrum-side-navigation-first-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text);
+    --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text);
+    --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header);
+    --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item);
+    --spectrum-sidenav-background-disabled: transparent;
+    --spectrum-sidenav-background-default: transparent;
+    --spectrum-sidenav-header-color: var(--spectrum-gray-600);
+    --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color);
+    --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default);
+    --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover);
+    --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down);
+    --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style);
+    --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
+    --spectrum-sidenav-text-line-height: var(--spectrum-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);
+    --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);
+
+    /* layout */
+
+    /* spacing */
+
+    /* typography */
+
+    /* colors */
+
+    /* states */
+    --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-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);
+
+    /* focus */
+
+    display: flex;
+    inline-size: 240px;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+/* CJK language support */
+:host(:lang(ja), :lang(ko), :lang(zh)) {
+}
+
+/* High contrast mode adjustments */
+#item-link {
+    forced-color-adjust: none;
+}
 
-    --spectrum-web-component-sidenav-font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight));
+#list ::slotted([slot="icon"]) {
+    forced-color-adjust: none;
+    color: ButtonText;
 }
 
+.spectrum-Icon {
+    forced-color-adjust: preserve-parent-color;
+}
+
+/* Not multilevel variant */
 :host(:not([variant="multilevel"])) {
-    --mod-sidenav-top-level-font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight));
+}
+
+/* Sidenav item */
+:host([role="listitem"]) {
+    margin-inline: 0;
+    list-style-type: none;
+}
+
+/* item link */
+#item-link {
+    padding-inline: var(--spectrum-sidenav-inline-padding);
+    box-sizing: border-box;
+    word-break: break-all;
+    hyphens: auto;
+    cursor: pointer;
+    transition:
+        background-color var(--spectrum-animation-duration-100) ease-out,
+        color var(--spectrum-animation-duration-100) ease-out;
+    border-radius: var(--spectrum-sidenav-border-radius);
+    background-color: var(--spectrum-sidenav-background-default);
+    color: var(--highcontrast-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default));
+    inline-size: var(--spectrum-sidenav-width);
+    min-inline-size: var(--spectrum-sidenav-min-width);
+    max-inline-size: var(--spectrum-sidenav-max-width);
+    min-block-size: var(--spectrum-sidenav-min-height);
+    font-family: var(--spectrum-sidenav-text-font-family);
+    font-size: var(--spectrum-sidenav-text-font-size);
+    font-weight: var(--spectrum-sidenav-text-font-weight);
+    font-style: var(--spectrum-sidenav-text-font-style);
+    line-height: var(--spectrum-sidenav-text-line-height);
+    justify-content: start;
+    margin-block-end: var(--spectrum-sidenav-gap);
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+}
+
+#item-link #link-text {
+    margin-block-start: var(--spectrum-sidenav-top-to-label);
+    margin-block-end: var(--spectrum-sidenav-bottom-to-label);
+}
+
+/* icon styles */
+#item-link ::slotted([slot="icon"]) {
+    inline-size: var(--spectrum-sidenav-icon-size);
+    block-size: var(--spectrum-sidenav-icon-size);
+    flex-shrink: 0;
+    margin-block-start: var(--spectrum-sidenav-top-to-icon);
+    margin-inline-end: var(--spectrum-sidenav-icon-spacing);
+}
+
+/* states */
+:host([disabled]) #item-link {
+    background-color: var(--spectrum-sidenav-background-disabled);
+    color: var(--highcontrast-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color));
+    cursor: default;
+    pointer-events: none;
+}
+
+:host([selected]) #item-link {
+    background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected));
+    color: var(--highcontrast-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected));
+}
+
+:host([selected]) #item-link:active {
+    background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected));
+    color: var(--spectrum-sidenav-content-color-down-selected);
+}
+
+:host([selected]) #item-link.is-keyboardFocused,
+:host([selected]) #item-link:focus-visible {
+    background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected));
+    color: var(--spectrum-sidenav-content-color-key-focus-selected);
+}
+
+#item-link:hover {
+    background-color: var(--highcontrast-sidenav-background-hover, var(--spectrum-sidenav-background-hover));
+    color: var(--highcontrast-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover));
+}
+
+#item-link:active {
+    background-color: var(--highcontrast-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down));
+    color: var(--highcontrast-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down));
+}
+
+/* focus states */
+#item-link.is-keyboardFocused,
+#item-link:focus-visible {
+    outline: var(--highcontrast-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color)) solid var(--spectrum-sidenav-focus-ring-size);
+    outline-offset: var(--spectrum-sidenav-focus-ring-gap);
+    background-color: var(--highcontrast-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus));
+    color: var(--spectrum-sidenav-content-color-key-focus);
+}
+
+/* level styles */
+#item-link[data-level] {
+    color: var(--highcontrast-sidenav-top-level-font-color);
+    font-family: var(--spectrum-sidenav-top-level-font-family);
+    font-weight: var(--spectrum-sidenav-top-level-font-weight);
+}
+
+#item-link:not([data-level="0"]) {
+    padding-inline-start: var(--spectrum-sidenav-start-to-content-second-level);
+}
+
+#item-link[data-level="2"] {
+    padding-inline-start: var(--spectrum-sidenav-start-to-content-third-level);
+}
+
+.spectrum-SideNav--hasIcon#item-link:not([data-level="0"]) {
+    padding-inline-start: var(--spectrum-sidenav-start-to-content-with-icon-second-level);
+}
+
+.spectrum-SideNav--hasIcon#item-link[data-level="2"] {
+    padding-inline-start: var(--spectrum-sidenav-start-to-content-with-icon-third-level);
+}
+
+/* heading styles */
+#heading {
+    padding-inline: var(--spectrum-sidenav-inline-padding);
+    color: var(--spectrum-sidenav-header-color);
+    font-family: var(--spectrum-sidenav-header-font-family);
+    font-size: var(--spectrum-sidenav-header-font-size);
+    font-weight: var(--spectrum-sidenav-header-font-weight);
+    font-style: var(--spectrum-sidenav-header-font-style);
+    line-height: var(--spectrum-sidenav-header-line-height);
+    margin-block-start: calc(var(--spectrum-sidenav-heading-top-margin) - var(--spectrum-sidenav-gap));
+    margin-block-end: var(--spectrum-sidenav-heading-bottom-margin);
 }
diff --git a/packages/sidenav/src/spectrum-sidenav-heading.css b/packages/sidenav/src/spectrum-sidenav-heading.css
deleted file mode 100644
index 8f76c02dcc7..00000000000
--- a/packages/sidenav/src/spectrum-sidenav-heading.css
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    #list .spectrum-Icon {
-        forced-color-adjust: preserve-parent-color;
-    }
-}
-
-#list {
-    --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
-    --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color);
-    --spectrum-sidenav-min-height: var(--spectrum-component-height-100);
-    --spectrum-sidenav-width: 100%;
-    --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width);
-    --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width);
-    --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100);
-    --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100);
-    --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100);
-    --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item);
-    --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
-    --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100);
-    --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text);
-    --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text);
-    --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text);
-    --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text);
-    --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text);
-    --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header);
-    --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item);
-    --spectrum-sidenav-background-disabled: transparent;
-    --spectrum-sidenav-background-default: transparent;
-    --spectrum-sidenav-header-color: var(--spectrum-gray-600);
-    --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color);
-    --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down);
-    --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default);
-    --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover);
-    --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down);
-    --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight);
-    --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style);
-    --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
-    --spectrum-sidenav-text-line-height: var(--spectrum-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);
-    --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);
-    flex-direction: column;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    display: flex;
-}
-
-#list:lang(ja),
-#list:lang(ko),
-#list:lang(zh) {
-    --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);
-}
-
-#heading {
-    padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding));
-    color: var(--mod-sidenav-header-color, var(--spectrum-sidenav-header-color));
-    font-family: var(--spectrum-sidenav-header-font-family);
-    font-size: var(--mod-sidenav-header-font-size, var(--spectrum-sidenav-header-font-size));
-    font-weight: var(--mod-sidenav-header-font-weight, var(--spectrum-sidenav-header-font-weight));
-    font-style: var(--mod-sidenav-header-font-style, var(--spectrum-sidenav-header-font-style));
-    line-height: var(--mod-sidenav-header-line-height, var(--spectrum-sidenav-header-line-height));
-    margin-block-start: calc(var(--mod-sidenav-heading-top-margin, var(--spectrum-sidenav-heading-top-margin)) - var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)));
-    margin-block-end: var(--mod-sidenav-heading-bottom-margin, var(--spectrum-sidenav-heading-bottom-margin));
-}
diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css
deleted file mode 100644
index 83ed3b94dec..00000000000
--- a/packages/sidenav/src/spectrum-sidenav-item.css
+++ /dev/null
@@ -1,220 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    #list ::slotted([slot="icon"]) {
-        forced-color-adjust: preserve-parent-color;
-    }
-
-    :host {
-        --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;
-    }
-}
-
-#list {
-    --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
-    --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color);
-    --spectrum-sidenav-min-height: var(--spectrum-component-height-100);
-    --spectrum-sidenav-width: 100%;
-    --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width);
-    --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width);
-    --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100);
-    --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100);
-    --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100);
-    --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item);
-    --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
-    --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100);
-    --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text);
-    --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text);
-    --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text);
-    --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text);
-    --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text);
-    --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header);
-    --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item);
-    --spectrum-sidenav-background-disabled: transparent;
-    --spectrum-sidenav-background-default: transparent;
-    --spectrum-sidenav-header-color: var(--spectrum-gray-600);
-    --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color);
-    --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down);
-    --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default);
-    --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover);
-    --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down);
-    --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight);
-    --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style);
-    --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
-    --spectrum-sidenav-text-line-height: var(--spectrum-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);
-    --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);
-    flex-direction: column;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    display: flex;
-}
-
-#list:lang(ja),
-#list:lang(ko),
-#list:lang(zh) {
-    --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);
-}
-
-:host {
-    margin-inline: 0;
-    list-style-type: none;
-}
-
-:host([disabled]) #item-link {
-    background-color: var(--mod-sidenav-background-disabled, var(--spectrum-sidenav-background-disabled));
-    color: var(--highcontrast-sidenav-content-disabled-color, var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color)));
-    cursor: default;
-    pointer-events: none;
-}
-
-:host([selected]) #item-link {
-    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)));
-}
-
-:host([selected]) #item-link: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));
-}
-
-:host([selected]) #item-link.is-keyboardFocused,
-:host([selected]) #item-link: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));
-}
-
-#item-link {
-    padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding));
-    box-sizing: border-box;
-    overflow-wrap: break-word;
-    hyphens: auto;
-    cursor: pointer;
-    transition:
-        background-color var(--spectrum-animation-duration-100) ease-out,
-        color var(--spectrum-animation-duration-100) ease-out;
-    border-radius: var(--mod-sidenav-border-radius, var(--spectrum-sidenav-border-radius));
-    background-color: var(--mod-sidenav-background-default, var(--spectrum-sidenav-background-default));
-    color: var(--highcontrast-sidenav-content-color-default, var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default)));
-    inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width));
-    min-inline-size: var(--mod-sidenav-min-width, var(--spectrum-sidenav-min-width));
-    max-inline-size: var(--mod-sidenav-max-width, var(--spectrum-sidenav-max-width));
-    min-block-size: var(--mod-sidenav-min-height, var(--spectrum-sidenav-min-height));
-    font-family: var(--mod-sidenav-text-font-family, var(--spectrum-sidenav-text-font-family));
-    font-size: var(--mod-sidenav-text-font-size, var(--spectrum-sidenav-text-font-size));
-    font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight));
-    font-style: var(--mod-sidenav-text-font-style, var(--spectrum-sidenav-text-font-style));
-    line-height: var(--mod-sidenav-text-line-height, var(--spectrum-sidenav-text-line-height));
-    justify-content: start;
-    margin-block-end: var(--mod-sidenav-gap, var(--spectrum-sidenav-gap));
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    display: inline-flex;
-    position: relative;
-}
-
-#item-link #link-text {
-    margin-block-start: var(--mod-sidenav-top-to-label, var(--spectrum-sidenav-top-to-label));
-    margin-block-end: var(--mod-sidenav-bottom-to-label, var(--spectrum-sidenav-bottom-to-label));
-}
-
-#item-link ::slotted([slot="icon"]) {
-    inline-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size));
-    block-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size));
-    flex-shrink: 0;
-    margin-block-start: var(--mod-sidenav-top-to-icon, var(--spectrum-sidenav-top-to-icon));
-    margin-inline-end: var(--mod-sidenav-icon-spacing, var(--spectrum-sidenav-icon-spacing));
-}
-
-@media (hover: hover) {
-    :host([selected]) #item-link: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));
-    }
-
-    #item-link:hover {
-        background-color: var(--highcontrast-sidenav-background-hover, var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover)));
-        color: var(--highcontrast-sidenav-content-color-hover, var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover)));
-    }
-}
-
-#item-link:active {
-    background-color: var(--highcontrast-sidenav-item-background-down, var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down)));
-    color: var(--highcontrast-sidenav-content-color-down, var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down)));
-}
-
-#item-link.is-keyboardFocused,
-#item-link:focus-visible {
-    outline: var(--highcontrast-sidenav-focus-ring-color, var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))) solid var(--mod-sidenav-focus-ring-size, var(--spectrum-sidenav-focus-ring-size));
-    outline-offset: var(--mod-sidenav-focus-ring-gap, var(--spectrum-sidenav-focus-ring-gap));
-    background-color: var(--highcontrast-sidenav-background-key-focus, var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus)));
-    color: var(--mod-sidenav-content-color-key-focus, var(--spectrum-sidenav-content-color-key-focus));
-}
-
-#item-link[data-level] {
-    color: var(--highcontrast-sidenav-top-level-font-color);
-    font-family: var(--mod-sidenav-top-level-font-family, var(--spectrum-sidenav-top-level-font-family));
-    font-weight: var(--mod-sidenav-top-level-font-weight, var(--spectrum-sidenav-top-level-font-weight));
-    font-style: var(--mod-sidenav-top-level-font-style, var(--spectrum-sidenav-top-level-font-style));
-    font-size: var(--mod-sidenav-top-level-font-size, var(--spectrum-sidenav-top-level-font-size));
-    line-height: var(--mod-sidenav-top-level-line-height, var(--spectrum-sidenav-top-level-line-height));
-}
-
-#item-link:not([data-level="0"]) {
-    font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight));
-    padding-inline-start: var(--mod-sidenav-start-to-content-second-level, var(--spectrum-sidenav-start-to-content-second-level));
-}
-
-#item-link[data-level="2"] {
-    padding-inline-start: var(--mod-sidenav-start-to-content-third-level, var(--spectrum-sidenav-start-to-content-third-level));
-}
-
-.spectrum-SideNav--hasIcon#item-link:not([data-level="0"]) {
-    padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-second-level, var(--spectrum-sidenav-start-to-content-with-icon-second-level));
-}
-
-.spectrum-SideNav--hasIcon#item-link[data-level="2"] {
-    padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-third-level, var(--spectrum-sidenav-start-to-content-with-icon-third-level));
-}
diff --git a/packages/sidenav/src/spectrum-sidenav.css b/packages/sidenav/src/spectrum-sidenav.css
deleted file mode 100644
index 064658ee021..00000000000
--- a/packages/sidenav/src/spectrum-sidenav.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    .spectrum-Icon {
-        forced-color-adjust: preserve-parent-color;
-    }
-}
-
-:host {
-    --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
-    --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color);
-    --spectrum-sidenav-min-height: var(--spectrum-component-height-100);
-    --spectrum-sidenav-width: 100%;
-    --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width);
-    --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width);
-    --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100);
-    --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100);
-    --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100);
-    --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item);
-    --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
-    --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100);
-    --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text);
-    --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text);
-    --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text);
-    --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text);
-    --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text);
-    --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header);
-    --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item);
-    --spectrum-sidenav-background-disabled: transparent;
-    --spectrum-sidenav-background-default: transparent;
-    --spectrum-sidenav-header-color: var(--spectrum-gray-600);
-    --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color);
-    --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down);
-    --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default);
-    --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover);
-    --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down);
-    --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight);
-    --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style);
-    --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
-    --spectrum-sidenav-text-line-height: var(--spectrum-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);
-    --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);
-    flex-direction: column;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    display: flex;
-}
-
-:host:lang(ja),
-:host:lang(ko),
-:host:lang(zh) {
-    --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);
-}
diff --git a/packages/slider/package.json b/packages/slider/package.json
index 3102557f6c8..eba4da56a3c 100644
--- a/packages/slider/package.json
+++ b/packages/slider/package.json
@@ -41,7 +41,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/slider-overrides.css.js": "./src/slider-overrides.css.js",
         "./src/slider.css.js": "./src/slider.css.js",
         "./sp-slider.js": {
             "development": "./sp-slider.dev.js",
diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
index 0adc84f4630..4ba0666012b 100644
--- a/packages/slider/src/Slider.ts
+++ b/packages/slider/src/Slider.ts
@@ -31,7 +31,7 @@ import {
 
 import sliderStyles from './slider.css.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
-import { StyleInfo } from 'lit-html/directives/style-map';
+import { type StyleInfo } from '@spectrum-web-components/base/src/directives.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
 import type { NumberField } from '@spectrum-web-components/number-field';
 import { HandleController, HandleValueDictionary } from './HandleController.js';
diff --git a/packages/slider/src/slider-overrides.css b/packages/slider/src/slider-overrides.css
deleted file mode 100644
index b04ade605ab..00000000000
--- a/packages/slider/src/slider-overrides.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-slider-track-color: var(--system-slider-track-color);
-    --spectrum-slider-track-fill-color: var(--system-slider-track-fill-color);
-    --spectrum-slider-ramp-track-color: var(--system-slider-ramp-track-color);
-    --spectrum-slider-ramp-track-color-disabled: var(--system-slider-ramp-track-color-disabled);
-    --spectrum-slider-handle-background-color: var(--system-slider-handle-background-color);
-    --spectrum-slider-handle-background-color-disabled: var(--system-slider-handle-background-color-disabled);
-    --spectrum-slider-ramp-handle-background-color: var(--system-slider-ramp-handle-background-color);
-    --spectrum-slider-ticks-handle-background-color: var(--system-slider-ticks-handle-background-color);
-    --spectrum-slider-handle-border-color: var(--system-slider-handle-border-color);
-    --spectrum-slider-handle-disabled-background-color: var(--system-slider-handle-disabled-background-color);
-    --spectrum-slider-tick-mark-color: var(--system-slider-tick-mark-color);
-    --spectrum-slider-handle-border-color-hover: var(--system-slider-handle-border-color-hover);
-    --spectrum-slider-handle-border-color-down: var(--system-slider-handle-border-color-down);
-    --spectrum-slider-handle-border-color-key-focus: var(--system-slider-handle-border-color-key-focus);
-    --spectrum-slider-handle-focus-ring-color-key-focus: var(--system-slider-handle-focus-ring-color-key-focus);
-    --spectrum-slider-track-corner-radius: var(--system-slider-track-corner-radius);
-    --spectrum-slider-handle-border-radius: var(--system-slider-handle-border-radius);
-}
-
-:host {
-    --spectrum-slider-handle-border-radius: var(--system-slider-size-m-handle-border-radius);
-}
-
-:host([size="s"]) {
-    --spectrum-slider-handle-border-radius: var(--system-slider-size-s-handle-border-radius);
-}
-
-:host([size="l"]) {
-    --spectrum-slider-handle-border-radius: var(--system-slider-size-l-handle-border-radius);
-}
-
-:host([size="xl"]) {
-    --spectrum-slider-handle-border-radius: var(--system-slider-size-xl-handle-border-radius);
-}
diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css
index 4460a2ef7c2..fc2aa78d384 100644
--- a/packages/slider/src/slider.css
+++ b/packages/slider/src/slider.css
@@ -10,13 +10,591 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-slider.css");
-@import url("./slider-overrides.css");
+/* Base variables */
+:host {
+    /* layout */
+    --spectrum-slider-min-size: var(--spectrum-spacing-900);
+    --spectrum-slider-control-height: var(--spectrum-component-height-100);
+    --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
+    --spectrum-slider-value-inline-size: 18px;
 
-/*
- * The :host will receive focus when interacting with the slider via the mouse.
- * Removes blue outline from :host when it is being focused.
-*/
+    /* typography */
+    --spectrum-slider-font-size: var(--spectrum-font-size-75);
+    --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
+
+    /* spacing */
+    --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);
+    --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+    --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
+
+    /* borders */
+    --spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
+    --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
+    --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
+    --spectrum-slider-tick-mark-border-radius: 2px;
+
+    /* track */
+    --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
+    --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
+    --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
+    --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
+    --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size) / 2);
+    --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
+    --spectrum-slider-range-track-reset: 0;
+
+    /* input */
+    --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
+    --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
+
+    /* colors */
+    --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
+    --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
+    --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
+    --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
+    --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
+    --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
+    --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
+
+    /* base styles */
+    z-index: 0;
+    min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
+    user-select: none;
+    display: block;
+    position: relative;
+}
+
+:host:dir(rtl),
+:host([dir="rtl"]) {
+    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+}
+
+:host:not(.spectrum-Slider--sideLabel) #label-container + #track:has(.spectrum-Slider-ramp) {
+    margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
+}
+
+:host([size="s"]) {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
+
+.spectrum-Slider--sideLabel {
+    align-items: center;
+    display: flex;
+}
+
+.spectrum-Slider--sideLabel #label-container {
+    margin-block-start: 0;
+}
+
+.spectrum-Slider--sideLabel #label-container #label {
+    margin-inline-end: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
+}
+
+.spectrum-Slider--sideLabel #label-container + #track {
+    margin-block-start: 0;
+}
+
+.spectrum-Slider--sideLabel #controls {
+    margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
+}
+
+.spectrum-Slider--sideLabel #value {
+    inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size));
+    text-align: start;
+    margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
+}
+
+#controls {
+    box-sizing: border-box;
+    cursor: pointer;
+    z-index: auto;
+    inline-size: calc(100% - var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * 2);
+    block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+    vertical-align: top;
+    margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
+    display: inline-block;
+    position: relative;
+}
+
+#controls:not(:has(.ticks)) {
+    align-items: center;
+    display: flex;
+}
+
+#label-container + #track {
+    margin-block-start: calc(var(--spectrum-slider-control-to-field-label) * -1);
+}
+
+:host([tick-labels]) {
+    margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+}
+
+.fill,
+.track {
+    block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness));
+    box-sizing: border-box;
+    z-index: 1;
+    pointer-events: none;
+    margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
+    position: absolute;
+    inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2);
+    inset-inline: 0 auto;
+}
+
+.fill:before,
+.track:before {
+    content: "";
+    block-size: 100%;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    display: block;
+}
+
+.track:first-of-type:before {
+    border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+    border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+}
+
+.track:last-of-type:before {
+    border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+    border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+}
+
+.track ~ .track {
+    margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+    margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+    padding-block: 0;
+    padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
+    padding-inline-end: 0;
+    inset-inline-start: auto;
+    inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+}
+
+:host([variant="range"]) .track ~ .track {
+    padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset));
+    margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+    inset-inline: auto;
+}
+
+.fill {
+    margin-inline-start: 0;
+    padding-block: 0;
+    padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
+    padding-inline-end: 0;
+}
+
+.offset {
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
+}
+
+:host([variant="range"]) #value {
+    user-select: text;
+}
+
+:host([variant="range"]) .track:first-of-type {
+    margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+    padding-inline-start: 0;
+    padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
+    inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+    inset-inline-end: auto;
+}
+
+:host([variant="range"]) .track:first-of-type:before {
+    border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+    border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+}
+
+:host([variant="range"]) .track:last-of-type {
+    margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+    padding-inline-start: var(--spectrum-slider-track-handleoffset);
+    padding-inline-end: 0;
+    inset-inline-start: auto;
+    inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+}
+
+:host([variant="range"]) .track:last-of-type:before {
+    border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+    border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+}
+
+#ramp {
+    block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
+    position: absolute;
+    inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+    inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+}
+
+#ramp svg {
+    inline-size: 100%;
+    block-size: 100%;
+    transform: var(--spectrum-logical-rotation,);
+}
+
+.handle {
+    z-index: 2;
+    box-sizing: border-box;
+    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+    margin-block: 0;
+    margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
+    border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
+    border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius));
+    transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
+    border-style: solid;
+    outline: none;
+    display: inline-block;
+    position: absolute;
+    inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
+    inset-inline-start: 0;
+
+    border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
+    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
+}
+
+.handle.dragging,
+.handle:active {
+    border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
+
+    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
+}
+
+.handle.dragging,
+.handle.handle-highlight,
+.handle.is-tophandle,
+.handle:active {
+    z-index: 3;
+}
+
+.handle:before {
+    content: "";
+    transition:
+        box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+        inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+        block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
+    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+    border-radius: 100%;
+    display: block;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+}
+
+:host:dir(rtl) .handle:before,
+:host([dir="rtl"]) .handle:before {
+    transform: translate(50%, -50%);
+}
+
+.handle.handle-highlight:before {
+    inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
+    block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
+
+    box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus)));
+}
+
+.input {
+    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+    opacity: 0;
+    cursor: default;
+    appearance: none;
+    pointer-events: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size));
+    inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left));
+    overflow: hidden;
+
+    background: none;
+}
+
+.input:focus {
+    outline: none;
+}
+
+#label-container {
+    inline-size: auto;
+    font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
+    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
+    justify-content: space-between;
+    align-items: center;
+    margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
+    display: flex;
+    position: relative;
+
+    color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color)));
+}
+
+#label-container:lang(ja),
+#label-container:lang(ko),
+#label-container:lang(zh) {
+    line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height));
+}
+
+#label {
+    font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
+    padding-inline-start: 0;
+}
+
+#value {
+    cursor: default;
+    font-feature-settings: "tnum";
+    text-align: end;
+    flex-grow: 0;
+    margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
+    padding-inline-end: 0;
+}
+
+:host([variant="tick"]) .handle {
+    background-color: var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color));
+}
+
+:host([variant="tick"]) #controls {
+    margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2);
+}
+
+:host([variant="tick"]) .tickLabel {
+    margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75));
+}
+
+.ticks {
+    z-index: 0;
+    margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+    justify-content: space-between;
+    display: flex;
+}
+
+.ticks ~ .handleContainer .handle {
+    background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color));
+}
+
+.tick {
+    position: relative;
+    inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2);
+}
+
+.tick,
+.tick:after {
+    inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
+}
+
+.tick:after {
+    content: "";
+    block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height));
+    border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius));
+    display: block;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(50% - var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2);
+
+    background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
+}
+
+.tick .tickLabel {
+    font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
+    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
+    color: var(--highcontrast-slider-label-text-color, var(--mod-slider-tick-label-color, var(--spectrum-slider-tick-label-color)));
+    justify-content: center;
+    align-items: center;
+    display: flex;
+}
+
+.tick:first-of-type .tickLabel,
+.tick:last-of-type .tickLabel {
+    margin-inline: 0;
+    display: block;
+    position: absolute;
+}
+
+.tick:first-of-type {
+    inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
+}
+
+.tick:first-of-type .tickLabel {
+    inset-inline-start: 0;
+}
+
+.tick:last-of-type {
+    inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
+}
+
+.tick:last-of-type .tickLabel {
+    inset-inline-end: 0;
+}
+
+.handleContainer,
+.trackContainer {
+    inline-size: calc(100% + var(--spectrum-slider-handle-size));
+    margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
+    position: absolute;
+    inset-block-start: 0;
+}
+
+.trackContainer {
+    block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+    overflow: hidden;
+}
+
+.track:before {
+    background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
+}
+
+.track ~ .track:before {
+    border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+    border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+}
+
+.track:not(:has(~ .spectrum-Slider-fill)):before {
+    background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
+}
+
+:host([variant="filled"]) .track:first-child:before,
+.fill:before {
+    background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+}
+
+#ramp path {
+    fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
+}
+
+.handle.handle-highlight {
+    border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus)));
+}
+
+:host([variant="ramp"]) .handle {
+    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
+    background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color)));
+}
+
+.handle.dragging {
+    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
+    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
+}
+
+:host([variant="range"]) .track:not(:first-of-type, :last-of-type):before {
+    background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+}
+
+:host([disabled]),
+:host([disabled]) #controls {
+    cursor: default;
+}
+
+:host([disabled]) #label-container,
+:host([disabled]) .tickLabel {
+    color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+}
+
+:host([disabled]) .handle {
+    border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
+    background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
+    cursor: default;
+    pointer-events: none;
+}
+
+:host([disabled]) .handle:active {
+    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)));
+}
+
+:host([disabled]) .handle:hover {
+    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)));
+}
+
+:host([disabled]) .track:before {
+    background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
+}
+
+:host([disabled]) .fill:before,
+:host([disabled][variant="filled"]) .track:first-child:before {
+    background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
+}
+
+:host([disabled]) #ramp path {
+    fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
+}
+
+:host([disabled]) .tick:after {
+    background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled)));
+}
+
+:host([disabled][variant="range"]) .track:not(:first-of-type, :last-of-type):before {
+    background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
+}
+
+.handle.handle-highlight:before,
+.handle:before {
+    box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) ButtonText;
+}
+
+:host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls.handle-highlight,
+:host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:focus-visible {
+    outline: var(--spectrum-focus-indicator-thickness) solid ButtonText;
+    outline-offset: var(--spectrum-focus-indicator-gap);
+}
+
+:host([disabled]) #ramp + .handle {
+    border-color: GrayText;
+}
+
+/* base variables */
+/* Base variables */
+:host {
+    /* colors */
+    --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);
+
+    /* hover and focus states */
+    --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);
+
+    /* borders */
+    --spectrum-slider-track-corner-radius: 2px;
+    --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
+}
+
+/* size variants */
+:host([size="s"]) {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
+
+/* base styles */
 :host(:focus) {
     outline: 0;
 }
@@ -47,12 +625,12 @@
     border: 0;
     clip: rect(0, 0, 0, 0);
     clip-path: inset(50%);
-    height: 1px;
+    block-size: 1px;
     margin: 0 -1px -1px 0;
     overflow: hidden;
     padding: 0;
     position: absolute;
-    width: 1px;
+    inline-size: 1px;
     white-space: nowrap;
 }
 
@@ -66,25 +644,26 @@
     user-select: none;
 }
 
+/* tick styles */
 .not-exact.ticks {
     justify-content: start;
 }
 
 :host([dir="ltr"]) .not-exact .tick {
-    padding-right: var(--sp-slider-tick-offset);
+    padding-inline-end: var(--spectrum-slider-tick-offset);
 }
 
 :host([dir="rtl"]) .not-exact .tick {
-    padding-left: var(--sp-slider-tick-offset);
+    padding-inline-start: var(--spectrum-slider-tick-offset);
 }
 
 :host([dir="ltr"]) .not-exact .tick:after {
-    left: auto;
+    inset-inline-start: auto;
     transform: translate(-50%, 0);
 }
 
 :host([dir="rtl"]) .not-exact .tick:after {
-    right: auto;
+    inset-inline-end: auto;
     transform: translate(50%, 0);
 }
 
@@ -92,11 +671,7 @@
     transform: translate(50%, -50%);
 }
 
-/*
- * The following three declarationsa required while https://github.com/adobe/spectrum-css/issues/521
- * waits to be addressed at the Spectrum CSS level.
- */
-
+/* track styles */
 .track:before {
     background-size: var(--spectrum-slider-track-background-size) !important;
 }
@@ -110,29 +685,31 @@
 }
 
 :host([dir="ltr"]) .track:not(:first-of-type, :last-of-type) {
-    left: var(--spectrum-slider-track-segment-position);
+    inset-inline-start: var(--spectrum-slider-track-segment-position);
 }
 
 :host([dir="rtl"]) .track:not(:first-of-type, :last-of-type) {
-    right: var(--spectrum-slider-track-segment-position);
+    inset-inline-end: var(--spectrum-slider-track-segment-position);
 }
 
+/* accessibility */
 .visually-hidden {
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
-    height: 1px;
+    block-size: 1px;
     overflow: hidden;
     position: absolute;
     white-space: nowrap;
-    width: 1px;
+    inline-size: 1px;
 }
 
+/* label visibility */
 :host([label-visibility="value"][dir="ltr"]) #value {
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 
 :host([label-visibility="value"][dir="rtl"]) #value {
-    margin-right: auto;
+    margin-inline-end: auto;
 }
 
 :host([label-visibility="none"]) #label-container {
@@ -144,6 +721,11 @@
     align-self: flex-end;
 }
 
+:host([label-visibility="none"]) #label-container + #track {
+    margin-block-start: 0;
+}
+
+/* other styles */
 .fill {
     z-index: 2;
 }
@@ -151,7 +733,3 @@
 #slider-description {
     display: none;
 }
-
-:host([label-visibility="none"]) #label-container + #track {
-    margin-block-start: 0;
-}
diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css
deleted file mode 100644
index 2e1f076045c..00000000000
--- a/packages/slider/src/spectrum-slider.css
+++ /dev/null
@@ -1,626 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --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-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);
-    --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-    --spectrum-slider-value-inline-size: 18px;
-    --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
-    --spectrum-slider-min-size: var(--spectrum-spacing-900);
-    --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);
-    --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
-    --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
-    --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size) / 2);
-    --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
-    --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
-    --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
-    --spectrum-slider-tick-mark-border-radius: 2px;
-    --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
-    --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
-    --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
-    --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
-    --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
-    --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default);
-    --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
-    --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
-    --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
-    --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
-    --spectrum-slider-range-track-reset: 0;
-    z-index: 0;
-    min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
-    -webkit-user-select: none;
-    user-select: none;
-    display: block;
-    position: relative;
-}
-
-:host:dir(rtl),
-:host([dir="rtl"]) {
-    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-}
-
-:host:not(.spectrum-Slider--sideLabel) #label-container + #track:has(.spectrum-Slider-ramp) {
-    margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
-}
-
-:host([size="s"]) {
-    --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);
-}
-
-:host([size="l"]) {
-    --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);
-    --spectrum-slider-value-inline-size: 18px;
-}
-
-:host([size="xl"]) {
-    --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);
-    --spectrum-slider-value-inline-size: 22px;
-}
-
-.spectrum-Slider--sideLabel {
-    align-items: center;
-    display: flex;
-}
-
-.spectrum-Slider--sideLabel #label-container {
-    margin-block-start: 0;
-}
-
-.spectrum-Slider--sideLabel #label-container #label {
-    margin-inline-end: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
-}
-
-.spectrum-Slider--sideLabel #label-container + #track {
-    margin-block-start: 0;
-}
-
-.spectrum-Slider--sideLabel #controls {
-    margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
-}
-
-.spectrum-Slider--sideLabel #value {
-    inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size));
-    text-align: start;
-    margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
-}
-
-#controls {
-    box-sizing: border-box;
-    cursor: pointer;
-    z-index: auto;
-    inline-size: calc(100% - var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * 2);
-    block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
-    vertical-align: top;
-    margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
-    display: inline-block;
-    position: relative;
-}
-
-#controls:not(:has(.ticks)) {
-    align-items: center;
-    display: flex;
-}
-
-#label-container + #track {
-    margin-block-start: calc(var(--spectrum-slider-control-to-field-label) * -1);
-}
-
-:host([tick-labels]) {
-    margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
-}
-
-.fill,
-.track {
-    block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness));
-    box-sizing: border-box;
-    z-index: 1;
-    pointer-events: none;
-    margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-    padding-block: 0;
-    padding-inline-start: 0;
-    padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
-    position: absolute;
-    inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2);
-    inset-inline: 0 auto;
-}
-
-.fill:before,
-.track:before {
-    content: "";
-    block-size: 100%;
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-    display: block;
-}
-
-.track:first-of-type:before {
-    border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-    border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-}
-
-.track:last-of-type:before {
-    border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-    border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-}
-
-.track ~ .track {
-    margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-    margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-    padding-block: 0;
-    padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
-    padding-inline-end: 0;
-    inset-inline-start: auto;
-    inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-}
-
-:host([variant="range"]) .track ~ .track {
-    padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset));
-    margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-    inset-inline: auto;
-}
-
-.fill {
-    margin-inline-start: 0;
-    padding-block: 0;
-    padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
-    padding-inline-end: 0;
-}
-
-.offset {
-    padding-block: 0;
-    padding-inline-start: 0;
-    padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
-}
-
-:host([variant="range"]) #value {
-    -webkit-user-select: text;
-    user-select: text;
-}
-
-:host([variant="range"]) .track:first-of-type {
-    margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-    padding-inline-start: 0;
-    padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
-    inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-    inset-inline-end: auto;
-}
-
-:host([variant="range"]) .track:first-of-type:before {
-    border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-    border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-}
-
-:host([variant="range"]) .track:last-of-type {
-    margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-    padding-inline-start: var(--spectrum-slider-track-handleoffset);
-    padding-inline-end: 0;
-    inset-inline-start: auto;
-    inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-}
-
-:host([variant="range"]) .track:last-of-type:before {
-    border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-    border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-}
-
-#ramp {
-    block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
-    position: absolute;
-    inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-    inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-}
-
-#ramp svg {
-    inline-size: 100%;
-    block-size: 100%;
-    transform: var(--spectrum-logical-rotation,);
-}
-
-.handle {
-    z-index: 2;
-    box-sizing: border-box;
-    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-    margin-block: 0;
-    margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
-    border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
-    border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius));
-    transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
-    border-style: solid;
-    outline: none;
-    display: inline-block;
-    position: absolute;
-    inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
-    inset-inline-start: 0;
-}
-
-.handle.dragging,
-.handle:active {
-    border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
-}
-
-.handle.dragging,
-.handle.handle-highlight,
-.handle.is-tophandle,
-.handle:active {
-    z-index: 3;
-}
-
-.handle:before {
-    content: "";
-    transition:
-        box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-        inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-        block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
-    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-    border-radius: 100%;
-    display: block;
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    transform: translate(-50%, -50%);
-}
-
-:host:dir(rtl) .handle:before,
-:host([dir="rtl"]) .handle:before {
-    transform: translate(50%, -50%);
-}
-
-.handle.handle-highlight:before {
-    inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
-    block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
-}
-
-.input {
-    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-    opacity: 0;
-    cursor: default;
-    appearance: none;
-    pointer-events: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size));
-    inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left));
-    overflow: hidden;
-}
-
-.input:focus {
-    outline: none;
-}
-
-#label-container {
-    inline-size: auto;
-    font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
-    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
-    justify-content: space-between;
-    align-items: center;
-    margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
-    display: flex;
-    position: relative;
-}
-
-#label-container:lang(ja),
-#label-container:lang(ko),
-#label-container:lang(zh) {
-    line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height));
-}
-
-#label {
-    font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
-    padding-inline-start: 0;
-}
-
-#value {
-    cursor: default;
-    font-feature-settings: "tnum";
-    text-align: end;
-    flex-grow: 0;
-    margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
-    padding-inline-end: 0;
-}
-
-:host([variant="tick"]) .handle {
-    background-color: var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color));
-}
-
-:host([variant="tick"]) #controls {
-    margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2);
-}
-
-:host([variant="tick"]) .tickLabel {
-    margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75));
-}
-
-.ticks {
-    z-index: 0;
-    margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-    justify-content: space-between;
-    display: flex;
-}
-
-.ticks ~ .handleContainer .handle {
-    background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color));
-}
-
-.tick {
-    position: relative;
-    inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2);
-}
-
-.tick,
-.tick:after {
-    inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
-}
-
-.tick:after {
-    content: "";
-    block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height));
-    border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius));
-    display: block;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: calc(50% - var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2);
-}
-
-.tick .tickLabel {
-    font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
-    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
-    color: var(--highcontrast-slider-label-text-color, var(--mod-slider-tick-label-color, var(--spectrum-slider-tick-label-color)));
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-.tick:first-of-type .tickLabel,
-.tick:last-of-type .tickLabel {
-    margin-inline: 0;
-    display: block;
-    position: absolute;
-}
-
-.tick:first-of-type {
-    inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
-}
-
-.tick:first-of-type .tickLabel {
-    inset-inline-start: 0;
-}
-
-.tick:last-of-type {
-    inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
-}
-
-.tick:last-of-type .tickLabel {
-    inset-inline-end: 0;
-}
-
-.handleContainer,
-.trackContainer {
-    inline-size: calc(100% + var(--spectrum-slider-handle-size));
-    margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
-    position: absolute;
-    inset-block-start: 0;
-}
-
-.trackContainer {
-    block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
-    overflow: hidden;
-}
-
-.track:before {
-    background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
-}
-
-.track ~ .track:before {
-    border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-    border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-}
-
-.track:not(:has(~ .spectrum-Slider-fill)):before {
-    background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
-}
-
-#label-container {
-    color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color)));
-}
-
-:host([variant="filled"]) .track:first-child:before,
-.fill:before {
-    background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
-}
-
-#ramp path {
-    fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
-}
-
-.handle {
-    border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
-    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
-}
-
-.handle.handle-highlight {
-    border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus)));
-}
-
-.handle.handle-highlight:before {
-    box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus)));
-}
-
-.handle.dragging,
-.handle:active {
-    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
-}
-
-:host([variant="ramp"]) .handle {
-    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
-    background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color)));
-}
-
-.input {
-    background: none;
-}
-
-.tick:after {
-    background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
-}
-
-.handle.dragging {
-    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
-    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
-}
-
-:host([variant="range"]) .track:not(:first-of-type, :last-of-type):before {
-    background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-}
-
-:host([disabled]),
-:host([disabled]) #controls {
-    cursor: default;
-}
-
-:host([disabled]) #label-container,
-:host([disabled]) .tickLabel {
-    color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
-}
-
-:host([disabled]) .handle {
-    border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
-    background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
-    cursor: default;
-    pointer-events: none;
-}
-
-:host([disabled]) .handle:active {
-    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)));
-}
-
-@media (hover: hover) {
-    .handle:hover {
-        border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover)));
-    }
-
-    :host([disabled]) .handle:hover {
-        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)));
-    }
-}
-
-:host([disabled]) .track:before {
-    background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
-}
-
-:host([disabled]) .fill:before,
-:host([disabled][variant="filled"]) .track:first-child:before {
-    background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
-}
-
-:host([disabled]) #ramp path {
-    fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
-}
-
-:host([disabled]) .tick:after {
-    background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled)));
-}
-
-:host([disabled][variant="range"]) .track:not(:first-of-type, :last-of-type):before {
-    background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-slider-track-color: ButtonText;
-        --highcontrast-slider-track-color-disabled: GrayText;
-        --highcontrast-slider-track-color-static: ButtonText;
-        --highcontrast-slider-track-fill-color-disabled: GrayText;
-        --highcontrast-slider-filled-track-fill-color: Highlight;
-        --highcontrast-slider-ramp-track-color: ButtonText;
-        --highcontrast-slider-ramp-track-color-disabled: GrayText;
-        --highcontrast-slider-tick-mark-color: ButtonText;
-        --highcontrast-slider-tick-mark-color-disabled: GrayText;
-        --highcontrast-slider-handle-border-color: ButtonText;
-        --highcontrast-slider-handle-border-color-hover: Highlight;
-        --highcontrast-slider-handle-border-color-down: Highlight;
-        --highcontrast-slider-handle-border-color-key-focus: Highlight;
-        --highcontrast-slider-handle-border-color-disabled: GrayText;
-        --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText;
-        --highcontrast-slider-handle-background-color: ButtonFace;
-        --highcontrast-slider-handle-background-color-disabled: GrayText;
-        --highcontrast-slider-handle-disabled-background-color: GrayText;
-        --highcontrast-slider-ramp-handle-border-color-active: ButtonFace;
-        --highcontrast-slider-ramp-handle-background-color: ButtonFace;
-        --highcontrast-slider-label-text-color: CanvasText;
-        --highcontrast-slider-label-text-color-disabled: GrayText;
-    }
-
-    .handle.handle-highlight:before,
-    :host([variant="ramp"]) .handle {
-        forced-color-adjust: none;
-    }
-
-    :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls.handle-highlight,
-    :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:active,
-    :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:focus-within {
-        --highcontrast-slider-track-color: Highlight;
-        --highcontrast-slider-handle-border-color: Highlight;
-        --highcontrast-slider-ramp-track-color: Highlight;
-        --highcontrast-slider-tick-mark-color: Highlight;
-    }
-
-    @media (hover: hover) {
-        :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:hover {
-            --highcontrast-slider-track-color: Highlight;
-            --highcontrast-slider-handle-border-color: Highlight;
-            --highcontrast-slider-ramp-track-color: Highlight;
-            --highcontrast-slider-tick-mark-color: Highlight;
-        }
-    }
-
-    :host([disabled]) #ramp + .handle {
-        fill: ButtonFace;
-        background-color: ButtonFace;
-    }
-}
diff --git a/packages/split-view/package.json b/packages/split-view/package.json
index 22800bce091..14389db4946 100644
--- a/packages/split-view/package.json
+++ b/packages/split-view/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/split-view-overrides.css.js": "./src/split-view-overrides.css.js",
         "./src/split-view.css.js": "./src/split-view.css.js",
         "./src/types.js": {
             "development": "./src/types.dev.js",
diff --git a/packages/split-view/src/spectrum-split-view.css b/packages/split-view/src/spectrum-split-view.css
deleted file mode 100644
index 2dba41f5738..00000000000
--- a/packages/split-view/src/spectrum-split-view.css
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --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-content-color: var(--spectrum-body-color);
-    --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-width: var(--spectrum-border-width-400);
-    --spectrum-splitview-gripper-height: 16px;
-    --spectrum-splitview-gripper-border-width-horizontal: 3px;
-    --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
-    display: flex;
-    overflow: hidden;
-}
-
-::slotted(*) {
-    block-size: 100%;
-    background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
-    color: var(--mod-splitview-content-color, var(--spectrum-splitview-content-color));
-}
-
-#gripper {
-    content: "";
-    border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
-    border-style: solid;
-    border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
-    touch-action: none;
-    inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
-    block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
-    border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
-    border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
-    display: block;
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: calc((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2 * -1);
-    transform: translateY(-50%);
-}
-
-#gripper:before {
-    background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
-}
-
-#splitter {
-    background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
-    -webkit-user-select: none;
-    user-select: none;
-    inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
-    block-size: 100%;
-    z-index: 1;
-    position: relative;
-}
-
-#splitter.is-collapsed-end #gripper:before,
-#splitter.is-collapsed-start #gripper:before {
-    content: "";
-    inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
-    block-size: 100%;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: calc(50% - var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2);
-}
-
-#splitter.is-collapsed-start #gripper {
-    inset-inline-start: 0;
-}
-
-#splitter.is-collapsed-end #gripper {
-    inset-inline: auto 0;
-}
-
-:host([resizable]) #splitter.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)));
-}
-
-:host([resizable]) #splitter.is-hovered #gripper {
-    border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-}
-
-:host([resizable]) #splitter.is-hovered #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)));
-}
-
-@media (hover: hover) {
-    :host([resizable]) #splitter:hover {
-        background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-    }
-
-    :host([resizable]) #splitter:hover #gripper {
-        border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-    }
-
-    :host([resizable]) #splitter:hover #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)));
-    }
-}
-
-:host([resizable]) #splitter.is-active,
-:host([resizable]) #splitter:active {
-    background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
-}
-
-:host([resizable]) #splitter.is-active #gripper,
-:host([resizable]) #splitter:active #gripper {
-    border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
-}
-
-:host([resizable]) #splitter.is-active #gripper:before,
-:host([resizable]) #splitter:active #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)));
-}
-
-:host([resizable]) #splitter:focus {
-    outline: none;
-}
-
-:host([resizable]) #splitter:focus-visible {
-    background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
-    outline: none;
-}
-
-:host([resizable]) #splitter:focus-visible #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)));
-}
-
-:host([resizable]) #splitter:focus-visible #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)));
-}
-
-:host([vertical]) {
-    flex-direction: column;
-}
-
-:host([vertical]) ::slotted(*) {
-    block-size: auto;
-    inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
-}
-
-:host([vertical]) #gripper {
-    transform: translate(calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) * -1));
-    inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
-    block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
-    border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
-    border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
-    inset-block-start: calc((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2 * -1);
-    inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
-}
-
-:host([vertical]) #splitter {
-    inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
-    block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
-}
-
-:host([vertical]) #splitter.is-collapsed-end #gripper,
-:host([vertical]) #splitter.is-collapsed-start #gripper {
-    inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
-}
-
-:host([vertical]) #splitter.is-collapsed-end #gripper:before,
-:host([vertical]) #splitter.is-collapsed-start #gripper:before {
-    inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
-    block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
-    inset-block-start: calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2);
-    inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
-}
-
-:host([vertical]) #splitter.is-collapsed-start #gripper {
-    inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
-}
-
-:host([vertical]) #splitter.is-collapsed-end #gripper {
-    inset-block-start: auto;
-    inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-splitview-handle-background-color: CanvasText;
-        --highcontrast-splitview-handle-background-color-hover: CanvasText;
-        --highcontrast-splitview-handle-background-color-down: CanvasText;
-        --highcontrast-splitview-handle-background-color-focus: Highlight;
-    }
-}
diff --git a/packages/split-view/src/split-view-overrides.css b/packages/split-view/src/split-view-overrides.css
deleted file mode 100644
index 3b2e685e4c8..00000000000
--- a/packages/split-view/src/split-view-overrides.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-splitview-background-color: var(--system-split-view-background-color);
-    --spectrum-splitview-handle-background-color: var(--system-split-view-handle-background-color);
-    --spectrum-splitview-gripper-border-radius: var(--system-split-view-gripper-border-radius);
-}
diff --git a/packages/split-view/src/split-view.css b/packages/split-view/src/split-view.css
index e6f143dcd02..0dcaa6077a4 100644
--- a/packages/split-view/src/split-view.css
+++ b/packages/split-view/src/split-view.css
@@ -10,29 +10,52 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-split-view.css");
-@import url("./split-view-overrides.css");
-
+/* base variables */
+/* Base variables */
 :host {
+    /* layout */
+    --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-split-view-first-pane-size: 50%;
+
+    /* colors */
+    --spectrum-splitview-background-color: var(--spectrum-gray-75);
+    --spectrum-splitview-handle-background-color: var(--spectrum-gray-200);
+    --spectrum-splitview-content-color: var(--spectrum-body-color);
+    --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);
+
+    /* dimensions */
+    --spectrum-splitview-gripper-border-radius: 2px;
+    --spectrum-splitview-handle-width: var(--spectrum-border-width-200);
+    --spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
+    --spectrum-splitview-gripper-height: 16px;
+    --spectrum-splitview-gripper-border-width-horizontal: 3px;
+    --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
+
+    /* base layout */
+    display: flex;
+    overflow: hidden;
+    background-color: var(--spectrum-splitview-background-color);
+    color: var(--spectrum-splitview-content-color);
 }
 
+/* pane styles */
 ::slotted(*) {
+    block-size: 100%;
+    background-color: var(--spectrum-splitview-background-color);
+    color: var(--spectrum-splitview-content-color);
     overflow: auto;
 }
 
+/* pane order */
 ::slotted(:first-child) {
     order: 1;
 }
 
-:host(:not([vertical])) ::slotted(:first-child:not(:last-child)) {
-    width: var(--spectrum-split-view-first-pane-size);
-}
-
-:host([vertical]) ::slotted(:first-child:not(:last-child)) {
-    height: var(--spectrum-split-view-first-pane-size);
-}
-
 ::slotted(:nth-child(2)) {
     order: 3;
     flex: 1;
@@ -42,15 +65,49 @@
     display: none;
 }
 
-#gripper {
-    touch-action: none;
+/* pane sizing */
+:host(:not([vertical])) ::slotted(:first-child:not(:last-child)) {
+    inline-size: var(--spectrum-split-view-first-pane-size);
 }
 
+:host([vertical]) ::slotted(:first-child:not(:last-child)) {
+    block-size: var(--spectrum-split-view-first-pane-size);
+}
+
+/* splitter styles */
 #splitter {
+    background-color: var(--highcontrast-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color));
+    user-select: none;
+    inline-size: var(--spectrum-splitview-handle-width);
+    block-size: 100%;
+    z-index: 1;
+    position: relative;
     order: 2;
-    height: auto; /* for horizontal splitviews without proper outter height value */
 }
 
+/* gripper styles */
+#gripper {
+    content: "";
+    border-radius: var(--spectrum-splitview-gripper-border-radius);
+    border-style: solid;
+    border-color: var(--highcontrast-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color));
+    touch-action: none;
+    inline-size: var(--spectrum-splitview-gripper-width);
+    block-size: var(--spectrum-splitview-gripper-height);
+    border-block-width: var(--spectrum-splitview-gripper-border-width-vertical);
+    border-inline-width: var(--spectrum-splitview-gripper-border-width-horizontal);
+    display: block;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: calc((var(--spectrum-splitview-gripper-width) + (2 * var(--spectrum-splitview-gripper-border-width-vertical)) - var(--spectrum-splitview-gripper-width)) / 2 * -1);
+    transform: translateY(-50%);
+}
+
+#gripper:before {
+    background-color: var(--highcontrast-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color));
+}
+
+/* resizable states */
 :host([resizable]) #splitter {
     background-clip: content-box;
     cursor: ew-resize;
@@ -61,6 +118,7 @@
     cursor: ns-resize;
 }
 
+/* cursor states for resizing */
 :host([resizable][dir="ltr"]) #splitter.is-resized-start,
 :host([resizable][dir="rtl"]) #splitter.is-resized-end {
     cursor: e-resize;
@@ -79,6 +137,7 @@
     cursor: n-resize;
 }
 
+/* collapsible states */
 :host([resizable][collapsible]) #splitter.is-resized-start,
 :host([resizable][collapsible]) #splitter.is-resized-end {
     cursor: ew-resize;
@@ -106,3 +165,136 @@
 :host([vertical][resizable][collapsible]) #splitter.is-resized-end {
     cursor: ns-resize;
 }
+
+/* collapsed states */
+#splitter.is-collapsed-end #gripper:before,
+#splitter.is-collapsed-start #gripper:before {
+    content: "";
+    inline-size: var(--spectrum-splitview-handle-width);
+    block-size: 100%;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(50% - var(--spectrum-splitview-handle-width) / 2);
+}
+
+#splitter.is-collapsed-start #gripper {
+    inset-inline-start: 0;
+}
+
+#splitter.is-collapsed-end #gripper {
+    inset-inline: auto 0;
+}
+
+/* hover states */
+:host([resizable]) #splitter.is-hovered {
+    background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover));
+}
+
+:host([resizable]) #splitter.is-hovered #gripper {
+    border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover));
+}
+
+:host([resizable]) #splitter.is-hovered #gripper:before {
+    background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover));
+}
+
+:host([resizable]) #splitter:hover #gripper {
+    border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover));
+}
+
+:host([resizable]) #splitter:hover #gripper:before {
+    background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover));
+}
+
+/* active states */
+:host([resizable]) #splitter.is-active,
+:host([resizable]) #splitter:active {
+    background-color: var(--highcontrast-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down));
+}
+
+:host([resizable]) #splitter.is-active #gripper,
+:host([resizable]) #splitter:active #gripper {
+    border-color: var(--highcontrast-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down));
+}
+
+:host([resizable]) #splitter.is-active #gripper:before,
+:host([resizable]) #splitter:active #gripper:before {
+    background-color: var(--highcontrast-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down));
+}
+
+/* focus states */
+:host([resizable]) #splitter:focus {
+    outline: none;
+}
+
+:host([resizable]) #splitter:focus-visible {
+    background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus));
+    outline: none;
+}
+
+:host([resizable]) #splitter:focus-visible #gripper {
+    border-color: var(--highcontrast-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(--spectrum-splitview-handle-background-color-focus));
+}
+
+:host([resizable]) #splitter:focus-visible #gripper:before {
+    background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus));
+}
+
+/* vertical layout */
+:host([vertical]) {
+    flex-direction: column;
+}
+
+:host([vertical]) ::slotted(*) {
+    block-size: auto;
+    inline-size: var(--spectrum-splitview-vertical-width);
+}
+
+:host([vertical]) #gripper {
+    transform: translate(calc(var(--spectrum-splitview-vertical-gripper-width) * -1));
+    inline-size: var(--spectrum-splitview-gripper-height);
+    block-size: var(--spectrum-splitview-gripper-width);
+    border-block-width: var(--spectrum-splitview-gripper-border-width-horizontal);
+    border-inline-width: var(--spectrum-splitview-gripper-border-width-vertical);
+    inset-block-start: calc((var(--spectrum-splitview-gripper-width) + (2 * var(--spectrum-splitview-gripper-border-width-vertical)) - var(--spectrum-splitview-gripper-width)) / 2 * -1);
+    inset-inline-start: var(--spectrum-splitview-vertical-gripper-width);
+}
+
+:host([vertical]) #splitter {
+    inline-size: var(--spectrum-splitview-vertical-width);
+    block-size: var(--spectrum-splitview-handle-width);
+}
+
+:host([vertical]) #splitter.is-collapsed-end #gripper,
+:host([vertical]) #splitter.is-collapsed-start #gripper {
+    inset-inline-start: var(--spectrum-splitview-vertical-gripper-width);
+}
+
+:host([vertical]) #splitter.is-collapsed-end #gripper:before,
+:host([vertical]) #splitter.is-collapsed-start #gripper:before {
+    inline-size: var(--spectrum-splitview-vertical-gripper-outer-width);
+    block-size: var(--spectrum-splitview-handle-width);
+    inset-block-start: calc(var(--spectrum-splitview-vertical-gripper-width) - var(--spectrum-splitview-handle-width) / 2);
+    inset-inline-start: var(--spectrum-splitview-vertical-gripper-reset);
+}
+
+:host([vertical]) #splitter.is-collapsed-start #gripper {
+    inset-block-start: var(--spectrum-splitview-vertical-gripper-reset);
+}
+
+:host([vertical]) #splitter.is-collapsed-end #gripper {
+    inset-block-start: auto;
+    inset-block-end: var(--spectrum-splitview-vertical-gripper-reset);
+}
+
+.handle {
+    border-radius: var(--spectrum-splitview-gripper-border-radius);
+    border-color: var(--highcontrast-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color));
+    inline-size: var(--spectrum-splitview-gripper-width);
+    block-size: var(--spectrum-splitview-gripper-height);
+    border-block-width: var(--spectrum-splitview-gripper-border-width-vertical);
+    border-inline-width: var(--spectrum-splitview-gripper-border-width-horizontal);
+    inset-inline-start: calc((var(--spectrum-splitview-gripper-width) + (2 * var(--spectrum-splitview-gripper-border-width-vertical)) - var(--spectrum-splitview-gripper-width)) / 2 * -1);
+    background-color: var(--highcontrast-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color));
+}
diff --git a/packages/status-light/package.json b/packages/status-light/package.json
index 176ca1ca1aa..12b39ebc44b 100644
--- a/packages/status-light/package.json
+++ b/packages/status-light/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/status-light-overrides.css.js": "./src/status-light-overrides.css.js",
         "./src/status-light.css.js": "./src/status-light.css.js",
         "./sp-status-light.js": {
             "development": "./sp-status-light.dev.js",
diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css
deleted file mode 100644
index 7a37b8242b5..00000000000
--- a/packages/status-light/src/spectrum-status-light.css
+++ /dev/null
@@ -1,212 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host([dir]),
-:host {
-    --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);
-}
-
-:host([size="s"]) {
-    --spectrum-statuslight-height: var(--spectrum-component-height-75);
-    --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small);
-    --spectrum-statuslight-font-size: var(--spectrum-font-size-75);
-    --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75);
-    --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small);
-    --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
-    --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
-}
-
-:host([size="l"]) {
-    --spectrum-statuslight-height: var(--spectrum-component-height-200);
-    --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large);
-    --spectrum-statuslight-font-size: var(--spectrum-font-size-200);
-    --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200);
-    --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large);
-    --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
-    --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200);
-}
-
-:host([size="xl"]) {
-    --spectrum-statuslight-height: var(--spectrum-component-height-300);
-    --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large);
-    --spectrum-statuslight-font-size: var(--spectrum-font-size-300);
-    --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300);
-    --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large);
-    --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
-    --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
-}
-
-:host([dir]) {
-    --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);
-    min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height));
-    box-sizing: border-box;
-    font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
-    font-weight: 400;
-    font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight));
-    line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height));
-    color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default)));
-    flex-direction: row;
-    align-items: flex-start;
-    padding-block-start: var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label));
-    padding-block-end: var(--mod-statuslight-spacing-bottom-to-label, var(--spectrum-statuslight-spacing-bottom-to-label));
-    padding-inline: 0;
-    display: flex;
-}
-
-:host(:lang(ja)),
-:host(:lang(ko)),
-:host(:lang(zh)) {
-    line-height: var(--mod-statuslight-line-height-cjk, var(--spectrum-statuslight-line-height-cjk));
-}
-
-:host:before {
-    --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));
-    content: "";
-    inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
-    block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
-    border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius));
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot);
-    margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label));
-    display: inline-block;
-}
-
-:host([variant="neutral"]) {
-    color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));
-    font-style: italic;
-}
-
-:host([variant="neutral"]):before {
-    background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color));
-}
-
-.spectrum-StatusLight--accent:before {
-    background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color));
-}
-
-:host([variant="info"]):before {
-    background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color));
-}
-
-:host([variant="negative"]):before {
-    background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color));
-}
-
-:host([variant="notice"]):before {
-    background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color));
-}
-
-:host([variant="positive"]):before {
-    background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color));
-}
-
-.spectrum-StatusLight--gray:before {
-    background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color));
-}
-
-.spectrum-StatusLight--red:before {
-    background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color));
-}
-
-.spectrum-StatusLight--orange:before {
-    background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color));
-}
-
-:host([variant="yellow"]):before {
-    background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color));
-}
-
-:host([variant="chartreuse"]):before {
-    background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color));
-}
-
-:host([variant="celery"]):before {
-    background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color));
-}
-
-.spectrum-StatusLight--green:before {
-    background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color));
-}
-
-:host([variant="seafoam"]):before {
-    background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color));
-}
-
-.spectrum-StatusLight--cyan:before {
-    background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color));
-}
-
-.spectrum-StatusLight--blue:before {
-    background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color));
-}
-
-:host([variant="indigo"]):before {
-    background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color));
-}
-
-:host([variant="purple"]):before {
-    background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color));
-}
-
-:host([variant="fuchsia"]):before {
-    background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color));
-}
-
-:host([variant="magenta"]):before {
-    background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color));
-}
-
-@media (forced-colors: active) {
-    :host([dir]) {
-        --highcontrast-statuslight-content-color-default: CanvasText;
-        --highcontrast-statuslight-subdued-content-color-default: CanvasText;
-        forced-color-adjust: none;
-    }
-
-    :host:before {
-        forced-color-adjust: none;
-        border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText;
-    }
-}
diff --git a/packages/status-light/src/status-light-overrides.css b/packages/status-light/src/status-light-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/status-light/src/status-light-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/status-light/src/status-light.css b/packages/status-light/src/status-light.css
index 9c817937f7c..f63b1232ee5 100644
--- a/packages/status-light/src/status-light.css
+++ b/packages/status-light/src/status-light.css
@@ -10,11 +10,368 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-status-light.css");
+/* Component structure:
+ * The status light is a visual indicator that uses color and an optional label to represent status:
+ * - Semantic variants: neutral, info, positive, negative, notice
+ * - Non-semantic variants: gray, red, orange, yellow, chartreuse, celery, green, seafoam, cyan, blue, indigo, purple, fuchsia, magenta
+ * - Size variants: s, l, xl
+ * - Supports CJK text with adjusted line heights
+ */
+
+/* Base variables */
+:host {
+    /* Layout properties - defines the component's size and spacing */
+    --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);
+
+    /* Spacing properties - controls the layout between dot and label */
+    --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);
+
+    /* Visual properties - defines the dot's appearance */
+    --spectrum-statuslight-corner-radius: 50%;
+    --spectrum-statuslight-border-width: var(--spectrum-border-width-100);
+
+    /* Typography settings for the label */
+    --spectrum-statuslight-font-weight: 400;
+    --spectrum-statuslight-line-height: var(--spectrum-line-height-100);
+    --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+    /* Semantic color tokens - used for status indicators with meaning */
+    --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);
+
+    /* Non-semantic color tokens - for custom color status indicators */
+    --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);
+
+    /* base styles */
+    min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height));
+    box-sizing: border-box;
+    font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
+    font-weight: 400;
+    font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight));
+    line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height));
+    color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default)));
+    flex-direction: row;
+    align-items: flex-start;
+    padding-block-start: var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label));
+    padding-block-end: var(--mod-statuslight-spacing-bottom-to-label, var(--spectrum-statuslight-spacing-bottom-to-label));
+    padding-inline: 0;
+    display: flex;
+}
+
+/* language-specific line-height */
+:host(:lang(ja)),
+:host(:lang(ko)),
+:host(:lang(zh)) {
+    line-height: var(--mod-statuslight-line-height-cjk, var(--spectrum-statuslight-line-height-cjk));
+}
+
+/* status Light Dot */
+:host:before {
+    --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));
+    content: "";
+    inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
+    block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
+    border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius));
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot);
+    margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label));
+    display: inline-block;
+}
+
+/* semantic Variants */
+:host([variant="neutral"]) {
+    color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));
+    font-style: italic;
+}
+
+:host([variant="neutral"]):before {
+    background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color));
+}
+
+.spectrum-StatusLight--accent:before {
+    background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color));
+}
+
+:host([variant="info"]):before {
+    background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color));
+}
+
+:host([variant="negative"]):before {
+    background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color));
+}
+
+:host([variant="notice"]):before {
+    background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color));
+}
+
+:host([variant="positive"]):before {
+    background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color));
+}
+
+/* non-semantic Variants */
+.spectrum-StatusLight--gray:before {
+    background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color));
+}
+
+.spectrum-StatusLight--red:before {
+    background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color));
+}
+
+.spectrum-StatusLight--orange:before {
+    background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color));
+}
+
+:host([variant="yellow"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color));
+}
+
+:host([variant="chartreuse"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color));
+}
+
+:host([variant="celery"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color));
+}
+
+.spectrum-StatusLight--green:before {
+    background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color));
+}
+
+:host([variant="seafoam"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color));
+}
+
+.spectrum-StatusLight--cyan:before {
+    background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color));
+}
+
+.spectrum-StatusLight--blue:before {
+    background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color));
+}
+
+:host([variant="indigo"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color));
+}
+
+:host([variant="purple"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color));
+}
+
+:host([variant="fuchsia"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color));
+}
+
+:host([variant="magenta"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color));
+}
+
+:host:before {
+    forced-color-adjust: none;
+    border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText;
+}
+
+/* base variables */
+/* Base variables */
+:host {
+    /* layout */
+    --spectrum-statuslight-height: var(--spectrum-component-height-100);
+    --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
+    --spectrum-statuslight-corner-radius: 50%;
+    --spectrum-statuslight-border-width: var(--spectrum-border-width-100);
+
+    /* spacing */
+    --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
+    --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-component-top-to-workflow-icon-100);
+    --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);
+
+    /* typography */
+    --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
+    --spectrum-statuslight-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-statuslight-line-height: var(--spectrum-line-height-100);
+    --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+    /* colors - Semantic */
+    --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);
+
+    /* colors - Non-semantic */
+    --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-700);
+    --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-700);
+    --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-700);
+    --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-700);
+    --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-700);
+    --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-700);
+    --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-700);
+    --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-700);
+    --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-700);
+    --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-700);
+    --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-700);
+    --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-700);
+    --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-700);
+    --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-700);
+
+    /* base styles */
+    min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height));
+    box-sizing: border-box;
+    font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
+    font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight));
+    line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height));
+    color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default)));
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding-block-start: var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label));
+    padding-block-end: var(--mod-statuslight-spacing-bottom-to-label, var(--spectrum-statuslight-spacing-bottom-to-label));
+    padding-inline: 0;
+}
+
+/* size variants */
+:host([size="s"]) {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
+
+/* language-specific line height */
+:host(:lang(ja)),
+:host(:lang(ko)),
+:host(:lang(zh)) {
+    line-height: var(--mod-statuslight-line-height-cjk, var(--spectrum-statuslight-line-height-cjk));
+}
+
+/* status dot */
+:host:before {
+    --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));
+
+    content: "";
+    inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
+    block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
+    border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius));
+    margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot);
+    margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label));
+    display: inline-block;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+/* semantic variants */
+:host([variant="neutral"]) {
+    color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));
+    font-style: italic;
+}
+
+:host([variant="neutral"]):before {
+    background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color));
+}
+
+:host([variant="info"]):before {
+    background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color));
+}
+
+:host([variant="negative"]):before {
+    background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color));
+}
+
+:host([variant="notice"]):before {
+    background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color));
+}
+
+:host([variant="positive"]):before {
+    background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color));
+}
+
+/* non-semantic color variants */
+:host([variant="gray"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color));
+}
+
+:host([variant="red"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color));
+}
+
+:host([variant="orange"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color));
+}
+
+:host([variant="yellow"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color));
+}
+
+:host([variant="chartreuse"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color));
+}
+
+:host([variant="celery"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color));
+}
+
+:host([variant="green"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color));
+}
+
+:host([variant="seafoam"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color));
+}
+
+:host([variant="cyan"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color));
+}
+
+:host([variant="blue"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color));
+}
+
+:host([variant="indigo"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color));
+}
+
+:host([variant="purple"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color));
+}
+
+:host([variant="fuchsia"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color));
+}
+
+:host([variant="magenta"]):before {
+    background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color));
+}
 
-/* Force cascade position of [disabled] styling */
-:host([disabled]):before {
-    /* .spectrum-StatusLight.is-disabled:before,
-   * .spectrum-StatusLight[disabled]:before */
-    background-color: var(--spectrum-statuslight-dot-color-disabled, var(--spectrum-gray-400));
+:host:before {
+    background-color: ButtonText;
 }
diff --git a/packages/swatch/package.json b/packages/swatch/package.json
index 9d80922f896..6e0b9bf8242 100644
--- a/packages/swatch/package.json
+++ b/packages/swatch/package.json
@@ -37,9 +37,7 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/swatch-group-overrides.css.js": "./src/swatch-group-overrides.css.js",
         "./src/swatch-group.css.js": "./src/swatch-group.css.js",
-        "./src/swatch-overrides.css.js": "./src/swatch-overrides.css.js",
         "./src/swatch.css.js": "./src/swatch.css.js",
         "./sp-swatch.js": {
             "development": "./sp-swatch.dev.js",
diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts
index d92bf668c8c..cf1dbaedfbc 100644
--- a/packages/swatch/src/Swatch.ts
+++ b/packages/swatch/src/Swatch.ts
@@ -9,6 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+
 import {
     CSSResultArray,
     html,
@@ -85,6 +86,9 @@ export class Swatch extends SizedMixin(Focusable, {
     @property({ type: Boolean, reflect: true, attribute: 'mixed-value' })
     public mixedValue = false;
 
+    @property({ type: Boolean, reflect: true })
+    public add = false;
+
     @property({ type: Boolean, reflect: true })
     public nothing = false;
 
diff --git a/packages/swatch/src/spectrum-swatch.css b/packages/swatch/src/spectrum-swatch.css
deleted file mode 100644
index f0bf0a0f8db..00000000000
--- a/packages/swatch/src/spectrum-swatch.css
+++ /dev/null
@@ -1,237 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --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;
-    }
-
-    .fill {
-        forced-color-adjust: none;
-    }
-
-    :host([disabled]),
-    :host([disabled]) {
-        --highcontrast-swatch-border-color: GrayText;
-    }
-}
-
-:host {
-    inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
-    block-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
-    -webkit-user-select: none;
-    user-select: none;
-    outline: none;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    position: relative;
-}
-
-.disabledIcon {
-    inline-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size));
-    block-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size));
-}
-
-:host,
-:host:before {
-    border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
-}
-
-:host([selected]) {
-    background-color: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected)));
-}
-
-:host([selected]) .fill {
-    clip-path: polygon(
-        calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
-        calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
-        calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
-        calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)
-    );
-    border-radius: 0;
-}
-
-:host([selected]) .fill:before {
-    box-shadow: none;
-    border-radius: 0;
-}
-
-:host([selected]):before {
-    opacity: 1;
-}
-
-:host .is-image .fill:before {
-    background-color: initial;
-}
-
-:host([mixed-value]) .fill {
-    background: none;
-    background: var(--spectrum-picked-color, transparent);
-}
-
-:host([mixed-value]) .mixedValueIcon {
-    color: var(--spectrum-swatch-dash-icon-color);
-    display: block;
-}
-
-:host([nothing]) .fill {
-    background-color: initial;
-    background-color: var(--spectrum-picked-color, transparent);
-    background-image: none;
-}
-
-:host([nothing]) .fill:after {
-    inline-size: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness));
-    content: "";
-    block-size: 200%;
-    background: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color)));
-    position: absolute;
-    transform: rotate(-45deg);
-}
-
-:host([nothing][shape="rectangle"]) .fill:after {
-    transform: rotate(-25deg);
-}
-
-:host([disabled]) .disabledIcon,
-:host([disabled]) .disabledIcon {
-    display: block;
-}
-
-:host:before {
-    content: "";
-    border-width: var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected));
-    border-style: solid;
-    border-color: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected)));
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-}
-
-:host:after {
-    content: "";
-    inset: calc(var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap)) * -2);
-    opacity: 0;
-    border-width: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness));
-    border-style: solid;
-    border-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color)));
-    border-radius: var(--mod-swatch-focus-indicator-border-radius, var(--spectrum-swatch-focus-indicator-border-radius));
-    transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
-    position: absolute;
-}
-
-:host(:focus-visible):after {
-    opacity: 1;
-}
-
-.fill {
-    inline-size: 100%;
-    block-size: 100%;
-    box-sizing: border-box;
-    border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-}
-
-.fill:before {
-    content: "";
-    z-index: 0;
-    box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)));
-    border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
-    position: absolute;
-    inset: 0;
-}
-
-:host([border="none"]) .fill:before,
-.fill:before {
-    background-color: initial;
-    background-color: var(--spectrum-picked-color, transparent);
-}
-
-:host([border="none"]) .fill:before {
-    box-shadow: none;
-}
-
-:host([border="light"]) .fill:before {
-    box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color-light, var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light)));
-}
-
-.mixedValueIcon {
-    pointer-events: none;
-    color: #0000;
-    color: var(--spectrum-picked-color, transparent);
-    display: none;
-}
-
-.disabledIcon {
-    z-index: 1;
-    pointer-events: none;
-    color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
-    stroke: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
-    display: none;
-    position: relative;
-}
-
-.disabledIcon path:first-child {
-    fill: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
-}
-
-.disabledIcon path:last-child {
-    fill: var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color));
-}
-
-:host([shape="rectangle"]) {
-    inline-size: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2);
-}
-
-:host([rounding="none"]),
-:host([rounding="none"]) .fill,
-:host([rounding="none"]) .fill:before,
-:host([rounding="none"][selected]) .fill,
-:host([rounding="none"][selected]) .fill:before,
-:host([rounding="none"]):after,
-:host([rounding="none"]):before {
-    border-radius: 0;
-}
-
-:host([rounding="full"][selected]:not([shape="rectangle"])) .fill,
-:host([rounding="full"][selected]:not([shape="rectangle"])) .fill:before,
-:host([rounding="full"]:not([shape="rectangle"])),
-:host([rounding="full"]:not([shape="rectangle"])) .fill,
-:host([rounding="full"]:not([shape="rectangle"])) .fill:before,
-:host([rounding="full"]:not([shape="rectangle"])):after,
-:host([rounding="full"]:not([shape="rectangle"])):before {
-    border-radius: 100%;
-}
-
-:host([rounding="full"][selected]:not([shape="rectangle"])) .fill {
-    clip-path: circle(calc(50% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) at 50% 50%);
-}
-
-::slotted([slot="image"]) {
-    object-fit: contain;
-    inline-size: 100%;
-    block-size: 100%;
-    transition:
-        width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
-        height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
-}
diff --git a/packages/swatch/src/swatch-group-overrides.css b/packages/swatch/src/swatch-group-overrides.css
deleted file mode 100644
index 4f7f416ce30..00000000000
--- a/packages/swatch/src/swatch-group-overrides.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-swatchgroup-spacing-compact: var(--system-swatch-group-spacing-compact);
-    --spectrum-swatchgroup-spacing-regular: var(--system-swatch-group-spacing-regular);
-    --spectrum-swatchgroup-spacing-spacious: var(--system-swatch-group-spacing-spacious);
-}
diff --git a/packages/swatch/src/swatch-group.css b/packages/swatch/src/swatch-group.css
index 5748cefd014..942832bf647 100644
--- a/packages/swatch/src/swatch-group.css
+++ b/packages/swatch/src/swatch-group.css
@@ -1,8 +1,9 @@
 /**
- * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * 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
@@ -10,5 +11,25 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-swatch-group.css");
-@import url("./swatch-group-overrides.css");
+:host {
+    --spectrum-swatchgroup-spacing: var(--spectrum-spacing-75);
+
+    --mod-swatch-border-opacity: 0.2;
+    display: inline-flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--mod-swatchgroup-spacing, var(--spectrum-swatchgroup-spacing));
+}
+
+:host([compact]) {
+    --spectrum-swatchgroup-spacing: var(--spectrum-spacing-50);
+}
+
+:host([spacious]:has([size="xs"], [size="s"])) {
+    --spectrum-swatchgroup-spacing: var(--spectrum-swatch-group-spacing-spacious);
+}
+
+:host([spacious]:has([size="m"], [size="l"])) {
+    --spectrum-swatchgroup-spacing: var(--spectrum-spacing-100);
+}
diff --git a/packages/swatch/src/swatch-overrides.css b/packages/swatch/src/swatch-overrides.css
deleted file mode 100644
index 827a86b74cf..00000000000
--- a/packages/swatch/src/swatch-overrides.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host([size="l"]) {
-    --spectrum-swatch-size: var(--system-swatch-size-l-size);
-    --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-l-disabled-icon-size);
-    --spectrum-swatch-slash-thickness: var(--system-swatch-size-l-slash-thickness);
-}
-
-:host([size="s"]) {
-    --spectrum-swatch-size: var(--system-swatch-size-s-size);
-    --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-s-disabled-icon-size);
-    --spectrum-swatch-slash-thickness: var(--system-swatch-size-s-slash-thickness);
-}
-
-:host([size="xs"]) {
-    --spectrum-swatch-size: var(--system-swatch-size-xs-size);
-    --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-xs-disabled-icon-size);
-    --spectrum-swatch-slash-thickness: var(--system-swatch-size-xs-slash-thickness);
-}
-
-:host {
-    --spectrum-swatch-size: var(--system-swatch-size-m-size);
-    --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-m-disabled-icon-size);
-    --spectrum-swatch-slash-thickness: var(--system-swatch-size-m-slash-thickness);
-}
-
-:host {
-    --spectrum-swatch-border-radius: var(--system-swatch-border-radius);
-    --spectrum-swatch-focus-indicator-border-radius: var(--system-swatch-focus-indicator-border-radius);
-    --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness);
-    --spectrum-swatch-border-thickness-selected: var(--system-swatch-border-thickness-selected);
-    --spectrum-swatch-focus-indicator-thickness: var(--system-swatch-focus-indicator-thickness);
-    --spectrum-swatch-focus-indicator-gap: var(--system-swatch-focus-indicator-gap);
-    --spectrum-swatch-border-color-opacity: var(--system-swatch-border-color-opacity);
-    --spectrum-swatch-border-color-light-opacity: var(--system-swatch-border-color-light-opacity);
-    --spectrum-swatch-border-color: var(--system-swatch-border-color);
-    --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color);
-    --spectrum-swatch-border-color-light: var(--system-swatch-border-color-light);
-    --spectrum-swatch-border-color-selected: var(--system-swatch-border-color-selected);
-    --spectrum-swatch-inner-border-color-selected: var(--system-swatch-inner-border-color-selected);
-    --spectrum-swatch-disabled-icon-color: var(--system-swatch-disabled-icon-color);
-    --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color);
-    --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color);
-    --spectrum-swatch-focus-indicator-color: var(--system-swatch-focus-indicator-color);
-    --spectrum-swatch-size: var(--system-swatch-size);
-    --spectrum-swatch-disabled-icon-size: var(--system-swatch-disabled-icon-size);
-    --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness);
-}
diff --git a/packages/swatch/src/swatch.css b/packages/swatch/src/swatch.css
index 4386326cab1..d04e6c45896 100644
--- a/packages/swatch/src/swatch.css
+++ b/packages/swatch/src/swatch.css
@@ -10,25 +10,338 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-swatch.css");
-@import url("./swatch-overrides.css");
+:host {
+    --spectrum-swatch-icon-border-color: var(--mod-swatch-icon-border-color, rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity)));
+    --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-medium));
+    --spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-100));
+    --spectrum-swatch-border-thickness: var(--mod-swatch-border-thickness, var(--spectrum-border-width-100));
+    --spectrum-swatch-border-thickness-selected: var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200));
+    --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75));
+    --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-medium));
+    --spectrum-swatch-border-color-selected: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000)));
+    --spectrum-swatch-inner-border-color-selected: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25)));
+    --spectrum-swatch-disabled-icon-color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-white)));
+    --spectrum-swatch-icon-color: var(--highcontrast-swatch-icon-color, var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default)));
+    --spectrum-swatch-slash-icon-color: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color)));
+    --spectrum-mixed-button-background: var(--spectrum-gray-25);
+    --spectrum-add-button-background: var(--spectrum-gray-100);
+    --spectrum-add-button-background-hover: var(--spectrum-gray-200);
+    --spectrum-add-button-background-down: var(--spectrum-gray-200);
+    --spectrum-add-button-background-keyboard-focus: var(--spectrum-gray-200);
+    --spectrum-swatch-border: rgb(from var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)) r g b / var(--mod-swatch-border-opacity, var(--spectrum-swatch-border-opacity)));
+    --spectrum-swatch-focus-indicator-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color)));
+    --spectrum-swatch-focus-indicator-thickness: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
+    --spectrum-swatch-focus-indicator-gap: var(--mod-swatch-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
+}
 
-/**
- * Begin work around for https://github.com/adobe/spectrum-css/issues/1460
- */
+:host([add]) {
+    --spectrum-swatch-border: var(--spectrum-add-button-background);
+}
 
-.fill:before {
+:host([add][hover]) {
+    --spectrum-swatch-border: var(--spectrum-add-button-background-hover);
+}
+
+:host([add][active]),
+:host([add]:active) {
+    --spectrum-swatch-border: var(--spectrum-add-button-background-down);
+}
+
+:host([size="xs"]) {
+    --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-extra-small));
+    --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-50));
+    --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-extra-small));
+}
+
+:host([size="s"]) {
+    --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-small));
+    --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75));
+    --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-small));
+}
+
+:host([size="l"]) {
+    --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-large));
+    --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-200));
+    --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-large));
+}
+
+:host {
+    inline-size: var(--spectrum-swatch-size);
+    block-size: var(--spectrum-swatch-size);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    outline-width: 0;
+    outline-style: solid;
+    outline-color: transparent;
+    user-select: none;
+    user-select: none;
+}
+
+:host .disabledIcon {
+    inline-size: var(--spectrum-swatch-disabled-icon-size);
+    block-size: var(--spectrum-swatch-disabled-icon-size);
+}
+
+:host,
+:host:before {
+    border-radius: var(--spectrum-swatch-border-radius);
+}
+
+:host([mixed-value]) {
+    --spectrum-picked-color: var(--mod-mixed-button-background, var(--spectrum-mixed-button-background));
+}
+
+:host([add]) {
+    --spectrum-picked-color: var(--mod-add-button-background, var(--spectrum-add-button-background));
+}
+
+:host([add]) .fill {
+    background: var(--spectrum-picked-color);
+}
+
+:host([add][hover]) {
+    --spectrum-picked-color: var(--mod-add-button-background-hover, var(--spectrum-add-button-background-hover));
+}
+
+:host([add][active]),
+:host([add]:active) {
+    --spectrum-picked-color: var(--mod-add-button-background-down, var(--spectrum-add-button-background-down));
+}
+
+:host([add][active]),
+:host([add][hover]),
+:host([add]:active) {
+    cursor: pointer;
+}
+
+@media (hover: hover) {
+    :host([add][hover]),
+    :host([add]:hover) {
+        --spectrum-swatch-border: var(--spectrum-add-button-background-hover);
+        --spectrum-picked-color: var(--mod-add-button-background-hover, var(--spectrum-add-button-background-hover));
+        cursor: pointer;
+    }
+}
+
+:host([add][focus-visible]),
+:host([add][keyboard-focused]),
+:host([add]:focus-visible) {
+    --spectrum-picked-color: var(--mod-add-button-background-keyboard-focus, var(--spectrum-add-button-background-keyboard-focus));
+}
+
+:host([add]) #icon {
+    color: var(--spectrum-swatch-icon-color);
+    display: block;
+}
+
+:host([focus-visible]),
+:host([keyboard-focused]),
+:host(:focus-visible) {
+    outline-width: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness));
+    outline-color: var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color));
+    outline-offset: var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap));
+
+    transition: outline-color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
+}
+
+:host([selected]) {
+    background: var(--spectrum-swatch-inner-border-color-selected);
+}
+
+:host([selected]) .fill {
+    clip-path: polygon(
+        calc(var(--spectrum-swatch-border-thickness-selected) * 2) calc(var(--spectrum-swatch-border-thickness-selected) * 2),
+        calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2) calc(var(--spectrum-swatch-border-thickness-selected) * 2),
+        calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2) calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2),
+        calc(var(--spectrum-swatch-border-thickness-selected) * 2) calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2)
+    );
+    border-radius: 0;
+}
+
+:host([selected]) .fill:before {
+    border-radius: 0;
+    box-shadow: none;
+}
+
+:host([selected]):before {
+    opacity: 1;
+}
+
+:host([image]) .fill:before {
+    background: transparent;
+}
+
+:host([mixed-value]) .fill {
     background: var(--spectrum-picked-color, transparent);
 }
 
-:host([border="none"]) .fill:before {
+:host([mixed-value]) #icon {
+    color: var(--spectrum-swatch-icon-color);
+    display: block;
+}
+
+:host(:not([mixed-value]), :not([add])) .fill {
     background: var(--spectrum-picked-color, transparent);
+    background-image: none;
 }
 
-:host .is-image .fill:before {
-    background: #0000;
+:host(:not([mixed-value]), :not([add])) .fill:after {
+    inline-size: var(--spectrum-swatch-slash-thickness);
+    content: "";
+    position: absolute;
+    transform: rotate(45deg);
+    block-size: 200%;
+    background: var(--spectrum-swatch-slash-icon-color);
 }
 
-/**
- * End workaround for https://github.com/adobe/spectrum-css/issues/1460
- */
+:host(:not([mixed-value]), :not([add])) .fill:after {
+    transform: rotate(65deg);
+    block-size: 215%;
+}
+
+:host([disabled]) .disabledIcon {
+    display: block;
+}
+
+:host:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+
+    border-width: var(--spectrum-swatch-border-thickness-selected);
+    border-style: solid;
+    border-color: var(--spectrum-swatch-border-color-selected);
+
+    opacity: 0;
+
+    pointer-events: none;
+}
+
+.fill {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: 100%;
+    block-size: 100%;
+    box-sizing: border-box;
+
+    position: relative;
+
+    overflow: hidden;
+}
+
+.fill,
+.fill:before {
+    border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
+}
+
+.fill:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: var(--spectrum-picked-color, transparent);
+    box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border, var(--spectrum-swatch-border)));
+}
+
+#icon {
+    display: none;
+    pointer-events: none;
+    color: var(--spectrum-picked-color, transparent);
+}
+
+.disabledIcon {
+    position: relative;
+    z-index: 1;
+
+    display: none;
+    pointer-events: none;
+
+    color: var(--spectrum-swatch-disabled-icon-color);
+    stroke: var(--spectrum-swatch-disabled-icon-color);
+}
+
+.disabledIcon path:first-child {
+    fill: var(--spectrum-swatch-disabled-icon-color);
+}
+
+.disabledIcon path:last-child {
+    fill: var(--spectrum-swatch-icon-border-color);
+}
+
+:host([shape="rectangle"]) {
+    inline-size: calc(var(--spectrum-swatch-size) * var(--spectrum-swatch-rectangle-width-multiplier));
+}
+
+:host([rounding="none"]) {
+    border-radius: var(--spectrum-corner-radius-none);
+}
+
+:host([rounding="full"]:not([shape="rectangle"])) {
+    border-radius: var(--mod-corner-radius-full, var(--spectrum-corner-radius-full));
+}
+
+:host([rounding="full"]:not([shape="rectangle"])) .fill {
+    clip-path: circle(calc(50% - var(--spectrum-swatch-border-thickness-selected) * 2) at 50% 50%);
+}
+
+::slotted([name="image"]) {
+    object-fit: contain;
+
+    inline-size: 100%;
+    block-size: 100%;
+
+    transition:
+        width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
+        height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
+}
+
+@media (forced-colors: active) {
+    :host {
+        --mod-mixed-button-background: ButtonFace;
+
+        --mod-add-button-background: ButtonFace;
+        --mod-add-button-background-hover: ButtonText;
+        --mod-add-button-background-down: ButtonText;
+
+        --highcontrast-swatch-disabled-icon-color: GrayText;
+        --highcontrast-swatch-focus-indicator-color: ButtonText;
+        --highcontrast-swatch-background-color-selected: ButtonFace;
+        --highcontrast-swatch-border-color-selected: Highlight;
+        --highcontrast-swatch-border-color: ButtonText;
+        --highcontrast-swatch-fill-foreground-color: ButtonText;
+    }
+
+    .fill {
+        forced-color-adjust: none;
+    }
+
+    :host([add][active]),
+    :host([add][hover]),
+    :host([add]:active),
+    :host([mixed-value]) {
+        --highcontrast-swatch-icon-color: ButtonFace;
+    }
+
+    @media (hover: hover) {
+        :host([add][hover]),
+        :host([add]:hover) {
+            --highcontrast-swatch-icon-color: ButtonFace;
+        }
+    }
+
+    :host([add][focus-visible]),
+    :host([add][keyboard-focused]),
+    :host([add]:focus-visible) {
+        --highcontrast-swatch-icon-color: ButtonFace;
+    }
+
+    :host([disabled]) {
+        --highcontrast-swatch-border-color: GrayText;
+    }
+}
diff --git a/packages/switch/package.json b/packages/switch/package.json
index 03dad3944c7..46244b6df17 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -33,8 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/switch-legacy.css.js": "./src/switch-legacy.css.js",
-        "./src/switch-overrides.css.js": "./src/switch-overrides.css.js",
         "./src/switch.css.js": "./src/switch.css.js",
         "./sp-switch.js": {
             "development": "./sp-switch.dev.js",
diff --git a/packages/switch/src/Switch.ts b/packages/switch/src/Switch.ts
index 2d79286f5c9..a4867d82711 100644
--- a/packages/switch/src/Switch.ts
+++ b/packages/switch/src/Switch.ts
@@ -20,7 +20,6 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { CheckboxBase } from '@spectrum-web-components/checkbox/src/CheckboxBase.js';
 import switchStyles from './switch.css.js';
-import legacyStyles from './switch-legacy.css.js';
 
 /**
  * @element sp-switch
@@ -33,7 +32,7 @@ export class Switch extends SizedMixin(CheckboxBase) {
         /* c8 ignore next 4 */
         if (window.hasOwnProperty('ShadyDOM')) {
             // Override some styles if we are using the web component polyfill
-            return [switchStyles, legacyStyles];
+            return [switchStyles];
         }
         return [switchStyles];
     }
diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css
deleted file mode 100644
index bdcf8069a47..00000000000
--- a/packages/switch/src/spectrum-switch.css
+++ /dev/null
@@ -1,411 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down);
-    --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-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-border-color-disabled: var(--spectrum-disabled-content-color);
-}
-
-:host([disabled]) {
-    --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color);
-}
-
-:host([emphasized]) {
-    --spectrum-switch-background-color-selected-default: var(--spectrum-accent-color-900);
-    --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-color-1000);
-    --spectrum-switch-background-color-selected-down: var(--spectrum-accent-color-1100);
-    --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-color-1000);
-    --spectrum-switch-handle-border-color-selected-default: var(--spectrum-accent-color-900);
-    --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-accent-color-1000);
-    --spectrum-switch-handle-border-color-selected-down: var(--spectrum-accent-color-1100);
-    --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000);
-}
-
-:host,
-:host {
-    --spectrum-switch-min-height: var(--spectrum-component-height-100);
-    --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium);
-    --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium);
-    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100);
-    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium);
-    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
-    --spectrum-switch-font-size: var(--spectrum-font-size-100);
-}
-
-:host([size="s"]) {
-    --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);
-}
-
-:host([size="l"]) {
-    --spectrum-switch-min-height: var(--spectrum-component-height-200);
-    --spectrum-switch-control-width: var(--spectrum-switch-control-width-large);
-    --spectrum-switch-control-height: var(--spectrum-switch-control-height-large);
-    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200);
-    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large);
-    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
-    --spectrum-switch-font-size: var(--spectrum-font-size-200);
-}
-
-:host([size="xl"]) {
-    --spectrum-switch-min-height: var(--spectrum-component-height-300);
-    --spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large);
-    --spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large);
-    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300);
-    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large);
-    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
-    --spectrum-switch-font-size: var(--spectrum-font-size-300);
-}
-
-:host {
-    min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height));
-    max-inline-size: 100%;
-    vertical-align: top;
-    align-items: flex-start;
-    display: inline-flex;
-    position: relative;
-}
-
-#input {
-    box-sizing: border-box;
-    inline-size: 100%;
-    block-size: 100%;
-    opacity: 0;
-    z-index: 1;
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
-
-:host([checked]) #input + #switch:before {
-    transform: translateX(calc(var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%));
-}
-
-:host([checked]) #input + #switch:dir(rtl):before,
-:host([dir="rtl"][checked]) #input + #switch:before {
-    transform: translateX(calc((var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%) * -1));
-}
-
-:host([disabled]) #input,
-:host([disabled]) #input {
-    cursor: default;
-}
-
-#input:focus-visible + #switch:after {
-    margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1);
-}
-
-#label {
-    color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default)));
-    margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing));
-    font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size));
-    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
-    transition: color var(--mod-animation-duration-200, var(--spectrum-animation-duration-200)) ease-in-out;
-    margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label));
-    margin-block-end: 0;
-}
-
-#switch {
-    box-sizing: border-box;
-    inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width));
-    margin-block: calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control, var(--spectrum-switch-spacing-top-to-control)));
-    vertical-align: middle;
-    transition:
-        background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
-        border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
-    block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height));
-    border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2);
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin-inline: 0;
-    display: inline-block;
-    position: relative;
-    inset-inline: 0;
-}
-
-#switch:before {
-    box-sizing: border-box;
-    transition:
-        background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
-        border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
-        transform var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
-        box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
-    inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height));
-    block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height));
-    border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
-    border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2);
-    border-style: solid;
-}
-
-#switch:after,
-#switch:before {
-    content: "";
-    display: block;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
-
-#switch:after {
-    border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2 + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
-    transition:
-        opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-        margin var(--spectrum-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
-    margin: 0;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-}
-
-#switch {
-    background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color)));
-}
-
-#switch:before {
-    background-color: var(--highcontrast-switch-handle-background-color, var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color)));
-    border-color: var(--highcontrast-switch-handle-border-color-default, var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default)));
-}
-
-:host(:active) #input + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-down, var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down)));
-}
-
-:host(:active) #input ~ #label {
-    color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down)));
-}
-
-:host(:active[checked]) #input:enabled + #switch {
-    background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down)));
-}
-
-:host(:active[checked]) #input:enabled + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-selected-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down)));
-}
-
-#input:focus-visible + #switch:after {
-    box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
-}
-
-#input:focus-visible + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus)));
-}
-
-:host([checked]) #input:focus-visible + #switch {
-    background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus)));
-}
-
-:host([checked]) #input:focus-visible + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus)));
-}
-
-#input:focus-visible ~ #label {
-    color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus)));
-}
-
-@media (hover: hover) {
-    :host(:hover) #input + #switch:before {
-        border-color: var(--highcontrast-switch-handle-border-color-hover, var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover)));
-        box-shadow: none;
-    }
-
-    :host(:hover) #input ~ #label {
-        color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover)));
-    }
-
-    :host([checked]:hover) #input:enabled + #switch {
-        background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover)));
-    }
-
-    :host([checked]:hover) #input:enabled + #switch:before {
-        border-color: var(--highcontrast-switch-handle-border-color-selected-hover, var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover)));
-    }
-
-    :host([disabled]:hover) #input + #switch,
-    :host([disabled]:hover) #input + #switch {
-        background-color: var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled));
-    }
-
-    :host([disabled]:hover) #input + #switch:before,
-    :host([disabled]:hover) #input + #switch:before {
-        border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
-    }
-
-    :host([disabled]:hover) #input ~ #label,
-    :host([disabled]:hover) #input ~ #label {
-        color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
-    }
-
-    :host([disabled][checked]:hover) #input + #switch,
-    :host([disabled][checked]:hover) #input + #switch {
-        background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled)));
-    }
-
-    :host([disabled][checked]:hover) #input + #switch:before,
-    :host([disabled][checked]:hover) #input + #switch:before {
-        border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
-    }
-
-    :host([disabled][checked]:hover) #input ~ #label,
-    :host([disabled][checked]:hover) #input ~ #label {
-        color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
-    }
-
-    :host(:hover) #input:focus-visible + #switch:after {
-        box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
-    }
-
-    :host(:hover) #input:focus-visible + #switch:before {
-        border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus)));
-    }
-
-    :host([checked]:hover) #input:focus-visible + #switch {
-        background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus)));
-    }
-
-    :host([checked]:hover) #input:focus-visible + #switch:before {
-        border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus)));
-    }
-
-    :host(:hover) #input:focus-visible ~ #label {
-        color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus)));
-    }
-}
-
-:host([checked]) #input + #switch {
-    background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default)));
-}
-
-:host([checked]) #input + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-selected-default, var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default)));
-}
-
-:host([disabled]) #input + #switch,
-:host([disabled]) #input + #switch {
-    background-color: var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled));
-}
-
-:host([disabled]) #input + #switch:before,
-:host([disabled]) #input + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
-}
-
-:host([disabled][checked]) #input + #switch,
-:host([disabled][checked]) #input + #switch {
-    background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled)));
-}
-
-:host([disabled][checked]) #input + #switch:before,
-:host([disabled][checked]) #input + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
-}
-
-:host([disabled]) #input ~ #label,
-:host([disabled]) #input ~ #label {
-    color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-switch-label-color-default: ButtonText;
-        --highcontrast-switch-label-color-hover: ButtonText;
-        --highcontrast-switch-label-color-down: ButtonText;
-        --highcontrast-switch-label-color-focus: ButtonText;
-        --highcontrast-switch-label-color-disabled: GrayText;
-        --highcontrast-switch-handle-background-color: ButtonFace;
-        --highcontrast-switch-handle-border-color-default: ButtonText;
-        --highcontrast-switch-handle-border-color-hover: Highlight;
-        --highcontrast-switch-handle-border-color-down: Highlight;
-        --highcontrast-switch-handle-border-color-focus: Highlight;
-        --highcontrast-switch-handle-border-color-disabled: Highlight;
-        --highcontrast-switch-handle-border-color-selected-default: Highlight;
-        --highcontrast-switch-handle-border-color-selected-hover: Highlight;
-        --highcontrast-switch-handle-border-color-selected-down: Highlight;
-        --highcontrast-switch-handle-border-color-selected-focus: Highlight;
-        --highcontrast-switch-background-color: ButtonFace;
-        --highcontrast-switch-background-color-selected-default: Highlight;
-        --highcontrast-switch-background-color-selected-hover: Highlight;
-        --highcontrast-switch-background-color-selected-down: Highlight;
-        --highcontrast-switch-background-color-selected-focus: Highlight;
-        --highcontrast-switch-background-color-selected-disabled: Highlight;
-        --highcontrast-switch-focus-indicator-color: ButtonText;
-        forced-color-adjust: none;
-    }
-
-    #input:not(:checked) + #switch {
-        box-shadow: inset 0 0 0 1px ButtonText;
-    }
-
-    @media (hover: hover) {
-        :host(:hover) #input:not(:checked) + #switch {
-            box-shadow: inset 0 0 0 1px Highlight;
-        }
-
-        :host([disabled][checked]:hover) #input + #switch,
-        :host([disabled][checked]:hover) #input + #switch {
-            box-shadow: inset 0 0 0 1px GrayText;
-            background-color: GrayText;
-        }
-
-        :host([disabled][checked]:hover) #input + #switch:before,
-        :host([disabled][checked]:hover) #input + #switch:before {
-            border-color: GrayText;
-            background-color: ButtonFace;
-        }
-    }
-
-    :host([disabled]) #input:not(:checked) + #switch,
-    :host([disabled]) #input:not(:checked) + #switch {
-        box-shadow: inset 0 0 0 1px GrayText;
-        background-color: ButtonFace;
-    }
-
-    :host([disabled]) #input:not(:checked) + #switch:before,
-    :host([disabled]) #input:not(:checked) + #switch:before {
-        border-color: GrayText;
-        background-color: ButtonFace;
-    }
-
-    :host([disabled][checked]) #input + #switch,
-    :host([disabled][checked]) #input + #switch {
-        box-shadow: inset 0 0 0 1px GrayText;
-        background-color: GrayText;
-    }
-
-    :host([disabled][checked]) #input + #switch:before,
-    :host([disabled][checked]) #input + #switch:before {
-        border-color: GrayText;
-        background-color: ButtonFace;
-    }
-
-    :host([disabled]) #input ~ #label,
-    :host([disabled]) #input ~ #label {
-        color: GrayText;
-    }
-}
diff --git a/packages/switch/src/switch-legacy.css b/packages/switch/src/switch-legacy.css
deleted file mode 100644
index a093f464500..00000000000
--- a/packages/switch/src/switch-legacy.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-#switch::before {
-    /* This rule includes all of the transitions from spectrum-css before we removed the package as a dependency
-     * except the one for the transform attribute, which causes issue in Edge.
-     */
-    transition:
-        background var(--spectrum-animation-duration-100, 0.13s) ease-in-out,
-        border var(--spectrum-animation-duration-100, 0.13s) ease-in-out,
-        box-shadow var(--spectrum-animation-duration-100, 0.13s) ease-in-out;
-}
diff --git a/packages/switch/src/switch-overrides.css b/packages/switch/src/switch-overrides.css
deleted file mode 100644
index 7ae336f2975..00000000000
--- a/packages/switch/src/switch-overrides.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-switch-handle-border-color-default: var(--system-switch-handle-border-color-default);
-    --spectrum-switch-handle-border-color-hover: var(--system-switch-handle-border-color-hover);
-    --spectrum-switch-handle-border-color-down: var(--system-switch-handle-border-color-down);
-    --spectrum-switch-handle-border-color-focus: var(--system-switch-handle-border-color-focus);
-    --spectrum-switch-handle-border-color-selected-default: var(--system-switch-handle-border-color-selected-default);
-    --spectrum-switch-handle-border-color-selected-hover: var(--system-switch-handle-border-color-selected-hover);
-    --spectrum-switch-handle-border-color-selected-down: var(--system-switch-handle-border-color-selected-down);
-    --spectrum-switch-handle-border-color-selected-focus: var(--system-switch-handle-border-color-selected-focus);
-    --spectrum-switch-background-color: var(--system-switch-background-color);
-    --spectrum-switch-background-color-disabled: var(--system-switch-background-color-disabled);
-    --spectrum-switch-handle-background-color: var(--system-switch-handle-background-color);
-}
diff --git a/packages/switch/src/switch.css b/packages/switch/src/switch.css
index 5c45892e0eb..d2dcf911c36 100644
--- a/packages/switch/src/switch.css
+++ b/packages/switch/src/switch.css
@@ -1,8 +1,9 @@
 /**
- * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * 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
@@ -10,33 +11,490 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-switch.css");
-@import url("./switch-overrides.css");
+:host {
+    --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color);
+
+    --spectrum-switch-border-width: var(--spectrum-border-width-200);
+
+    --spectrum-switch-border-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-switch-border-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-switch-border-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-switch-border-color-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-switch-border-color-disabled: var(--spectrum-disabled-content-color);
+
+    --spectrum-switch-border-color-selected-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-switch-border-color-selected-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-switch-border-color-selected-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-switch-border-color-selected-focus: var(--spectrum-neutral-content-color-key-focus);
+
+    --spectrum-switch-background-color: var(--spectrum-gray-25);
+    --spectrum-switch-background-color-disabled: var(--spectrum-gray-25);
+
+    --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-default);
+    --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-hover);
+    --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-down);
+    --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-key-focus);
+    --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
+
+    --spectrum-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color);
+    --spectrum-switch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+
+    --spectrum-switch-handle-background-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-switch-handle-background-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-switch-handle-background-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-switch-handle-background-color-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-switch-handle-background-color-disabled: var(--spectrum-disabled-content-color);
+
+    --spectrum-switch-handle-background-color-selected: var(--spectrum-gray-25);
+    --spectrum-switch-handle-background-color-selected-disabled: var(--spectrum-gray-25);
+
+    --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-medium);
+    --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-medium);
+
+    --spectrum-switch-animation-duration-switch: var(--spectrum-animation-duration-100);
+    --spectrum-switch-animation-duration-label: var(--spectrum-animation-duration-200);
+    --spectrum-switch-min-height: var(--spectrum-component-height-100);
+    --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium);
+    --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium);
+    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100);
+    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium);
+    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
+    --spectrum-switch-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
+
+    --spectrum-switch-font-size: var(--spectrum-font-size-100);
+    --spectrum-switch-line-height: var(--spectrum-line-height-100);
+    --spectrum-switch-cjk-line-height: var(--spectrum-cjk-line-height-100);
+
+    --spectrum-switch-border-radius: var(--spectrum-corner-radius-full);
+}
 
 :host([disabled]) {
-    pointer-events: none;
+    --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color);
+}
+
+:host([emphasized]) {
+    --spectrum-switch-background-color-selected-default: var(--spectrum-accent-background-color-default);
+    --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-background-color-hover);
+    --spectrum-switch-background-color-selected-down: var(--spectrum-accent-background-color-down);
+    --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-background-color-key-focus);
+
+    --spectrum-switch-border-color-selected-default: var(--spectrum-accent-background-color-default);
+    --spectrum-switch-border-color-selected-hover: var(--spectrum-accent-background-color-hover);
+    --spectrum-switch-border-color-selected-down: var(--spectrum-accent-background-color-down);
+    --spectrum-switch-border-color-selected-focus: var(--spectrum-accent-background-color-key-focus);
+}
+
+:host([size="s"]) {
+    --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-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
+
+    --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-small);
+    --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-small);
+
+    --spectrum-switch-font-size: var(--spectrum-font-size-75);
+}
+
+:host([size="l"]) {
+    --spectrum-switch-min-height: var(--spectrum-component-height-200);
+    --spectrum-switch-control-width: var(--spectrum-switch-control-width-large);
+    --spectrum-switch-control-height: var(--spectrum-switch-control-height-large);
+    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200);
+    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large);
+    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
+    --spectrum-switch-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200);
+
+    --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-large);
+    --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-large);
+
+    --spectrum-switch-font-size: var(--spectrum-font-size-200);
+}
+
+:host([size="xl"]) {
+    --spectrum-switch-min-height: var(--spectrum-component-height-300);
+    --spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large);
+    --spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large);
+    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300);
+    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large);
+    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
+    --spectrum-switch-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
+
+    --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-extra-large);
+    --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-extra-large);
+
+    --spectrum-switch-font-size: var(--spectrum-font-size-300);
 }
 
-/* the handle's border in the down/active state remains the same if a user moves their cursor 
-while still activating/pressing the switch. Read-only switches should not have this behavior. */
-:host(:hover:active) #input + #switch:before,
-:host([emphasized]:hover:active) #input + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-down, var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down)));
+:host {
+    display: inline-flex;
+    align-items: flex-start;
+    position: relative;
+    min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height));
+    max-inline-size: 100%;
+    vertical-align: top;
 }
 
-:host(:active[checked]) #input:enabled + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-selelcted-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down)));
+input {
+    margin: 0;
+    box-sizing: border-box;
+    padding: 0;
+
+    position: absolute;
+    inline-size: 100%;
+    block-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    z-index: 1;
+
+    cursor: pointer;
 }
 
-:host(:active[checked]) #input:enabled + #switch {
+:host([disabled]) input,
+input:disabled,
+input[disabled] {
+    cursor: default;
+}
+
+#label {
+    color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default)));
+    margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing));
+    margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label));
+    margin-block-end: var(--mod-switch-spacing-bottom-to-label, var(--spectrum-switch-spacing-bottom-to-label));
+    font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size));
+    line-height: var(--mod-switch-line-height, var(--spectrum-switch-line-height));
+    transition: color var(--spectrum-switch-animation-duration-label) ease-in-out;
+}
+
+#label:lang(ja),
+#label:lang(ko),
+#label:lang(zh) {
+    line-height: var(--mod-switch-cjk-line-height, var(--spectrum-switch-cjk-line-height));
+}
+
+:host([hover]) #switch ~ #label {
+    color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover)));
+}
+
+:host([active]) #switch ~ #label,
+:host(:active) #switch ~ #label {
+    color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down)));
+}
+
+:host([focus-visible]) input ~ #label,
+input:focus-visible ~ #label {
+    color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus)));
+}
+
+#switch {
+    display: inline-block;
+    box-sizing: border-box;
+
+    position: relative;
+
+    inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width));
+    margin-block: calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control, var(--spectrum-switch-spacing-top-to-control)));
+    margin-inline: 0;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    vertical-align: middle;
+
+    transition:
+        background var(--mod-switch-animation-duration-switch, var(--spectrum-switch-animation-duration-switch)) ease-in-out,
+        border var(--mod-switch-animation-duration-switch, var(--spectrum-switch-animation-duration-switch)) ease-in-out;
+
+    block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height));
+
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+
+    background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color)));
+    border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius));
+    border-width: var(--mod-switch-border-width, var(--spectrum-switch-border-width));
+    border-color: var(--highcontrast-switch-border-color-default, var(--mod-switch-border-color-default, var(--spectrum-switch-border-color-default)));
+    border-style: solid;
+}
+
+:host([hover]) #switch {
+    border-color: var(--highcontrast-switch-border-color-hover, var(--mod-switch-border-color-hover, var(--spectrum-switch-border-color-hover)));
+}
+
+:host([active]) #switch,
+:host(:active) #switch {
+    border-color: var(--highcontrast-switch-border-color-down, var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down)));
+}
+
+:host([focus-visible]) input ~ #switch,
+input:focus-visible ~ #switch {
+    border-color: var(--highcontrast-switch-border-color-focus, var(--mod-switch-border-color-focus, var(--spectrum-switch-border-color-focus)));
+}
+
+input:checked ~ #switch {
+    background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default)));
+    border-color: var(--highcontrast-switch-border-color-selected-default, var(--mod-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default)));
+}
+
+:host([hover]) input:checked ~ #switch {
+    background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover)));
+    border-color: var(--highcontrast-switch-border-color-selected-hover, var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover)));
+}
+
+:host([active]) input:checked ~ #switch,
+:host(:active) input:checked ~ #switch {
     background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down)));
+    border-color: var(--highcontrast-switch-border-color-selected-down, var(--mod-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down)));
+}
+
+:host([focus-visible]) input:checked ~ #switch,
+input:checked:focus-visible ~ #switch {
+    background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus)));
+    border-color: var(--highcontrast-switch-border-color-selected-focus, var(--mod-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus)));
+}
+
+#switch:before {
+    display: block;
+    position: absolute;
+    content: "";
+    box-sizing: border-box;
+
+    transition:
+        background var(--spectrum-switch-animation-duration-switch) ease-in-out,
+        border var(--spectrum-switch-animation-duration-switch) ease-in-out,
+        transform var(--spectrum-switch-animation-duration-switch) ease-in-out,
+        box-shadow var(--spectrum-switch-animation-duration-switch) ease-in-out;
+
+    inline-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size));
+    block-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size));
+
+    inset-block-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25);
+    inset-inline-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25);
+
+    background-color: var(--highcontrast-switch-handle-background-color-default, var(--mod-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default)));
+    border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius));
+}
+
+:host([hover]) #switch:before {
+    background-color: var(--highcontrast-switch-handle-background-color-hover, var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover)));
+}
+
+:host([active]) #switch:before,
+:host(:active) #switch:before {
+    background-color: var(--highcontrast-switch-handle-background-color-down, var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down)));
+}
+
+:host([focus-visible]) input ~ #switch:before,
+input:focus-visible ~ #switch:before {
+    background-color: var(--highcontrast-switch-handle-background-color-focus, var(--mod-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus)));
+}
+
+input:checked ~ #switch:before {
+    background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected)));
+
+    inline-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size));
+    block-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size));
+
+    inset-block-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-border-width, var(--spectrum-switch-border-width)) - var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size))) * 0.25);
+    inset-inline-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-border-width, var(--spectrum-switch-border-width)) - var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size))) * 0.25);
+
+    transform: translateX(calc(100% + var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25));
+}
+
+input:checked ~ #switch:before:dir(rtl),
+[dir="rtl"] input:checked ~ #switch:before {
+    transform: translateX(calc(-100% + var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25 * -1));
+}
+
+:host([hover]) input:checked ~ #switch:before {
+    background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected)));
+}
+
+:host([active]) input:checked ~ #switch:before,
+:host(:active) input:checked ~ #switch:before {
+    background-color: var(--spectrum-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected)));
 }
 
-/* Ensure read-only switches don't show interaction styles */
-:host([readonly]) #input + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-default, var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default))) !important;
+:host([active]) input:not(:disabled) ~ #switch:before,
+:host(:active) input:not(:disabled) ~ #switch:before {
+    transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
 }
 
-:host([readonly][checked]) #input + #switch:before {
-    border-color: var(--highcontrast-switch-handle-border-color-selected-default, var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default))) !important;
+:host([active]) input:not(:disabled):checked ~ #switch:before,
+:host(:active) input:not(:disabled):checked ~ #switch:before {
+    transform: translateX(calc(100% + var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25)) perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
+}
+
+:host([active]) input:not(:disabled):checked ~ #switch:before:dir(rtl),
+:host(:active) input:not(:disabled):checked ~ #switch:before:dir(rtl),
+[dir="rtl"] :host([active]) input:not(:disabled):checked ~ #switch:before,
+[dir="rtl"] :host(:active) input:not(:disabled):checked ~ #switch:before {
+    transform: translateX(calc(-100% + var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25 * -1)) perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
+}
+
+#switch:after {
+    border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius));
+    content: "";
+    display: block;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-block-start: 0;
+    margin: 0;
+
+    transition:
+        opacity var(--spectrum-switch-animation-duration-switch) ease-out,
+        outline-offset var(--spectrum-switch-animation-duration-switch) ease-out,
+        border var(--spectrum-switch-animation-duration-switch) ease-in-out;
+}
+
+input:focus-visible ~ #switch:after,
+input:focus-visible ~ #switch:after {
+    outline: var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) solid var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
+    outline-offset: calc(var(--mod-switch-focus-indicator-gap, var(--spectrum-switch-focus-indicator-gap)) + var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)));
+}
+
+:host([disabled]) #switch,
+:host([disabled]) input:disabled ~ #switch,
+:host([disabled]) input[disabled] ~ #switch,
+:host([hover]) :host([disabled]) #switch,
+:host([hover]) :host([disabled]) input:disabled ~ #switch,
+:host([hover]) :host([disabled]) input[disabled] ~ #switch {
+    background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled)));
+    border-color: var(--highcontrast-switch-border-color-disabled, var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled)));
+}
+
+:host([disabled]) input:disabled ~ #switch:before,
+:host([disabled]) input[disabled] ~ #switch:before,
+:host([hover]) :host([disabled]) input:disabled ~ #switch:before,
+:host([hover]) :host([disabled]) input[disabled] ~ #switch:before {
+    background-color: var(--highcontrast-switch-handle-background-color-disabled, var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled)));
+}
+
+:host([disabled]) input:disabled:checked ~ #switch,
+:host([disabled]) input[disabled]:checked ~ #switch,
+:host([hover]) :host([disabled]) input:disabled:checked ~ #switch,
+:host([hover]) :host([disabled]) input[disabled]:checked ~ #switch {
+    background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled)));
+}
+
+:host([disabled]) input:disabled:checked ~ #switch:before,
+:host([disabled]) input[disabled]:checked ~ #switch:before,
+:host([hover]) :host([disabled]) input:disabled:checked ~ #switch:before,
+:host([hover]) :host([disabled]) input[disabled]:checked ~ #switch:before {
+    background-color: var(--highcontrast-switch-handle-background-color-selected-disabled, var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled)));
+}
+
+:host([disabled]) input:disabled ~ #label,
+:host([disabled]) input[disabled] ~ #label,
+:host([hover]) :host([disabled]) input:disabled ~ #label,
+:host([hover]) :host([disabled]) input[disabled] ~ #label {
+    color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
+}
+
+@media (hover: hover) {
+    :host([hover]) #switch ~ #label {
+        color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover)));
+    }
+
+    :host([hover]) #switch {
+        border-color: var(--highcontrast-switch-border-color-hover, var(--mod-switch-border-color-hover, var(--spectrum-switch-border-color-hover)));
+    }
+
+    :host([hover]) input:checked ~ #switch {
+        background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover)));
+        border-color: var(--highcontrast-switch-border-color-selected-hover, var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover)));
+    }
+
+    :host([hover]) #switch:before {
+        background-color: var(--highcontrast-switch-handle-background-color-hover, var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover)));
+    }
+
+    :host([hover]) input:checked ~ #switch:before {
+        background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected)));
+    }
+
+    :host([hover]) :host([disabled]) #switch {
+        background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled)));
+        border-color: var(--highcontrast-switch-border-color-disabled, var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled)));
+    }
+
+    :host([hover]) :host([disabled]) input:disabled ~ #switch,
+    :host([hover]) :host([disabled]) input[disabled] ~ #switch,
+    :host([hover]) :host([disabled]) input[disabled] ~ #switch {
+        background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled)));
+        border-color: var(--highcontrast-switch-border-color-disabled, var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled)));
+    }
+
+    :host([hover]) :host([disabled]) input:disabled ~ #switch:before,
+    :host([hover]) :host([disabled]) input[disabled] ~ #switch:before {
+        background-color: var(--highcontrast-switch-handle-background-color-disabled, var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled)));
+    }
+
+    :host([hover]) :host([disabled]) input:disabled:checked ~ #switch,
+    :host([hover]) :host([disabled]) input[disabled]:checked ~ #switch {
+        background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled)));
+    }
+
+    :host([hover]) :host([disabled]) input:disabled:checked ~ #switch:before,
+    :host([hover]) :host([disabled]) input[disabled]:checked ~ #switch:before {
+        background-color: var(--highcontrast-switch-handle-background-color-selected-disabled, var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled)));
+    }
+
+    :host([hover]) :host([disabled]) input:disabled ~ #label,
+    :host([hover]) :host([disabled]) input[disabled] ~ #label {
+        color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
+    }
+}
+
+@media (forced-colors: active) {
+    :host {
+        --highcontrast-switch-label-color-default: ButtonText;
+        --highcontrast-switch-label-color-hover: ButtonText;
+        --highcontrast-switch-label-color-down: ButtonText;
+        --highcontrast-switch-label-color-focus: ButtonText;
+        --highcontrast-switch-label-color-disabled: GrayText;
+
+        --highcontrast-switch-background-color: transparent;
+
+        --highcontrast-switch-border-color-default: ButtonText;
+        --highcontrast-switch-border-color-hover: Highlight;
+        --highcontrast-switch-border-color-down: ButtonText;
+        --highcontrast-switch-border-color-focus: ButtonText;
+        --highcontrast-switch-border-color-disabled: GrayText;
+
+        --highcontrast-switch-border-color-selected-default: Highlight;
+        --highcontrast-switch-border-color-selected-hover: Highlight;
+        --highcontrast-switch-border-color-selected-down: Highlight;
+        --highcontrast-switch-border-color-selected-focus: Highlight;
+
+        --highcontrast-switch-handle-background-color-default: ButtonText;
+        --highcontrast-switch-handle-background-color-hover: Highlight;
+        --highcontrast-switch-handle-background-color-down: ButtonText;
+        --highcontrast-switch-handle-background-color-focus: ButtonText;
+        --highcontrast-switch-handle-background-color-disabled: GrayText;
+
+        --highcontrast-switch-handle-background-color-selected: HighlightText;
+        --highcontrast-switch-handle-background-color-selected-disabled: ButtonFace;
+
+        --highcontrast-switch-background-color-disabled: ButtonFace;
+
+        --highcontrast-switch-background-color-selected-default: Highlight;
+        --highcontrast-switch-background-color-selected-hover: Highlight;
+        --highcontrast-switch-background-color-selected-down: Highlight;
+        --highcontrast-switch-background-color-selected-focus: Highlight;
+        --highcontrast-switch-background-color-selected-disabled: GrayText;
+
+        --highcontrast-switch-focus-indicator-color: ButtonText;
+        forced-color-adjust: none;
+    }
 }
diff --git a/packages/table/package.json b/packages/table/package.json
index 38575d847f5..b4d4728a193 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -58,16 +58,10 @@
             "default": "./src/index.js"
         },
         "./src/table-body.css.js": "./src/table-body.css.js",
-        "./src/table-cell-overrides.css.js": "./src/table-cell-overrides.css.js",
         "./src/table-cell.css.js": "./src/table-cell.css.js",
-        "./src/table-checkbox-cell-overrides.css.js": "./src/table-checkbox-cell-overrides.css.js",
         "./src/table-checkbox-cell.css.js": "./src/table-checkbox-cell.css.js",
-        "./src/table-head-cell-overrides.css.js": "./src/table-head-cell-overrides.css.js",
         "./src/table-head-cell.css.js": "./src/table-head-cell.css.js",
-        "./src/table-head-overrides.css.js": "./src/table-head-overrides.css.js",
         "./src/table-head.css.js": "./src/table-head.css.js",
-        "./src/table-overrides.css.js": "./src/table-overrides.css.js",
-        "./src/table-row-overrides.css.js": "./src/table-row-overrides.css.js",
         "./src/table-row.css.js": "./src/table-row.css.js",
         "./src/table.css.js": "./src/table.css.js",
         "./elements.js": {
diff --git a/packages/table/src/spectrum-table-body.css b/packages/table/src/spectrum-table-body.css
deleted file mode 100644
index 9d4bf92dd73..00000000000
--- a/packages/table/src/spectrum-table-body.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-    border: none;
-    display: table-row-group;
-    position: relative;
-}
-
-:host([drop-target]) {
-    --mod-table-border-color: transparent;
-    outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
-    outline-style: solid;
-    outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
-}
diff --git a/packages/table/src/spectrum-table-cell.css b/packages/table/src/spectrum-table-cell.css
deleted file mode 100644
index 5348d35d457..00000000000
--- a/packages/table/src/spectrum-table-cell.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        forced-color-adjust: none;
-    }
-}
-
-:host([align="center"]) {
-    text-align: center;
-}
-
-:host([align="end"]) {
-    text-align: end;
-}
-
-:host {
-    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)));
-    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: 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)));
-}
-
-:host {
-    display: table-cell;
-    position: relative;
-}
-
-:host([focused]),
-:host(:focus-visible) {
-    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(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1);
-    outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px));
-}
-
-.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-cell--collapsible {
-    padding-block: 0;
-    padding-inline-start: calc(var(--spectrum-table-row-tier, 0px) * var(--spectrum-table-collapsible-tier-indent));
-}
diff --git a/packages/table/src/spectrum-table-checkbox-cell.css b/packages/table/src/spectrum-table-checkbox-cell.css
deleted file mode 100644
index de94897368d..00000000000
--- a/packages/table/src/spectrum-table-checkbox-cell.css
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host(:not([head-cell])) {
-        forced-color-adjust: none;
-    }
-}
-
-:host([head-cell]) {
-    --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default)));
-    box-sizing: border-box;
-    text-align: start;
-    vertical-align: var(--mod-table-header-vertical-align, var(--spectrum-table-header-vertical-align));
-    font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family));
-    font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size));
-    font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight));
-    line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height));
-    text-transform: none;
-    text-transform: var(--mod-table-header-text-transform, none);
-    block-size: var(--mod-table-min-header-height, var(--spectrum-table-min-header-height));
-    padding-block: 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));
-    padding-inline: var(--mod-table-cell-inline-space, var(--spectrum-table-cell-inline-space));
-    color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color));
-    background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color));
-    transition: color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
-    cursor: auto;
-    cursor: var(--mod-table-cursor-header-default, initial);
-    border-radius: 0;
-    outline: 0;
-}
-
-:host(:not([head-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)));
-    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: 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)));
-}
-
-:host(:not([head-cell])),
-:host([head-cell]) {
-    display: table-cell;
-    position: relative;
-}
-
-:host(:not([head-cell])[focused]),
-:host(:not([head-cell]):focus-visible),
-:host([head-cell][focused]),
-:host([head-cell]:focus-visible) {
-    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(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1);
-    outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px));
-}
-
-:host(:host) {
-    inline-size: var(--spectrum-checkbox-control-size-small);
-    padding-block: 0;
-    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)));
-}
-
-:host(:host) sp-checkbox {
-    --mod-checkbox-spacing: 0px;
-    min-block-size: 0;
-}
-
-:host(:host:not([head-cell])) sp-checkbox {
-    margin-block-start: calc(var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
-    margin-block-end: var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing));
-}
-
-:host(:host[head-cell]) sp-checkbox {
-    margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
-    margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing));
-}
diff --git a/packages/table/src/spectrum-table-head-cell.css b/packages/table/src/spectrum-table-head-cell.css
deleted file mode 100644
index 58a91f2f1e5..00000000000
--- a/packages/table/src/spectrum-table-head-cell.css
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-.sortedIcon {
-    vertical-align: initial;
-    transition: transform var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
-    margin-inline-start: var(--mod-table-sort-icon-inline-start-spacing, 0);
-    margin-inline-end: var(--mod-table-sort-icon-inline-end-spacing, var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text)));
-    display: none;
-}
-
-:host {
-    --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default)));
-    box-sizing: border-box;
-    text-align: start;
-    vertical-align: var(--mod-table-header-vertical-align, var(--spectrum-table-header-vertical-align));
-    font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family));
-    font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size));
-    font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight));
-    line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height));
-    text-transform: none;
-    text-transform: var(--mod-table-header-text-transform, none);
-    block-size: var(--mod-table-min-header-height, var(--spectrum-table-min-header-height));
-    padding-block: 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));
-    padding-inline: var(--mod-table-cell-inline-space, var(--spectrum-table-cell-inline-space));
-    color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color));
-    background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color));
-    transition: color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
-    cursor: auto;
-    cursor: var(--mod-table-cursor-header-default, initial);
-    border-radius: 0;
-    outline: 0;
-}
-
-.spectrum-Table-menuIcon,
-.sortedIcon {
-    color: var(--spectrum-table-icon-color);
-}
-
-:host([sortable]) {
-    cursor: pointer;
-    cursor: var(--mod-table-cursor-header-sortable, pointer);
-}
-
-:host([sortable][active]) {
-    --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active)));
-}
-
-:host([sortable]:focus) {
-    --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-focus)));
-}
-
-:host([sortable]) .is-keyboardFocused,
-:host([sortable]:focus-visible) {
-    --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus)));
-}
-
-:host([sort-direction="asc"]) .sortedIcon,
-:host([sort-direction="desc"]) .sortedIcon {
-    display: inline-block;
-}
-
-:host([sort-direction="asc"]) .sortedIcon {
-    transform: rotate(-90deg);
-}
-
-:host {
-    display: table-cell;
-    position: relative;
-}
-
-:host([focused]),
-:host(:focus-visible) {
-    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(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1);
-    outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px));
-}
-
-:host .spectrum-Table-checkboxCell .spectrum-Table-checkbox {
-    margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
-    margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing));
-}
-
-:host .spectrum-Table-scroller {
-    border-block-end: 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)));
-}
-
-@media (hover: hover) {
-    :host([sortable]:hover) {
-        --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover)));
-    }
-
-    :host([sortable]:focus):hover {
-        --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover)));
-    }
-}
diff --git a/packages/table/src/spectrum-table-row.css b/packages/table/src/spectrum-table-row.css
deleted file mode 100644
index ec17a0ba529..00000000000
--- a/packages/table/src/spectrum-table-row.css
+++ /dev/null
@@ -1,276 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host([focused]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before,
-    :host(:focus-visible) .spectrum-Table-checkbox .spectrum-Checkbox-box:before {
-        outline: var(--highcontrast-table-row-text-color-hover) 1px solid;
-    }
-
-    @media (hover: hover) {
-        :host(:hover) .spectrum-Table-checkbox .spectrum-Checkbox-box:before {
-            outline: var(--highcontrast-table-row-text-color-hover) 1px solid;
-        }
-    }
-
-    :host([drop-target]) .spectrum-Table-body,
-    :host([drop-target]),
-    :host([selected]) {
-        --highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color);
-        --highcontrast-table-cell-focus-extra-offset: 1px;
-    }
-
-    :host([drop-target]) .spectrum-Table-body .spectrum-Table-checkbox .spectrum-Checkbox-box:before,
-    :host([drop-target]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before,
-    :host([selected]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before {
-        outline: var(--highcontrast-table-selected-row-text-color) 1px solid;
-    }
-}
-
-:host(:first-child) .spectrum-Table-body ::slotted(*) {
-    border-block-start: 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)));
-}
-
-:host(:last-child) .spectrum-Table-body ::slotted(*) {
-    border-block-end: 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)));
-}
-
-:host .spectrum-Table-body ::slotted(:first-child) {
-    border-inline-start: 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)));
-}
-
-:host .spectrum-Table-body ::slotted(:last-child) {
-    border-inline-end: 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)));
-}
-
-:host {
-    transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
-    cursor: pointer;
-    cursor: var(--mod-table-cursor-row-default, pointer);
-    border-block-start: none;
-    position: relative;
-}
-
-:host(:first-child) ::slotted(:first-child) {
-    border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-}
-
-:host(:first-child) ::slotted(:last-child) {
-    border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-}
-
-:host(:last-child) ::slotted(:first-child) {
-    border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-}
-
-:host(:last-child) ::slotted(:last-child) {
-    border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-}
-
-:host(:first-child) {
-    border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-    border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-}
-
-:host(:last-child) {
-    border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-    border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-}
-
-:host(:focus) {
-    outline: 0;
-}
-
-:host([focused]),
-:host(:focus-visible) {
-    --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover);
-    --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover);
-    --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover)));
-}
-
-:host:active {
-    --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover);
-    --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover);
-    --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-active-color, var(--spectrum-table-row-active-color)));
-}
-
-:host([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(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-cell-background-color));
-}
-
-:host([selected][focused]),
-:host([selected]:focus-visible) {
-    --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(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus));
-}
-
-:host([drop-target]) .spectrum-Table-body,
-:host([drop-target]) {
-    --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(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color)));
-}
-
-:host([drop-target]) {
-    --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);
-    outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
-    outline-style: solid;
-    outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
-    outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1);
-}
-
-:host([drop-target]) ::slotted(*) {
-    border-block-start-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-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)));
-}
-
-.spectrum-Table-row--summary ::slotted(*) {
-    font-weight: var(--mod-table-summary-row-font-weight, var(--spectrum-table-summary-row-font-weight));
-    font-size: var(--mod-table-summary-row-font-size, var(--spectrum-table-row-font-size));
-    font-family: var(--mod-table-summary-row-font-family, var(--spectrum-table-row-font-family));
-    font-style: var(--mod-table-summary-row-font-style, var(--spectrum-table-row-font-style));
-    line-height: var(--mod-table-summary-row-line-height, var(--spectrum-table-row-line-height));
-    color: var(--highcontrast-table-row-text-color, var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color)));
-}
-
-.spectrum-Table-row--sectionHeader {
-    --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color)));
-    cursor: auto;
-    cursor: var(--mod-table-cursor-section-header, initial);
-}
-
-.spectrum-Table-row--sectionHeader ::slotted(*) {
-    font-weight: var(--mod-table-section-header-font-weight, var(--spectrum-table-section-header-font-weight));
-    text-align: start;
-    block-size: var(--mod-table-section-header-min-height, var(--spectrum-table-section-header-min-height));
-    font-size: var(--mod-table-section-header-font-size, var(--spectrum-table-row-font-size));
-    font-family: var(--mod-table-section-header-font-family, var(--spectrum-table-row-font-family));
-    font-style: var(--mod-table-section-header-font-style, var(--spectrum-table-row-font-style));
-    line-height: var(--mod-table-section-header-line-height, var(--spectrum-table-row-line-height));
-    color: var(--highcontrast-table-section-header-text-color, var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color)));
-    padding-block-start: calc(var(--mod-table-section-header-block-start-spacing, var(--spectrum-table-section-header-block-start-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
-    padding-block-end: calc(var(--mod-table-section-header-block-end-spacing, var(--spectrum-table-section-header-block-end-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
-}
-
-:host {
-    display: table-row;
-}
-
-:host(:first-child) .spectrum-Table-scroller .spectrum-Table-body ::slotted(*) {
-    border-block-start: none;
-    border-radius: 0;
-}
-
-:host(:last-child) .spectrum-Table-scroller .spectrum-Table-body ::slotted(*) {
-    border-block-end: none;
-    border-radius: 0;
-}
-
-:host .spectrum-Table-scroller .spectrum-Table-body ::slotted(:first-child) {
-    border-inline-start: none;
-}
-
-:host .spectrum-Table-scroller .spectrum-Table-body ::slotted(:last-child) {
-    border-inline-end: none;
-}
-
-.spectrum-Table-row--collapsible {
-    --spectrum-table-row-tier: 0;
-}
-
-:host([data-tier="1"]) .spectrum-Table-row--collapsible {
-    --spectrum-table-row-tier: 1;
-}
-
-:host([data-tier="2"]) .spectrum-Table-row--collapsible {
-    --spectrum-table-row-tier: 2;
-}
-
-:host([data-tier="3"]) .spectrum-Table-row--collapsible {
-    --spectrum-table-row-tier: 3;
-}
-
-:host([data-tier="4"]) .spectrum-Table-row--collapsible {
-    --spectrum-table-row-tier: 4;
-}
-
-:host([data-tier="5"]) .spectrum-Table-row--collapsible {
-    --spectrum-table-row-tier: 5;
-}
-
-:host([data-tier="6"]) .spectrum-Table-row--collapsible {
-    --spectrum-table-row-tier: 6;
-}
-
-.spectrum-Table-row--collapsible .spectrum-Table-checkboxCell {
-    padding-inline-end: 0;
-}
-
-.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible {
-    padding-inline-start: calc(var(--spectrum-table-row-tier) * var(--spectrum-table-collapsible-tier-indent) + var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) + var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)) * 2);
-}
-
-.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-disclosureIcon {
-    display: none;
-}
-
-.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon {
-    margin-inline: var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing));
-    margin-block-start: max(0px, calc((var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) / 2));
-}
-
-:host([hidden]) .spectrum-Table-row--collapsible {
-    display: none;
-}
-
-@media (hover: hover) {
-    :host(:hover) {
-        --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover);
-        --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover);
-        --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover)));
-    }
-
-    :host([selected]:hover) {
-        --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(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus));
-    }
-
-    .spectrum-Table-row--sectionHeader:hover {
-        --highcontrast-table-row-text-color: var(--highcontrast-table-section-header-text-color);
-        --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color)));
-    }
-}
-
-.spectrum-Table-row--thumbnail {
-    --spectrum-table-thumbnail-cell-block-spacing: var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing));
-    --spectrum-table-thumbnail-inner-content-block-spacing: max(0px, calc((var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)) - (var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)))) / 2));
-}
-
-.spectrum-Table-row--thumbnail ::slotted(*) {
-    padding-block: calc(var(--spectrum-table-thumbnail-cell-block-spacing) + var(--spectrum-table-thumbnail-inner-content-block-spacing));
-}
-
-.spectrum-Table-row--thumbnail .spectrum-Table-cell--thumbnail {
-    padding-block: 0;
-}
-
-.spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible {
-    --spectrum-table-thumbnail-inner-minimum-block-spacing: max(0px, calc((var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) - var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size))) / 2));
-    --spectrum-table-thumbnail-cell-block-spacing: max(var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), var(--spectrum-table-thumbnail-inner-minimum-block-spacing));
-}
diff --git a/packages/table/src/spectrum-table.css b/packages/table/src/spectrum-table.css
deleted file mode 100644
index d182a4034f0..00000000000
--- a/packages/table/src/spectrum-table.css
+++ /dev/null
@@ -1,263 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@media (forced-colors: active) {
-    :host {
-        --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;
-        --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;
-    }
-
-    @supports (color: SelectedItem) {
-        :host {
-            --highcontrast-table-selected-row-background-color: SelectedItem;
-            --highcontrast-table-selected-row-text-color: SelectedItemText;
-        }
-    }
-}
-
-:host {
-    --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-default-vertical-align: top;
-    --spectrum-table-header-vertical-align: middle;
-    --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-line-height: var(--spectrum-line-height-100);
-    --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);
-    --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-key-focus);
-    --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --spectrum-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity));
-    --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color);
-    --spectrum-table-transition-duration: var(--spectrum-animation-duration-100);
-    --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-font-weight: var(--spectrum-bold-font-weight);
-    --spectrum-table-section-header-background-color: var(--spectrum-gray-200);
-    --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300);
-    --spectrum-table-collapsible-disclosure-inline-spacing: 0px;
-    --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100);
-    --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)));
-    --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size));
-}
-
-:host:dir(rtl),
-:host([dir="rtl"]) {
-    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-}
-
-:host,
-.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);
-    --spectrum-table-row-font-size: var(--spectrum-font-size-100);
-    --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-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-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);
-}
-
-:host([size="s"]) {
-    --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-small);
-    --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small);
-    --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular);
-    --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular);
-    --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular);
-    --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
-    --spectrum-table-row-font-size: var(--spectrum-font-size-75);
-    --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small);
-    --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular);
-    --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small);
-    --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75);
-    --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75);
-    --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75);
-    --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular);
-    --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
-    --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200);
-}
-
-:host([size="l"]) {
-    --spectrum-table-min-header-height: var(--spectrum-component-height-200);
-    --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large);
-    --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large);
-    --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular);
-    --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular);
-    --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular);
-    --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200);
-    --spectrum-table-row-font-size: var(--spectrum-font-size-200);
-    --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large);
-    --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular);
-    --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large);
-    --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200);
-    --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200);
-    --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200);
-    --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular);
-    --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200);
-    --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500);
-}
-
-:host([size="xl"]) {
-    --spectrum-table-min-header-height: var(--spectrum-component-height-300);
-    --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large);
-    --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large);
-    --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular);
-    --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular);
-    --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular);
-    --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300);
-    --spectrum-table-row-font-size: var(--spectrum-font-size-300);
-    --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large);
-    --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular);
-    --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large);
-    --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300);
-    --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300);
-    --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300);
-    --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular);
-    --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300);
-    --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700);
-}
-
-:host([density="compact"]) {
-    --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact));
-    --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact));
-    --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact));
-    --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact));
-    --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact));
-    --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200));
-}
-
-:host([density="compact"][size="s"]) {
-    --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact));
-    --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-small-compact));
-    --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-small-compact));
-    --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-small-compact));
-    --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-small-compact));
-    --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-50));
-}
-
-:host([density="compact"][size="l"]) {
-    --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-large-compact));
-    --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-large-compact));
-    --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-large-compact));
-    --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-large-compact));
-    --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-large-compact));
-    --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-300));
-}
-
-:host([density="compact"][size="xl"]) {
-    --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-extra-large-compact));
-    --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-extra-large-compact));
-    --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-extra-large-compact));
-    --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-extra-large-compact));
-    --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact));
-    --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-500));
-}
-
-:host([density="spacious"]) {
-    --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-medium-spacious));
-    --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-medium-spacious));
-    --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-medium-spacious));
-    --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious));
-    --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious));
-    --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500));
-}
-
-:host([density="spacious"][size="s"]) {
-    --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-small-spacious));
-    --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-small-spacious));
-    --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-small-spacious));
-    --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-small-spacious));
-    --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-small-spacious));
-    --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-300));
-}
-
-:host([density="spacious"][size="l"]) {
-    --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-large-spacious));
-    --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-large-spacious));
-    --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-large-spacious));
-    --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-large-spacious));
-    --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-large-spacious));
-    --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-700));
-}
-
-:host([density="spacious"][size="xl"]) {
-    --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-extra-large-spacious));
-    --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-extra-large-spacious));
-    --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-extra-large-spacious));
-    --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-extra-large-spacious));
-    --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious));
-    --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800));
-}
-
-:host([emphasized]) {
-    --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color)));
-    --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus)));
-}
-
-:host([quiet]) {
-    --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px);
-    --mod-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px);
-    --mod-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100));
-    --mod-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100));
-}
-
-:host:not(.spectrum-Table-scroller) {
-    border-collapse: initial;
-    border-spacing: 0;
-    display: table;
-}
diff --git a/packages/table/src/table-body-overrides.css b/packages/table/src/table-body-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/table/src/table-body-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/table/src/table-body.css b/packages/table/src/table-body.css
index 181c9a5e04f..a57f9909954 100644
--- a/packages/table/src/table-body.css
+++ b/packages/table/src/table-body.css
@@ -10,18 +10,26 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-table-body.css");
-
+/* Base variables */
 :host {
     display: block;
     flex-grow: 1;
     overflow: auto;
+    border: none;
 
-    /* When made scrollable through non table element display properties, the
+    /* when made scrollable through non table element display properties, the
        body needs an additional border around it. */
-    border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
-    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)));
-    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-radius: var(--spectrum-table-border-radius);
+    border-inline: var(--spectrum-table-outer-border-inline-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color));
+    border-block: var(--spectrum-table-border-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color));
+}
+
+:host([drop-target]) {
+    --spectrum-table-border-color: transparent;
+
+    outline-width: var(--spectrum-table-focus-indicator-thickness);
+    outline-style: solid;
+    outline-color: var(--highcontrast-table-focus-indicator-color, var(--spectrum-table-drop-zone-outline-color));
 }
 
 :host(:not([tabindex])) {
diff --git a/packages/table/src/table-cell-overrides.css b/packages/table/src/table-cell-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/table/src/table-cell-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/table/src/table-cell.css b/packages/table/src/table-cell.css
index 9d16abff14f..7fcbbdd982d 100644
--- a/packages/table/src/table-cell.css
+++ b/packages/table/src/table-cell.css
@@ -10,10 +10,47 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-table-cell.css");
+:host([align="center"]) {
+    text-align: center;
+}
+
+:host([align="end"]) {
+    text-align: end;
+}
 
 :host {
+    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)));
+    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);
+    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)));
+
+    position: relative;
     display: block;
     flex: 1;
     block-size: auto;
 }
+
+:host([focused]),
+:host(:focus-visible) {
+    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(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1);
+    outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px));
+}
+
+.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)));
+}
+
+:host([collapsible]) {
+    padding-block: 0;
+    padding-inline-start: calc(var(--spectrum-table-row-tier, 0px) * var(--spectrum-table-collapsible-tier-indent));
+}
diff --git a/packages/table/src/table-checkbox-cell-overrides.css b/packages/table/src/table-checkbox-cell-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/table/src/table-checkbox-cell-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/table/src/table-checkbox-cell.css b/packages/table/src/table-checkbox-cell.css
index e07c270dad8..937240ea334 100644
--- a/packages/table/src/table-checkbox-cell.css
+++ b/packages/table/src/table-checkbox-cell.css
@@ -10,23 +10,94 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-table-checkbox-cell.css");
-
-:host {
-    display: flex;
-    align-items: center;
-    flex: 0 1 0%;
+:host([head-cell]) {
+    --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default)));
+    box-sizing: border-box;
+    text-align: start;
+    vertical-align: var(--mod-table-header-vertical-align, var(--spectrum-table-header-vertical-align));
+    font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family));
+    font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size));
+    font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight));
+    line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height));
+    text-transform: none;
+    text-transform: var(--mod-table-header-text-transform, none);
+    block-size: var(--mod-table-min-header-height, var(--spectrum-table-min-header-height));
+    padding-block: 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));
+    padding-inline: var(--mod-table-cell-inline-space, var(--spectrum-table-cell-inline-space));
+    color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color));
+    background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color));
+    transition: color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
+    cursor: auto;
+    cursor: var(--mod-table-cursor-header-default, initial);
     border-radius: 0;
-    block-size: auto;
+    outline: 0;
+}
+
+:host(:not([head-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)));
+    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: 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)));
 }
 
 :host(:not([head-cell])),
 :host([head-cell]) {
+    position: relative;
+
     display: flex;
     block-size: auto;
     inline-size: auto;
 }
 
+:host(:not([head-cell])[focused]),
+:host(:not([head-cell]):focus-visible),
+:host([head-cell][focused]),
+:host([head-cell]:focus-visible) {
+    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(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1);
+    outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px));
+}
+
+:host(:host) {
+    inline-size: var(--spectrum-checkbox-control-size-small);
+    padding-block: 0;
+    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)));
+}
+
+:host(:host) sp-checkbox {
+    --mod-checkbox-spacing: 0px;
+    min-block-size: 0;
+}
+
+:host(:host:not([head-cell])) sp-checkbox {
+    margin-block-start: calc(var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
+    margin-block-end: var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing));
+}
+
+:host(:host[head-cell]) sp-checkbox {
+    margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
+    margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing));
+}
+
+/* Base variables */
+:host {
+    display: flex;
+    align-items: center;
+    flex: 0 1 0%;
+    border-radius: 0;
+    block-size: auto;
+}
+
 :host([selects-single]) sp-checkbox {
     visibility: hidden;
 }
diff --git a/packages/table/src/table-head-cell-overrides.css b/packages/table/src/table-head-cell-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/table/src/table-head-cell-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/table/src/table-head-cell.css b/packages/table/src/table-head-cell.css
index 8cb4c1bb3b1..2b44c9acf1b 100644
--- a/packages/table/src/table-head-cell.css
+++ b/packages/table/src/table-head-cell.css
@@ -10,10 +10,92 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-table-head-cell.css");
+.sortedIcon {
+    vertical-align: initial;
+    transition: transform var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
+    margin-inline-start: var(--mod-table-sort-icon-inline-start-spacing, 0);
+    margin-inline-end: var(--mod-table-sort-icon-inline-end-spacing, var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text)));
+    display: none;
+}
 
+/* Base variables */
 :host {
+    --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default)));
+    box-sizing: border-box;
+    text-align: start;
+    vertical-align: var(--mod-table-header-vertical-align, var(--spectrum-table-header-vertical-align));
+    font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family));
+    font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size));
+    font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight));
+    line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height));
+    text-transform: none;
+    text-transform: var(--mod-table-header-text-transform, none);
+    block-size: var(--mod-table-min-header-height, var(--spectrum-table-min-header-height));
+    padding-block: 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));
+    padding-inline: var(--mod-table-cell-inline-space, var(--spectrum-table-cell-inline-space));
+    color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color));
+    background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color));
+    transition: color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
+    cursor: auto;
+    cursor: var(--mod-table-cursor-header-default, initial);
+    border-radius: 0;
+    outline: 0;
+}
+
+.spectrum-Table-menuIcon,
+.sortedIcon {
+    color: var(--spectrum-table-icon-color);
+}
+
+:host([sortable]) {
+    cursor: pointer;
+    cursor: var(--mod-table-cursor-header-sortable, pointer);
+}
+
+:host([sortable][active]) {
+}
+
+:host([sortable]:focus) {
+}
+
+:host([sortable]) .is-keyboardFocused,
+:host([sortable]:focus-visible) {
+}
+
+:host([sort-direction="asc"]) .sortedIcon,
+:host([sort-direction="desc"]) .sortedIcon {
+    display: inline-block;
+}
+
+:host([sort-direction="asc"]) .sortedIcon {
+    transform: rotate(-90deg);
+}
+
+:host {
+    position: relative;
+
     display: block;
     flex: 1;
     block-size: auto;
 }
+
+:host([focused]),
+:host(:focus-visible) {
+    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(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1);
+    outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px));
+}
+
+:host .spectrum-Table-checkboxCell .spectrum-Table-checkbox {
+    margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
+    margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing));
+}
+
+:host .spectrum-Table-scroller {
+    border-block-end: 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)));
+}
+
+:host([sortable]:focus):hover {
+}
diff --git a/packages/table/src/table-head-overrides.css b/packages/table/src/table-head-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/table/src/table-head-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/table/src/table-head.css b/packages/table/src/table-head.css
index 3a1ac3f4339..961e0bc4276 100644
--- a/packages/table/src/table-head.css
+++ b/packages/table/src/table-head.css
@@ -10,8 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-table-head.css");
-
+/* Base variables */
 :host {
-    display: flex;
+    display: table-header-group;
+
+    /* display: flex; */
+}
+
+:host([scrollable]) {
+    z-index: 1;
+    position: sticky;
+    inset-block-start: 0;
 }
diff --git a/packages/table/src/table-overrides.css b/packages/table/src/table-overrides.css
deleted file mode 100644
index 87a6e743e19..00000000000
--- a/packages/table/src/table-overrides.css
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-table-header-background-color: var(--system-table-header-background-color);
-    --spectrum-table-border-color: var(--system-table-border-color);
-    --spectrum-table-divider-color: var(--system-table-divider-color);
-    --spectrum-table-row-background-color: var(--system-table-row-background-color);
-    --spectrum-table-summary-row-background-color: var(--system-table-summary-row-background-color);
-    --spectrum-table-section-header-background-color: var(--system-table-section-header-background-color);
-    --spectrum-table-icon-color-focus: var(--system-table-icon-color-focus);
-    --spectrum-table-icon-color-focus-hover: var(--system-table-icon-color-focus-hover);
-}
-
-:host([quiet]) {
-    --spectrum-table-header-background-color: var(--system-table-quiet-header-background-color);
-    --spectrum-table-row-background-color: var(--system-table-quiet-row-background-color);
-}
diff --git a/packages/table/src/table-row-overrides.css b/packages/table/src/table-row-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/table/src/table-row-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/table/src/table-row.css b/packages/table/src/table-row.css
index 9bac832a773..9419314731a 100644
--- a/packages/table/src/table-row.css
+++ b/packages/table/src/table-row.css
@@ -10,15 +10,233 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-table-row.css");
+:host([drop-target]) .spectrum-Table-body,
+:host([drop-target]),
+:host([selected]) {
+    --highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color);
+    --highcontrast-table-cell-focus-extra-offset: 1px;
+}
+
+:host([drop-target]) .spectrum-Table-body .spectrum-Table-checkbox .spectrum-Checkbox-box:before,
+:host([drop-target]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before,
+:host([selected]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before {
+    outline: var(--highcontrast-table-selected-row-text-color) 1px solid;
+}
+
+:host(:first-child) .spectrum-Table-body ::slotted(*) {
+    border-block-start: 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)));
+}
+
+:host(:last-child) .spectrum-Table-body ::slotted(*) {
+    border-block-end: 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)));
+}
+
+:host .spectrum-Table-body ::slotted(:first-child) {
+    border-inline-start: 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)));
+}
+
+:host .spectrum-Table-body ::slotted(:last-child) {
+    border-inline-end: 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)));
+}
+
+/* Base variables */
+:host {
+    transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
+    cursor: pointer;
+    cursor: var(--mod-table-cursor-row-default, pointer);
+    border-block-start: none;
+    position: relative;
+}
+
+:host(:first-child) ::slotted(:first-child) {
+    border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+}
+
+:host(:first-child) ::slotted(:last-child) {
+    border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+}
+
+:host(:last-child) ::slotted(:first-child) {
+    border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+}
+
+:host(:last-child) ::slotted(:last-child) {
+    border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+}
+
+:host(:first-child) {
+    border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+    border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+}
+
+:host(:last-child) {
+    border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+    border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+}
+
+:host(:focus) {
+    outline: 0;
+}
+
+:host([focused]),
+:host(:focus-visible) {
+    --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover);
+    --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover);
+    --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover)));
+}
+
+:host:active {
+}
+
+:host([selected]) {
+    --spectrum-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);
+}
+
+:host([selected][focused]),
+:host([selected]:focus-visible) {
+}
+
+:host([drop-target]) .spectrum-Table-body,
+:host([drop-target]) {
+}
+
+:host([drop-target]) {
+    --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);
+    outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
+    outline-style: solid;
+    outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
+    outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1);
+}
+
+:host([drop-target]) ::slotted(*) {
+    border-block-start-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
+}
+
+.spectrum-Table-row--summary {
+}
+
+.spectrum-Table-row--summary ::slotted(*) {
+    font-weight: var(--mod-table-summary-row-font-weight, var(--spectrum-table-summary-row-font-weight));
+    font-size: var(--mod-table-summary-row-font-size, var(--spectrum-table-row-font-size));
+    font-family: var(--mod-table-summary-row-font-family, var(--spectrum-table-row-font-family));
+    font-style: var(--mod-table-summary-row-font-style, var(--spectrum-table-row-font-style));
+    line-height: var(--mod-table-summary-row-line-height, var(--spectrum-table-row-line-height));
+    color: var(--highcontrast-table-row-text-color, var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color)));
+}
+
+.spectrum-Table-row--sectionHeader {
+    cursor: auto;
+    cursor: var(--mod-table-cursor-section-header, initial);
+}
+
+.spectrum-Table-row--sectionHeader ::slotted(*) {
+    font-weight: var(--mod-table-section-header-font-weight, var(--spectrum-table-section-header-font-weight));
+    text-align: start;
+    block-size: var(--mod-table-section-header-min-height, var(--spectrum-table-section-header-min-height));
+    font-size: var(--mod-table-section-header-font-size, var(--spectrum-table-row-font-size));
+    font-family: var(--mod-table-section-header-font-family, var(--spectrum-table-row-font-family));
+    font-style: var(--mod-table-section-header-font-style, var(--spectrum-table-row-font-style));
+    line-height: var(--mod-table-section-header-line-height, var(--spectrum-table-row-line-height));
+    color: var(--highcontrast-table-section-header-text-color, var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color)));
+    padding-block-start: calc(var(--mod-table-section-header-block-start-spacing, var(--spectrum-table-section-header-block-start-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
+    padding-block-end: calc(var(--mod-table-section-header-block-end-spacing, var(--spectrum-table-section-header-block-end-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
+}
+
+:host {
+    display: table-row;
+}
+
+:host(:first-child) .spectrum-Table-scroller .spectrum-Table-body ::slotted(*) {
+    border-block-start: none;
+    border-radius: 0;
+}
+
+:host(:last-child) .spectrum-Table-scroller .spectrum-Table-body ::slotted(*) {
+    border-block-end: none;
+    border-radius: 0;
+}
+
+:host .spectrum-Table-scroller .spectrum-Table-body ::slotted(:first-child) {
+    border-inline-start: none;
+}
+
+:host .spectrum-Table-scroller .spectrum-Table-body ::slotted(:last-child) {
+    border-inline-end: none;
+}
+
+.spectrum-Table-row--collapsible {
+    --spectrum-table-row-tier: 0;
+}
+
+:host([data-tier="1"]) .spectrum-Table-row--collapsible {
+}
+
+:host([data-tier="2"]) .spectrum-Table-row--collapsible {
+}
+
+:host([data-tier="3"]) .spectrum-Table-row--collapsible {
+}
+
+:host([data-tier="4"]) .spectrum-Table-row--collapsible {
+}
+
+:host([data-tier="5"]) .spectrum-Table-row--collapsible {
+}
+
+:host([data-tier="6"]) .spectrum-Table-row--collapsible {
+}
+
+.spectrum-Table-row--collapsible .spectrum-Table-checkboxCell {
+    padding-inline-end: 0;
+}
+
+.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible {
+    padding-inline-start: calc(var(--spectrum-table-row-tier) * var(--spectrum-table-collapsible-tier-indent) + var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) + var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)) * 2);
+}
+
+.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-disclosureIcon {
+    display: none;
+}
+
+.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon {
+    margin-inline: var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing));
+    margin-block-start: max(0px, calc((var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) / 2));
+}
+
+:host([hidden]) .spectrum-Table-row--collapsible {
+    display: none;
+}
+
+:host([selected]:hover) {
+}
+
+.spectrum-Table-row--sectionHeader:hover {
+}
+
+.spectrum-Table-row--thumbnail {
+    --spectrum-table-thumbnail-cell-block-spacing: var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing));
+    --spectrum-table-thumbnail-inner-content-block-spacing: max(0px, calc((var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)) - (var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)))) / 2));
+}
+
+.spectrum-Table-row--thumbnail ::slotted(*) {
+    padding-block: calc(var(--spectrum-table-thumbnail-cell-block-spacing) + var(--spectrum-table-thumbnail-inner-content-block-spacing));
+}
+
+.spectrum-Table-row--thumbnail .spectrum-Table-cell--thumbnail {
+    padding-block: 0;
+}
+
+.spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible {
+    --spectrum-table-thumbnail-inner-minimum-block-spacing: max(0px, calc((var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) - var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size))) / 2));
+}
 
 :host,
 :host([role="row"]) {
     display: flex;
-    width: 100%;
+    inline-size: 100%;
 }
 
-/* Remove original outer borders used with table-based 'display' property values.
+/* remove original outer borders used with table-based 'display' property values.
    These are replaced by a border around the scrollable table body. */
 :host(:first-child) ::slotted(*) {
     border-block-start: none;
@@ -35,6 +253,3 @@
 ::slotted(:last-child) {
     border-inline-end: none;
 }
-
-/* @todo: When section header is supported, set selector equivalent of
-   ".spectrum-Table-row--sectionHeader .spectrum-Table-cell" to "block-size: auto". */
diff --git a/packages/table/src/table.css b/packages/table/src/table.css
index 350de871053..88f8bc4faf8 100644
--- a/packages/table/src/table.css
+++ b/packages/table/src/table.css
@@ -10,10 +10,155 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-table.css");
-@import url("./table-overrides.css");
+:host {
+    --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-default-vertical-align: top;
+    --spectrum-table-header-vertical-align: middle;
+    --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-line-height: var(--spectrum-line-height-100);
+    --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);
+    --spectrum-table-selected-row-background-color: rgb(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity));
+    --spectrum-table-selected-row-background-color-non-emphasized: rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized));
+    --spectrum-table-row-background-color-hover: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity));
+    --spectrum-table-row-active-color: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity));
+    --spectrum-table-selected-row-background-color-focus: rgb(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover));
+    --spectrum-table-selected-row-background-color-non-emphasized-focus: rgb(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-key-focus);
+    --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+    --spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color);
+    --spectrum-table-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity));
+    --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color);
+    --spectrum-table-transition-duration: var(--spectrum-animation-duration-100);
+    --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-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-table-section-header-background-color: var(--spectrum-gray-200);
+    --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300);
+    --spectrum-table-collapsible-disclosure-inline-spacing: 0px;
+    --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100);
+    --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)));
+    --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size));
+}
+
+:host:dir(rtl),
+:host([dir="rtl"]) {
+    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+}
+
+:host,
+.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);
+    --spectrum-table-row-font-size: var(--spectrum-font-size-100);
+    --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-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-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);
+}
+
+:host([size="s"]) {
+}
+
+:host([size="l"]) {
+}
+
+:host([size="xl"]) {
+}
+
+:host([density="compact"]) {
+    --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact));
+    --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact));
+    --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact));
+    --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact));
+    --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact));
+    --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200));
+}
+
+:host([density="compact"][size="s"]) {
+}
+
+:host([density="compact"][size="l"]) {
+}
 
+:host([density="compact"][size="xl"]) {
+}
+
+:host([density="spacious"]) {
+}
+
+:host([density="spacious"][size="s"]) {
+}
+
+:host([density="spacious"][size="l"]) {
+}
+
+:host([density="spacious"][size="xl"]) {
+}
+
+:host([emphasized]) {
+}
+
+:host([quiet]) {
+    --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px);
+    --mod-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px);
+    --mod-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100));
+    --mod-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100));
+}
+
+:host:not(.spectrum-Table-scroller) {
+    border-collapse: initial;
+    border-spacing: 0;
+    display: table;
+}
+
+/* table tokens */
 :host {
-    display: flex;
-    flex-direction: column;
+    /* colors */
+    --spectrum-table-row-background-color-selected: var(--spectrum-gray-200);
+    --spectrum-table-row-background-color-selected-hover: var(--spectrum-gray-300);
+    --spectrum-table-row-background-color-active: var(--spectrum-gray-200);
+    --spectrum-table-row-background-color-active-hover: var(--spectrum-gray-300);
+    --spectrum-table-cell-background-color-selected: var(--spectrum-gray-200);
+    --spectrum-table-cell-background-color-selected-hover: var(--spectrum-gray-300);
+    --spectrum-table-cell-border-color-selected: var(--spectrum-gray-400);
+    --spectrum-table-cell-border-color-selected-hover: var(--spectrum-gray-500);
+    --spectrum-table-cell-border-color-focus: var(--spectrum-focus-indicator-color);
+    --spectrum-table-cell-border-color-focus-hover: var(--spectrum-focus-indicator-color);
+    --spectrum-table-icon-color: var(--spectrum-neutral-content-color-default);
+
+    /* base styles */
+    display: block;
+    overflow: auto;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+    border: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--mod-table-border-color, var(--spectrum-table-border-color));
 }
diff --git a/packages/tabs/package.json b/packages/tabs/package.json
index 8ae120e88bc..256efb3e921 100644
--- a/packages/tabs/package.json
+++ b/packages/tabs/package.json
@@ -48,8 +48,6 @@
         "./src/tab-panel.css.js": "./src/tab-panel.css.js",
         "./src/tab.css.js": "./src/tab.css.js",
         "./src/tabs-overflow.css.js": "./src/tabs-overflow.css.js",
-        "./src/tabs-overrides.css.js": "./src/tabs-overrides.css.js",
-        "./src/tabs-sizes-overrides.css.js": "./src/tabs-sizes-overrides.css.js",
         "./src/tabs-sizes.css.js": "./src/tabs-sizes.css.js",
         "./src/tabs.css.js": "./src/tabs.css.js",
         "./sp-tabs.js": {
diff --git a/packages/tabs/src/spectrum-tab.css b/packages/tabs/src/spectrum-tab.css
deleted file mode 100644
index 5a074b9e164..00000000000
--- a/packages/tabs/src/spectrum-tab.css
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    box-sizing: border-box;
-    block-size: calc(var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));
-    z-index: 1;
-    white-space: nowrap;
-    color: var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-tabs-color)));
-    transition: color var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) ease-out;
-    cursor: pointer;
-    outline: none;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    position: relative;
-}
-
-::slotted([slot="icon"]) {
-    block-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size));
-    inline-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size));
-    margin-block-start: var(--mod-tabs-top-to-icon, var(--spectrum-tabs-top-to-icon));
-}
-
-[name="icon"] + #item-label {
-    margin-inline-start: var(--mod-tabs-icon-to-text, var(--spectrum-tabs-icon-to-text));
-}
-
-:host:before {
-    content: "";
-    box-sizing: border-box;
-    block-size: calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));
-    inline-size: calc(100% + var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * 2);
-    border: var(--mod-tabs-focus-indicator-width, var(--spectrum-tabs-focus-indicator-width)) solid transparent;
-    border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-tabs-focus-indicator-border-radius));
-    pointer-events: none;
-    position: absolute;
-    inset-block-start: calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2);
-    inset-inline-start: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
-    inset-inline-end: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
-}
-
-@media (hover: hover) {
-    :host(:hover) {
-        color: var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover)));
-    }
-}
-
-:host([selected]) {
-    color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)));
-}
-
-:host([disabled]) {
-    cursor: default;
-    color: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)));
-}
-
-:host([disabled]) #item-label {
-    cursor: default;
-}
-
-:host(:focus-visible) {
-    color: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)));
-}
-
-:host(:focus-visible):before {
-    border-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color)));
-}
-
-#item-label {
-    cursor: pointer;
-    vertical-align: top;
-    font-family: var(--mod-tabs-font-family, var(--spectrum-tabs-font-family));
-    font-style: var(--mod-tabs-font-style, var(--spectrum-tabs-font-style));
-    font-size: var(--mod-tabs-font-size, var(--spectrum-tabs-font-size));
-    font-weight: var(--mod-tabs-font-weight, var(--spectrum-tabs-font-weight));
-    line-height: var(--mod-tabs-line-height, var(--spectrum-tabs-line-height));
-    margin-block-start: var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text));
-    margin-block-end: var(--mod-tabs-bottom-to-text, var(--spectrum-tabs-bottom-to-text));
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    display: inline-block;
-}
-
-#item-label:empty {
-    display: none;
-}
diff --git a/packages/tabs/src/spectrum-tabs-sizes.css b/packages/tabs/src/spectrum-tabs-sizes.css
deleted file mode 100644
index 1eb8dfe63d9..00000000000
--- a/packages/tabs/src/spectrum-tabs-sizes.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host([size="s"]) #list {
-    --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small);
-    --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small);
-    --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small);
-    --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small);
-    --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small);
-    --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small);
-    --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50);
-    --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75);
-    --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small);
-    --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small);
-    --spectrum-tabs-font-size: var(--spectrum-font-size-75);
-}
-
-:host([size="l"]) #list {
-    --spectrum-tabs-item-height: var(--spectrum-tab-item-height-large);
-    --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large);
-    --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large);
-    --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large);
-    --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large);
-    --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large);
-    --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200);
-    --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large);
-    --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large);
-    --spectrum-tabs-font-size: var(--spectrum-font-size-200);
-}
-
-:host([size="xl"]) #list {
-    --spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large);
-    --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large);
-    --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large);
-    --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large);
-    --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large);
-    --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large);
-    --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200);
-    --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300);
-    --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large);
-    --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large);
-    --spectrum-tabs-font-size: var(--spectrum-font-size-300);
-}
-
-:host([size="s"]) #list.spectrum-Tabs--compact {
-    --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small));
-    --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
-    --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
-    --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small));
-}
-
-:host([size="l"]) #list.spectrum-Tabs--compact {
-    --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large));
-    --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
-    --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
-    --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large));
-}
-
-:host([size="xl"]) #list.spectrum-Tabs--compact {
-    --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large));
-    --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
-    --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
-    --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large));
-}
diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css
deleted file mode 100644
index 326db73d9ae..00000000000
--- a/packages/tabs/src/spectrum-tabs.css
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-#list {
-    --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium);
-    --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium);
-    --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium);
-    --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium);
-    --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium);
-    --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium);
-    --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75);
-    --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100);
-    --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium);
-    --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default);
-    --spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down);
-    --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
-    --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --spectrum-tabs-color-disabled: var(--spectrum-gray-500);
-    --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-tabs-font-style: var(--spectrum-default-font-style);
-    --spectrum-tabs-font-size: var(--spectrum-font-size-100);
-    --spectrum-tabs-line-height: var(--spectrum-line-height-100);
-    --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
-    --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100);
-    --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium);
-    --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down);
-    --spectrum-tabs-list-background-direction: top;
-    --spectrum-tabs-divider-size: var(--spectrum-border-width-200);
-    --spectrum-tabs-divider-border-radius: 1px;
-    --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100);
-    --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out);
-}
-
-:host([emphasized]) #list {
-    --mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default));
-    --mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover));
-    --mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus));
-    --mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default));
-}
-
-:host([direction^="vertical"]) #list {
-    --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
-}
-
-:host([direction^="vertical-right"]) #list {
-    --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left);
-}
-
-:host([direction^="vertical"]) #list:dir(rtl),
-:host([dir="rtl"][direction^="vertical"]) #list {
-    --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left);
-}
-
-:host([direction^="vertical-right"]) #list:dir(rtl),
-:host([dir="rtl"][direction^="vertical-right"]) #list {
-    --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
-}
-
-:host([compact]) #list {
-    --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium));
-    --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
-    --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
-    --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium));
-}
-
-#list {
-    z-index: 0;
-    vertical-align: top;
-    background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));
-    margin: 0;
-    padding-block: 0;
-    display: flex;
-    position: relative;
-}
-
-::slotted([selected]:not([slot])) {
-    color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)));
-}
-
-::slotted([disabled]:not([slot])) {
-    cursor: default;
-    color: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)));
-}
-
-#selection-indicator {
-    background-color: var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color)));
-    z-index: 0;
-    transition: transform var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) var(--mod-tabs-animation-ease, var(--spectrum-tabs-animation-ease));
-    transform-origin: 0 0;
-    border-radius: var(--mod-tabs-divider-border-radius, var(--spectrum-tabs-divider-border-radius));
-    position: absolute;
-    inset-inline-start: 0;
-}
-
-:host([direction^="horizontal"]) #list {
-    align-items: center;
-}
-
-:host([direction^="horizontal"]) #list ::slotted(:not([slot])) {
-    vertical-align: top;
-}
-
-:host([direction^="horizontal"]) ::slotted(:not(:first-child)) {
-    margin-inline-start: var(--mod-tabs-item-horizontal-spacing, var(--spectrum-tabs-item-horizontal-spacing));
-}
-
-:host([direction^="horizontal"]) #list #selection-indicator {
-    block-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size));
-    position: absolute;
-    inset-block-end: 0;
-}
-
-:host([direction^="horizontal"][compact]) #list {
-    box-sizing: initial;
-    align-items: end;
-}
-
-:host([quiet]) #list {
-    background: none;
-    border-color: #0000;
-    display: inline-flex;
-}
-
-:host([quiet]) #selection-indicator {
-    padding-inline-start: var(--mod-tabs-start-to-item-quiet);
-}
-
-:host([direction^="vertical"]) #list,
-:host([direction^="vertical-right"]) #list {
-    flex-direction: column;
-    padding: 0;
-    display: inline-flex;
-}
-
-:host([direction^="vertical-right"][quiet]) #list,
-:host([direction^="vertical"][quiet]) #list {
-    border-color: #0000;
-}
-
-:host([direction^="vertical"]) #list ::slotted(:not([slot])),
-:host([direction^="vertical-right"]) #list ::slotted(:not([slot])) {
-    block-size: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height));
-    line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height));
-    margin-block-end: var(--mod-tabs-item-vertical-spacing, var(--spectrum-tabs-item-vertical-spacing));
-    margin-inline-start: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge));
-    margin-inline-end: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge));
-    padding-block: 0;
-}
-
-:host([direction^="vertical"]) #list ::slotted(:not([slot])):before,
-:host([direction^="vertical-right"]) #list ::slotted(:not([slot])):before {
-    inset-inline-start: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
-}
-
-:host([direction^="vertical"]) #list #selection-indicator,
-:host([direction^="vertical-right"]) #list #selection-indicator {
-    inline-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size));
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-}
-
-:host([direction^="vertical-right"]) #list #selection-indicator {
-    inset-inline: auto 0;
-}
-
-@media (forced-colors: active) {
-    #list {
-        --highcontrast-tabs-divider-background-color: var(--spectrum-gray-500);
-        --highcontrast-tabs-selection-indicator-color: Highlight;
-        --highcontrast-tabs-focus-indicator-color: CanvasText;
-        --highcontrast-tabs-focus-indicator-background-color: Highlight;
-        --highcontrast-tabs-color: ButtonText;
-        --highcontrast-tabs-color-hover: ButtonText;
-        --highcontrast-tabs-color-selected: HighlightText;
-        --highcontrast-tabs-color-key-focus: ButtonText;
-        --highcontrast-tabs-color-disabled: GrayText;
-        forced-color-adjust: none;
-    }
-
-    #list ::slotted([selected]:not([slot])):before {
-        background-color: var(--highcontrast-tabs-focus-indicator-background-color);
-    }
-
-    :host([direction^="vertical"][compact]) #list #list ::slotted(:not([slot])):before {
-        block-size: 100%;
-        inset-block-start: 0;
-    }
-
-    :host([quiet]) #list {
-        background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));
-    }
-}
diff --git a/packages/tabs/src/tab-overrides.css b/packages/tabs/src/tab-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/tabs/src/tab-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/tabs/src/tab.css b/packages/tabs/src/tab.css
index 429d3dfc9ae..75158a50ac4 100644
--- a/packages/tabs/src/tab.css
+++ b/packages/tabs/src/tab.css
@@ -10,47 +10,110 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-tab.css");
-
+/* Base variables */
 :host {
-    scroll-margin-inline: var(--mod-tabs-item-horizontal-spacing, var(--spectrum-tabs-item-horizontal-spacing));
+    box-sizing: border-box;
+    block-size: calc(var(--spectrum-tabs-item-height) - var(--spectrum-tabs-divider-size));
+    z-index: 1;
+    white-space: nowrap;
+    color: var(--highcontrast-tabs-color, var(--spectrum-tabs-color));
+    transition: color var(--spectrum-tabs-animation-duration) ease-out;
+    cursor: pointer;
+    outline: none;
+    text-decoration: none;
+    position: relative;
+}
+
+::slotted([slot="icon"]) {
+    block-size: var(--spectrum-tabs-icon-size);
+    inline-size: var(--spectrum-tabs-icon-size);
+    margin-block-start: var(--spectrum-tabs-top-to-icon);
+}
+
+[name="icon"] + #item-label {
+    margin-inline-start: var(--spectrum-tabs-icon-to-text);
+}
+
+:host:before {
+    content: "";
+    box-sizing: border-box;
+    block-size: calc(100% - var(--spectrum-tabs-top-to-text));
+    inline-size: calc(100% + var(--spectrum-tabs-focus-indicator-gap) * 2);
+    border: var(--spectrum-tabs-focus-indicator-width) solid transparent;
+    border-radius: var(--spectrum-tabs-focus-indicator-border-radius);
+    pointer-events: none;
+    position: absolute;
+    inset-block-start: calc(var(--spectrum-tabs-top-to-text) / 2);
+    inset-inline-start: calc(var(--spectrum-tabs-focus-indicator-gap) * -1);
+    inset-inline-end: calc(var(--spectrum-tabs-focus-indicator-gap) * -1);
+}
+
+:host([selected]) {
+    color: var(--highcontrast-tabs-color-selected, var(--spectrum-tabs-color-selected));
+
+    color: HighlightText;
 }
 
 :host([disabled]) {
+    cursor: default;
+    color: var(--highcontrast-tabs-color-disabled, var(--spectrum-tabs-color-disabled));
+
     pointer-events: none;
 }
 
-#item-label[hidden] {
-    display: none;
+:host([disabled]) #item-label {
+    cursor: default;
+}
+
+:host(:focus-visible) {
+    color: var(--highcontrast-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus));
+}
+
+:host(:focus-visible):before {
+    border-color: var(--highcontrast-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color));
 }
 
-@media (forced-colors: active) {
-    :host:before {
-        background-color: ButtonFace;
-    }
+#item-label {
+    cursor: pointer;
+    vertical-align: top;
+    font-family: var(--spectrum-tabs-font-family);
+    font-style: var(--spectrum-tabs-font-style);
+    font-size: var(--spectrum-tabs-font-size);
+    font-weight: var(--spectrum-tabs-font-weight);
+    line-height: var(--spectrum-tabs-line-height);
+    margin-block-start: var(--spectrum-tabs-top-to-text);
+    margin-block-end: var(--spectrum-tabs-bottom-to-text);
+    text-decoration: none;
+    display: inline-block;
 
-    :host ::slotted([slot="icon"]) {
-        z-index: 1;
-        position: relative;
-        color: inherit;
-    }
+    position: relative;
+    z-index: 1;
+}
 
-    #item-label {
-        position: relative;
-        z-index: 1;
-    }
+#item-label:empty {
+    display: none;
+}
 
-    :host([selected]) {
-        color: HighlightText;
-    }
+:host {
+    scroll-margin-inline: var(--spectrum-tabs-item-horizontal-spacing);
+}
 
-    :host([selected]) ::slotted([slot="icon"]) {
-        color: HighlightText;
-    }
+#item-label[hidden] {
+    display: none;
+}
+
+:host ::slotted([slot="icon"]) {
+    z-index: 1;
+    position: relative;
+    color: inherit;
+}
+
+:host([selected]) ::slotted([slot="icon"]) {
+    color: HighlightText;
+}
 
-    :host([selected]) #item-label {
-        color: HighlightText;
-    }
+:host([selected]) #item-label {
+    color: HighlightText;
 }
 
 :host([vertical]) {
@@ -58,14 +121,14 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: auto;
+    block-size: auto;
 }
 
 :host([dir][vertical]) slot[name="icon"] + #item-label {
     margin-inline-start: 0;
-    margin-block: calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2) calc(var(--mod-tabs-bottom-to-text, var(--spectrum-tabs-bottom-to-text)) / 2);
+    margin-block: calc(var(--spectrum-tabs-top-to-text) / 2) calc(var(--spectrum-tabs-bottom-to-text) / 2);
 }
 
 :host([vertical]) ::slotted([slot="icon"]) {
-    margin-block-start: calc(var(--mod-tabs-top-to-icon, var(--spectrum-tabs-top-to-icon)) / 2);
+    margin-block-start: calc(var(--spectrum-tabs-top-to-icon) / 2);
 }
diff --git a/packages/tabs/src/tabs-overflow.css b/packages/tabs/src/tabs-overflow.css
index 009776c57b2..eb490b24a73 100644
--- a/packages/tabs/src/tabs-overflow.css
+++ b/packages/tabs/src/tabs-overflow.css
@@ -10,63 +10,58 @@
  * governing permissions and limitations under the License.
  */
 
+/* Base variables */
 :host {
+    --spectrum-tabs-overflow-next-button-right: calc(-1 * var(--spectrum-component-edge-to-text-100));
+    --spectrum-tabs-overflow-previous-button-left: calc(-1 * var(--spectrum-component-edge-to-text-100));
+    --spectrum-tabs-overflow-button-height: calc(var(--spectrum-tab-item-height-medium) - var(--spectrum-border-width-200));
+    --spectrum-tabs-overflow-button-size: var(--spectrum-tab-item-height-medium);
+    --spectrum-tabs-overflow-icon-color: var(--spectrum-gray-800);
+    --spectrum-tabs-overflow-shadow-color: var(--spectrum-gray-100);
+    --spectrum-tabs-overflow-shadow-width: 50px;
+    --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
     inset: 0;
-    width: 100%;
+    inline-size: 100%;
+}
 
-    --sp-tabs-overflow-next-button-right: calc(-1 * var(--spectrum-component-edge-to-text-100));
-    --sp-tabs-overflow-previous-button-left: calc(-1 * var(--spectrum-component-edge-to-text-100));
-    --sp-tabs-overflow-button-height: calc(var(--spectrum-tab-item-height-medium) - var(--spectrum-border-width-200));
-    --sp-tabs-overflow-button-size: var(--spectrum-tab-item-height-medium);
-    --sp-tabs-overflow-icon-color: var(--spectrum-gray-800);
-    --sp-tabs-overflow-shadow-color: var(--spectrum-gray-100);
-    --sp-tabs-overflow-shadow-width: 50px;
-    --mod-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
+:host([size="m"]) {
 }
 
 :host([size="s"]) {
-    --sp-tabs-overflow-button-height: calc(var(--spectrum-tab-item-height-small) - var(--spectrum-border-width-200));
-    --sp-tabs-overflow-button-size: var(--spectrum-tab-item-height-small);
-    --mod-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
 }
 
 :host([size="l"]) {
-    --sp-tabs-overflow-button-height: calc(var(--spectrum-tab-item-height-large) - var(--spectrum-border-width-200));
-    --sp-tabs-overflow-button-size: var(--spectrum-tab-item-height-large);
-    --mod-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
 }
 
 :host([size="xl"]) {
-    --sp-tabs-overflow-button-height: calc(var(--spectrum-tab-item-height-extra-large) - var(--spectrum-border-width-200));
-    --sp-tabs-overflow-button-size: var(--spectrum-tab-item-height-extra-large);
-    --mod-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
+}
+
+:host([size="xs"]) {
 }
 
 :host([compact]) {
-    --sp-tabs-overflow-button-height: calc(var(--spectrum-tab-item-compact-height-medium) - var(--spectrum-border-width-200));
-    --mod-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50);
 }
 
 sp-action-button {
-    width: var(--sp-tabs-overflow-button-size);
-    height: var(--sp-tabs-overflow-button-height);
+    inline-size: var(--spectrum-tabs-overflow-button-size);
+    block-size: var(--spectrum-tabs-overflow-button-height);
     position: absolute;
     z-index: 2;
     border: none;
     text-align: center;
     box-shadow: none;
     background: transparent;
-    color: var(--sp-tabs-overflow-icon-color);
+    color: var(--spectrum-tabs-overflow-icon-color);
 }
 
 sp-action-button.left-scroll {
     visibility: hidden;
-    left: var(--sp-tabs-overflow-previous-button-left);
+    inset-inline-start: var(--spectrum-tabs-overflow-previous-button-left);
 }
 
 sp-action-button.right-scroll {
     visibility: hidden;
-    right: var(--sp-tabs-overflow-next-button-right);
+    inset-inline-end: var(--spectrum-tabs-overflow-next-button-right);
 }
 
 sp-action-button.left-scroll.show,
@@ -85,20 +80,20 @@ sp-action-button.right-scroll.show {
     visibility: hidden;
     position: absolute;
     z-index: 1;
-    height: var(--sp-tabs-overflow-button-height);
-    width: var(--sp-tabs-overflow-shadow-width);
+    block-size: var(--spectrum-tabs-overflow-button-height);
+    inline-size: var(--spectrum-tabs-overflow-shadow-width);
     pointer-events: none;
     inset-block-start: 0;
 }
 
 .tabs-overflow-container:before {
-    background: transparent linear-gradient(270deg, transparent, var(--sp-tabs-overflow-shadow-color)) 0 0 no-repeat padding-box;
-    left: 0;
+    background: transparent linear-gradient(270deg, transparent, var(--spectrum-tabs-overflow-shadow-color)) 0 0 no-repeat padding-box;
+    inset-inline-start: 0;
 }
 
 .tabs-overflow-container:after {
-    background: transparent linear-gradient(90deg, transparent, var(--sp-tabs-overflow-shadow-color)) 0 0 no-repeat padding-box;
-    right: 0;
+    background: transparent linear-gradient(90deg, transparent, var(--spectrum-tabs-overflow-shadow-color)) 0 0 no-repeat padding-box;
+    inset-inline-end: 0;
 }
 
 .tabs-overflow-container.left-shadow:before,
diff --git a/packages/tabs/src/tabs-sizes-overrides.css b/packages/tabs/src/tabs-sizes-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/tabs/src/tabs-sizes-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/tabs/src/tabs-sizes.css b/packages/tabs/src/tabs-sizes.css
index 67a895c0723..5d3a76b2fe4 100644
--- a/packages/tabs/src/tabs-sizes.css
+++ b/packages/tabs/src/tabs-sizes.css
@@ -10,4 +10,62 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-tabs-sizes.css");
+:host([size="s"]) #list {
+    --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small);
+    --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small);
+    --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small);
+    --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small);
+    --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small);
+    --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small);
+    --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50);
+    --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75);
+    --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small);
+    --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small);
+    --spectrum-tabs-font-size: var(--spectrum-font-size-75);
+}
+
+:host([size="l"]) #list {
+}
+
+:host([size="xl"]) #list {
+}
+
+:host([size="s"][compact]) {
+}
+
+:host([size="l"][compact]) {
+}
+
+:host([size="xl"][compact]) {
+}
+
+/* base variables */
+/* Base variables */
+:host {
+    /* layout */
+    --spectrum-tabs-height: var(--spectrum-component-height-100);
+    --spectrum-tabs-compact-height: var(--spectrum-component-height-75);
+    --spectrum-tabs-quiet-height: var(--spectrum-component-height-100);
+    --spectrum-tabs-quiet-compact-height: var(--spectrum-component-height-75);
+
+    /* typography */
+    --spectrum-tabs-compact-font-size: var(--spectrum-font-size-75);
+
+    /* spacing */
+    --spectrum-tabs-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100);
+    --spectrum-tabs-spacing-text-to-icon: var(--spectrum-text-to-visual-100);
+    --spectrum-tabs-spacing-icon-to-icon: var(--spectrum-spacing-100);
+    --spectrum-tabs-spacing-edge-to-icon: var(--spectrum-component-edge-to-visual-100);
+    --spectrum-tabs-spacing-edge-to-text-quiet: var(--spectrum-component-edge-to-text-100);
+    --spectrum-tabs-spacing-text-to-icon-quiet: var(--spectrum-text-to-visual-100);
+    --spectrum-tabs-spacing-icon-to-icon-quiet: var(--spectrum-spacing-100);
+    --spectrum-tabs-spacing-edge-to-icon-quiet: var(--spectrum-component-edge-to-visual-100);
+    --spectrum-tabs-spacing-compact-edge-to-text: var(--spectrum-component-edge-to-text-75);
+    --spectrum-tabs-spacing-compact-text-to-icon: var(--spectrum-text-to-visual-75);
+    --spectrum-tabs-spacing-compact-icon-to-icon: var(--spectrum-spacing-75);
+    --spectrum-tabs-spacing-compact-edge-to-icon: var(--spectrum-component-edge-to-visual-75);
+    --spectrum-tabs-spacing-compact-edge-to-text-quiet: var(--spectrum-component-edge-to-text-75);
+    --spectrum-tabs-spacing-compact-text-to-icon-quiet: var(--spectrum-text-to-visual-75);
+    --spectrum-tabs-spacing-compact-icon-to-icon-quiet: var(--spectrum-spacing-75);
+    --spectrum-tabs-spacing-compact-edge-to-icon-quiet: var(--spectrum-component-edge-to-visual-75);
+}
diff --git a/packages/tabs/src/tabs.css b/packages/tabs/src/tabs.css
index c76b3168ebb..4b3379c67f5 100644
--- a/packages/tabs/src/tabs.css
+++ b/packages/tabs/src/tabs.css
@@ -10,9 +10,173 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-tabs.css");
-@import url("./tabs-overrides.css");
+#list {
+    --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium);
+    --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium);
+    --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium);
+    --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium);
+    --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium);
+    --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium);
+    --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75);
+    --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100);
+    --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium);
+    --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default);
+    --spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down);
+    --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+    --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+    --spectrum-tabs-color-disabled: var(--spectrum-gray-500);
+    --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-tabs-font-style: var(--spectrum-default-font-style);
+    --spectrum-tabs-font-size: var(--spectrum-font-size-100);
+    --spectrum-tabs-line-height: var(--spectrum-line-height-100);
+    --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
+    --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100);
+    --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium);
+    --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color);
+    --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down);
+    --spectrum-tabs-list-background-direction: top;
+    --spectrum-tabs-divider-size: var(--spectrum-border-width-200);
+    --spectrum-tabs-divider-border-radius: 1px;
+    --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100);
+    --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out);
+}
+
+:host([emphasized]) #list {
+}
+
+:host([direction^="vertical"]) #list {
+}
+
+:host([direction^="vertical-right"]) #list {
+}
+
+:host([direction^="vertical"]) #list:dir(rtl),
+:host([dir="rtl"][direction^="vertical"]) #list {
+}
+
+:host([direction^="vertical-right"]) #list:dir(rtl),
+:host([dir="rtl"][direction^="vertical-right"]) #list {
+}
+
+:host([compact]) #list {
+}
+
+#list {
+    --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-tabs-divider-background-color: var(--spectrum-gray-200);
+    z-index: 0;
+    vertical-align: top;
+    background: linear-gradient(to var(--spectrum-tabs-list-background-direction), var(--highcontrast-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color)) 0 var(--spectrum-tabs-divider-size), transparent var(--spectrum-tabs-divider-size));
+    margin: 0;
+    padding-block: 0;
+    display: flex;
+    position: relative;
+
+    justify-content: var(--swc-tabs-list-justify-content);
+}
+
+::slotted([selected]:not([slot])) {
+    color: var(--highcontrast-tabs-color-selected, var(--spectrum-tabs-color-selected));
+}
+
+::slotted([disabled]:not([slot])) {
+    cursor: default;
+    color: var(--highcontrast-tabs-color-disabled, var(--spectrum-tabs-color-disabled));
+}
+
+#selection-indicator {
+    background-color: var(--highcontrast-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color));
+    z-index: 0;
+    transition: transform var(--spectrum-tabs-animation-duration) var(--spectrum-tabs-animation-ease);
+    transform-origin: 0 0;
+    border-radius: var(--spectrum-tabs-divider-border-radius);
+    position: absolute;
+    inset-inline-start: 0;
+}
+
+:host([direction^="horizontal"]) #list {
+    align-items: center;
+}
+
+:host([direction^="horizontal"]) #list ::slotted(:not([slot])) {
+    vertical-align: top;
+}
+
+:host([direction^="horizontal"]) ::slotted(:not(:first-child)) {
+    margin-inline-start: var(--spectrum-tabs-item-horizontal-spacing);
+}
+
+:host([direction^="horizontal"]) #list #selection-indicator {
+    block-size: var(--spectrum-tabs-divider-size);
+    position: absolute;
+    inset-block-end: 0;
+}
 
+:host([direction^="horizontal"][compact]) #list {
+    box-sizing: initial;
+    align-items: end;
+}
+
+:host([quiet]) #list {
+    border-color: #0000;
+    display: inline-flex;
+
+    background: linear-gradient(to var(--spectrum-tabs-list-background-direction), var(--highcontrast-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color)) 0 var(--spectrum-tabs-divider-size), transparent var(--spectrum-tabs-divider-size));
+}
+
+:host([quiet]) #selection-indicator {
+    padding-inline-start: 0;
+}
+
+:host([direction^="vertical"]) #list,
+:host([direction^="vertical-right"]) #list {
+    flex-direction: column;
+    padding: 0;
+    display: inline-flex;
+}
+
+:host([direction^="vertical-right"][quiet]) #list,
+:host([direction^="vertical"][quiet]) #list {
+    border-color: #0000;
+}
+
+:host([direction^="vertical"]) #list ::slotted(:not([slot])),
+:host([direction^="vertical-right"]) #list ::slotted(:not([slot])) {
+    block-size: var(--spectrum-tabs-item-height);
+    line-height: var(--spectrum-tabs-item-height);
+    margin-block-end: var(--spectrum-tabs-item-vertical-spacing);
+    margin-inline-start: var(--spectrum-tabs-start-to-edge);
+    margin-inline-end: var(--spectrum-tabs-start-to-edge);
+    padding-block: 0;
+}
+
+:host([direction^="vertical"]) #list ::slotted(:not([slot])):before,
+:host([direction^="vertical-right"]) #list ::slotted(:not([slot])):before {
+    inset-inline-start: calc(var(--spectrum-tabs-focus-indicator-gap) * -1);
+}
+
+:host([direction^="vertical"]) #list #selection-indicator,
+:host([direction^="vertical-right"]) #list #selection-indicator {
+    inline-size: var(--spectrum-tabs-divider-size);
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+}
+
+:host([direction^="vertical-right"]) #list #selection-indicator {
+    inset-inline: auto 0;
+}
+
+#list ::slotted([selected]:not([slot])):before {
+    background-color: var(--highcontrast-tabs-focus-indicator-background-color);
+}
+
+:host([direction^="vertical"][compact]) #list #list ::slotted(:not([slot])):before {
+    block-size: 100%;
+    inset-block-start: 0;
+}
+
+/* Base variables */
 :host {
     display: grid;
     grid-template-columns: 100%;
@@ -28,28 +192,23 @@
 }
 
 :host([dir="rtl"]) #selection-indicator {
-    left: 0;
-    right: auto;
+    inset-inline: 0 auto;
 }
 
 :host([direction="vertical-right"]) #list #selection-indicator {
     inset-inline: auto 0;
 }
 
-#list {
-    justify-content: var(--swc-tabs-list-justify-content);
-}
-
 :host([disabled]) #list {
     pointer-events: none;
 }
 
 :host([disabled]) #list #selection-indicator {
-    background-color: var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled));
+    background-color: var(--spectrum-tabs-color-disabled);
 }
 
 :host([disabled]) ::slotted(sp-tab) {
-    color: var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled));
+    color: var(--spectrum-tabs-color-disabled);
 }
 
 /*
@@ -74,3 +233,11 @@
 :host([dir][direction="horizontal"]) #list.scroll::-webkit-scrollbar {
     display: none;
 }
+
+.indicator {
+    background-color: var(--spectrum-tabs-color-disabled);
+}
+
+:host([disabled]) {
+    color: var(--spectrum-tabs-color-disabled);
+}
diff --git a/packages/tabs/stories/tabs-horizontal-sizes.stories.ts b/packages/tabs/stories/tabs-horizontal-sizes.stories.ts
index 978becfe339..674b6cdb710 100644
--- a/packages/tabs/stories/tabs-horizontal-sizes.stories.ts
+++ b/packages/tabs/stories/tabs-horizontal-sizes.stories.ts
@@ -13,7 +13,7 @@ import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import '@spectrum-web-components/tabs/sp-tabs.js';
 import '@spectrum-web-components/tabs/sp-tab.js';
 import '@spectrum-web-components/tabs/sp-tab-panel.js';
diff --git a/packages/tabs/stories/tabs-vertical-right-sizes.stories.ts b/packages/tabs/stories/tabs-vertical-right-sizes.stories.ts
index 219e788b7ea..edd6c5a497f 100644
--- a/packages/tabs/stories/tabs-vertical-right-sizes.stories.ts
+++ b/packages/tabs/stories/tabs-vertical-right-sizes.stories.ts
@@ -13,7 +13,7 @@ import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import '@spectrum-web-components/tabs/sp-tabs.js';
 import '@spectrum-web-components/tabs/sp-tab.js';
 import '@spectrum-web-components/tabs/sp-tab-panel.js';
diff --git a/packages/tabs/stories/tabs-vertical-sizes.stories.ts b/packages/tabs/stories/tabs-vertical-sizes.stories.ts
index 8f5cdc31d5e..0d35465ad0c 100644
--- a/packages/tabs/stories/tabs-vertical-sizes.stories.ts
+++ b/packages/tabs/stories/tabs-vertical-sizes.stories.ts
@@ -13,7 +13,7 @@ import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import '@spectrum-web-components/tabs/sp-tabs.js';
 import '@spectrum-web-components/tabs/sp-tab.js';
 import '@spectrum-web-components/tabs/sp-tab-panel.js';
diff --git a/packages/tabs/stories/tabs.stories.ts b/packages/tabs/stories/tabs.stories.ts
index 208e834c7bc..710651c7272 100644
--- a/packages/tabs/stories/tabs.stories.ts
+++ b/packages/tabs/stories/tabs.stories.ts
@@ -13,7 +13,7 @@ import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import '@spectrum-web-components/tabs/sp-tabs.js';
 import '@spectrum-web-components/tabs/sp-tab.js';
 import '@spectrum-web-components/tabs/sp-tab-panel.js';
@@ -367,7 +367,7 @@ export const Icons = ({
                 <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
             </sp-tab>
             <sp-tab label="Tab 4" value="4" ?vertical=${verticalTab}>
-                <sp-icon-help slot="icon"></sp-icon-help>
+                <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
             </sp-tab>
             ${panels()}
         </sp-tabs>
@@ -395,7 +395,7 @@ export const IconsWithSlottedLabel = ({
             </sp-tab>
             <sp-tab value="4" ?vertical=${verticalTab}>
                 Tab 4
-                <sp-icon-help slot="icon"></sp-icon-help>
+                <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
             </sp-tab>
             ${panels()}
         </sp-tabs>
@@ -419,7 +419,7 @@ export const IconsOnly = ({
                 <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
             </sp-tab>
             <sp-tab aria-label="Tab 4" value="4" ?vertical=${verticalTab}>
-                <sp-icon-help slot="icon"></sp-icon-help>
+                <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
             </sp-tab>
             ${panels()}
         </sp-tabs>
@@ -444,7 +444,7 @@ export const iconsIi = (args: Properties): TemplateResult => {
                 <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
             </sp-tab>
             <sp-tab label="Tab 4" value="4" vertical>
-                <sp-icon-help slot="icon"></sp-icon-help>
+                <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
             </sp-tab>
             ${panels()}
         </sp-tabs>
@@ -473,7 +473,7 @@ export const iconsIii = (args: Properties): TemplateResult => {
                 <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
             </sp-tab>
             <sp-tab label="Tab 4" value="4">
-                <sp-icon-help slot="icon"></sp-icon-help>
+                <sp-icon-help-circle slot="icon"></sp-icon-help-circle>
             </sp-tab>
             ${panels()}
         </sp-tabs>
diff --git a/packages/tags/package.json b/packages/tags/package.json
index 2e8bbc4b688..0ff5c39fc80 100644
--- a/packages/tags/package.json
+++ b/packages/tags/package.json
@@ -37,9 +37,7 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/tag-overrides.css.js": "./src/tag-overrides.css.js",
         "./src/tag.css.js": "./src/tag.css.js",
-        "./src/tags-overrides.css.js": "./src/tags-overrides.css.js",
         "./src/tags.css.js": "./src/tags.css.js",
         "./sp-tags.js": {
             "development": "./sp-tags.dev.js",
diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css
deleted file mode 100644
index d88636d15e4..00000000000
--- a/packages/tags/src/spectrum-tag.css
+++ /dev/null
@@ -1,395 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-avatar-opacity-disabled: 0.3;
-    --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
-    --spectrum-tag-border-width: var(--spectrum-border-width-100);
-    --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
-    --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color);
-    --spectrum-tag-label-line-height: var(--spectrum-line-height-100);
-    --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight);
-    --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);
-    --spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-    --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900);
-    --spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000);
-    --spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100);
-    --spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000);
-    --spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default);
-    --spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover);
-    --spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down);
-    --spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus);
-    --spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default);
-    --spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover);
-    --spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down);
-    --spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus);
-    --spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default);
-    --spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover);
-    --spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down);
-    --spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus);
-    --spectrum-tag-content-color-invalid-selected: var(--spectrum-white);
-    --spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default);
-    --spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover);
-    --spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down);
-    --spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus);
-    --spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default);
-    --spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover);
-    --spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down);
-    --spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus);
-    --spectrum-tag-content-color-emphasized: var(--spectrum-white);
-    --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color);
-}
-
-:host,
-:host {
-    --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);
-    --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);
-    --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);
-}
-
-:host([size="s"]) {
-    --spectrum-tag-height: var(--spectrum-component-height-75);
-    --spectrum-tag-font-size: var(--spectrum-font-size-75);
-    --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75);
-    --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75);
-    --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small);
-    --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
-    --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75);
-    --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
-    --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small);
-    --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small);
-    --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75);
-    --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75);
-    --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius);
-    --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start);
-    --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end);
-    --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end);
-}
-
-:host([size="l"]) {
-    --spectrum-tag-height: var(--spectrum-component-height-200);
-    --spectrum-tag-font-size: var(--spectrum-font-size-200);
-    --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200);
-    --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200);
-    --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large);
-    --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200);
-    --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200);
-    --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200);
-    --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large);
-    --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large);
-    --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200);
-    --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200);
-    --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius);
-    --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start);
-    --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end);
-    --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end);
-}
-
-:host {
-    border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, var(--spectrum-tag-border-color)));
-    background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-tag-background-color)));
-    color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-tag-content-color)));
-    border-radius: var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius));
-    border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width));
-    block-size: var(--mod-tag-height, var(--spectrum-tag-height));
-    box-sizing: border-box;
-    vertical-align: bottom;
-    max-inline-size: 100%;
-    -webkit-user-select: none;
-    user-select: none;
-    transition:
-        border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out,
-        color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out,
-        box-shadow var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out,
-        background-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out;
-    border-style: solid;
-    outline: none;
-    align-items: center;
-    padding-inline-start: calc(var(--mod-tag-spacing-inline-start, var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    padding-inline-end: 0;
-    display: inline-flex;
-    position: relative;
-}
-
-::slotted([slot="icon"]) {
-    block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size));
-    inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size));
-    flex-shrink: 0;
-    margin-block-start: calc(var(--mod-tag-icon-spacing-block-start, var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    margin-block-end: calc(var(--mod-tag-icon-spacing-block-end, var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    margin-inline-end: var(--mod-tag-icon-spacing-inline-end, var(--spectrum-tag-icon-spacing-inline-end));
-}
-
-::slotted([slot="avatar"]) {
-    margin-block-start: calc(var(--mod-tag-avatar-spacing-block-start, var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    margin-inline-end: var(--mod-tag-avatar-spacing-inline-end, var(--spectrum-tag-avatar-spacing-inline-end));
-}
-
-.clear-button {
-    --mod-clear-button-width: fit-content;
-    --spectrum-clearbutton-fill-size: fit-content;
-    --spectrum-clearbutton-fill-background-color: transparent;
-    box-sizing: border-box;
-    color: currentColor;
-    margin-inline-start: calc(var(--mod-tag-clear-button-spacing-inline-start, var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) * -1);
-    margin-inline-end: calc(var(--mod-tag-clear-button-spacing-inline-end, var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-}
-
-.clear-button .spectrum-ClearButton-fill {
-    background-color: var(--mod-clearbutton-fill-background-color, var(--spectrum-clearbutton-fill-background-color));
-    inline-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size));
-    block-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size));
-}
-
-.label {
-    block-size: 100%;
-    box-sizing: border-box;
-    line-height: var(--mod-tag-label-line-height, var(--spectrum-tag-label-line-height));
-    font-weight: var(--mod-tag-label-font-weight, var(--spectrum-tag-label-font-weight));
-    font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size));
-    cursor: default;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    flex: auto;
-    margin-inline-end: calc(var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    padding-block-start: calc(var(--mod-tag-label-spacing-block, var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    overflow: hidden;
-}
-
-:host(:is(:active, [active])) {
-    border-color: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active)));
-    background-color: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active)));
-    color: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active)));
-}
-
-:host([focused]),
-:host(:focus-visible) {
-    border-color: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus)));
-    background-color: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus)));
-    color: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus)));
-}
-
-:host([focused]):after,
-:host(:focus-visible):after {
-    content: "";
-    border-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color)));
-    border-radius: calc(var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-    border-width: var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness));
-    pointer-events: none;
-    border-style: solid;
-    display: inline-block;
-    position: absolute;
-    inset-block-start: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)));
-    inset-block-end: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)));
-    inset-inline-start: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)));
-    inset-inline-end: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)));
-}
-
-:host([selected]) {
-    border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected)));
-    background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected)));
-    color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected)));
-}
-
-:host([selected]:is(:active, [active])) {
-    border-color: var(--highcontrast-tag-border-color-selected-active, var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active)));
-    background-color: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active)));
-}
-
-:host([selected][focused]),
-:host([selected]:focus-visible) {
-    border-color: var(--highcontrast-tag-border-color-selected-focus, var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus)));
-    background-color: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus)));
-}
-
-:host([invalid]) {
-    border-color: var(--highcontrast-tag-border-color-invalid, var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid)));
-    color: var(--highcontrast-tag-content-color-invalid, var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid)));
-}
-
-:host([invalid]:is(:active, [active])) {
-    border-color: var(--highcontrast-tag-border-color-invalid-active, var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active)));
-    color: var(--highcontrast-tag-content-color-invalid-active, var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active)));
-}
-
-:host([invalid][focused]),
-:host([invalid]:focus-visible) {
-    border-color: var(--highcontrast-tag-border-color-invalid-focus, var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus)));
-    color: var(--highcontrast-tag-content-color-invalid-focus, var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus)));
-}
-
-:host([invalid][selected]) {
-    border-color: var(--highcontrast-tag-border-color-invalid-selected, var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected)));
-    background-color: var(--highcontrast-tag-background-color-invalid-selected, var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected)));
-    color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected)));
-}
-
-:host([invalid][selected]:is(:active, [active])) {
-    border-color: var(--highcontrast-tag-border-color-invalid-selected-active, var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active)));
-    background-color: var(--highcontrast-tag-background-color-invalid-selected-active, var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active)));
-}
-
-:host([invalid][selected][focused]),
-:host([invalid][selected]:focus-visible) {
-    border-color: var(--highcontrast-tag-border-color-invalid-selected-focus, var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus)));
-    background-color: var(--highcontrast-tag-background-color-invalid-selected-focus, var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus)));
-}
-
-:host([emphasized]) {
-    border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized)));
-    background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized)));
-    color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized)));
-}
-
-@media (hover: hover) {
-    :host(:hover) {
-        border-color: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover)));
-        background-color: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover)));
-        color: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover)));
-    }
-
-    :host([selected]:hover) {
-        border-color: var(--highcontrast-tag-border-color-selected-hover, var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover)));
-        background-color: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover)));
-        color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected)));
-    }
-
-    :host([invalid]:hover) {
-        border-color: var(--highcontrast-tag-border-color-invalid-hover, var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover)));
-        color: var(--highcontrast-tag-content-color-invalid-hover, var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover)));
-    }
-
-    :host([invalid][selected]:hover) {
-        border-color: var(--highcontrast-tag-border-color-invalid-selected-hover, var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover)));
-        background-color: var(--highcontrast-tag-background-color-invalid-selected-hover, var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover)));
-        color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected)));
-    }
-
-    :host([emphasized]:hover) {
-        border-color: var(--highcontrast-tag-border-color-emphasized-hover, var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover)));
-        background-color: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover)));
-        color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized)));
-    }
-}
-
-:host([emphasized]:is(:active, [active])) {
-    border-color: var(--highcontrast-tag-border-color-emphasized-active, var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active)));
-    background-color: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active)));
-}
-
-:host([emphasized][focused]),
-:host([emphasized]:focus-visible) {
-    border-color: var(--highcontrast-tag-border-color-emphasized-focus, var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus)));
-    background-color: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus)));
-}
-
-:host([disabled]) {
-    border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled)));
-    background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled)));
-    color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled)));
-    pointer-events: none;
-}
-
-:host([disabled]) ::slotted([slot="avatar"]) {
-    opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled));
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-tag-border-color: ButtonText;
-        --highcontrast-tag-border-color-hover: ButtonText;
-        --highcontrast-tag-border-color-active: ButtonText;
-        --highcontrast-tag-border-color-focus: Highlight;
-        --highcontrast-tag-background-color: ButtonFace;
-        --highcontrast-tag-background-color-hover: ButtonFace;
-        --highcontrast-tag-background-color-active: ButtonFace;
-        --highcontrast-tag-background-color-focus: ButtonFace;
-        --highcontrast-tag-content-color: ButtonText;
-        --highcontrast-tag-content-color-hover: ButtonText;
-        --highcontrast-tag-content-color-active: ButtonText;
-        --highcontrast-tag-content-color-focus: ButtonText;
-        --highcontrast-tag-focus-ring-color: Highlight;
-        forced-color-adjust: none;
-    }
-
-    :host([selected]) {
-        --highcontrast-tag-border-color-selected: Highlight;
-        --highcontrast-tag-border-color-selected-hover: Highlight;
-        --highcontrast-tag-border-color-selected-active: Highlight;
-        --highcontrast-tag-border-color-selected-focus: Highlight;
-        --highcontrast-tag-background-color-selected: Highlight;
-        --highcontrast-tag-background-color-selected-hover: Highlight;
-        --highcontrast-tag-background-color-selected-active: Highlight;
-        --highcontrast-tag-background-color-selected-focus: Highlight;
-        --highcontrast-tag-content-color-selected: HighlightText;
-    }
-
-    :host([disabled]) {
-        --highcontrast-tag-border-color-disabled: GrayText;
-        --highcontrast-tag-background-color-disabled: ButtonFace;
-        --highcontrast-tag-content-color-disabled: GrayText;
-    }
-
-    :host([invalid]) {
-        --highcontrast-tag-border-color-invalid: Highlight;
-        --highcontrast-tag-border-color-invalid-hover: Highlight;
-        --highcontrast-tag-border-color-invalid-active: Highlight;
-        --highcontrast-tag-border-color-invalid-focus: Highlight;
-        --highcontrast-tag-content-color-invalid: CanvasText;
-        --highcontrast-tag-content-color-invalid-hover: CanvasText;
-        --highcontrast-tag-content-color-invalid-active: CanvasText;
-        --highcontrast-tag-content-color-invalid-focus: CanvasText;
-    }
-
-    :host([invalid][selected]) {
-        --highcontrast-tag-border-color-invalid-selected: Highlight;
-        --highcontrast-tag-border-color-invalid-selected-hover: Highlight;
-        --highcontrast-tag-border-color-invalid-selected-focus: Highlight;
-        --highcontrast-tag-border-color-invalid-selected-active: Highlight;
-        --highcontrast-tag-background-color-invalid-selected: Highlight;
-        --highcontrast-tag-background-color-invalid-selected-hover: Highlight;
-        --highcontrast-tag-background-color-invalid-selected-active: Highlight;
-        --highcontrast-tag-background-color-invalid-selected-focus: Highlight;
-        --highcontrast-tag-content-color-invalid-selected: HighlightText;
-    }
-
-    :host([emphasized]) {
-        --highcontrast-tag-border-color-emphasized: Highlight;
-        --highcontrast-tag-border-color-emphasized-hover: Highlight;
-        --highcontrast-tag-border-color-emphasized-active: Highlight;
-        --highcontrast-tag-border-color-emphasized-focus: Highlight;
-        --highcontrast-tag-background-color-emphasized: ButtonFace;
-        --highcontrast-tag-background-color-emphasized-hover: ButtonFace;
-        --highcontrast-tag-background-color-emphasized-active: ButtonFace;
-        --highcontrast-tag-background-color-emphasized-focus: ButtonFace;
-        --highcontrast-tag-content-color-emphasized: CanvasText;
-    }
-}
diff --git a/packages/tags/src/spectrum-tags.css b/packages/tags/src/spectrum-tags.css
deleted file mode 100644
index 5bdb3da9a18..00000000000
--- a/packages/tags/src/spectrum-tags.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75);
-    --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75);
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: inline-flex;
-}
-
-::slotted(*) {
-    margin-block: var(--mod-tag-group-item-margin-block, var(--spectrum-tag-group-item-margin-block));
-    margin-inline: var(--mod-tag-group-item-margin-inline, var(--spectrum-tag-group-item-margin-inline));
-}
diff --git a/packages/tags/src/tag-overrides.css b/packages/tags/src/tag-overrides.css
deleted file mode 100644
index d4d1fa5b982..00000000000
--- a/packages/tags/src/tag-overrides.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-tag-background-color: var(--system-tag-background-color);
-    --spectrum-tag-background-color-hover: var(--system-tag-background-color-hover);
-    --spectrum-tag-background-color-active: var(--system-tag-background-color-active);
-    --spectrum-tag-background-color-focus: var(--system-tag-background-color-focus);
-    --spectrum-tag-size-small-corner-radius: var(--system-tag-size-small-corner-radius);
-    --spectrum-tag-size-medium-corner-radius: var(--system-tag-size-medium-corner-radius);
-    --spectrum-tag-size-large-corner-radius: var(--system-tag-size-large-corner-radius);
-    --spectrum-tag-border-color: var(--system-tag-border-color);
-    --spectrum-tag-border-color-hover: var(--system-tag-border-color-hover);
-    --spectrum-tag-border-color-active: var(--system-tag-border-color-active);
-    --spectrum-tag-border-color-focus: var(--system-tag-border-color-focus);
-    --spectrum-tag-content-color: var(--system-tag-content-color);
-    --spectrum-tag-content-color-hover: var(--system-tag-content-color-hover);
-    --spectrum-tag-content-color-active: var(--system-tag-content-color-active);
-    --spectrum-tag-content-color-focus: var(--system-tag-content-color-focus);
-    --spectrum-tag-content-color-selected: var(--system-tag-content-color-selected);
-    --spectrum-tag-border-color-selected: var(--system-tag-border-color-selected);
-    --spectrum-tag-border-color-selected-hover: var(--system-tag-border-color-selected-hover);
-    --spectrum-tag-border-color-selected-active: var(--system-tag-border-color-selected-active);
-    --spectrum-tag-border-color-selected-focus: var(--system-tag-border-color-selected-focus);
-    --spectrum-tag-border-color-disabled: var(--system-tag-border-color-disabled);
-    --spectrum-tag-background-color-disabled: var(--system-tag-background-color-disabled);
-    --spectrum-tag-size-small-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start);
-    --spectrum-tag-size-small-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end);
-    --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end);
-    --spectrum-tag-size-medium-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start);
-    --spectrum-tag-size-medium-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end);
-    --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end);
-    --spectrum-tag-size-large-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start);
-    --spectrum-tag-size-large-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end);
-    --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end);
-}
diff --git a/packages/tags/src/tag.css b/packages/tags/src/tag.css
index 235373cb088..e346fdcc86e 100644
--- a/packages/tags/src/tag.css
+++ b/packages/tags/src/tag.css
@@ -1,8 +1,9 @@
 /**
- * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * 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
@@ -10,47 +11,350 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-tag.css");
-@import url("./tag-overrides.css");
+:host {
+	--spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
+	--spectrum-tag-border-width: var(--spectrum-border-width-100);
+	--spectrum-tag-border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, transparent));
+	--spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, transparent));
+	--spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, transparent));
+	--spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, transparent));
+	--spectrum-tag-background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-gray-100)));
+	--spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-gray-200)));
+	--spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-gray-200)));
+	--spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-gray-200)));
+	--spectrum-tag-content-color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-neutral-content-color-default)));
+	--spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-neutral-content-color-hover)));
+	--spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-neutral-content-color-down)));
+	--spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus)));
+	--spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
+	--spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+	--spectrum-tag-focus-ring-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color)));
+	--spectrum-tag-label-line-height: var(--spectrum-line-height-100);
+	--spectrum-tag-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
+	--spectrum-tag-label-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-tag-label-font-style: var(--spectrum-default-font-style);
+	--spectrum-tag-label-font-weight: var(--spectrum-medium-font-weight);
+	--spectrum-tag-height: var(--spectrum-component-height-75);
+	--spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-small);
+	--spectrum-tag-font-size: var(--spectrum-font-size-75);
+	--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75);
+	--spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-small);
+
+	--spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-75);
+	--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small);
+	--spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-small);
+	--spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-small);
+
+	--spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
+	--spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-75);
+
+	--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
+	--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75);
+
+	--spectrum-tag-avatar-size: var(--spectrum-avatar-size-50);
+	--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small);
+	--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small);
 
-:host([invalid]) .clear-button {
-    --spectrum-clearbutton-medium-icon-color: var(--spectrum-tag-icon-color-error-key-focus, var(--spectrum-red-600));
-    --spectrum-clearbutton-medium-icon-color-hover: var(--spectrum-clearbutton-medium-icon-color);
-    --spectrum-clearbutton-medium-icon-color-down: var(--spectrum-tag-deletable-icon-color-error-down, var(--spectrum-red-700));
+	--spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-50);
+
+	--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75);
+	--spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-75);
+	--mod-avatar-inline-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size));
+	--mod-avatar-block-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size));
+	--mod-thumbnail-size: var(--mod-tag-thumbnail-size, var(--spectrum-tag-thumbnail-size));
+	--mod-clear-button-background-color: transparent;
+	--mod-clear-button-icon-color: currentColor;
+	--mod-clear-button-icon-color-hover: currentColor;
+	--mod-clear-button-icon-color-key-focus: currentColor;
+
+	--mod-icon-size: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size));
+	--mod-clear-button-width: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) + var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) + var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)));
+	--mod-clear-button-height: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) * 2 + var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)));
 }
 
-:host([invalid]):hover .clear-button {
-    --spectrum-clearbutton-medium-icon-color: var(--spectrum-tag-icon-color-error-hover, var(--spectrum-red-600));
-    --spectrum-clearbutton-medium-icon-color-hover: var(--spectrum-clearbutton-medium-icon-color);
-    --spectrum-clearbutton-medium-icon-color-down: var(--spectrum-tag-deletable-icon-color-error-down, var(--spectrum-red-700));
+:host:lang(ja),
+:host:lang(ko),
+:host:lang(zh) {
+	--mod-tag-label-line-height: var(--mod-tag-label-line-height-cjk, var(--spectrum-tag-label-line-height-cjk));
 }
 
-:host([invalid]:is(:active, [active])) .clear-button {
-    --spectrum-clearbutton-medium-icon-color: var(--spectrum-tag-icon-color-error-hover, var(--spectrum-red-600));
-    --spectrum-clearbutton-medium-icon-color-hover: var(--spectrum-clearbutton-medium-icon-color);
-    --spectrum-clearbutton-medium-icon-color-down: var(--spectrum-tag-deletable-icon-color-error-down, var(--spectrum-red-700));
+:host([selected]:not([disabled],[readOnly])) {
+	--spectrum-tag-border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent));
+	--spectrum-tag-background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default)));
+	--spectrum-tag-content-color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25)));
+
+	--spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent));
+	--spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover)));
+	--spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25)));
+
+	--spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent));
+	--spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down)));
+	--spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25)));
+
+	--spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent));
+	--spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus)));
+	--spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25)));
 }
 
-:host([size="xs"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-50);
+:host([emphasized][selected]:not([disabled],[readOnly])) {
+	--spectrum-tag-border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent));
+	--spectrum-tag-background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default)));
+	--spectrum-tag-content-color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)));
+
+	--spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent));
+	--spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover)));
+	--spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)));
+
+	--spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent));
+	--spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down)));
+	--spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)));
+
+	--spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent));
+	--spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus)));
+	--spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)));
 }
 
-:host([size="s"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-75);
+:host([disabled]) {
+	--spectrum-tag-border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent));
+	--spectrum-tag-background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color)));
+	--spectrum-tag-content-color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color)));
 }
 
 :host([size="m"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
+	--spectrum-tag-height: var(--spectrum-component-height-100);
+	--spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-medium);
+	--spectrum-tag-font-size: var(--spectrum-font-size-100);
+	--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
+	--spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-medium);
+
+	--spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-100);
+	--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
+	--spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-medium);
+	--spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-medium);
+
+	--spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
+	--spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-100);
+
+	--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-avatar-size: var(--spectrum-avatar-size-75);
+	--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium);
+	--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
+
+	--spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-75);
+
+	--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
+	--spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-100);
 }
 
 :host([size="l"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-200);
+	--spectrum-tag-height: var(--spectrum-component-height-200);
+	--spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-large);
+	--spectrum-tag-font-size: var(--spectrum-font-size-200);
+	--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200);
+	--spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-large);
+
+	--spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-200);
+	--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large);
+	--spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-large);
+	--spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-large);
+
+	--spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
+	--spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-200);
+
+	--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200);
+	--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200);
+
+	--spectrum-tag-avatar-size: var(--spectrum-avatar-size-100);
+	--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large);
+	--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large);
+
+	--spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-100);
+
+	--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200);
+	--spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-200);
+}
+
+:host {
+	border-color: var(--spectrum-tag-border-color);
+	background-color: var(--spectrum-tag-background-color);
+	color: var(--spectrum-tag-content-color);
+
+	border-radius: var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius));
+	border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width));
+	border-style: solid;
+
+	padding-inline-start: calc(var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+	padding-inline-end: 0;
+
+	block-size: var(--mod-tag-height, var(--spectrum-tag-height));
+	min-inline-size: var(--mod-tag-min-inline-size, var(--spectrum-tag-min-inline-size));
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	box-sizing: border-box;
+	vertical-align: bottom;
+	max-inline-size: calc(var(--mod-tag-height, var(--spectrum-tag-height)) * var(--mod-tag-maximum-width-multiplier, var(--spectrum-tag-maximum-width-multiplier)));
+	outline: none;
+
+	transition:
+		border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out,
+		color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out,
+		background-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out;
+}
+
+.itemIcon {
+	block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size));
+	inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size));
+
+	margin-block-start: calc(var(--mod-tag-icon-spacing-block-start, var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+	margin-block-end: calc(var(--mod-tag-icon-spacing-block-end, var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+	flex-shrink: 0;
+}
+
+sp-avatar {
+	margin-block-start: calc(var(--mod-tag-avatar-spacing-block-start, var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+	margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
 }
 
-:host([size="xl"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-300);
+sp-thumbnail {
+	flex-shrink: 0;
 }
 
-:host([size="xxl"]) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-400);
+sp-avatar,
+.itemIcon,
+sp-thumbnail {
+	margin-inline-start: calc(var(--mod-tag-visual-spacing-inline-start, var(--spectrum-tag-visual-spacing-inline-start)) - var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)));
+	margin-inline-end: var(--mod-tag-visual-spacing-inline-end, var(--spectrum-tag-visual-spacing-inline-end));
+}
+
+sp-clear-button {
+	box-sizing: border-box;
+	flex-shrink: 0;
+	margin-inline-start: calc((var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))) * -1);
+	margin-inline-end: calc(var(--mod-tag-border-width, var(--spectrum-tag-border-width)) * -1);
+}
+
+.itemLabel {
+	block-size: 100%;
+	box-sizing: border-box;
+
+	line-height: var(--mod-tag-label-line-height, var(--spectrum-tag-label-line-height));
+	font-family: var(--mod-tag-label-font-family, var(--spectrum-tag-label-font-family));
+	font-style: var(--mod-tag-label-font-style, var(--spectrum-tag-label-font-style));
+	font-weight: var(--mod-tag-label-font-weight, var(--spectrum-tag-label-font-weight));
+	font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size));
+
+	flex: 1 1 auto;
+	cursor: default;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+
+	padding-block-start: calc(var(--mod-tag-label-spacing-block, var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+	margin-inline-end: calc(var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+}
+
+:host(:not([disabled],[readOnly]):hover) {
+	border-color: var(--spectrum-tag-border-color-hover);
+	background-color: var(--spectrum-tag-background-color-hover);
+	color: var(--spectrum-tag-content-color-hover);
+}
+
+@media (hover: hover) {
+	:host(:not([disabled],[readOnly]):hover) {
+		border-color: var(--spectrum-tag-border-color-hover);
+		background-color: var(--spectrum-tag-background-color-hover);
+		color: var(--spectrum-tag-content-color-hover);
+	}
+}
+
+:host(:not([disabled],[readOnly]):active) {
+	border-color: var(--spectrum-tag-border-color-active);
+	background-color: var(--spectrum-tag-background-color-active);
+	color: var(--spectrum-tag-content-color-active);
+	transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down));
+}
+
+:host(:not([disabled],[readOnly]):focus-visible) {
+	border-color: var(--spectrum-tag-border-color-focus);
+	background-color: var(--spectrum-tag-background-color-focus);
+	color: var(--spectrum-tag-content-color-focus);
+}
+
+:host(:not([disabled],[readOnly]):focus-visible):after {
+	content: "";
+	display: inline-block;
+	position: absolute;
+	inset: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)));
+	border-color: var(--spectrum-tag-focus-ring-color);
+	border-radius: calc(var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+	border-width: var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness));
+	border-style: solid;
+	pointer-events: none;
+}
+
+:host([disabled]) {
+	pointer-events: none;
+	user-select: none;
+	user-select: none;
+}
+
+sp-avatar {
+	opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled));
+}
+
+sp-thumbnail {
+	opacity: var(--mod-thumbnail-opacity-disabled, var(--spectrum-thumbnail-opacity-disabled));
+}
+
+@media (forced-colors: active) {
+	:host {
+		--highcontrast-tag-border-color: ButtonText;
+		--highcontrast-tag-border-color-hover: ButtonText;
+		--highcontrast-tag-border-color-active: ButtonText;
+		--highcontrast-tag-border-color-focus: ButtonText;
+
+		--highcontrast-tag-background-color: ButtonFace;
+		--highcontrast-tag-background-color-hover: ButtonFace;
+		--highcontrast-tag-background-color-active: ButtonFace;
+		--highcontrast-tag-background-color-focus: ButtonFace;
+
+		--highcontrast-tag-content-color: ButtonText;
+		--highcontrast-tag-content-color-hover: ButtonText;
+		--highcontrast-tag-content-color-active: ButtonText;
+		--highcontrast-tag-content-color-focus: ButtonText;
+
+		--highcontrast-tag-focus-ring-color: Highlight;
+		forced-color-adjust: none;
+	}
+
+	:host([selected]) {
+		--highcontrast-tag-border-color-selected: Highlight;
+
+		--highcontrast-tag-background-color-selected: Highlight;
+		--highcontrast-tag-background-color-selected-hover: Highlight;
+		--highcontrast-tag-background-color-selected-active: Highlight;
+		--highcontrast-tag-background-color-selected-focus: Highlight;
+
+		--highcontrast-tag-content-color-selected: HighlightText;
+	}
+
+	:host([disabled]) {
+		--highcontrast-tag-border-color-disabled: GrayText;
+		--highcontrast-tag-background-color-disabled: ButtonFace;
+		--highcontrast-tag-content-color-disabled: GrayText;
+	}
+
+	:host([emphasized]) {
+		--highcontrast-tag-border-color-emphasized: Highlight;
+
+		--highcontrast-tag-background-color-emphasized: ButtonFace;
+		--highcontrast-tag-background-color-emphasized-hover: ButtonFace;
+		--highcontrast-tag-background-color-emphasized-active: ButtonFace;
+		--highcontrast-tag-background-color-emphasized-focus: ButtonFace;
+
+		--highcontrast-tag-content-color-emphasized: CanvasText;
+	}
 }
diff --git a/packages/tags/src/tags-overrides.css b/packages/tags/src/tags-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/tags/src/tags-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/tags/src/tags.css b/packages/tags/src/tags.css
index 0ba5cc84251..a9157e01e74 100644
--- a/packages/tags/src/tags.css
+++ b/packages/tags/src/tags.css
@@ -10,13 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-tags.css");
-
+/* Base variables */
 :host {
-    --mod-clear-button-width: fit-content;
+    --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75);
+    --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75);
+    --spectrum-clear-button-width: fit-content;
 
-    display: inline-flex;
+    flex-wrap: wrap;
     margin: 0;
     padding: 0;
     list-style: none;
+    display: inline-flex;
+}
+
+::slotted(*) {
+    margin-block: var(--spectrum-tag-group-item-margin-block);
+    margin-inline: var(--spectrum-tag-group-item-margin-inline);
 }
diff --git a/packages/tags/stories/tags-sizes.stories.ts b/packages/tags/stories/tags-sizes.stories.ts
index 1337ea4e833..202df618bd9 100644
--- a/packages/tags/stories/tags-sizes.stories.ts
+++ b/packages/tags/stories/tags-sizes.stories.ts
@@ -19,7 +19,7 @@ import '@spectrum-web-components/tags/sp-tag.js';
 import '@spectrum-web-components/tags/sp-tags.js';
 import '@spectrum-web-components/avatar/sp-avatar.js';
 import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
 
 export default {
     title: 'Tags/Sizes',
@@ -30,15 +30,15 @@ const template = ({ size }: { size: ElementSize }): TemplateResult => html`
     <sp-tags>
         <sp-tag deletable size=${size}>
             Tag 1
-            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
         </sp-tag>
         <sp-tag invalid deletable size=${size}>
             Tag 2
-            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
         </sp-tag>
         <sp-tag disabled deletable size=${size}>
             Tag 3
-            <sp-icon-magnify slot="icon"></sp-icon-magnify>
+            <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
         </sp-tag>
     </sp-tags>
 `;
diff --git a/packages/tags/stories/tags.stories.ts b/packages/tags/stories/tags.stories.ts
index d4027d9586d..5c0a0d4ae41 100644
--- a/packages/tags/stories/tags.stories.ts
+++ b/packages/tags/stories/tags.stories.ts
@@ -16,7 +16,7 @@ import '@spectrum-web-components/tags/sp-tags.js';
 import '@spectrum-web-components/avatar/sp-avatar.js';
 import { avatar } from '../../avatar/stories/images';
 import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
 
 export default {
     title: 'Tags',
@@ -68,15 +68,15 @@ export const Default = (): TemplateResult => {
         <sp-tags>
             <sp-tag>
                 Tag 1
-                <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
+                <sp-icon-zoom-in slot="icon" size="s"></sp-icon-zoom-in>
             </sp-tag>
             <sp-tag invalid>
                 Tag 2
-                <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
+                <sp-icon-zoom-in slot="icon" size="s"></sp-icon-zoom-in>
             </sp-tag>
             <sp-tag disabled>
                 Tag 3
-                <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
+                <sp-icon-zoom-in slot="icon" size="s"></sp-icon-zoom-in>
             </sp-tag>
         </sp-tags>
     `;
@@ -122,15 +122,15 @@ export const deletable = (args: Props): TemplateResult => {
         <sp-tags @delete=${args.onDelete}>
             <sp-tag deletable>
                 Tag 1
-                <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
+                <sp-icon-zoom-in slot="icon" size="s"></sp-icon-zoom-in>
             </sp-tag>
             <sp-tag invalid deletable>
                 Tag 2
-                <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
+                <sp-icon-zoom-in slot="icon" size="s"></sp-icon-zoom-in>
             </sp-tag>
             <sp-tag disabled deletable>
                 Tag 3
-                <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
+                <sp-icon-zoom-in slot="icon" size="s"></sp-icon-zoom-in>
             </sp-tag>
         </sp-tags>
     `;
@@ -141,11 +141,11 @@ export const readonly = (): TemplateResult => {
         <sp-tags>
             <sp-tag deletable readonly>
                 Tag 1
-                <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
+                <sp-icon-zoom-in slot="icon" size="s"></sp-icon-zoom-in>
             </sp-tag>
             <sp-tag invalid deletable readonly>
                 Tag 2
-                <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
+                <sp-icon-zoom-in slot="icon" size="s"></sp-icon-zoom-in>
             </sp-tag>
             <sp-tag disabled deletable>
                 Tag 3
diff --git a/packages/tags/test/tags.test.ts b/packages/tags/test/tags.test.ts
index 84d372b3ec9..43ff4a74799 100644
--- a/packages/tags/test/tags.test.ts
+++ b/packages/tags/test/tags.test.ts
@@ -11,7 +11,7 @@
  */
 
 import { elementUpdated, expect, fixture } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
+import { html } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/tags/sp-tag.js';
 import '@spectrum-web-components/tags/sp-tags.js';
diff --git a/packages/textfield/package.json b/packages/textfield/package.json
index c636e848ddd..05d4730f12f 100644
--- a/packages/textfield/package.json
+++ b/packages/textfield/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/textfield-overrides.css.js": "./src/textfield-overrides.css.js",
         "./src/textfield.css.js": "./src/textfield.css.js",
         "./sp-textfield.js": {
             "development": "./sp-textfield.dev.js",
diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index 7983c9b1b6a..99fe5a5baca 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -31,7 +31,7 @@ import {
 import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 
 import textfieldStyles from './textfield.css.js';
 import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
@@ -82,6 +82,13 @@ export class TextfieldBase extends ManageHelpText(
     @property()
     public label = '';
 
+    /**
+     * Whether the label appears on the side of the form control.
+     * @todo complete this implementation by adding field-label to the textfield
+     */
+    @property({ type: Boolean, reflect: true, attribute: 'side-label' })
+    public sideLabel = false;
+
     /**
      * Name of the form control.
      */
@@ -275,7 +282,10 @@ export class TextfieldBase extends ManageHelpText(
     protected renderStateIcons(): TemplateResult | typeof nothing {
         if (this.invalid) {
             return html`
-                <sp-icon-alert id="invalid" class="icon"></sp-icon-alert>
+                <sp-icon-alert-triangle
+                    id="invalid"
+                    class="icon"
+                ></sp-icon-alert-triangle>
             `;
         } else if (this.valid) {
             return html`
diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css
deleted file mode 100644
index 098399745d3..00000000000
--- a/packages/textfield/src/spectrum-textfield.css
+++ /dev/null
@@ -1,560 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-textfield-input-line-height: var(--spectrum-textfield-height);
-    --spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100);
-    --spectrum-textfield-width: 240px;
-    --spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier);
-    --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-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);
-    --spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet);
-    --spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component);
-    --spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component);
-    --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet);
-    --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet);
-    --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack);
-    --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight);
-    --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-spacing-inline: var(--spectrum-spacing-200);
-    --spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field);
-    --spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
-    --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default);
-    --spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover);
-    --spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus);
-    --spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
-    --spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus);
-    --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default);
-    --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color);
-    --spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default);
-    --spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
-    --spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
-    --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
-    --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus);
-    --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color);
-    --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default);
-    --spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default);
-    --spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color);
-    --spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width);
-    --spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height);
-    --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-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);
-    --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100);
-}
-
-:host([size="s"]) #textfield {
-    --spectrum-textfield-height: var(--spectrum-component-height-75);
-    --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small);
-    --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100);
-    --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75);
-    --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75);
-    --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75);
-    --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75);
-    --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small);
-    --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small);
-    --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small);
-    --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small);
-    --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small);
-    --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-small);
-    --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small);
-    --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75);
-}
-
-:host([size="l"]) #textfield {
-    --spectrum-textfield-height: var(--spectrum-component-height-200);
-    --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large);
-    --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
-    --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200);
-    --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
-    --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200);
-    --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200);
-    --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large);
-    --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large);
-    --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large);
-    --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large);
-    --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large);
-    --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100);
-    --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100);
-    --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large);
-    --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large);
-    --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200);
-}
-
-:host([size="xl"]) #textfield {
-    --spectrum-textfield-height: var(--spectrum-component-height-300);
-    --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
-    --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
-    --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300);
-    --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
-    --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300);
-    --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300);
-    --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large);
-    --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large);
-    --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large);
-    --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large);
-    --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large);
-    --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200);
-    --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200);
-    --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large);
-    --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large);
-    --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300);
-}
-
-#textfield {
-    text-overflow: ellipsis;
-    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
-    grid-template-rows: auto auto auto;
-    grid-template-columns: auto auto;
-    margin: 0;
-    display: inline-grid;
-    position: relative;
-    overflow: visible;
-}
-
-:host([invalid]) #textfield .icon,
-:host([valid]) #textfield .icon {
-    pointer-events: all;
-    grid-area: 2 / 2;
-    margin-inline-start: auto;
-    position: absolute;
-    inset-block-start: 0;
-}
-
-#textfield.spectrum-Textfield--sideLabel .icon {
-    grid-area: 1 / 2 / span 1 / span 1;
-}
-
-:host([valid]) #textfield .icon {
-    color: var(--mod-textfield-icon-color-valid, var(--spectrum-textfield-icon-color-valid));
-    inset-block-start: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid));
-    inset-block-end: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid));
-    inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid));
-}
-
-:host([invalid]) #textfield .icon {
-    block-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid));
-    inline-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid));
-    color: var(--mod-textfield-icon-color-invalid, var(--spectrum-textfield-icon-color-invalid));
-    inset-block-start: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid));
-    inset-block-end: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid));
-    inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid));
-}
-
-:host([disabled]) #textfield .icon,
-:host([readonly]) #textfield .icon {
-    color: #0000;
-}
-
-:host([quiet]) .icon {
-    padding-inline-end: 0;
-}
-
-:host([quiet][valid]) .icon {
-    inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-valid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid));
-}
-
-:host([quiet][invalid]) .icon {
-    inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-invalid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid));
-}
-
-#textfield .spectrum-FieldLabel {
-    grid-area: 1 / 1 / auto / span 1;
-    margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block));
-}
-
-:host([quiet]) .spectrum-FieldLabel {
-    margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet));
-}
-
-:host([disabled]) #textfield .spectrum-FieldLabel {
-    color: var(--spectrum-textfield-text-color-disabled);
-}
-
-#textfield .spectrum-HelpText {
-    grid-area: 3 / 1 / auto / span 2;
-    margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block));
-}
-
-.spectrum-Textfield-characterCount {
-    inline-size: auto;
-    font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size));
-    font-family: var(--mod-textfield-character-count-font-family, var(--spectrum-textfield-character-count-font-family));
-    font-weight: var(--mod-textfield-character-count-font-weight, var(--spectrum-textfield-character-count-font-weight));
-    grid-area: 1 / 2 / auto / span 1;
-    justify-content: flex-end;
-    align-items: flex-end;
-    margin-block-end: var(--mod-textfield-character-count-spacing-block, var(--spectrum-textfield-character-count-spacing-block));
-    margin-inline-start: var(--mod-textfield-character-count-spacing-inline, var(--spectrum-textfield-character-count-spacing-inline));
-    margin-inline-end: 0;
-    padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2);
-    display: inline-flex;
-}
-
-:host([quiet]) .spectrum-Textfield-characterCount {
-    margin-block-end: var(--mod-textfield-character-count-spacing-block-quiet, var(--spectrum-textfield-character-count-spacing-block-quiet));
-}
-
-.input {
-    line-height: var(--spectrum-textfield-input-line-height);
-    box-sizing: border-box;
-    inline-size: 100%;
-    min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width));
-    block-size: var(--mod-textfield-height, var(--spectrum-textfield-height));
-    padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
-    padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
-    padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
-    vertical-align: top;
-    background-color: var(--mod-textfield-background-color, var(--spectrum-textfield-background-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;
-    font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size));
-    font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family));
-    font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight));
-    color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)));
-    text-overflow: ellipsis;
-    appearance: none;
-    outline: none;
-    grid-area: 2 / 1 / auto / span 2;
-    margin: 0;
-}
-
-:host([type="number"]) .input {
-    -moz-appearance: textfield;
-}
-
-:host([type="number"]) .input::-webkit-inner-spin-button,
-:host([type="number"]) .input::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-.input:-moz-ui-invalid {
-    box-shadow: none;
-}
-
-.input::placeholder {
-    opacity: 1;
-    font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size));
-    font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family));
-    font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight));
-    color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)));
-    transition: color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out;
-}
-
-.input:lang(ja)::placeholder,
-.input:lang(ko)::placeholder,
-.input:lang(zh)::placeholder {
-    font-style: normal;
-}
-
-:host([focused]) .input,
-.input:focus {
-    border-color: var(--highcontrast-textfield-border-color-focus, var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus)));
-}
-
-:host([focused]) .input,
-:host([focused]) .input::placeholder,
-.input:focus,
-.input:focus::placeholder {
-    color: var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus));
-}
-
-:host([focused]) .input {
-    border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus)));
-    outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) solid;
-    outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
-    outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap));
-}
-
-:host([focused]) .input,
-:host([focused]) .input::placeholder {
-    color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));
-}
-
-:host([valid]) .input {
-    color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid)));
-    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)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
-}
-
-:host([invalid]) .input {
-    color: var(--highcontrast-textfield-text-color-invalid, var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid)));
-    border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)));
-    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)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
-}
-
-:host([invalid]) .input:focus,
-:host([invalid][focused]) .input,
-:host([invalid]:focus) .input {
-    border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus)));
-}
-
-:host([invalid]) .input:focus-visible,
-:host([invalid][focused]) .input {
-    border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus)));
-}
-
-.input:disabled,
-:host([disabled]) #textfield .input {
-    background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled));
-    border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
-    resize: none;
-    opacity: 1;
-}
-
-.input:disabled,
-.input:disabled::placeholder,
-:host([disabled]) #textfield .input,
-:host([disabled]) #textfield .input::placeholder {
-    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
-}
-
-:host([quiet]) .input {
-    padding-block-start: var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start));
-    padding-inline: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet));
-    background-color: initial;
-    resize: none;
-    border-block-start-width: 0;
-    border-inline-width: 0;
-    border-radius: 0;
-    outline: none;
-    margin-block-end: var(--mod-textfield-spacing-block-quiet, var(--spectrum-textfield-spacing-block-quiet));
-    overflow-y: hidden;
-}
-
-:host([quiet][disabled]) .input,
-.input:disabled {
-    background-color: initial;
-    border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
-}
-
-:host([quiet][disabled]) .input,
-:host([quiet][disabled]) .input::placeholder,
-.input:disabled,
-.input:disabled::placeholder {
-    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
-}
-
-.input:read-only,
-:host([readonly]) #textfield .input {
-    background-color: initial;
-    color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)));
-    border-color: #0000;
-    outline: none;
-}
-
-.input:read-only::placeholder,
-:host([readonly]) #textfield .input::placeholder {
-    color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)));
-    background-color: initial;
-}
-
-@media (hover: hover) {
-    .input:hover,
-    #textfield:hover .input {
-        border-color: var(--highcontrast-textfield-border-color-hover, var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover)));
-    }
-
-    .input:hover,
-    .input:hover::placeholder,
-    #textfield:hover .input,
-    #textfield:hover .input::placeholder {
-        color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)));
-    }
-
-    :host([focused]) .input:hover,
-    .input:focus:hover {
-        border-color: var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover));
-    }
-
-    :host([focused]) .input:hover,
-    :host([focused]) .input:hover::placeholder,
-    .input:focus:hover,
-    .input:focus:hover::placeholder {
-        color: var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover));
-    }
-
-    :host([invalid]) .input:hover:not(.is-disabled),
-    :host([invalid]:hover):not(.is-disabled) .input {
-        border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover)));
-    }
-
-    :host([invalid]) .input:focus:hover,
-    :host([invalid][focused]) .input:hover,
-    :host([invalid]:focus) .input:hover {
-        border-color: var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover));
-    }
-
-    :host([disabled]) #textfield:hover .input {
-        background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled));
-        border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
-        resize: none;
-        opacity: 1;
-    }
-
-    :host([quiet][disabled]:hover) .input,
-    :host([disabled]) #textfield:hover .input,
-    :host([disabled]) #textfield:hover .input::placeholder {
-        color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
-    }
-
-    :host([quiet][disabled]:hover) .input {
-        background-color: initial;
-        border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
-    }
-
-    :host([quiet][disabled]:hover) .input::placeholder {
-        color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
-    }
-
-    :host([readonly]) #textfield:hover .input {
-        border-color: #0000;
-        outline: none;
-    }
-
-    :host([readonly]) #textfield:hover .input,
-    :host([readonly]) #textfield:hover .input::placeholder {
-        background-color: initial;
-        color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)));
-    }
-}
-
-.spectrum-Textfield--sideLabel {
-    grid-template-rows: auto auto;
-    grid-template-columns: auto auto auto;
-}
-
-.spectrum-Textfield--sideLabel:after {
-    grid-area: 1 / 2 / span 1 / span 1;
-}
-
-.spectrum-Textfield--sideLabel .spectrum-FieldLabel {
-    grid-area: 1 / 1 / span 2 / span 1;
-    margin-inline-end: var(--mod-textfield-label-spacing-inline-side-label, var(--spectrum-textfield-label-spacing-inline-side-label));
-}
-
-.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount {
-    grid-area: 1 / 3 / auto / span 1;
-    align-items: flex-start;
-    margin-block-start: var(--mod-textfield-character-count-spacing-block-side, var(--spectrum-textfield-character-count-spacing-block-side));
-    margin-inline-start: var(--mod-textfield-character-count-spacing-inline-side, var(--spectrum-textfield-character-count-spacing-inline-side));
-}
-
-.spectrum-Textfield--sideLabel .spectrum-HelpText {
-    grid-area: 2 / 2 / auto / span 1;
-}
-
-.spectrum-Textfield--sideLabel .input,
-.spectrum-Textfield--sideLabel .icon {
-    grid-area: 1 / 2 / span 1 / span 1;
-}
-
-:host([multiline]) {
-    --spectrum-textfield-input-line-height: normal;
-}
-
-:host([multiline]) .input {
-    min-inline-size: var(--mod-text-area-min-inline-size, var(--spectrum-text-area-min-inline-size));
-    min-block-size: var(--mod-text-area-min-block-size, var(--spectrum-text-area-min-block-size));
-    resize: inherit;
-}
-
-:host([multiline][grows]) .input {
-    grid-row: 2;
-}
-
-:host([multiline][grows]) .spectrum-Textfield--sideLabel .input {
-    grid-row: 1;
-}
-
-:host([multiline][quiet]) .input {
-    min-block-size: var(--mod-text-area-min-block-size-quiet, var(--spectrum-text-area-min-block-size-quiet));
-    resize: none;
-    overflow-y: hidden;
-}
-
-:host([quiet]) #textfield:after {
-    content: "";
-    pointer-events: none;
-    inline-size: 100%;
-    block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width));
-    position: absolute;
-    inset-block-end: calc((var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width))) * -1);
-    inset-inline-start: 0;
-}
-
-:host([quiet][focused]) #textfield:after {
-    background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
-}
-
-:host([quiet][invalid]) .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)));
-}
-
-:host([quiet][valid]) .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)));
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-textfield-border-color: CanvasText;
-        --highcontrast-textfield-border-color-hover: Highlight;
-        --highcontrast-textfield-border-color-focus: Highlight;
-        --highcontrast-textfield-border-color-keyboard-focus: CanvasText;
-        --highcontrast-textfield-focus-indicator-color: Highlight;
-        --highcontrast-textfield-border-color-invalid-default: Highlight;
-        --highcontrast-textfield-border-color-invalid-hover: Highlight;
-        --highcontrast-textfield-border-color-invalid-focus: Highlight;
-        --highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight;
-        --highcontrast-textfield-text-color-valid: CanvasText;
-        --highcontrast-textfield-text-color-invalid: CanvasText;
-    }
-
-    #textfield .input {
-        --highcontrast-textfield-text-color-default: CanvasText;
-        --highcontrast-textfield-text-color-hover: CanvasText;
-        --highcontrast-textfield-text-color-keyboard-focus: CanvasText;
-        --highcontrast-textfield-text-color-disabled: GrayText;
-        --highcontrast-textfield-text-color-readonly: CanvasText;
-    }
-
-    #textfield .input::placeholder {
-        --highcontrast-textfield-text-color-default: GrayText;
-        --highcontrast-textfield-text-color-hover: GrayText;
-        --highcontrast-textfield-text-color-keyboard-focus: GrayText;
-        --highcontrast-textfield-text-color-disabled: GrayText;
-        --highcontrast-textfield-text-color-readonly: CanvasText;
-    }
-}
diff --git a/packages/textfield/src/textfield-overrides.css b/packages/textfield/src/textfield-overrides.css
deleted file mode 100644
index ed1669b6c24..00000000000
--- a/packages/textfield/src/textfield-overrides.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-textfield-background-color: var(--system-textfield-background-color);
-    --spectrum-textfield-background-color-disabled: var(--system-textfield-background-color-disabled);
-    --spectrum-textfield-border-color: var(--system-textfield-border-color);
-    --spectrum-textfield-border-color-hover: var(--system-textfield-border-color-hover);
-    --spectrum-textfield-border-color-focus: var(--system-textfield-border-color-focus);
-    --spectrum-textfield-border-color-focus-hover: var(--system-textfield-border-color-focus-hover);
-    --spectrum-textfield-border-color-keyboard-focus: var(--system-textfield-border-color-keyboard-focus);
-    --spectrum-textfield-border-color-disabled: var(--system-textfield-border-color-disabled);
-    --spectrum-textfield-border-width: var(--system-textfield-border-width);
-    --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-icon-spacing-block-invalid);
-}
-
-:host([size="s"]) #textfield#textfield {
-    --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-s-icon-spacing-block-invalid);
-}
-
-:host([size="l"]) #textfield#textfield {
-    --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-l-icon-spacing-block-invalid);
-}
-
-:host([size="xl"]) #textfield#textfield {
-    --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-xl-icon-spacing-block-invalid);
-}
-
-:host([quiet]) #textfield {
-    --spectrum-textfield-border-color-disabled: var(--system-textfield-quiet-border-color-disabled);
-}
diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css
index 412aaea3f6a..7f476a8ab4b 100644
--- a/packages/textfield/src/textfield.css
+++ b/packages/textfield/src/textfield.css
@@ -1,8 +1,9 @@
 /**
- * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * 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
@@ -10,117 +11,623 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-textfield.css");
-@import url("./textfield-overrides.css");
+:host {
+    --spectrum-textfield-animation-duration: var(--spectrum-animation-duration-100);
+
+    /* default height/width/border radius */
+    --spectrum-textfield-height: var(--spectrum-component-height-100);
+    --spectrum-textfield-width: var(--spectrum-field-default-width-medium);
+    --spectrum-textfield-min-width: calc(var(--spectrum-textfield-height) * var(--spectrum-text-field-minimum-width-multiplier));
+    --spectrum-textfield-border-width: var(--spectrum-border-width-200);
+    --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-medium-size-medium);
+
+    /* default spacing */
+    --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100);
+    --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);
+    --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100);
+
+    /* default field label and help text spacing */
+    --spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component);
+    --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
+    --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-text-to-visual-100);
+    --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
+    --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100);
+
+    /* default icon spacing - valid */
+    --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-text-to-visual-100);
+    --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
+    --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-font-style: var(--spectrum-default-font-style);
+    --spectrum-textfield-font-size: var(--spectrum-font-size-100);
+    --spectrum-textfield-line-height: var(--spectrum-line-height-100);
+    --spectrum-textfield-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+    /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */
+    --spectrum-textfield-input-line-height: var(--spectrum-textfield-height);
+
+    /* character count */
+    --spectrum-textfield-character-count-color: var(--spectrum-neutral-subdued-content-color-default);
+    --spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200);
+    --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100);
+    --spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field);
+    --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-component-top-to-text-100);
+
+    /* 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(--mod-textfield-background-color, var(--spectrum-gray-25));
+    --spectrum-textfield-border-color: var(--spectrum-gray-300);
+    --spectrum-textfield-border-color-hover: var(--spectrum-gray-400);
+    --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-800);
+
+    /* Text Colors */
+    --spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus);
+    --spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
+    --spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus);
+
+    /* Read Only Text Color */
+    --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default);
+
+    /* Disabled Colors */
+    --spectrum-textfield-background-color-disabled: var(--highcontrast-textfield-background-color-disabled, var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25)));
+    --spectrum-textfield-border-color-disabled: var(--highcontrast-textfield-border-color-disabled, var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color)));
+    --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color);
+
+    /* Invalid Colors */
+    --spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default);
+    --spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
+    --spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
+    --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
+    --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus);
+    --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color);
+    --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default);
+
+    /* Valid Colors */
+    --spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default);
+    --spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color);
+
+    /* Focus Indicator Color */
+    --spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+    /* 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);
+}
+
+/********* Text field t-shirt sizes *********/
+:host([size="s"]) {
+    --spectrum-textfield-height: var(--spectrum-component-height-75);
+    --spectrum-textfield-width: var(--spectrum-field-default-width-small);
+    --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-medium-size-small);
+
+    --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75);
+    --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-75);
+    --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-75);
+
+    --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75);
+    --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75);
+
+    --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-text-to-visual-75);
+    --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small);
+    --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75);
+
+    --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-text-to-visual-75);
+    --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small);
+    --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small);
+
+    --spectrum-textfield-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-side: var(--spectrum-component-top-to-text-75);
+}
+
+:host([size="l"]) {
+    --spectrum-textfield-height: var(--spectrum-component-height-200);
+    --spectrum-textfield-width: var(--spectrum-field-default-width-large);
+    --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-medium-size-large);
+
+    --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
+    --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-200);
+    --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-200);
+
+    --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200);
+    --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200);
+
+    --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-text-to-visual-200);
+    --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large);
+    --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200);
 
+    --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-text-to-visual-200);
+    --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large);
+    --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large);
+
+    --spectrum-textfield-font-size: var(--spectrum-font-size-200);
+
+    --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200);
+    --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-component-top-to-text-200);
+}
+
+:host([size="xl"]) {
+    --spectrum-textfield-height: var(--spectrum-component-height-300);
+    --spectrum-textfield-width: var(--spectrum-field-default-width-extra-large);
+    --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+
+    --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-300);
+    --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-300);
+    --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-300);
+
+    --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300);
+    --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300);
+
+    --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-text-to-visual-300);
+    --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large);
+    --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300);
+
+    --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-text-to-visual-300);
+    --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large);
+    --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large);
+
+    --spectrum-textfield-font-size: var(--spectrum-font-size-300);
+
+    --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-300);
+    --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-component-top-to-text-300);
+}
+
+/********* TEXT FIELD and TEXT AREA Outer Wrapper *********/
 :host {
-    display: inline-flex;
-    flex-direction: column;
+    position: relative;
+    text-overflow: ellipsis;
+
+    /* Prevent input from expanding to width of Help text */
     inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
+
+    /* Grid layout for child components */
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto auto;
+
+    /*** ↓ Browser Mitigations for Text Field ↓ ***/
+    /* Edge - Show the overflow for input. */
+    overflow: visible;
+
+    /* Firefox and Safari - Remove the margin for input. */
+    margin: 0;
 }
 
-:host([multiline]) {
-    resize: both;
+/********* Child Element - Validation Icons - ⚠️ ✅ *********/
+/* specify validation class or web components will apply this to all icons */
+:host([valid]) .icon,
+:host([invalid]) .icon {
+    position: absolute;
+    pointer-events: all;
+    inset-block-start: 0;
+    margin-inline-start: auto;
+    grid-row: 2;
+    grid-column: 2;
 }
 
-:host([multiline][readonly]) {
-    resize: none;
+:host([side-label]) .icon {
+    grid-row: 1 / span 1;
+    grid-column: 2 / span 1;
 }
 
-:host([disabled]:focus-visible) {
-    outline: none;
+/****** Validation Icon - Valid ✅ ******/
+:host([valid]) .icon {
+    /* validation icon does not need to account for border width */
+    inset-block-start: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid));
+    inset-block-end: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid));
+    inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid));
+    color: var(--mod-textfield-icon-color-valid, var(--spectrum-textfield-icon-color-valid));
 }
 
-#textfield {
-    inline-size: 100%;
+/****** Validation Icon - Invalid ⚠️ ******/
+:host([invalid]) .icon {
+    block-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid));
+
+    /* validation icon does not need to account for border width */
+    inline-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid));
+    inset-block-start: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid));
+    inset-block-end: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid));
+    inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid));
+    color: var(--mod-textfield-icon-color-invalid, var(--spectrum-textfield-icon-color-invalid));
 }
 
-#textfield,
-textarea {
-    resize: inherit;
+:host([disabled]) .icon,
+:host([readonly]) .icon {
+    /* Disabled validation icons are transparent */
+    color: transparent;
 }
 
-.input {
-    min-inline-size: var(--spectrum-textfield-min-width);
+/********* Child Component - Label *********/
+sp-field-label {
+    margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block));
+    grid-row: 1;
+    grid-column: 1 / span 1;
 }
 
-:host([focused]) .input {
-    caret-color: var(--swc-test-caret-color);
-    forced-color-adjust: var(--swc-test-forced-color-adjust);
+:host([disabled]) sp-field-label {
+    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
 }
 
-:host([focused]) #textfield:hover .input,
-:host([focused]) .input:hover {
-    border-color: var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover));
+/********* Child Component - Help Text *********/
+::slotted([slot="help-text"]) {
+    margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block));
+    grid-row: 3;
+    grid-column: 1 / span 2;
 }
 
-#sizer {
-    block-size: auto;
-    overflow-wrap: break-word;
-    opacity: 0;
-    white-space: pre-line;
+:host([disabled]) ::slotted([slot="help-text"]) {
+    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
 }
 
-.icon,
-.icon-workflow {
-    pointer-events: none;
+/********* Child Element - Character Count *********/
+/* @todo: add character count to the template */
+.character-count {
+    color: var(--mod-textfield-character-count-color, var(--spectrum-textfield-character-count-color));
+    display: inline-flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    inline-size: auto;
+    margin-block-end: var(--mod-textfield-character-count-spacing-block, var(--spectrum-textfield-character-count-spacing-block));
+    margin-inline-start: var(--mod-textfield-character-count-spacing-inline, var(--spectrum-textfield-character-count-spacing-inline));
+    margin-inline-end: 0;
+    font-size: var(--mod-textfield-font-size, var(--spectrum-textfield-font-size));
+    font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family));
+    font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight));
+    font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style));
+    line-height: var(--mod-textfield-line-height, var(--spectrum-textfield-line-height));
+    grid-row: 1;
+    grid-column: 2 / span 1;
+    padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2);
 }
 
-:host([multiline]) #textfield {
-    display: inline-grid;
+:host([disabled]) .character-count {
+    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
+}
+
+.character-count:lang(ja),
+.character-count:lang(zh),
+.character-count:lang(ko) {
+    --spectrum-textfield-line-height: var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk));
+}
 
-    --spectrum-textfield-input-line-height: normal;
+/********* Child Element - Input *********/
+.input {
+    /* no mod defined to allow for maximum compatibility */
+    line-height: var(--spectrum-textfield-input-line-height);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width));
+    block-size: var(--mod-textfield-height, var(--spectrum-textfield-height));
+    padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
+    padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
+    padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
+
+    vertical-align: top; /* used to align them correctly in forms. */
+    outline: none;
+    background-color: var(--highcontrast-textfield-background-color, var(--spectrum-textfield-background-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-textfield-animation-duration, var(--spectrum-textfield-animation-duration)) ease-in-out;
+
+    font-size: var(--mod-textfield-font-size, var(--spectrum-textfield-font-size));
+    font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family));
+    font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight));
+    font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style));
+    color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)));
+    text-overflow: ellipsis;
+
+    /* place in same cell: input, focus indicator, and grows sizer */
+    grid-row: 2;
+    grid-column: 1 / span 2;
+
+    /* prevents unexpected color changes for border in high contrast mode */
+    forced-color-adjust: none;
+
+    /*** ↓ Browser Mitigations for Input ↓ ***/
+    /* Firefox and Safari - Remove the margin for input. */
+    margin: 0;
+    appearance: none;
 }
 
-:host([multiline]) textarea {
-    transition:
-        box-shadow var(--spectrum-animation-duration-100, 0.13s) ease-in-out,
-        border-color var(--spectrum-animation-duration-100, 0.13s) ease-in-out;
+input[type="number"] {
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Removes the native spin buttons in Firefox. */
+    -moz-appearance: textfield;
 }
 
-:host([multiline]:not([quiet])) #textfield:after {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Remove the native spin buttons in webkit-based browsers. */
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Removes the red border that appears in Firefox (normalize). */
+input:-moz-ui-invalid {
     box-shadow: none;
 }
 
-:host([multiline][rows]) .input {
-    block-size: auto;
-    resize: none;
+/*** Input Placeholder Text ***/
+input::placeholder {
+    /* Normalize opacity between browsers. */
+    opacity: 1;
+    font-size: var(--mod-textfield-font-size, var(--spectrum-textfield-font-size));
+    font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family));
+    font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight));
+    font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style));
+    color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)));
+    transition: color var(--mod-textfield-animation-duration, var(--spectrum-textfield-animation-duration)) ease-in-out;
 }
 
-:host([multiline][rows="1"]) .input {
-    min-block-size: auto;
+/* hover */
+:host(:hover) .input,
+.input:hover {
+    border-color: var(--highcontrast-textfield-border-color-hover, var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover)));
+    color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)));
 }
 
-/* restore specificity from the original Spectrum CSS */
+:host(:hover) .input::placeholder,
+.input:hover::placeholder {
+    color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)));
+}
 
-:host([disabled][quiet]) #textfield .input,
-:host([disabled][quiet]) #textfield:hover .input,
-:host([quiet]) .input :disabled {
-    background-color: #0000;
-    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)));
+/* mouse focus */
+:host(.is-focused) .input,
+.input:focus {
+    border-color: var(--highcontrast-textfield-border-color-focus, var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus)));
+    color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus)));
 }
 
-/* :not selector not working with regex for process-spectrum so had to override here */
-:host([disabled]) #textfield .icon.icon-search,
-:host([readonly]) #textfield .icon.icon-search {
-    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
+:host(.is-focused) .input::placeholder,
+.input:focus::placeholder {
+    color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus)));
 }
 
-:host([focused]) #textfield .icon.icon-search {
-    --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus, var(--spectrum-search-color-focus)));
+:host(.is-focused) .input:hover,
+.input:focus:hover {
+    /* focus hover */
+    border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover)));
+    color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)));
 }
 
-:host([multiline][grows]:not([quiet])) #textfield:after {
-    grid-area: unset;
-    min-block-size: calc(var(--mod-text-area-min-block-size, var(--spectrum-text-area-min-block-size)) + var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) * 2);
+:host(.is-focused) .input:hover::placeholder,
+.input:focus:hover::placeholder {
+    color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)));
 }
 
-:host([multiline][grows]:not([rows])) .input:not(#sizer) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
+/* focus hover */
+:host(.is-focused) .input:hover,
+:host(.is-keyboardFocused) .input:hover,
+.input:focus:hover {
+    border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover)));
+    color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)));
+}
+
+:host(.is-focused) .input:hover::placeholder,
+:host(.is-keyboardFocused) .input:hover::placeholder {
+    color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)));
+}
+
+/* keyboard focus */
+:host(.is-keyboardFocused) .input {
+    border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus)));
+    color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));
+
+    /* focus indicator is focused state */
+    outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) solid;
+    outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
+    outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap));
+}
+
+:host(.is-keyboardFocused) .input::placeholder {
+    color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));
+}
+
+/*** Input Valid ✅ ***/
+:host([valid]) .input {
+    /* creates spacing between text end and icon start, sum of icon start spacing + icon size + icon end spacing - border */
+    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)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
+    color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid)));
+}
+
+/*** Input Invalid ⚠️ ***/
+:host([invalid]) .input {
+    /* creates spacing between text end and icon start, sum of icon start spacing + icon size + icon end spacing - border */
+    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)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
+    color: var(--highcontrast-textfield-text-color-invalid, var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid)));
+    border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)));
+}
+
+/* Invalid hover */
+:host([invalid]:hover:not([disabled], [readonly])) .input,
+:host([invalid]:not([disabled], [readonly])) .input:hover {
+    border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover)));
+}
+
+/* Invalid mouse focus */
+:host([invalid].is-focused) .input,
+:host([invalid]:focus) .input,
+:host([invalid]) .input:focus {
+    border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus)));
+}
+
+:host([invalid].is-focused) .input:hover,
+:host([invalid]:focus) .input:hover,
+:host([invalid]) .input:focus:hover {
+    /* focus hover */
+    border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover)));
+}
+
+:host([invalid]:focus:hover) .input,
+:host([invalid].is-focused:hover) .input,
+:host([invalid].is-keyboardFocused:hover) .input {
+    border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover)));
+}
+
+/* invalid keyboard focus */
+:host([invalid].is-keyboardFocused) .input {
+    border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus)));
+}
+
+/****** Input Disabled 🚫 ******/
+:host([disabled]) .input,
+:host([disabled]:hover) .input,
+.input:disabled {
+    background-color: var(--spectrum-textfield-background-color-disabled);
+    border-color: 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 */
     resize: none;
-    overflow: hidden;
+
+    /* The opacity must be set to 1 */
+    opacity: 1;
+}
+
+:host([disabled]) .input::placeholder,
+:host([disabled]:hover) .input::placeholder,
+.input:disabled::placeholder {
+    color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
+}
+
+/****** Input ReadOnly ******/
+:host([readonly]) .input,
+:host([readonly]:hover) .input,
+.input:read-only {
+    background-color: transparent;
+    border-color: var(--highcontrast-textfield-border-color-readonly, transparent);
+    color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)));
+    outline: none;
+
+    :host([readonly]) .input::placeholder,
+    :host([readonly]:hover) .input::placeholder,
+    .input:read-only::placeholder {
+        color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)));
+        background-color: transparent;
+    }
+
+    :host([readonly][disabled]) .input::placeholder,
+    :host([readonly][disabled]:hover) .input::placeholder,
+    .input:read-only:disabled::placeholder {
+        color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
+    }
+
+    /****** ReadOnly & Disabled ******/
+    :host([readonly][disabled]) .input {
+        border-color: var(--highcontrast-textfield-border-color-disabled, transparent);
+        color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
+    }
+
+    /*** Layout Variant - Side Label ***/
+    :host([side-label]) {
+        grid-template-columns: auto auto auto;
+        grid-template-rows: auto auto;
+    }
+
+    :host([side-label]) sp-field-label {
+        margin-inline-end: var(--mod-textfield-label-spacing-inline-side-label, var(--spectrum-textfield-label-spacing-inline-side-label));
+        grid-row: 1 / span 2;
+        grid-column: 1 / span 1;
+    }
+
+    :host([side-label]) .character-count {
+        align-items: flex-start;
+        margin-block-start: var(--mod-textfield-character-count-spacing-block-side, var(--spectrum-textfield-character-count-spacing-block-side));
+        margin-inline-start: var(--mod-textfield-character-count-spacing-inline-side, var(--spectrum-textfield-character-count-spacing-inline-side));
+        grid-row: 1;
+        grid-column: 3 / span 1;
+    }
+
+    :host([side-label]) ::slotted([slot="help-text"]) {
+        grid-row: 2;
+        grid-column: 2 / span 1;
+    }
+
+    :host([side-label]) .icon {
+        grid-row: 1 / span 1;
+        grid-column: 2 / span 1;
+    }
+
+    :host([side-label]) .input {
+        grid-row: 1 / span 1;
+        grid-column: 2 / span 1;
+    }
+
+    /*** Text Area ***/
+    :host([multiline]) .input {
+        line-height: var(--mod-textfield-line-height, var(--spectrum-textfield-line-height));
+        min-inline-size: var(--mod-text-area-min-inline-size, var(--spectrum-text-area-min-inline-size));
+        min-block-size: var(--mod-text-area-min-block-size, var(--spectrum-text-area-min-block-size));
+        resize: inherit;
+    }
+
+    :host([multiline]) .input:lang(ja),
+    :host([multiline]) .input:lang(zh),
+    :host([multiline]) .input:lang(ko) {
+        --spectrum-textfield-line-height: var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk));
+    }
+
+    :host([multiline][grows]) .input {
+        grid-row: 2 / auto;
+    }
+
+    :host([multiline][grows][side-label]) .input {
+        grid-row: 1 / auto;
+    }
+
+    /********* WHCM *********/
+    @media (forced-colors: active) {
+        :host {
+            --highcontrast-textfield-border-color: CanvasText;
+            --highcontrast-textfield-border-color-hover: Highlight;
+            --highcontrast-textfield-border-color-focus: Highlight;
+            --highcontrast-textfield-border-color-keyboard-focus: Highlight;
+            --highcontrast-textfield-border-color-focus-hover: Highlight;
+            --highcontrast-textfield-focus-indicator-color: Highlight;
+            --highcontrast-textfield-background-color: Canvas;
+
+            --highcontrast-textfield-background-color-disabled: Canvas;
+            --highcontrast-textfield-border-color-disabled: GrayText;
+
+            --highcontrast-textfield-border-color-readonly: CanvasText;
+
+            --highcontrast-textfield-border-color-invalid-default: Highlight;
+            --highcontrast-textfield-border-color-invalid-hover: Highlight;
+            --highcontrast-textfield-border-color-invalid-focus: Highlight;
+            --highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight;
+            --highcontrast-textfield-border-color-invalid-focus-hover: Highlight;
+        }
+
+        :host,
+        input::placeholder {
+            --highcontrast-textfield-text-color-valid: CanvasText;
+            --highcontrast-textfield-text-color-invalid: CanvasText;
+            --highcontrast-textfield-text-color-default: CanvasText;
+            --highcontrast-textfield-text-color-hover: CanvasText;
+            --highcontrast-textfield-text-color-focus: CanvasText;
+            --highcontrast-textfield-text-color-focus-hover: CanvasText;
+            --highcontrast-textfield-text-color-keyboard-focus: CanvasText;
+            --highcontrast-textfield-text-color-disabled: GrayText;
+            --highcontrast-textfield-text-color-readonly: CanvasText;
+        }
+    }
 }
diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json
index 38e06e5c0e4..df416ad188e 100644
--- a/packages/thumbnail/package.json
+++ b/packages/thumbnail/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/thumbnail-overrides.css.js": "./src/thumbnail-overrides.css.js",
         "./src/thumbnail.css.js": "./src/thumbnail.css.js",
         "./sp-thumbnail.js": {
             "development": "./sp-thumbnail.dev.js",
diff --git a/packages/thumbnail/src/spectrum-thumbnail.css b/packages/thumbnail/src/spectrum-thumbnail.css
deleted file mode 100644
index 68c987457ef..00000000000
--- a/packages/thumbnail/src/spectrum-thumbnail.css
+++ /dev/null
@@ -1,202 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host,
-:host([size="500"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500);
-}
-
-:host([size="50"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50);
-}
-
-:host([size="75"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75);
-}
-
-:host([size="100"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100);
-}
-
-:host([size="200"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200);
-}
-
-:host([size="300"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300);
-}
-
-:host([size="400"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400);
-}
-
-:host([size="600"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600);
-}
-
-:host([size="700"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700);
-}
-
-:host([size="800"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800);
-}
-
-:host([size="900"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900);
-}
-
-:host([size="1000"]) {
-    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000);
-}
-
-:host {
-    --spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size));
-    --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);
-    inline-size: var(--spectrum-thumbnail-size);
-    block-size: var(--spectrum-thumbnail-size);
-    z-index: 0;
-    margin: 0;
-    padding: 0;
-    display: block;
-    position: relative;
-    overflow: hidden;
-}
-
-:host,
-:host:before {
-    border-radius: var(--spectrum-thumbnail-border-radius-default);
-}
-
-:host:before {
-    content: "";
-    z-index: 2;
-    inline-size: 100%;
-    block-size: 100%;
-    box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color);
-    position: absolute;
-}
-
-:host([disabled]) {
-    opacity: var(--mod-thumbnail-color-opacity-disabled, var(--spectrum-thumbnail-color-opacity-disabled));
-}
-
-:host([focused]) {
-    overflow: visible;
-}
-
-:host([focused]):after {
-    content: "";
-    border-style: solid;
-    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-block-start: 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-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);
-}
-
-:host([focused]) .image-wrapper {
-    border-radius: var(--spectrum-thumbnail-border-radius-default);
-    overflow: hidden;
-}
-
-:host([layer]) {
-    border-style: solid;
-    border-width: var(--spectrum-thumbnail-layer-border-width-outer);
-    border-color: var(--spectrum-thumbnail-layer-border-color-outer);
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-:host([layer]):before {
-    content: none;
-}
-
-:host([layer][selected]) {
-    outline-style: solid;
-    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));
-}
-
-.layer-inner {
-    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(--spectrum-thumbnail-layer-border-color-inner);
-    outline-width: calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-.image-wrapper {
-    inline-size: 100%;
-    block-size: 100%;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-::slotted(*) {
-    max-inline-size: 100%;
-    max-block-size: 100%;
-    z-index: 1;
-    position: relative;
-}
-
-:host([cover]) ::slotted(*) {
-    block-size: 100%;
-    inline-size: 100%;
-    object-fit: cover;
-    object-position: center;
-}
-
-.background {
-    z-index: 0;
-    block-size: 100%;
-    inline-size: 100%;
-    border-radius: var(--spectrum-thumbnail-border-radius-default);
-    background-position: 50%;
-    background-size: cover;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0;
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-thumbnail-border-color-selected: Highlight;
-        --highcontrast-thumbnail-focus-indicator-color: Highlight;
-        --highcontrast-thumbnail-border-color: CanvasText;
-        --highcontrast-thumbnail-layer-border-color-inner: Canvas;
-        --highcontrast-thumbnail-layer-border-color-outer: CanvasText;
-        forced-color-adjust: none;
-    }
-}
diff --git a/packages/thumbnail/src/thumbnail-overrides.css b/packages/thumbnail/src/thumbnail-overrides.css
deleted file mode 100644
index 361f64bd366..00000000000
--- a/packages/thumbnail/src/thumbnail-overrides.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-thumbnail-border-radius: var(--system-thumbnail-border-radius);
-}
diff --git a/packages/thumbnail/src/thumbnail.css b/packages/thumbnail/src/thumbnail.css
index d2a3ca11c8a..fe6ee829f71 100644
--- a/packages/thumbnail/src/thumbnail.css
+++ b/packages/thumbnail/src/thumbnail.css
@@ -10,9 +10,202 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-thumbnail.css");
-@import url("./thumbnail-overrides.css");
+:host {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
 
-::slotted(:not(img)) {
-    display: none;
+	--spectrum-thumbnail-border-radius: var(--spectrum-thumbnail-corner-radius);
+	--spectrum-thumbnail-border-width: var(--spectrum-border-width-100);
+	--spectrum-thumbnail-border-color: color-mix(in sRGB, var(--spectrum-gray-800) var(--spectrum-thumbnail-border-opacity), transparent);
+	--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);
+
+	--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);
+
+	/* @passthrough -- custom sizing for opacity checkerboard */
+	--mod-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size);
+}
+
+:host([size="50"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50);
+}
+
+:host([size="75"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75);
+}
+
+:host([size="100"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100);
+}
+
+:host([size="200"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200);
+}
+
+:host([size="300"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300);
+}
+
+:host([size="400"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400);
+}
+
+:host([size="600"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600);
+}
+
+:host([size="700"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700);
+}
+
+:host([size="800"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800);
+}
+
+:host([size="900"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900);
+}
+
+:host([size="1000"]) {
+	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000);
+}
+
+/* Base variables */
+:host {
+	--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));
+	border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+	overflow: hidden;
+	z-index: 0;
+}
+
+:host:before {
+    content: "";
+    z-index: 2;
+    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)));
+}
+
+:host([disabled]) {
+	opacity: var(--mod-thumbnail-color-opacity-disabled, var(--spectrum-thumbnail-color-opacity-disabled));
+}
+
+:host([focused]) {
+	overflow: visible;
+
+:host([focused]):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));
+    position: absolute;
+    inset: 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);
+}
+
+:host([focused]) .image-wrapper {
+	overflow: hidden;
+	border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+}
+
+:host([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)));
+	box-sizing: border-box;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+:host([layer]):before {
+	content: none;
+}
+
+:host([selected][layer]) {
+		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)));
+	}
+}
+
+.layer-inner {
+	display: flex;
+	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);
+	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)));
+}
+
+.image-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+::slotted(*) {
+	position: relative;
+	max-block-size: 100%;
+	max-inline-size: 100%;
+	z-index: 1;
+}
+
+:host([cover]) ::slotted(*) {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+:host([background]) {
+	position: absolute;
+	z-index: 0;
+	inset-inline-start: 0;
+	inset-block-start: 0;
+	inset-inline-end: 0;
+	inset-block-end: 0;
+	block-size: 100%;
+	inline-size: 100%;
+	background-size: cover;
+	background-position: center center;
+	border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+}
+
+/* Windows High Contrast Mode */
+@media (forced-colors: active) {
+	:host {
+		--highcontrast-thumbnail-border-color-selected: Highlight;
+		--highcontrast-thumbnail-focus-indicator-color: Highlight;
+		--highcontrast-thumbnail-border-color: CanvasText;
+		--highcontrast-thumbnail-layer-border-color-inner: Canvas;
+		--highcontrast-thumbnail-layer-border-color-outer: CanvasText;
+
+		/* Allow checkerboard pattern to be visible. */
+		forced-color-adjust: none;
+	}
 }
diff --git a/packages/toast/package.json b/packages/toast/package.json
index fceb2a79b04..608f365c225 100644
--- a/packages/toast/package.json
+++ b/packages/toast/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/toast-overrides.css.js": "./src/toast-overrides.css.js",
         "./src/toast.css.js": "./src/toast.css.js",
         "./sp-toast.js": {
             "development": "./sp-toast.dev.js",
diff --git a/packages/toast/src/Toast.ts b/packages/toast/src/Toast.ts
index 230600aeb79..9312f5696f6 100644
--- a/packages/toast/src/Toast.ts
+++ b/packages/toast/src/Toast.ts
@@ -19,8 +19,8 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/button/sp-close-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-circle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
 
@@ -153,25 +153,25 @@ export class Toast extends FocusVisiblePolyfillMixin(SpectrumElement) {
         switch (variant) {
             case 'info':
                 return html`
-                    <sp-icon-info
+                    <sp-icon-info-circle
                         label=${iconLabel || 'Information'}
                         class="type"
-                    ></sp-icon-info>
+                    ></sp-icon-info-circle>
                 `;
             case 'negative':
             case 'error': // deprecated
                 return html`
-                    <sp-icon-alert
+                    <sp-icon-alert-triangle
                         label=${iconLabel || 'Error'}
                         class="type"
-                    ></sp-icon-alert>
+                    ></sp-icon-alert-triangle>
                 `;
             case 'warning': // deprecated
                 return html`
-                    <sp-icon-alert
+                    <sp-icon-alert-triangle
                         label=${iconLabel || 'Warning'}
                         class="type"
-                    ></sp-icon-alert>
+                    ></sp-icon-alert-triangle>
                 `;
             case 'positive':
                 return html`
diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css
deleted file mode 100644
index b93b95d3bf9..00000000000
--- a/packages/toast/src/spectrum-toast.css
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
-    --spectrum-toast-font-size: var(--spectrum-font-size-100);
-    --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100);
-    --spectrum-toast-block-size: var(--spectrum-toast-height);
-    --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width);
-    --spectrum-toast-border-width: var(--spectrum-border-width-100);
-    --spectrum-toast-line-height: var(--spectrum-line-height-100);
-    --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100);
-    --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300);
-    --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300);
-    --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100);
-    --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
-    --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
-    --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300);
-    --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100);
-    --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100);
-    --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100);
-    --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
-    --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
-    --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);
-}
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-toast-border-color: ButtonText;
-        border: var(--mod-toast-border-width, var(--spectrum-toast-border-width)) solid var(--highcontrast-toast-border-color, transparent);
-    }
-}
-
-:host {
-    box-sizing: border-box;
-    min-block-size: var(--mod-toast-block-size, var(--spectrum-toast-block-size));
-    max-inline-size: var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size));
-    border-radius: var(--mod-toast-corner-radius, var(--spectrum-toast-corner-radius));
-    font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size));
-    font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight));
-    -webkit-font-smoothing: antialiased;
-    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;
-    flex-direction: row;
-    align-items: stretch;
-    padding-inline-start: var(--mod-toast-spacing-start-edge-to-text-and-icon, var(--spectrum-toast-spacing-start-edge-to-text-and-icon));
-    display: inline-flex;
-}
-
-:host([variant="negative"]) {
-    background-color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default));
-}
-
-:host([variant="negative"]),
-:host([variant="negative"]) .closeButton:focus-visible:not(:active) {
-    color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default));
-}
-
-:host([variant="info"]) {
-    background-color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
-}
-
-:host([variant="info"]),
-:host([variant="info"]) .closeButton:focus-visible:not(:active) {
-    color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
-}
-
-:host([variant="positive"]) {
-    background-color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
-}
-
-:host([variant="positive"]),
-:host([variant="positive"]) .closeButton:focus-visible:not(:active) {
-    color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
-}
-
-.type {
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin-block-start: var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon));
-    margin-inline-start: 0;
-    margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text));
-}
-
-.content,
-.type {
-    color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
-}
-
-.content {
-    box-sizing: border-box;
-    line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height));
-    text-align: start;
-    flex: auto;
-    padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)));
-    padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)));
-    padding-inline-start: 0;
-    padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
-    display: inline-block;
-}
-
-.content:lang(ja),
-.content:lang(ko),
-.content:lang(zh) {
-    line-height: var(--mod-toast-line-height-cjk, var(--spectrum-toast-line-height-cjk));
-}
-
-.buttons {
-    border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color));
-    flex: none;
-    align-items: flex-start;
-    margin-block-start: var(--mod-toast-spacing-top-edge-to-divider, var(--spectrum-toast-spacing-top-edge-to-divider));
-    margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider));
-    padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
-    display: flex;
-}
-
-.buttons .spectrum-CloseButton {
-    align-self: flex-start;
-}
-
-.body {
-    flex-wrap: wrap;
-    flex: auto;
-    align-self: center;
-    align-items: center;
-    padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start));
-    padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end));
-    display: flex;
-}
-
-.body ::slotted([slot="action"]) {
-    margin-inline-start: auto;
-    margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
-}
-
-.body ::slotted([slot="action"]:dir(rtl)),
-:host([dir="rtl"]) .body ::slotted([slot="action"]) {
-    margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
-}
-
-.body + .buttons {
-    border-inline-start-style: solid;
-    border-inline-start-width: 1px;
-    padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
-}
diff --git a/packages/toast/src/toast-overrides.css b/packages/toast/src/toast-overrides.css
deleted file mode 100644
index 9977ab1b8a6..00000000000
--- a/packages/toast/src/toast-overrides.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --spectrum-toast-background-color-default: var(--system-toast-background-color-default);
-    --spectrum-toast-divider-color: var(--system-toast-divider-color);
-}
diff --git a/packages/toast/src/toast.css b/packages/toast/src/toast.css
index a0e0b352b18..b71903b8f7c 100644
--- a/packages/toast/src/toast.css
+++ b/packages/toast/src/toast.css
@@ -10,13 +10,51 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-toast.css");
-@import url("./toast-overrides.css");
-
+/* Base variables */
 :host {
+    --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+    --spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
+    --spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-toast-font-size: var(--spectrum-font-size-100);
+    --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-toast-block-size: var(--spectrum-toast-height);
+    --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width);
+    --spectrum-toast-border-width: var(--spectrum-border-width-100);
+    --spectrum-toast-line-height: var(--spectrum-line-height-100);
+    --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
+    --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100);
+    --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300);
+    --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300);
+    --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100);
+    --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
+    --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
+    --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300);
+    --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100);
+    --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100);
+    --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100);
+    --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
+    --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
+    --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-overlay-animation-distance: var(--spectrum-spacing-100);
     --spectrum-overlay-animation-duration: var(--spectrum-animation-duration-100);
 
+    box-sizing: border-box;
+    min-block-size: var(--mod-toast-block-size, var(--spectrum-toast-block-size));
+    max-inline-size: var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size));
+    border-radius: var(--mod-toast-corner-radius, var(--spectrum-toast-corner-radius));
+    font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size));
+    font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight));
+    -webkit-font-smoothing: antialiased;
+    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;
+    flex-direction: row;
+    align-items: stretch;
+    padding-inline-start: var(--mod-toast-spacing-start-edge-to-text-and-icon, var(--spectrum-toast-spacing-start-edge-to-text-and-icon));
+    display: inline-flex;
     opacity: 0;
     pointer-events: none;
     transition:
@@ -26,6 +64,104 @@
     visibility: hidden;
 }
 
+:host([variant="negative"]) {
+    background-color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default));
+}
+
+:host([variant="negative"]),
+:host([variant="negative"]) .closeButton:focus-visible:not(:active) {
+    color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default));
+}
+
+:host([variant="info"]) {
+    background-color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
+}
+
+:host([variant="info"]),
+:host([variant="info"]) .closeButton:focus-visible:not(:active) {
+    color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
+}
+
+:host([variant="positive"]) {
+    background-color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
+}
+
+:host([variant="positive"]),
+:host([variant="positive"]) .closeButton:focus-visible:not(:active) {
+    color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
+}
+
+.type {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-block-start: var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon));
+    margin-inline-start: 0;
+    margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text));
+}
+
+.content,
+.type {
+    color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
+}
+
+.content {
+    box-sizing: border-box;
+    line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height));
+    text-align: start;
+    flex: auto;
+    padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)));
+    padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)));
+    padding-inline-start: 0;
+    padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
+    display: inline-block;
+}
+
+:host(:lang(ja)) .content,
+:host(:lang(ko)) .content,
+:host(:lang(zh)) .content {
+    line-height: var(--mod-toast-line-height-cjk, var(--spectrum-toast-line-height-cjk));
+}
+
+.buttons {
+    border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color));
+    flex: none;
+    align-items: flex-start;
+    margin-block-start: var(--mod-toast-spacing-top-edge-to-divider, var(--spectrum-toast-spacing-top-edge-to-divider));
+    margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider));
+    padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
+    display: flex;
+}
+
+.buttons .closeButton {
+    align-self: flex-start;
+}
+
+.body {
+    flex-wrap: wrap;
+    flex: auto;
+    align-self: center;
+    align-items: center;
+    padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start));
+    padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end));
+    display: flex;
+}
+
+.body ::slotted([slot="action"]) {
+    margin-inline-start: auto;
+    margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
+}
+
+.body ::slotted([slot="action"]:dir(rtl)),
+:host([dir="rtl"]) .body ::slotted([slot="action"]) {
+    margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
+}
+
+.body + .buttons {
+    border-inline-start-style: solid;
+    border-inline-start-width: 1px;
+    padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
+}
+
 :host([open]) {
     opacity: 1;
     pointer-events: auto;
diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
index cdc35a4401f..4029ff63878 100644
--- a/packages/tooltip/package.json
+++ b/packages/tooltip/package.json
@@ -37,7 +37,6 @@
             "development": "./src/tooltip-directive.dev.js",
             "default": "./src/tooltip-directive.js"
         },
-        "./src/tooltip-overrides.css.js": "./src/tooltip-overrides.css.js",
         "./src/tooltip.css.js": "./src/tooltip.css.js",
         "./sp-tooltip.js": {
             "development": "./sp-tooltip.dev.js",
diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css
deleted file mode 100644
index 1bc7074c590..00000000000
--- a/packages/tooltip/src/spectrum-tooltip.css
+++ /dev/null
@@ -1,424 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-#tooltip {
-    pointer-events: none;
-    visibility: hidden;
-    opacity: 0;
-    transition:
-        transform 0.13s ease-in-out,
-        opacity 0.13s ease-in-out,
-        visibility 0s linear 0.13s;
-    transition:
-        transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
-        opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
-        visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
-}
-
-:host([open]) #tooltip {
-    pointer-events: auto;
-    visibility: visible;
-    opacity: 1;
-    transition-delay: 0s;
-    transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s));
-}
-
-#tooltip {
-    --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
-    --spectrum-tooltip-margin: 0px;
-    --spectrum-tooltip-height: var(--spectrum-component-height-75);
-    --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
-    --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100);
-    --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
-    --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
-    --spectrum-tooltip-font-size: var(--spectrum-font-size-75);
-    --spectrum-tooltip-line-height: var(--spectrum-line-height-100);
-    --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
-    --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight);
-    --spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
-    --spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75);
-    --spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75);
-    --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75);
-    --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
-    --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
-    --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
-    --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default);
-    --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);
-    --spectrum-tooltip-content-color: var(--spectrum-white);
-    --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
-    --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
-    --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size);
-    --spectrum-tooltip-tip-height-percentage: 50%;
-    --spectrum-tooltip-tip-antialiasing-inset: 0.5px;
-    --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
-    --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral);
-}
-
-@media (forced-colors: active) {
-    #tooltip {
-        border: 1px solid #0000;
-    }
-
-    #tip {
-        --highcontrast-tooltip-background-color-default: CanvasText;
-        --highcontrast-tooltip-background-color-informative: CanvasText;
-        --highcontrast-tooltip-background-color-positive: CanvasText;
-        --highcontrast-tooltip-background-color-negative: CanvasText;
-        forced-color-adjust: none;
-    }
-}
-
-#tooltip {
-    box-sizing: border-box;
-    vertical-align: top;
-    inline-size: auto;
-    padding-inline: var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline));
-    border-radius: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius));
-    block-size: auto;
-    min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height));
-    max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size));
-    background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)));
-    color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color));
-    font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size));
-    font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight));
-    line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height));
-    overflow-wrap: break-word;
-    -webkit-font-smoothing: antialiased;
-    cursor: default;
-    -webkit-user-select: none;
-    user-select: none;
-    flex-direction: row;
-    align-items: center;
-    display: inline-flex;
-    position: relative;
-}
-
-:host(:lang(ja)) #tooltip,
-:host(:lang(ko)) #tooltip,
-:host(:lang(zh)) #tooltip {
-    line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height));
-}
-
-#tooltip p {
-    margin: 0;
-}
-
-:host([variant="info"]) #tooltip {
-    background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
-}
-
-:host([variant="positive"]) #tooltip {
-    background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
-}
-
-:host([variant="negative"]) #tooltip {
-    background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
-}
-
-#tip {
-    block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));
-    inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));
-    inset-block-start: 100%;
-    background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)));
-    clip-path: polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-:host([variant="info"]) #tooltip #tip {
-    background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
-}
-
-:host([variant="positive"]) #tooltip #tip {
-    background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
-}
-
-:host([variant="negative"]) #tooltip #tip {
-    background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
-}
-
-:host([placement*="top"]) #tooltip #tip,
-.spectrum-Tooltip--top-end #tip,
-.spectrum-Tooltip--top-left #tip,
-.spectrum-Tooltip--top-right #tip,
-.spectrum-Tooltip--top-start #tip {
-    inset-block-start: 100%;
-}
-
-:host([placement*="bottom"]) #tooltip #tip,
-.spectrum-Tooltip--bottom-end #tip,
-.spectrum-Tooltip--bottom-left #tip,
-.spectrum-Tooltip--bottom-right #tip,
-.spectrum-Tooltip--bottom-start #tip {
-    clip-path: polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))), 0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));
-    inset-block: auto 100%;
-}
-
-.spectrum-Tooltip--bottom-end #tip,
-.spectrum-Tooltip--bottom-left #tip,
-.spectrum-Tooltip--bottom-right #tip,
-.spectrum-Tooltip--bottom-start #tip,
-.spectrum-Tooltip--top-end #tip,
-.spectrum-Tooltip--top-left #tip,
-.spectrum-Tooltip--top-right #tip,
-.spectrum-Tooltip--top-start #tip {
-    transform: none;
-}
-
-.spectrum-Tooltip--bottom-left #tip,
-.spectrum-Tooltip--top-left #tip {
-    inset-inline-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
-}
-
-.spectrum-Tooltip--bottom-right #tip,
-.spectrum-Tooltip--top-right #tip {
-    inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
-}
-
-.spectrum-Tooltip--bottom-start #tip,
-.spectrum-Tooltip--top-start #tip {
-    inset-inline: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)) auto;
-}
-
-.spectrum-Tooltip--bottom-start #tip:dir(rtl),
-.spectrum-Tooltip--top-start #tip:dir(rtl),
-:host([dir="rtl"]) .spectrum-Tooltip--bottom-start #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--top-start #tip {
-    right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
-    left: auto;
-}
-
-.spectrum-Tooltip--bottom-end #tip,
-.spectrum-Tooltip--top-end #tip {
-    inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
-}
-
-.spectrum-Tooltip--bottom-end #tip:dir(rtl),
-.spectrum-Tooltip--top-end #tip:dir(rtl),
-:host([dir="rtl"]) .spectrum-Tooltip--bottom-end #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--top-end #tip {
-    left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
-    right: auto;
-}
-
-.spectrum-Tooltip--end #tip,
-.spectrum-Tooltip--end-bottom #tip,
-.spectrum-Tooltip--end-top #tip,
-:host([placement*="left"]) #tooltip #tip,
-.spectrum-Tooltip--left-bottom #tip,
-.spectrum-Tooltip--left-top #tip,
-:host([placement*="right"]) #tooltip #tip,
-.spectrum-Tooltip--right-bottom #tip,
-.spectrum-Tooltip--right-top #tip,
-.spectrum-Tooltip--start #tip,
-.spectrum-Tooltip--start-bottom #tip,
-.spectrum-Tooltip--start-top #tip {
-    inset-block-start: 50%;
-    transform: translateY(-50%);
-}
-
-.spectrum-Tooltip--end-bottom #tip,
-.spectrum-Tooltip--end-top #tip,
-.spectrum-Tooltip--left-bottom #tip,
-.spectrum-Tooltip--left-top #tip,
-.spectrum-Tooltip--right-bottom #tip,
-.spectrum-Tooltip--right-top #tip,
-.spectrum-Tooltip--start-bottom #tip,
-.spectrum-Tooltip--start-top #tip {
-    inset-block-start: auto;
-    transform: none;
-}
-
-.spectrum-Tooltip--end #tip,
-.spectrum-Tooltip--end-bottom #tip,
-.spectrum-Tooltip--end-top #tip,
-:host([placement*="right"]) #tooltip #tip,
-.spectrum-Tooltip--right-bottom #tip,
-.spectrum-Tooltip--right-top #tip {
-    clip-path: polygon(calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
-    inset-inline: auto 100%;
-}
-
-:host([placement*="left"]) #tooltip #tip,
-.spectrum-Tooltip--left-bottom #tip,
-.spectrum-Tooltip--left-top #tip,
-.spectrum-Tooltip--start #tip,
-.spectrum-Tooltip--start-bottom #tip,
-.spectrum-Tooltip--start-top #tip {
-    clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
-    inset-inline-start: 100%;
-}
-
-.spectrum-Tooltip--end-top #tip,
-.spectrum-Tooltip--left-top #tip,
-.spectrum-Tooltip--right-top #tip,
-.spectrum-Tooltip--start-top #tip {
-    inset-block-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
-}
-
-.spectrum-Tooltip--end-bottom #tip,
-.spectrum-Tooltip--left-bottom #tip,
-.spectrum-Tooltip--right-bottom #tip,
-.spectrum-Tooltip--start-bottom #tip {
-    inset-block-end: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
-}
-
-.spectrum-Tooltip--end #tip:dir(rtl),
-.spectrum-Tooltip--end-bottom #tip:dir(rtl),
-.spectrum-Tooltip--end-top #tip:dir(rtl),
-:host([placement*="left"]) #tooltip #tip:dir(rtl),
-.spectrum-Tooltip--left-bottom #tip:dir(rtl),
-.spectrum-Tooltip--left-top #tip:dir(rtl),
-:host([dir="rtl"]) .spectrum-Tooltip--end #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--end-bottom #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--end-top #tip,
-:host([dir="rtl"][placement*="left"]) #tooltip #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--left-bottom #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--left-top #tip {
-    clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
-    left: 100%;
-    right: auto;
-}
-
-:host([placement*="right"]) #tooltip #tip:dir(rtl),
-.spectrum-Tooltip--right-bottom #tip:dir(rtl),
-.spectrum-Tooltip--right-top #tip:dir(rtl),
-.spectrum-Tooltip--start #tip:dir(rtl),
-.spectrum-Tooltip--start-bottom #tip:dir(rtl),
-.spectrum-Tooltip--start-top #tip:dir(rtl),
-:host([dir="rtl"][placement*="right"]) #tooltip #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--right-bottom #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--right-top #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--start #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--start-bottom #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--start-top #tip {
-    clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
-    left: auto;
-    right: 100%;
-}
-
-::slotted([slot="icon"]) {
-    inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width));
-    block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height));
-    flex-shrink: 0;
-    align-self: flex-start;
-    margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start));
-    margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)));
-    margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end));
-}
-
-#label {
-    line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height));
-    margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start));
-    margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end));
-}
-
-#tooltip,
-:host([placement*="top"]) #tooltip,
-.spectrum-Tooltip--top-end,
-.spectrum-Tooltip--top-left,
-.spectrum-Tooltip--top-right,
-.spectrum-Tooltip--top-start {
-    margin-block-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
-}
-
-:host([open]) .spectrum-Tooltip--top-end,
-:host([open]) .spectrum-Tooltip--top-left,
-:host([open]) .spectrum-Tooltip--top-right,
-:host([open]) .spectrum-Tooltip--top-start,
-:host([placement*="top"][open]) #tooltip,
-:host([open]) #tooltip {
-    transform: translateY(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
-}
-
-:host([placement*="bottom"]) #tooltip,
-.spectrum-Tooltip--bottom-end,
-.spectrum-Tooltip--bottom-left,
-.spectrum-Tooltip--bottom-right,
-.spectrum-Tooltip--bottom-start {
-    margin-block-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
-}
-
-:host([open]) .spectrum-Tooltip--bottom-end,
-:host([open]) .spectrum-Tooltip--bottom-left,
-:host([open]) .spectrum-Tooltip--bottom-right,
-:host([open]) .spectrum-Tooltip--bottom-start,
-:host([placement*="bottom"][open]) #tooltip {
-    transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
-}
-
-:host([placement*="right"]) #tooltip,
-.spectrum-Tooltip--right-bottom,
-.spectrum-Tooltip--right-top {
-    margin-left: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
-}
-
-:host([open]) .spectrum-Tooltip--right-bottom,
-:host([open]) .spectrum-Tooltip--right-top,
-:host([placement*="right"][open]) #tooltip {
-    transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
-}
-
-:host([placement*="left"]) #tooltip,
-.spectrum-Tooltip--left-bottom,
-.spectrum-Tooltip--left-top {
-    margin-right: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
-}
-
-:host([open]) .spectrum-Tooltip--left-bottom,
-:host([open]) .spectrum-Tooltip--left-top,
-:host([placement*="left"][open]) #tooltip {
-    transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
-}
-
-.spectrum-Tooltip--start,
-.spectrum-Tooltip--start-bottom,
-.spectrum-Tooltip--start-top {
-    margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
-}
-
-:host([open]) .spectrum-Tooltip--start-bottom,
-:host([open]) .spectrum-Tooltip--start-top,
-:host([open]) .spectrum-Tooltip--start {
-    transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
-}
-
-:host([open]) .spectrum-Tooltip--start-bottom:dir(rtl),
-:host([open]) .spectrum-Tooltip--start-top:dir(rtl),
-:host([open]) .spectrum-Tooltip--start:dir(rtl),
-:host([dir="rtl"][open]) .spectrum-Tooltip--start-bottom,
-:host([dir="rtl"][open]) .spectrum-Tooltip--start-top,
-:host([dir="rtl"][open]) .spectrum-Tooltip--start {
-    transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
-}
-
-.spectrum-Tooltip--end,
-.spectrum-Tooltip--end-bottom,
-.spectrum-Tooltip--end-top {
-    margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
-}
-
-:host([open]) .spectrum-Tooltip--end-bottom,
-:host([open]) .spectrum-Tooltip--end-top,
-:host([open]) .spectrum-Tooltip--end {
-    transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
-}
-
-:host([open]) .spectrum-Tooltip--end-bottom:dir(rtl),
-:host([open]) .spectrum-Tooltip--end-top:dir(rtl),
-:host([open]) .spectrum-Tooltip--end:dir(rtl),
-:host([dir="rtl"][open]) .spectrum-Tooltip--end-bottom,
-:host([dir="rtl"][open]) .spectrum-Tooltip--end-top,
-:host([dir="rtl"][open]) .spectrum-Tooltip--end {
-    transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
-}
diff --git a/packages/tooltip/src/tooltip-overrides.css b/packages/tooltip/src/tooltip-overrides.css
deleted file mode 100644
index 68ee2bf5745..00000000000
--- a/packages/tooltip/src/tooltip-overrides.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-#tooltip {
-    --spectrum-tooltip-backgound-color-default-neutral: var(--system-tooltip-backgound-color-default-neutral);
-}
diff --git a/packages/tooltip/src/tooltip.css b/packages/tooltip/src/tooltip.css
index a8a85c25254..11e88b4cb5a 100644
--- a/packages/tooltip/src/tooltip.css
+++ b/packages/tooltip/src/tooltip.css
@@ -10,23 +10,408 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-tooltip.css");
-@import url("./tooltip-overrides.css");
-
+/* Base variables */
 :host {
+    --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
+
     display: contents;
 }
 
 #tooltip {
-    width: fit-content;
+    --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
+    --spectrum-tooltip-margin: 0px;
+    --spectrum-tooltip-height: var(--spectrum-component-height-75);
+    --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
+    --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100);
+    --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
+    --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
+    --spectrum-tooltip-font-size: var(--spectrum-font-size-75);
+    --spectrum-tooltip-line-height: var(--spectrum-line-height-100);
+    --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
+    --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
+    --spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75);
+    --spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75);
+    --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75);
+    --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
+    --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
+    --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
+    --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default);
+    --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);
+    --spectrum-tooltip-content-color: var(--spectrum-white);
+    --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
+    --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
+    --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size);
+    --spectrum-tooltip-tip-height-percentage: 50%;
+    --spectrum-tooltip-tip-antialiasing-inset: 0.5px;
+    --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
+    --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral);
+
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    transition:
+        transform var(--spectrum-animation-duration-100) ease-in-out,
+        opacity var(--spectrum-animation-duration-100) ease-in-out,
+        visibility 0s linear var(--spectrum-animation-duration-100);
+    box-sizing: border-box;
+    vertical-align: top;
+    padding-inline: var(--spectrum-tooltip-spacing-inline);
+    border-radius: var(--spectrum-tooltip-border-radius);
+    block-size: auto;
+    min-block-size: var(--spectrum-tooltip-height);
+    background-color: var(--highcontrast-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default));
+    color: var(--spectrum-tooltip-content-color);
+    font-size: var(--spectrum-tooltip-font-size);
+    font-weight: var(--spectrum-tooltip-font-weight);
+    line-height: var(--spectrum-tooltip-line-height);
+    word-break: break-all;
+    -webkit-font-smoothing: antialiased;
+    cursor: default;
+    user-select: none;
+    flex-direction: row;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+
+    inline-size: fit-content;
     white-space: initial;
-    max-width: var(--spectrum-tooltip-max-inline-size);
+    max-inline-size: var(--spectrum-tooltip-max-inline-size);
+}
+
+:host([open]) #tooltip {
+    pointer-events: auto;
+    visibility: visible;
+    opacity: 1;
+    transition-delay: var(--spectrum-animation-duration-0);
 }
 
 #tip {
+    --highcontrast-tooltip-background-color-default: Canvas;
+    --highcontrast-tooltip-background-color-informative: Canvas;
+    --highcontrast-tooltip-background-color-positive: Canvas;
+    --highcontrast-tooltip-background-color-negative: Canvas;
+
+    forced-color-adjust: none;
+
+    position: absolute;
+    transform: rotate(45deg);
+    background-color: var(--highcontrast-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default));
+    clip-path: polygon(0 calc(0% - var(--spectrum-tooltip-tip-antialiasing-inset)), 50% var(--spectrum-tooltip-tip-height-percentage), 100% calc(0% - var(--spectrum-tooltip-tip-antialiasing-inset)));
+
     clip-path: polygon(0 -5%, 50% 50%, 100% -5%);
-    width: var(--spectrum-tooltip-tip-inline-size) !important;
-    height: var(--spectrum-tooltip-tip-inline-size) !important;
+    inline-size: var(--spectrum-tooltip-tip-inline-size) !important;
+    block-size: var(--spectrum-tooltip-tip-inline-size) !important;
+}
+
+:host(:lang(ja)),
+:host(:lang(ko)),
+:host(:lang(zh)) {
+    line-height: var(--spectrum-tooltip-cjk-line-height);
+}
+
+#tooltip p {
+    margin: 0;
+}
+
+:host([variant="info"]) #tooltip {
+    background-color: var(--highcontrast-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative));
+}
+
+:host([variant="positive"]) #tooltip {
+    background-color: var(--highcontrast-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive));
+}
+
+:host([variant="negative"]) #tooltip {
+    background-color: var(--highcontrast-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative));
+}
+
+:host([variant="info"]) #tip {
+    background-color: var(--highcontrast-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative));
+}
+
+:host([variant="positive"]) #tip {
+    background-color: var(--highcontrast-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive));
+}
+
+:host([variant="negative"]) #tip {
+    background-color: var(--highcontrast-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative));
+}
+
+:host([placement*="top"]) #tooltip #tip,
+.spectrum-Tooltip--top-end #tip,
+.spectrum-Tooltip--top-left #tip,
+.spectrum-Tooltip--top-right #tip,
+.spectrum-Tooltip--top-start #tip {
+    inset-block-start: 100%;
+}
+
+:host([placement*="bottom"]) #tooltip #tip,
+:host([placement="bottom-end"]) #tip,
+:host([placement="bottom-left"]) #tip,
+:host([placement="bottom-right"]) #tip,
+:host([placement="bottom-start"]) #tip {
+    clip-path: polygon(50% calc(100% - var(--spectrum-tooltip-tip-height-percentage)), 0 calc(100% + var(--spectrum-tooltip-tip-antialiasing-inset)), 100% calc(100% + var(--spectrum-tooltip-tip-antialiasing-inset)));
+    inset-block: auto 100%;
+}
+
+:host([placement="bottom-end"]) #tip,
+:host([placement="bottom-left"]) #tip,
+:host([placement="bottom-right"]) #tip,
+:host([placement="bottom-start"]) #tip,
+:host([placement="top-end"]) #tip,
+:host([placement="top-left"]) #tip,
+:host([placement="top-right"]) #tip,
+:host([placement="top-start"]) #tip {
+    transform: none;
+}
+
+:host([placement="bottom-left"]) #tip,
+:host([placement="top-left"]) #tip {
+    inset-inline-start: var(--spectrum-tooltip-pointer-corner-spacing);
+}
+
+:host([placement="bottom-right"]) #tip,
+:host([placement="top-right"]) #tip {
+    inset-inline: auto var(--spectrum-tooltip-pointer-corner-spacing);
+}
+
+:host([placement="bottom-start"]) #tip,
+:host([placement="top-start"]) #tip {
+    inset-inline: var(--spectrum-tooltip-pointer-corner-spacing) auto;
+}
+
+:host([placement="bottom-start"]) #tip:dir(rtl),
+:host([placement="top-start"]) #tip:dir(rtl),
+:host([dir="rtl"][placement="bottom-start"]) #tip,
+:host([dir="rtl"][placement="top-start"]) #tip {
+    right: var(--spectrum-tooltip-pointer-corner-spacing);
+    left: auto;
+}
+
+:host([placement="bottom-end"]) #tip,
+:host([placement="top-end"]) #tip {
+    inset-inline: auto var(--spectrum-tooltip-pointer-corner-spacing);
+}
+
+:host([placement="bottom-end"]) #tip:dir(rtl),
+:host([placement="top-end"]) #tip:dir(rtl),
+:host([dir="rtl"][placement="bottom-end"]) #tip,
+:host([dir="rtl"][placement="top-end"]) #tip {
+    left: var(--spectrum-tooltip-pointer-corner-spacing);
+    right: auto;
+}
+
+:host([placement="end"]) #tip,
+:host([placement="end-bottom"]) #tip,
+:host([placement="end-top"]) #tip,
+:host([placement*="left"]) #tooltip #tip,
+:host([placement="left-bottom"]) #tip,
+:host([placement="left-top"]) #tip,
+:host([placement*="right"]) #tooltip #tip,
+:host([placement="right-bottom"]) #tip,
+:host([placement="right-top"]) #tip,
+:host([placement="start"]) #tip,
+:host([placement="start-bottom"]) #tip,
+:host([placement="start-top"]) #tip {
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+}
+
+:host([placement="end-bottom"]) #tip,
+:host([placement="end-top"]) #tip,
+:host([placement="left-bottom"]) #tip,
+:host([placement="left-top"]) #tip,
+:host([placement="right-bottom"]) #tip,
+:host([placement="right-top"]) #tip,
+:host([placement="start-bottom"]) #tip,
+:host([placement="start-top"]) #tip {
+    inset-block-start: auto;
+    transform: none;
+}
+
+:host([placement="end"]) #tip,
+:host([placement="end-bottom"]) #tip,
+:host([placement="end-top"]) #tip,
+:host([placement*="right"]) #tooltip #tip,
+:host([placement="right-bottom"]) #tip,
+:host([placement="right-top"]) #tip {
+    clip-path: polygon(calc(100% - var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--spectrum-tooltip-tip-antialiasing-inset)) 100%, calc(100% + var(--spectrum-tooltip-tip-antialiasing-inset)) 0);
+    inset-inline: auto 100%;
+}
+
+:host([placement*="left"]) #tooltip #tip,
+:host([placement="left-bottom"]) #tip,
+:host([placement="left-top"]) #tip,
+:host([placement="start"]) #tip,
+:host([placement="start-bottom"]) #tip,
+:host([placement="start-top"]) #tip {
+    clip-path: polygon(calc(0% - var(--spectrum-tooltip-tip-antialiasing-inset)) 0, calc(0% - var(--spectrum-tooltip-tip-antialiasing-inset)) 100%, var(--spectrum-tooltip-tip-height-percentage) 50%);
+    inset-inline-start: 100%;
+}
+
+:host([placement="end-top"]) #tip,
+:host([placement="left-top"]) #tip,
+:host([placement="right-top"]) #tip,
+:host([placement="start-top"]) #tip {
+    inset-block-start: var(--spectrum-tooltip-pointer-corner-spacing);
+}
+
+:host([placement="end-bottom"]) #tip,
+:host([placement="left-bottom"]) #tip,
+:host([placement="right-bottom"]) #tip,
+:host([placement="start-bottom"]) #tip {
+    inset-block-end: var(--spectrum-tooltip-pointer-corner-spacing);
+}
+
+:host([placement="end"]) #tip:dir(rtl),
+:host([placement="end-bottom"]) #tip:dir(rtl),
+:host([placement="end-top"]) #tip:dir(rtl),
+:host([placement*="left"]) #tooltip #tip:dir(rtl),
+:host([placement="left-bottom"]) #tip:dir(rtl),
+:host([placement="left-top"]) #tip:dir(rtl),
+:host([dir="rtl"][placement="end"]) #tip,
+:host([dir="rtl"][placement="end-bottom"]) #tip,
+:host([dir="rtl"][placement="end-top"]) #tip,
+:host([dir="rtl"][placement*="left"]) #tooltip #tip,
+:host([dir="rtl"][placement="left-bottom"]) #tip,
+:host([dir="rtl"][placement="left-top"]) #tip {
+    clip-path: polygon(calc(0% - var(--spectrum-tooltip-tip-antialiasing-inset)) 0, calc(0% - var(--spectrum-tooltip-tip-antialiasing-inset)) 100%, var(--spectrum-tooltip-tip-height-percentage) 50%);
+    left: 100%;
+    right: auto;
+}
+
+:host([placement*="right"]) #tooltip #tip:dir(rtl),
+:host([placement="right-bottom"]) #tip:dir(rtl),
+:host([placement="right-top"]) #tip:dir(rtl),
+:host([placement="start"]) #tip:dir(rtl),
+:host([placement="start-bottom"]) #tip:dir(rtl),
+:host([placement="start-top"]) #tip:dir(rtl),
+:host([dir="rtl"][placement*="right"]) #tooltip #tip,
+:host([dir="rtl"][placement="right-bottom"]) #tip,
+:host([dir="rtl"][placement="right-top"]) #tip,
+:host([dir="rtl"][placement="start"]) #tip,
+:host([dir="rtl"][placement="start-bottom"]) #tip,
+:host([dir="rtl"][placement="start-top"]) #tip {
+    clip-path: polygon(var(--spectrum-tooltip-tip-height-percentage) 50%, calc(100% + var(--spectrum-tooltip-tip-antialiasing-inset)) 100%, calc(100% + var(--spectrum-tooltip-tip-antialiasing-inset)) 0);
+    left: auto;
+    right: 100%;
+}
+
+::slotted([slot="icon"]) {
+    inline-size: var(--spectrum-tooltip-icon-width);
+    block-size: var(--spectrum-tooltip-icon-height);
+    flex-shrink: 0;
+    align-self: flex-start;
+    margin-block-start: var(--spectrum-tooltip-icon-spacing-block-start);
+    margin-inline-start: calc(var(--spectrum-tooltip-icon-spacing-inline-start) - var(--spectrum-tooltip-spacing-inline));
+    margin-inline-end: var(--spectrum-tooltip-icon-spacing-inline-end);
+}
+
+#label {
+    line-height: var(--spectrum-tooltip-line-height);
+    margin-block-start: var(--spectrum-tooltip-spacing-block-start);
+    margin-block-end: var(--spectrum-tooltip-spacing-block-end);
+}
+
+#tooltip,
+:host([placement*="top"]) #tooltip,
+:host([placement="top-end"]) #tooltip,
+:host([placement="top-left"]) #tooltip,
+:host([placement="top-right"]) #tooltip,
+:host([placement="top-start"]) #tooltip {
+    margin-block-end: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin));
+}
+
+:host([open][placement="top-end"]) #tooltip,
+:host([open][placement="top-left"]) #tooltip,
+:host([open][placement="top-right"]) #tooltip,
+:host([open][placement="top-start"]) #tooltip,
+:host([placement*="top"][open]) #tooltip,
+:host([open]) #tooltip {
+    transform: translateY(calc(var(--spectrum-tooltip-animation-distance) * -1));
+}
+
+:host([placement*="bottom"]) #tooltip,
+:host([placement="bottom-end"]) #tooltip,
+:host([placement="bottom-left"]) #tooltip,
+:host([placement="bottom-right"]) #tooltip,
+:host([placement="bottom-start"]) #tooltip {
+    margin-block-start: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin));
+}
+
+:host([open][placement="bottom-end"]) #tooltip,
+:host([open][placement="bottom-left"]) #tooltip,
+:host([open][placement="bottom-right"]) #tooltip,
+:host([open][placement="bottom-start"]) #tooltip,
+:host([placement*="bottom"][open]) #tooltip {
+    transform: translateY(0);
+}
+
+:host([placement*="right"]) #tooltip,
+:host([placement="right-bottom"]) #tooltip,
+:host([placement="right-top"]) #tooltip {
+    margin-inline-start: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin));
+}
+
+:host([open][placement="right-bottom"]) #tooltip,
+:host([open][placement="right-top"]) #tooltip,
+:host([placement*="right"][open]) #tooltip {
+    transform: translateX(var(--spectrum-tooltip-animation-distance));
+}
+
+:host([placement*="left"]) #tooltip,
+:host([placement="left-bottom"]) #tooltip,
+:host([placement="left-top"]) #tooltip {
+    margin-inline-end: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin));
+}
+
+:host([open][placement="left-bottom"]) #tooltip,
+:host([open][placement="left-top"]) #tooltip,
+:host([placement*="left"][open]) #tooltip {
+    transform: translateX(0);
+}
+
+:host([placement="start"]) #tooltip,
+:host([placement="start-bottom"]) #tooltip,
+:host([placement="start-top"]) #tooltip {
+    margin-inline-end: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin));
+}
+
+:host([open][placement="start-bottom"]) #tooltip,
+:host([open][placement="start-top"]) #tooltip,
+:host([open][placement="start"]) #tooltip {
+    transform: translateY(calc(var(--spectrum-tooltip-animation-distance) * -1));
+}
+
+:host([open][placement="start-bottom"]:dir(rtl)),
+:host([open][placement="start-top"]:dir(rtl)),
+:host([open][placement="start"]:dir(rtl)),
+:host([dir="rtl"][open][placement="start-bottom"]),
+:host([dir="rtl"][open][placement="start-top"]),
+:host([dir="rtl"][open][placement="start"]) {
+    transform: translateY(0);
+}
+
+:host([placement="end"]),
+:host([placement="end-bottom"]),
+:host([placement="end-top"]) {
+    margin-inline-start: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin));
+}
+
+:host([open][placement="end-bottom"]),
+:host([open][placement="end-top"]),
+:host([open][placement="end"]) {
+    transform: translateY(0);
+}
+
+:host([open][placement="end-bottom"]:dir(rtl)),
+:host([open][placement="end-top"]:dir(rtl)),
+:host([open][placement="end"]:dir(rtl)),
+:host([dir="rtl"][open][placement="end-bottom"]),
+:host([dir="rtl"][open][placement="end-top"]),
+:host([dir="rtl"][open][placement="end"]) {
+    transform: translateX(var(--spectrum-tooltip-animation-distance));
 }
 
 #tip[style] {
@@ -34,7 +419,7 @@
 }
 
 :host(:not([placement*="top"])) #tooltip {
-    margin-bottom: 0;
+    margin-block-end: 0;
 }
 
 :host([placement*="top"]) #tooltip #tip {
@@ -44,7 +429,7 @@
 :host([placement*="bottom"]) #tooltip #tip {
     inset-block-end: 100%;
     clip-path: polygon(50% 50%, 0 105%, 100% 105%);
-    top: auto;
+    inset-block-start: auto;
 }
 
 :host([placement*="left"]) #tooltip #tip,
@@ -55,7 +440,7 @@
 
 :host([placement*="right"]) #tooltip #tip {
     clip-path: polygon(50% 50%, 105% 100%, 105% 0);
-    inset-inline: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) * -2) 100%;
+    inset-inline: calc(var(--spectrum-tooltip-tip-block-size) * -2) 100%;
 }
 
 :host([placement*="left"]) #tooltip #tip {
diff --git a/packages/tooltip/stories/tooltip-directive.stories.ts b/packages/tooltip/stories/tooltip-directive.stories.ts
index 4c5006f04ad..771913ac94e 100644
--- a/packages/tooltip/stories/tooltip-directive.stories.ts
+++ b/packages/tooltip/stories/tooltip-directive.stories.ts
@@ -11,9 +11,9 @@
  */
 import { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';
 import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-circle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
 import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
diff --git a/packages/tooltip/stories/tooltip.stories.ts b/packages/tooltip/stories/tooltip.stories.ts
index a3d7e864617..23c200d34be 100644
--- a/packages/tooltip/stories/tooltip.stories.ts
+++ b/packages/tooltip/stories/tooltip.stories.ts
@@ -12,9 +12,9 @@
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-circle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
 import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
@@ -42,13 +42,13 @@ const iconOptions: {
 } = {
     '': () => html``,
     negative: () => html`
-        <sp-icon-alert slot="icon"></sp-icon-alert>
+        <sp-icon-alert-triangle slot="icon"></<sp-icon-alert-triangle></sp-icon-alert-triangle>
     `,
     positive: () => html`
         <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
     `,
     info: () => html`
-        <sp-icon-info slot="icon"></sp-icon-info>
+        <sp-icon-info-circle slot="icon"></sp-icon-info-circle>
     `,
 };
 
diff --git a/packages/top-nav/src/top-nav-item.css b/packages/top-nav/src/top-nav-item.css
index a3e94265f09..3e00c62dfdf 100644
--- a/packages/top-nav/src/top-nav-item.css
+++ b/packages/top-nav/src/top-nav-item.css
@@ -20,37 +20,37 @@ a:focus-visible {
 }
 
 :host a:before {
-    block-size: calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));
-    border: var(--mod-tabs-focus-indicator-width, var(--spectrum-tabs-focus-indicator-width)) solid transparent;
-    border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-tabs-focus-indicator-border-radius));
+    block-size: calc(100% - var(--spectrum-tabs-top-to-text));
+    border: var(--spectrum-tabs-focus-indicator-width) solid transparent;
+    border-radius: var(--spectrum-tabs-focus-indicator-border-radius);
     box-sizing: border-box;
     content: "";
-    inline-size: calc(100% + var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * 2);
-    inset-block-start: calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2);
-    inset-inline: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
+    inline-size: calc(100% + var(--spectrum-tabs-focus-indicator-gap) * 2);
+    inset-block-start: calc(var(--spectrum-tabs-top-to-text) / 2);
+    inset-inline: calc(var(--spectrum-tabs-focus-indicator-gap) * -1);
     pointer-events: none;
     position: absolute;
 }
 
 :host a.focus-visible {
-    color: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)));
+    color: var(--highcontrast-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus));
 }
 
 :host a:focus-visible {
-    color: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)));
+    color: var(--highcontrast-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus));
 }
 
 :host a.focus-visible:before {
-    border-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color)));
+    border-color: var(--highcontrast-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color));
 }
 
 :host a:focus-visible:before {
-    border-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color)));
+    border-color: var(--highcontrast-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color));
 }
 
 #item-label {
     margin-block: 0;
-    padding-block: var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) var(--mod-tabs-bottom-to-text, var(--spectrum-tabs-bottom-to-text));
+    padding-block: var(--spectrum-tabs-top-to-text) var(--spectrum-tabs-bottom-to-text);
 }
 
 slot {
diff --git a/packages/top-nav/stories/top-nav-sizes.stories.ts b/packages/top-nav/stories/top-nav-sizes.stories.ts
index cac82c90569..6a8d59e21be 100644
--- a/packages/top-nav/stories/top-nav-sizes.stories.ts
+++ b/packages/top-nav/stories/top-nav-sizes.stories.ts
@@ -13,7 +13,7 @@ import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
 import '@spectrum-web-components/top-nav/sp-top-nav.js';
 import '@spectrum-web-components/top-nav/sp-top-nav-item.js';
 import { html, TemplateResult } from '@spectrum-web-components/base';
diff --git a/packages/top-nav/test/top-nav.test.ts b/packages/top-nav/test/top-nav.test.ts
index d388ee79e4c..54d93d6db8c 100644
--- a/packages/top-nav/test/top-nav.test.ts
+++ b/packages/top-nav/test/top-nav.test.ts
@@ -19,16 +19,16 @@ import { testForLitDevWarnings } from '../../../test/testing-helpers';
 import { sendMouse } from '../../../test/plugins/browser.js';
 
 describe('TopNav', () => {
-    testForLitDevWarnings(async () => await fixture<TopNav>(Default()));
+    testForLitDevWarnings(async () => await fixture<TopNav>(Default() as any));
     it('loads default top-nav accessibly', async () => {
-        const el = await fixture<TopNav>(Default());
+        const el = await fixture<TopNav>(Default() as any);
 
         await elementUpdated(el);
 
         await expect(el).to.be.accessible();
     });
     it('accepts and removes `label` accessibly', async () => {
-        const el = await fixture<TopNav>(Default());
+        const el = await fixture<TopNav>(Default() as any);
 
         await elementUpdated(el);
 
@@ -41,14 +41,14 @@ describe('TopNav', () => {
         await expect(el).to.be.accessible();
     });
     it('loads with a selected item accessible', async () => {
-        const el = await fixture<TopNav>(Selected());
+        const el = await fixture<TopNav>(Selected() as any);
 
         await elementUpdated(el);
 
         await expect(el).to.be.accessible();
     });
     it('updates indicator size when Nav Item content changes', async () => {
-        const el = await fixture<TopNav>(Selected());
+        const el = await fixture<TopNav>(Selected() as any);
 
         await elementUpdated(el);
 
@@ -77,7 +77,7 @@ describe('TopNav', () => {
         ).to.be.greaterThan(widthEnd);
     });
     it('can have an item removed', async () => {
-        const el = await fixture<TopNav>(Selected());
+        const el = await fixture<TopNav>(Selected() as any);
         const item = el.querySelector('.selected') as TopNavItem;
 
         await elementUpdated(el);
@@ -95,7 +95,7 @@ describe('TopNav', () => {
 describe('TopNavItem', () => {
     it('passes click to `<a>`', async () => {
         const clickSpy = spy();
-        const test = await fixture<TopNav>(Selected());
+        const test = await fixture<TopNav>(Selected() as any);
         const el = test.querySelector(
             'sp-top-nav-item:nth-of-type(4)'
         ) as TopNavItem;
@@ -114,7 +114,7 @@ describe('TopNavItem', () => {
     });
     it('`<a>` accepts click across full item area', async () => {
         const clickSpy = spy();
-        const test = await fixture<TopNav>(Selected());
+        const test = await fixture<TopNav>(Selected() as any);
         const el = test.querySelector(
             'sp-top-nav-item:nth-of-type(4)'
         ) as TopNavItem;
diff --git a/packages/tray/package.json b/packages/tray/package.json
index 4dc88d76b0a..7ad483cd49d 100644
--- a/packages/tray/package.json
+++ b/packages/tray/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/tray-overrides.css.js": "./src/tray-overrides.css.js",
         "./src/tray.css.js": "./src/tray.css.js",
         "./sp-tray.js": {
             "development": "./sp-tray.dev.js",
diff --git a/packages/tray/src/spectrum-tray-wrapper.css b/packages/tray/src/spectrum-tray-wrapper.css
deleted file mode 100644
index 85428b88db0..00000000000
--- a/packages/tray/src/spectrum-tray-wrapper.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    inline-size: 100%;
-    justify-content: center;
-    display: flex;
-    position: fixed;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-}
diff --git a/packages/tray/src/spectrum-tray.css b/packages/tray/src/spectrum-tray.css
deleted file mode 100644
index dab59942af7..00000000000
--- a/packages/tray/src/spectrum-tray.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-.tray {
-    --spectrum-tray-max-inline-size: var(--mod-tray-max-inline-size, 375px);
-    --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, 0.16s);
-    --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, 0s);
-    --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%;
-    inline-size: 100%;
-    max-inline-size: 100%;
-    max-block-size: calc(100vh - 64px);
-    max-block-size: calc(100vh - var(--spectrum-tray-spacing-edge-to-tray-safe-zone));
-    box-sizing: border-box;
-    border-radius: 0;
-    border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0;
-    transition:
-        opacity var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) 0s,
-        visibility var(--spectrum-tray-exit-animation-duration) linear calc(var(--spectrum-tray-exit-animation-duration)),
-        transform var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) 0s;
-    transition:
-        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(--spectrum-tray-background-color);
-    outline: none;
-    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));
-    overflow: auto;
-    transform: translateY(100%);
-}
-
-:host([open]) .tray {
-    transition:
-        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);
-    transform: translateY(0);
-}
-
-@media screen and (orientation: landscape) {
-    .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);
-    }
-}
-
-@media (forced-colors: active) {
-    .tray {
-        --highcontrast-tray-background-color: Canvas;
-        border: solid;
-    }
-
-    .tray ::slotted(*) {
-        border: none;
-    }
-}
diff --git a/packages/tray/src/tray-overrides.css b/packages/tray/src/tray-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/tray/src/tray-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/tray/src/tray-wrapper-overrides.css b/packages/tray/src/tray-wrapper-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/tray/src/tray-wrapper-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/tray/src/tray.css b/packages/tray/src/tray.css
index d6bd646b275..c96b2d7cc01 100644
--- a/packages/tray/src/tray.css
+++ b/packages/tray/src/tray.css
@@ -10,35 +10,81 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-tray-wrapper.css");
-@import url("./spectrum-tray.css");
-@import url("./tray-overrides.css");
-
+/* Base variables */
 :host {
-    align-items: flex-end;
+    inline-size: 100%;
+    justify-content: center;
+    display: flex;
     position: fixed !important;
-    max-height: 100vh;
-    max-height: 100dvh;
-}
-
-sp-underlay {
-    touch-action: none;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    align-items: flex-end;
+    max-block-size: 100vh;
+    max-block-size: 100dvh;
 }
 
 .tray {
+    --spectrum-tray-max-inline-size: var(--mod-tray-max-inline-size, 375px);
+    --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, 0.16s);
+    --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, 0s);
+    --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%;
+
+    inline-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: calc(100vh - 64px);
+    max-block-size: calc(100vh - var(--spectrum-tray-spacing-edge-to-tray-safe-zone));
+    box-sizing: border-box;
+    border-radius: 0;
+    border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0;
+    transition:
+        opacity var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) 0s,
+        visibility var(--spectrum-tray-exit-animation-duration) linear calc(var(--spectrum-tray-exit-animation-duration)),
+        transform var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) 0s;
+    transition:
+        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(--spectrum-tray-background-color);
+    outline: none;
+    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));
+    overflow: auto;
+    transform: translateY(100%);
+
     display: inline-flex;
     overscroll-behavior: contain;
 }
 
+:host([open]) .tray {
+    transition:
+        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);
+    transform: translateY(0);
+}
+
+sp-underlay {
+    touch-action: none;
+}
+
 ::slotted(.visually-hidden) {
     border: 0;
     clip: rect(0, 0, 0, 0);
     clip-path: inset(50%);
-    height: 1px;
+    block-size: 1px;
     margin: 0 -1px -1px 0;
     overflow: hidden;
     padding: 0;
     position: absolute;
-    width: 1px;
+    inline-size: 1px;
     white-space: nowrap;
 }
+
+.tray ::slotted(*) {
+    border: none;
+}
diff --git a/packages/tray/test/tray.test.ts b/packages/tray/test/tray.test.ts
index 9e457932f8f..0da979e663d 100644
--- a/packages/tray/test/tray.test.ts
+++ b/packages/tray/test/tray.test.ts
@@ -75,7 +75,7 @@ describe('Tray', () => {
     });
     it('closes', async () => {
         const test = await fixture<HTMLElement>(html`
-            <sp-theme system="spectrum" scale="medium" color="dark">
+            <sp-theme system="spectrum" scale="medium" style="color-scheme: dark;">
                 <sp-tray></sp-tray>
             </sp-theme>
         `);
diff --git a/packages/underlay/package.json b/packages/underlay/package.json
index f3538e64755..21b2bf88386 100644
--- a/packages/underlay/package.json
+++ b/packages/underlay/package.json
@@ -33,7 +33,6 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/underlay-overrides.css.js": "./src/underlay-overrides.css.js",
         "./src/underlay.css.js": "./src/underlay.css.js",
         "./sp-underlay.js": {
             "development": "./sp-underlay.dev.js",
diff --git a/packages/underlay/src/spectrum-underlay.css b/packages/underlay/src/spectrum-underlay.css
deleted file mode 100644
index 36697b972b8..00000000000
--- a/packages/underlay/src/spectrum-underlay.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    --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));
-    --spectrum-underlay-background-entry-animation-delay: var(--mod-underlay-background-entry-animation-delay, var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0)));
-    --spectrum-underlay-background-color: var(--mod-underlay-background-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)));
-    pointer-events: none;
-    visibility: hidden;
-    opacity: 0;
-    background-color: var(--spectrum-underlay-background-color);
-    z-index: 1;
-    transition:
-        opacity var(--spectrum-underlay-background-exit-animation-duration) var(--spectrum-underlay-background-exit-animation-ease) var(--spectrum-underlay-background-exit-animation-delay),
-        visibility 0s linear calc(var(--spectrum-underlay-background-exit-animation-delay) + var(--spectrum-underlay-background-exit-animation-duration));
-    position: fixed;
-    inset-block: 0;
-    inset-inline: 0;
-    overflow: hidden;
-}
-
-:host([open]) {
-    pointer-events: auto;
-    visibility: visible;
-    opacity: 1;
-    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/packages/underlay/src/underlay-overrides.css b/packages/underlay/src/underlay-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/packages/underlay/src/underlay-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/packages/underlay/src/underlay.css b/packages/underlay/src/underlay.css
index 116f44ddd5f..b350d61800f 100644
--- a/packages/underlay/src/underlay.css
+++ b/packages/underlay/src/underlay.css
@@ -10,5 +10,37 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-underlay.css");
-@import url("./underlay-overrides.css");
+/* Base variables */
+:host {
+    /* animation */
+    --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300);
+    --spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in);
+    --spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
+    --spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
+    --spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out);
+    --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
+
+    /* colors */
+    --spectrum-underlay-background-color: rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
+
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    background-color: var(--spectrum-underlay-background-color);
+    z-index: 1;
+    transition:
+        opacity var(--spectrum-underlay-background-exit-animation-duration) var(--spectrum-underlay-background-exit-animation-ease) var(--spectrum-underlay-background-exit-animation-delay),
+        visibility 0s linear calc(var(--spectrum-underlay-background-exit-animation-delay) + var(--spectrum-underlay-background-exit-animation-duration));
+    position: fixed;
+    inset-block: 0;
+    inset-inline: 0;
+    overflow: hidden;
+}
+
+:host([open]) {
+    pointer-events: auto;
+    visibility: visible;
+    opacity: 1;
+    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/projects/css-custom-vars-viewer/scripts/parse-json.js b/projects/css-custom-vars-viewer/scripts/parse-json.js
index 4d5c4ff2569..326f92f4416 100644
--- a/projects/css-custom-vars-viewer/scripts/parse-json.js
+++ b/projects/css-custom-vars-viewer/scripts/parse-json.js
@@ -9,73 +9,72 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
-const spectrumColours = [
-    'gray',
-    'blue',
-    'red',
-    'orange',
-    'yellow',
-    'chartreuse',
-    'celery',
-    'green',
-    'seafoam',
-    'cyan',
-    'indigo',
-    'purple',
-    'fuchsia',
-    'magenta',
-];
+const fsp = fs.promises;
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const srcPath = path.resolve(__dirname, '../src/color-palette.json');
-const contents = fs.readFileSync(srcPath, { encoding: 'utf8' });
-const outputPath = path.resolve(__dirname, '../src/parsed-data.ts');
 
-const varsJSON = JSON.parse(contents);
-let colorArray = [];
-let exportString = '';
+async function main() {
+    const srcPath = path.resolve(__dirname, '../src/color-palette.json');
+    const contents = fs.readFileSync(srcPath, { encoding: 'utf8' });
+    const outputPath = path.resolve(__dirname, '../src/parsed-data.ts');
+
+    const varsJSON = JSON.parse(contents);
+    let colorArray = [];
+    let exportString = '';
 
-spectrumColours.forEach((colour) => {
-    for (const [key, info] of Object.entries(varsJSON)) {
-        const colourSubstring = key.search(colour);
+    [
+        'gray',
+        'blue',
+        'red',
+        'orange',
+        'yellow',
+        'chartreuse',
+        'celery',
+        'green',
+        'seafoam',
+        'cyan',
+        'indigo',
+        'purple',
+        'fuchsia',
+        'magenta',
+        'silver',
+        'brown',
+        'cinnamon',
+        'turquoise',
+        'pink'
+    ].forEach((colour) => {
+        for (const [key, info] of Object.entries(varsJSON)) {
+            const colourSubstring = key.search(colour);
+            if (colourSubstring === -1) continue;
 
-        if (colourSubstring !== -1) {
-            const infoValues = info.value;
-            if (infoValues !== undefined) {
-                // eslint-disable-next-line no-console
-                console.log('invalid format!');
-            } else {
-                colorArray.push({
-                    customVar: `--spectrum-${key}`,
-                    sets: {
-                        light: info.sets.light.value,
-                        dark: info.sets.dark.value,
-                        darkest: info.sets.darkest.value,
-                        wireframe: info.sets.wireframe.value,
-                    },
-                });
-            }
+            colorArray.push({
+                prop: info.prop,
+                light: info?.light?.value ?? info.value,
+                dark: info?.dark?.value ?? info.value,
+            });
         }
-    }
-    exportString = exportString.concat(
-        ...`export const ${colour}Values: Item[] = ${JSON.stringify(
-            colorArray,
-            undefined,
-            '  '
-        )};\n`
-    );
-    colorArray = [];
-});
-fs.writeFileSync(
-    outputPath,
-    `/* eslint-disable notice/notice */\n/* eslint-disable prettier/prettier */
-    import { Item } from './CssTable.js';
+
+        exportString = exportString.concat(
+            ...`export const ${colour}Values: Item[] = ${JSON.stringify(
+                colorArray,
+                undefined,
+                '  '
+            )};\n`
+        );
+        colorArray = [];
+    });
+
+    return fsp.writeFile(
+        outputPath,
+        `import { Item } from './CssTable.js';
 
     ${exportString}`,
-    {
-        encoding: 'utf8',
-    }
-);
+        { encoding: 'utf8' }
+    );
+}
+
+main();
diff --git a/projects/css-custom-vars-viewer/src/CssTable.ts b/projects/css-custom-vars-viewer/src/CssTable.ts
index ba1a27c889c..07e2d66de06 100644
--- a/projects/css-custom-vars-viewer/src/CssTable.ts
+++ b/projects/css-custom-vars-viewer/src/CssTable.ts
@@ -12,9 +12,11 @@
 import {
     css,
     html,
+    nothing,
     PropertyValues,
     SpectrumElement,
     TemplateResult,
+    CSSResultArray,
 } from '@spectrum-web-components/base';
 import {
     property,
@@ -24,38 +26,42 @@ import type {
     SortedEventDetails,
     TableItem,
 } from '@spectrum-web-components/table';
+import '@spectrum-web-components/swatch';
 import '@spectrum-web-components/link/sp-link.js';
 import '@spectrum-web-components/table/elements.js';
 
 export interface Item extends TableItem {
-    customVar: string;
-    sets: {
-        light: string;
-        dark: string;
-        darkest: string;
-        wireframe: string;
-    };
+    prop: string;
+    light?: string;
+    dark?: string;
 }
 
+/**
+ * @element sp-css-table
+ */
 export class CssTable extends SpectrumElement {
-    static override styles = css`
-        .table-head {
-            align-items: center;
-        }
-        sp-toast {
-            position: fixed;
-            z-index: 300;
-            bottom: var(--spectrum-spacing-400);
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        sp-table {
-            height: calc(var(--spectrum-spacing-1000) * 5);
-        }
-        sp-swatch {
-            pointer-events: none;
-        }
-    `;
+    public override static get styles(): CSSResultArray {
+        return [
+            css`
+            .table-head {
+                align-items: center;
+            }
+            sp-toast {
+                position: fixed;
+                z-index: 300;
+                bottom: var(--spectrum-spacing-400);
+                left: 50%;
+                transform: translateX(-50%);
+            }
+            sp-table {
+                height: calc(var(--spectrum-spacing-1000) * 5);
+            }
+            sp-swatch {
+                pointer-events: none;
+            }
+        `,
+        ];
+    }
 
     @state()
     copyTimeout?: number;
@@ -64,7 +70,7 @@ export class CssTable extends SpectrumElement {
     copiedText = '';
 
     @property({ type: String, attribute: 'color-theme' })
-    colorTheme: 'light' | 'dark' | 'darkest' | 'wireframe' = 'light';
+    colorTheme: 'light' | 'dark' = 'light';
 
     @property({ type: Array })
     public items: Item[] = [];
@@ -77,22 +83,27 @@ export class CssTable extends SpectrumElement {
             console.log('unable to access clipboard');
         }
         this.copiedText = text;
-        clearTimeout(this.copyTimeout);
+        if (this.copyTimeout) {
+            clearTimeout(this.copyTimeout);
+        }
+
         this.copyTimeout = setTimeout(() => {
             this.copyTimeout = undefined;
         }, 4000) as unknown as number;
     }
 
     private compareItems =
-        (sortKey: 'customVar', sortDirection: 'asc' | 'desc') =>
+        (sortKey: 'prop', sortDirection: 'asc' | 'desc') =>
         (
             a: {
-                customVar: string;
-                sets: object;
+                prop: string;
+                light: string;
+                dark: string;
             },
             b: {
-                customVar: string;
-                sets: object;
+                prop: string;
+                light: string;
+                dark: string;
             }
         ): number => {
             const doSortKey = sortKey;
@@ -105,34 +116,37 @@ export class CssTable extends SpectrumElement {
         };
 
     public renderItem = (item: Item): TemplateResult => {
-        const splitVarName = item.customVar.substring(11);
+        const splitVarName = item.prop.substring(11);
         const splitColourName = splitVarName.split('-').join(' ');
         const colourName =
             splitColourName.charAt(0).toUpperCase() +
             splitColourName.substring(1);
 
         if (!this.colorTheme) {
-            return html``;
+            return nothing;
         }
         return html`
             <sp-table-cell>
                 <sp-swatch
-                    color=${String(item.sets[this.colorTheme])}
+                    color=${String(item[this.colorTheme])}
                     size="s"
                 ></sp-swatch>
             </sp-table-cell>
             <sp-table-cell>${colourName}</sp-table-cell>
             <sp-table-cell>
-                <sp-link quiet @click=${() => this.copyText(item.customVar)}>
-                    ${item.customVar}
+                <sp-link quiet @click=${() => this.copyText(item.prop)}>
+                    ${item.prop}
                 </sp-link>
             </sp-table-cell>
             <sp-table-cell>
                 <sp-link
                     quiet
-                    @click=${() => this.copyText(item.sets[this.colorTheme])}
+                    @click=${() => {
+                        if (!this.colorTheme || !item?.[this.colorTheme]) return;
+                        this.copyText(item[this.colorTheme]);
+                    }}
                 >
-                    ${item.sets[this.colorTheme]}
+                    ${item[this.colorTheme]}
                 </sp-link>
             </sp-table-cell>
         `;
@@ -142,14 +156,14 @@ export class CssTable extends SpectrumElement {
         return html`
             <sp-table
                 size="m"
-                scroller="true"
+                ?scroller=${true}
                 .items=${this.items}
                 .renderItem=${this.renderItem}
                 @sorted=${(event: CustomEvent<SortedEventDetails>): void => {
                     const { sortKey, sortDirection } = event.detail;
                     const items = [...this.items];
                     items.sort(
-                        this.compareItems(sortKey as 'customVar', sortDirection)
+                        this.compareItems(sortKey as 'prop', sortDirection)
                     );
                     this.items = items;
                 }}
@@ -158,7 +172,7 @@ export class CssTable extends SpectrumElement {
                     <sp-table-head-cell>Preview</sp-table-head-cell>
                     <sp-table-head-cell
                         sortable
-                        sort-key="customVar"
+                        sort-key="prop"
                         sort-direction="asc"
                     >
                         Colour name
diff --git a/projects/css-custom-vars-viewer/src/CustomVarsViewer.ts b/projects/css-custom-vars-viewer/src/CustomVarsViewer.ts
index e92e72077b8..b36b565be5c 100644
--- a/projects/css-custom-vars-viewer/src/CustomVarsViewer.ts
+++ b/projects/css-custom-vars-viewer/src/CustomVarsViewer.ts
@@ -14,6 +14,7 @@ import {
     html,
     SpectrumElement,
     TemplateResult,
+    CSSResultArray,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
@@ -24,6 +25,7 @@ import '@spectrum-web-components/swatch/sp-swatch-group.js';
 import { Picker } from '@spectrum-web-components/picker';
 import { SwatchGroup } from '@spectrum-web-components/swatch';
 import { TableItem } from '@spectrum-web-components/table';
+import colorTokens from './color-palette.json' with { type: 'json' };
 import {
     blueValues,
     celeryValues,
@@ -43,29 +45,33 @@ import {
 import './sp-css-table.js';
 
 export interface Item extends TableItem {
-    customVar: string;
-    sets: {
-        light: string;
-        dark: string;
-        darkest: string;
-        wireframe: string;
-    };
+    prop?: string;
+    light?: string;
+    dark?: string;
 }
 
+/**
+ * @element custom-vars-viewer
+ */
 export class CustomVarsViewer extends SpectrumElement {
-    static override styles = css`
-        :host {
-            display: block;
-            padding: var(--spectrum-spacing-200);
-        }
-        .picker-container {
-            padding-bottom: var(--spectrum-component-edge-to-visual-only-75);
-        }
-        sp-swatch-group {
-            padding: var(--spectrum-spacing-200);
-        }
-    `;
+    public override static get styles(): CSSResultArray {
+        return [
+            css`
+            :host {
+                display: block;
+                padding: var(--spectrum-spacing-200);
+            }
+            .picker-container {
+                padding-bottom: var(--spectrum-component-edge-to-visual-only-75);
+            }
+            sp-swatch-group {
+                padding: var(--spectrum-spacing-200);
+            }
+            `,
+        ];
+    }
 
+    /* @todo inherit this from the theme */
     @property({ type: String })
     public themeColor = 'light';
 
@@ -100,17 +106,18 @@ export class CustomVarsViewer extends SpectrumElement {
 
     protected handleSwatchSelect = (event: Event): void => {
         const swatchGroup = event.target as SwatchGroup;
-        const colorSelection = swatchGroup.selected;
+        const colorSelection: string[] = swatchGroup.selected;
         const newSelections: Item[] = [];
 
-        // I'd like to apologise for the following programming nightmare:
+        // If there are not selected items returned by the swatch group, use our
+        // default local values instead
         if (colorSelection.length === 0) {
             this.colors = this._colors;
         } else {
             colorSelection.forEach((selection) => {
                 const selectedColors = [
                     ...this._colors.filter(
-                        (color) => color.customVar.search(selection) > -1
+                        (color) => color.prop.search(selection) > -1
                     ),
                 ];
                 newSelections.unshift(...selectedColors);
@@ -138,7 +145,6 @@ export class CustomVarsViewer extends SpectrumElement {
                 >
                     <sp-menu-item value="light">Light</sp-menu-item>
                     <sp-menu-item value="dark">Dark</sp-menu-item>
-                    <sp-menu-item value="darkest">Darkest</sp-menu-item>
                     <sp-menu-item value="wireframe">Wireframe</sp-menu-item>
                 </sp-picker>
             </div>
diff --git a/projects/css-custom-vars-viewer/src/color-palette.json b/projects/css-custom-vars-viewer/src/color-palette.json
index 6567706130c..87a920e8c17 100644
--- a/projects/css-custom-vars-viewer/src/color-palette.json
+++ b/projects/css-custom-vars-viewer/src/color-palette.json
@@ -1,3150 +1,4640 @@
 {
-    "white": {
-        "value": "rgb(255, 255, 255)"
-    },
-    "transparent-white-100": {
-        "value": "rgba(255, 255, 255, 0)"
-    },
-    "transparent-white-200": {
-        "value": "rgba(255, 255, 255, 0.1)"
-    },
-    "transparent-white-300": {
-        "value": "rgba(255, 255, 255, 0.25)"
-    },
-    "transparent-white-400": {
-        "value": "rgba(255, 255, 255, 0.4)"
-    },
-    "transparent-white-500": {
-        "value": "rgba(255, 255, 255, 0.55)"
-    },
-    "transparent-white-600": {
-        "value": "rgba(255, 255, 255, 0.7)"
-    },
-    "transparent-white-700": {
-        "value": "rgba(255, 255, 255, 0.8)"
-    },
-    "transparent-white-800": {
-        "value": "rgba(255, 255, 255, 0.9)"
-    },
-    "transparent-white-900": {
-        "value": "rgb(255, 255, 255)"
+    "accent-color-100": {
+        "prop": "--spectrum-accent-color-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-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-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-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-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-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-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-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-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-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-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-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-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-blue-900)",
+        "light": {
+            "value": "rgb(59, 99, 251)"
+        },
+        "dark": {
+            "value": "rgb(86, 129, 255)"
+        }
+    },
+    "background-base-color": {
+        "prop": "--spectrum-background-base-color",
+        "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(34, 34, 34)"
+        },
+        "light": {
+            "value": "rgb(255, 255, 255)"
+        }
+    },
+    "background-layer-1-color": {
+        "prop": "--spectrum-background-layer-1-color",
+        "ref": "var(--spectrum-gray-50)",
+        "light": {
+            "value": "rgb(248, 248, 248)"
+        },
+        "dark": {
+            "value": "rgb(27, 27, 27)"
+        }
+    },
+    "background-layer-2-color": {
+        "prop": "--spectrum-background-layer-2-color",
+        "ref": "var(--spectrum-gray-75)",
+        "light": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "dark": {
+            "value": "rgb(34, 34, 34)"
+        }
     },
     "black": {
+        "prop": "--spectrum-black",
         "value": "rgb(0, 0, 0)"
     },
-    "transparent-black-100": {
-        "value": "rgba(0, 0, 0, 0)"
-    },
-    "transparent-black-200": {
-        "value": "rgba(0, 0, 0, 0.1)"
-    },
-    "transparent-black-300": {
-        "value": "rgba(0, 0, 0, 0.25)"
-    },
-    "transparent-black-400": {
-        "value": "rgba(0, 0, 0, 0.4)"
-    },
-    "transparent-black-500": {
-        "value": "rgba(0, 0, 0, 0.55)"
+    "blue-100": {
+        "prop": "--spectrum-blue-100",
+        "light": {
+            "value": "rgb(245, 249, 255)"
+        },
+        "dark": {
+            "value": "rgb(14, 23, 63)"
+        }
     },
-    "transparent-black-600": {
-        "value": "rgba(0, 0, 0, 0.7)"
+    "blue-1000": {
+        "prop": "--spectrum-blue-1000",
+        "light": {
+            "value": "rgb(39, 77, 234)"
+        },
+        "dark": {
+            "value": "rgb(105, 149, 254)"
+        }
     },
-    "transparent-black-700": {
-        "value": "rgba(0, 0, 0, 0.8)"
+    "blue-1100": {
+        "prop": "--spectrum-blue-1100",
+        "light": {
+            "value": "rgb(29, 62, 207)"
+        },
+        "dark": {
+            "value": "rgb(124, 169, 252)"
+        }
     },
-    "transparent-black-800": {
-        "value": "rgba(0, 0, 0, 0.9)"
+    "blue-1200": {
+        "prop": "--spectrum-blue-1200",
+        "light": {
+            "value": "rgb(21, 50, 173)"
+        },
+        "dark": {
+            "value": "rgb(152, 192, 252)"
+        }
     },
-    "transparent-black-900": {
-        "value": "rgb(0, 0, 0)"
+    "blue-1300": {
+        "prop": "--spectrum-blue-1300",
+        "light": {
+            "value": "rgb(16, 40, 140)"
+        },
+        "dark": {
+            "value": "rgb(181, 213, 253)"
+        }
     },
-    "gray-50": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "dark": {
-                "value": "rgb(29, 29, 29)"
-            },
-            "darkest": {
-                "value": "rgb(0, 0, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(255, 255, 255)"
-            }
+    "blue-1400": {
+        "prop": "--spectrum-blue-1400",
+        "light": {
+            "value": "rgb(12, 31, 105)"
+        },
+        "dark": {
+            "value": "rgb(213, 231, 254)"
         }
     },
-    "gray-75": {
-        "sets": {
-            "light": {
-                "value": "rgb(253, 253, 253)"
-            },
-            "dark": {
-                "value": "rgb(38, 38, 38)"
-            },
-            "darkest": {
-                "value": "rgb(14, 14, 14)"
-            },
-            "wireframe": {
-                "value": "rgb(253, 253, 254)"
-            }
+    "blue-1500": {
+        "prop": "--spectrum-blue-1500",
+        "dark": {
+            "value": "rgb(238, 245, 255)"
+        },
+        "light": {
+            "value": "rgb(14, 24, 67)"
         }
     },
-    "gray-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(248, 248, 248)"
-            },
-            "dark": {
-                "value": "rgb(50, 50, 50)"
-            },
-            "darkest": {
-                "value": "rgb(29, 29, 29)"
-            },
-            "wireframe": {
-                "value": "rgb(244, 246, 252)"
-            }
+    "blue-1600": {
+        "prop": "--spectrum-blue-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(7, 11, 30)"
         }
     },
-    "gray-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(230, 230, 230)"
-            },
-            "dark": {
-                "value": "rgb(63, 63, 63)"
-            },
-            "darkest": {
-                "value": "rgb(48, 48, 48)"
-            },
-            "wireframe": {
-                "value": "rgb(230, 236, 248)"
-            }
+    "blue-200": {
+        "prop": "--spectrum-blue-200",
+        "light": {
+            "value": "rgb(229, 240, 254)"
+        },
+        "dark": {
+            "value": "rgb(15, 28, 82)"
         }
     },
-    "gray-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(213, 213, 213)"
-            },
-            "dark": {
-                "value": "rgb(84, 84, 84)"
-            },
-            "darkest": {
-                "value": "rgb(75, 75, 75)"
-            },
-            "wireframe": {
-                "value": "rgb(210, 220, 243)"
-            }
+    "blue-300": {
+        "prop": "--spectrum-blue-300",
+        "light": {
+            "value": "rgb(203, 226, 254)"
+        },
+        "dark": {
+            "value": "rgb(12, 33, 117)"
         }
     },
-    "gray-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(177, 177, 177)"
-            },
-            "dark": {
-                "value": "rgb(112, 112, 112)"
-            },
-            "darkest": {
-                "value": "rgb(106, 106, 106)"
-            },
-            "wireframe": {
-                "value": "rgb(183, 200, 235)"
-            }
+    "blue-400": {
+        "prop": "--spectrum-blue-400",
+        "light": {
+            "value": "rgb(172, 207, 253)"
+        },
+        "dark": {
+            "value": "rgb(18, 45, 154)"
         }
     },
-    "gray-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(144, 144, 144)"
-            },
-            "dark": {
-                "value": "rgb(144, 144, 144)"
-            },
-            "darkest": {
-                "value": "rgb(141, 141, 141)"
-            },
-            "wireframe": {
-                "value": "rgb(152, 176, 226)"
-            }
+    "blue-500": {
+        "prop": "--spectrum-blue-500",
+        "light": {
+            "value": "rgb(142, 185, 252)"
+        },
+        "dark": {
+            "value": "rgb(26, 58, 195)"
         }
     },
-    "gray-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(109, 109, 109)"
-            },
-            "dark": {
-                "value": "rgb(178, 178, 178)"
-            },
-            "darkest": {
-                "value": "rgb(176, 176, 176)"
-            },
-            "wireframe": {
-                "value": "rgb(113, 144, 210)"
-            }
+    "blue-600": {
+        "prop": "--spectrum-blue-600",
+        "light": {
+            "value": "rgb(114, 158, 253)"
+        },
+        "dark": {
+            "value": "rgb(37, 73, 229)"
         }
     },
-    "gray-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(70, 70, 70)"
-            },
-            "dark": {
-                "value": "rgb(209, 209, 209)"
-            },
-            "darkest": {
-                "value": "rgb(208, 208, 208)"
-            },
-            "wireframe": {
-                "value": "rgb(78, 112, 187)"
-            }
+    "blue-700": {
+        "prop": "--spectrum-blue-700",
+        "light": {
+            "value": "rgb(93, 137, 255)"
+        },
+        "dark": {
+            "value": "rgb(52, 91, 248)"
         }
     },
-    "gray-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(34, 34, 34)"
-            },
-            "dark": {
-                "value": "rgb(235, 235, 235)"
-            },
-            "darkest": {
-                "value": "rgb(235, 235, 235)"
-            },
-            "wireframe": {
-                "value": "rgb(73, 110, 194)"
-            }
+    "blue-800": {
+        "prop": "--spectrum-blue-800",
+        "light": {
+            "value": "rgb(75, 117, 255)"
+        },
+        "dark": {
+            "value": "rgb(64, 105, 253)"
         }
     },
-    "gray-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 0, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "darkest": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(72, 110, 194)"
-            }
+    "blue-900": {
+        "prop": "--spectrum-blue-900",
+        "light": {
+            "value": "rgb(59, 99, 251)"
+        },
+        "dark": {
+            "value": "rgb(86, 129, 255)"
+        }
+    },
+    "brown-100": {
+        "prop": "--spectrum-brown-100",
+        "dark": {
+            "value": "rgb(35, 24, 8)"
+        },
+        "light": {
+            "value": "rgb(252, 247, 242)"
+        }
+    },
+    "brown-1000": {
+        "prop": "--spectrum-brown-1000",
+        "dark": {
+            "value": "rgb(181, 147, 98)"
+        },
+        "light": {
+            "value": "rgb(119, 91, 50)"
+        }
+    },
+    "brown-1100": {
+        "prop": "--spectrum-brown-1100",
+        "dark": {
+            "value": "rgb(199, 163, 112)"
+        },
+        "light": {
+            "value": "rgb(103, 76, 35)"
+        }
+    },
+    "brown-1200": {
+        "prop": "--spectrum-brown-1200",
+        "dark": {
+            "value": "rgb(222, 185, 130)"
+        },
+        "light": {
+            "value": "rgb(88, 61, 21)"
+        }
+    },
+    "brown-1300": {
+        "prop": "--spectrum-brown-1300",
+        "dark": {
+            "value": "rgb(232, 207, 169)"
+        },
+        "light": {
+            "value": "rgb(70, 49, 17)"
+        }
+    },
+    "brown-1400": {
+        "prop": "--spectrum-brown-1400",
+        "dark": {
+            "value": "rgb(242, 227, 206)"
+        },
+        "light": {
+            "value": "rgb(52, 37, 13)"
+        }
+    },
+    "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)"
+        },
+        "light": {
+            "value": "rgb(16, 12, 4)"
+        }
+    },
+    "brown-200": {
+        "prop": "--spectrum-brown-200",
+        "dark": {
+            "value": "rgb(44, 31, 11)"
+        },
+        "light": {
+            "value": "rgb(247, 238, 225)"
+        }
+    },
+    "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)"
         }
     },
-    "blue-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(224, 242, 255)"
-            },
-            "dark": {
-                "value": "rgb(0, 56, 119)"
-            },
-            "darkest": {
-                "value": "rgb(0, 38, 81)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "celery-100": {
+        "prop": "--spectrum-celery-100",
+        "light": {
+            "value": "rgb(235, 255, 220)"
+        },
+        "dark": {
+            "value": "rgb(11, 31, 0)"
         }
     },
-    "blue-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(202, 232, 255)"
-            },
-            "dark": {
-                "value": "rgb(0, 65, 138)"
-            },
-            "darkest": {
-                "value": "rgb(0, 50, 106)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "celery-1000": {
+        "prop": "--spectrum-celery-1000",
+        "light": {
+            "value": "rgb(52, 109, 12)"
+        },
+        "dark": {
+            "value": "rgb(88, 172, 28)"
         }
     },
-    "blue-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(181, 222, 255)"
-            },
-            "dark": {
-                "value": "rgb(0, 77, 163)"
-            },
-            "darkest": {
-                "value": "rgb(0, 64, 135)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "celery-1100": {
+        "prop": "--spectrum-celery-1100",
+        "light": {
+            "value": "rgb(44, 92, 9)"
+        },
+        "dark": {
+            "value": "rgb(100, 190, 35)"
         }
     },
-    "blue-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(150, 206, 253)"
-            },
-            "dark": {
-                "value": "rgb(0, 89, 194)"
-            },
-            "darkest": {
-                "value": "rgb(0, 78, 166)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "celery-1200": {
+        "prop": "--spectrum-celery-1200",
+        "light": {
+            "value": "rgb(35, 75, 6)"
+        },
+        "dark": {
+            "value": "rgb(116, 213, 46)"
         }
     },
-    "blue-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(120, 187, 250)"
-            },
-            "dark": {
-                "value": "rgb(3, 103, 224)"
-            },
-            "darkest": {
-                "value": "rgb(0, 92, 200)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "celery-1300": {
+        "prop": "--spectrum-celery-1300",
+        "light": {
+            "value": "rgb(27, 60, 3)"
+        },
+        "dark": {
+            "value": "rgb(136, 234, 65)"
         }
     },
-    "blue-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(89, 167, 246)"
-            },
-            "dark": {
-                "value": "rgb(19, 121, 243)"
-            },
-            "darkest": {
-                "value": "rgb(6, 108, 231)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "celery-1400": {
+        "prop": "--spectrum-celery-1400",
+        "light": {
+            "value": "rgb(19, 46, 0)"
+        },
+        "dark": {
+            "value": "rgb(170, 251, 112)"
         }
     },
-    "blue-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(56, 146, 243)"
-            },
-            "dark": {
-                "value": "rgb(52, 143, 244)"
-            },
-            "darkest": {
-                "value": "rgb(29, 128, 245)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "celery-1500": {
+        "prop": "--spectrum-celery-1500",
+        "dark": {
+            "value": "rgb(222, 255, 198)"
+        },
+        "light": {
+            "value": "rgb(12, 33, 0)"
         }
     },
-    "blue-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(20, 122, 243)"
-            },
-            "dark": {
-                "value": "rgb(84, 163, 246)"
-            },
-            "darkest": {
-                "value": "rgb(64, 150, 243)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "celery-1600": {
+        "prop": "--spectrum-celery-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(4, 15, 0)"
         }
     },
-    "blue-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(2, 101, 220)"
-            },
-            "dark": {
-                "value": "rgb(114, 183, 249)"
-            },
-            "darkest": {
-                "value": "rgb(94, 170, 247)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "celery-200": {
+        "prop": "--spectrum-celery-200",
+        "light": {
+            "value": "rgb(197, 255, 156)"
+        },
+        "dark": {
+            "value": "rgb(15, 38, 0)"
         }
     },
-    "blue-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 84, 182)"
-            },
-            "dark": {
-                "value": "rgb(143, 202, 252)"
-            },
-            "darkest": {
-                "value": "rgb(124, 189, 250)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "celery-300": {
+        "prop": "--spectrum-celery-300",
+        "light": {
+            "value": "rgb(157, 247, 92)"
+        },
+        "dark": {
+            "value": "rgb(21, 51, 1)"
         }
     },
-    "blue-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 68, 145)"
-            },
-            "dark": {
-                "value": "rgb(174, 219, 254)"
-            },
-            "darkest": {
-                "value": "rgb(152, 206, 253)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "celery-400": {
+        "prop": "--spectrum-celery-400",
+        "light": {
+            "value": "rgb(129, 228, 58)"
+        },
+        "dark": {
+            "value": "rgb(31, 67, 4)"
         }
     },
-    "blue-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 53, 113)"
-            },
-            "dark": {
-                "value": "rgb(204, 233, 255)"
-            },
-            "darkest": {
-                "value": "rgb(179, 222, 254)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "celery-500": {
+        "prop": "--spectrum-celery-500",
+        "light": {
+            "value": "rgb(110, 206, 42)"
+        },
+        "dark": {
+            "value": "rgb(41, 86, 8)"
         }
     },
-    "blue-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 39, 84)"
-            },
-            "dark": {
-                "value": "rgb(232, 246, 255)"
-            },
-            "darkest": {
-                "value": "rgb(206, 234, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "celery-600": {
+        "prop": "--spectrum-celery-600",
+        "light": {
+            "value": "rgb(93, 180, 31)"
+        },
+        "dark": {
+            "value": "rgb(50, 105, 11)"
         }
     },
-    "blue-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 28, 60)"
-            },
-            "dark": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "darkest": {
-                "value": "rgb(227, 243, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "celery-700": {
+        "prop": "--spectrum-celery-700",
+        "light": {
+            "value": "rgb(82, 161, 25)"
+        },
+        "dark": {
+            "value": "rgb(60, 122, 15)"
         }
     },
-    "red-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 235, 231)"
-            },
-            "dark": {
-                "value": "rgb(123, 0, 0)"
-            },
-            "darkest": {
-                "value": "rgb(87, 0, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "celery-800": {
+        "prop": "--spectrum-celery-800",
+        "light": {
+            "value": "rgb(72, 144, 20)"
+        },
+        "dark": {
+            "value": "rgb(66, 134, 18)"
         }
     },
-    "red-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 221, 214)"
-            },
-            "dark": {
-                "value": "rgb(141, 0, 0)"
-            },
-            "darkest": {
-                "value": "rgb(110, 0, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "celery-900": {
+        "prop": "--spectrum-celery-900",
+        "light": {
+            "value": "rgb(64, 129, 17)"
+        },
+        "dark": {
+            "value": "rgb(78, 154, 23)"
         }
     },
-    "red-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 205, 195)"
-            },
-            "dark": {
-                "value": "rgb(165, 0, 0)"
-            },
-            "darkest": {
-                "value": "rgb(138, 0, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "chartreuse-100": {
+        "prop": "--spectrum-chartreuse-100",
+        "light": {
+            "value": "rgb(246, 251, 222)"
+        },
+        "dark": {
+            "value": "rgb(23, 28, 0)"
         }
     },
-    "red-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 183, 169)"
-            },
-            "dark": {
-                "value": "rgb(190, 4, 3)"
-            },
-            "darkest": {
-                "value": "rgb(167, 0, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "chartreuse-1000": {
+        "prop": "--spectrum-chartreuse-1000",
+        "light": {
+            "value": "rgb(86, 103, 0)"
+        },
+        "dark": {
+            "value": "rgb(136, 164, 0)"
         }
     },
-    "red-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 155, 136)"
-            },
-            "dark": {
-                "value": "rgb(215, 25, 19)"
-            },
-            "darkest": {
-                "value": "rgb(196, 7, 6)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "chartreuse-1100": {
+        "prop": "--spectrum-chartreuse-1100",
+        "light": {
+            "value": "rgb(73, 87, 0)"
+        },
+        "dark": {
+            "value": "rgb(151, 181, 0)"
         }
     },
-    "red-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 124, 101)"
-            },
-            "dark": {
-                "value": "rgb(234, 56, 41)"
-            },
-            "darkest": {
-                "value": "rgb(221, 33, 24)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "chartreuse-1200": {
+        "prop": "--spectrum-chartreuse-1200",
+        "light": {
+            "value": "rgb(60, 71, 0)"
+        },
+        "dark": {
+            "value": "rgb(169, 203, 0)"
         }
     },
-    "red-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(247, 92, 70)"
-            },
-            "dark": {
-                "value": "rgb(246, 88, 67)"
-            },
-            "darkest": {
-                "value": "rgb(238, 67, 49)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "chartreuse-1300": {
+        "prop": "--spectrum-chartreuse-1300",
+        "light": {
+            "value": "rgb(47, 57, 0)"
+        },
+        "dark": {
+            "value": "rgb(187, 225, 0)"
         }
     },
-    "red-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(234, 56, 41)"
-            },
-            "dark": {
-                "value": "rgb(255, 117, 94)"
-            },
-            "darkest": {
-                "value": "rgb(249, 99, 76)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "chartreuse-1400": {
+        "prop": "--spectrum-chartreuse-1400",
+        "light": {
+            "value": "rgb(35, 43, 0)"
+        },
+        "dark": {
+            "value": "rgb(219, 240, 117)"
         }
     },
-    "red-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(211, 21, 16)"
-            },
-            "dark": {
-                "value": "rgb(255, 149, 129)"
-            },
-            "darkest": {
-                "value": "rgb(255, 129, 107)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "chartreuse-1500": {
+        "prop": "--spectrum-chartreuse-1500",
+        "dark": {
+            "value": "rgb(242, 249, 206)"
+        },
+        "light": {
+            "value": "rgb(25, 30, 0)"
         }
     },
-    "red-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(180, 0, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 176, 161)"
-            },
-            "darkest": {
-                "value": "rgb(255, 158, 140)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "chartreuse-1600": {
+        "prop": "--spectrum-chartreuse-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(11, 14, 0)"
         }
     },
-    "red-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(147, 0, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 201, 189)"
-            },
-            "darkest": {
-                "value": "rgb(255, 183, 169)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "chartreuse-200": {
+        "prop": "--spectrum-chartreuse-200",
+        "light": {
+            "value": "rgb(234, 246, 173)"
+        },
+        "dark": {
+            "value": "rgb(30, 36, 0)"
         }
     },
-    "red-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(116, 0, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 222, 216)"
-            },
-            "darkest": {
-                "value": "rgb(255, 205, 195)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "chartreuse-300": {
+        "prop": "--spectrum-chartreuse-300",
+        "light": {
+            "value": "rgb(208, 236, 70)"
+        },
+        "dark": {
+            "value": "rgb(39, 47, 0)"
         }
     },
-    "red-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(89, 0, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 241, 238)"
-            },
-            "darkest": {
-                "value": "rgb(255, 223, 217)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "chartreuse-400": {
+        "prop": "--spectrum-chartreuse-400",
+        "light": {
+            "value": "rgb(182, 219, 0)"
+        },
+        "dark": {
+            "value": "rgb(53, 63, 0)"
         }
     },
-    "red-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(67, 0, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "darkest": {
-                "value": "rgb(255, 237, 234)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "chartreuse-500": {
+        "prop": "--spectrum-chartreuse-500",
+        "light": {
+            "value": "rgb(163, 196, 0)"
+        },
+        "dark": {
+            "value": "rgb(68, 82, 0)"
         }
     },
-    "orange-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 236, 204)"
-            },
-            "dark": {
-                "value": "rgb(102, 37, 0)"
-            },
-            "darkest": {
-                "value": "rgb(72, 24, 1)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "chartreuse-600": {
+        "prop": "--spectrum-chartreuse-600",
+        "light": {
+            "value": "rgb(143, 172, 0)"
+        },
+        "dark": {
+            "value": "rgb(83, 100, 0)"
         }
     },
-    "orange-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 223, 173)"
-            },
-            "dark": {
-                "value": "rgb(117, 45, 0)"
-            },
-            "darkest": {
-                "value": "rgb(92, 32, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "chartreuse-700": {
+        "prop": "--spectrum-chartreuse-700",
+        "light": {
+            "value": "rgb(128, 153, 0)"
+        },
+        "dark": {
+            "value": "rgb(97, 116, 0)"
         }
     },
-    "orange-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(253, 210, 145)"
-            },
-            "dark": {
-                "value": "rgb(137, 55, 0)"
-            },
-            "darkest": {
-                "value": "rgb(115, 43, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "chartreuse-800": {
+        "prop": "--spectrum-chartreuse-800",
+        "light": {
+            "value": "rgb(114, 137, 0)"
+        },
+        "dark": {
+            "value": "rgb(106, 127, 0)"
         }
     },
-    "orange-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 187, 99)"
-            },
-            "dark": {
-                "value": "rgb(158, 66, 0)"
-            },
-            "darkest": {
-                "value": "rgb(138, 55, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "chartreuse-900": {
+        "prop": "--spectrum-chartreuse-900",
+        "light": {
+            "value": "rgb(102, 122, 0)"
+        },
+        "dark": {
+            "value": "rgb(122, 147, 0)"
+        }
+    },
+    "cinnamon-100": {
+        "prop": "--spectrum-cinnamon-100",
+        "dark": {
+            "value": "rgb(48, 17, 4)"
+        },
+        "light": {
+            "value": "rgb(253, 247, 243)"
+        }
+    },
+    "cinnamon-1000": {
+        "prop": "--spectrum-cinnamon-1000",
+        "dark": {
+            "value": "rgb(206, 136, 99)"
+        },
+        "light": {
+            "value": "rgb(147, 77, 43)"
+        }
+    },
+    "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)"
         }
     },
-    "orange-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 160, 55)"
-            },
-            "dark": {
-                "value": "rgb(180, 78, 0)"
-            },
-            "darkest": {
-                "value": "rgb(162, 68, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "cyan-100": {
+        "prop": "--spectrum-cyan-100",
+        "light": {
+            "value": "rgb(238, 250, 254)"
+        },
+        "dark": {
+            "value": "rgb(0, 29, 39)"
         }
     },
-    "orange-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(246, 133, 17)"
-            },
-            "dark": {
-                "value": "rgb(202, 93, 0)"
-            },
-            "darkest": {
-                "value": "rgb(186, 82, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "cyan-1000": {
+        "prop": "--spectrum-cyan-1000",
+        "light": {
+            "value": "rgb(4, 102, 145)"
+        },
+        "dark": {
+            "value": "rgb(38, 159, 244)"
         }
     },
-    "orange-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(228, 111, 0)"
-            },
-            "dark": {
-                "value": "rgb(225, 109, 0)"
-            },
-            "darkest": {
-                "value": "rgb(210, 98, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "cyan-1100": {
+        "prop": "--spectrum-cyan-1100",
+        "light": {
+            "value": "rgb(0, 87, 121)"
+        },
+        "dark": {
+            "value": "rgb(63, 177, 255)"
         }
     },
-    "orange-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(203, 93, 0)"
-            },
-            "dark": {
-                "value": "rgb(244, 129, 12)"
-            },
-            "darkest": {
-                "value": "rgb(232, 116, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "cyan-1200": {
+        "prop": "--spectrum-cyan-1200",
+        "light": {
+            "value": "rgb(0, 71, 98)"
+        },
+        "dark": {
+            "value": "rgb(107, 199, 255)"
         }
     },
-    "orange-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(177, 76, 0)"
-            },
-            "dark": {
-                "value": "rgb(254, 154, 46)"
-            },
-            "darkest": {
-                "value": "rgb(249, 137, 23)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "cyan-1300": {
+        "prop": "--spectrum-cyan-1300",
+        "light": {
+            "value": "rgb(0, 57, 78)"
+        },
+        "dark": {
+            "value": "rgb(152, 219, 255)"
         }
     },
-    "orange-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(149, 61, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 181, 88)"
-            },
-            "darkest": {
-                "value": "rgb(255, 162, 59)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "cyan-1400": {
+        "prop": "--spectrum-cyan-1400",
+        "light": {
+            "value": "rgb(0, 43, 59)"
+        },
+        "dark": {
+            "value": "rgb(195, 236, 252)"
         }
     },
-    "orange-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(122, 47, 0)"
-            },
-            "dark": {
-                "value": "rgb(253, 206, 136)"
-            },
-            "darkest": {
-                "value": "rgb(255, 188, 102)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "cyan-1500": {
+        "prop": "--spectrum-cyan-1500",
+        "dark": {
+            "value": "rgb(230, 248, 253)"
+        },
+        "light": {
+            "value": "rgb(0, 31, 43)"
         }
     },
-    "orange-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(97, 35, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 225, 179)"
-            },
-            "darkest": {
-                "value": "rgb(253, 210, 145)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "cyan-1600": {
+        "prop": "--spectrum-cyan-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(0, 14, 20)"
         }
     },
-    "orange-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(73, 25, 1)"
-            },
-            "dark": {
-                "value": "rgb(255, 242, 221)"
-            },
-            "darkest": {
-                "value": "rgb(255, 226, 181)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "cyan-200": {
+        "prop": "--spectrum-cyan-200",
+        "light": {
+            "value": "rgb(217, 244, 253)"
+        },
+        "dark": {
+            "value": "rgb(0, 36, 49)"
         }
     },
-    "orange-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(53, 18, 1)"
-            },
-            "dark": {
-                "value": "rgb(255, 253, 249)"
-            },
-            "darkest": {
-                "value": "rgb(255, 239, 213)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "cyan-300": {
+        "prop": "--spectrum-cyan-300",
+        "light": {
+            "value": "rgb(183, 231, 252)"
+        },
+        "dark": {
+            "value": "rgb(0, 48, 65)"
         }
     },
-    "yellow-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(251, 241, 152)"
-            },
-            "dark": {
-                "value": "rgb(76, 54, 0)"
-            },
-            "darkest": {
-                "value": "rgb(53, 36, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "cyan-400": {
+        "prop": "--spectrum-cyan-400",
+        "light": {
+            "value": "rgb(138, 213, 255)"
+        },
+        "dark": {
+            "value": "rgb(0, 64, 88)"
         }
     },
-    "yellow-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(248, 231, 80)"
-            },
-            "dark": {
-                "value": "rgb(88, 64, 0)"
-            },
-            "darkest": {
-                "value": "rgb(68, 47, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "cyan-500": {
+        "prop": "--spectrum-cyan-500",
+        "light": {
+            "value": "rgb(92, 192, 255)"
+        },
+        "dark": {
+            "value": "rgb(0, 82, 113)"
         }
     },
-    "yellow-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(248, 217, 4)"
-            },
-            "dark": {
-                "value": "rgb(103, 76, 0)"
-            },
-            "darkest": {
-                "value": "rgb(86, 62, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "cyan-600": {
+        "prop": "--spectrum-cyan-600",
+        "light": {
+            "value": "rgb(48, 167, 254)"
+        },
+        "dark": {
+            "value": "rgb(3, 99, 140)"
         }
     },
-    "yellow-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(232, 198, 0)"
-            },
-            "dark": {
-                "value": "rgb(119, 89, 0)"
-            },
-            "darkest": {
-                "value": "rgb(103, 77, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "cyan-700": {
+        "prop": "--spectrum-cyan-700",
+        "light": {
+            "value": "rgb(29, 149, 231)"
+        },
+        "dark": {
+            "value": "rgb(8, 115, 168)"
         }
     },
-    "yellow-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(215, 179, 0)"
-            },
-            "dark": {
-                "value": "rgb(136, 104, 0)"
-            },
-            "darkest": {
-                "value": "rgb(122, 92, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "cyan-800": {
+        "prop": "--spectrum-cyan-800",
+        "light": {
+            "value": "rgb(18, 134, 205)"
+        },
+        "dark": {
+            "value": "rgb(13, 125, 186)"
         }
     },
-    "yellow-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(196, 159, 0)"
-            },
-            "dark": {
-                "value": "rgb(155, 120, 0)"
-            },
-            "darkest": {
-                "value": "rgb(141, 108, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "cyan-900": {
+        "prop": "--spectrum-cyan-900",
+        "light": {
+            "value": "rgb(11, 120, 179)"
+        },
+        "dark": {
+            "value": "rgb(24, 142, 220)"
+        }
+    },
+    "disabled-background-color": {
+        "prop": "--spectrum-disabled-background-color",
+        "ref": "var(--spectrum-gray-100)",
+        "light": {
+            "value": "rgb(233, 233, 233)"
+        },
+        "dark": {
+            "value": "rgb(44, 44, 44)"
+        }
+    },
+    "disabled-border-color": {
+        "prop": "--spectrum-disabled-border-color",
+        "ref": "var(--spectrum-gray-300)",
+        "light": {
+            "value": "rgb(218, 218, 218)"
+        },
+        "dark": {
+            "value": "rgb(57, 57, 57)"
+        }
+    },
+    "disabled-content-color": {
+        "prop": "--spectrum-disabled-content-color",
+        "ref": "var(--spectrum-gray-400)",
+        "light": {
+            "value": "rgb(198, 198, 198)"
+        },
+        "dark": {
+            "value": "rgb(68, 68, 68)"
+        }
+    },
+    "disabled-static-black-background-color": {
+        "prop": "--spectrum-disabled-static-black-background-color",
+        "ref": "var(--spectrum-transparent-black-100)",
+        "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.15)"
+    },
+    "disabled-static-black-content-color": {
+        "prop": "--spectrum-disabled-static-black-content-color",
+        "ref": "var(--spectrum-transparent-black-400)",
+        "value": "rgba(0, 0, 0, 0.22)"
+    },
+    "disabled-static-white-background-color": {
+        "prop": "--spectrum-disabled-static-white-background-color",
+        "ref": "var(--spectrum-transparent-white-100)",
+        "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.17)"
+    },
+    "disabled-static-white-content-color": {
+        "prop": "--spectrum-disabled-static-white-content-color",
+        "ref": "var(--spectrum-transparent-white-400)",
+        "value": "rgba(255, 255, 255, 0.21)"
+    },
+    "drop-shadow-color": {
+        "prop": "--spectrum-drop-shadow-color",
+        "ref": "var(--spectrum-drop-shadow-color-100)",
+        "light": {
+            "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)"
         }
     },
-    "yellow-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(176, 140, 0)"
-            },
-            "dark": {
-                "value": "rgb(174, 137, 0)"
-            },
-            "darkest": {
-                "value": "rgb(161, 126, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "fuchsia-100": {
+        "prop": "--spectrum-fuchsia-100",
+        "light": {
+            "value": "rgb(254, 246, 255)"
+        },
+        "dark": {
+            "value": "rgb(50, 0, 61)"
         }
     },
-    "yellow-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(155, 120, 0)"
-            },
-            "dark": {
-                "value": "rgb(192, 156, 0)"
-            },
-            "darkest": {
-                "value": "rgb(180, 144, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "fuchsia-1000": {
+        "prop": "--spectrum-fuchsia-1000",
+        "light": {
+            "value": "rgb(156, 40, 175)"
+        },
+        "dark": {
+            "value": "rgb(232, 91, 253)"
         }
     },
-    "yellow-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(133, 102, 0)"
-            },
-            "dark": {
-                "value": "rgb(211, 174, 0)"
-            },
-            "darkest": {
-                "value": "rgb(199, 162, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "fuchsia-1100": {
+        "prop": "--spectrum-fuchsia-1100",
+        "light": {
+            "value": "rgb(135, 27, 154)"
+        },
+        "dark": {
+            "value": "rgb(240, 122, 255)"
         }
     },
-    "yellow-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(112, 83, 0)"
-            },
-            "dark": {
-                "value": "rgb(228, 194, 0)"
-            },
-            "darkest": {
-                "value": "rgb(216, 181, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "fuchsia-1200": {
+        "prop": "--spectrum-fuchsia-1200",
+        "light": {
+            "value": "rgb(113, 15, 131)"
+        },
+        "dark": {
+            "value": "rgb(245, 159, 255)"
         }
     },
-    "yellow-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(91, 67, 0)"
-            },
-            "dark": {
-                "value": "rgb(244, 213, 0)"
-            },
-            "darkest": {
-                "value": "rgb(233, 199, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "fuchsia-1300": {
+        "prop": "--spectrum-fuchsia-1300",
+        "light": {
+            "value": "rgb(92, 4, 109)"
+        },
+        "dark": {
+            "value": "rgb(248, 191, 255)"
         }
     },
-    "yellow-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(72, 51, 0)"
-            },
-            "dark": {
-                "value": "rgb(249, 232, 92)"
-            },
-            "darkest": {
-                "value": "rgb(247, 216, 4)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "fuchsia-1400": {
+        "prop": "--spectrum-fuchsia-1400",
+        "light": {
+            "value": "rgb(72, 0, 88)"
+        },
+        "dark": {
+            "value": "rgb(251, 219, 255)"
         }
     },
-    "yellow-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(54, 37, 0)"
-            },
-            "dark": {
-                "value": "rgb(252, 246, 187)"
-            },
-            "darkest": {
-                "value": "rgb(249, 233, 97)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "fuchsia-1500": {
+        "prop": "--spectrum-fuchsia-1500",
+        "dark": {
+            "value": "rgb(253, 241, 255)"
+        },
+        "light": {
+            "value": "rgb(54, 0, 66)"
         }
     },
-    "yellow-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(40, 26, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "darkest": {
-                "value": "rgb(252, 243, 170)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "fuchsia-1600": {
+        "prop": "--spectrum-fuchsia-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(29, 0, 35)"
         }
     },
-    "chartreuse-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(219, 252, 110)"
-            },
-            "dark": {
-                "value": "rgb(48, 64, 0)"
-            },
-            "darkest": {
-                "value": "rgb(32, 43, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "fuchsia-200": {
+        "prop": "--spectrum-fuchsia-200",
+        "light": {
+            "value": "rgb(253, 233, 255)"
+        },
+        "dark": {
+            "value": "rgb(61, 0, 74)"
         }
     },
-    "chartreuse-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(203, 244, 67)"
-            },
-            "dark": {
-                "value": "rgb(55, 74, 0)"
-            },
-            "darkest": {
-                "value": "rgb(42, 56, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "fuchsia-300": {
+        "prop": "--spectrum-fuchsia-300",
+        "light": {
+            "value": "rgb(250, 211, 255)"
+        },
+        "dark": {
+            "value": "rgb(79, 0, 95)"
         }
     },
-    "chartreuse-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(188, 233, 42)"
-            },
-            "dark": {
-                "value": "rgb(65, 87, 0)"
-            },
-            "darkest": {
-                "value": "rgb(54, 72, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "fuchsia-400": {
+        "prop": "--spectrum-fuchsia-400",
+        "light": {
+            "value": "rgb(247, 181, 255)"
+        },
+        "dark": {
+            "value": "rgb(102, 9, 120)"
         }
     },
-    "chartreuse-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(170, 216, 22)"
-            },
-            "dark": {
-                "value": "rgb(76, 102, 0)"
-            },
-            "darkest": {
-                "value": "rgb(66, 88, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "fuchsia-500": {
+        "prop": "--spectrum-fuchsia-500",
+        "light": {
+            "value": "rgb(243, 147, 255)"
+        },
+        "dark": {
+            "value": "rgb(127, 23, 146)"
         }
     },
-    "chartreuse-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(152, 197, 10)"
-            },
-            "dark": {
-                "value": "rgb(89, 118, 0)"
-            },
-            "darkest": {
-                "value": "rgb(79, 105, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "fuchsia-600": {
+        "prop": "--spectrum-fuchsia-600",
+        "light": {
+            "value": "rgb(236, 105, 255)"
+        },
+        "dark": {
+            "value": "rgb(151, 38, 170)"
         }
     },
-    "chartreuse-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(135, 177, 3)"
-            },
-            "dark": {
-                "value": "rgb(102, 136, 0)"
-            },
-            "darkest": {
-                "value": "rgb(93, 123, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "fuchsia-700": {
+        "prop": "--spectrum-fuchsia-700",
+        "light": {
+            "value": "rgb(223, 77, 245)"
+        },
+        "dark": {
+            "value": "rgb(173, 51, 192)"
         }
     },
-    "chartreuse-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(118, 156, 0)"
-            },
-            "dark": {
-                "value": "rgb(117, 154, 0)"
-            },
-            "darkest": {
-                "value": "rgb(107, 142, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "fuchsia-800": {
+        "prop": "--spectrum-fuchsia-800",
+        "light": {
+            "value": "rgb(200, 68, 220)"
+        },
+        "dark": {
+            "value": "rgb(186, 60, 206)"
         }
     },
-    "chartreuse-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(103, 136, 0)"
-            },
-            "dark": {
-                "value": "rgb(132, 173, 1)"
-            },
-            "darkest": {
-                "value": "rgb(122, 161, 0)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "fuchsia-900": {
+        "prop": "--spectrum-fuchsia-900",
+        "light": {
+            "value": "rgb(181, 57, 200)"
+        },
+        "dark": {
+            "value": "rgb(213, 73, 235)"
         }
     },
-    "chartreuse-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(87, 116, 0)"
-            },
-            "dark": {
-                "value": "rgb(148, 192, 8)"
-            },
-            "darkest": {
-                "value": "rgb(138, 180, 3)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "gray-100": {
+        "prop": "--spectrum-gray-100",
+        "light": {
+            "value": "rgb(233, 233, 233)"
+        },
+        "dark": {
+            "value": "rgb(44, 44, 44)"
         }
     },
-    "chartreuse-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(72, 96, 0)"
-            },
-            "dark": {
-                "value": "rgb(166, 211, 18)"
-            },
-            "darkest": {
-                "value": "rgb(154, 198, 11)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "gray-1000": {
+        "prop": "--spectrum-gray-1000",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(0, 0, 0)"
         }
     },
-    "chartreuse-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(58, 77, 0)"
-            },
-            "dark": {
-                "value": "rgb(184, 229, 37)"
-            },
-            "darkest": {
-                "value": "rgb(170, 216, 22)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "gray-200": {
+        "prop": "--spectrum-gray-200",
+        "light": {
+            "value": "rgb(225, 225, 225)"
+        },
+        "dark": {
+            "value": "rgb(50, 50, 50)"
         }
     },
-    "chartreuse-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(44, 59, 0)"
-            },
-            "dark": {
-                "value": "rgb(205, 245, 71)"
-            },
-            "darkest": {
-                "value": "rgb(187, 232, 41)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "gray-25": {
+        "prop": "--spectrum-gray-25",
+        "dark": {
+            "value": "rgb(17, 17, 17)"
+        },
+        "light": {
+            "value": "rgb(255, 255, 255)"
         }
     },
-    "chartreuse-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(33, 44, 0)"
-            },
-            "dark": {
-                "value": "rgb(231, 254, 154)"
-            },
-            "darkest": {
-                "value": "rgb(205, 246, 72)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "gray-300": {
+        "prop": "--spectrum-gray-300",
+        "light": {
+            "value": "rgb(218, 218, 218)"
+        },
+        "dark": {
+            "value": "rgb(57, 57, 57)"
         }
     },
-    "chartreuse-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(24, 31, 0)"
-            },
-            "dark": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "darkest": {
-                "value": "rgb(225, 253, 132)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "gray-400": {
+        "prop": "--spectrum-gray-400",
+        "light": {
+            "value": "rgb(198, 198, 198)"
+        },
+        "dark": {
+            "value": "rgb(68, 68, 68)"
         }
     },
-    "celery-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(205, 252, 191)"
-            },
-            "dark": {
-                "value": "rgb(0, 69, 10)"
-            },
-            "darkest": {
-                "value": "rgb(0, 47, 7)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "gray-50": {
+        "prop": "--spectrum-gray-50",
+        "light": {
+            "value": "rgb(248, 248, 248)"
+        },
+        "dark": {
+            "value": "rgb(27, 27, 27)"
         }
     },
-    "celery-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(174, 246, 157)"
-            },
-            "dark": {
-                "value": "rgb(0, 80, 12)"
-            },
-            "darkest": {
-                "value": "rgb(0, 61, 9)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "gray-500": {
+        "prop": "--spectrum-gray-500",
+        "light": {
+            "value": "rgb(143, 143, 143)"
+        },
+        "dark": {
+            "value": "rgb(109, 109, 109)"
         }
     },
-    "celery-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(150, 238, 133)"
-            },
-            "dark": {
-                "value": "rgb(0, 94, 14)"
-            },
-            "darkest": {
-                "value": "rgb(0, 77, 12)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "gray-600": {
+        "prop": "--spectrum-gray-600",
+        "light": {
+            "value": "rgb(113, 113, 113)"
+        },
+        "dark": {
+            "value": "rgb(138, 138, 138)"
         }
     },
-    "celery-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(114, 224, 106)"
-            },
-            "dark": {
-                "value": "rgb(0, 109, 15)"
-            },
-            "darkest": {
-                "value": "rgb(0, 95, 15)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "gray-700": {
+        "prop": "--spectrum-gray-700",
+        "light": {
+            "value": "rgb(80, 80, 80)"
+        },
+        "dark": {
+            "value": "rgb(175, 175, 175)"
         }
     },
-    "celery-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(78, 207, 80)"
-            },
-            "dark": {
-                "value": "rgb(0, 127, 15)"
-            },
-            "darkest": {
-                "value": "rgb(0, 113, 15)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "gray-75": {
+        "prop": "--spectrum-gray-75",
+        "light": {
+            "value": "rgb(243, 243, 243)"
+        },
+        "dark": {
+            "value": "rgb(34, 34, 34)"
         }
     },
-    "celery-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(39, 187, 54)"
-            },
-            "dark": {
-                "value": "rgb(0, 145, 18)"
-            },
-            "darkest": {
-                "value": "rgb(0, 132, 15)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "gray-800": {
+        "prop": "--spectrum-gray-800",
+        "light": {
+            "value": "rgb(41, 41, 41)"
+        },
+        "dark": {
+            "value": "rgb(219, 219, 219)"
         }
     },
-    "celery-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(7, 167, 33)"
-            },
-            "dark": {
-                "value": "rgb(4, 165, 30)"
-            },
-            "darkest": {
-                "value": "rgb(0, 151, 20)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "gray-900": {
+        "prop": "--spectrum-gray-900",
+        "light": {
+            "value": "rgb(19, 19, 19)"
+        },
+        "dark": {
+            "value": "rgb(242, 242, 242)"
         }
     },
-    "celery-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 145, 18)"
-            },
-            "dark": {
-                "value": "rgb(34, 184, 51)"
-            },
-            "darkest": {
-                "value": "rgb(13, 171, 37)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "green-100": {
+        "prop": "--spectrum-green-100",
+        "light": {
+            "value": "rgb(237, 252, 241)"
+        },
+        "dark": {
+            "value": "rgb(0, 30, 23)"
         }
     },
-    "celery-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 124, 15)"
-            },
-            "dark": {
-                "value": "rgb(68, 202, 73)"
-            },
-            "darkest": {
-                "value": "rgb(45, 191, 58)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "green-1000": {
+        "prop": "--spectrum-green-1000",
+        "light": {
+            "value": "rgb(3, 110, 69)"
+        },
+        "dark": {
+            "value": "rgb(14, 175, 98)"
         }
     },
-    "celery-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 103, 15)"
-            },
-            "dark": {
-                "value": "rgb(105, 220, 99)"
-            },
-            "darkest": {
-                "value": "rgb(80, 208, 82)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "green-1100": {
+        "prop": "--spectrum-green-1100",
+        "light": {
+            "value": "rgb(2, 93, 60)"
+        },
+        "dark": {
+            "value": "rgb(24, 193, 110)"
         }
     },
-    "celery-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 83, 13)"
-            },
-            "dark": {
-                "value": "rgb(142, 235, 127)"
-            },
-            "darkest": {
-                "value": "rgb(115, 224, 107)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "green-1200": {
+        "prop": "--spectrum-green-1200",
+        "light": {
+            "value": "rgb(1, 76, 52)"
+        },
+        "dark": {
+            "value": "rgb(57, 215, 134)"
         }
     },
-    "celery-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 64, 10)"
-            },
-            "dark": {
-                "value": "rgb(180, 247, 162)"
-            },
-            "darkest": {
-                "value": "rgb(147, 237, 131)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "green-1300": {
+        "prop": "--spectrum-green-1300",
+        "light": {
+            "value": "rgb(0, 61, 44)"
+        },
+        "dark": {
+            "value": "rgb(126, 231, 172)"
         }
     },
-    "celery-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 48, 7)"
-            },
-            "dark": {
-                "value": "rgb(221, 253, 211)"
-            },
-            "darkest": {
-                "value": "rgb(180, 247, 162)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "green-1400": {
+        "prop": "--spectrum-green-1400",
+        "light": {
+            "value": "rgb(0, 46, 34)"
+        },
+        "dark": {
+            "value": "rgb(189, 241, 208)"
         }
     },
-    "celery-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 34, 5)"
-            },
-            "dark": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "darkest": {
-                "value": "rgb(213, 252, 202)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "green-1500": {
+        "prop": "--spectrum-green-1500",
+        "dark": {
+            "value": "rgb(229, 250, 236)"
+        },
+        "light": {
+            "value": "rgb(0, 33, 25)"
         }
     },
-    "green-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(206, 248, 224)"
-            },
-            "dark": {
-                "value": "rgb(4, 67, 41)"
-            },
-            "darkest": {
-                "value": "rgb(10, 44, 28)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "green-1600": {
+        "prop": "--spectrum-green-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(0, 15, 12)"
         }
     },
     "green-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(173, 244, 206)"
-            },
-            "dark": {
-                "value": "rgb(0, 78, 47)"
-            },
-            "darkest": {
-                "value": "rgb(7, 59, 36)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+        "prop": "--spectrum-green-200",
+        "light": {
+            "value": "rgb(215, 247, 225)"
+        },
+        "dark": {
+            "value": "rgb(0, 38, 29)"
         }
     },
     "green-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(137, 236, 188)"
-            },
-            "dark": {
-                "value": "rgb(0, 92, 56)"
-            },
-            "darkest": {
-                "value": "rgb(0, 76, 46)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+        "prop": "--spectrum-green-300",
+        "light": {
+            "value": "rgb(173, 238, 197)"
+        },
+        "dark": {
+            "value": "rgb(0, 51, 38)"
         }
     },
     "green-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(103, 222, 168)"
-            },
-            "dark": {
-                "value": "rgb(0, 108, 67)"
-            },
-            "darkest": {
-                "value": "rgb(0, 93, 57)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+        "prop": "--spectrum-green-400",
+        "light": {
+            "value": "rgb(107, 227, 162)"
+        },
+        "dark": {
+            "value": "rgb(0, 68, 48)"
         }
     },
     "green-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(73, 204, 147)"
-            },
-            "dark": {
-                "value": "rgb(0, 125, 78)"
-            },
-            "darkest": {
-                "value": "rgb(0, 111, 69)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+        "prop": "--spectrum-green-500",
+        "light": {
+            "value": "rgb(43, 209, 125)"
+        },
+        "dark": {
+            "value": "rgb(2, 87, 58)"
         }
     },
     "green-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(47, 184, 128)"
-            },
-            "dark": {
-                "value": "rgb(0, 143, 93)"
-            },
-            "darkest": {
-                "value": "rgb(0, 130, 82)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+        "prop": "--spectrum-green-600",
+        "light": {
+            "value": "rgb(18, 184, 103)"
+        },
+        "dark": {
+            "value": "rgb(3, 106, 67)"
         }
     },
     "green-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(21, 164, 110)"
-            },
-            "dark": {
-                "value": "rgb(18, 162, 108)"
-            },
-            "darkest": {
-                "value": "rgb(0, 149, 98)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+        "prop": "--spectrum-green-700",
+        "light": {
+            "value": "rgb(11, 164, 93)"
+        },
+        "dark": {
+            "value": "rgb(4, 124, 75)"
         }
     },
     "green-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 143, 93)"
-            },
-            "dark": {
-                "value": "rgb(43, 180, 125)"
-            },
-            "darkest": {
-                "value": "rgb(28, 168, 114)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+        "prop": "--spectrum-green-800",
+        "light": {
+            "value": "rgb(7, 147, 85)"
+        },
+        "dark": {
+            "value": "rgb(6, 136, 80)"
         }
     },
     "green-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 122, 77)"
-            },
-            "dark": {
-                "value": "rgb(67, 199, 143)"
-            },
-            "darkest": {
-                "value": "rgb(52, 187, 132)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+        "prop": "--spectrum-green-900",
+        "light": {
+            "value": "rgb(5, 131, 78)"
+        },
+        "dark": {
+            "value": "rgb(9, 157, 89)"
+        }
+    },
+    "icon-color-blue-background": {
+        "prop": "--spectrum-icon-color-blue-background",
+        "ref": "var(--spectrum-blue-300)",
+        "light": {
+            "value": "rgb(229, 240, 254)"
+        },
+        "dark": {
+            "value": "rgb(12, 33, 117)"
+        }
+    },
+    "icon-color-blue-primary-default": {
+        "prop": "--spectrum-icon-color-blue-primary-default",
+        "ref": "var(--spectrum-blue-800)",
+        "light": {
+            "value": "rgb(59, 99, 251)"
+        },
+        "dark": {
+            "value": "rgb(64, 105, 253)"
+        }
+    },
+    "icon-color-blue-primary-down": {
+        "prop": "--spectrum-icon-color-blue-primary-down",
+        "ref": "var(--spectrum-blue-1000)",
+        "light": {
+            "value": "rgb(29, 62, 207)"
+        },
+        "dark": {
+            "value": "rgb(105, 149, 254)"
+        }
+    },
+    "icon-color-blue-primary-hover": {
+        "prop": "--spectrum-icon-color-blue-primary-hover",
+        "ref": "var(--spectrum-blue-900)",
+        "light": {
+            "value": "rgb(39, 77, 234)"
+        },
+        "dark": {
+            "value": "rgb(86, 129, 255)"
+        }
+    },
+    "icon-color-brown-background": {
+        "prop": "--spectrum-icon-color-brown-background",
+        "ref": "var(--spectrum-brown-400)",
+        "light": {
+            "value": "rgb(247, 238, 225)"
+        },
+        "dark": {
+            "value": "rgb(78, 55, 19)"
+        }
+    },
+    "icon-color-brown-primary-default": {
+        "prop": "--spectrum-icon-color-brown-primary-default",
+        "ref": "var(--spectrum-brown-700)",
+        "light": {
+            "value": "rgb(154, 123, 77)"
+        },
+        "dark": {
+            "value": "rgb(132, 104, 61)"
+        }
+    },
+    "icon-color-brown-primary-down": {
+        "prop": "--spectrum-icon-color-brown-primary-down",
+        "ref": "var(--spectrum-brown-900)",
+        "light": {
+            "value": "rgb(119, 91, 50)"
+        },
+        "dark": {
+            "value": "rgb(163, 132, 84)"
+        }
+    },
+    "icon-color-brown-primary-hover": {
+        "prop": "--spectrum-icon-color-brown-primary-hover",
+        "ref": "var(--spectrum-brown-800)",
+        "light": {
+            "value": "rgb(139, 109, 66)"
+        },
+        "dark": {
+            "value": "rgb(143, 114, 69)"
+        }
+    },
+    "icon-color-celery-background": {
+        "prop": "--spectrum-icon-color-celery-background",
+        "ref": "var(--spectrum-celery-400)",
+        "light": {
+            "value": "rgb(235, 255, 220)"
+        },
+        "dark": {
+            "value": "rgb(31, 67, 4)"
+        }
+    },
+    "icon-color-celery-primary-default": {
+        "prop": "--spectrum-icon-color-celery-primary-default",
+        "ref": "var(--spectrum-celery-900)",
+        "light": {
+            "value": "rgb(82, 161, 25)"
+        },
+        "dark": {
+            "value": "rgb(78, 154, 23)"
+        }
+    },
+    "icon-color-celery-primary-down": {
+        "prop": "--spectrum-icon-color-celery-primary-down",
+        "ref": "var(--spectrum-celery-1100)",
+        "light": {
+            "value": "rgb(64, 129, 17)"
+        },
+        "dark": {
+            "value": "rgb(100, 190, 35)"
+        }
+    },
+    "icon-color-celery-primary-hover": {
+        "prop": "--spectrum-icon-color-celery-primary-hover",
+        "ref": "var(--spectrum-celery-1000)",
+        "light": {
+            "value": "rgb(72, 144, 20)"
+        },
+        "dark": {
+            "value": "rgb(88, 172, 28)"
+        }
+    },
+    "icon-color-chartreuse-background": {
+        "prop": "--spectrum-icon-color-chartreuse-background",
+        "ref": "var(--spectrum-chartreuse-400)",
+        "light": {
+            "value": "rgb(234, 246, 173)"
+        },
+        "dark": {
+            "value": "rgb(53, 63, 0)"
+        }
+    },
+    "icon-color-chartreuse-primary-default": {
+        "prop": "--spectrum-icon-color-chartreuse-primary-default",
+        "ref": "var(--spectrum-chartreuse-1000)",
+        "light": {
+            "value": "rgb(143, 172, 0)"
+        },
+        "dark": {
+            "value": "rgb(136, 164, 0)"
+        }
+    },
+    "icon-color-chartreuse-primary-down": {
+        "prop": "--spectrum-icon-color-chartreuse-primary-down",
+        "ref": "var(--spectrum-chartreuse-1200)",
+        "light": {
+            "value": "rgb(114, 137, 0)"
+        },
+        "dark": {
+            "value": "rgb(169, 203, 0)"
+        }
+    },
+    "icon-color-chartreuse-primary-hover": {
+        "prop": "--spectrum-icon-color-chartreuse-primary-hover",
+        "ref": "var(--spectrum-chartreuse-1100)",
+        "light": {
+            "value": "rgb(128, 153, 0)"
+        },
+        "dark": {
+            "value": "rgb(151, 181, 0)"
+        }
+    },
+    "icon-color-cinnamon-background": {
+        "prop": "--spectrum-icon-color-cinnamon-background",
+        "ref": "var(--spectrum-cinnamon-300)",
+        "light": {
+            "value": "rgb(249, 236, 229)"
+        },
+        "dark": {
+            "value": "rgb(79, 28, 7)"
+        }
+    },
+    "icon-color-cinnamon-primary-default": {
+        "prop": "--spectrum-icon-color-cinnamon-primary-default",
+        "ref": "var(--spectrum-cinnamon-800)",
+        "dark": {
+            "value": "rgb(176, 98, 59)"
+        },
+        "light": {
+            "value": "rgb(184, 109, 70)"
+        }
+    },
+    "icon-color-cinnamon-primary-down": {
+        "prop": "--spectrum-icon-color-cinnamon-primary-down",
+        "ref": "var(--spectrum-cinnamon-1000)",
+        "dark": {
+            "value": "rgb(206, 136, 99)"
+        },
+        "light": {
+            "value": "rgb(147, 77, 43)"
+        }
+    },
+    "icon-color-cinnamon-primary-hover": {
+        "prop": "--spectrum-icon-color-cinnamon-primary-hover",
+        "ref": "var(--spectrum-cinnamon-900)",
+        "dark": {
+            "value": "rgb(192, 119, 80)"
+        },
+        "light": {
+            "value": "rgb(170, 94, 56)"
+        }
+    },
+    "icon-color-cyan-background": {
+        "prop": "--spectrum-icon-color-cyan-background",
+        "ref": "var(--spectrum-cyan-400)",
+        "light": {
+            "value": "rgb(238, 250, 254)"
+        },
+        "dark": {
+            "value": "rgb(0, 64, 88)"
+        }
+    },
+    "icon-color-cyan-primary-default": {
+        "prop": "--spectrum-icon-color-cyan-primary-default",
+        "ref": "var(--spectrum-cyan-800)",
+        "light": {
+            "value": "rgb(18, 134, 205)"
+        },
+        "dark": {
+            "value": "rgb(13, 125, 186)"
+        }
+    },
+    "icon-color-cyan-primary-down": {
+        "prop": "--spectrum-icon-color-cyan-primary-down",
+        "ref": "var(--spectrum-cyan-1000)",
+        "light": {
+            "value": "rgb(4, 102, 145)"
+        },
+        "dark": {
+            "value": "rgb(38, 159, 244)"
+        }
+    },
+    "icon-color-cyan-primary-hover": {
+        "prop": "--spectrum-icon-color-cyan-primary-hover",
+        "ref": "var(--spectrum-cyan-900)",
+        "light": {
+            "value": "rgb(11, 120, 179)"
+        },
+        "dark": {
+            "value": "rgb(24, 142, 220)"
+        }
+    },
+    "icon-color-disabled-primary": {
+        "prop": "--spectrum-icon-color-disabled-primary",
+        "ref": "var(--spectrum-gray-400)",
+        "light": {
+            "value": "rgb(198, 198, 198)"
+        },
+        "dark": {
+            "value": "rgb(68, 68, 68)"
+        }
+    },
+    "icon-color-emphasized-background": {
+        "prop": "--spectrum-icon-color-emphasized-background",
+        "ref": "var(--spectrum-gray-900)",
+        "light": {
+            "value": "rgb(19, 19, 19)"
+        },
+        "dark": {
+            "value": "rgb(242, 242, 242)"
+        }
+    },
+    "icon-color-fuchsia-background": {
+        "prop": "--spectrum-icon-color-fuchsia-background",
+        "ref": "var(--spectrum-fuchsia-200)",
+        "light": {
+            "value": "rgb(253, 233, 255)"
+        },
+        "dark": {
+            "value": "rgb(61, 0, 74)"
+        }
+    },
+    "icon-color-fuchsia-primary-default": {
+        "prop": "--spectrum-icon-color-fuchsia-primary-default",
+        "ref": "var(--spectrum-fuchsia-700)",
+        "light": {
+            "value": "rgb(181, 57, 200)"
+        },
+        "dark": {
+            "value": "rgb(173, 51, 192)"
+        }
+    },
+    "icon-color-fuchsia-primary-down": {
+        "prop": "--spectrum-icon-color-fuchsia-primary-down",
+        "ref": "var(--spectrum-fuchsia-900)",
+        "light": {
+            "value": "rgb(135, 27, 154)"
+        },
+        "dark": {
+            "value": "rgb(213, 73, 235)"
+        }
+    },
+    "icon-color-fuchsia-primary-hover": {
+        "prop": "--spectrum-icon-color-fuchsia-primary-hover",
+        "ref": "var(--spectrum-fuchsia-800)",
+        "light": {
+            "value": "rgb(156, 40, 175)"
+        },
+        "dark": {
+            "value": "rgb(186, 60, 206)"
+        }
+    },
+    "icon-color-green-background": {
+        "prop": "--spectrum-icon-color-green-background",
+        "ref": "var(--spectrum-green-400)",
+        "light": {
+            "value": "rgb(237, 252, 241)"
+        },
+        "dark": {
+            "value": "rgb(0, 68, 48)"
+        }
+    },
+    "icon-color-green-primary-default": {
+        "prop": "--spectrum-icon-color-green-primary-default",
+        "ref": "var(--spectrum-green-800)",
+        "light": {
+            "value": "rgb(7, 147, 85)"
+        },
+        "dark": {
+            "value": "rgb(6, 136, 80)"
+        }
+    },
+    "icon-color-green-primary-down": {
+        "prop": "--spectrum-icon-color-green-primary-down",
+        "ref": "var(--spectrum-green-1000)",
+        "light": {
+            "value": "rgb(3, 110, 69)"
+        },
+        "dark": {
+            "value": "rgb(14, 175, 98)"
+        }
+    },
+    "icon-color-green-primary-hover": {
+        "prop": "--spectrum-icon-color-green-primary-hover",
+        "ref": "var(--spectrum-green-900)",
+        "light": {
+            "value": "rgb(5, 131, 78)"
+        },
+        "dark": {
+            "value": "rgb(9, 157, 89)"
+        }
+    },
+    "icon-color-indigo-background": {
+        "prop": "--spectrum-icon-color-indigo-background",
+        "ref": "var(--spectrum-indigo-100)",
+        "light": {
+            "value": "rgb(235, 238, 255)"
+        },
+        "dark": {
+            "value": "rgb(30, 0, 93)"
+        }
+    },
+    "icon-color-indigo-primary-default": {
+        "prop": "--spectrum-icon-color-indigo-primary-default",
+        "ref": "var(--spectrum-indigo-700)",
+        "light": {
+            "value": "rgb(113, 85, 250)"
+        },
+        "dark": {
+            "value": "rgb(109, 75, 248)"
+        }
+    },
+    "icon-color-indigo-primary-down": {
+        "prop": "--spectrum-icon-color-indigo-primary-down",
+        "ref": "var(--spectrum-indigo-900)",
+        "light": {
+            "value": "rgb(84, 36, 219)"
+        },
+        "dark": {
+            "value": "rgb(128, 119, 254)"
+        }
+    },
+    "icon-color-indigo-primary-hover": {
+        "prop": "--spectrum-icon-color-indigo-primary-hover",
+        "ref": "var(--spectrum-indigo-800)",
+        "light": {
+            "value": "rgb(99, 56, 238)"
+        },
+        "dark": {
+            "value": "rgb(116, 91, 252)"
+        }
+    },
+    "icon-color-informative": {
+        "prop": "--spectrum-icon-color-informative",
+        "ref": "var(--spectrum-informative-color-900)",
+        "light": {
+            "value": "rgb(75, 117, 255)"
+        },
+        "dark": {
+            "value": "rgb(86, 129, 255)"
+        }
+    },
+    "icon-color-inverse": {
+        "prop": "--spectrum-icon-color-inverse",
+        "ref": "var(--spectrum-gray-50)",
+        "light": {
+            "value": "rgb(248, 248, 248)"
+        },
+        "dark": {
+            "value": "rgb(27, 27, 27)"
+        }
+    },
+    "icon-color-inverse-background": {
+        "prop": "--spectrum-icon-color-inverse-background",
+        "ref": "var(--spectrum-gray-50)",
+        "light": {
+            "value": "rgb(248, 248, 248)"
+        },
+        "dark": {
+            "value": "rgb(27, 27, 27)"
+        }
+    },
+    "icon-color-magenta-background": {
+        "prop": "--spectrum-icon-color-magenta-background",
+        "ref": "var(--spectrum-magenta-200)",
+        "light": {
+            "value": "rgb(255, 232, 240)"
+        },
+        "dark": {
+            "value": "rgb(74, 0, 27)"
+        }
+    },
+    "icon-color-magenta-primary-default": {
+        "prop": "--spectrum-icon-color-magenta-primary-default",
+        "ref": "var(--spectrum-magenta-700)",
+        "light": {
+            "value": "rgb(217, 35, 97)"
+        },
+        "dark": {
+            "value": "rgb(207, 31, 92)"
+        }
+    },
+    "icon-color-magenta-primary-down": {
+        "prop": "--spectrum-icon-color-magenta-primary-down",
+        "ref": "var(--spectrum-magenta-900)",
+        "light": {
+            "value": "rgb(163, 5, 62)"
+        },
+        "dark": {
+            "value": "rgb(255, 51, 119)"
+        }
+    },
+    "icon-color-magenta-primary-hover": {
+        "prop": "--spectrum-icon-color-magenta-primary-hover",
+        "ref": "var(--spectrum-magenta-800)",
+        "light": {
+            "value": "rgb(186, 22, 80)"
+        },
+        "dark": {
+            "value": "rgb(224, 38, 101)"
+        }
+    },
+    "icon-color-negative": {
+        "prop": "--spectrum-icon-color-negative",
+        "ref": "var(--spectrum-negative-color-900)",
+        "light": {
+            "value": "rgb(240, 56, 35)"
+        },
+        "dark": {
+            "value": "rgb(252, 67, 46)"
+        }
+    },
+    "icon-color-neutral": {
+        "prop": "--spectrum-icon-color-neutral",
+        "ref": "var(--spectrum-gray-600)",
+        "light": {
+            "value": "rgb(143, 143, 143)"
+        },
+        "dark": {
+            "value": "rgb(138, 138, 138)"
+        }
+    },
+    "icon-color-notice": {
+        "prop": "--spectrum-icon-color-notice",
+        "ref": "var(--spectrum-notice-color-900)",
+        "light": {
+            "value": "rgb(212, 91, 0)"
+        },
+        "dark": {
+            "value": "rgb(224, 100, 0)"
+        }
+    },
+    "icon-color-orange-background": {
+        "prop": "--spectrum-icon-color-orange-background",
+        "ref": "var(--spectrum-orange-300)",
+        "light": {
+            "value": "rgb(255, 236, 207)"
+        },
+        "dark": {
+            "value": "rgb(80, 27, 0)"
+        }
+    },
+    "icon-color-orange-primary-default": {
+        "prop": "--spectrum-icon-color-orange-primary-default",
+        "ref": "var(--spectrum-orange-900)",
+        "light": {
+            "value": "rgb(232, 106, 0)"
+        },
+        "dark": {
+            "value": "rgb(224, 100, 0)"
+        }
+    },
+    "icon-color-orange-primary-down": {
+        "prop": "--spectrum-icon-color-orange-primary-down",
+        "ref": "var(--spectrum-orange-1100)",
+        "light": {
+            "value": "rgb(194, 78, 0)"
+        },
+        "dark": {
+            "value": "rgb(255, 137, 0)"
+        }
+    },
+    "icon-color-orange-primary-hover": {
+        "prop": "--spectrum-icon-color-orange-primary-hover",
+        "ref": "var(--spectrum-orange-1000)",
+        "light": {
+            "value": "rgb(212, 91, 0)"
+        },
+        "dark": {
+            "value": "rgb(243, 117, 0)"
+        }
+    },
+    "icon-color-pink-background": {
+        "prop": "--spectrum-icon-color-pink-background",
+        "ref": "var(--spectrum-pink-200)",
+        "dark": {
+            "value": "rgb(71, 0, 44)"
+        },
+        "light": {
+            "value": "rgb(255, 232, 247)"
+        }
+    },
+    "icon-color-pink-primary-default": {
+        "prop": "--spectrum-icon-color-pink-primary-default",
+        "ref": "var(--spectrum-pink-700)",
+        "light": {
+            "value": "rgb(228, 52, 163)"
+        },
+        "dark": {
+            "value": "rgb(196, 39, 138)"
+        }
+    },
+    "icon-color-pink-primary-down": {
+        "prop": "--spectrum-icon-color-pink-primary-down",
+        "ref": "var(--spectrum-pink-900)",
+        "light": {
+            "value": "rgb(176, 31, 123)"
+        },
+        "dark": {
+            "value": "rgb(236, 67, 175)"
+        }
+    },
+    "icon-color-pink-primary-hover": {
+        "prop": "--spectrum-icon-color-pink-primary-hover",
+        "ref": "var(--spectrum-pink-800)",
+        "light": {
+            "value": "rgb(206, 42, 146)"
+        },
+        "dark": {
+            "value": "rgb(213, 45, 151)"
+        }
+    },
+    "icon-color-positive": {
+        "prop": "--spectrum-icon-color-positive",
+        "ref": "var(--spectrum-positive-color-900)",
+        "light": {
+            "value": "rgb(7, 147, 85)"
+        },
+        "dark": {
+            "value": "rgb(9, 157, 89)"
+        }
+    },
+    "icon-color-primary-default": {
+        "prop": "--spectrum-icon-color-primary-default",
+        "ref": "var(--spectrum-neutral-content-color-default)",
+        "light": {
+            "value": "rgb(41, 41, 41)"
+        },
+        "dark": {
+            "value": "rgb(219, 219, 219)"
+        }
+    },
+    "icon-color-primary-down": {
+        "prop": "--spectrum-icon-color-primary-down",
+        "ref": "var(--spectrum-neutral-content-color-down)",
+        "light": {
+            "value": "rgb(19, 19, 19)"
+        },
+        "dark": {
+            "value": "rgb(242, 242, 242)"
+        }
+    },
+    "icon-color-primary-hover": {
+        "prop": "--spectrum-icon-color-primary-hover",
+        "ref": "var(--spectrum-neutral-content-color-hover)",
+        "light": {
+            "value": "rgb(19, 19, 19)"
+        },
+        "dark": {
+            "value": "rgb(242, 242, 242)"
+        }
+    },
+    "icon-color-purple-background": {
+        "prop": "--spectrum-icon-color-purple-background",
+        "ref": "var(--spectrum-purple-200)",
+        "light": {
+            "value": "rgb(244, 235, 252)"
+        },
+        "dark": {
+            "value": "rgb(50, 0, 96)"
+        }
+    },
+    "icon-color-purple-primary-default": {
+        "prop": "--spectrum-icon-color-purple-primary-default",
+        "ref": "var(--spectrum-purple-700)",
+        "light": {
+            "value": "rgb(154, 71, 226)"
+        },
+        "dark": {
+            "value": "rgb(148, 62, 224)"
+        }
+    },
+    "icon-color-purple-primary-down": {
+        "prop": "--spectrum-icon-color-purple-primary-down",
+        "ref": "var(--spectrum-purple-900)",
+        "light": {
+            "value": "rgb(115, 13, 204)"
+        },
+        "dark": {
+            "value": "rgb(173, 105, 233)"
+        }
+    },
+    "icon-color-purple-primary-hover": {
+        "prop": "--spectrum-icon-color-purple-primary-hover",
+        "ref": "var(--spectrum-purple-800)",
+        "light": {
+            "value": "rgb(134, 40, 217)"
+        },
+        "dark": {
+            "value": "rgb(157, 78, 228)"
+        }
+    },
+    "icon-color-red-background": {
+        "prop": "--spectrum-icon-color-red-background",
+        "ref": "var(--spectrum-red-300)",
+        "light": {
+            "value": "rgb(255, 235, 232)"
+        },
+        "dark": {
+            "value": "rgb(87, 17, 7)"
+        }
+    },
+    "icon-color-red-primary-default": {
+        "prop": "--spectrum-icon-color-red-primary-default",
+        "ref": "var(--spectrum-red-700)",
+        "light": {
+            "value": "rgb(215, 50, 32)"
+        },
+        "dark": {
+            "value": "rgb(205, 46, 29)"
+        }
+    },
+    "icon-color-red-primary-down": {
+        "prop": "--spectrum-icon-color-red-primary-down",
+        "ref": "var(--spectrum-red-900)",
+        "light": {
+            "value": "rgb(156, 33, 19)"
+        },
+        "dark": {
+            "value": "rgb(252, 67, 46)"
+        }
+    },
+    "icon-color-red-primary-hover": {
+        "prop": "--spectrum-icon-color-red-primary-hover",
+        "ref": "var(--spectrum-red-800)",
+        "light": {
+            "value": "rgb(183, 40, 24)"
+        },
+        "dark": {
+            "value": "rgb(223, 52, 34)"
+        }
+    },
+    "icon-color-seafoam-background": {
+        "prop": "--spectrum-icon-color-seafoam-background",
+        "ref": "var(--spectrum-seafoam-400)",
+        "light": {
+            "value": "rgb(211, 246, 234)"
+        },
+        "dark": {
+            "value": "rgb(0, 67, 59)"
+        }
+    },
+    "icon-color-seafoam-primary-default": {
+        "prop": "--spectrum-icon-color-seafoam-primary-default",
+        "ref": "var(--spectrum-seafoam-800)",
+        "light": {
+            "value": "rgb(9, 144, 120)"
+        },
+        "dark": {
+            "value": "rgb(8, 134, 112)"
+        }
+    },
+    "icon-color-seafoam-primary-down": {
+        "prop": "--spectrum-icon-color-seafoam-primary-down",
+        "ref": "var(--spectrum-seafoam-1000)",
+        "light": {
+            "value": "rgb(5, 108, 92)"
+        },
+        "dark": {
+            "value": "rgb(12, 173, 142)"
+        }
+    },
+    "icon-color-seafoam-primary-hover": {
+        "prop": "--spectrum-icon-color-seafoam-primary-hover",
+        "ref": "var(--spectrum-seafoam-900)",
+        "light": {
+            "value": "rgb(7, 129, 109)"
+        },
+        "dark": {
+            "value": "rgb(10, 154, 128)"
+        }
+    },
+    "icon-color-silver-background": {
+        "prop": "--spectrum-icon-color-silver-background",
+        "ref": "var(--spectrum-silver-400)",
+        "light": {
+            "value": "rgb(239, 239, 239)"
+        },
+        "dark": {
+            "value": "rgb(59, 59, 59)"
+        }
+    },
+    "icon-color-silver-primary-default": {
+        "prop": "--spectrum-icon-color-silver-primary-default",
+        "ref": "var(--spectrum-silver-800)",
+        "light": {
+            "value": "rgb(143, 143, 143)"
+        },
+        "dark": {
+            "value": "rgb(118, 118, 118)"
+        }
+    },
+    "icon-color-silver-primary-down": {
+        "prop": "--spectrum-icon-color-silver-primary-down",
+        "ref": "var(--spectrum-silver-1000)",
+        "light": {
+            "value": "rgb(114, 114, 114)"
+        },
+        "dark": {
+            "value": "rgb(152, 152, 152)"
+        }
+    },
+    "icon-color-silver-primary-hover": {
+        "prop": "--spectrum-icon-color-silver-primary-hover",
+        "ref": "var(--spectrum-silver-900)",
+        "light": {
+            "value": "rgb(128, 128, 128)"
+        },
+        "dark": {
+            "value": "rgb(137, 137, 137)"
+        }
+    },
+    "icon-color-turquoise-background": {
+        "prop": "--spectrum-icon-color-turquoise-background",
+        "ref": "var(--spectrum-turquoise-400)",
+        "light": {
+            "value": "rgb(209, 245, 245)"
+        },
+        "dark": {
+            "value": "rgb(0, 66, 72)"
+        }
+    },
+    "icon-color-turquoise-primary-default": {
+        "prop": "--spectrum-icon-color-turquoise-primary-default",
+        "ref": "var(--spectrum-turquoise-800)",
+        "light": {
+            "value": "rgb(12, 158, 171)"
+        },
+        "dark": {
+            "value": "rgb(9, 131, 142)"
+        }
+    },
+    "icon-color-turquoise-primary-down": {
+        "prop": "--spectrum-icon-color-turquoise-primary-down",
+        "ref": "var(--spectrum-turquoise-1000)",
+        "light": {
+            "value": "rgb(8, 126, 137)"
+        },
+        "dark": {
+            "value": "rgb(13, 168, 182)"
+        }
+    },
+    "icon-color-turquoise-primary-hover": {
+        "prop": "--spectrum-icon-color-turquoise-primary-hover",
+        "ref": "var(--spectrum-turquoise-900)",
+        "light": {
+            "value": "rgb(10, 141, 153)"
+        },
+        "dark": {
+            "value": "rgb(11, 151, 164)"
+        }
+    },
+    "icon-color-yellow-background": {
+        "prop": "--spectrum-icon-color-yellow-background",
+        "ref": "var(--spectrum-yellow-400)",
+        "light": {
+            "value": "rgb(255, 248, 204)"
+        },
+        "dark": {
+            "value": "rgb(83, 52, 0)"
+        }
+    },
+    "icon-color-yellow-primary-default": {
+        "prop": "--spectrum-icon-color-yellow-primary-default",
+        "ref": "var(--spectrum-yellow-1200)",
+        "light": {
+            "value": "rgb(245, 199, 0)"
+        },
+        "dark": {
+            "value": "rgb(235, 183, 0)"
+        }
+    },
+    "icon-color-yellow-primary-down": {
+        "prop": "--spectrum-icon-color-yellow-primary-down",
+        "ref": "var(--spectrum-yellow-1400)",
+        "light": {
+            "value": "rgb(210, 149, 0)"
+        },
+        "dark": {
+            "value": "rgb(255, 230, 86)"
+        }
+    },
+    "icon-color-yellow-primary-hover": {
+        "prop": "--spectrum-icon-color-yellow-primary-hover",
+        "ref": "var(--spectrum-yellow-1300)",
+        "light": {
+            "value": "rgb(230, 175, 0)"
+        },
+        "dark": {
+            "value": "rgb(249, 206, 0)"
         }
     },
-    "green-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 101, 62)"
-            },
-            "dark": {
-                "value": "rgb(94, 217, 162)"
-            },
-            "darkest": {
-                "value": "rgb(75, 205, 149)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "indigo-100": {
+        "prop": "--spectrum-indigo-100",
+        "light": {
+            "value": "rgb(247, 248, 255)"
+        },
+        "dark": {
+            "value": "rgb(30, 0, 93)"
         }
     },
-    "green-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 81, 50)"
-            },
-            "dark": {
-                "value": "rgb(129, 233, 184)"
-            },
-            "darkest": {
-                "value": "rgb(103, 222, 168)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "indigo-1000": {
+        "prop": "--spectrum-indigo-1000",
+        "light": {
+            "value": "rgb(99, 56, 238)"
+        },
+        "dark": {
+            "value": "rgb(139, 141, 254)"
         }
     },
-    "green-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(5, 63, 39)"
-            },
-            "dark": {
-                "value": "rgb(177, 244, 209)"
-            },
-            "darkest": {
-                "value": "rgb(137, 236, 188)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "indigo-1100": {
+        "prop": "--spectrum-indigo-1100",
+        "light": {
+            "value": "rgb(84, 36, 219)"
+        },
+        "dark": {
+            "value": "rgb(153, 161, 255)"
         }
     },
-    "green-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(10, 46, 29)"
-            },
-            "dark": {
-                "value": "rgb(223, 250, 234)"
-            },
-            "darkest": {
-                "value": "rgb(177, 244, 209)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "indigo-1200": {
+        "prop": "--spectrum-indigo-1200",
+        "light": {
+            "value": "rgb(69, 19, 191)"
+        },
+        "dark": {
+            "value": "rgb(176, 186, 255)"
         }
     },
-    "green-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(10, 32, 21)"
-            },
-            "dark": {
-                "value": "rgb(254, 255, 252)"
-            },
-            "darkest": {
-                "value": "rgb(214, 249, 228)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "indigo-1300": {
+        "prop": "--spectrum-indigo-1300",
+        "light": {
+            "value": "rgb(55, 6, 160)"
+        },
+        "dark": {
+            "value": "rgb(199, 208, 255)"
         }
     },
-    "seafoam-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(206, 247, 243)"
-            },
-            "dark": {
-                "value": "rgb(18, 65, 63)"
-            },
-            "darkest": {
-                "value": "rgb(18, 43, 42)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "indigo-1400": {
+        "prop": "--spectrum-indigo-1400",
+        "light": {
+            "value": "rgb(42, 0, 129)"
+        },
+        "dark": {
+            "value": "rgb(223, 228, 255)"
         }
     },
-    "seafoam-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(170, 241, 234)"
-            },
-            "dark": {
-                "value": "rgb(14, 76, 73)"
-            },
-            "darkest": {
-                "value": "rgb(19, 57, 55)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "indigo-1500": {
+        "prop": "--spectrum-indigo-1500",
+        "dark": {
+            "value": "rgb(243, 244, 255)"
+        },
+        "light": {
+            "value": "rgb(31, 0, 98)"
         }
     },
-    "seafoam-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(140, 233, 226)"
-            },
-            "dark": {
-                "value": "rgb(4, 90, 87)"
-            },
-            "darkest": {
-                "value": "rgb(16, 73, 70)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "indigo-1600": {
+        "prop": "--spectrum-indigo-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(17, 0, 54)"
         }
     },
-    "seafoam-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(101, 218, 210)"
-            },
-            "dark": {
-                "value": "rgb(0, 105, 101)"
-            },
-            "darkest": {
-                "value": "rgb(3, 91, 88)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "indigo-200": {
+        "prop": "--spectrum-indigo-200",
+        "light": {
+            "value": "rgb(235, 238, 255)"
+        },
+        "dark": {
+            "value": "rgb(35, 0, 110)"
         }
     },
-    "seafoam-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(63, 201, 193)"
-            },
-            "dark": {
-                "value": "rgb(0, 122, 117)"
-            },
-            "darkest": {
-                "value": "rgb(0, 108, 104)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "indigo-300": {
+        "prop": "--spectrum-indigo-300",
+        "light": {
+            "value": "rgb(216, 222, 255)"
+        },
+        "dark": {
+            "value": "rgb(47, 0, 140)"
         }
     },
-    "seafoam-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(15, 181, 174)"
-            },
-            "dark": {
-                "value": "rgb(0, 140, 135)"
-            },
-            "darkest": {
-                "value": "rgb(0, 127, 121)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "indigo-400": {
+        "prop": "--spectrum-indigo-400",
+        "light": {
+            "value": "rgb(192, 201, 255)"
+        },
+        "dark": {
+            "value": "rgb(62, 12, 174)"
         }
     },
-    "seafoam-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 161, 154)"
-            },
-            "dark": {
-                "value": "rgb(0, 158, 152)"
-            },
-            "darkest": {
-                "value": "rgb(0, 146, 140)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "indigo-500": {
+        "prop": "--spectrum-indigo-500",
+        "light": {
+            "value": "rgb(167, 178, 255)"
+        },
+        "dark": {
+            "value": "rgb(79, 30, 209)"
         }
     },
-    "seafoam-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 140, 135)"
-            },
-            "dark": {
-                "value": "rgb(3, 178, 171)"
-            },
-            "darkest": {
-                "value": "rgb(0, 165, 159)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "indigo-600": {
+        "prop": "--spectrum-indigo-600",
+        "light": {
+            "value": "rgb(145, 151, 254)"
+        },
+        "dark": {
+            "value": "rgb(95, 52, 235)"
         }
     },
-    "seafoam-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 119, 114)"
-            },
-            "dark": {
-                "value": "rgb(54, 197, 189)"
-            },
-            "darkest": {
-                "value": "rgb(26, 185, 178)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "indigo-700": {
+        "prop": "--spectrum-indigo-700",
+        "light": {
+            "value": "rgb(132, 128, 254)"
+        },
+        "dark": {
+            "value": "rgb(109, 75, 248)"
         }
     },
-    "seafoam-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 99, 95)"
-            },
-            "dark": {
-                "value": "rgb(93, 214, 207)"
-            },
-            "darkest": {
-                "value": "rgb(66, 202, 195)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "indigo-800": {
+        "prop": "--spectrum-indigo-800",
+        "light": {
+            "value": "rgb(122, 106, 253)"
+        },
+        "dark": {
+            "value": "rgb(116, 91, 252)"
         }
     },
-    "seafoam-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(12, 79, 76)"
-            },
-            "dark": {
-                "value": "rgb(132, 230, 223)"
-            },
-            "darkest": {
-                "value": "rgb(102, 218, 211)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "indigo-900": {
+        "prop": "--spectrum-indigo-900",
+        "light": {
+            "value": "rgb(113, 85, 250)"
+        },
+        "dark": {
+            "value": "rgb(128, 119, 254)"
+        }
+    },
+    "informative-color-100": {
+        "prop": "--spectrum-informative-color-100",
+        "ref": "var(--spectrum-blue-100)",
+        "light": {
+            "value": "rgb(245, 249, 255)"
+        },
+        "dark": {
+            "value": "rgb(14, 23, 63)"
+        }
+    },
+    "informative-color-1000": {
+        "prop": "--spectrum-informative-color-1000",
+        "ref": "var(--spectrum-blue-1000)",
+        "light": {
+            "value": "rgb(39, 77, 234)"
+        },
+        "dark": {
+            "value": "rgb(105, 149, 254)"
+        }
+    },
+    "informative-color-1100": {
+        "prop": "--spectrum-informative-color-1100",
+        "ref": "var(--spectrum-blue-1100)",
+        "light": {
+            "value": "rgb(29, 62, 207)"
+        },
+        "dark": {
+            "value": "rgb(124, 169, 252)"
+        }
+    },
+    "informative-color-1200": {
+        "prop": "--spectrum-informative-color-1200",
+        "ref": "var(--spectrum-blue-1200)",
+        "light": {
+            "value": "rgb(21, 50, 173)"
+        },
+        "dark": {
+            "value": "rgb(152, 192, 252)"
+        }
+    },
+    "informative-color-1300": {
+        "prop": "--spectrum-informative-color-1300",
+        "ref": "var(--spectrum-blue-1300)",
+        "light": {
+            "value": "rgb(16, 40, 140)"
+        },
+        "dark": {
+            "value": "rgb(181, 213, 253)"
+        }
+    },
+    "informative-color-1400": {
+        "prop": "--spectrum-informative-color-1400",
+        "ref": "var(--spectrum-blue-1400)",
+        "light": {
+            "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)"
+        },
+        "light": {
+            "value": "rgb(7, 11, 30)"
+        }
+    },
+    "informative-color-200": {
+        "prop": "--spectrum-informative-color-200",
+        "ref": "var(--spectrum-blue-200)",
+        "light": {
+            "value": "rgb(229, 240, 254)"
+        },
+        "dark": {
+            "value": "rgb(15, 28, 82)"
+        }
+    },
+    "informative-color-300": {
+        "prop": "--spectrum-informative-color-300",
+        "ref": "var(--spectrum-blue-300)",
+        "light": {
+            "value": "rgb(203, 226, 254)"
+        },
+        "dark": {
+            "value": "rgb(12, 33, 117)"
+        }
+    },
+    "informative-color-400": {
+        "prop": "--spectrum-informative-color-400",
+        "ref": "var(--spectrum-blue-400)",
+        "light": {
+            "value": "rgb(172, 207, 253)"
+        },
+        "dark": {
+            "value": "rgb(18, 45, 154)"
+        }
+    },
+    "informative-color-500": {
+        "prop": "--spectrum-informative-color-500",
+        "ref": "var(--spectrum-blue-500)",
+        "light": {
+            "value": "rgb(142, 185, 252)"
+        },
+        "dark": {
+            "value": "rgb(26, 58, 195)"
+        }
+    },
+    "informative-color-600": {
+        "prop": "--spectrum-informative-color-600",
+        "ref": "var(--spectrum-blue-600)",
+        "light": {
+            "value": "rgb(114, 158, 253)"
+        },
+        "dark": {
+            "value": "rgb(37, 73, 229)"
+        }
+    },
+    "informative-color-700": {
+        "prop": "--spectrum-informative-color-700",
+        "ref": "var(--spectrum-blue-700)",
+        "light": {
+            "value": "rgb(93, 137, 255)"
+        },
+        "dark": {
+            "value": "rgb(52, 91, 248)"
+        }
+    },
+    "informative-color-800": {
+        "prop": "--spectrum-informative-color-800",
+        "ref": "var(--spectrum-blue-800)",
+        "light": {
+            "value": "rgb(75, 117, 255)"
+        },
+        "dark": {
+            "value": "rgb(64, 105, 253)"
+        }
+    },
+    "informative-color-900": {
+        "prop": "--spectrum-informative-color-900",
+        "ref": "var(--spectrum-blue-900)",
+        "light": {
+            "value": "rgb(59, 99, 251)"
+        },
+        "dark": {
+            "value": "rgb(86, 129, 255)"
         }
     },
-    "seafoam-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(18, 60, 58)"
-            },
-            "dark": {
-                "value": "rgb(176, 242, 236)"
-            },
-            "darkest": {
-                "value": "rgb(139, 232, 225)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "magenta-100": {
+        "prop": "--spectrum-magenta-100",
+        "light": {
+            "value": "rgb(255, 245, 248)"
+        },
+        "dark": {
+            "value": "rgb(59, 0, 22)"
         }
     },
-    "seafoam-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(18, 44, 43)"
-            },
-            "dark": {
-                "value": "rgb(223, 249, 246)"
-            },
-            "darkest": {
-                "value": "rgb(179, 242, 237)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "magenta-1000": {
+        "prop": "--spectrum-magenta-1000",
+        "light": {
+            "value": "rgb(186, 22, 80)"
+        },
+        "dark": {
+            "value": "rgb(255, 96, 149)"
         }
     },
-    "seafoam-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(15, 31, 30)"
-            },
-            "dark": {
-                "value": "rgb(254, 255, 254)"
-            },
-            "darkest": {
-                "value": "rgb(215, 248, 244)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "magenta-1100": {
+        "prop": "--spectrum-magenta-1100",
+        "light": {
+            "value": "rgb(163, 5, 62)"
+        },
+        "dark": {
+            "value": "rgb(255, 128, 171)"
         }
     },
-    "cyan-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(197, 248, 255)"
-            },
-            "dark": {
-                "value": "rgb(0, 61, 98)"
-            },
-            "darkest": {
-                "value": "rgb(0, 41, 68)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "magenta-1200": {
+        "prop": "--spectrum-magenta-1200",
+        "light": {
+            "value": "rgb(136, 0, 51)"
+        },
+        "dark": {
+            "value": "rgb(255, 163, 194)"
         }
     },
-    "cyan-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(164, 240, 255)"
-            },
-            "dark": {
-                "value": "rgb(0, 71, 111)"
-            },
-            "darkest": {
-                "value": "rgb(0, 54, 88)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "magenta-1300": {
+        "prop": "--spectrum-magenta-1300",
+        "light": {
+            "value": "rgb(111, 0, 40)"
+        },
+        "dark": {
+            "value": "rgb(255, 193, 214)"
         }
     },
-    "cyan-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(136, 231, 250)"
-            },
-            "dark": {
-                "value": "rgb(0, 85, 127)"
-            },
-            "darkest": {
-                "value": "rgb(0, 69, 108)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "magenta-1400": {
+        "prop": "--spectrum-magenta-1400",
+        "light": {
+            "value": "rgb(86, 0, 30)"
+        },
+        "dark": {
+            "value": "rgb(255, 220, 232)"
         }
     },
-    "cyan-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(96, 216, 243)"
-            },
-            "dark": {
-                "value": "rgb(0, 100, 145)"
-            },
-            "darkest": {
-                "value": "rgb(0, 86, 128)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "magenta-1500": {
+        "prop": "--spectrum-magenta-1500",
+        "dark": {
+            "value": "rgb(255, 241, 246)"
+        },
+        "light": {
+            "value": "rgb(64, 0, 22)"
         }
     },
-    "cyan-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(51, 197, 232)"
-            },
-            "dark": {
-                "value": "rgb(0, 116, 162)"
-            },
-            "darkest": {
-                "value": "rgb(0, 103, 147)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "magenta-1600": {
+        "prop": "--spectrum-magenta-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(35, 0, 12)"
         }
     },
-    "cyan-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(18, 176, 218)"
-            },
-            "dark": {
-                "value": "rgb(0, 134, 180)"
-            },
-            "darkest": {
-                "value": "rgb(0, 121, 167)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "magenta-200": {
+        "prop": "--spectrum-magenta-200",
+        "light": {
+            "value": "rgb(255, 232, 240)"
+        },
+        "dark": {
+            "value": "rgb(74, 0, 27)"
         }
     },
-    "cyan-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(1, 156, 200)"
-            },
-            "dark": {
-                "value": "rgb(0, 153, 198)"
-            },
-            "darkest": {
-                "value": "rgb(0, 140, 186)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "magenta-300": {
+        "prop": "--spectrum-magenta-300",
+        "light": {
+            "value": "rgb(255, 213, 227)"
+        },
+        "dark": {
+            "value": "rgb(93, 0, 34)"
         }
     },
-    "cyan-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 134, 180)"
-            },
-            "dark": {
-                "value": "rgb(14, 173, 215)"
-            },
-            "darkest": {
-                "value": "rgb(4, 160, 205)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "magenta-400": {
+        "prop": "--spectrum-magenta-400",
+        "light": {
+            "value": "rgb(255, 185, 208)"
+        },
+        "dark": {
+            "value": "rgb(123, 0, 45)"
         }
     },
-    "cyan-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 113, 159)"
-            },
-            "dark": {
-                "value": "rgb(44, 193, 230)"
-            },
-            "darkest": {
-                "value": "rgb(23, 180, 221)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "magenta-500": {
+        "prop": "--spectrum-magenta-500",
+        "light": {
+            "value": "rgb(255, 152, 187)"
+        },
+        "dark": {
+            "value": "rgb(152, 7, 60)"
         }
     },
-    "cyan-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 93, 137)"
-            },
-            "dark": {
-                "value": "rgb(84, 211, 241)"
-            },
-            "darkest": {
-                "value": "rgb(57, 199, 234)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "magenta-600": {
+        "prop": "--spectrum-magenta-600",
+        "light": {
+            "value": "rgb(255, 112, 159)"
+        },
+        "dark": {
+            "value": "rgb(181, 19, 76)"
         }
     },
-    "cyan-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 74, 115)"
-            },
-            "dark": {
-                "value": "rgb(127, 228, 249)"
-            },
-            "darkest": {
-                "value": "rgb(96, 216, 243)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "magenta-700": {
+        "prop": "--spectrum-magenta-700",
+        "light": {
+            "value": "rgb(255, 72, 133)"
+        },
+        "dark": {
+            "value": "rgb(207, 31, 92)"
         }
     },
-    "cyan-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 57, 93)"
-            },
-            "dark": {
-                "value": "rgb(167, 241, 255)"
-            },
-            "darkest": {
-                "value": "rgb(134, 230, 250)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "magenta-800": {
+        "prop": "--spectrum-magenta-800",
+        "light": {
+            "value": "rgb(240, 45, 110)"
+        },
+        "dark": {
+            "value": "rgb(224, 38, 101)"
         }
     },
-    "cyan-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 42, 70)"
-            },
-            "dark": {
-                "value": "rgb(215, 250, 255)"
-            },
-            "darkest": {
-                "value": "rgb(170, 242, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "magenta-900": {
+        "prop": "--spectrum-magenta-900",
+        "light": {
+            "value": "rgb(217, 35, 97)"
+        },
+        "dark": {
+            "value": "rgb(255, 51, 119)"
+        }
+    },
+    "negative-color-100": {
+        "prop": "--spectrum-negative-color-100",
+        "ref": "var(--spectrum-red-100)",
+        "light": {
+            "value": "rgb(255, 246, 245)"
+        },
+        "dark": {
+            "value": "rgb(54, 10, 3)"
+        }
+    },
+    "negative-color-1000": {
+        "prop": "--spectrum-negative-color-1000",
+        "ref": "var(--spectrum-red-1000)",
+        "light": {
+            "value": "rgb(183, 40, 24)"
+        },
+        "dark": {
+            "value": "rgb(255, 103, 86)"
+        }
+    },
+    "negative-color-1100": {
+        "prop": "--spectrum-negative-color-1100",
+        "ref": "var(--spectrum-red-1100)",
+        "light": {
+            "value": "rgb(156, 33, 19)"
+        },
+        "dark": {
+            "value": "rgb(255, 134, 120)"
+        }
+    },
+    "negative-color-1200": {
+        "prop": "--spectrum-negative-color-1200",
+        "ref": "var(--spectrum-red-1200)",
+        "light": {
+            "value": "rgb(129, 27, 14)"
+        },
+        "dark": {
+            "value": "rgb(255, 167, 157)"
+        }
+    },
+    "negative-color-1300": {
+        "prop": "--spectrum-negative-color-1300",
+        "ref": "var(--spectrum-red-1300)",
+        "light": {
+            "value": "rgb(104, 21, 10)"
+        },
+        "dark": {
+            "value": "rgb(255, 196, 189)"
+        }
+    },
+    "negative-color-1400": {
+        "prop": "--spectrum-negative-color-1400",
+        "ref": "var(--spectrum-red-1400)",
+        "light": {
+            "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)"
+        },
+        "light": {
+            "value": "rgb(29, 5, 2)"
+        }
+    },
+    "negative-color-200": {
+        "prop": "--spectrum-negative-color-200",
+        "ref": "var(--spectrum-red-200)",
+        "light": {
+            "value": "rgb(255, 235, 232)"
+        },
+        "dark": {
+            "value": "rgb(68, 13, 5)"
+        }
+    },
+    "negative-color-300": {
+        "prop": "--spectrum-negative-color-300",
+        "ref": "var(--spectrum-red-300)",
+        "light": {
+            "value": "rgb(255, 214, 209)"
+        },
+        "dark": {
+            "value": "rgb(87, 17, 7)"
+        }
+    },
+    "negative-color-400": {
+        "prop": "--spectrum-negative-color-400",
+        "ref": "var(--spectrum-red-400)",
+        "light": {
+            "value": "rgb(255, 188, 180)"
+        },
+        "dark": {
+            "value": "rgb(115, 24, 11)"
+        }
+    },
+    "negative-color-500": {
+        "prop": "--spectrum-negative-color-500",
+        "ref": "var(--spectrum-red-500)",
+        "light": {
+            "value": "rgb(255, 157, 145)"
+        },
+        "dark": {
+            "value": "rgb(147, 31, 17)"
+        }
+    },
+    "negative-color-600": {
+        "prop": "--spectrum-negative-color-600",
+        "ref": "var(--spectrum-red-600)",
+        "light": {
+            "value": "rgb(255, 118, 101)"
+        },
+        "dark": {
+            "value": "rgb(177, 38, 23)"
+        }
+    },
+    "negative-color-700": {
+        "prop": "--spectrum-negative-color-700",
+        "ref": "var(--spectrum-red-700)",
+        "light": {
+            "value": "rgb(255, 81, 61)"
+        },
+        "dark": {
+            "value": "rgb(205, 46, 29)"
+        }
+    },
+    "negative-color-800": {
+        "prop": "--spectrum-negative-color-800",
+        "ref": "var(--spectrum-red-800)",
+        "light": {
+            "value": "rgb(240, 56, 35)"
+        },
+        "dark": {
+            "value": "rgb(223, 52, 34)"
+        }
+    },
+    "negative-color-900": {
+        "prop": "--spectrum-negative-color-900",
+        "ref": "var(--spectrum-red-900)",
+        "light": {
+            "value": "rgb(215, 50, 32)"
+        },
+        "dark": {
+            "value": "rgb(252, 67, 46)"
+        }
+    },
+    "notice-color-100": {
+        "prop": "--spectrum-notice-color-100",
+        "ref": "var(--spectrum-orange-100)",
+        "light": {
+            "value": "rgb(255, 246, 231)"
+        },
+        "dark": {
+            "value": "rgb(49, 16, 0)"
+        }
+    },
+    "notice-color-1000": {
+        "prop": "--spectrum-notice-color-1000",
+        "ref": "var(--spectrum-orange-1000)",
+        "light": {
+            "value": "rgb(167, 62, 0)"
+        },
+        "dark": {
+            "value": "rgb(243, 117, 0)"
+        }
+    },
+    "notice-color-1100": {
+        "prop": "--spectrum-notice-color-1100",
+        "ref": "var(--spectrum-orange-1100)",
+        "light": {
+            "value": "rgb(144, 51, 0)"
+        },
+        "dark": {
+            "value": "rgb(255, 137, 0)"
+        }
+    },
+    "notice-color-1200": {
+        "prop": "--spectrum-notice-color-1200",
+        "ref": "var(--spectrum-orange-1200)",
+        "light": {
+            "value": "rgb(118, 41, 0)"
+        },
+        "dark": {
+            "value": "rgb(255, 173, 45)"
+        }
+    },
+    "notice-color-1300": {
+        "prop": "--spectrum-notice-color-1300",
+        "ref": "var(--spectrum-orange-1300)",
+        "light": {
+            "value": "rgb(95, 32, 0)"
+        },
+        "dark": {
+            "value": "rgb(255, 201, 116)"
+        }
+    },
+    "notice-color-1400": {
+        "prop": "--spectrum-notice-color-1400",
+        "ref": "var(--spectrum-orange-1400)",
+        "light": {
+            "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, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(25, 8, 0)"
+        }
+    },
+    "notice-color-200": {
+        "prop": "--spectrum-notice-color-200",
+        "ref": "var(--spectrum-orange-200)",
+        "light": {
+            "value": "rgb(255, 236, 207)"
+        },
+        "dark": {
+            "value": "rgb(61, 21, 0)"
+        }
+    },
+    "notice-color-300": {
+        "prop": "--spectrum-notice-color-300",
+        "ref": "var(--spectrum-orange-300)",
+        "light": {
+            "value": "rgb(255, 218, 158)"
+        },
+        "dark": {
+            "value": "rgb(80, 27, 0)"
+        }
+    },
+    "notice-color-400": {
+        "prop": "--spectrum-notice-color-400",
+        "ref": "var(--spectrum-orange-400)",
+        "light": {
+            "value": "rgb(255, 193, 94)"
+        },
+        "dark": {
+            "value": "rgb(106, 36, 0)"
+        }
+    },
+    "notice-color-500": {
+        "prop": "--spectrum-notice-color-500",
+        "ref": "var(--spectrum-orange-500)",
+        "light": {
+            "value": "rgb(255, 162, 19)"
+        },
+        "dark": {
+            "value": "rgb(135, 47, 0)"
+        }
+    },
+    "notice-color-600": {
+        "prop": "--spectrum-notice-color-600",
+        "ref": "var(--spectrum-orange-600)",
+        "light": {
+            "value": "rgb(252, 125, 0)"
+        },
+        "dark": {
+            "value": "rgb(162, 59, 0)"
+        }
+    },
+    "notice-color-700": {
+        "prop": "--spectrum-notice-color-700",
+        "ref": "var(--spectrum-orange-700)",
+        "light": {
+            "value": "rgb(232, 106, 0)"
+        },
+        "dark": {
+            "value": "rgb(185, 73, 0)"
+        }
+    },
+    "notice-color-800": {
+        "prop": "--spectrum-notice-color-800",
+        "ref": "var(--spectrum-orange-800)",
+        "light": {
+            "value": "rgb(212, 91, 0)"
+        },
+        "dark": {
+            "value": "rgb(199, 82, 0)"
+        }
+    },
+    "notice-color-900": {
+        "prop": "--spectrum-notice-color-900",
+        "ref": "var(--spectrum-orange-900)",
+        "light": {
+            "value": "rgb(194, 78, 0)"
+        },
+        "dark": {
+            "value": "rgb(224, 100, 0)"
         }
     },
-    "cyan-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(0, 30, 51)"
-            },
-            "dark": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "darkest": {
-                "value": "rgb(206, 249, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "orange-100": {
+        "prop": "--spectrum-orange-100",
+        "light": {
+            "value": "rgb(255, 246, 231)"
+        },
+        "dark": {
+            "value": "rgb(49, 16, 0)"
         }
     },
-    "indigo-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(237, 238, 255)"
-            },
-            "dark": {
-                "value": "rgb(40, 44, 140)"
-            },
-            "darkest": {
-                "value": "rgb(26, 29, 97)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "orange-1000": {
+        "prop": "--spectrum-orange-1000",
+        "light": {
+            "value": "rgb(167, 62, 0)"
+        },
+        "dark": {
+            "value": "rgb(243, 117, 0)"
         }
     },
-    "indigo-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(224, 226, 255)"
-            },
-            "dark": {
-                "value": "rgb(47, 52, 163)"
-            },
-            "darkest": {
-                "value": "rgb(35, 39, 125)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "orange-1100": {
+        "prop": "--spectrum-orange-1100",
+        "light": {
+            "value": "rgb(144, 51, 0)"
+        },
+        "dark": {
+            "value": "rgb(255, 137, 0)"
         }
     },
-    "indigo-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(211, 213, 255)"
-            },
-            "dark": {
-                "value": "rgb(57, 63, 187)"
-            },
-            "darkest": {
-                "value": "rgb(46, 50, 158)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "orange-1200": {
+        "prop": "--spectrum-orange-1200",
+        "light": {
+            "value": "rgb(118, 41, 0)"
+        },
+        "dark": {
+            "value": "rgb(255, 173, 45)"
         }
     },
-    "indigo-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(193, 196, 255)"
-            },
-            "dark": {
-                "value": "rgb(70, 75, 211)"
-            },
-            "darkest": {
-                "value": "rgb(58, 63, 189)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "orange-1300": {
+        "prop": "--spectrum-orange-1300",
+        "light": {
+            "value": "rgb(95, 32, 0)"
+        },
+        "dark": {
+            "value": "rgb(255, 201, 116)"
         }
     },
-    "indigo-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(172, 175, 255)"
-            },
-            "dark": {
-                "value": "rgb(85, 91, 231)"
-            },
-            "darkest": {
-                "value": "rgb(73, 78, 216)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "orange-1400": {
+        "prop": "--spectrum-orange-1400",
+        "light": {
+            "value": "rgb(73, 24, 0)"
+        },
+        "dark": {
+            "value": "rgb(255, 225, 178)"
         }
     },
-    "indigo-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(149, 153, 255)"
-            },
-            "dark": {
-                "value": "rgb(104, 109, 244)"
-            },
-            "darkest": {
-                "value": "rgb(90, 96, 235)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "orange-1500": {
+        "prop": "--spectrum-orange-1500",
+        "dark": {
+            "value": "rgb(255, 243, 225)"
+        },
+        "light": {
+            "value": "rgb(52, 18, 0)"
         }
     },
-    "indigo-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(126, 132, 252)"
-            },
-            "dark": {
-                "value": "rgb(124, 129, 251)"
-            },
-            "darkest": {
-                "value": "rgb(110, 115, 246)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "orange-1600": {
+        "prop": "--spectrum-orange-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(25, 8, 0)"
         }
     },
-    "indigo-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(104, 109, 244)"
-            },
-            "dark": {
-                "value": "rgb(145, 149, 255)"
-            },
-            "darkest": {
-                "value": "rgb(132, 136, 253)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "orange-200": {
+        "prop": "--spectrum-orange-200",
+        "light": {
+            "value": "rgb(255, 236, 207)"
+        },
+        "dark": {
+            "value": "rgb(61, 21, 0)"
         }
     },
-    "indigo-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(82, 88, 228)"
-            },
-            "dark": {
-                "value": "rgb(167, 170, 255)"
-            },
-            "darkest": {
-                "value": "rgb(153, 157, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "orange-300": {
+        "prop": "--spectrum-orange-300",
+        "light": {
+            "value": "rgb(255, 218, 158)"
+        },
+        "dark": {
+            "value": "rgb(80, 27, 0)"
         }
     },
-    "indigo-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(64, 70, 202)"
-            },
-            "dark": {
-                "value": "rgb(188, 190, 255)"
-            },
-            "darkest": {
-                "value": "rgb(174, 177, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "orange-400": {
+        "prop": "--spectrum-orange-400",
+        "light": {
+            "value": "rgb(255, 193, 94)"
+        },
+        "dark": {
+            "value": "rgb(106, 36, 0)"
         }
     },
-    "indigo-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(50, 54, 168)"
-            },
-            "dark": {
-                "value": "rgb(208, 210, 255)"
-            },
-            "darkest": {
-                "value": "rgb(194, 196, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "orange-500": {
+        "prop": "--spectrum-orange-500",
+        "light": {
+            "value": "rgb(255, 162, 19)"
+        },
+        "dark": {
+            "value": "rgb(135, 47, 0)"
         }
     },
-    "indigo-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(38, 41, 134)"
-            },
-            "dark": {
-                "value": "rgb(226, 228, 255)"
-            },
-            "darkest": {
-                "value": "rgb(212, 213, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "orange-600": {
+        "prop": "--spectrum-orange-600",
+        "light": {
+            "value": "rgb(252, 125, 0)"
+        },
+        "dark": {
+            "value": "rgb(162, 59, 0)"
         }
     },
-    "indigo-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(27, 30, 100)"
-            },
-            "dark": {
-                "value": "rgb(243, 243, 254)"
-            },
-            "darkest": {
-                "value": "rgb(227, 228, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "orange-700": {
+        "prop": "--spectrum-orange-700",
+        "light": {
+            "value": "rgb(232, 106, 0)"
+        },
+        "dark": {
+            "value": "rgb(185, 73, 0)"
         }
     },
-    "indigo-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(20, 22, 72)"
-            },
-            "dark": {
-                "value": "rgb(255, 255, 255)"
-            },
-            "darkest": {
-                "value": "rgb(240, 240, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "orange-800": {
+        "prop": "--spectrum-orange-800",
+        "light": {
+            "value": "rgb(212, 91, 0)"
+        },
+        "dark": {
+            "value": "rgb(199, 82, 0)"
+        }
+    },
+    "orange-900": {
+        "prop": "--spectrum-orange-900",
+        "light": {
+            "value": "rgb(194, 78, 0)"
+        },
+        "dark": {
+            "value": "rgb(224, 100, 0)"
+        }
+    },
+    "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)"
+        }
+    },
+    "positive-color-100": {
+        "prop": "--spectrum-positive-color-100",
+        "ref": "var(--spectrum-green-100)",
+        "light": {
+            "value": "rgb(237, 252, 241)"
+        },
+        "dark": {
+            "value": "rgb(0, 30, 23)"
+        }
+    },
+    "positive-color-1000": {
+        "prop": "--spectrum-positive-color-1000",
+        "ref": "var(--spectrum-green-1000)",
+        "light": {
+            "value": "rgb(3, 110, 69)"
+        },
+        "dark": {
+            "value": "rgb(14, 175, 98)"
+        }
+    },
+    "positive-color-1100": {
+        "prop": "--spectrum-positive-color-1100",
+        "ref": "var(--spectrum-green-1100)",
+        "light": {
+            "value": "rgb(2, 93, 60)"
+        },
+        "dark": {
+            "value": "rgb(24, 193, 110)"
+        }
+    },
+    "positive-color-1200": {
+        "prop": "--spectrum-positive-color-1200",
+        "ref": "var(--spectrum-green-1200)",
+        "light": {
+            "value": "rgb(1, 76, 52)"
+        },
+        "dark": {
+            "value": "rgb(57, 215, 134)"
+        }
+    },
+    "positive-color-1300": {
+        "prop": "--spectrum-positive-color-1300",
+        "ref": "var(--spectrum-green-1300)",
+        "light": {
+            "value": "rgb(0, 61, 44)"
+        },
+        "dark": {
+            "value": "rgb(126, 231, 172)"
+        }
+    },
+    "positive-color-1400": {
+        "prop": "--spectrum-positive-color-1400",
+        "ref": "var(--spectrum-green-1400)",
+        "light": {
+            "value": "rgb(0, 46, 34)"
+        },
+        "dark": {
+            "value": "rgb(189, 241, 208)"
+        }
+    },
+    "positive-color-1500": {
+        "prop": "--spectrum-positive-color-1500",
+        "ref": "var(--spectrum-green-1500)",
+        "dark": {
+            "value": "rgb(229, 250, 236)"
+        },
+        "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(173, 238, 197)"
+        },
+        "dark": {
+            "value": "rgb(0, 51, 38)"
+        }
+    },
+    "positive-color-400": {
+        "prop": "--spectrum-positive-color-400",
+        "ref": "var(--spectrum-green-400)",
+        "light": {
+            "value": "rgb(107, 227, 162)"
+        },
+        "dark": {
+            "value": "rgb(0, 68, 48)"
+        }
+    },
+    "positive-color-500": {
+        "prop": "--spectrum-positive-color-500",
+        "ref": "var(--spectrum-green-500)",
+        "light": {
+            "value": "rgb(43, 209, 125)"
+        },
+        "dark": {
+            "value": "rgb(2, 87, 58)"
+        }
+    },
+    "positive-color-600": {
+        "prop": "--spectrum-positive-color-600",
+        "ref": "var(--spectrum-green-600)",
+        "light": {
+            "value": "rgb(18, 184, 103)"
+        },
+        "dark": {
+            "value": "rgb(3, 106, 67)"
+        }
+    },
+    "positive-color-700": {
+        "prop": "--spectrum-positive-color-700",
+        "ref": "var(--spectrum-green-700)",
+        "light": {
+            "value": "rgb(11, 164, 93)"
+        },
+        "dark": {
+            "value": "rgb(4, 124, 75)"
+        }
+    },
+    "positive-color-800": {
+        "prop": "--spectrum-positive-color-800",
+        "ref": "var(--spectrum-green-800)",
+        "light": {
+            "value": "rgb(7, 147, 85)"
+        },
+        "dark": {
+            "value": "rgb(6, 136, 80)"
+        }
+    },
+    "positive-color-900": {
+        "prop": "--spectrum-positive-color-900",
+        "ref": "var(--spectrum-green-900)",
+        "light": {
+            "value": "rgb(5, 131, 78)"
+        },
+        "dark": {
+            "value": "rgb(9, 157, 89)"
         }
     },
     "purple-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(246, 235, 255)"
-            },
-            "dark": {
-                "value": "rgb(76, 13, 157)"
-            },
-            "darkest": {
-                "value": "rgb(50, 16, 104)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+        "prop": "--spectrum-purple-100",
+        "light": {
+            "value": "rgb(251, 247, 254)"
+        },
+        "dark": {
+            "value": "rgb(41, 0, 79)"
+        }
+    },
+    "purple-1000": {
+        "prop": "--spectrum-purple-1000",
+        "light": {
+            "value": "rgb(134, 40, 217)"
+        },
+        "dark": {
+            "value": "rgb(186, 127, 237)"
+        }
+    },
+    "purple-1100": {
+        "prop": "--spectrum-purple-1100",
+        "light": {
+            "value": "rgb(115, 13, 204)"
+        },
+        "dark": {
+            "value": "rgb(197, 149, 240)"
+        }
+    },
+    "purple-1200": {
+        "prop": "--spectrum-purple-1200",
+        "light": {
+            "value": "rgb(93, 0, 177)"
+        },
+        "dark": {
+            "value": "rgb(212, 176, 244)"
+        }
+    },
+    "purple-1300": {
+        "prop": "--spectrum-purple-1300",
+        "light": {
+            "value": "rgb(75, 0, 144)"
+        },
+        "dark": {
+            "value": "rgb(225, 201, 247)"
+        }
+    },
+    "purple-1400": {
+        "prop": "--spectrum-purple-1400",
+        "light": {
+            "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, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(23, 0, 45)"
         }
     },
     "purple-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(238, 221, 255)"
-            },
-            "dark": {
-                "value": "rgb(89, 17, 177)"
-            },
-            "darkest": {
-                "value": "rgb(67, 13, 140)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+        "prop": "--spectrum-purple-200",
+        "light": {
+            "value": "rgb(244, 235, 252)"
+        },
+        "dark": {
+            "value": "rgb(50, 0, 96)"
         }
     },
     "purple-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(230, 208, 255)"
-            },
-            "dark": {
-                "value": "rgb(105, 28, 200)"
-            },
-            "darkest": {
-                "value": "rgb(86, 16, 173)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+        "prop": "--spectrum-purple-300",
+        "light": {
+            "value": "rgb(235, 218, 249)"
+        },
+        "dark": {
+            "value": "rgb(64, 0, 122)"
         }
     },
     "purple-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(219, 187, 254)"
-            },
-            "dark": {
-                "value": "rgb(122, 45, 218)"
-            },
-            "darkest": {
-                "value": "rgb(106, 29, 200)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+        "prop": "--spectrum-purple-400",
+        "light": {
+            "value": "rgb(221, 193, 246)"
+        },
+        "dark": {
+            "value": "rgb(83, 0, 159)"
         }
     },
     "purple-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(204, 164, 253)"
-            },
-            "dark": {
-                "value": "rgb(140, 65, 233)"
-            },
-            "darkest": {
-                "value": "rgb(126, 49, 222)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+        "prop": "--spectrum-purple-500",
+        "light": {
+            "value": "rgb(208, 167, 243)"
+        },
+        "dark": {
+            "value": "rgb(107, 6, 195)"
         }
     },
     "purple-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(189, 139, 252)"
-            },
-            "dark": {
-                "value": "rgb(157, 87, 243)"
-            },
-            "darkest": {
-                "value": "rgb(145, 70, 236)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+        "prop": "--spectrum-purple-600",
+        "light": {
+            "value": "rgb(191, 138, 238)"
+        },
+        "dark": {
+            "value": "rgb(130, 34, 215)"
         }
     },
     "purple-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(174, 114, 249)"
-            },
-            "dark": {
-                "value": "rgb(172, 111, 249)"
-            },
-            "darkest": {
-                "value": "rgb(162, 94, 246)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+        "prop": "--spectrum-purple-700",
+        "light": {
+            "value": "rgb(178, 114, 235)"
+        },
+        "dark": {
+            "value": "rgb(148, 62, 224)"
         }
     },
     "purple-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(157, 87, 244)"
-            },
-            "dark": {
-                "value": "rgb(187, 135, 251)"
-            },
-            "darkest": {
-                "value": "rgb(178, 119, 250)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+        "prop": "--spectrum-purple-800",
+        "light": {
+            "value": "rgb(166, 92, 231)"
+        },
+        "dark": {
+            "value": "rgb(157, 78, 228)"
         }
     },
     "purple-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(137, 61, 231)"
-            },
-            "dark": {
-                "value": "rgb(202, 159, 252)"
-            },
-            "darkest": {
-                "value": "rgb(192, 143, 252)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+        "prop": "--spectrum-purple-900",
+        "light": {
+            "value": "rgb(154, 71, 226)"
+        },
+        "dark": {
+            "value": "rgb(173, 105, 233)"
         }
     },
-    "purple-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(115, 38, 211)"
-            },
-            "dark": {
-                "value": "rgb(215, 182, 254)"
-            },
-            "darkest": {
-                "value": "rgb(206, 166, 253)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "red-100": {
+        "prop": "--spectrum-red-100",
+        "light": {
+            "value": "rgb(255, 246, 245)"
+        },
+        "dark": {
+            "value": "rgb(54, 10, 3)"
         }
     },
-    "purple-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(93, 19, 183)"
-            },
-            "dark": {
-                "value": "rgb(228, 204, 254)"
-            },
-            "darkest": {
-                "value": "rgb(219, 188, 254)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "red-1000": {
+        "prop": "--spectrum-red-1000",
+        "light": {
+            "value": "rgb(183, 40, 24)"
+        },
+        "dark": {
+            "value": "rgb(255, 103, 86)"
         }
     },
-    "purple-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(71, 12, 148)"
-            },
-            "dark": {
-                "value": "rgb(239, 223, 255)"
-            },
-            "darkest": {
-                "value": "rgb(230, 207, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "red-1100": {
+        "prop": "--spectrum-red-1100",
+        "light": {
+            "value": "rgb(156, 33, 19)"
+        },
+        "dark": {
+            "value": "rgb(255, 134, 120)"
         }
     },
-    "purple-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(51, 16, 106)"
-            },
-            "dark": {
-                "value": "rgb(249, 240, 255)"
-            },
-            "darkest": {
-                "value": "rgb(240, 224, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "red-1200": {
+        "prop": "--spectrum-red-1200",
+        "light": {
+            "value": "rgb(129, 27, 14)"
+        },
+        "dark": {
+            "value": "rgb(255, 167, 157)"
         }
     },
-    "purple-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(35, 15, 73)"
-            },
-            "dark": {
-                "value": "rgb(255, 253, 255)"
-            },
-            "darkest": {
-                "value": "rgb(248, 237, 255)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "red-1300": {
+        "prop": "--spectrum-red-1300",
+        "light": {
+            "value": "rgb(104, 21, 10)"
+        },
+        "dark": {
+            "value": "rgb(255, 196, 189)"
         }
     },
-    "fuchsia-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 233, 252)"
-            },
-            "dark": {
-                "value": "rgb(107, 3, 106)"
-            },
-            "darkest": {
-                "value": "rgb(70, 14, 68)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "red-1400": {
+        "prop": "--spectrum-red-1400",
+        "light": {
+            "value": "rgb(80, 16, 6)"
+        },
+        "dark": {
+            "value": "rgb(255, 222, 219)"
         }
     },
-    "fuchsia-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 218, 250)"
-            },
-            "dark": {
-                "value": "rgb(123, 0, 123)"
-            },
-            "darkest": {
-                "value": "rgb(93, 9, 92)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "red-1500": {
+        "prop": "--spectrum-red-1500",
+        "dark": {
+            "value": "rgb(255, 242, 240)"
+        },
+        "light": {
+            "value": "rgb(59, 11, 4)"
         }
     },
-    "fuchsia-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(254, 199, 248)"
-            },
-            "dark": {
-                "value": "rgb(144, 0, 145)"
-            },
-            "darkest": {
-                "value": "rgb(120, 0, 120)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "red-1600": {
+        "prop": "--spectrum-red-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(29, 5, 2)"
         }
     },
-    "fuchsia-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(251, 174, 246)"
-            },
-            "dark": {
-                "value": "rgb(165, 13, 166)"
-            },
-            "darkest": {
-                "value": "rgb(146, 0, 147)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "red-200": {
+        "prop": "--spectrum-red-200",
+        "light": {
+            "value": "rgb(255, 235, 232)"
+        },
+        "dark": {
+            "value": "rgb(68, 13, 5)"
         }
     },
-    "fuchsia-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(245, 146, 243)"
-            },
-            "dark": {
-                "value": "rgb(185, 37, 185)"
-            },
-            "darkest": {
-                "value": "rgb(169, 19, 170)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "red-300": {
+        "prop": "--spectrum-red-300",
+        "light": {
+            "value": "rgb(255, 214, 209)"
+        },
+        "dark": {
+            "value": "rgb(87, 17, 7)"
         }
     },
-    "fuchsia-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(237, 116, 237)"
-            },
-            "dark": {
-                "value": "rgb(205, 57, 206)"
-            },
-            "darkest": {
-                "value": "rgb(191, 43, 191)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "red-400": {
+        "prop": "--spectrum-red-400",
+        "light": {
+            "value": "rgb(255, 188, 180)"
+        },
+        "dark": {
+            "value": "rgb(115, 24, 11)"
         }
     },
-    "fuchsia-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(224, 85, 226)"
-            },
-            "dark": {
-                "value": "rgb(223, 81, 224)"
-            },
-            "darkest": {
-                "value": "rgb(211, 65, 213)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "red-500": {
+        "prop": "--spectrum-red-500",
+        "light": {
+            "value": "rgb(255, 157, 145)"
+        },
+        "dark": {
+            "value": "rgb(147, 31, 17)"
         }
     },
-    "fuchsia-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(205, 58, 206)"
-            },
-            "dark": {
-                "value": "rgb(235, 110, 236)"
-            },
-            "darkest": {
-                "value": "rgb(228, 91, 229)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "red-600": {
+        "prop": "--spectrum-red-600",
+        "light": {
+            "value": "rgb(255, 118, 101)"
+        },
+        "dark": {
+            "value": "rgb(177, 38, 23)"
         }
     },
-    "fuchsia-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(182, 34, 183)"
-            },
-            "dark": {
-                "value": "rgb(244, 140, 242)"
-            },
-            "darkest": {
-                "value": "rgb(239, 120, 238)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "red-700": {
+        "prop": "--spectrum-red-700",
+        "light": {
+            "value": "rgb(255, 81, 61)"
+        },
+        "dark": {
+            "value": "rgb(205, 46, 29)"
         }
     },
-    "fuchsia-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(157, 3, 158)"
-            },
-            "dark": {
-                "value": "rgb(250, 168, 245)"
-            },
-            "darkest": {
-                "value": "rgb(246, 149, 243)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "red-800": {
+        "prop": "--spectrum-red-800",
+        "light": {
+            "value": "rgb(240, 56, 35)"
+        },
+        "dark": {
+            "value": "rgb(223, 52, 34)"
         }
     },
-    "fuchsia-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(128, 0, 129)"
-            },
-            "dark": {
-                "value": "rgb(254, 194, 248)"
-            },
-            "darkest": {
-                "value": "rgb(251, 175, 246)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "red-900": {
+        "prop": "--spectrum-red-900",
+        "light": {
+            "value": "rgb(215, 50, 32)"
+        },
+        "dark": {
+            "value": "rgb(252, 67, 46)"
         }
     },
-    "fuchsia-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(100, 6, 100)"
-            },
-            "dark": {
-                "value": "rgb(255, 219, 250)"
-            },
-            "darkest": {
-                "value": "rgb(254, 199, 248)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "seafoam-100": {
+        "prop": "--spectrum-seafoam-100",
+        "light": {
+            "value": "rgb(235, 251, 246)"
+        },
+        "dark": {
+            "value": "rgb(0, 30, 27)"
         }
     },
-    "fuchsia-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(71, 14, 70)"
-            },
-            "dark": {
-                "value": "rgb(255, 239, 252)"
-            },
-            "darkest": {
-                "value": "rgb(255, 220, 250)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "seafoam-1000": {
+        "prop": "--spectrum-seafoam-1000",
+        "light": {
+            "value": "rgb(5, 108, 92)"
+        },
+        "dark": {
+            "value": "rgb(12, 173, 142)"
         }
     },
-    "fuchsia-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(50, 13, 49)"
-            },
-            "dark": {
-                "value": "rgb(255, 253, 255)"
-            },
-            "darkest": {
-                "value": "rgb(255, 235, 252)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "seafoam-1100": {
+        "prop": "--spectrum-seafoam-1100",
+        "light": {
+            "value": "rgb(3, 92, 80)"
+        },
+        "dark": {
+            "value": "rgb(14, 190, 156)"
         }
     },
-    "magenta-100": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 234, 241)"
-            },
-            "dark": {
-                "value": "rgb(118, 0, 58)"
-            },
-            "darkest": {
-                "value": "rgb(83, 3, 41)"
-            },
-            "wireframe": {
-                "value": "rgb(242, 245, 251)"
-            }
+    "seafoam-1200": {
+        "prop": "--spectrum-seafoam-1200",
+        "light": {
+            "value": "rgb(1, 75, 67)"
+        },
+        "dark": {
+            "value": "rgb(29, 214, 176)"
         }
     },
-    "magenta-200": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 220, 232)"
-            },
-            "dark": {
-                "value": "rgb(137, 0, 66)"
-            },
-            "darkest": {
-                "value": "rgb(106, 0, 52)"
-            },
-            "wireframe": {
-                "value": "rgb(237, 241, 250)"
-            }
+    "seafoam-1300": {
+        "prop": "--spectrum-seafoam-1300",
+        "light": {
+            "value": "rgb(0, 60, 54)"
+        },
+        "dark": {
+            "value": "rgb(122, 229, 203)"
         }
     },
-    "magenta-300": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 202, 221)"
-            },
-            "dark": {
-                "value": "rgb(160, 0, 77)"
-            },
-            "darkest": {
-                "value": "rgb(133, 0, 65)"
-            },
-            "wireframe": {
-                "value": "rgb(233, 238, 248)"
-            }
+    "seafoam-1400": {
+        "prop": "--spectrum-seafoam-1400",
+        "light": {
+            "value": "rgb(0, 46, 40)"
+        },
+        "dark": {
+            "value": "rgb(186, 241, 222)"
         }
     },
-    "magenta-400": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 178, 206)"
-            },
-            "dark": {
-                "value": "rgb(182, 18, 90)"
-            },
-            "darkest": {
-                "value": "rgb(161, 0, 78)"
-            },
-            "wireframe": {
-                "value": "rgb(226, 232, 247)"
-            }
+    "seafoam-1500": {
+        "prop": "--spectrum-seafoam-1500",
+        "dark": {
+            "value": "rgb(229, 249, 243)"
+        },
+        "light": {
+            "value": "rgb(0, 33, 29)"
         }
     },
-    "magenta-500": {
-        "sets": {
-            "light": {
-                "value": "rgb(255, 149, 189)"
-            },
-            "dark": {
-                "value": "rgb(203, 38, 109)"
-            },
-            "darkest": {
-                "value": "rgb(186, 22, 93)"
-            },
-            "wireframe": {
-                "value": "rgb(216, 225, 244)"
-            }
+    "seafoam-1600": {
+        "prop": "--spectrum-seafoam-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(0, 15, 14)"
         }
     },
-    "magenta-600": {
-        "sets": {
-            "light": {
-                "value": "rgb(250, 119, 170)"
-            },
-            "dark": {
-                "value": "rgb(222, 61, 130)"
-            },
-            "darkest": {
-                "value": "rgb(209, 43, 114)"
-            },
-            "wireframe": {
-                "value": "rgb(203, 215, 241)"
-            }
+    "seafoam-200": {
+        "prop": "--spectrum-seafoam-200",
+        "light": {
+            "value": "rgb(211, 246, 234)"
+        },
+        "dark": {
+            "value": "rgb(0, 39, 35)"
         }
     },
-    "magenta-700": {
-        "sets": {
-            "light": {
-                "value": "rgb(239, 90, 152)"
-            },
-            "dark": {
-                "value": "rgb(237, 87, 149)"
-            },
-            "darkest": {
-                "value": "rgb(227, 69, 137)"
-            },
-            "wireframe": {
-                "value": "rgb(190, 205, 237)"
-            }
+    "seafoam-300": {
+        "prop": "--spectrum-seafoam-300",
+        "light": {
+            "value": "rgb(169, 237, 216)"
+        },
+        "dark": {
+            "value": "rgb(0, 50, 44)"
         }
     },
-    "magenta-800": {
-        "sets": {
-            "light": {
-                "value": "rgb(222, 61, 130)"
-            },
-            "dark": {
-                "value": "rgb(249, 114, 167)"
-            },
-            "darkest": {
-                "value": "rgb(241, 97, 156)"
-            },
-            "wireframe": {
-                "value": "rgb(173, 192, 233)"
-            }
+    "seafoam-400": {
+        "prop": "--spectrum-seafoam-400",
+        "light": {
+            "value": "rgb(92, 225, 194)"
+        },
+        "dark": {
+            "value": "rgb(0, 67, 59)"
         }
     },
-    "magenta-900": {
-        "sets": {
-            "light": {
-                "value": "rgb(200, 34, 105)"
-            },
-            "dark": {
-                "value": "rgb(255, 143, 185)"
-            },
-            "darkest": {
-                "value": "rgb(252, 124, 173)"
-            },
-            "wireframe": {
-                "value": "rgb(154, 177, 227)"
-            }
+    "seafoam-500": {
+        "prop": "--spectrum-seafoam-500",
+        "light": {
+            "value": "rgb(16, 207, 169)"
+        },
+        "dark": {
+            "value": "rgb(2, 86, 75)"
         }
     },
-    "magenta-1000": {
-        "sets": {
-            "light": {
-                "value": "rgb(173, 9, 85)"
-            },
-            "dark": {
-                "value": "rgb(255, 172, 202)"
-            },
-            "darkest": {
-                "value": "rgb(255, 152, 191)"
-            },
-            "wireframe": {
-                "value": "rgb(133, 161, 219)"
-            }
+    "seafoam-600": {
+        "prop": "--spectrum-seafoam-600",
+        "light": {
+            "value": "rgb(13, 181, 149)"
+        },
+        "dark": {
+            "value": "rgb(4, 105, 89)"
         }
     },
-    "magenta-1100": {
-        "sets": {
-            "light": {
-                "value": "rgb(142, 0, 69)"
-            },
-            "dark": {
-                "value": "rgb(255, 198, 218)"
-            },
-            "darkest": {
-                "value": "rgb(255, 179, 207)"
-            },
-            "wireframe": {
-                "value": "rgb(114, 145, 211)"
-            }
+    "seafoam-700": {
+        "prop": "--spectrum-seafoam-700",
+        "light": {
+            "value": "rgb(11, 162, 134)"
+        },
+        "dark": {
+            "value": "rgb(6, 122, 103)"
         }
     },
-    "magenta-1200": {
-        "sets": {
-            "light": {
-                "value": "rgb(112, 0, 55)"
-            },
-            "dark": {
-                "value": "rgb(255, 221, 233)"
-            },
-            "darkest": {
-                "value": "rgb(255, 202, 221)"
-            },
-            "wireframe": {
-                "value": "rgb(96, 130, 201)"
-            }
+    "seafoam-800": {
+        "prop": "--spectrum-seafoam-800",
+        "light": {
+            "value": "rgb(9, 144, 120)"
+        },
+        "dark": {
+            "value": "rgb(8, 134, 112)"
         }
     },
-    "magenta-1300": {
-        "sets": {
-            "light": {
-                "value": "rgb(84, 3, 42)"
-            },
-            "dark": {
-                "value": "rgb(255, 240, 245)"
-            },
-            "darkest": {
-                "value": "rgb(255, 221, 233)"
-            },
-            "wireframe": {
-                "value": "rgb(82, 117, 192)"
-            }
+    "seafoam-900": {
+        "prop": "--spectrum-seafoam-900",
+        "light": {
+            "value": "rgb(7, 129, 109)"
+        },
+        "dark": {
+            "value": "rgb(10, 154, 128)"
+        }
+    },
+    "silver-100": {
+        "prop": "--spectrum-silver-100",
+        "dark": {
+            "value": "rgb(26, 26, 26)"
+        },
+        "light": {
+            "value": "rgb(247, 247, 247)"
+        }
+    },
+    "silver-1000": {
+        "prop": "--spectrum-silver-1000",
+        "dark": {
+            "value": "rgb(152, 152, 152)"
+        },
+        "light": {
+            "value": "rgb(96, 96, 96)"
+        }
+    },
+    "silver-1100": {
+        "prop": "--spectrum-silver-1100",
+        "dark": {
+            "value": "rgb(169, 169, 169)"
+        },
+        "light": {
+            "value": "rgb(81, 81, 81)"
+        }
+    },
+    "silver-1200": {
+        "prop": "--spectrum-silver-1200",
+        "dark": {
+            "value": "rgb(190, 190, 190)"
+        },
+        "light": {
+            "value": "rgb(66, 66, 66)"
+        }
+    },
+    "silver-1300": {
+        "prop": "--spectrum-silver-1300",
+        "dark": {
+            "value": "rgb(211, 211, 211)"
+        },
+        "light": {
+            "value": "rgb(52, 52, 52)"
+        }
+    },
+    "silver-1400": {
+        "prop": "--spectrum-silver-1400",
+        "dark": {
+            "value": "rgb(229, 229, 229)"
+        },
+        "light": {
+            "value": "rgb(39, 39, 39)"
+        }
+    },
+    "silver-1500": {
+        "prop": "--spectrum-silver-1500",
+        "dark": {
+            "value": "rgb(244, 244, 244)"
+        },
+        "light": {
+            "value": "rgb(28, 28, 28)"
+        }
+    },
+    "silver-1600": {
+        "prop": "--spectrum-silver-1600",
+        "dark": {
+            "value": "rgb(255, 255, 255)"
+        },
+        "light": {
+            "value": "rgb(12, 12, 12)"
+        }
+    },
+    "silver-200": {
+        "prop": "--spectrum-silver-200",
+        "dark": {
+            "value": "rgb(33, 33, 33)"
+        },
+        "light": {
+            "value": "rgb(239, 239, 239)"
+        }
+    },
+    "silver-300": {
+        "prop": "--spectrum-silver-300",
+        "dark": {
+            "value": "rgb(44, 44, 44)"
+        },
+        "light": {
+            "value": "rgb(223, 223, 223)"
+        }
+    },
+    "silver-400": {
+        "prop": "--spectrum-silver-400",
+        "dark": {
+            "value": "rgb(59, 59, 59)"
+        },
+        "light": {
+            "value": "rgb(204, 204, 204)"
+        }
+    },
+    "silver-500": {
+        "prop": "--spectrum-silver-500",
+        "dark": {
+            "value": "rgb(76, 76, 76)"
+        },
+        "light": {
+            "value": "rgb(183, 183, 183)"
+        }
+    },
+    "silver-600": {
+        "prop": "--spectrum-silver-600",
+        "dark": {
+            "value": "rgb(92, 92, 92)"
+        },
+        "light": {
+            "value": "rgb(160, 160, 160)"
+        }
+    },
+    "silver-700": {
+        "prop": "--spectrum-silver-700",
+        "dark": {
+            "value": "rgb(108, 108, 108)"
+        },
+        "light": {
+            "value": "rgb(143, 143, 143)"
+        }
+    },
+    "silver-800": {
+        "prop": "--spectrum-silver-800",
+        "dark": {
+            "value": "rgb(118, 118, 118)"
+        },
+        "light": {
+            "value": "rgb(128, 128, 128)"
+        }
+    },
+    "silver-900": {
+        "prop": "--spectrum-silver-900",
+        "dark": {
+            "value": "rgb(137, 137, 137)"
+        },
+        "light": {
+            "value": "rgb(114, 114, 114)"
+        }
+    },
+    "static-blue-1000": {
+        "prop": "--spectrum-static-blue-1000",
+        "value": "rgb(39, 77, 234)"
+    },
+    "static-blue-900": {
+        "prop": "--spectrum-static-blue-900",
+        "value": "rgb(59, 99, 251)"
+    },
+    "static-fuchsia-1000": {
+        "prop": "--spectrum-static-fuchsia-1000",
+        "value": "rgb(156, 40, 175)"
+    },
+    "static-fuchsia-900": {
+        "prop": "--spectrum-static-fuchsia-900",
+        "value": "rgb(181, 57, 200)"
+    },
+    "static-indigo-1000": {
+        "prop": "--spectrum-static-indigo-1000",
+        "value": "rgb(99, 56, 238)"
+    },
+    "static-indigo-900": {
+        "prop": "--spectrum-static-indigo-900",
+        "value": "rgb(113, 85, 250)"
+    },
+    "static-magenta-1000": {
+        "prop": "--spectrum-static-magenta-1000",
+        "value": "rgb(186, 22, 80)"
+    },
+    "static-magenta-900": {
+        "prop": "--spectrum-static-magenta-900",
+        "value": "rgb(217, 35, 97)"
+    },
+    "static-red-1000": {
+        "prop": "--spectrum-static-red-1000",
+        "value": "rgb(183, 40, 24)"
+    },
+    "static-red-900": {
+        "prop": "--spectrum-static-red-900",
+        "value": "rgb(215, 50, 32)"
+    },
+    "transparent-black-100": {
+        "prop": "--spectrum-transparent-black-100",
+        "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.12)"
+    },
+    "transparent-black-25": {
+        "prop": "--spectrum-transparent-black-25",
+        "value": "rgba(0, 0, 0, 0)"
+    },
+    "transparent-black-300": {
+        "prop": "--spectrum-transparent-black-300",
+        "value": "rgba(0, 0, 0, 0.15)"
+    },
+    "transparent-black-400": {
+        "prop": "--spectrum-transparent-black-400",
+        "value": "rgba(0, 0, 0, 0.22)"
+    },
+    "transparent-black-50": {
+        "prop": "--spectrum-transparent-black-50",
+        "value": "rgba(0, 0, 0, 0.03)"
+    },
+    "transparent-black-500": {
+        "prop": "--spectrum-transparent-black-500",
+        "value": "rgba(0, 0, 0, 0.44)"
+    },
+    "transparent-black-600": {
+        "prop": "--spectrum-transparent-black-600",
+        "value": "rgba(0, 0, 0, 0.56)"
+    },
+    "transparent-black-700": {
+        "prop": "--spectrum-transparent-black-700",
+        "value": "rgba(0, 0, 0, 0.69)"
+    },
+    "transparent-black-75": {
+        "prop": "--spectrum-transparent-black-75",
+        "value": "rgba(0, 0, 0, 0.05)"
+    },
+    "transparent-black-800": {
+        "prop": "--spectrum-transparent-black-800",
+        "value": "rgba(0, 0, 0, 0.84)"
+    },
+    "transparent-black-900": {
+        "prop": "--spectrum-transparent-black-900",
+        "value": "rgba(0, 0, 0, 0.93)"
+    },
+    "transparent-white-100": {
+        "prop": "--spectrum-transparent-white-100",
+        "value": "rgba(255, 255, 255, 0.11)"
+    },
+    "transparent-white-1000": {
+        "prop": "--spectrum-transparent-white-1000",
+        "value": "rgb(255, 255, 255)"
+    },
+    "transparent-white-200": {
+        "prop": "--spectrum-transparent-white-200",
+        "value": "rgba(255, 255, 255, 0.14)"
+    },
+    "transparent-white-25": {
+        "prop": "--spectrum-transparent-white-25",
+        "value": "rgba(255, 255, 255, 0)"
+    },
+    "transparent-white-300": {
+        "prop": "--spectrum-transparent-white-300",
+        "value": "rgba(255, 255, 255, 0.17)"
+    },
+    "transparent-white-400": {
+        "prop": "--spectrum-transparent-white-400",
+        "value": "rgba(255, 255, 255, 0.21)"
+    },
+    "transparent-white-50": {
+        "prop": "--spectrum-transparent-white-50",
+        "value": "rgba(255, 255, 255, 0.04)"
+    },
+    "transparent-white-500": {
+        "prop": "--spectrum-transparent-white-500",
+        "value": "rgba(255, 255, 255, 0.39)"
+    },
+    "transparent-white-600": {
+        "prop": "--spectrum-transparent-white-600",
+        "value": "rgba(255, 255, 255, 0.51)"
+    },
+    "transparent-white-700": {
+        "prop": "--spectrum-transparent-white-700",
+        "value": "rgba(255, 255, 255, 0.66)"
+    },
+    "transparent-white-75": {
+        "prop": "--spectrum-transparent-white-75",
+        "value": "rgba(255, 255, 255, 0.07)"
+    },
+    "transparent-white-800": {
+        "prop": "--spectrum-transparent-white-800",
+        "value": "rgba(255, 255, 255, 0.85)"
+    },
+    "transparent-white-900": {
+        "prop": "--spectrum-transparent-white-900",
+        "value": "rgba(255, 255, 255, 0.94)"
+    },
+    "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)"
         }
     },
-    "magenta-1400": {
-        "sets": {
-            "light": {
-                "value": "rgb(60, 6, 29)"
-            },
-            "dark": {
-                "value": "rgb(255, 252, 253)"
-            },
-            "darkest": {
-                "value": "rgb(255, 236, 243)"
-            },
-            "wireframe": {
-                "value": "rgb(74, 109, 184)"
-            }
+    "white": {
+        "prop": "--spectrum-white",
+        "value": "rgb(255, 255, 255)"
+    },
+    "yellow-100": {
+        "prop": "--spectrum-yellow-100",
+        "light": {
+            "value": "rgb(255, 248, 204)"
+        },
+        "dark": {
+            "value": "rgb(37, 23, 0)"
+        }
+    },
+    "yellow-1000": {
+        "prop": "--spectrum-yellow-1000",
+        "light": {
+            "value": "rgb(134, 85, 0)"
+        },
+        "dark": {
+            "value": "rgb(203, 141, 0)"
+        }
+    },
+    "yellow-1100": {
+        "prop": "--spectrum-yellow-1100",
+        "light": {
+            "value": "rgb(114, 72, 0)"
+        },
+        "dark": {
+            "value": "rgb(218, 159, 0)"
+        }
+    },
+    "yellow-1200": {
+        "prop": "--spectrum-yellow-1200",
+        "light": {
+            "value": "rgb(93, 59, 0)"
+        },
+        "dark": {
+            "value": "rgb(235, 183, 0)"
+        }
+    },
+    "yellow-1300": {
+        "prop": "--spectrum-yellow-1300",
+        "light": {
+            "value": "rgb(75, 47, 0)"
+        },
+        "dark": {
+            "value": "rgb(249, 206, 0)"
+        }
+    },
+    "yellow-1400": {
+        "prop": "--spectrum-yellow-1400",
+        "light": {
+            "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)"
+        },
+        "light": {
+            "value": "rgb(18, 11, 0)"
+        }
+    },
+    "yellow-200": {
+        "prop": "--spectrum-yellow-200",
+        "light": {
+            "value": "rgb(255, 241, 151)"
+        },
+        "dark": {
+            "value": "rgb(47, 29, 0)"
+        }
+    },
+    "yellow-300": {
+        "prop": "--spectrum-yellow-300",
+        "light": {
+            "value": "rgb(255, 222, 44)"
+        },
+        "dark": {
+            "value": "rgb(61, 39, 0)"
+        }
+    },
+    "yellow-400": {
+        "prop": "--spectrum-yellow-400",
+        "light": {
+            "value": "rgb(245, 199, 0)"
+        },
+        "dark": {
+            "value": "rgb(83, 52, 0)"
+        }
+    },
+    "yellow-500": {
+        "prop": "--spectrum-yellow-500",
+        "light": {
+            "value": "rgb(230, 175, 0)"
+        },
+        "dark": {
+            "value": "rgb(107, 67, 0)"
+        }
+    },
+    "yellow-600": {
+        "prop": "--spectrum-yellow-600",
+        "light": {
+            "value": "rgb(210, 149, 0)"
+        },
+        "dark": {
+            "value": "rgb(130, 82, 0)"
+        }
+    },
+    "yellow-700": {
+        "prop": "--spectrum-yellow-700",
+        "light": {
+            "value": "rgb(193, 131, 0)"
+        },
+        "dark": {
+            "value": "rgb(151, 97, 0)"
+        }
+    },
+    "yellow-800": {
+        "prop": "--spectrum-yellow-800",
+        "light": {
+            "value": "rgb(175, 116, 0)"
+        },
+        "dark": {
+            "value": "rgb(164, 106, 0)"
+        }
+    },
+    "yellow-900": {
+        "prop": "--spectrum-yellow-900",
+        "light": {
+            "value": "rgb(158, 102, 0)"
+        },
+        "dark": {
+            "value": "rgb(186, 124, 0)"
         }
     }
 }
diff --git a/projects/css-custom-vars-viewer/src/custom-vars-viewer.ts b/projects/css-custom-vars-viewer/src/custom-vars-viewer.ts
index b5d62981812..699b495555e 100644
--- a/projects/css-custom-vars-viewer/src/custom-vars-viewer.ts
+++ b/projects/css-custom-vars-viewer/src/custom-vars-viewer.ts
@@ -10,5 +10,12 @@
  * governing permissions and limitations under the License.
  */
 import { CustomVarsViewer } from './CustomVarsViewer.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-window.customElements.define('custom-vars-viewer', CustomVarsViewer);
+defineElement('custom-vars-viewer', CustomVarsViewer);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'custom-vars-viewer': CustomVarsViewer;
+    }
+}
diff --git a/projects/css-custom-vars-viewer/src/parsed-data.ts b/projects/css-custom-vars-viewer/src/parsed-data.ts
index 482a0eebd48..1746d972cb3 100644
--- a/projects/css-custom-vars-viewer/src/parsed-data.ts
+++ b/projects/css-custom-vars-viewer/src/parsed-data.ts
@@ -1,1769 +1,1955 @@
-/* eslint-disable notice/notice */
-/* eslint-disable prettier/prettier */
-    import { Item } from './CssTable.js';
+import { Item } from './CssTable.js';
 
-    export const grayValues: Item[] = [
-  {
-    "customVar": "--spectrum-gray-50",
-    "sets": {
-      "light": "rgb(255, 255, 255)",
-      "dark": "rgb(29, 29, 29)",
-      "darkest": "rgb(0, 0, 0)",
-      "wireframe": "rgb(255, 255, 255)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-75",
-    "sets": {
-      "light": "rgb(253, 253, 253)",
-      "dark": "rgb(38, 38, 38)",
-      "darkest": "rgb(14, 14, 14)",
-      "wireframe": "rgb(253, 253, 254)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-100",
-    "sets": {
-      "light": "rgb(248, 248, 248)",
-      "dark": "rgb(50, 50, 50)",
-      "darkest": "rgb(29, 29, 29)",
-      "wireframe": "rgb(244, 246, 252)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-200",
-    "sets": {
-      "light": "rgb(230, 230, 230)",
-      "dark": "rgb(63, 63, 63)",
-      "darkest": "rgb(48, 48, 48)",
-      "wireframe": "rgb(230, 236, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-300",
-    "sets": {
-      "light": "rgb(213, 213, 213)",
-      "dark": "rgb(84, 84, 84)",
-      "darkest": "rgb(75, 75, 75)",
-      "wireframe": "rgb(210, 220, 243)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-400",
-    "sets": {
-      "light": "rgb(177, 177, 177)",
-      "dark": "rgb(112, 112, 112)",
-      "darkest": "rgb(106, 106, 106)",
-      "wireframe": "rgb(183, 200, 235)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-500",
-    "sets": {
-      "light": "rgb(144, 144, 144)",
-      "dark": "rgb(144, 144, 144)",
-      "darkest": "rgb(141, 141, 141)",
-      "wireframe": "rgb(152, 176, 226)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-600",
-    "sets": {
-      "light": "rgb(109, 109, 109)",
-      "dark": "rgb(178, 178, 178)",
-      "darkest": "rgb(176, 176, 176)",
-      "wireframe": "rgb(113, 144, 210)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-700",
-    "sets": {
-      "light": "rgb(70, 70, 70)",
-      "dark": "rgb(209, 209, 209)",
-      "darkest": "rgb(208, 208, 208)",
-      "wireframe": "rgb(78, 112, 187)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-800",
-    "sets": {
-      "light": "rgb(34, 34, 34)",
-      "dark": "rgb(235, 235, 235)",
-      "darkest": "rgb(235, 235, 235)",
-      "wireframe": "rgb(73, 110, 194)"
-    }
-  },
-  {
-    "customVar": "--spectrum-gray-900",
-    "sets": {
-      "light": "rgb(0, 0, 0)",
-      "dark": "rgb(255, 255, 255)",
-      "darkest": "rgb(255, 255, 255)",
-      "wireframe": "rgb(72, 110, 194)"
-    }
-  }
+export const grayValues: Item[] = [
+    {
+        prop: '--spectrum-gray-100',
+        light: 'rgb(233, 233, 233)',
+        dark: 'rgb(44, 44, 44)',
+    },
+    {
+        prop: '--spectrum-gray-1000',
+        light: 'rgb(0, 0, 0)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-gray-200',
+        light: 'rgb(225, 225, 225)',
+        dark: 'rgb(50, 50, 50)',
+    },
+    {
+        prop: '--spectrum-gray-25',
+        light: 'rgb(255, 255, 255)',
+        dark: 'rgb(17, 17, 17)',
+    },
+    {
+        prop: '--spectrum-gray-300',
+        light: 'rgb(218, 218, 218)',
+        dark: 'rgb(57, 57, 57)',
+    },
+    {
+        prop: '--spectrum-gray-400',
+        light: 'rgb(198, 198, 198)',
+        dark: 'rgb(68, 68, 68)',
+    },
+    {
+        prop: '--spectrum-gray-50',
+        light: 'rgb(248, 248, 248)',
+        dark: 'rgb(27, 27, 27)',
+    },
+    {
+        prop: '--spectrum-gray-500',
+        light: 'rgb(143, 143, 143)',
+        dark: 'rgb(109, 109, 109)',
+    },
+    {
+        prop: '--spectrum-gray-600',
+        light: 'rgb(113, 113, 113)',
+        dark: 'rgb(138, 138, 138)',
+    },
+    {
+        prop: '--spectrum-gray-700',
+        light: 'rgb(80, 80, 80)',
+        dark: 'rgb(175, 175, 175)',
+    },
+    {
+        prop: '--spectrum-gray-75',
+        light: 'rgb(243, 243, 243)',
+        dark: 'rgb(34, 34, 34)',
+    },
+    {
+        prop: '--spectrum-gray-800',
+        light: 'rgb(41, 41, 41)',
+        dark: 'rgb(219, 219, 219)',
+    },
+    {
+        prop: '--spectrum-gray-900',
+        light: 'rgb(19, 19, 19)',
+        dark: 'rgb(242, 242, 242)',
+    },
 ];
 export const blueValues: Item[] = [
-  {
-    "customVar": "--spectrum-blue-100",
-    "sets": {
-      "light": "rgb(224, 242, 255)",
-      "dark": "rgb(0, 56, 119)",
-      "darkest": "rgb(0, 38, 81)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-200",
-    "sets": {
-      "light": "rgb(202, 232, 255)",
-      "dark": "rgb(0, 65, 138)",
-      "darkest": "rgb(0, 50, 106)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-300",
-    "sets": {
-      "light": "rgb(181, 222, 255)",
-      "dark": "rgb(0, 77, 163)",
-      "darkest": "rgb(0, 64, 135)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-400",
-    "sets": {
-      "light": "rgb(150, 206, 253)",
-      "dark": "rgb(0, 89, 194)",
-      "darkest": "rgb(0, 78, 166)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-500",
-    "sets": {
-      "light": "rgb(120, 187, 250)",
-      "dark": "rgb(3, 103, 224)",
-      "darkest": "rgb(0, 92, 200)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-600",
-    "sets": {
-      "light": "rgb(89, 167, 246)",
-      "dark": "rgb(19, 121, 243)",
-      "darkest": "rgb(6, 108, 231)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-700",
-    "sets": {
-      "light": "rgb(56, 146, 243)",
-      "dark": "rgb(52, 143, 244)",
-      "darkest": "rgb(29, 128, 245)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-800",
-    "sets": {
-      "light": "rgb(20, 122, 243)",
-      "dark": "rgb(84, 163, 246)",
-      "darkest": "rgb(64, 150, 243)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-900",
-    "sets": {
-      "light": "rgb(2, 101, 220)",
-      "dark": "rgb(114, 183, 249)",
-      "darkest": "rgb(94, 170, 247)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-1000",
-    "sets": {
-      "light": "rgb(0, 84, 182)",
-      "dark": "rgb(143, 202, 252)",
-      "darkest": "rgb(124, 189, 250)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-1100",
-    "sets": {
-      "light": "rgb(0, 68, 145)",
-      "dark": "rgb(174, 219, 254)",
-      "darkest": "rgb(152, 206, 253)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-1200",
-    "sets": {
-      "light": "rgb(0, 53, 113)",
-      "dark": "rgb(204, 233, 255)",
-      "darkest": "rgb(179, 222, 254)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-1300",
-    "sets": {
-      "light": "rgb(0, 39, 84)",
-      "dark": "rgb(232, 246, 255)",
-      "darkest": "rgb(206, 234, 255)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-blue-1400",
-    "sets": {
-      "light": "rgb(0, 28, 60)",
-      "dark": "rgb(255, 255, 255)",
-      "darkest": "rgb(227, 243, 255)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-blue-100',
+        light: 'rgb(245, 249, 255)',
+        dark: 'rgb(14, 23, 63)',
+    },
+    {
+        prop: '--spectrum-blue-1000',
+        light: 'rgb(39, 77, 234)',
+        dark: 'rgb(105, 149, 254)',
+    },
+    {
+        prop: '--spectrum-blue-1100',
+        light: 'rgb(29, 62, 207)',
+        dark: 'rgb(124, 169, 252)',
+    },
+    {
+        prop: '--spectrum-blue-1200',
+        light: 'rgb(21, 50, 173)',
+        dark: 'rgb(152, 192, 252)',
+    },
+    {
+        prop: '--spectrum-blue-1300',
+        light: 'rgb(16, 40, 140)',
+        dark: 'rgb(181, 213, 253)',
+    },
+    {
+        prop: '--spectrum-blue-1400',
+        light: 'rgb(12, 31, 105)',
+        dark: 'rgb(213, 231, 254)',
+    },
+    {
+        prop: '--spectrum-blue-1500',
+        light: 'rgb(14, 24, 67)',
+        dark: 'rgb(238, 245, 255)',
+    },
+    {
+        prop: '--spectrum-blue-1600',
+        light: 'rgb(7, 11, 30)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-blue-200',
+        light: 'rgb(229, 240, 254)',
+        dark: 'rgb(15, 28, 82)',
+    },
+    {
+        prop: '--spectrum-blue-300',
+        light: 'rgb(203, 226, 254)',
+        dark: 'rgb(12, 33, 117)',
+    },
+    {
+        prop: '--spectrum-blue-400',
+        light: 'rgb(172, 207, 253)',
+        dark: 'rgb(18, 45, 154)',
+    },
+    {
+        prop: '--spectrum-blue-500',
+        light: 'rgb(142, 185, 252)',
+        dark: 'rgb(26, 58, 195)',
+    },
+    {
+        prop: '--spectrum-blue-600',
+        light: 'rgb(114, 158, 253)',
+        dark: 'rgb(37, 73, 229)',
+    },
+    {
+        prop: '--spectrum-blue-700',
+        light: 'rgb(93, 137, 255)',
+        dark: 'rgb(52, 91, 248)',
+    },
+    {
+        prop: '--spectrum-blue-800',
+        light: 'rgb(75, 117, 255)',
+        dark: 'rgb(64, 105, 253)',
+    },
+    {
+        prop: '--spectrum-blue-900',
+        light: 'rgb(59, 99, 251)',
+        dark: 'rgb(86, 129, 255)',
+    },
+    {
+        prop: '--spectrum-icon-color-blue-background',
+        light: 'rgb(229, 240, 254)',
+        dark: 'rgb(12, 33, 117)',
+    },
+    {
+        prop: '--spectrum-icon-color-blue-primary-default',
+        light: 'rgb(59, 99, 251)',
+        dark: 'rgb(64, 105, 253)',
+    },
+    {
+        prop: '--spectrum-icon-color-blue-primary-down',
+        light: 'rgb(29, 62, 207)',
+        dark: 'rgb(105, 149, 254)',
+    },
+    {
+        prop: '--spectrum-icon-color-blue-primary-hover',
+        light: 'rgb(39, 77, 234)',
+        dark: 'rgb(86, 129, 255)',
+    },
+    {
+        prop: '--spectrum-static-blue-1000',
+        light: 'rgb(39, 77, 234)',
+        dark: 'rgb(39, 77, 234)',
+    },
+    {
+        prop: '--spectrum-static-blue-900',
+        light: 'rgb(59, 99, 251)',
+        dark: 'rgb(59, 99, 251)',
+    },
 ];
 export const redValues: Item[] = [
-  {
-    "customVar": "--spectrum-red-100",
-    "sets": {
-      "light": "rgb(255, 235, 231)",
-      "dark": "rgb(123, 0, 0)",
-      "darkest": "rgb(87, 0, 0)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-200",
-    "sets": {
-      "light": "rgb(255, 221, 214)",
-      "dark": "rgb(141, 0, 0)",
-      "darkest": "rgb(110, 0, 0)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-300",
-    "sets": {
-      "light": "rgb(255, 205, 195)",
-      "dark": "rgb(165, 0, 0)",
-      "darkest": "rgb(138, 0, 0)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-400",
-    "sets": {
-      "light": "rgb(255, 183, 169)",
-      "dark": "rgb(190, 4, 3)",
-      "darkest": "rgb(167, 0, 0)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-500",
-    "sets": {
-      "light": "rgb(255, 155, 136)",
-      "dark": "rgb(215, 25, 19)",
-      "darkest": "rgb(196, 7, 6)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-600",
-    "sets": {
-      "light": "rgb(255, 124, 101)",
-      "dark": "rgb(234, 56, 41)",
-      "darkest": "rgb(221, 33, 24)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-700",
-    "sets": {
-      "light": "rgb(247, 92, 70)",
-      "dark": "rgb(246, 88, 67)",
-      "darkest": "rgb(238, 67, 49)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-800",
-    "sets": {
-      "light": "rgb(234, 56, 41)",
-      "dark": "rgb(255, 117, 94)",
-      "darkest": "rgb(249, 99, 76)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-900",
-    "sets": {
-      "light": "rgb(211, 21, 16)",
-      "dark": "rgb(255, 149, 129)",
-      "darkest": "rgb(255, 129, 107)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-1000",
-    "sets": {
-      "light": "rgb(180, 0, 0)",
-      "dark": "rgb(255, 176, 161)",
-      "darkest": "rgb(255, 158, 140)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-1100",
-    "sets": {
-      "light": "rgb(147, 0, 0)",
-      "dark": "rgb(255, 201, 189)",
-      "darkest": "rgb(255, 183, 169)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-1200",
-    "sets": {
-      "light": "rgb(116, 0, 0)",
-      "dark": "rgb(255, 222, 216)",
-      "darkest": "rgb(255, 205, 195)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-1300",
-    "sets": {
-      "light": "rgb(89, 0, 0)",
-      "dark": "rgb(255, 241, 238)",
-      "darkest": "rgb(255, 223, 217)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-red-1400",
-    "sets": {
-      "light": "rgb(67, 0, 0)",
-      "dark": "rgb(255, 255, 255)",
-      "darkest": "rgb(255, 237, 234)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-icon-color-red-background',
+        light: 'rgb(255, 235, 232)',
+        dark: 'rgb(87, 17, 7)',
+    },
+    {
+        prop: '--spectrum-icon-color-red-primary-default',
+        light: 'rgb(215, 50, 32)',
+        dark: 'rgb(205, 46, 29)',
+    },
+    {
+        prop: '--spectrum-icon-color-red-primary-down',
+        light: 'rgb(156, 33, 19)',
+        dark: 'rgb(252, 67, 46)',
+    },
+    {
+        prop: '--spectrum-icon-color-red-primary-hover',
+        light: 'rgb(183, 40, 24)',
+        dark: 'rgb(223, 52, 34)',
+    },
+    {
+        prop: '--spectrum-red-100',
+        light: 'rgb(255, 246, 245)',
+        dark: 'rgb(54, 10, 3)',
+    },
+    {
+        prop: '--spectrum-red-1000',
+        light: 'rgb(183, 40, 24)',
+        dark: 'rgb(255, 103, 86)',
+    },
+    {
+        prop: '--spectrum-red-1100',
+        light: 'rgb(156, 33, 19)',
+        dark: 'rgb(255, 134, 120)',
+    },
+    {
+        prop: '--spectrum-red-1200',
+        light: 'rgb(129, 27, 14)',
+        dark: 'rgb(255, 167, 157)',
+    },
+    {
+        prop: '--spectrum-red-1300',
+        light: 'rgb(104, 21, 10)',
+        dark: 'rgb(255, 196, 189)',
+    },
+    {
+        prop: '--spectrum-red-1400',
+        light: 'rgb(80, 16, 6)',
+        dark: 'rgb(255, 222, 219)',
+    },
+    {
+        prop: '--spectrum-red-1500',
+        light: 'rgb(59, 11, 4)',
+        dark: 'rgb(255, 242, 240)',
+    },
+    {
+        prop: '--spectrum-red-1600',
+        light: 'rgb(29, 5, 2)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-red-200',
+        light: 'rgb(255, 235, 232)',
+        dark: 'rgb(68, 13, 5)',
+    },
+    {
+        prop: '--spectrum-red-300',
+        light: 'rgb(255, 214, 209)',
+        dark: 'rgb(87, 17, 7)',
+    },
+    {
+        prop: '--spectrum-red-400',
+        light: 'rgb(255, 188, 180)',
+        dark: 'rgb(115, 24, 11)',
+    },
+    {
+        prop: '--spectrum-red-500',
+        light: 'rgb(255, 157, 145)',
+        dark: 'rgb(147, 31, 17)',
+    },
+    {
+        prop: '--spectrum-red-600',
+        light: 'rgb(255, 118, 101)',
+        dark: 'rgb(177, 38, 23)',
+    },
+    {
+        prop: '--spectrum-red-700',
+        light: 'rgb(255, 81, 61)',
+        dark: 'rgb(205, 46, 29)',
+    },
+    {
+        prop: '--spectrum-red-800',
+        light: 'rgb(240, 56, 35)',
+        dark: 'rgb(223, 52, 34)',
+    },
+    {
+        prop: '--spectrum-red-900',
+        light: 'rgb(215, 50, 32)',
+        dark: 'rgb(252, 67, 46)',
+    },
+    {
+        prop: '--spectrum-static-red-1000',
+        light: 'rgb(183, 40, 24)',
+        dark: 'rgb(183, 40, 24)',
+    },
+    {
+        prop: '--spectrum-static-red-900',
+        light: 'rgb(215, 50, 32)',
+        dark: 'rgb(215, 50, 32)',
+    },
 ];
 export const orangeValues: Item[] = [
-  {
-    "customVar": "--spectrum-orange-100",
-    "sets": {
-      "light": "rgb(255, 236, 204)",
-      "dark": "rgb(102, 37, 0)",
-      "darkest": "rgb(72, 24, 1)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-200",
-    "sets": {
-      "light": "rgb(255, 223, 173)",
-      "dark": "rgb(117, 45, 0)",
-      "darkest": "rgb(92, 32, 0)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-300",
-    "sets": {
-      "light": "rgb(253, 210, 145)",
-      "dark": "rgb(137, 55, 0)",
-      "darkest": "rgb(115, 43, 0)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-400",
-    "sets": {
-      "light": "rgb(255, 187, 99)",
-      "dark": "rgb(158, 66, 0)",
-      "darkest": "rgb(138, 55, 0)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-500",
-    "sets": {
-      "light": "rgb(255, 160, 55)",
-      "dark": "rgb(180, 78, 0)",
-      "darkest": "rgb(162, 68, 0)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-600",
-    "sets": {
-      "light": "rgb(246, 133, 17)",
-      "dark": "rgb(202, 93, 0)",
-      "darkest": "rgb(186, 82, 0)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-700",
-    "sets": {
-      "light": "rgb(228, 111, 0)",
-      "dark": "rgb(225, 109, 0)",
-      "darkest": "rgb(210, 98, 0)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-800",
-    "sets": {
-      "light": "rgb(203, 93, 0)",
-      "dark": "rgb(244, 129, 12)",
-      "darkest": "rgb(232, 116, 0)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-900",
-    "sets": {
-      "light": "rgb(177, 76, 0)",
-      "dark": "rgb(254, 154, 46)",
-      "darkest": "rgb(249, 137, 23)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-1000",
-    "sets": {
-      "light": "rgb(149, 61, 0)",
-      "dark": "rgb(255, 181, 88)",
-      "darkest": "rgb(255, 162, 59)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-1100",
-    "sets": {
-      "light": "rgb(122, 47, 0)",
-      "dark": "rgb(253, 206, 136)",
-      "darkest": "rgb(255, 188, 102)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-1200",
-    "sets": {
-      "light": "rgb(97, 35, 0)",
-      "dark": "rgb(255, 225, 179)",
-      "darkest": "rgb(253, 210, 145)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-1300",
-    "sets": {
-      "light": "rgb(73, 25, 1)",
-      "dark": "rgb(255, 242, 221)",
-      "darkest": "rgb(255, 226, 181)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-orange-1400",
-    "sets": {
-      "light": "rgb(53, 18, 1)",
-      "dark": "rgb(255, 253, 249)",
-      "darkest": "rgb(255, 239, 213)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-icon-color-orange-background',
+        light: 'rgb(255, 236, 207)',
+        dark: 'rgb(80, 27, 0)',
+    },
+    {
+        prop: '--spectrum-icon-color-orange-primary-default',
+        light: 'rgb(232, 106, 0)',
+        dark: 'rgb(224, 100, 0)',
+    },
+    {
+        prop: '--spectrum-icon-color-orange-primary-down',
+        light: 'rgb(194, 78, 0)',
+        dark: 'rgb(255, 137, 0)',
+    },
+    {
+        prop: '--spectrum-icon-color-orange-primary-hover',
+        light: 'rgb(212, 91, 0)',
+        dark: 'rgb(243, 117, 0)',
+    },
+    {
+        prop: '--spectrum-orange-100',
+        light: 'rgb(255, 246, 231)',
+        dark: 'rgb(49, 16, 0)',
+    },
+    {
+        prop: '--spectrum-orange-1000',
+        light: 'rgb(167, 62, 0)',
+        dark: 'rgb(243, 117, 0)',
+    },
+    {
+        prop: '--spectrum-orange-1100',
+        light: 'rgb(144, 51, 0)',
+        dark: 'rgb(255, 137, 0)',
+    },
+    {
+        prop: '--spectrum-orange-1200',
+        light: 'rgb(118, 41, 0)',
+        dark: 'rgb(255, 173, 45)',
+    },
+    {
+        prop: '--spectrum-orange-1300',
+        light: 'rgb(95, 32, 0)',
+        dark: 'rgb(255, 201, 116)',
+    },
+    {
+        prop: '--spectrum-orange-1400',
+        light: 'rgb(73, 24, 0)',
+        dark: 'rgb(255, 225, 178)',
+    },
+    {
+        prop: '--spectrum-orange-1500',
+        light: 'rgb(52, 18, 0)',
+        dark: 'rgb(255, 243, 225)',
+    },
+    {
+        prop: '--spectrum-orange-1600',
+        light: 'rgb(25, 8, 0)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-orange-200',
+        light: 'rgb(255, 236, 207)',
+        dark: 'rgb(61, 21, 0)',
+    },
+    {
+        prop: '--spectrum-orange-300',
+        light: 'rgb(255, 218, 158)',
+        dark: 'rgb(80, 27, 0)',
+    },
+    {
+        prop: '--spectrum-orange-400',
+        light: 'rgb(255, 193, 94)',
+        dark: 'rgb(106, 36, 0)',
+    },
+    {
+        prop: '--spectrum-orange-500',
+        light: 'rgb(255, 162, 19)',
+        dark: 'rgb(135, 47, 0)',
+    },
+    {
+        prop: '--spectrum-orange-600',
+        light: 'rgb(252, 125, 0)',
+        dark: 'rgb(162, 59, 0)',
+    },
+    {
+        prop: '--spectrum-orange-700',
+        light: 'rgb(232, 106, 0)',
+        dark: 'rgb(185, 73, 0)',
+    },
+    {
+        prop: '--spectrum-orange-800',
+        light: 'rgb(212, 91, 0)',
+        dark: 'rgb(199, 82, 0)',
+    },
+    {
+        prop: '--spectrum-orange-900',
+        light: 'rgb(194, 78, 0)',
+        dark: 'rgb(224, 100, 0)',
+    },
 ];
 export const yellowValues: Item[] = [
-  {
-    "customVar": "--spectrum-yellow-100",
-    "sets": {
-      "light": "rgb(251, 241, 152)",
-      "dark": "rgb(76, 54, 0)",
-      "darkest": "rgb(53, 36, 0)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-200",
-    "sets": {
-      "light": "rgb(248, 231, 80)",
-      "dark": "rgb(88, 64, 0)",
-      "darkest": "rgb(68, 47, 0)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-300",
-    "sets": {
-      "light": "rgb(248, 217, 4)",
-      "dark": "rgb(103, 76, 0)",
-      "darkest": "rgb(86, 62, 0)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-400",
-    "sets": {
-      "light": "rgb(232, 198, 0)",
-      "dark": "rgb(119, 89, 0)",
-      "darkest": "rgb(103, 77, 0)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-500",
-    "sets": {
-      "light": "rgb(215, 179, 0)",
-      "dark": "rgb(136, 104, 0)",
-      "darkest": "rgb(122, 92, 0)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-600",
-    "sets": {
-      "light": "rgb(196, 159, 0)",
-      "dark": "rgb(155, 120, 0)",
-      "darkest": "rgb(141, 108, 0)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-700",
-    "sets": {
-      "light": "rgb(176, 140, 0)",
-      "dark": "rgb(174, 137, 0)",
-      "darkest": "rgb(161, 126, 0)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-800",
-    "sets": {
-      "light": "rgb(155, 120, 0)",
-      "dark": "rgb(192, 156, 0)",
-      "darkest": "rgb(180, 144, 0)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-900",
-    "sets": {
-      "light": "rgb(133, 102, 0)",
-      "dark": "rgb(211, 174, 0)",
-      "darkest": "rgb(199, 162, 0)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-1000",
-    "sets": {
-      "light": "rgb(112, 83, 0)",
-      "dark": "rgb(228, 194, 0)",
-      "darkest": "rgb(216, 181, 0)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-1100",
-    "sets": {
-      "light": "rgb(91, 67, 0)",
-      "dark": "rgb(244, 213, 0)",
-      "darkest": "rgb(233, 199, 0)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-1200",
-    "sets": {
-      "light": "rgb(72, 51, 0)",
-      "dark": "rgb(249, 232, 92)",
-      "darkest": "rgb(247, 216, 4)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-1300",
-    "sets": {
-      "light": "rgb(54, 37, 0)",
-      "dark": "rgb(252, 246, 187)",
-      "darkest": "rgb(249, 233, 97)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-yellow-1400",
-    "sets": {
-      "light": "rgb(40, 26, 0)",
-      "dark": "rgb(255, 255, 255)",
-      "darkest": "rgb(252, 243, 170)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-icon-color-yellow-background',
+        light: 'rgb(255, 248, 204)',
+        dark: 'rgb(83, 52, 0)',
+    },
+    {
+        prop: '--spectrum-icon-color-yellow-primary-default',
+        light: 'rgb(245, 199, 0)',
+        dark: 'rgb(235, 183, 0)',
+    },
+    {
+        prop: '--spectrum-icon-color-yellow-primary-down',
+        light: 'rgb(210, 149, 0)',
+        dark: 'rgb(255, 230, 86)',
+    },
+    {
+        prop: '--spectrum-icon-color-yellow-primary-hover',
+        light: 'rgb(230, 175, 0)',
+        dark: 'rgb(249, 206, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-100',
+        light: 'rgb(255, 248, 204)',
+        dark: 'rgb(37, 23, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-1000',
+        light: 'rgb(134, 85, 0)',
+        dark: 'rgb(203, 141, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-1100',
+        light: 'rgb(114, 72, 0)',
+        dark: 'rgb(218, 159, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-1200',
+        light: 'rgb(93, 59, 0)',
+        dark: 'rgb(235, 183, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-1300',
+        light: 'rgb(75, 47, 0)',
+        dark: 'rgb(249, 206, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-1400',
+        light: 'rgb(56, 35, 0)',
+        dark: 'rgb(255, 230, 86)',
+    },
+    {
+        prop: '--spectrum-yellow-1500',
+        light: 'rgb(40, 25, 0)',
+        dark: 'rgb(255, 246, 195)',
+    },
+    {
+        prop: '--spectrum-yellow-1600',
+        light: 'rgb(18, 11, 0)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-yellow-200',
+        light: 'rgb(255, 241, 151)',
+        dark: 'rgb(47, 29, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-300',
+        light: 'rgb(255, 222, 44)',
+        dark: 'rgb(61, 39, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-400',
+        light: 'rgb(245, 199, 0)',
+        dark: 'rgb(83, 52, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-500',
+        light: 'rgb(230, 175, 0)',
+        dark: 'rgb(107, 67, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-600',
+        light: 'rgb(210, 149, 0)',
+        dark: 'rgb(130, 82, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-700',
+        light: 'rgb(193, 131, 0)',
+        dark: 'rgb(151, 97, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-800',
+        light: 'rgb(175, 116, 0)',
+        dark: 'rgb(164, 106, 0)',
+    },
+    {
+        prop: '--spectrum-yellow-900',
+        light: 'rgb(158, 102, 0)',
+        dark: 'rgb(186, 124, 0)',
+    },
 ];
 export const chartreuseValues: Item[] = [
-  {
-    "customVar": "--spectrum-chartreuse-100",
-    "sets": {
-      "light": "rgb(219, 252, 110)",
-      "dark": "rgb(48, 64, 0)",
-      "darkest": "rgb(32, 43, 0)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-200",
-    "sets": {
-      "light": "rgb(203, 244, 67)",
-      "dark": "rgb(55, 74, 0)",
-      "darkest": "rgb(42, 56, 0)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-300",
-    "sets": {
-      "light": "rgb(188, 233, 42)",
-      "dark": "rgb(65, 87, 0)",
-      "darkest": "rgb(54, 72, 0)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-400",
-    "sets": {
-      "light": "rgb(170, 216, 22)",
-      "dark": "rgb(76, 102, 0)",
-      "darkest": "rgb(66, 88, 0)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-500",
-    "sets": {
-      "light": "rgb(152, 197, 10)",
-      "dark": "rgb(89, 118, 0)",
-      "darkest": "rgb(79, 105, 0)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-600",
-    "sets": {
-      "light": "rgb(135, 177, 3)",
-      "dark": "rgb(102, 136, 0)",
-      "darkest": "rgb(93, 123, 0)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-700",
-    "sets": {
-      "light": "rgb(118, 156, 0)",
-      "dark": "rgb(117, 154, 0)",
-      "darkest": "rgb(107, 142, 0)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-800",
-    "sets": {
-      "light": "rgb(103, 136, 0)",
-      "dark": "rgb(132, 173, 1)",
-      "darkest": "rgb(122, 161, 0)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-900",
-    "sets": {
-      "light": "rgb(87, 116, 0)",
-      "dark": "rgb(148, 192, 8)",
-      "darkest": "rgb(138, 180, 3)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-1000",
-    "sets": {
-      "light": "rgb(72, 96, 0)",
-      "dark": "rgb(166, 211, 18)",
-      "darkest": "rgb(154, 198, 11)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-1100",
-    "sets": {
-      "light": "rgb(58, 77, 0)",
-      "dark": "rgb(184, 229, 37)",
-      "darkest": "rgb(170, 216, 22)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-1200",
-    "sets": {
-      "light": "rgb(44, 59, 0)",
-      "dark": "rgb(205, 245, 71)",
-      "darkest": "rgb(187, 232, 41)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-1300",
-    "sets": {
-      "light": "rgb(33, 44, 0)",
-      "dark": "rgb(231, 254, 154)",
-      "darkest": "rgb(205, 246, 72)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-chartreuse-1400",
-    "sets": {
-      "light": "rgb(24, 31, 0)",
-      "dark": "rgb(255, 255, 255)",
-      "darkest": "rgb(225, 253, 132)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-chartreuse-100',
+        light: 'rgb(246, 251, 222)',
+        dark: 'rgb(23, 28, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-1000',
+        light: 'rgb(86, 103, 0)',
+        dark: 'rgb(136, 164, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-1100',
+        light: 'rgb(73, 87, 0)',
+        dark: 'rgb(151, 181, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-1200',
+        light: 'rgb(60, 71, 0)',
+        dark: 'rgb(169, 203, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-1300',
+        light: 'rgb(47, 57, 0)',
+        dark: 'rgb(187, 225, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-1400',
+        light: 'rgb(35, 43, 0)',
+        dark: 'rgb(219, 240, 117)',
+    },
+    {
+        prop: '--spectrum-chartreuse-1500',
+        light: 'rgb(25, 30, 0)',
+        dark: 'rgb(242, 249, 206)',
+    },
+    {
+        prop: '--spectrum-chartreuse-1600',
+        light: 'rgb(11, 14, 0)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-chartreuse-200',
+        light: 'rgb(234, 246, 173)',
+        dark: 'rgb(30, 36, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-300',
+        light: 'rgb(208, 236, 70)',
+        dark: 'rgb(39, 47, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-400',
+        light: 'rgb(182, 219, 0)',
+        dark: 'rgb(53, 63, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-500',
+        light: 'rgb(163, 196, 0)',
+        dark: 'rgb(68, 82, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-600',
+        light: 'rgb(143, 172, 0)',
+        dark: 'rgb(83, 100, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-700',
+        light: 'rgb(128, 153, 0)',
+        dark: 'rgb(97, 116, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-800',
+        light: 'rgb(114, 137, 0)',
+        dark: 'rgb(106, 127, 0)',
+    },
+    {
+        prop: '--spectrum-chartreuse-900',
+        light: 'rgb(102, 122, 0)',
+        dark: 'rgb(122, 147, 0)',
+    },
+    {
+        prop: '--spectrum-icon-color-chartreuse-background',
+        light: 'rgb(234, 246, 173)',
+        dark: 'rgb(53, 63, 0)',
+    },
+    {
+        prop: '--spectrum-icon-color-chartreuse-primary-default',
+        light: 'rgb(143, 172, 0)',
+        dark: 'rgb(136, 164, 0)',
+    },
+    {
+        prop: '--spectrum-icon-color-chartreuse-primary-down',
+        light: 'rgb(114, 137, 0)',
+        dark: 'rgb(169, 203, 0)',
+    },
+    {
+        prop: '--spectrum-icon-color-chartreuse-primary-hover',
+        light: 'rgb(128, 153, 0)',
+        dark: 'rgb(151, 181, 0)',
+    },
 ];
 export const celeryValues: Item[] = [
-  {
-    "customVar": "--spectrum-celery-100",
-    "sets": {
-      "light": "rgb(205, 252, 191)",
-      "dark": "rgb(0, 69, 10)",
-      "darkest": "rgb(0, 47, 7)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-200",
-    "sets": {
-      "light": "rgb(174, 246, 157)",
-      "dark": "rgb(0, 80, 12)",
-      "darkest": "rgb(0, 61, 9)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-300",
-    "sets": {
-      "light": "rgb(150, 238, 133)",
-      "dark": "rgb(0, 94, 14)",
-      "darkest": "rgb(0, 77, 12)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-400",
-    "sets": {
-      "light": "rgb(114, 224, 106)",
-      "dark": "rgb(0, 109, 15)",
-      "darkest": "rgb(0, 95, 15)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-500",
-    "sets": {
-      "light": "rgb(78, 207, 80)",
-      "dark": "rgb(0, 127, 15)",
-      "darkest": "rgb(0, 113, 15)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-600",
-    "sets": {
-      "light": "rgb(39, 187, 54)",
-      "dark": "rgb(0, 145, 18)",
-      "darkest": "rgb(0, 132, 15)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-700",
-    "sets": {
-      "light": "rgb(7, 167, 33)",
-      "dark": "rgb(4, 165, 30)",
-      "darkest": "rgb(0, 151, 20)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-800",
-    "sets": {
-      "light": "rgb(0, 145, 18)",
-      "dark": "rgb(34, 184, 51)",
-      "darkest": "rgb(13, 171, 37)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-900",
-    "sets": {
-      "light": "rgb(0, 124, 15)",
-      "dark": "rgb(68, 202, 73)",
-      "darkest": "rgb(45, 191, 58)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-1000",
-    "sets": {
-      "light": "rgb(0, 103, 15)",
-      "dark": "rgb(105, 220, 99)",
-      "darkest": "rgb(80, 208, 82)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-1100",
-    "sets": {
-      "light": "rgb(0, 83, 13)",
-      "dark": "rgb(142, 235, 127)",
-      "darkest": "rgb(115, 224, 107)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-1200",
-    "sets": {
-      "light": "rgb(0, 64, 10)",
-      "dark": "rgb(180, 247, 162)",
-      "darkest": "rgb(147, 237, 131)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-1300",
-    "sets": {
-      "light": "rgb(0, 48, 7)",
-      "dark": "rgb(221, 253, 211)",
-      "darkest": "rgb(180, 247, 162)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-celery-1400",
-    "sets": {
-      "light": "rgb(0, 34, 5)",
-      "dark": "rgb(255, 255, 255)",
-      "darkest": "rgb(213, 252, 202)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-celery-100',
+        light: 'rgb(235, 255, 220)',
+        dark: 'rgb(11, 31, 0)',
+    },
+    {
+        prop: '--spectrum-celery-1000',
+        light: 'rgb(52, 109, 12)',
+        dark: 'rgb(88, 172, 28)',
+    },
+    {
+        prop: '--spectrum-celery-1100',
+        light: 'rgb(44, 92, 9)',
+        dark: 'rgb(100, 190, 35)',
+    },
+    {
+        prop: '--spectrum-celery-1200',
+        light: 'rgb(35, 75, 6)',
+        dark: 'rgb(116, 213, 46)',
+    },
+    {
+        prop: '--spectrum-celery-1300',
+        light: 'rgb(27, 60, 3)',
+        dark: 'rgb(136, 234, 65)',
+    },
+    {
+        prop: '--spectrum-celery-1400',
+        light: 'rgb(19, 46, 0)',
+        dark: 'rgb(170, 251, 112)',
+    },
+    {
+        prop: '--spectrum-celery-1500',
+        light: 'rgb(12, 33, 0)',
+        dark: 'rgb(222, 255, 198)',
+    },
+    {
+        prop: '--spectrum-celery-1600',
+        light: 'rgb(4, 15, 0)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-celery-200',
+        light: 'rgb(197, 255, 156)',
+        dark: 'rgb(15, 38, 0)',
+    },
+    {
+        prop: '--spectrum-celery-300',
+        light: 'rgb(157, 247, 92)',
+        dark: 'rgb(21, 51, 1)',
+    },
+    {
+        prop: '--spectrum-celery-400',
+        light: 'rgb(129, 228, 58)',
+        dark: 'rgb(31, 67, 4)',
+    },
+    {
+        prop: '--spectrum-celery-500',
+        light: 'rgb(110, 206, 42)',
+        dark: 'rgb(41, 86, 8)',
+    },
+    {
+        prop: '--spectrum-celery-600',
+        light: 'rgb(93, 180, 31)',
+        dark: 'rgb(50, 105, 11)',
+    },
+    {
+        prop: '--spectrum-celery-700',
+        light: 'rgb(82, 161, 25)',
+        dark: 'rgb(60, 122, 15)',
+    },
+    {
+        prop: '--spectrum-celery-800',
+        light: 'rgb(72, 144, 20)',
+        dark: 'rgb(66, 134, 18)',
+    },
+    {
+        prop: '--spectrum-celery-900',
+        light: 'rgb(64, 129, 17)',
+        dark: 'rgb(78, 154, 23)',
+    },
+    {
+        prop: '--spectrum-icon-color-celery-background',
+        light: 'rgb(235, 255, 220)',
+        dark: 'rgb(31, 67, 4)',
+    },
+    {
+        prop: '--spectrum-icon-color-celery-primary-default',
+        light: 'rgb(82, 161, 25)',
+        dark: 'rgb(78, 154, 23)',
+    },
+    {
+        prop: '--spectrum-icon-color-celery-primary-down',
+        light: 'rgb(64, 129, 17)',
+        dark: 'rgb(100, 190, 35)',
+    },
+    {
+        prop: '--spectrum-icon-color-celery-primary-hover',
+        light: 'rgb(72, 144, 20)',
+        dark: 'rgb(88, 172, 28)',
+    },
 ];
 export const greenValues: Item[] = [
-  {
-    "customVar": "--spectrum-green-100",
-    "sets": {
-      "light": "rgb(206, 248, 224)",
-      "dark": "rgb(4, 67, 41)",
-      "darkest": "rgb(10, 44, 28)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-200",
-    "sets": {
-      "light": "rgb(173, 244, 206)",
-      "dark": "rgb(0, 78, 47)",
-      "darkest": "rgb(7, 59, 36)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-300",
-    "sets": {
-      "light": "rgb(137, 236, 188)",
-      "dark": "rgb(0, 92, 56)",
-      "darkest": "rgb(0, 76, 46)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-400",
-    "sets": {
-      "light": "rgb(103, 222, 168)",
-      "dark": "rgb(0, 108, 67)",
-      "darkest": "rgb(0, 93, 57)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-500",
-    "sets": {
-      "light": "rgb(73, 204, 147)",
-      "dark": "rgb(0, 125, 78)",
-      "darkest": "rgb(0, 111, 69)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-600",
-    "sets": {
-      "light": "rgb(47, 184, 128)",
-      "dark": "rgb(0, 143, 93)",
-      "darkest": "rgb(0, 130, 82)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-700",
-    "sets": {
-      "light": "rgb(21, 164, 110)",
-      "dark": "rgb(18, 162, 108)",
-      "darkest": "rgb(0, 149, 98)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-800",
-    "sets": {
-      "light": "rgb(0, 143, 93)",
-      "dark": "rgb(43, 180, 125)",
-      "darkest": "rgb(28, 168, 114)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-900",
-    "sets": {
-      "light": "rgb(0, 122, 77)",
-      "dark": "rgb(67, 199, 143)",
-      "darkest": "rgb(52, 187, 132)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-1000",
-    "sets": {
-      "light": "rgb(0, 101, 62)",
-      "dark": "rgb(94, 217, 162)",
-      "darkest": "rgb(75, 205, 149)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-1100",
-    "sets": {
-      "light": "rgb(0, 81, 50)",
-      "dark": "rgb(129, 233, 184)",
-      "darkest": "rgb(103, 222, 168)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-1200",
-    "sets": {
-      "light": "rgb(5, 63, 39)",
-      "dark": "rgb(177, 244, 209)",
-      "darkest": "rgb(137, 236, 188)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-1300",
-    "sets": {
-      "light": "rgb(10, 46, 29)",
-      "dark": "rgb(223, 250, 234)",
-      "darkest": "rgb(177, 244, 209)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-green-1400",
-    "sets": {
-      "light": "rgb(10, 32, 21)",
-      "dark": "rgb(254, 255, 252)",
-      "darkest": "rgb(214, 249, 228)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-green-100',
+        light: 'rgb(237, 252, 241)',
+        dark: 'rgb(0, 30, 23)',
+    },
+    {
+        prop: '--spectrum-green-1000',
+        light: 'rgb(3, 110, 69)',
+        dark: 'rgb(14, 175, 98)',
+    },
+    {
+        prop: '--spectrum-green-1100',
+        light: 'rgb(2, 93, 60)',
+        dark: 'rgb(24, 193, 110)',
+    },
+    {
+        prop: '--spectrum-green-1200',
+        light: 'rgb(1, 76, 52)',
+        dark: 'rgb(57, 215, 134)',
+    },
+    {
+        prop: '--spectrum-green-1300',
+        light: 'rgb(0, 61, 44)',
+        dark: 'rgb(126, 231, 172)',
+    },
+    {
+        prop: '--spectrum-green-1400',
+        light: 'rgb(0, 46, 34)',
+        dark: 'rgb(189, 241, 208)',
+    },
+    {
+        prop: '--spectrum-green-1500',
+        light: 'rgb(0, 33, 25)',
+        dark: 'rgb(229, 250, 236)',
+    },
+    {
+        prop: '--spectrum-green-1600',
+        light: 'rgb(0, 15, 12)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-green-200',
+        light: 'rgb(215, 247, 225)',
+        dark: 'rgb(0, 38, 29)',
+    },
+    {
+        prop: '--spectrum-green-300',
+        light: 'rgb(173, 238, 197)',
+        dark: 'rgb(0, 51, 38)',
+    },
+    {
+        prop: '--spectrum-green-400',
+        light: 'rgb(107, 227, 162)',
+        dark: 'rgb(0, 68, 48)',
+    },
+    {
+        prop: '--spectrum-green-500',
+        light: 'rgb(43, 209, 125)',
+        dark: 'rgb(2, 87, 58)',
+    },
+    {
+        prop: '--spectrum-green-600',
+        light: 'rgb(18, 184, 103)',
+        dark: 'rgb(3, 106, 67)',
+    },
+    {
+        prop: '--spectrum-green-700',
+        light: 'rgb(11, 164, 93)',
+        dark: 'rgb(4, 124, 75)',
+    },
+    {
+        prop: '--spectrum-green-800',
+        light: 'rgb(7, 147, 85)',
+        dark: 'rgb(6, 136, 80)',
+    },
+    {
+        prop: '--spectrum-green-900',
+        light: 'rgb(5, 131, 78)',
+        dark: 'rgb(9, 157, 89)',
+    },
+    {
+        prop: '--spectrum-icon-color-green-background',
+        light: 'rgb(237, 252, 241)',
+        dark: 'rgb(0, 68, 48)',
+    },
+    {
+        prop: '--spectrum-icon-color-green-primary-default',
+        light: 'rgb(7, 147, 85)',
+        dark: 'rgb(6, 136, 80)',
+    },
+    {
+        prop: '--spectrum-icon-color-green-primary-down',
+        light: 'rgb(3, 110, 69)',
+        dark: 'rgb(14, 175, 98)',
+    },
+    {
+        prop: '--spectrum-icon-color-green-primary-hover',
+        light: 'rgb(5, 131, 78)',
+        dark: 'rgb(9, 157, 89)',
+    },
 ];
 export const seafoamValues: Item[] = [
-  {
-    "customVar": "--spectrum-seafoam-100",
-    "sets": {
-      "light": "rgb(206, 247, 243)",
-      "dark": "rgb(18, 65, 63)",
-      "darkest": "rgb(18, 43, 42)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-200",
-    "sets": {
-      "light": "rgb(170, 241, 234)",
-      "dark": "rgb(14, 76, 73)",
-      "darkest": "rgb(19, 57, 55)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-300",
-    "sets": {
-      "light": "rgb(140, 233, 226)",
-      "dark": "rgb(4, 90, 87)",
-      "darkest": "rgb(16, 73, 70)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-400",
-    "sets": {
-      "light": "rgb(101, 218, 210)",
-      "dark": "rgb(0, 105, 101)",
-      "darkest": "rgb(3, 91, 88)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-500",
-    "sets": {
-      "light": "rgb(63, 201, 193)",
-      "dark": "rgb(0, 122, 117)",
-      "darkest": "rgb(0, 108, 104)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-600",
-    "sets": {
-      "light": "rgb(15, 181, 174)",
-      "dark": "rgb(0, 140, 135)",
-      "darkest": "rgb(0, 127, 121)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-700",
-    "sets": {
-      "light": "rgb(0, 161, 154)",
-      "dark": "rgb(0, 158, 152)",
-      "darkest": "rgb(0, 146, 140)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-800",
-    "sets": {
-      "light": "rgb(0, 140, 135)",
-      "dark": "rgb(3, 178, 171)",
-      "darkest": "rgb(0, 165, 159)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-900",
-    "sets": {
-      "light": "rgb(0, 119, 114)",
-      "dark": "rgb(54, 197, 189)",
-      "darkest": "rgb(26, 185, 178)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-1000",
-    "sets": {
-      "light": "rgb(0, 99, 95)",
-      "dark": "rgb(93, 214, 207)",
-      "darkest": "rgb(66, 202, 195)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-1100",
-    "sets": {
-      "light": "rgb(12, 79, 76)",
-      "dark": "rgb(132, 230, 223)",
-      "darkest": "rgb(102, 218, 211)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-1200",
-    "sets": {
-      "light": "rgb(18, 60, 58)",
-      "dark": "rgb(176, 242, 236)",
-      "darkest": "rgb(139, 232, 225)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-1300",
-    "sets": {
-      "light": "rgb(18, 44, 43)",
-      "dark": "rgb(223, 249, 246)",
-      "darkest": "rgb(179, 242, 237)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-seafoam-1400",
-    "sets": {
-      "light": "rgb(15, 31, 30)",
-      "dark": "rgb(254, 255, 254)",
-      "darkest": "rgb(215, 248, 244)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-icon-color-seafoam-background',
+        light: 'rgb(211, 246, 234)',
+        dark: 'rgb(0, 67, 59)',
+    },
+    {
+        prop: '--spectrum-icon-color-seafoam-primary-default',
+        light: 'rgb(9, 144, 120)',
+        dark: 'rgb(8, 134, 112)',
+    },
+    {
+        prop: '--spectrum-icon-color-seafoam-primary-down',
+        light: 'rgb(5, 108, 92)',
+        dark: 'rgb(12, 173, 142)',
+    },
+    {
+        prop: '--spectrum-icon-color-seafoam-primary-hover',
+        light: 'rgb(7, 129, 109)',
+        dark: 'rgb(10, 154, 128)',
+    },
+    {
+        prop: '--spectrum-seafoam-100',
+        light: 'rgb(235, 251, 246)',
+        dark: 'rgb(0, 30, 27)',
+    },
+    {
+        prop: '--spectrum-seafoam-1000',
+        light: 'rgb(5, 108, 92)',
+        dark: 'rgb(12, 173, 142)',
+    },
+    {
+        prop: '--spectrum-seafoam-1100',
+        light: 'rgb(3, 92, 80)',
+        dark: 'rgb(14, 190, 156)',
+    },
+    {
+        prop: '--spectrum-seafoam-1200',
+        light: 'rgb(1, 75, 67)',
+        dark: 'rgb(29, 214, 176)',
+    },
+    {
+        prop: '--spectrum-seafoam-1300',
+        light: 'rgb(0, 60, 54)',
+        dark: 'rgb(122, 229, 203)',
+    },
+    {
+        prop: '--spectrum-seafoam-1400',
+        light: 'rgb(0, 46, 40)',
+        dark: 'rgb(186, 241, 222)',
+    },
+    {
+        prop: '--spectrum-seafoam-1500',
+        light: 'rgb(0, 33, 29)',
+        dark: 'rgb(229, 249, 243)',
+    },
+    {
+        prop: '--spectrum-seafoam-1600',
+        light: 'rgb(0, 15, 14)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-seafoam-200',
+        light: 'rgb(211, 246, 234)',
+        dark: 'rgb(0, 39, 35)',
+    },
+    {
+        prop: '--spectrum-seafoam-300',
+        light: 'rgb(169, 237, 216)',
+        dark: 'rgb(0, 50, 44)',
+    },
+    {
+        prop: '--spectrum-seafoam-400',
+        light: 'rgb(92, 225, 194)',
+        dark: 'rgb(0, 67, 59)',
+    },
+    {
+        prop: '--spectrum-seafoam-500',
+        light: 'rgb(16, 207, 169)',
+        dark: 'rgb(2, 86, 75)',
+    },
+    {
+        prop: '--spectrum-seafoam-600',
+        light: 'rgb(13, 181, 149)',
+        dark: 'rgb(4, 105, 89)',
+    },
+    {
+        prop: '--spectrum-seafoam-700',
+        light: 'rgb(11, 162, 134)',
+        dark: 'rgb(6, 122, 103)',
+    },
+    {
+        prop: '--spectrum-seafoam-800',
+        light: 'rgb(9, 144, 120)',
+        dark: 'rgb(8, 134, 112)',
+    },
+    {
+        prop: '--spectrum-seafoam-900',
+        light: 'rgb(7, 129, 109)',
+        dark: 'rgb(10, 154, 128)',
+    },
 ];
 export const cyanValues: Item[] = [
-  {
-    "customVar": "--spectrum-cyan-100",
-    "sets": {
-      "light": "rgb(197, 248, 255)",
-      "dark": "rgb(0, 61, 98)",
-      "darkest": "rgb(0, 41, 68)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-200",
-    "sets": {
-      "light": "rgb(164, 240, 255)",
-      "dark": "rgb(0, 71, 111)",
-      "darkest": "rgb(0, 54, 88)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-300",
-    "sets": {
-      "light": "rgb(136, 231, 250)",
-      "dark": "rgb(0, 85, 127)",
-      "darkest": "rgb(0, 69, 108)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-400",
-    "sets": {
-      "light": "rgb(96, 216, 243)",
-      "dark": "rgb(0, 100, 145)",
-      "darkest": "rgb(0, 86, 128)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-500",
-    "sets": {
-      "light": "rgb(51, 197, 232)",
-      "dark": "rgb(0, 116, 162)",
-      "darkest": "rgb(0, 103, 147)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-600",
-    "sets": {
-      "light": "rgb(18, 176, 218)",
-      "dark": "rgb(0, 134, 180)",
-      "darkest": "rgb(0, 121, 167)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-700",
-    "sets": {
-      "light": "rgb(1, 156, 200)",
-      "dark": "rgb(0, 153, 198)",
-      "darkest": "rgb(0, 140, 186)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-800",
-    "sets": {
-      "light": "rgb(0, 134, 180)",
-      "dark": "rgb(14, 173, 215)",
-      "darkest": "rgb(4, 160, 205)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-900",
-    "sets": {
-      "light": "rgb(0, 113, 159)",
-      "dark": "rgb(44, 193, 230)",
-      "darkest": "rgb(23, 180, 221)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-1000",
-    "sets": {
-      "light": "rgb(0, 93, 137)",
-      "dark": "rgb(84, 211, 241)",
-      "darkest": "rgb(57, 199, 234)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-1100",
-    "sets": {
-      "light": "rgb(0, 74, 115)",
-      "dark": "rgb(127, 228, 249)",
-      "darkest": "rgb(96, 216, 243)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-1200",
-    "sets": {
-      "light": "rgb(0, 57, 93)",
-      "dark": "rgb(167, 241, 255)",
-      "darkest": "rgb(134, 230, 250)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-1300",
-    "sets": {
-      "light": "rgb(0, 42, 70)",
-      "dark": "rgb(215, 250, 255)",
-      "darkest": "rgb(170, 242, 255)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-cyan-1400",
-    "sets": {
-      "light": "rgb(0, 30, 51)",
-      "dark": "rgb(255, 255, 255)",
-      "darkest": "rgb(206, 249, 255)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-cyan-100',
+        light: 'rgb(238, 250, 254)',
+        dark: 'rgb(0, 29, 39)',
+    },
+    {
+        prop: '--spectrum-cyan-1000',
+        light: 'rgb(4, 102, 145)',
+        dark: 'rgb(38, 159, 244)',
+    },
+    {
+        prop: '--spectrum-cyan-1100',
+        light: 'rgb(0, 87, 121)',
+        dark: 'rgb(63, 177, 255)',
+    },
+    {
+        prop: '--spectrum-cyan-1200',
+        light: 'rgb(0, 71, 98)',
+        dark: 'rgb(107, 199, 255)',
+    },
+    {
+        prop: '--spectrum-cyan-1300',
+        light: 'rgb(0, 57, 78)',
+        dark: 'rgb(152, 219, 255)',
+    },
+    {
+        prop: '--spectrum-cyan-1400',
+        light: 'rgb(0, 43, 59)',
+        dark: 'rgb(195, 236, 252)',
+    },
+    {
+        prop: '--spectrum-cyan-1500',
+        light: 'rgb(0, 31, 43)',
+        dark: 'rgb(230, 248, 253)',
+    },
+    {
+        prop: '--spectrum-cyan-1600',
+        light: 'rgb(0, 14, 20)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-cyan-200',
+        light: 'rgb(217, 244, 253)',
+        dark: 'rgb(0, 36, 49)',
+    },
+    {
+        prop: '--spectrum-cyan-300',
+        light: 'rgb(183, 231, 252)',
+        dark: 'rgb(0, 48, 65)',
+    },
+    {
+        prop: '--spectrum-cyan-400',
+        light: 'rgb(138, 213, 255)',
+        dark: 'rgb(0, 64, 88)',
+    },
+    {
+        prop: '--spectrum-cyan-500',
+        light: 'rgb(92, 192, 255)',
+        dark: 'rgb(0, 82, 113)',
+    },
+    {
+        prop: '--spectrum-cyan-600',
+        light: 'rgb(48, 167, 254)',
+        dark: 'rgb(3, 99, 140)',
+    },
+    {
+        prop: '--spectrum-cyan-700',
+        light: 'rgb(29, 149, 231)',
+        dark: 'rgb(8, 115, 168)',
+    },
+    {
+        prop: '--spectrum-cyan-800',
+        light: 'rgb(18, 134, 205)',
+        dark: 'rgb(13, 125, 186)',
+    },
+    {
+        prop: '--spectrum-cyan-900',
+        light: 'rgb(11, 120, 179)',
+        dark: 'rgb(24, 142, 220)',
+    },
+    {
+        prop: '--spectrum-icon-color-cyan-background',
+        light: 'rgb(238, 250, 254)',
+        dark: 'rgb(0, 64, 88)',
+    },
+    {
+        prop: '--spectrum-icon-color-cyan-primary-default',
+        light: 'rgb(18, 134, 205)',
+        dark: 'rgb(13, 125, 186)',
+    },
+    {
+        prop: '--spectrum-icon-color-cyan-primary-down',
+        light: 'rgb(4, 102, 145)',
+        dark: 'rgb(38, 159, 244)',
+    },
+    {
+        prop: '--spectrum-icon-color-cyan-primary-hover',
+        light: 'rgb(11, 120, 179)',
+        dark: 'rgb(24, 142, 220)',
+    },
 ];
 export const indigoValues: Item[] = [
-  {
-    "customVar": "--spectrum-indigo-100",
-    "sets": {
-      "light": "rgb(237, 238, 255)",
-      "dark": "rgb(40, 44, 140)",
-      "darkest": "rgb(26, 29, 97)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-200",
-    "sets": {
-      "light": "rgb(224, 226, 255)",
-      "dark": "rgb(47, 52, 163)",
-      "darkest": "rgb(35, 39, 125)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-300",
-    "sets": {
-      "light": "rgb(211, 213, 255)",
-      "dark": "rgb(57, 63, 187)",
-      "darkest": "rgb(46, 50, 158)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-400",
-    "sets": {
-      "light": "rgb(193, 196, 255)",
-      "dark": "rgb(70, 75, 211)",
-      "darkest": "rgb(58, 63, 189)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-500",
-    "sets": {
-      "light": "rgb(172, 175, 255)",
-      "dark": "rgb(85, 91, 231)",
-      "darkest": "rgb(73, 78, 216)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-600",
-    "sets": {
-      "light": "rgb(149, 153, 255)",
-      "dark": "rgb(104, 109, 244)",
-      "darkest": "rgb(90, 96, 235)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-700",
-    "sets": {
-      "light": "rgb(126, 132, 252)",
-      "dark": "rgb(124, 129, 251)",
-      "darkest": "rgb(110, 115, 246)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-800",
-    "sets": {
-      "light": "rgb(104, 109, 244)",
-      "dark": "rgb(145, 149, 255)",
-      "darkest": "rgb(132, 136, 253)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-900",
-    "sets": {
-      "light": "rgb(82, 88, 228)",
-      "dark": "rgb(167, 170, 255)",
-      "darkest": "rgb(153, 157, 255)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-1000",
-    "sets": {
-      "light": "rgb(64, 70, 202)",
-      "dark": "rgb(188, 190, 255)",
-      "darkest": "rgb(174, 177, 255)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-1100",
-    "sets": {
-      "light": "rgb(50, 54, 168)",
-      "dark": "rgb(208, 210, 255)",
-      "darkest": "rgb(194, 196, 255)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-1200",
-    "sets": {
-      "light": "rgb(38, 41, 134)",
-      "dark": "rgb(226, 228, 255)",
-      "darkest": "rgb(212, 213, 255)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-1300",
-    "sets": {
-      "light": "rgb(27, 30, 100)",
-      "dark": "rgb(243, 243, 254)",
-      "darkest": "rgb(227, 228, 255)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-indigo-1400",
-    "sets": {
-      "light": "rgb(20, 22, 72)",
-      "dark": "rgb(255, 255, 255)",
-      "darkest": "rgb(240, 240, 255)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-icon-color-indigo-background',
+        light: 'rgb(235, 238, 255)',
+        dark: 'rgb(30, 0, 93)',
+    },
+    {
+        prop: '--spectrum-icon-color-indigo-primary-default',
+        light: 'rgb(113, 85, 250)',
+        dark: 'rgb(109, 75, 248)',
+    },
+    {
+        prop: '--spectrum-icon-color-indigo-primary-down',
+        light: 'rgb(84, 36, 219)',
+        dark: 'rgb(128, 119, 254)',
+    },
+    {
+        prop: '--spectrum-icon-color-indigo-primary-hover',
+        light: 'rgb(99, 56, 238)',
+        dark: 'rgb(116, 91, 252)',
+    },
+    {
+        prop: '--spectrum-indigo-100',
+        light: 'rgb(247, 248, 255)',
+        dark: 'rgb(30, 0, 93)',
+    },
+    {
+        prop: '--spectrum-indigo-1000',
+        light: 'rgb(99, 56, 238)',
+        dark: 'rgb(139, 141, 254)',
+    },
+    {
+        prop: '--spectrum-indigo-1100',
+        light: 'rgb(84, 36, 219)',
+        dark: 'rgb(153, 161, 255)',
+    },
+    {
+        prop: '--spectrum-indigo-1200',
+        light: 'rgb(69, 19, 191)',
+        dark: 'rgb(176, 186, 255)',
+    },
+    {
+        prop: '--spectrum-indigo-1300',
+        light: 'rgb(55, 6, 160)',
+        dark: 'rgb(199, 208, 255)',
+    },
+    {
+        prop: '--spectrum-indigo-1400',
+        light: 'rgb(42, 0, 129)',
+        dark: 'rgb(223, 228, 255)',
+    },
+    {
+        prop: '--spectrum-indigo-1500',
+        light: 'rgb(31, 0, 98)',
+        dark: 'rgb(243, 244, 255)',
+    },
+    {
+        prop: '--spectrum-indigo-1600',
+        light: 'rgb(17, 0, 54)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-indigo-200',
+        light: 'rgb(235, 238, 255)',
+        dark: 'rgb(35, 0, 110)',
+    },
+    {
+        prop: '--spectrum-indigo-300',
+        light: 'rgb(216, 222, 255)',
+        dark: 'rgb(47, 0, 140)',
+    },
+    {
+        prop: '--spectrum-indigo-400',
+        light: 'rgb(192, 201, 255)',
+        dark: 'rgb(62, 12, 174)',
+    },
+    {
+        prop: '--spectrum-indigo-500',
+        light: 'rgb(167, 178, 255)',
+        dark: 'rgb(79, 30, 209)',
+    },
+    {
+        prop: '--spectrum-indigo-600',
+        light: 'rgb(145, 151, 254)',
+        dark: 'rgb(95, 52, 235)',
+    },
+    {
+        prop: '--spectrum-indigo-700',
+        light: 'rgb(132, 128, 254)',
+        dark: 'rgb(109, 75, 248)',
+    },
+    {
+        prop: '--spectrum-indigo-800',
+        light: 'rgb(122, 106, 253)',
+        dark: 'rgb(116, 91, 252)',
+    },
+    {
+        prop: '--spectrum-indigo-900',
+        light: 'rgb(113, 85, 250)',
+        dark: 'rgb(128, 119, 254)',
+    },
+    {
+        prop: '--spectrum-static-indigo-1000',
+        light: 'rgb(99, 56, 238)',
+        dark: 'rgb(99, 56, 238)',
+    },
+    {
+        prop: '--spectrum-static-indigo-900',
+        light: 'rgb(113, 85, 250)',
+        dark: 'rgb(113, 85, 250)',
+    },
 ];
 export const purpleValues: Item[] = [
-  {
-    "customVar": "--spectrum-purple-100",
-    "sets": {
-      "light": "rgb(246, 235, 255)",
-      "dark": "rgb(76, 13, 157)",
-      "darkest": "rgb(50, 16, 104)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-200",
-    "sets": {
-      "light": "rgb(238, 221, 255)",
-      "dark": "rgb(89, 17, 177)",
-      "darkest": "rgb(67, 13, 140)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-300",
-    "sets": {
-      "light": "rgb(230, 208, 255)",
-      "dark": "rgb(105, 28, 200)",
-      "darkest": "rgb(86, 16, 173)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-400",
-    "sets": {
-      "light": "rgb(219, 187, 254)",
-      "dark": "rgb(122, 45, 218)",
-      "darkest": "rgb(106, 29, 200)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-500",
-    "sets": {
-      "light": "rgb(204, 164, 253)",
-      "dark": "rgb(140, 65, 233)",
-      "darkest": "rgb(126, 49, 222)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-600",
-    "sets": {
-      "light": "rgb(189, 139, 252)",
-      "dark": "rgb(157, 87, 243)",
-      "darkest": "rgb(145, 70, 236)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-700",
-    "sets": {
-      "light": "rgb(174, 114, 249)",
-      "dark": "rgb(172, 111, 249)",
-      "darkest": "rgb(162, 94, 246)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-800",
-    "sets": {
-      "light": "rgb(157, 87, 244)",
-      "dark": "rgb(187, 135, 251)",
-      "darkest": "rgb(178, 119, 250)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-900",
-    "sets": {
-      "light": "rgb(137, 61, 231)",
-      "dark": "rgb(202, 159, 252)",
-      "darkest": "rgb(192, 143, 252)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-1000",
-    "sets": {
-      "light": "rgb(115, 38, 211)",
-      "dark": "rgb(215, 182, 254)",
-      "darkest": "rgb(206, 166, 253)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-1100",
-    "sets": {
-      "light": "rgb(93, 19, 183)",
-      "dark": "rgb(228, 204, 254)",
-      "darkest": "rgb(219, 188, 254)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-1200",
-    "sets": {
-      "light": "rgb(71, 12, 148)",
-      "dark": "rgb(239, 223, 255)",
-      "darkest": "rgb(230, 207, 255)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-1300",
-    "sets": {
-      "light": "rgb(51, 16, 106)",
-      "dark": "rgb(249, 240, 255)",
-      "darkest": "rgb(240, 224, 255)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-purple-1400",
-    "sets": {
-      "light": "rgb(35, 15, 73)",
-      "dark": "rgb(255, 253, 255)",
-      "darkest": "rgb(248, 237, 255)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-icon-color-purple-background',
+        light: 'rgb(244, 235, 252)',
+        dark: 'rgb(50, 0, 96)',
+    },
+    {
+        prop: '--spectrum-icon-color-purple-primary-default',
+        light: 'rgb(154, 71, 226)',
+        dark: 'rgb(148, 62, 224)',
+    },
+    {
+        prop: '--spectrum-icon-color-purple-primary-down',
+        light: 'rgb(115, 13, 204)',
+        dark: 'rgb(173, 105, 233)',
+    },
+    {
+        prop: '--spectrum-icon-color-purple-primary-hover',
+        light: 'rgb(134, 40, 217)',
+        dark: 'rgb(157, 78, 228)',
+    },
+    {
+        prop: '--spectrum-purple-100',
+        light: 'rgb(251, 247, 254)',
+        dark: 'rgb(41, 0, 79)',
+    },
+    {
+        prop: '--spectrum-purple-1000',
+        light: 'rgb(134, 40, 217)',
+        dark: 'rgb(186, 127, 237)',
+    },
+    {
+        prop: '--spectrum-purple-1100',
+        light: 'rgb(115, 13, 204)',
+        dark: 'rgb(197, 149, 240)',
+    },
+    {
+        prop: '--spectrum-purple-1200',
+        light: 'rgb(93, 0, 177)',
+        dark: 'rgb(212, 176, 244)',
+    },
+    {
+        prop: '--spectrum-purple-1300',
+        light: 'rgb(75, 0, 144)',
+        dark: 'rgb(225, 201, 247)',
+    },
+    {
+        prop: '--spectrum-purple-1400',
+        light: 'rgb(59, 0, 111)',
+        dark: 'rgb(238, 224, 250)',
+    },
+    {
+        prop: '--spectrum-purple-1500',
+        light: 'rgb(44, 0, 84)',
+        dark: 'rgb(248, 243, 253)',
+    },
+    {
+        prop: '--spectrum-purple-1600',
+        light: 'rgb(23, 0, 45)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-purple-200',
+        light: 'rgb(244, 235, 252)',
+        dark: 'rgb(50, 0, 96)',
+    },
+    {
+        prop: '--spectrum-purple-300',
+        light: 'rgb(235, 218, 249)',
+        dark: 'rgb(64, 0, 122)',
+    },
+    {
+        prop: '--spectrum-purple-400',
+        light: 'rgb(221, 193, 246)',
+        dark: 'rgb(83, 0, 159)',
+    },
+    {
+        prop: '--spectrum-purple-500',
+        light: 'rgb(208, 167, 243)',
+        dark: 'rgb(107, 6, 195)',
+    },
+    {
+        prop: '--spectrum-purple-600',
+        light: 'rgb(191, 138, 238)',
+        dark: 'rgb(130, 34, 215)',
+    },
+    {
+        prop: '--spectrum-purple-700',
+        light: 'rgb(178, 114, 235)',
+        dark: 'rgb(148, 62, 224)',
+    },
+    {
+        prop: '--spectrum-purple-800',
+        light: 'rgb(166, 92, 231)',
+        dark: 'rgb(157, 78, 228)',
+    },
+    {
+        prop: '--spectrum-purple-900',
+        light: 'rgb(154, 71, 226)',
+        dark: 'rgb(173, 105, 233)',
+    },
 ];
 export const fuchsiaValues: Item[] = [
-  {
-    "customVar": "--spectrum-fuchsia-100",
-    "sets": {
-      "light": "rgb(255, 233, 252)",
-      "dark": "rgb(107, 3, 106)",
-      "darkest": "rgb(70, 14, 68)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-200",
-    "sets": {
-      "light": "rgb(255, 218, 250)",
-      "dark": "rgb(123, 0, 123)",
-      "darkest": "rgb(93, 9, 92)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-300",
-    "sets": {
-      "light": "rgb(254, 199, 248)",
-      "dark": "rgb(144, 0, 145)",
-      "darkest": "rgb(120, 0, 120)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-400",
-    "sets": {
-      "light": "rgb(251, 174, 246)",
-      "dark": "rgb(165, 13, 166)",
-      "darkest": "rgb(146, 0, 147)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-500",
-    "sets": {
-      "light": "rgb(245, 146, 243)",
-      "dark": "rgb(185, 37, 185)",
-      "darkest": "rgb(169, 19, 170)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-600",
-    "sets": {
-      "light": "rgb(237, 116, 237)",
-      "dark": "rgb(205, 57, 206)",
-      "darkest": "rgb(191, 43, 191)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-700",
-    "sets": {
-      "light": "rgb(224, 85, 226)",
-      "dark": "rgb(223, 81, 224)",
-      "darkest": "rgb(211, 65, 213)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-800",
-    "sets": {
-      "light": "rgb(205, 58, 206)",
-      "dark": "rgb(235, 110, 236)",
-      "darkest": "rgb(228, 91, 229)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-900",
-    "sets": {
-      "light": "rgb(182, 34, 183)",
-      "dark": "rgb(244, 140, 242)",
-      "darkest": "rgb(239, 120, 238)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-1000",
-    "sets": {
-      "light": "rgb(157, 3, 158)",
-      "dark": "rgb(250, 168, 245)",
-      "darkest": "rgb(246, 149, 243)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-1100",
-    "sets": {
-      "light": "rgb(128, 0, 129)",
-      "dark": "rgb(254, 194, 248)",
-      "darkest": "rgb(251, 175, 246)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-1200",
-    "sets": {
-      "light": "rgb(100, 6, 100)",
-      "dark": "rgb(255, 219, 250)",
-      "darkest": "rgb(254, 199, 248)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-1300",
-    "sets": {
-      "light": "rgb(71, 14, 70)",
-      "dark": "rgb(255, 239, 252)",
-      "darkest": "rgb(255, 220, 250)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-fuchsia-1400",
-    "sets": {
-      "light": "rgb(50, 13, 49)",
-      "dark": "rgb(255, 253, 255)",
-      "darkest": "rgb(255, 235, 252)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-fuchsia-100',
+        light: 'rgb(254, 246, 255)',
+        dark: 'rgb(50, 0, 61)',
+    },
+    {
+        prop: '--spectrum-fuchsia-1000',
+        light: 'rgb(156, 40, 175)',
+        dark: 'rgb(232, 91, 253)',
+    },
+    {
+        prop: '--spectrum-fuchsia-1100',
+        light: 'rgb(135, 27, 154)',
+        dark: 'rgb(240, 122, 255)',
+    },
+    {
+        prop: '--spectrum-fuchsia-1200',
+        light: 'rgb(113, 15, 131)',
+        dark: 'rgb(245, 159, 255)',
+    },
+    {
+        prop: '--spectrum-fuchsia-1300',
+        light: 'rgb(92, 4, 109)',
+        dark: 'rgb(248, 191, 255)',
+    },
+    {
+        prop: '--spectrum-fuchsia-1400',
+        light: 'rgb(72, 0, 88)',
+        dark: 'rgb(251, 219, 255)',
+    },
+    {
+        prop: '--spectrum-fuchsia-1500',
+        light: 'rgb(54, 0, 66)',
+        dark: 'rgb(253, 241, 255)',
+    },
+    {
+        prop: '--spectrum-fuchsia-1600',
+        light: 'rgb(29, 0, 35)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-fuchsia-200',
+        light: 'rgb(253, 233, 255)',
+        dark: 'rgb(61, 0, 74)',
+    },
+    {
+        prop: '--spectrum-fuchsia-300',
+        light: 'rgb(250, 211, 255)',
+        dark: 'rgb(79, 0, 95)',
+    },
+    {
+        prop: '--spectrum-fuchsia-400',
+        light: 'rgb(247, 181, 255)',
+        dark: 'rgb(102, 9, 120)',
+    },
+    {
+        prop: '--spectrum-fuchsia-500',
+        light: 'rgb(243, 147, 255)',
+        dark: 'rgb(127, 23, 146)',
+    },
+    {
+        prop: '--spectrum-fuchsia-600',
+        light: 'rgb(236, 105, 255)',
+        dark: 'rgb(151, 38, 170)',
+    },
+    {
+        prop: '--spectrum-fuchsia-700',
+        light: 'rgb(223, 77, 245)',
+        dark: 'rgb(173, 51, 192)',
+    },
+    {
+        prop: '--spectrum-fuchsia-800',
+        light: 'rgb(200, 68, 220)',
+        dark: 'rgb(186, 60, 206)',
+    },
+    {
+        prop: '--spectrum-fuchsia-900',
+        light: 'rgb(181, 57, 200)',
+        dark: 'rgb(213, 73, 235)',
+    },
+    {
+        prop: '--spectrum-icon-color-fuchsia-background',
+        light: 'rgb(253, 233, 255)',
+        dark: 'rgb(61, 0, 74)',
+    },
+    {
+        prop: '--spectrum-icon-color-fuchsia-primary-default',
+        light: 'rgb(181, 57, 200)',
+        dark: 'rgb(173, 51, 192)',
+    },
+    {
+        prop: '--spectrum-icon-color-fuchsia-primary-down',
+        light: 'rgb(135, 27, 154)',
+        dark: 'rgb(213, 73, 235)',
+    },
+    {
+        prop: '--spectrum-icon-color-fuchsia-primary-hover',
+        light: 'rgb(156, 40, 175)',
+        dark: 'rgb(186, 60, 206)',
+    },
+    {
+        prop: '--spectrum-static-fuchsia-1000',
+        light: 'rgb(156, 40, 175)',
+        dark: 'rgb(156, 40, 175)',
+    },
+    {
+        prop: '--spectrum-static-fuchsia-900',
+        light: 'rgb(181, 57, 200)',
+        dark: 'rgb(181, 57, 200)',
+    },
 ];
 export const magentaValues: Item[] = [
-  {
-    "customVar": "--spectrum-magenta-100",
-    "sets": {
-      "light": "rgb(255, 234, 241)",
-      "dark": "rgb(118, 0, 58)",
-      "darkest": "rgb(83, 3, 41)",
-      "wireframe": "rgb(242, 245, 251)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-200",
-    "sets": {
-      "light": "rgb(255, 220, 232)",
-      "dark": "rgb(137, 0, 66)",
-      "darkest": "rgb(106, 0, 52)",
-      "wireframe": "rgb(237, 241, 250)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-300",
-    "sets": {
-      "light": "rgb(255, 202, 221)",
-      "dark": "rgb(160, 0, 77)",
-      "darkest": "rgb(133, 0, 65)",
-      "wireframe": "rgb(233, 238, 248)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-400",
-    "sets": {
-      "light": "rgb(255, 178, 206)",
-      "dark": "rgb(182, 18, 90)",
-      "darkest": "rgb(161, 0, 78)",
-      "wireframe": "rgb(226, 232, 247)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-500",
-    "sets": {
-      "light": "rgb(255, 149, 189)",
-      "dark": "rgb(203, 38, 109)",
-      "darkest": "rgb(186, 22, 93)",
-      "wireframe": "rgb(216, 225, 244)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-600",
-    "sets": {
-      "light": "rgb(250, 119, 170)",
-      "dark": "rgb(222, 61, 130)",
-      "darkest": "rgb(209, 43, 114)",
-      "wireframe": "rgb(203, 215, 241)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-700",
-    "sets": {
-      "light": "rgb(239, 90, 152)",
-      "dark": "rgb(237, 87, 149)",
-      "darkest": "rgb(227, 69, 137)",
-      "wireframe": "rgb(190, 205, 237)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-800",
-    "sets": {
-      "light": "rgb(222, 61, 130)",
-      "dark": "rgb(249, 114, 167)",
-      "darkest": "rgb(241, 97, 156)",
-      "wireframe": "rgb(173, 192, 233)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-900",
-    "sets": {
-      "light": "rgb(200, 34, 105)",
-      "dark": "rgb(255, 143, 185)",
-      "darkest": "rgb(252, 124, 173)",
-      "wireframe": "rgb(154, 177, 227)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-1000",
-    "sets": {
-      "light": "rgb(173, 9, 85)",
-      "dark": "rgb(255, 172, 202)",
-      "darkest": "rgb(255, 152, 191)",
-      "wireframe": "rgb(133, 161, 219)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-1100",
-    "sets": {
-      "light": "rgb(142, 0, 69)",
-      "dark": "rgb(255, 198, 218)",
-      "darkest": "rgb(255, 179, 207)",
-      "wireframe": "rgb(114, 145, 211)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-1200",
-    "sets": {
-      "light": "rgb(112, 0, 55)",
-      "dark": "rgb(255, 221, 233)",
-      "darkest": "rgb(255, 202, 221)",
-      "wireframe": "rgb(96, 130, 201)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-1300",
-    "sets": {
-      "light": "rgb(84, 3, 42)",
-      "dark": "rgb(255, 240, 245)",
-      "darkest": "rgb(255, 221, 233)",
-      "wireframe": "rgb(82, 117, 192)"
-    }
-  },
-  {
-    "customVar": "--spectrum-magenta-1400",
-    "sets": {
-      "light": "rgb(60, 6, 29)",
-      "dark": "rgb(255, 252, 253)",
-      "darkest": "rgb(255, 236, 243)",
-      "wireframe": "rgb(74, 109, 184)"
-    }
-  }
+    {
+        prop: '--spectrum-icon-color-magenta-background',
+        light: 'rgb(255, 232, 240)',
+        dark: 'rgb(74, 0, 27)',
+    },
+    {
+        prop: '--spectrum-icon-color-magenta-primary-default',
+        light: 'rgb(217, 35, 97)',
+        dark: 'rgb(207, 31, 92)',
+    },
+    {
+        prop: '--spectrum-icon-color-magenta-primary-down',
+        light: 'rgb(163, 5, 62)',
+        dark: 'rgb(255, 51, 119)',
+    },
+    {
+        prop: '--spectrum-icon-color-magenta-primary-hover',
+        light: 'rgb(186, 22, 80)',
+        dark: 'rgb(224, 38, 101)',
+    },
+    {
+        prop: '--spectrum-magenta-100',
+        light: 'rgb(255, 245, 248)',
+        dark: 'rgb(59, 0, 22)',
+    },
+    {
+        prop: '--spectrum-magenta-1000',
+        light: 'rgb(186, 22, 80)',
+        dark: 'rgb(255, 96, 149)',
+    },
+    {
+        prop: '--spectrum-magenta-1100',
+        light: 'rgb(163, 5, 62)',
+        dark: 'rgb(255, 128, 171)',
+    },
+    {
+        prop: '--spectrum-magenta-1200',
+        light: 'rgb(136, 0, 51)',
+        dark: 'rgb(255, 163, 194)',
+    },
+    {
+        prop: '--spectrum-magenta-1300',
+        light: 'rgb(111, 0, 40)',
+        dark: 'rgb(255, 193, 214)',
+    },
+    {
+        prop: '--spectrum-magenta-1400',
+        light: 'rgb(86, 0, 30)',
+        dark: 'rgb(255, 220, 232)',
+    },
+    {
+        prop: '--spectrum-magenta-1500',
+        light: 'rgb(64, 0, 22)',
+        dark: 'rgb(255, 241, 246)',
+    },
+    {
+        prop: '--spectrum-magenta-1600',
+        light: 'rgb(35, 0, 12)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-magenta-200',
+        light: 'rgb(255, 232, 240)',
+        dark: 'rgb(74, 0, 27)',
+    },
+    {
+        prop: '--spectrum-magenta-300',
+        light: 'rgb(255, 213, 227)',
+        dark: 'rgb(93, 0, 34)',
+    },
+    {
+        prop: '--spectrum-magenta-400',
+        light: 'rgb(255, 185, 208)',
+        dark: 'rgb(123, 0, 45)',
+    },
+    {
+        prop: '--spectrum-magenta-500',
+        light: 'rgb(255, 152, 187)',
+        dark: 'rgb(152, 7, 60)',
+    },
+    {
+        prop: '--spectrum-magenta-600',
+        light: 'rgb(255, 112, 159)',
+        dark: 'rgb(181, 19, 76)',
+    },
+    {
+        prop: '--spectrum-magenta-700',
+        light: 'rgb(255, 72, 133)',
+        dark: 'rgb(207, 31, 92)',
+    },
+    {
+        prop: '--spectrum-magenta-800',
+        light: 'rgb(240, 45, 110)',
+        dark: 'rgb(224, 38, 101)',
+    },
+    {
+        prop: '--spectrum-magenta-900',
+        light: 'rgb(217, 35, 97)',
+        dark: 'rgb(255, 51, 119)',
+    },
+    {
+        prop: '--spectrum-static-magenta-1000',
+        light: 'rgb(186, 22, 80)',
+        dark: 'rgb(186, 22, 80)',
+    },
+    {
+        prop: '--spectrum-static-magenta-900',
+        light: 'rgb(217, 35, 97)',
+        dark: 'rgb(217, 35, 97)',
+    },
+];
+export const silverValues: Item[] = [
+    {
+        prop: '--spectrum-icon-color-silver-background',
+        light: 'rgb(239, 239, 239)',
+        dark: 'rgb(59, 59, 59)',
+    },
+    {
+        prop: '--spectrum-icon-color-silver-primary-default',
+        light: 'rgb(143, 143, 143)',
+        dark: 'rgb(118, 118, 118)',
+    },
+    {
+        prop: '--spectrum-icon-color-silver-primary-down',
+        light: 'rgb(114, 114, 114)',
+        dark: 'rgb(152, 152, 152)',
+    },
+    {
+        prop: '--spectrum-icon-color-silver-primary-hover',
+        light: 'rgb(128, 128, 128)',
+        dark: 'rgb(137, 137, 137)',
+    },
+    {
+        prop: '--spectrum-silver-100',
+        light: 'rgb(247, 247, 247)',
+        dark: 'rgb(26, 26, 26)',
+    },
+    {
+        prop: '--spectrum-silver-1000',
+        light: 'rgb(96, 96, 96)',
+        dark: 'rgb(152, 152, 152)',
+    },
+    {
+        prop: '--spectrum-silver-1100',
+        light: 'rgb(81, 81, 81)',
+        dark: 'rgb(169, 169, 169)',
+    },
+    {
+        prop: '--spectrum-silver-1200',
+        light: 'rgb(66, 66, 66)',
+        dark: 'rgb(190, 190, 190)',
+    },
+    {
+        prop: '--spectrum-silver-1300',
+        light: 'rgb(52, 52, 52)',
+        dark: 'rgb(211, 211, 211)',
+    },
+    {
+        prop: '--spectrum-silver-1400',
+        light: 'rgb(39, 39, 39)',
+        dark: 'rgb(229, 229, 229)',
+    },
+    {
+        prop: '--spectrum-silver-1500',
+        light: 'rgb(28, 28, 28)',
+        dark: 'rgb(244, 244, 244)',
+    },
+    {
+        prop: '--spectrum-silver-1600',
+        light: 'rgb(12, 12, 12)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-silver-200',
+        light: 'rgb(239, 239, 239)',
+        dark: 'rgb(33, 33, 33)',
+    },
+    {
+        prop: '--spectrum-silver-300',
+        light: 'rgb(223, 223, 223)',
+        dark: 'rgb(44, 44, 44)',
+    },
+    {
+        prop: '--spectrum-silver-400',
+        light: 'rgb(204, 204, 204)',
+        dark: 'rgb(59, 59, 59)',
+    },
+    {
+        prop: '--spectrum-silver-500',
+        light: 'rgb(183, 183, 183)',
+        dark: 'rgb(76, 76, 76)',
+    },
+    {
+        prop: '--spectrum-silver-600',
+        light: 'rgb(160, 160, 160)',
+        dark: 'rgb(92, 92, 92)',
+    },
+    {
+        prop: '--spectrum-silver-700',
+        light: 'rgb(143, 143, 143)',
+        dark: 'rgb(108, 108, 108)',
+    },
+    {
+        prop: '--spectrum-silver-800',
+        light: 'rgb(128, 128, 128)',
+        dark: 'rgb(118, 118, 118)',
+    },
+    {
+        prop: '--spectrum-silver-900',
+        light: 'rgb(114, 114, 114)',
+        dark: 'rgb(137, 137, 137)',
+    },
+];
+export const brownValues: Item[] = [
+    {
+        prop: '--spectrum-brown-100',
+        light: 'rgb(252, 247, 242)',
+        dark: 'rgb(35, 24, 8)',
+    },
+    {
+        prop: '--spectrum-brown-1000',
+        light: 'rgb(119, 91, 50)',
+        dark: 'rgb(181, 147, 98)',
+    },
+    {
+        prop: '--spectrum-brown-1100',
+        light: 'rgb(103, 76, 35)',
+        dark: 'rgb(199, 163, 112)',
+    },
+    {
+        prop: '--spectrum-brown-1200',
+        light: 'rgb(88, 61, 21)',
+        dark: 'rgb(222, 185, 130)',
+    },
+    {
+        prop: '--spectrum-brown-1300',
+        light: 'rgb(70, 49, 17)',
+        dark: 'rgb(232, 207, 169)',
+    },
+    {
+        prop: '--spectrum-brown-1400',
+        light: 'rgb(52, 37, 13)',
+        dark: 'rgb(242, 227, 206)',
+    },
+    {
+        prop: '--spectrum-brown-1500',
+        light: 'rgb(38, 26, 9)',
+        dark: 'rgb(250, 244, 236)',
+    },
+    {
+        prop: '--spectrum-brown-1600',
+        light: 'rgb(16, 12, 4)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-brown-200',
+        light: 'rgb(247, 238, 225)',
+        dark: 'rgb(44, 31, 11)',
+    },
+    {
+        prop: '--spectrum-brown-300',
+        light: 'rgb(239, 221, 195)',
+        dark: 'rgb(58, 40, 14)',
+    },
+    {
+        prop: '--spectrum-brown-400',
+        light: 'rgb(229, 200, 157)',
+        dark: 'rgb(78, 55, 19)',
+    },
+    {
+        prop: '--spectrum-brown-500',
+        light: 'rgb(214, 177, 123)',
+        dark: 'rgb(98, 71, 30)',
+    },
+    {
+        prop: '--spectrum-brown-600',
+        light: 'rgb(190, 155, 104)',
+        dark: 'rgb(115, 88, 47)',
+    },
+    {
+        prop: '--spectrum-brown-700',
+        light: 'rgb(171, 138, 90)',
+        dark: 'rgb(132, 104, 61)',
+    },
+    {
+        prop: '--spectrum-brown-800',
+        light: 'rgb(154, 123, 77)',
+        dark: 'rgb(143, 114, 69)',
+    },
+    {
+        prop: '--spectrum-brown-900',
+        light: 'rgb(139, 109, 66)',
+        dark: 'rgb(163, 132, 84)',
+    },
+    {
+        prop: '--spectrum-icon-color-brown-background',
+        light: 'rgb(247, 238, 225)',
+        dark: 'rgb(78, 55, 19)',
+    },
+    {
+        prop: '--spectrum-icon-color-brown-primary-default',
+        light: 'rgb(154, 123, 77)',
+        dark: 'rgb(132, 104, 61)',
+    },
+    {
+        prop: '--spectrum-icon-color-brown-primary-down',
+        light: 'rgb(119, 91, 50)',
+        dark: 'rgb(163, 132, 84)',
+    },
+    {
+        prop: '--spectrum-icon-color-brown-primary-hover',
+        light: 'rgb(139, 109, 66)',
+        dark: 'rgb(143, 114, 69)',
+    },
+];
+export const cinnamonValues: Item[] = [
+    {
+        prop: '--spectrum-cinnamon-100',
+        light: 'rgb(253, 247, 243)',
+        dark: 'rgb(48, 17, 4)',
+    },
+    {
+        prop: '--spectrum-cinnamon-1000',
+        light: 'rgb(147, 77, 43)',
+        dark: 'rgb(206, 136, 99)',
+    },
+    {
+        prop: '--spectrum-cinnamon-1100',
+        light: 'rgb(128, 62, 32)',
+        dark: 'rgb(220, 154, 118)',
+    },
+    {
+        prop: '--spectrum-cinnamon-1200',
+        light: 'rgb(110, 48, 21)',
+        dark: 'rgb(232, 179, 149)',
+    },
+    {
+        prop: '--spectrum-cinnamon-1300',
+        light: 'rgb(92, 35, 11)',
+        dark: 'rgb(239, 203, 183)',
+    },
+    {
+        prop: '--spectrum-cinnamon-1400',
+        light: 'rgb(72, 25, 6)',
+        dark: 'rgb(246, 225, 214)',
+    },
+    {
+        prop: '--spectrum-cinnamon-1500',
+        light: 'rgb(52, 18, 4)',
+        dark: 'rgb(252, 244, 239)',
+    },
+    {
+        prop: '--spectrum-cinnamon-1600',
+        light: 'rgb(24, 8, 2)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-cinnamon-200',
+        light: 'rgb(249, 236, 229)',
+        dark: 'rgb(59, 21, 5)',
+    },
+    {
+        prop: '--spectrum-cinnamon-300',
+        light: 'rgb(244, 218, 203)',
+        dark: 'rgb(79, 28, 7)',
+    },
+    {
+        prop: '--spectrum-cinnamon-400',
+        light: 'rgb(237, 196, 172)',
+        dark: 'rgb(100, 41, 15)',
+    },
+    {
+        prop: '--spectrum-cinnamon-500',
+        light: 'rgb(229, 170, 136)',
+        dark: 'rgb(122, 57, 28)',
+    },
+    {
+        prop: '--spectrum-cinnamon-600',
+        light: 'rgb(212, 145, 108)',
+        dark: 'rgb(143, 74, 40)',
+    },
+    {
+        prop: '--spectrum-cinnamon-700',
+        light: 'rgb(198, 126, 88)',
+        dark: 'rgb(163, 88, 52)',
+    },
+    {
+        prop: '--spectrum-cinnamon-800',
+        light: 'rgb(184, 109, 70)',
+        dark: 'rgb(176, 98, 59)',
+    },
+    {
+        prop: '--spectrum-cinnamon-900',
+        light: 'rgb(170, 94, 56)',
+        dark: 'rgb(192, 119, 80)',
+    },
+    {
+        prop: '--spectrum-icon-color-cinnamon-background',
+        light: 'rgb(249, 236, 229)',
+        dark: 'rgb(79, 28, 7)',
+    },
+    {
+        prop: '--spectrum-icon-color-cinnamon-primary-default',
+        light: 'rgb(184, 109, 70)',
+        dark: 'rgb(176, 98, 59)',
+    },
+    {
+        prop: '--spectrum-icon-color-cinnamon-primary-down',
+        light: 'rgb(147, 77, 43)',
+        dark: 'rgb(206, 136, 99)',
+    },
+    {
+        prop: '--spectrum-icon-color-cinnamon-primary-hover',
+        light: 'rgb(170, 94, 56)',
+        dark: 'rgb(192, 119, 80)',
+    },
+];
+export const turquoiseValues: Item[] = [
+    {
+        prop: '--spectrum-icon-color-turquoise-background',
+        light: 'rgb(209, 245, 245)',
+        dark: 'rgb(0, 66, 72)',
+    },
+    {
+        prop: '--spectrum-icon-color-turquoise-primary-default',
+        light: 'rgb(12, 158, 171)',
+        dark: 'rgb(9, 131, 142)',
+    },
+    {
+        prop: '--spectrum-icon-color-turquoise-primary-down',
+        light: 'rgb(8, 126, 137)',
+        dark: 'rgb(13, 168, 182)',
+    },
+    {
+        prop: '--spectrum-icon-color-turquoise-primary-hover',
+        light: 'rgb(10, 141, 153)',
+        dark: 'rgb(11, 151, 164)',
+    },
+    {
+        prop: '--spectrum-turquoise-100',
+        light: 'rgb(238, 251, 251)',
+        dark: 'rgb(0, 30, 33)',
+    },
+    {
+        prop: '--spectrum-turquoise-1000',
+        light: 'rgb(5, 107, 116)',
+        dark: 'rgb(13, 168, 182)',
+    },
+    {
+        prop: '--spectrum-turquoise-1100',
+        light: 'rgb(3, 90, 98)',
+        dark: 'rgb(16, 186, 202)',
+    },
+    {
+        prop: '--spectrum-turquoise-1200',
+        light: 'rgb(1, 74, 81)',
+        dark: 'rgb(64, 208, 220)',
+    },
+    {
+        prop: '--spectrum-turquoise-1300',
+        light: 'rgb(0, 59, 65)',
+        dark: 'rgb(128, 225, 231)',
+    },
+    {
+        prop: '--spectrum-turquoise-1400',
+        light: 'rgb(0, 44, 49)',
+        dark: 'rgb(183, 240, 240)',
+    },
+    {
+        prop: '--spectrum-turquoise-1500',
+        light: 'rgb(0, 32, 35)',
+        dark: 'rgb(228, 249, 249)',
+    },
+    {
+        prop: '--spectrum-turquoise-1600',
+        light: 'rgb(0, 15, 17)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-turquoise-200',
+        light: 'rgb(209, 245, 245)',
+        dark: 'rgb(0, 37, 41)',
+    },
+    {
+        prop: '--spectrum-turquoise-300',
+        light: 'rgb(169, 236, 237)',
+        dark: 'rgb(0, 49, 54)',
+    },
+    {
+        prop: '--spectrum-turquoise-400',
+        light: 'rgb(111, 221, 228)',
+        dark: 'rgb(0, 66, 72)',
+    },
+    {
+        prop: '--spectrum-turquoise-500',
+        light: 'rgb(39, 202, 216)',
+        dark: 'rgb(3, 84, 92)',
+    },
+    {
+        prop: '--spectrum-turquoise-600',
+        light: 'rgb(15, 177, 192)',
+        dark: 'rgb(5, 103, 112)',
+    },
+    {
+        prop: '--spectrum-turquoise-700',
+        light: 'rgb(12, 158, 171)',
+        dark: 'rgb(7, 120, 131)',
+    },
+    {
+        prop: '--spectrum-turquoise-800',
+        light: 'rgb(10, 141, 153)',
+        dark: 'rgb(9, 131, 142)',
+    },
+    {
+        prop: '--spectrum-turquoise-900',
+        light: 'rgb(8, 126, 137)',
+        dark: 'rgb(11, 151, 164)',
+    },
+];
+export const pinkValues: Item[] = [
+    {
+        prop: '--spectrum-icon-color-pink-background',
+        light: 'rgb(255, 232, 247)',
+        dark: 'rgb(71, 0, 44)',
+    },
+    {
+        prop: '--spectrum-icon-color-pink-primary-default',
+        light: 'rgb(228, 52, 163)',
+        dark: 'rgb(196, 39, 138)',
+    },
+    {
+        prop: '--spectrum-icon-color-pink-primary-down',
+        light: 'rgb(176, 31, 123)',
+        dark: 'rgb(236, 67, 175)',
+    },
+    {
+        prop: '--spectrum-icon-color-pink-primary-hover',
+        light: 'rgb(206, 42, 146)',
+        dark: 'rgb(213, 45, 151)',
+    },
+    {
+        prop: '--spectrum-pink-100',
+        light: 'rgb(255, 246, 252)',
+        dark: 'rgb(58, 0, 37)',
+    },
+    {
+        prop: '--spectrum-pink-1000',
+        light: 'rgb(176, 31, 123)',
+        dark: 'rgb(251, 90, 196)',
+    },
+    {
+        prop: '--spectrum-pink-1100',
+        light: 'rgb(152, 22, 104)',
+        dark: 'rgb(255, 122, 210)',
+    },
+    {
+        prop: '--spectrum-pink-1200',
+        light: 'rgb(128, 12, 85)',
+        dark: 'rgb(255, 159, 223)',
+    },
+    {
+        prop: '--spectrum-pink-1300',
+        light: 'rgb(105, 3, 68)',
+        dark: 'rgb(255, 191, 234)',
+    },
+    {
+        prop: '--spectrum-pink-1400',
+        light: 'rgb(83, 0, 53)',
+        dark: 'rgb(255, 219, 243)',
+    },
+    {
+        prop: '--spectrum-pink-1500',
+        light: 'rgb(62, 0, 39)',
+        dark: 'rgb(255, 241, 250)',
+    },
+    {
+        prop: '--spectrum-pink-1600',
+        light: 'rgb(33, 0, 21)',
+        dark: 'rgb(255, 255, 255)',
+    },
+    {
+        prop: '--spectrum-pink-200',
+        light: 'rgb(255, 232, 247)',
+        dark: 'rgb(71, 0, 44)',
+    },
+    {
+        prop: '--spectrum-pink-300',
+        light: 'rgb(255, 211, 240)',
+        dark: 'rgb(90, 0, 57)',
+    },
+    {
+        prop: '--spectrum-pink-400',
+        light: 'rgb(255, 181, 230)',
+        dark: 'rgb(115, 7, 75)',
+    },
+    {
+        prop: '--spectrum-pink-500',
+        light: 'rgb(255, 148, 219)',
+        dark: 'rgb(143, 18, 97)',
+    },
+    {
+        prop: '--spectrum-pink-600',
+        light: 'rgb(255, 103, 204)',
+        dark: 'rgb(171, 29, 119)',
+    },
+    {
+        prop: '--spectrum-pink-700',
+        light: 'rgb(242, 76, 184)',
+        dark: 'rgb(196, 39, 138)',
+    },
+    {
+        prop: '--spectrum-pink-800',
+        light: 'rgb(228, 52, 163)',
+        dark: 'rgb(213, 45, 151)',
+    },
+    {
+        prop: '--spectrum-pink-900',
+        light: 'rgb(206, 42, 146)',
+        dark: 'rgb(236, 67, 175)',
+    },
 ];
diff --git a/projects/css-custom-vars-viewer/src/sp-css-table.ts b/projects/css-custom-vars-viewer/src/sp-css-table.ts
index 689f57eea96..b9975437b63 100644
--- a/projects/css-custom-vars-viewer/src/sp-css-table.ts
+++ b/projects/css-custom-vars-viewer/src/sp-css-table.ts
@@ -10,5 +10,12 @@
  * governing permissions and limitations under the License.
  */
 import { CssTable } from './CssTable.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-window.customElements.define('sp-css-table', CssTable);
+defineElement('sp-css-table', CssTable);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-css-table': CssTable;
+    }
+}
diff --git a/projects/documentation/content/_includes/partials/deprecation.njk b/projects/documentation/content/_includes/partials/deprecation.njk
index 8a010554637..0b8b1ffd032 100644
--- a/projects/documentation/content/_includes/partials/deprecation.njk
+++ b/projects/documentation/content/_includes/partials/deprecation.njk
@@ -4,7 +4,7 @@
 <div id="deprecation" class="spectrum-InLineAlert spectrum-InLineAlert--negative">
         <div class="spectrum-InLineAlert-header">
           Deprecation Warning
-          <sp-icon-alert class="spectrum-InLineAlert-icon" dir="ltr" aria-hidden="true"></sp-icon-alert>
+          <sp-icon-alert-triangle class="spectrum-InLineAlert-icon" dir="ltr" aria-hidden="true"></sp-icon-alert-triangle>
         </div>
         <div class="spectrum-InLineAlert-content">
         {{ deprecationNotice | safe }}
diff --git a/projects/documentation/content/guides/generating-components.md b/projects/documentation/content/guides/generating-components.md
index ba3648b95a9..3593bd26dd1 100644
--- a/projects/documentation/content/guides/generating-components.md
+++ b/projects/documentation/content/guides/generating-components.md
@@ -23,7 +23,6 @@ _Note_ that your component name should be provided in kebab case and should rela
         - src
             - index.ts
             - spectrum-[new-component-name].css
-            - [new-component-name]-overrides.css
             - [new-component-name].css
             - [NewComponentName].ts
         - stories
diff --git a/projects/documentation/content/guides/styling-components.md b/projects/documentation/content/guides/styling-components.md
index a9b27217fd0..bea4335a403 100644
--- a/projects/documentation/content/guides/styling-components.md
+++ b/projects/documentation/content/guides/styling-components.md
@@ -13,9 +13,7 @@ This document outlines the details of the CSS styling for Spectrum Web Component
 
 For each component in the project, there are up to 3 CSS files:
 
-- `spectrum-[component-name].css` - This is the main CSS file for the component that is generated by the last build from the Spectrum CSS project before we removed that package as a dependency.
-- `[component-name]-overrides.css` - This is the CSS file for the component that contains the system overrides which take different values in different themes. It was also generated by the last build from the Spectrum CSS project before we removed that package as a dependency.
-- `[component-name].css` - This is the main CSS file which imports the `spectrum-[component-name].css` and `[component-name]-overrides.css` files and additionally contains the component's custom styles which were not part of the Spectrum CSS project.
+- `[component-name].css` - This is the main CSS file and contains the component's styles.
 
 ### How to update the component styling
 
@@ -37,20 +35,11 @@ Example:
 
 This will just work! As long as the `--spectrum-component-height-300` variable exists in the tokens package.
 
-- If it's an update to how a component looks in one particular theme, it belongs in `[component-name]-overrides.css`.
-
-The process to update the overrides file involves a few extra steps:
-
-1. Update the `[component-name]-overrides.css` file to contain the new styles.
-2. Make sure the new `--system-` variable exists in the tokens package. This variable can be found in the `tools/styles/tokens/[express | spectrum]/system-theme-bridge.css` file or the `tools/styles/tokens-v2/system-theme-bridge.css` file depending on the theme.
-3. If the variable doesn't exist, we will need to add it to the correct file.
-
 ## Global styling
 
 SWC project uses styles package to manage the global css tokens for all three themes. The styles package can be found in `tools/styles`. There is one very small caveat in the way we manage the styles package. We have two different tokens packages, one for the express + spectrum theme and one for the spectrum 2 theme.
 
-- `styles/tokens` - This is the tokens package for the Express + Spectrum theme.
-- `styles/tokens-v2` - This is the tokens package for the Spectrum 2 theme.
+- `styles/tokens` - This is the tokens package.
 
 NOTE: In all likelihood, you would only need to do minor changes to the styles package. However, if you feel like you need to make major changes to the styles package, the correct approach would be to start a discussion among the team and figure out a plan together.
 
@@ -60,11 +49,12 @@ In our styles package, we have separation of separate variables for different co
 
 #### Updating size-specific css variables
 
-If you're updating a size (e.g. `--spectrum-accordion-item-height`) variable, you'll need to update the `tools/styles/tokens/[express | spectrum]/[large | medium]-vars.css` file or the `tools/styles/tokens-v2/[large | medium]-vars.css` file depending on the theme.
+If you're updating a size (e.g. `--spectrum-accordion-item-height`) variable, you'll need to update the `tools/styles/tokens/[large | medium]-vars.css` file depending on the theme.
 
 #### Updating color-specific css variables
 
-If you're updating a color (e.g. `--spectrum-accordion-background-color`) variable, you'll need to update the `tools/styles/tokens/[express | spectrum]/[dark | light]-vars.css` file or the `tools/styles/tokens-v2/[dark | light]-vars.css` file depending on the theme.
+If you're updating a color (e.g. `--spectrum-accordion-background-color`) variable, you'll need to update
+the `tools/styles/tokens/[dark | light]-vars.css` file depending on the theme.
 
-**NOTE:** If the variable that you're updating is not present in those files, chances are that this variable had the same value for both contexts in that tokens package. In that case, if you want the variable to continue to have the same value then you can update the `tools/styles/[tokens | tokens-v2]/index.css` file.
+**NOTE:** If the variable that you're updating is not present in those files, chances are that this variable had the same value for both contexts in that tokens package. In that case, if you want the variable to continue to have the same value then you can update the `tools/styles/tokens/index.css` file.
 Or if you want to make the variable context-specific, then you can add those new values in both of the files like we talked about above.
diff --git a/projects/documentation/content/migrating-to-spectrum2.md b/projects/documentation/content/migrating-to-spectrum2.md
index 0b96838d238..87b4aa86762 100644
--- a/projects/documentation/content/migrating-to-spectrum2.md
+++ b/projects/documentation/content/migrating-to-spectrum2.md
@@ -9,27 +9,20 @@ slug: migrating-to-spectrum2
 
 In Spectrum 2, sp-theme's system variables are updated to support new design tokens, which optimize for different scales and themes. To complete the migration, update the system variable in sp-theme to reference Spectrum 2, adjust import paths, and ensure all components are using version 1.0.0.
 
-### Update `system` variable in `sp-theme`:
-
-Change the `system` variable in `sp-theme` to `spectrum-two` to apply the new theme and scale tokens.
-
 ```js
-<sp-theme system="spectrum-two" scale="medium" color="light"></sp-theme>
+<sp-theme scale="medium" color="light"></sp-theme>
 ```
 
-### Update import paths for scale and theme modules:
+### Update import paths for scale and theme modules
 
 Replace existing scale and theme imports with Spectrum 2 equivalents. This ensures that your project references the new color and scale options.
 
 ```js
 // Replace current theme imports with the following:
 import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/spectrum-two/scale-medium.js';
-import '@spectrum-web-components/theme/spectrum-two/scale-large.js';
-import '@spectrum-web-components/theme/spectrum-two/theme-light.js';
-import '@spectrum-web-components/theme/spectrum-two/theme-dark.js';
+import '@spectrum-web-components/theme/scale-large.js';
 ```
 
-### Update all components to version ^1.0.0:
+### Update all components to version ^1.0.0
 
 Before applying other changes, ensure all components are updated to at least version 1.0.0 to enable compatibility with the Spectrum 2 system. For more information, see the [1.0.0 migration guide](</migrations/2024-10-31%20(1.0.0)/>).
diff --git a/projects/documentation/src/components.ts b/projects/documentation/src/components.ts
index 97c511f4962..b9cae95691d 100644
--- a/projects/documentation/src/components.ts
+++ b/projects/documentation/src/components.ts
@@ -19,25 +19,22 @@ import '@spectrum-web-components/top-nav/sp-top-nav.js';
 import '@spectrum-web-components/top-nav/sp-top-nav-item.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-remove.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-circle.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-circle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-star.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-save-floppy.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-stopwatch.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-user-activity.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-select.js';
 import '@spectrum-web-components/table/sp-table.js';
 import '@spectrum-web-components/table/sp-table-body.js';
 import '@spectrum-web-components/table/sp-table-cell.js';
diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts
index 89d5d00fb7f..50bf92eac73 100644
--- a/projects/documentation/src/components/layout.ts
+++ b/projects/documentation/src/components/layout.ts
@@ -23,18 +23,13 @@ import {
     state,
 } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/theme/sp-theme.js';
-import type {
-    Color,
-    Scale,
-    SystemVariant,
-    Theme,
-} from '@spectrum-web-components/theme';
+import type { Color, Scale, Theme } from '@spectrum-web-components/theme';
 import type { Picker } from '@spectrum-web-components/picker';
 import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/link/sp-link.js';
 import '@spectrum-web-components/divider/sp-divider.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-circle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
 import {
     type OverlayTriggerOptions,
@@ -54,12 +49,9 @@ import {
 
 const SWC_THEME_COLOR_KEY = 'swc-docs:theme:color';
 const SWC_THEME_SCALE_KEY = 'swc-docs:theme:scale';
-const SWC_THEME_THEME_KEY = 'swc-docs:theme:theme';
-const SWC_THEME_SYSTEM_KEY = 'swc-docs:theme:system';
 const SWC_THEME_DIR_KEY = 'swc-docs:theme:dir';
 const COLOR_FALLBACK = matchMedia(DARK_MODE).matches ? 'dark' : 'light';
 const SCALE_FALLBACK = matchMedia(IS_MOBILE).matches ? 'large' : 'medium';
-const SYSTEM_FALLBACK = 'spectrum';
 const DIR_FALLBACK = 'ltr';
 const DEFAULT_COLOR = (
     window.localStorage
@@ -71,13 +63,6 @@ const DEFAULT_SCALE = (
         ? localStorage.getItem(SWC_THEME_SCALE_KEY) || SCALE_FALLBACK
         : SCALE_FALLBACK
 ) as Scale;
-const DEFAULT_SYSTEM = (
-    window.localStorage
-        ? localStorage.getItem(SWC_THEME_THEME_KEY) ||
-          localStorage.getItem(SWC_THEME_SYSTEM_KEY) ||
-          SYSTEM_FALLBACK
-        : SYSTEM_FALLBACK
-) as SystemVariant;
 const DEFAULT_DIR = (
     window.localStorage
         ? localStorage.getItem(SWC_THEME_DIR_KEY) || DIR_FALLBACK
@@ -86,67 +71,19 @@ const DEFAULT_DIR = (
 
 const isNarrowMediaQuery = matchMedia('screen and (max-width: 960px)');
 
-const lazyStyleFragment = (
-    name: Color | Scale,
-    system: SystemVariant
-): void => {
-    const fragmentName = `${name}-${system}`;
-    switch (fragmentName) {
-        case 'dark-spectrum' || 'darkest-spectrum':
-            import('@spectrum-web-components/theme/theme-dark.js');
-            break;
-        case 'light-spectrum' || 'lightest-spectrum':
-            import('@spectrum-web-components/theme/theme-light.js');
-            break;
-        case 'medium-spectrum':
-            import('@spectrum-web-components/theme/scale-medium.js');
-            break;
-        case 'large-spectrum':
+const lazyStyleFragment = (name: Color | Scale): void => {
+    import('@spectrum-web-components/theme/core.js');
+    switch (name) {
+        case 'large':
             import('@spectrum-web-components/theme/scale-large.js');
             break;
-        case 'dark-express' || 'darkest-express':
-            import('@spectrum-web-components/theme/express/theme-dark.js');
-            break;
-        case 'light-express' || 'lightest-express':
-            import('@spectrum-web-components/theme/express/theme-light.js');
-            break;
-        case 'medium-express':
-            import('@spectrum-web-components/theme/express/scale-medium.js');
-            break;
-        case 'large-express':
-            import('@spectrum-web-components/theme/express/scale-large.js');
-            break;
-        case 'light-spectrum-two':
-            import(
-                '@spectrum-web-components/theme/spectrum-two/theme-light-core-tokens.js'
-            );
-            break;
-        case 'dark-spectrum-two':
-            import(
-                '@spectrum-web-components/theme/spectrum-two/theme-dark-core-tokens.js'
-            );
-            break;
-        case 'medium-spectrum-two':
-            import(
-                '@spectrum-web-components/theme/spectrum-two/scale-medium-core-tokens.js'
-            );
-            break;
-        case 'large-spectrum-two':
-            import(
-                '@spectrum-web-components/theme/spectrum-two/scale-large-core-tokens.js'
-            );
-            break;
     }
 };
 
 const loadDefaults = () => {
-    if (
-        DEFAULT_COLOR !== COLOR_FALLBACK ||
-        DEFAULT_SCALE !== SCALE_FALLBACK ||
-        DEFAULT_SYSTEM !== SYSTEM_FALLBACK
-    ) {
-        lazyStyleFragment(DEFAULT_COLOR, DEFAULT_SYSTEM);
-        lazyStyleFragment(DEFAULT_SCALE, DEFAULT_SYSTEM);
+    if (DEFAULT_COLOR !== COLOR_FALLBACK || DEFAULT_SCALE !== SCALE_FALLBACK) {
+        lazyStyleFragment(DEFAULT_COLOR);
+        lazyStyleFragment(DEFAULT_SCALE);
     }
 };
 
@@ -182,15 +119,9 @@ export class LayoutElement extends LitElement {
     @state()
     private isNarrow = isNarrowMediaQuery.matches;
 
-    @property({ attribute: false })
-    public theme: SystemVariant = DEFAULT_SYSTEM;
-
     @property({ attribute: false })
     public scale: Scale = DEFAULT_SCALE;
 
-    @property({ attribute: false })
-    public system: SystemVariant = DEFAULT_SYSTEM;
-
     @queryAsync('sp-theme')
     private themeRoot!: Theme;
 
@@ -223,10 +154,6 @@ export class LayoutElement extends LitElement {
         this.scale = (event.target as Picker).value as Scale;
     }
 
-    private updateSystem(event: Event) {
-        this.system = (event.target as Picker).value as SystemVariant;
-    }
-
     private updateDirection(event: Event) {
         const dir = (event.target as Picker).value;
         this.dir = dir === 'rtl' ? dir : 'ltr';
@@ -343,21 +270,6 @@ export class LayoutElement extends LitElement {
         import('./settings.js');
         return html`
             <div class="manage-theme" role="form" aria-label="Settings">
-                <div class="theme-control">
-                    <sp-field-label for="theme-system">System</sp-field-label>
-                    <sp-picker
-                        id="theme-system"
-                        quiet
-                        value=${this.system}
-                        @change=${this.updateSystem}
-                    >
-                        <sp-menu-item value="spectrum">Spectrum</sp-menu-item>
-                        <sp-menu-item value="express">Express</sp-menu-item>
-                        <sp-menu-item value="spectrum-two">
-                            Spectrum 2
-                        </sp-menu-item>
-                    </sp-picker>
-                </div>
                 <div class="theme-control">
                     <sp-field-label for="theme-color">Color</sp-field-label>
                     <sp-picker
@@ -421,7 +333,11 @@ export class LayoutElement extends LitElement {
                     id="toggle-nav-id"
                     ${trigger(() => this.sideNav, triggerOptions)}
                 >
-                    <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
+                    <!-- was: <sp-icon-circle slot="icon"></sp-icon-circle> -->
+                    <sp-icon-circle
+                        slot="icon"
+                        label="Placeholder for deprecated show menu icons"
+                    ></sp-icon-circle>
                 </sp-action-button>
                 <sp-action-button
                     quiet
@@ -440,7 +356,6 @@ export class LayoutElement extends LitElement {
             <sp-theme
                 .color=${this.color}
                 .scale=${this.scale}
-                .system=${this.system}
                 dir=${this.dir}
                 id="app"
                 @sp-track-theme=${this.handleTrackTheme}
@@ -505,20 +420,13 @@ export class LayoutElement extends LitElement {
                 loadStyleFragments = true;
             }
         }
-        if (changes.has('system')) {
-            if (window.localStorage) {
-                localStorage.setItem(SWC_THEME_SYSTEM_KEY, this.system);
-            }
-            if (changes.get('system')) {
-                loadStyleFragments = true;
-            }
-        }
         if (changes.has('dir') && window.localStorage) {
             localStorage.setItem(SWC_THEME_DIR_KEY, this.dir);
         }
+
         if (loadStyleFragments) {
-            lazyStyleFragment(this.color, this.system);
-            lazyStyleFragment(this.scale, this.system);
+            lazyStyleFragment(this.color);
+            lazyStyleFragment(this.scale);
         }
     }
 }
diff --git a/projects/documentation/src/components/side-nav-search.css b/projects/documentation/src/components/side-nav-search.css
index 8fc5269d198..64dc3e72fcf 100644
--- a/projects/documentation/src/components/side-nav-search.css
+++ b/projects/documentation/src/components/side-nav-search.css
@@ -1,4 +1,4 @@
-/*!
+/**
  * Copyright 2025 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./
  */
 
diff --git a/projects/documentation/src/getting-started.ts b/projects/documentation/src/getting-started.ts
index b8292599e75..f719632d005 100644
--- a/projects/documentation/src/getting-started.ts
+++ b/projects/documentation/src/getting-started.ts
@@ -10,5 +10,5 @@
  * governing permissions and limitations under the License.
  */
 
-import '@spectrum-web-components/theme/theme-lightest.js';
-import '@spectrum-web-components/theme/scale-medium.js';
+/* Medium & light contexts are shipped with the core theme fragment as defaults */
+import '@spectrum-web-components/theme/core.js';
diff --git a/projects/example-project-rollup/index.html b/projects/example-project-rollup/index.html
index 3e14dc08eae..56be3b64594 100644
--- a/projects/example-project-rollup/index.html
+++ b/projects/example-project-rollup/index.html
@@ -14,7 +14,7 @@
   </head>
 
   <body>
-    <sp-theme system="express" color="light" scale="medium">
+    <sp-theme color="light" scale="medium">
       <sp-button variant="primary">Primary</sp-button>
       <br /><br />
       <sp-button variant="secondary" quiet>secondary</sp-button>
diff --git a/projects/example-project-rollup/src/example-app.ts b/projects/example-project-rollup/src/example-app.ts
index f5db5b487cd..3d66fae21e2 100644
--- a/projects/example-project-rollup/src/example-app.ts
+++ b/projects/example-project-rollup/src/example-app.ts
@@ -12,8 +12,7 @@
 
 // import our stylesheets
 import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/express/theme-light.js';
-import '@spectrum-web-components/theme/express/scale-medium.js';
+import '@spectrum-web-components/theme/core.js';
 
 // import the components we'll use in this page
 import '@spectrum-web-components/button/sp-button.js';
diff --git a/projects/story-decorator/decorator.ts b/projects/story-decorator/decorator.ts
index 773d0ee1584..9bdd219fc29 100644
--- a/projects/story-decorator/decorator.ts
+++ b/projects/story-decorator/decorator.ts
@@ -31,21 +31,11 @@ export const themeStyles = html`
  **/
 export const swcThemeDecorator = (story: StoryFn, context: StoryContext) => {
     const {
-        globals: {
-            system,
-            color,
-            scale,
-            textDirection,
-            reduceMotion,
-            lang,
-        } = {},
+        globals: { color, scale, textDirection, reduceMotion, lang } = {},
     } = context;
 
     useEffect(() => {
         // Update window.__swc_hack_knobs__ values with current context globals
-        if (system) {
-            window.__swc_hack_knobs__.defaultSystemVariant = system;
-        }
         if (color) {
             window.__swc_hack_knobs__.defaultColor = color;
         }
@@ -64,10 +54,9 @@ export const swcThemeDecorator = (story: StoryFn, context: StoryContext) => {
         if (lang) {
             window.__swc_hack_knobs__.defaultLocale = lang;
         }
-    }, [system, color, scale, textDirection, reduceMotion, lang]);
+    }, [color, scale, textDirection, reduceMotion, lang]);
 
-    const hasAnySetting =
-        system || color || scale || textDirection || reduceMotion;
+    const hasAnySetting = color || scale || textDirection || reduceMotion;
 
     return html`
         <style>
@@ -86,7 +75,6 @@ export const swcThemeDecorator = (story: StoryFn, context: StoryContext) => {
         </style>
         <sp-story-decorator
             role="main"
-            system=${system}
             color=${color}
             scale=${scale}
             lang=${lang}
diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts
index 745824de677..cb49ff034fb 100644
--- a/projects/story-decorator/src/StoryDecorator.ts
+++ b/projects/story-decorator/src/StoryDecorator.ts
@@ -25,8 +25,6 @@ import {
 import { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/themes.js';
-import '@spectrum-web-components/theme/src/spectrum-two/themes.js';
-import '@spectrum-web-components/theme/src/express/themes.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/picker/sp-picker.js';
 import '@spectrum-web-components/menu/sp-menu.js';
@@ -34,12 +32,7 @@ import '@spectrum-web-components/menu/sp-menu-item.js';
 import '@spectrum-web-components/switch/sp-switch.js';
 import { Picker } from '@spectrum-web-components/picker';
 import { Switch } from '@spectrum-web-components/switch';
-import {
-    Color,
-    Scale,
-    SystemVariant,
-    Theme,
-} from '@spectrum-web-components/theme';
+import { Color, Scale, Theme } from '@spectrum-web-components/theme';
 import './types.js';
 import { type Locale, Locales } from './locales.js';
 
@@ -48,10 +41,6 @@ const urlParams = new URLSearchParams(queryString);
 
 export let dir: 'ltr' | 'rtl' =
     (urlParams.get('sp_dir') as 'ltr' | 'rtl') || 'ltr';
-export const theme: SystemVariant =
-    (urlParams.get('sp_theme') as SystemVariant) || 'spectrum';
-export let system: SystemVariant =
-    (urlParams.get('sp_system') as SystemVariant) || 'spectrum';
 export let color: Color =
     (urlParams.get('sp_color') as Color) ||
     (matchMedia(DARK_MODE).matches ? 'dark' : 'light');
@@ -62,7 +51,6 @@ export const locale = urlParams.get('sp_locale') || 'en-US';
 export const direction = urlParams.get('sp_direction') || 'ltr';
 
 window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {
-    defaultSystemVariant: system,
     defaultColor: color,
     defaultScale: scale,
     defaultDirection: dir,
@@ -71,23 +59,25 @@ window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {
 };
 
 const reduceMotionProperties = css`
-    --spectrum-animation-duration-0: 0ms;
-    --spectrum-animation-duration-100: 0ms;
-    --spectrum-animation-duration-200: 0ms;
-    --spectrum-animation-duration-300: 0ms;
-    --spectrum-animation-duration-400: 0ms;
-    --spectrum-animation-duration-500: 0ms;
-    --spectrum-animation-duration-600: 0ms;
-    --spectrum-animation-duration-700: 0ms;
-    --spectrum-animation-duration-800: 0ms;
-    --spectrum-animation-duration-900: 0ms;
-    --spectrum-animation-duration-1000: 0ms;
-    --spectrum-animation-duration-2000: 0ms;
-    --spectrum-animation-duration-4000: 0ms;
-    --spectrum-animation-duration-6000: 0ms;
-    --pending-delay: 0s;
-    --spectrum-coachmark-animation-indicator-ring-duration: 0ms;
-    --swc-test-duration: 1ms;
+    :host([reduce-motion]) sp-theme {
+        --spectrum-animation-duration-0: 0ms;
+        --spectrum-animation-duration-100: 0ms;
+        --spectrum-animation-duration-200: 0ms;
+        --spectrum-animation-duration-300: 0ms;
+        --spectrum-animation-duration-400: 0ms;
+        --spectrum-animation-duration-500: 0ms;
+        --spectrum-animation-duration-600: 0ms;
+        --spectrum-animation-duration-700: 0ms;
+        --spectrum-animation-duration-800: 0ms;
+        --spectrum-animation-duration-900: 0ms;
+        --spectrum-animation-duration-1000: 0ms;
+        --spectrum-animation-duration-2000: 0ms;
+        --spectrum-animation-duration-4000: 0ms;
+        --spectrum-animation-duration-6000: 0ms;
+        --pending-delay: 0s;
+        --spectrum-coachmark-animation-indicator-ring-duration: 0ms;
+        --swc-test-duration: 1ms;
+    }
 `;
 
 export class StoryDecorator extends SpectrumElement {
@@ -110,7 +100,6 @@ export class StoryDecorator extends SpectrumElement {
                                 var(--spectrum-component-height-100)
                         );
                     box-sizing: border-box;
-                    background-color: var(--spectrum-background-base-color);
                     color: var(--spectrum-body-color);
 
                     --decorator-padding-100: calc(
@@ -126,9 +115,7 @@ export class StoryDecorator extends SpectrumElement {
                 :host([screenshot]) sp-theme {
                     padding: var(--decorator-padding-100);
                 }
-                :host([reduce-motion]) sp-theme {
-                    ${reduceMotionProperties}
-                }
+                ${reduceMotionProperties}
                 .manage-theme {
                     position: fixed;
                     bottom: 0;
@@ -156,10 +143,6 @@ export class StoryDecorator extends SpectrumElement {
         ];
     }
 
-    @property({ type: String })
-    public system: SystemVariant =
-        window.__swc_hack_knobs__.defaultSystemVariant;
-
     @property({ type: String })
     public color: Color = window.__swc_hack_knobs__.defaultColor;
 
@@ -197,12 +180,6 @@ export class StoryDecorator extends SpectrumElement {
         const { value } = target as Picker;
         const { checked } = target as Switch;
         switch (id) {
-            case 'system':
-                this.system =
-                    system =
-                    window.__swc_hack_knobs__.defaultSystemVariant =
-                        value as SystemVariant;
-                break;
             case 'color':
                 this.color =
                     color =
@@ -238,10 +215,10 @@ export class StoryDecorator extends SpectrumElement {
     }
 
     public get backgroundStyle() {
-        if (this.system === 'spectrum-two') {
-            return `background-color: var(--spectrum-gray-50)`;
-        }
-        return `background-color: var(--spectrum-gray-100);`;
+        const hasStaticWhite = this.matches(':has([static-color="white"])');
+        const hasStaticBlack = this.matches(':has([static-color="black"])');
+
+        return `background: ${hasStaticWhite ? 'linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67))' : hasStaticBlack ? 'linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255))' : 'var(--spectrum-background-base-color)'}`;
     }
 
     protected handleKeydown(event: KeyboardEvent): void {
@@ -257,10 +234,13 @@ export class StoryDecorator extends SpectrumElement {
         }
     }
 
+    public override connectedCallback(): void {
+        super.connectedCallback();
+    }
+
     protected override render(): TemplateResult {
         return html`
             <sp-theme
-                system=${this.system}
                 color=${this.color}
                 scale=${this.scale}
                 dir=${this.direction}
@@ -309,36 +289,16 @@ export class StoryDecorator extends SpectrumElement {
     private get manageTheme(): TemplateResult {
         return html`
             <div class="manage-theme" part="controls">
-                ${this.systemControl} ${this.colorControl} ${this.scaleControl}
-                ${this.localeControl} ${this.dirControl}
-                ${this.reduceMotionControl}
+                ${this.colorControl} ${this.scaleControl} ${this.localeControl}
+                ${this.dirControl} ${this.reduceMotionControl}
             </div>
         `;
     }
 
-    private get systemControl(): TemplateResult {
-        return html`
-            <sp-field-label side-aligned="start" for="system">
-                System
-            </sp-field-label>
-            <sp-picker
-                id="system"
-                placement="top"
-                quiet
-                .value=${this.system}
-                @change=${this.updateTheme}
-            >
-                <sp-menu-item value="spectrum">Spectrum</sp-menu-item>
-                <sp-menu-item value="express">Express</sp-menu-item>
-                <sp-menu-item value="spectrum-two">Spectrum 2</sp-menu-item>
-            </sp-picker>
-        `;
-    }
-
     private get colorControl(): TemplateResult {
         return html`
             <sp-field-label side-aligned="start" for="color">
-                Theme
+                Color
             </sp-field-label>
             <sp-picker
                 id="color"
@@ -366,8 +326,8 @@ export class StoryDecorator extends SpectrumElement {
                 .value=${this.scale}
                 @change=${this.updateTheme}
             >
-                <sp-menu-item value="medium">Medium</sp-menu-item>
-                <sp-menu-item value="large">Large</sp-menu-item>
+                <sp-menu-item value="medium">Desktop</sp-menu-item>
+                <sp-menu-item value="large">Mobile</sp-menu-item>
             </sp-picker>
         `;
     }
@@ -407,8 +367,8 @@ export class StoryDecorator extends SpectrumElement {
                 .value=${this.direction}
                 @change=${this.updateTheme}
             >
-                <sp-menu-item value="ltr">LTR</sp-menu-item>
-                <sp-menu-item value="rtl">RTL</sp-menu-item>
+                <sp-menu-item value="ltr">Left-to-right</sp-menu-item>
+                <sp-menu-item value="rtl">Right-to-left</sp-menu-item>
             </sp-picker>
         `;
     }
@@ -420,7 +380,7 @@ export class StoryDecorator extends SpectrumElement {
                 ?checked=${this.reduceMotion}
                 @change=${this.updateTheme}
             >
-                Reduce Motion
+                Reduce motion
             </sp-switch>
         `;
     }
diff --git a/projects/story-decorator/src/types.ts b/projects/story-decorator/src/types.ts
index 8967683c74b..7ce7a505b87 100644
--- a/projects/story-decorator/src/types.ts
+++ b/projects/story-decorator/src/types.ts
@@ -9,13 +9,12 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { Color, Scale, SystemVariant } from '@spectrum-web-components/theme';
+import { Color, Scale } from '@spectrum-web-components/theme';
 import { Locale } from './locales.js';
 
 declare global {
     interface Window {
         __swc_hack_knobs__: {
-            defaultSystemVariant: SystemVariant;
             defaultColor: Color;
             defaultScale: Scale;
             defaultDirection: 'ltr' | 'rtl';
diff --git a/projects/templates/plop-templates/component-overrides.css.hbs b/projects/templates/plop-templates/component-overrides.css.hbs
deleted file mode 100644
index 592d369d197..00000000000
--- a/projects/templates/plop-templates/component-overrides.css.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright 2025 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 is where you'd put any system overrides that needs different styling in different themes */
diff --git a/projects/templates/plop-templates/component.css.hbs b/projects/templates/plop-templates/component.css.hbs
index e1b53b42a4c..02fb71ea34c 100644
--- a/projects/templates/plop-templates/component.css.hbs
+++ b/projects/templates/plop-templates/component.css.hbs
@@ -9,6 +9,3 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
-@import './spectrum-{{ name }}.css';
-@import './{{ name }}-overrides.css';
diff --git a/projects/templates/plopfile.js b/projects/templates/plopfile.js
index 81c315639b0..4e36334c60d 100644
--- a/projects/templates/plopfile.js
+++ b/projects/templates/plopfile.js
@@ -96,11 +96,6 @@ module.exports = function (plop) {
                 path: '../../packages/{{name}}/src/{{name}}.css',
                 templateFile: 'plop-templates/component.css.hbs',
             },
-            {
-                type: 'add',
-                path: '../../packages/{{name}}/src/{{name}}-overrides.css',
-                templateFile: 'plop-templates/component-overrides.css.hbs',
-            },
             {
                 type: 'add',
                 path: '../../packages/{{name}}/test/{{name}}.test.ts',
diff --git a/projects/vrt-compare/src/VrtCompare.ts b/projects/vrt-compare/src/VrtCompare.ts
index c55384108de..97f47592722 100644
--- a/projects/vrt-compare/src/VrtCompare.ts
+++ b/projects/vrt-compare/src/VrtCompare.ts
@@ -25,7 +25,7 @@ import bodyStyles from '@spectrum-web-components/styles/body.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/action-group/sp-action-group.js';
 import '@spectrum-web-components/split-view/sp-split-view.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-triangle.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js';
@@ -84,7 +84,10 @@ export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
 
     protected get error() {
         return html`
-            <sp-icon-alert class="icon" size="xl"></sp-icon-alert>
+            <sp-icon-alert-triangle
+                class="icon"
+                size="xl"
+            ></sp-icon-alert-triangle>
             <p class="spectrum-Body spectrum-Body--sizeXL">
                 Please be sure to supply some combination of actual, baseline,
                 and diff screenshots for review.
diff --git a/scripts/process-icons.js b/scripts/process-icons.js
index 6fc9adea6e9..3277f262c7f 100644
--- a/scripts/process-icons.js
+++ b/scripts/process-icons.js
@@ -15,6 +15,7 @@
 import path from 'path';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
+import 'colors';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -58,7 +59,7 @@ const spectrumIconsPath = path.resolve(
 
 // process the scales
 ['medium', 'large'].forEach((scaleKey) => {
-    console.log(`processing scale ${scaleKey}...`);
+    console.log(`\nProcessing scale ${scaleKey.cyan}`);
 
     const srcPath = path.join(spectrumIconsPath, scaleKey);
     const outputPath = path.join(
@@ -78,7 +79,7 @@ const spectrumIconsPath = path.resolve(
 
     fs.readdirSync(srcPath).forEach((iconFile) => {
         const srcIconPath = path.join(srcPath, iconFile);
-        console.log(`\ticon ${iconFile}`);
+        console.log(` - ${path.basename(iconFile, '.svg').green}`);
         processIcon(srcIconPath, outputFd);
     });
 
diff --git a/storybook/assets/base.css b/storybook/assets/base.css
new file mode 100644
index 00000000000..ae6109cc999
--- /dev/null
+++ b/storybook/assets/base.css
@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+body {
+	--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);
+
+	margin: 0;
+
+	font-family: var(--spectrum-font-family);
+	font-size: var(--spectrum-font-size);
+	font-style: var(--spectrum-font-style);
+
+	color: var(--spectrum-neutral-content-color-default, rgb(34 34 34));
+	background-color: var(--spectrum-background-base-color, rgb(230 230 230));
+}
+
+/* Assuming sp-theme serves as the example's "container" */
+sp-theme::part(container) {
+	color: var(--spectrum-neutral-content-color-default);
+	background-color: var(--spectrum-background-base-color);
+	-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+}
+
+sp-theme::part(container):has([static-color='black']) {
+	background: var(--spectrum-examples-gradient-static-black);
+}
+
+sp-theme::part(container):has([static-color='white']) {
+	background: var(--spectrum-examples-gradient-static-white);
+}
+
+/* Hide the SVG elements that only include references */
+svg:has(symbol):not(:has(use)) {
+	display: none;
+}
+
+/* --- DOCS STYLES --- */
+.docs-story > *:first-child {
+	overflow: hidden;
+}
+
+/* Make sure heading provided by <Stories/> doc block uses styles consistent with the default H2. */
+#variants {
+	font-size: 24px;
+	margin-block-end: 8px;
+	color: rgb(46 52 56);
+	font-weight: bold;
+	line-height: normal;
+	letter-spacing: normal;
+	text-transform: none;
+	border-block-end: 1px solid hsl(203deg 50% 30% / 15%);
+}
+
+.sb-story {
+	/* Prevent inline stories in the Docs from cutting off content (which is different than the regular
+	story view), due to Storybook's inline style that sets overflow: auto */
+	overflow: visible !important;
+}
diff --git a/storybook/decorators/testing-grid.js b/storybook/decorators/testing-grid.js
new file mode 100644
index 00000000000..d421acc8c46
--- /dev/null
+++ b/storybook/decorators/testing-grid.js
@@ -0,0 +1,207 @@
+/*
+Copyright 2025 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.
+*/
+
+import { makeDecorator } from '@storybook/preview-api';
+import isChromatic from 'chromatic/isChromatic';
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+import { Container, Sizes, States } from './utilities.js';
+
+/**
+ * @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework>
+ * @description Lets you preview the Chromatic testing view locally
+ **/
+export const withTestingGridWrapper = makeDecorator({
+    name: 'withTestingGridWrapper',
+    parameterName: 'testingGrid',
+    wrapper: (StoryFn, context) => {
+        const {
+            args = {},
+            // Testing preview reflects the state of the user-selected global value
+            globals: { testingGrid = false } = {},
+            // Show testing grid reflects whether the testing grid is currently visible in the UI
+            parameters: {
+                docs = {},
+                showTestingGrid,
+                testData,
+                stateData,
+                withSizes,
+            } = {},
+            viewMode,
+        } = context;
+
+        // Below we're setting a new parameter "showTestingGrid" to reflect whether the testing grid should be visible
+        // This is done to ensure that the testing grid is always visible in the Chromatic testing view
+        // and that the user-selected global value is respected in the Storybook UI
+
+        // If isChromatic() is true, we should update the global value to always show the testing grid
+        if (typeof isChromatic === 'function' && isChromatic() === true) {
+            context.parameters.showTestingGrid = true;
+        } else if (viewMode === 'docs') {
+            // If we're in the docs view, we should disable the testing grid
+            context.parameters.showTestingGrid = false;
+        } else if (typeof showTestingGrid === 'undefined') {
+            // If the global value is undefined, we should set it to the testing preview value
+            context.parameters.showTestingGrid = testingGrid;
+        } else if (showTestingGrid !== testingGrid) {
+            context.parameters.showTestingGrid = testingGrid;
+        }
+
+        const height = docs?.story?.height;
+        const width = docs?.story?.width;
+
+        if (
+            viewMode === 'docs' ||
+            (!showTestingGrid &&
+                typeof isChromatic === 'function' &&
+                !isChromatic())
+        ) {
+            return html`
+                <!-- Simple, clean template preview for non-testing grid views -->
+                <div
+                    style=${styleMap({
+                        padding: '12px',
+                        'min-block-size':
+                            typeof height === 'number' ? `${height}px` : height,
+                        'min-inline-size':
+                            typeof width === 'number' ? `${width}px` : width,
+                    })}
+                    data-html-preview
+                >
+                    ${StoryFn(args, context)}
+                </div>
+            `;
+        }
+
+        return html`
+            <!-- Start testing grid markup -->
+            <div
+                data-testing-preview
+                style=${styleMap({
+                    padding: '24px',
+                    display: 'flex',
+                    'flex-direction': 'column',
+                    'flex-wrap': 'wrap',
+                    'align-items': 'flex-start',
+                    gap: '24px',
+                })}
+            >
+                <!-- Test data can include: a custom template, descriptive heading, and container styles -->
+                <!-- Tests can also opt out of rendering the test in each available state -->
+                ${testData.map(
+                    ({
+                        Template: AltTemplate,
+                        testHeading,
+                        wrapperStyles: testWrapperStyles = {},
+                        withStates,
+                        withSizes = false,
+                        // Capture any additional data to pass to the template
+                        ...item
+                    }) => {
+                        if (typeof withStates === 'undefined') {
+                            withStates = stateData.length > 0;
+                        }
+
+                        if (
+                            stateData[0] &&
+                            Object.keys(stateData[0]).length !== 0
+                        ) {
+                            // Add a default value at the beginning of the array to represent the base state
+                            stateData.unshift({});
+                        }
+
+                        // If a custom template is provided, use it, otherwise use the default template
+                        if (typeof AltTemplate === 'undefined') {
+                            AltTemplate = StoryFn;
+                        }
+
+                        // Show the border if we are rendering the test in multiple states or if there are several
+                        // tests in the grid, this helps distinguish between tests
+                        const withBorder = withStates || testData.length > 1;
+
+                        // Merge the test data with the args to pass to the template
+                        const data = { ...args, ...item };
+
+                        // If there are other test headings in the set, add "Default" to those missing a heading
+                        if (
+                            testData.some(({ testHeading }) => testHeading) &&
+                            !testHeading
+                        ) {
+                            testHeading = 'Default';
+                        }
+
+                        return Container(
+                            {
+                                heading: testHeading,
+                                withBorder,
+                                containerStyles: {
+                                    // the z-index is necessary to ensure elements always appear above the overlay
+                                    'z-index': '1',
+                                    ...testWrapperStyles,
+                                },
+                                // if the test has multiple states, pass the wrapper styles to that container, otherwise use it here
+                                wrapperStyles: withStates
+                                    ? {}
+                                    : testWrapperStyles,
+                                content: html`
+                                    ${when(
+                                        withStates,
+                                        () =>
+                                            States(
+                                                {
+                                                    Template: AltTemplate,
+                                                    stateData,
+                                                    wrapperStyles:
+                                                        testWrapperStyles,
+                                                    containerHeading:
+                                                        testHeading,
+                                                    ...data,
+                                                },
+                                                context
+                                            ),
+                                        () =>
+                                            when(
+                                                withSizes,
+                                                () =>
+                                                    Sizes(
+                                                        {
+                                                            Template: StoryFn,
+                                                            withHeading: false,
+                                                            ...data,
+                                                        },
+                                                        context
+                                                    ),
+                                                () => AltTemplate(data, context)
+                                            )
+                                    )}
+                                `,
+                            },
+                            context
+                        );
+                    }
+                )}
+
+                <!-- If sizing exists for the component, it will render all sizes for testing -->
+                ${when(withSizes, () =>
+                    Sizes(
+                        {
+                            Template: StoryFn,
+                            ...args,
+                        },
+                        context
+                    )
+                )}
+            </div>
+        `;
+    },
+});
diff --git a/storybook/decorators/utilities.js b/storybook/decorators/utilities.js
new file mode 100644
index 00000000000..3271318d84c
--- /dev/null
+++ b/storybook/decorators/utilities.js
@@ -0,0 +1,711 @@
+/*
+Copyright 2025 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.
+*/
+
+import isChromatic from 'chromatic/isChromatic';
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+import { capitalize } from 'lodash-es';
+
+/**
+ * Renders a heading or code block that identifies the test case and is ignored by the snapshots.
+ * @param {Object} props
+ * @param {string} props.semantics - The type of heading or code block to render.
+ * @param {string} props.content - The content to render in the heading or code block.
+ * @param {string} props.size - The size of the heading to render.
+ * @param {string} props.weight - The weight of the heading to render.
+ */
+const Heading = (
+    {
+        semantics = 'heading',
+        content,
+        size = 'l',
+        weight,
+        withMargin = false,
+    } = {},
+    context = {}
+) => {
+    if (!content) {
+        return nothing;
+    }
+
+    const headingStyles = {
+        display: 'block',
+        color: 'inherit',
+        'font-family':
+            'adobe-clean, "adobe clean", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif',
+        'font-size': '11px',
+        'line-height': '1.3',
+        'font-weight': '700',
+        'margin-block-end': withMargin ? '8px' : '0',
+    };
+
+    if ((size === 'xxs' && semantics === 'heading') || size === 'l') {
+        headingStyles['font-size'] = '14px';
+    }
+
+    if (semantics === 'detail') {
+        headingStyles['letter-spacing'] = '.06em';
+        headingStyles['text-transform'] = 'uppercase';
+    }
+
+    if (weight === 'light') {
+        if (semantics === 'heading') {
+            headingStyles['font-weight'] = '300';
+        } else {
+            headingStyles['font-weight'] = '400';
+        }
+    }
+
+    if (context.globals?.color?.startsWith('dark')) {
+        headingStyles['color'] = context?.args?.staticColor ?? 'white';
+    } else if (typeof context?.args?.staticColor !== 'undefined') {
+        headingStyles['color'] = context?.args?.staticColor ?? 'CanvasText';
+    } else {
+        headingStyles['color'] = 'CanvasText';
+    }
+
+    return html`
+        <span class="chromatic-ignore" style=${styleMap(headingStyles)}>
+            ${content}
+        </span>
+    `;
+};
+
+/**
+ * Generates a container div with a heading and test content.
+ * @param {Object} props
+ * @param {string} props.heading - The heading to render above the content.
+ * @param {string} props.content - The content to render in the container.
+ * @param {string} props.type - The type of heading to render.
+ * @param {number} props.level - The level of the heading to render.
+ * @param {string} props.direction - The direction of the container content.
+ * @param {boolean} props.withBorder - Whether to render a border around the container.
+ * @param {Object} props.containerStyles - Additional styles to apply to the container.
+ * @param {Object} props.wrapperStyles - Additional styles to apply to the content wrapper.
+ */
+export const Container = (
+    {
+        heading,
+        content,
+        type = 'detail',
+        level = 1,
+        direction = 'row',
+        withBorder = true,
+        containerStyles = {},
+        wrapperStyles = {},
+    } = {},
+    context = {}
+) => {
+    const isDocs = context?.viewMode === 'docs';
+    const headingConfig = { size: 'l', semantics: type };
+    let gap = 40;
+
+    if (level > 1) {
+        headingConfig.size = 's';
+        headingConfig.weight = 'light';
+    }
+
+    if (level > 3) {
+        headingConfig.size = 'xxs';
+        headingConfig.semantics = 'heading';
+        containerStyles['padding-block-start'] = '8px';
+        wrapperStyles['padding-block-start'] = '12px';
+    }
+
+    if (level === 2) {
+        gap = 160;
+    }
+
+    const borderStyles = {};
+    if (withBorder) {
+        borderStyles['padding-inline'] = '24px';
+        borderStyles['padding-block'] = '24px';
+        borderStyles['border'] =
+            '1px solid rgba(var(--spectrum-gray-600-rgb), 20%)';
+        borderStyles['border-radius'] = '4px';
+        gap = 80;
+    }
+
+    return html`
+        <div
+            data-outer-container
+            style=${styleMap({
+                'z-index': '1',
+                position: 'relative',
+                display: 'flex',
+                'flex-direction': 'column',
+                'flex-wrap': 'nowrap',
+                'align-items': 'flex-start',
+                gap:
+                    heading && level > 1
+                        ? `${parseInt(24 / level, 10)}px`
+                        : undefined,
+                ...containerStyles,
+            })}
+        >
+            ${when(heading, () =>
+                Heading(
+                    {
+                        ...headingConfig,
+                        content: heading,
+                    },
+                    {
+                        ...context,
+                        globals: {
+                            ...(context.globals ?? {}),
+                            // If the level is 1 and we are not in docs view, use the light color theme for the heading
+                            color:
+                                level === 1 && !isDocs
+                                    ? 'light'
+                                    : context.globals?.color,
+                        },
+                    }
+                )
+            )}
+            <div
+                data-inner-container
+                style=${styleMap({
+                    'flex-grow': '1',
+                    position: 'relative',
+                    display: 'flex',
+                    'flex-direction': direction,
+                    'flex-wrap': 'wrap',
+                    'column-gap': `${parseInt(gap / level, 10)}px`,
+                    'row-gap': '24px',
+                    'align-items':
+                        heading && level > 1 ? 'flex-start' : undefined,
+                    'justify-content':
+                        direction === 'column' ? 'center' : 'flex-start',
+                    ...borderStyles,
+                    ...wrapperStyles,
+                })}
+            >
+                ${renderContent(content, { context })}
+            </div>
+        </div>
+    `;
+};
+
+/**
+ * Iterates over provided state data and renders the template for each state in a testing grid.
+ * @param {Object} props
+ * @param {Function} props.Template - The template to render for each state.
+ * @param {string} props.direction - The direction of the state content.
+ * @param {Object[]} props.stateData - The data for each state to render.
+ * @param {Object} props.containerStyles - Additional styles to apply to the container.
+ * @param {Object} props.wrapperStyles - Additional styles to apply to the content wrapper.
+ * @param {Object} props.args - The arguments to pass to the template.
+ * @param {Object} context - The context to pass to the template.
+ */
+export const States = (
+    {
+        Template,
+        direction = 'row',
+        stateData = [],
+        containerStyles = {},
+        wrapperStyles = {},
+        containerHeading = '',
+        ...args
+    } = {},
+    context = {}
+) => {
+    // If the state data is not an array, make it an array for easier processing
+    if (!Array.isArray(stateData)) {
+        stateData = [stateData];
+    }
+
+    // Return the state data inside a container element
+    return Container(
+        {
+            level: 2,
+            direction,
+            withBorder: false,
+            heading: undefined,
+            containerStyles,
+            content: stateData.map(
+                ({
+                    testHeading = 'Default',
+                    // Rename the input stateWrapperStyles to avoid confusion with the wrapperStyles prop
+                    wrapperStyles: stateWrapperStyles = {},
+                    ignore = [],
+                    include = [],
+                    ...item
+                }) => {
+                    // If the container test heading is not in the include list, skip rendering this state
+                    if (include.length && !include.includes(containerHeading)) {
+                        return nothing;
+                    }
+
+                    // If the container test heading is in the ignore list, skip rendering this state
+                    if (ignore.length && ignore.includes(containerHeading)) {
+                        return nothing;
+                    }
+
+                    context = {
+                        ...context,
+                        args: {
+                            ...context.args,
+                            ...args,
+                            ...item,
+                        },
+                    };
+
+                    return Container(
+                        {
+                            heading: stateData.some(
+                                ({ testHeading }) => testHeading
+                            )
+                                ? testHeading
+                                : '',
+                            level: 3,
+                            withBorder: false,
+                            wrapperStyles: {
+                                ...wrapperStyles,
+                                ...stateWrapperStyles,
+                            },
+                            content: Template({ ...args, ...item }, context),
+                        },
+                        context
+                    );
+                }
+            ),
+        },
+        context
+    );
+};
+
+/**
+ * Iterates over the provided arg options and renders the template for each option in a testing grid.
+ * Data for each size is collected from the default args for the story this is bound to.
+ * @param {Object} props
+ * @param {Function} props.Template - The template to render for each state.
+ * @param {Object} props.wrapperStyles - Additional styles to apply to the content wrapper.
+ * @param {string} props.direction - The direction of the size content.
+ * @param {string} props.heading - The heading to render above the grid.
+ * @param {string} props.argKey - The key to use for the argTypes to pass the property back to the template.
+ * @param {string[]} props.options - The options to render in the grid.
+ * @param {string[]} props.labels - The labels to render for each option.
+ * @param {number} props.level - The level of the heading to render.
+ * @param {Object} props.args - The arguments to pass to the template.
+ * @param {Object} context - The context to pass to the template.
+ */
+export const ArgGrid = (
+    {
+        Template,
+        wrapperStyles = {},
+        containerStyles = {},
+        direction = 'row',
+        heading,
+        argKey,
+        options,
+        labels = {},
+        level = 2,
+        withBorder = true,
+        withWrapperBorder = true,
+        ...args
+    } = {},
+    context = {}
+) => {
+    const isDocs = context.viewMode === 'docs';
+
+    if (typeof argKey === 'undefined') {
+        console.warn('ArgGrid: argKey is required to render the grid.');
+        return nothing;
+    }
+
+    const argType = context?.argTypes?.[argKey];
+    if (typeof argType === 'undefined') {
+        // Check if the argKey exists in the argTypes
+        console.warn(
+            `ArgGrid: ${argKey} is not a valid argType for this story.`
+        );
+        return nothing;
+    }
+
+    if (typeof options === 'undefined' || !options.length) {
+        options = argType.options ?? [];
+    }
+
+    if (typeof options === 'undefined' || !options.length) {
+        console.warn(`ArgGrid: No options found for ${argKey}.`);
+        return nothing;
+    }
+
+    // If no heading and this is a docs view, skip the border
+    if (!heading && isDocs) {
+        withWrapperBorder = false;
+    }
+
+    return Container(
+        {
+            heading,
+            direction,
+            withBorder: withWrapperBorder,
+            containerStyles,
+            wrapperStyles,
+            content: options.map((opt, index) =>
+                Container(
+                    {
+                        heading: labels[opt] ?? capitalize(opt),
+                        level,
+                        withBorder,
+                        containerStyles,
+                        wrapperStyles,
+                        content: Template(
+                            {
+                                ...args,
+                                [argKey]: opt,
+                                /**
+                                 * Make sure stories in the testing grid maintain a unique "name" and "id", by appending an additional string.
+                                 * Important for labels associated with a control by ID, and for groups of radios to maintain the same name.
+                                 */
+                                ...(typeof args?.name !== 'undefined'
+                                    ? {
+                                          name: `${args.name}-${argKey}-${index}`,
+                                      }
+                                    : {}),
+                                ...(typeof args?.id !== 'undefined'
+                                    ? { id: `${args.id}-${argKey}-${index}` }
+                                    : {}),
+                            },
+                            context
+                        ),
+                    },
+                    context
+                )
+            ),
+        },
+        context
+    );
+};
+
+/**
+ * Iterates over the sizes defined in the argTypes and renders the template for each size in a testing grid.
+ * Data for each size is collected from the default args for the story this is bound to.
+ * @param {Object} props
+ * @param {Function} props.Template - The template to render for each state.
+ * @param {Object} props.wrapperStyles - Additional styles to apply to the content wrapper.
+ * @param {string} props.direction - The direction of the size content.
+ * @param {Object} props.args - The arguments to pass to the template.
+ * @param {Object} context - The context to pass to the template.
+ */
+export const Sizes = (
+    {
+        sizeHeading = 'Sizing',
+        withHeading = true,
+        withBorder = false,
+        withWrapperBorder = true,
+        ...args
+    } = {},
+    context = {}
+) => {
+    return ArgGrid(
+        {
+            withBorder,
+            withWrapperBorder,
+            argKey: 'size',
+            labels: {
+                xxs: 'Extra-extra-small',
+                xs: 'Extra-small',
+                s: 'Small',
+                m: 'Medium',
+                l: 'Large',
+                xl: 'Extra-large',
+                xxl: 'Extra-extra-large',
+                xxxl: 'Extra-extra-extra-large',
+            },
+            ...args,
+            heading: withHeading ? sizeHeading : undefined,
+        },
+        context
+    );
+};
+
+/**
+ * The entry point for rendering a testing grid for a component with multiple states and sizes.
+ * @param {Object} props
+ * @param {Function} props.Template - The template to render for each state and size.
+ * @param {Function} props.TestTemplate - The template to render for each test case.
+ * @param {Object[]} props.testData - The data for each test case to render.
+ * @param {Object[]} props.stateData - The data for each state to render.
+ * @param {boolean} props.withSizes - Whether to render sizes for the component.
+ * @param {string} props.sizeDirection - The direction of the size content.
+ * @param {string} props.stateDirection - The direction of the state content.
+ * @param {Object} props.containerStyles - Additional styles to apply to the container.
+ * @param {Object} props.wrapperStyles - Additional styles to apply to the content wrapper.
+ */
+export const Variants = ({
+    Template,
+    TestTemplate,
+    SizeTemplate,
+    // Test data defaults to an empty array so that we at least get the base component
+    testData = [{}],
+    stateData = [],
+    withSizes = true,
+    sizeDirection,
+    stateDirection,
+    containerStyles = {},
+    wrapperStyles = {},
+} = {}) => {
+    if (!Template) {
+        throw new Error('Template is required');
+    }
+
+    // If no separate test template is provided, use the default template
+    if (typeof TestTemplate === 'undefined') {
+        TestTemplate = Template;
+    }
+
+    if (typeof SizeTemplate === 'undefined') {
+        SizeTemplate = TestTemplate;
+    }
+
+    return (args, context) => {
+        // Fetch any docs configurations from the context to use for VRT
+        const {
+            parameters: { docs = {}, showTestingGrid = false } = {},
+            viewMode,
+        } = context;
+
+        const height = docs?.story?.height;
+        const width = docs?.story?.width;
+
+        if (
+            viewMode === 'docs' ||
+            (!showTestingGrid &&
+                typeof isChromatic === 'function' &&
+                !isChromatic())
+        ) {
+            return html`
+                <!-- Simple, clean template preview for non-testing grid views -->
+                <div
+                    style=${styleMap({
+                        padding: '12px',
+                        'min-block-size':
+                            typeof height === 'number' ? `${height}px` : height,
+                        'min-inline-size':
+                            typeof width === 'number' ? `${width}px` : width,
+                        ...wrapperStyles,
+                    })}
+                    data-html-preview
+                >
+                    ${Template(args, context)}
+                </div>
+            `;
+        }
+
+        return html`
+            <!-- Start testing grid markup -->
+            <div
+                data-testing-preview
+                style=${styleMap({
+                    padding: '24px',
+                    display: 'flex',
+                    'flex-direction': 'column',
+                    'flex-wrap': 'wrap',
+                    'align-items': 'flex-start',
+                    gap: '24px',
+                })}
+            >
+                <!-- Test data can include: a custom template, descriptive heading, and container styles -->
+                <!-- Tests can also opt out of rendering the test in each available state -->
+                ${testData.map(
+                    ({
+                        Template: AltTemplate,
+                        testHeading,
+                        wrapperStyles: testWrapperStyles = {},
+                        withStates,
+                        withSizes = false,
+                        // Capture any additional data to pass to the template
+                        ...item
+                    }) => {
+                        if (typeof withStates === 'undefined') {
+                            withStates = stateData.length > 0;
+                        }
+
+                        if (
+                            stateData[0] &&
+                            Object.keys(stateData[0]).length !== 0
+                        ) {
+                            // Add a default value at the beginning of the array to represent the base state
+                            stateData.unshift({});
+                        }
+
+                        // If a custom template is provided, use it, otherwise use the default template
+                        if (typeof AltTemplate === 'undefined') {
+                            AltTemplate = TestTemplate;
+                        }
+
+                        // Show the border if we are rendering the test in multiple states or if there are several
+                        // tests in the grid, this helps distinguish between tests
+                        const withBorder = withStates || testData.length > 1;
+
+                        // Merge the test data with the args to pass to the template
+                        const data = { ...args, ...item };
+
+                        // If there are other test headings in the set, add "Default" to those missing a heading
+                        if (
+                            testData.some(({ testHeading }) => testHeading) &&
+                            !testHeading
+                        ) {
+                            testHeading = 'Default';
+                        }
+
+                        const combinedStyles = {
+                            ...wrapperStyles,
+                            ...testWrapperStyles,
+                        };
+
+                        return Container(
+                            {
+                                heading: testHeading,
+                                withBorder,
+                                containerStyles: {
+                                    // the z-index is necessary to ensure elements always appear above the overlay
+                                    'z-index': '1',
+                                    ...containerStyles,
+                                },
+                                // if the test has multiple states, pass the wrapper styles to that container, otherwise use it here
+                                wrapperStyles: withStates
+                                    ? containerStyles
+                                    : combinedStyles,
+                                content: html`
+                                    ${when(
+                                        withStates,
+                                        () =>
+                                            States(
+                                                {
+                                                    Template: AltTemplate,
+                                                    stateData,
+                                                    direction: stateDirection,
+                                                    wrapperStyles:
+                                                        combinedStyles,
+                                                    containerHeading:
+                                                        testHeading,
+                                                    ...data,
+                                                },
+                                                context
+                                            ),
+                                        () =>
+                                            when(
+                                                withSizes,
+                                                () =>
+                                                    Sizes(
+                                                        {
+                                                            Template:
+                                                                SizeTemplate,
+                                                            withHeading: false,
+                                                            ...data,
+                                                        },
+                                                        context
+                                                    ),
+                                                () => AltTemplate(data, context)
+                                            )
+                                    )}
+                                `,
+                            },
+                            context
+                        );
+                    }
+                )}
+
+                <!-- If sizing exists for the component, it will render all sizes for testing -->
+                ${when(withSizes, () =>
+                    Sizes(
+                        {
+                            Template: SizeTemplate,
+                            wrapperStyles,
+                            containerStyles,
+                            direction: sizeDirection,
+                            ...args,
+                        },
+                        context
+                    )
+                )}
+            </div>
+        `;
+    };
+};
+
+/**
+ * Renders content provided in an array (or in various formats) with optional callback for processing.
+ * @param {Array|Object|Function|string} content - The content to render.
+ * @param {Object} props
+ * @param {Object} props.context - The context to pass to the callback.
+ * @param {Object} props.args - The arguments to pass to the callback.
+ * @param {Function} props.callback - The callback to process the content.
+ * @returns {TemplateResult} The rendered content.
+ */
+export const renderContent = (
+    content = [],
+    {
+        context = {},
+        args = {},
+        callback = ({ testHeading, content, ...args }, context) => {
+            return html`
+                <div>
+                    ${testHeading
+                        ? Heading(
+                              { content: testHeading, withMargin: true },
+                              context
+                          )
+                        : nothing}
+                    ${content
+                        ? renderContent(content, { args, context })
+                        : nothing}
+                </div>
+            `;
+        },
+    } = {}
+) => {
+    // If the content is not an array, make it an array for easier processing
+    if (!Array.isArray(content)) {
+        content = [content];
+    }
+
+    if (content.length === 0) {
+        return nothing;
+    }
+
+    return html`
+        ${content.map((c) => {
+            if (typeof c === 'undefined') {
+                return nothing;
+            }
+
+            /* If the content is an object (but not a lit object), we need to merge the object with the template */
+            if (
+                typeof c !== 'string' &&
+                typeof c === 'object' &&
+                !c._$litType$
+            ) {
+                return callback({ ...args, ...c }, context);
+            }
+
+            if (typeof c === 'function') {
+                return c(args, context);
+            }
+
+            return c;
+        })}
+    `;
+};
+
+/**
+ * Generates a random ID with a specified prefix.
+ * @param {string} prefix - The prefix to use for the ID.
+ * @returns {string} The generated ID.
+ */
+export const getRandomId = (prefix = 'spectrum') => {
+    return `${prefix}-${Math.random().toString(36).substring(2, 7)}`;
+};
diff --git a/storybook/main.js b/storybook/main.js
index 0ae17e1aed2..9ca2e935f9c 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -14,9 +14,19 @@ import { merge } from 'webpack-merge';
 
 /** @type { import('@storybook/web-components-webpack5').StorybookConfig } */
 export default {
+    rootDir: '../',
+    staticDirs: ['./assets'],
     stories: [
-        '../packages/*/stories/*.stories.js',
-        '../tools/*/stories/*.stories.js',
+        {
+            directory: '../packages',
+            files: '*/stories/*.stories.js',
+            titlePrefix: 'Packages',
+        },
+        {
+            directory: '../tools',
+            files: '*/stories/*.stories.js',
+            titlePrefix: 'Tools',
+        },
     ],
     addons: [
         '@storybook/addon-links',
@@ -38,6 +48,10 @@ export default {
             lazyCompilation: true,
         },
     },
+    core: {
+        disableTelemetry: true,
+        disableWhatsNewNotifications: true,
+    },
     async webpackFinal(config) {
         return merge(config, {
             resolve: {
@@ -51,7 +65,7 @@ export default {
             ? {
                   'design-system': {
                       title: 'Spectrum CSS',
-                      url: 'https://opensource.adobe.com/spectrum-css/preview/',
+                      url: 'https://pr-2352--spectrum-css.netlify.app/',
                       expanded: false, // Optional, true by default
                   },
               }
diff --git a/storybook/preview.js b/storybook/preview.js
index 6087e871e43..d8742dc1d3f 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -15,6 +15,7 @@ import { Locales } from '@spectrum-web-components/story-decorator/src/locales.js
 // import { setCustomElementsManifest } from '@storybook/web-components';
 import DocumentationTemplate from './DocumentationTemplate.mdx';
 import '@spectrum-web-components/story-decorator/sp-story-decorator.js';
+import { withTestingGridWrapper } from './decorators/testing-grid.js';
 
 // const cem = await import('./custom-elements.json', {
 //     assert: { type: 'json' },
@@ -22,26 +23,12 @@ import '@spectrum-web-components/story-decorator/sp-story-decorator.js';
 
 // setCustomElementsManifest(cem);
 
+// Import the custom base styles
+import './assets/base.css';
+
+export const title = 'Spectrum Web Components';
+
 export const globalTypes = {
-    system: {
-        title: 'Design context',
-        description: 'The variation of Spectrum to use in the component',
-        defaultValue: 'spectrum',
-        type: 'string',
-        showName: true,
-        toolbar: {
-            items: [
-                {
-                    value: 'spectrum-two',
-                    title: 'Spectrum 2',
-                    right: 'default',
-                },
-                { value: 'spectrum', title: 'Spectrum 1', right: 'legacy' },
-                { value: 'express', title: 'Express' },
-            ],
-            dynamicTitle: true,
-        },
-    },
     color: {
         title: 'Color',
         description: 'Controls the color context of the component',
@@ -113,23 +100,46 @@ export const globalTypes = {
             dynamicTitle: true,
         },
     },
+    testingGrid: {
+        title: 'Testing grid',
+        description: 'See how the story will look to VRT',
+        defaultValue: false,
+        toolbar: {
+            icon: 'beaker',
+            items: [
+                { value: true, title: 'Show testing grid' },
+                { value: false, title: 'Default' },
+            ],
+        },
+    },
 };
 
 export const parameters = {
+    layout: 'fullscreen',
     docs: {
+        defaultName: 'Docs',
         template: DocumentationTemplate,
     },
     controls: {
         expanded: true,
+        hideNoControlsWarning: true,
+        sort: 'requiredFirst',
         matchers: {
             color: /(backgroundColor|color)$/i,
             date: /Date$/,
         },
     },
-    layout: 'fullscreen',
     options: {
         storySort: {
             method: 'alphabetical-by-kind',
+            order: [
+                'Packages',
+                ['*', ['Docs', 'Default', '*']],
+                'Tools',
+                ['*', ['Docs', 'Default', '*']],
+                '*',
+            ],
+            includeNames: true,
         },
     },
     badgesConfig: {
@@ -140,6 +150,15 @@ export const parameters = {
                 color: '#ea3829',
             },
             title: 'Deprecated',
+            description: 'Deprecated; will be removed in next major version.',
+        },
+        migrated: {
+            styles: {
+                backgroundColor: 'rgb(84, 36, 219)',
+                color: '#fff',
+            },
+            title: 'Migrated',
+            description: 'Migrated to Spectrum 2.',
         },
     },
     chromatic: {
@@ -147,14 +166,9 @@ export const parameters = {
         prefersReducedMotion: 'no-preference',
         pauseAnimationAtEnd: true,
         modes: {
-            'Context: Spectrum 1': {
-                scale: 'medium',
+            'Light | LTR': {
                 color: 'light',
                 textDirection: 'ltr',
-                context: 'spectrum1',
-            },
-            'Context: Express': {
-                context: 'express',
             },
             'Dark | RTL': {
                 color: 'dark',
@@ -164,6 +178,6 @@ export const parameters = {
     },
 };
 
-export const decorators = [swcThemeDecorator];
+export const decorators = [withTestingGridWrapper, swcThemeDecorator];
 
-export const tags = ['autodocs'];
+export const tags = ['autodocs', 'dev'];
diff --git a/test/benchmark/helpers.ts b/test/benchmark/helpers.ts
index 8350cd01f5c..7e7076a5213 100644
--- a/test/benchmark/helpers.ts
+++ b/test/benchmark/helpers.ts
@@ -10,11 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-import { html, LitElement, render, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {
+    html,
+    LitElement,
+    render,
+    TemplateResult,
+} from '@spectrum-web-components/base';
+import {
+    customElement,
+    property,
+} from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/theme/sp-theme.js';
+import '@spectrum-web-components/theme/core.js';
 import '@spectrum-web-components/theme/scale-large.js';
-import '@spectrum-web-components/theme/theme-lightest.js';
 
 declare global {
     interface Window {
@@ -145,7 +153,7 @@ export const measureFixtureCreation = async (
     const templates = new Array<TemplateResult>(opts.numRenders).fill(template);
     const renderContainer = document.createElement('sp-theme');
     renderContainer.scale = 'large';
-    renderContainer.color = 'lightest';
+    renderContainer.color = 'light';
 
     document.body.appendChild(renderContainer);
     const start = window.tachometerStart === 'page' ? 0 : performance.now();
@@ -158,6 +166,7 @@ export const measureFixtureCreation = async (
             const results = await Promise.all(
                 updates.map((el) => (el as LitElement).updateComplete)
             );
+
             updates = results.reduce((acc, result, index) => {
                 if (!result) {
                     acc.push(updates[index]);
diff --git a/test/lit-helpers.ts b/test/lit-helpers.ts
index 652d680bf16..9aa825b0ea6 100644
--- a/test/lit-helpers.ts
+++ b/test/lit-helpers.ts
@@ -1,24 +1,25 @@
 /**
- * Copyright 2025 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.
- */
-import { ElementPart, Part } from 'lit';
-import { nothing } from 'lit/html.js';
-import { AsyncDirective, directive } from 'lit/async-directive.js';
+Copyright 2020 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.
+*/
+
+import type { ElementPart, Part } from '@spectrum-web-components/base';
+import { nothing } from '@spectrum-web-components/base';
+import { AsyncDirective, directive } from '@spectrum-web-components/base/src/directives.js';
 
 type EventListenerWithOptions = EventListenerOrEventListenerObject &
     Partial<AddEventListenerOptions>;
 
 /**
  * Usage:
- *    import { html, render } from 'lit-html';
+ *    import { html, render } from '@spectrum-web-components/base';
  *    import { spread } from '@open-wc/lit-helpers';
  *
  *    render(
@@ -56,7 +57,9 @@ class SpreadDirective extends AsyncDirective {
     }
 
     apply(data: { [key: string]: unknown }) {
-        if (!data) return;
+        if (!data) {
+            return;
+        }
         const { prevData, element } = this;
         for (const key in data) {
             const value = data[key];
@@ -105,7 +108,9 @@ class SpreadDirective extends AsyncDirective {
 
     groom(data: { [key: string]: unknown }) {
         const { prevData, element } = this;
-        if (!prevData) return;
+        if (!prevData) {
+            return;
+        }
         for (const key in prevData) {
             if (!data || !(key in data)) {
                 switch (key[0]) {
@@ -147,7 +152,9 @@ class SpreadDirective extends AsyncDirective {
     override disconnected() {
         const { prevData, element } = this;
         for (const key in prevData) {
-            if (key[0] !== '@') continue;
+            if (key[0] !== '@') {
+                continue;
+            }
             // event listener
             const value = prevData[key];
             element.removeEventListener(
@@ -161,7 +168,9 @@ class SpreadDirective extends AsyncDirective {
     override reconnected() {
         const { prevData, element } = this;
         for (const key in prevData) {
-            if (key[0] !== '@') continue;
+            if (key[0] !== '@') {
+                continue;
+            }
             // event listener
             const value = prevData[key];
             element.addEventListener(
@@ -194,7 +203,9 @@ class SpreadPropsDirective extends AsyncDirective {
     }
 
     apply(data: { [key: string]: unknown }) {
-        if (!data) return;
+        if (!data) {
+            return;
+        }
         const { prevData, element } = this;
         for (const key in data) {
             const value = data[key];
@@ -208,7 +219,9 @@ class SpreadPropsDirective extends AsyncDirective {
 
     groom(data: { [key: string]: unknown }) {
         const { prevData, element } = this;
-        if (!prevData) return;
+        if (!prevData) {
+            return;
+        }
         for (const key in prevData) {
             if (!data || !(key in data)) {
                 // @ts-ignore
diff --git a/test/testing-helpers.ts b/test/testing-helpers.ts
index 0b14ad577fd..1300ee0674f 100644
--- a/test/testing-helpers.ts
+++ b/test/testing-helpers.ts
@@ -351,7 +351,7 @@ export async function fixture<T extends Element>(
     dir: 'ltr' | 'rtl' | 'auto' = 'ltr'
 ): Promise<T> {
     const test = await owcFixture<Theme>(html`
-        <sp-theme system="spectrum" scale="medium" color="light">
+        <sp-theme scale="medium" color="light">
             ${story}
             <style>
                 sp-theme {
diff --git a/test/visual/review.js b/test/visual/review.js
index 0da097b7348..223ff3e2021 100644
--- a/test/visual/review.js
+++ b/test/visual/review.js
@@ -63,30 +63,21 @@ const getAzureUrl = (combination) => {
 };
 
 const vrts = [];
-const themes = ['Spectrum', 'Express', 'Spectrum-two'];
 const scales = ['Medium', 'Large'];
-const colors = ['Lightest', 'Light', 'Dark', 'Darkest'];
+const colors = ['Light', 'Dark'];
 const directions = ['LTR', 'RTL'];
 vrts.push([`High Contrast Mode | Medium | LTR`, `${getAzureUrl('hcm')}`]);
-themes.forEach((theme) =>
-    colors.forEach((color) => {
-        if (
-            theme === 'Spectrum-two' &&
-            (color === 'Lightest' || color === 'Darkest')
-        ) {
-            return;
-        }
-        scales.forEach((scale) =>
-            directions.forEach((direction) => {
-                const combination = `${theme.toLocaleLowerCase()}-${color.toLocaleLowerCase()}-${scale.toLocaleLowerCase()}-${direction.toLocaleLowerCase()}`;
-                vrts.push([
-                    `${theme} | ${color} | ${scale} | ${direction}`,
-                    `${getAzureUrl(combination)}`,
-                ]);
-            })
-        );
-    })
-);
+colors.forEach((color) => {
+    scales.forEach((scale) =>
+        directions.forEach((direction) => {
+            const combination = `${color.toLocaleLowerCase()}-${scale.toLocaleLowerCase()}-${direction.toLocaleLowerCase()}`;
+            vrts.push([
+                `${color} | ${scale} | ${direction}`,
+                `${getAzureUrl(combination)}`,
+            ]);
+        })
+    );
+}));
 
 function cleanURL(url) {
     return url.replace('test/visual/', '../');
diff --git a/test/visual/src/review.js b/test/visual/src/review.js
index d38e8bbfbaa..7c890967a1e 100644
--- a/test/visual/src/review.js
+++ b/test/visual/src/review.js
@@ -14,7 +14,7 @@ import '@spectrum-web-components/sidenav/sp-sidenav.js';
 import '@spectrum-web-components/sidenav/sp-sidenav-item.js';
 import '@spectrum-web-components/sidenav/sp-sidenav-heading.js';
 import '@spectrum-web-components/vrt-compare/vrt-compare.js';
-import { html, nothing, render } from 'lit-html';
+import { html, nothing, render } from '@spectrum-web-components/base';
 
 const review = document.querySelector('vrt-compare');
 const resultTypes = ['new', 'updated', 'removed', 'passed'];
diff --git a/test/visual/test.js b/test/visual/test.js
new file mode 100644
index 00000000000..26434e68499
--- /dev/null
+++ b/test/visual/test.js
@@ -0,0 +1,176 @@
+"use strict";
+import {
+  elementUpdated,
+  fixture,
+  nextFrame,
+  waitUntil
+} from "@open-wc/testing";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/story-decorator/sp-story-decorator.js";
+import { emulateMedia, sendKeys } from "@web/test-runner-commands";
+import { visualDiff } from "@web/test-runner-visual-regression";
+import { render } from "lit";
+import { ignoreResizeObserverLoopError } from "../testing-helpers.js";
+ignoreResizeObserverLoopError(before, after);
+const wrap = () => html`
+    <sp-story-decorator
+        reduce-motion
+        screenshot
+        tabindex="0"
+    ></sp-story-decorator>
+`;
+async function testReady(test2, retry = 0) {
+  await waitUntil(
+    () => test2.ready,
+    `Wait for decorator to become ready on try number ${retry + 1}`,
+    {
+      timeout: 2e4
+    }
+  );
+}
+async function ensureComponentStable(root) {
+  root.getBoundingClientRect();
+  await nextFrame();
+  try {
+    const animations = root.getAnimations({ subtree: true });
+    if (animations.length > 0) {
+      await Promise.all(
+        animations.map(
+          (a) => a.finished.catch((error) => {
+            console.warn("Animation failed:", error);
+            return void 0;
+          })
+        )
+      );
+    }
+  } catch (error) {
+    console.warn("Error while waiting for animations", error);
+  }
+  await nextFrame();
+}
+export const test = (tests, name, color, scale, dir) => {
+  Object.keys(tests).map((story) => {
+    var _a;
+    if (story !== "default" && !((_a = tests[story].swc_vrt) == null ? void 0 : _a.skip)) {
+      it(story, async () => {
+        let test2 = await fixture(wrap());
+        await elementUpdated(test2);
+        test2.focus();
+        await sendKeys({ press: "ArrowUp" });
+        await sendKeys({ press: "ArrowDown" });
+        const testsDefault = tests.default;
+        const args = {
+          ...testsDefault.args || {},
+          ...tests[story].args || {}
+        };
+        const decorators = [
+          ...tests[story].decorators || [],
+          ...testsDefault.decorators || []
+        ];
+        let decoratedStory = () => html`
+                    ${tests[story](args)}
+                `;
+        const decorate = (story2, decorator) => {
+          return () => decorator(story2, { args });
+        };
+        while (decorators.length) {
+          const decorator = decorators.shift();
+          decoratedStory = decorate(decoratedStory, decorator);
+        }
+        render(decoratedStory(), test2);
+        await testReady(test2);
+        await ensureComponentStable(test2);
+        const testName = `${color} - ${scale} - ${dir} - ${name} - ${story}`;
+        const allowedRetries = 4;
+        let retries = allowedRetries;
+        let passed = false;
+        while (retries && !passed) {
+          retries -= 1;
+          const retry = allowedRetries - retries;
+          try {
+            await visualDiff(test2, testName);
+            passed = true;
+          } catch (error) {
+            if (error.message && error.message.search(
+              "There was no baseline image to compare against."
+            ) > -1) {
+              retries = 0;
+              throw error;
+            } else {
+              test2.remove();
+              test2 = await fixture(wrap());
+              await elementUpdated(test2);
+              render(decoratedStory(), test2);
+              await testReady(test2, retry);
+              await ensureComponentStable(test2);
+              if (!retries) {
+                try {
+                  await visualDiff(test2, testName);
+                } catch (error2) {
+                  console.log(
+                    `Tried ${allowedRetries - retries} times. ${testName}`
+                  );
+                  throw error2;
+                }
+              }
+            }
+          }
+        }
+        console.log(
+          `Tried ${allowedRetries - retries} times. ${testName}`
+        );
+      });
+    }
+  });
+};
+export const regressVisuals = async (name, stories) => {
+  describe(`${name} Visual Regressions`, () => {
+    const {
+      defaultColor: color,
+      defaultScale: scale,
+      defaultDirection: dir,
+      hcm
+    } = window.__swc_hack_knobs__;
+    before(async () => {
+      var _a, _b;
+      if ((_b = (_a = stories.default) == null ? void 0 : _a.swc_vrt) == null ? void 0 : _b.preload) {
+        await stories.default.swc_vrt.preload();
+      }
+      if (hcm) {
+        await emulateMedia({
+          forcedColors: "active",
+          colorScheme: "dark"
+        });
+      }
+    });
+    after(async () => {
+      if (hcm) {
+        await emulateMedia({
+          forcedColors: "none",
+          colorScheme: "no-preference"
+        });
+      }
+    });
+    afterEach(() => {
+      const overlays = [
+        ...document.querySelectorAll("active-overlay") || []
+      ];
+      overlays.map((overlay) => overlay.remove());
+    });
+    if (color && scale && dir) {
+      test(stories, name, color, scale, dir);
+    } else {
+      const colors = ["light", "dark"];
+      const scales = ["medium", "large"];
+      const directions = ["ltr", "rtl"];
+      colors.forEach((color2) => {
+        scales.forEach((scale2) => {
+          directions.forEach((dir2) => {
+            test(stories, name, color2, scale2, dir2);
+          });
+        });
+      });
+    }
+  });
+};
+//# sourceMappingURL=test.js.map
diff --git a/test/visual/test.ts b/test/visual/test.ts
index 1a0c7aeeaf4..98f8323f1e3 100644
--- a/test/visual/test.ts
+++ b/test/visual/test.ts
@@ -137,7 +137,7 @@ async function ensureComponentStable(root: Element): Promise<void> {
  *
  * @param tests - Collection of stories to test
  * @param name - Name of the component being tested
- * @param color - Theme color (lightest, light, dark, darkest)
+ * @param color - Theme color (light, dark)
  * @param scale - Component scale (medium, large)
  * @param dir - Text direction (ltr, rtl)
  */
@@ -324,7 +324,7 @@ export const regressVisuals = async (name: string, stories: TestsType) => {
             test(stories, name, color, scale, dir);
         } else {
             // Otherwise test all combinations
-            const colors: Color[] = ['lightest', 'light', 'dark', 'darkest'];
+            const colors: Color[] = ['light', 'dark'];
             const scales: Scale[] = ['medium', 'large'];
             const directions: ('ltr' | 'rtl')[] = ['ltr', 'rtl'];
 
diff --git a/tools/base/src/directives.ts b/tools/base/src/directives.ts
index bb6a12b496b..ddd87dad5b0 100644
--- a/tools/base/src/directives.ts
+++ b/tools/base/src/directives.ts
@@ -22,3 +22,5 @@ export { join } from 'lit/directives/join.js';
 export { unsafeHTML } from 'lit/directives/unsafe-html.js';
 export type { Ref } from 'lit/directives/ref.js';
 export { createRef, ref } from 'lit/directives/ref.js';
+export { AsyncDirective } from 'lit/async-directive.js';
+export { directive } from 'lit/async-directive.js';
diff --git a/tools/grid/test/grid.test.ts b/tools/grid/test/grid.test.ts
index d0ab2a67cc1..791e75f1789 100644
--- a/tools/grid/test/grid.test.ts
+++ b/tools/grid/test/grid.test.ts
@@ -21,8 +21,7 @@ import { html } from '@spectrum-web-components/base';
 import { Card } from '@spectrum-web-components/card';
 
 import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/scale-medium.js';
-import '@spectrum-web-components/theme/theme-light.js';
+import '@spectrum-web-components/theme/core.js';
 import '@spectrum-web-components/grid/sp-grid.js';
 import { Grid } from '@spectrum-web-components/grid';
 import { Default } from '../stories/grid.stories.js';
diff --git a/tools/opacity-checkerboard/package.json b/tools/opacity-checkerboard/package.json
index 0511314f14d..c7250379387 100644
--- a/tools/opacity-checkerboard/package.json
+++ b/tools/opacity-checkerboard/package.json
@@ -22,9 +22,7 @@
     "exports": {
         ".": "./src/opacity-checkerboard.css.js",
         "./package.json": "./package.json",
-        "./src/is-opacity-checkerboard-overrides.css.js": "./src/is-opacity-checkerboard-overrides.css.js",
         "./src/is-opacity-checkerboard.css.js": "./src/is-opacity-checkerboard.css.js",
-        "./src/opacity-checkerboard-overrides.css.js": "./src/opacity-checkerboard-overrides.css.js",
         "./src/opacity-checkerboard.css.js": "./src/opacity-checkerboard.css.js"
     },
     "scripts": {
diff --git a/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/tools/opacity-checkerboard/src/is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/is-opacity-checkerboard.css
index af3d59fc40f..bbba1b07c18 100644
--- a/tools/opacity-checkerboard/src/is-opacity-checkerboard.css
+++ b/tools/opacity-checkerboard/src/is-opacity-checkerboard.css
@@ -10,5 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-is-opacity-checkerboard.css");
-@import url("./is-opacity-checkerboard-overrides.css");
+:host {
+    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%) 0 0 / 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);
+}
+
+@supports (background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg)) {
+    :host {
+        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) {
+    :host {
+        forced-color-adjust: none;
+    }
+}
diff --git a/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/tools/opacity-checkerboard/src/opacity-checkerboard.css b/tools/opacity-checkerboard/src/opacity-checkerboard.css
index 19b16614fe8..2151451d7e0 100644
--- a/tools/opacity-checkerboard/src/opacity-checkerboard.css
+++ b/tools/opacity-checkerboard/src/opacity-checkerboard.css
@@ -10,5 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("./spectrum-opacity-checkerboard.css");
-@import url("./opacity-checkerboard-overrides.css");
+.opacity-checkerboard {
+    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%) 0 0 / 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);
+}
+
+@supports (background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg)) {
+    .opacity-checkerboard {
+        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) {
+    .opacity-checkerboard {
+        forced-color-adjust: none;
+    }
+}
diff --git a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css
deleted file mode 100644
index bbba1b07c18..00000000000
--- a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
-    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%) 0 0 / 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);
-}
-
-@supports (background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg)) {
-    :host {
-        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) {
-    :host {
-        forced-color-adjust: none;
-    }
-}
diff --git a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css
deleted file mode 100644
index 2151451d7e0..00000000000
--- a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-.opacity-checkerboard {
-    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%) 0 0 / 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);
-}
-
-@supports (background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg)) {
-    .opacity-checkerboard {
-        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) {
-    .opacity-checkerboard {
-        forced-color-adjust: none;
-    }
-}
diff --git a/tools/reactive-controllers/package.json b/tools/reactive-controllers/package.json
index 32d201baa87..ae7fa765445 100644
--- a/tools/reactive-controllers/package.json
+++ b/tools/reactive-controllers/package.json
@@ -57,10 +57,6 @@
             "development": "./src/RovingTabindex.dev.js",
             "default": "./src/RovingTabindex.js"
         },
-        "./src/SystemContextResolution.js": {
-            "development": "./src/SystemContextResolution.dev.js",
-            "default": "./src/SystemContextResolution.js"
-        },
         "./src/index.js": {
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
diff --git a/tools/reactive-controllers/src/SystemContextResolution.ts b/tools/reactive-controllers/src/SystemContextResolution.ts
deleted file mode 100644
index 5ad62c5d53d..00000000000
--- a/tools/reactive-controllers/src/SystemContextResolution.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-import type { ReactiveController, ReactiveElement } from 'lit';
-import type { SystemVariant } from '@spectrum-web-components/theme';
-
-export const systemResolverUpdatedSymbol = Symbol('system resolver updated');
-
-export type ProvideSystem = {
-    callback: (system: SystemVariant, unsubscribe: () => void) => void;
-};
-
-export class SystemResolutionController implements ReactiveController {
-    private host: ReactiveElement;
-    public system: SystemVariant = 'spectrum';
-    private unsubscribe?: () => void;
-
-    constructor(host: ReactiveElement) {
-        this.host = host;
-        this.host.addController(this);
-    }
-
-    public hostConnected(): void {
-        this.resolveSystem();
-    }
-
-    public hostDisconnected(): void {
-        this.unsubscribe?.();
-    }
-
-    private resolveSystem(): void {
-        const querySystemEvent = new CustomEvent<ProvideSystem>(
-            'sp-system-context',
-            {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    callback: (
-                        system: SystemVariant,
-                        unsubscribe: () => void
-                    ) => {
-                        const previous = this.system;
-                        this.system = system;
-                        this.unsubscribe = unsubscribe;
-                        this.host.requestUpdate(
-                            systemResolverUpdatedSymbol,
-                            previous
-                        );
-                    },
-                },
-                cancelable: true,
-            }
-        );
-        this.host.dispatchEvent(querySystemEvent);
-    }
-}
diff --git a/tools/styles/all-large-dark.css b/tools/styles/all-large-dark.css
index 93816c665f2..da714479e79 100755
--- a/tools/styles/all-large-dark.css
+++ b/tools/styles/all-large-dark.css
@@ -10,7 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-@import "core-global.css";
-@import "typography.css";
-@import "theme-dark.css";
+@import "all-medium-light.css";
 @import "scale-large.css";
+
+:root,
+:host {
+    color-scheme: dark;
+}
diff --git a/tools/styles/all-large-darkest.css b/tools/styles/all-large-darkest.css
deleted file mode 100755
index 5626c31801a..00000000000
--- a/tools/styles/all-large-darkest.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "core-global.css";
-@import "typography.css";
-@import "theme-darkest.css";
-@import "scale-large.css";
diff --git a/tools/styles/all-large-light.css b/tools/styles/all-large-light.css
index fd3906e2984..35151c4b33f 100755
--- a/tools/styles/all-large-light.css
+++ b/tools/styles/all-large-light.css
@@ -10,7 +10,5 @@
  * governing permissions and limitations under the License.
  */
 
-@import "core-global.css";
-@import "typography.css";
-@import "theme-light.css";
+@import "all-medium-light.css";
 @import "scale-large.css";
diff --git a/tools/styles/all-large-lightest.css b/tools/styles/all-large-lightest.css
deleted file mode 100755
index 5d371430c21..00000000000
--- a/tools/styles/all-large-lightest.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "core-global.css";
-@import "typography.css";
-@import "theme-lightest.css";
-@import "scale-large.css";
diff --git a/tools/styles/all-medium-dark.css b/tools/styles/all-medium-dark.css
old mode 100755
new mode 100644
index fcc5a368087..04ea6d632b2
--- a/tools/styles/all-medium-dark.css
+++ b/tools/styles/all-medium-dark.css
@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-@import "core-global.css";
-@import "typography.css";
-@import "theme-dark.css";
-@import "scale-medium.css";
+@import "all-medium-light.css";
+
+:root,
+:host {
+    color-scheme: dark;
+}
diff --git a/tools/styles/all-medium-darkest.css b/tools/styles/all-medium-darkest.css
deleted file mode 100755
index d7899a2f979..00000000000
--- a/tools/styles/all-medium-darkest.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "core-global.css";
-@import "typography.css";
-@import "theme-darkest.css";
-@import "scale-medium.css";
diff --git a/tools/styles/all-medium-light.css b/tools/styles/all-medium-light.css
index 4dcb1ce3de7..2fe09dd6fe6 100755
--- a/tools/styles/all-medium-light.css
+++ b/tools/styles/all-medium-light.css
@@ -12,5 +12,3 @@
 
 @import "core-global.css";
 @import "typography.css";
-@import "theme-light.css";
-@import "scale-medium.css";
diff --git a/tools/styles/all-medium-lightest.css b/tools/styles/all-medium-lightest.css
deleted file mode 100755
index adbabefd04a..00000000000
--- a/tools/styles/all-medium-lightest.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "core-global.css";
-@import "typography.css";
-@import "theme-lightest.css";
-@import "scale-medium.css";
diff --git a/tools/styles/body.ts b/tools/styles/body.ts
index 6ada111f4e6..82107a11de7 100644
--- a/tools/styles/body.ts
+++ b/tools/styles/body.ts
@@ -11,7 +11,6 @@
  */
 
 import baseStyles from './src/spectrum-base.css.js';
-import langStyles from './src/spectrum-lang.css.js';
 import bodyStyles from './src/spectrum-body.css.js';
 
-export default [baseStyles, langStyles, bodyStyles];
+export default [baseStyles, bodyStyles];
diff --git a/tools/styles/code.ts b/tools/styles/code.ts
index eab7a1e88af..4014b6c4f1c 100644
--- a/tools/styles/code.ts
+++ b/tools/styles/code.ts
@@ -11,7 +11,6 @@
  */
 
 import baseStyles from './src/spectrum-base.css.js';
-import langStyles from './src/spectrum-lang.css.js';
 import codeStyles from './src/spectrum-code.css.js';
 
-export default [baseStyles, langStyles, codeStyles];
+export default [baseStyles, codeStyles];
diff --git a/tools/styles/core-global.css b/tools/styles/core-global.css
index 012a8a3aa57..e72617f6144 100644
--- a/tools/styles/core-global.css
+++ b/tools/styles/core-global.css
@@ -10,9 +10,2744 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./spectrum-core-global.css";
+:root,
+:host {
+    /** @deprecated Replace with --spectrum-alert-dialog-description-font-size */
+    --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s);
 
-:host,
-:root {
+    /** @deprecated Replace with --spectrum-alert-dialog-title-font-size */
+    --spectrum-alert-dialog-title-size: var(--spectrum-title-size-xl);
+
+    /** @deprecated Replace with --spectrum-coach-mark-body-font-size */
+    --spectrum-coach-mark-body-size: var(--spectrum-body-size-s);
+
+    /** @deprecated Replace with --spectrum-coach-mark-pagination-body-font-size */
+    --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs);
+
+    /** @deprecated Replace with --spectrum-coach-mark-title-font-size */
+    --spectrum-coach-mark-title-size: var(--spectrum-title-size-s);
+
+    /** @deprecated */
+    --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs);
+
+    /** @deprecated */
+    --spectrum-contextual-help-title-size: var(--spectrum-title-size-s);
+    --spectrum-drop-zone-background-color: var(--spectrum-accent-color-900);
+    --spectrum-drop-zone-body-font-size: var(--spectrum-body-size-xs);
+
+    /** @deprecated Use --spectrum-drop-zone-body-font-size instead */
+    --spectrum-drop-zone-body-size: var(--spectrum-drop-zone-body-font-size);
+    --spectrum-drop-zone-cjk-title-font-size: var(--spectrum-title-cjk-size-l);
+
+    /** @deprecated Use --spectrum-drop-zone-cjk-title-font-size instead */
+    --spectrum-drop-zone-cjk-title-size: var(--spectrum-drop-zone-cjk-title-font-size);
+    --spectrum-drop-zone-title-font-size: var(--spectrum-title-size-l);
+
+    /** @deprecated Use --spectrum-drop-zone-title-font-size instead */
+    --spectrum-drop-zone-title-size: var(--spectrum-drop-zone-title-font-size);
+    --spectrum-icon-color-informative: var(--spectrum-informative-color-900);
+    --spectrum-icon-color-negative: var(--spectrum-negative-color-900);
+    --spectrum-icon-color-neutral: var(--spectrum-gray-600);
+    --spectrum-icon-color-notice: var(--spectrum-notice-color-900);
+    --spectrum-icon-color-positive: var(--spectrum-positive-color-900);
+
+    /** @deprecated Use --spectrum-illustrated-message-medium-body-font-size instead */
+    --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs);
+
+    /** @deprecated Use --spectrum-illustrated-message-medium-cjk-title-font-size instead */
+    --spectrum-illustrated-message-cjk-title-size: var(--spectrum-title-cjk-size-xl);
+
+    /** @deprecated Use --spectrum-illustrated-message-medium-title-font-size instead */
+    --spectrum-illustrated-message-title-size: var(--spectrum-title-size-xl);
+
+    /** @deprecated */
+    --spectrum-negative-subdued-background-color-default: var(--spectrum-negative-color-300);
+    --spectrum-accent-background-color-default: light-dark(rgb(59 99 251), rgb(64 105 253));
+    --spectrum-accent-background-color-down: light-dark(rgb(39 77 234), rgb(52 91 248));
+    --spectrum-accent-background-color-hover: light-dark(rgb(39 77 234), rgb(52 91 248));
+    --spectrum-accent-background-color-key-focus: light-dark(rgb(39 77 234), rgb(52 91 248));
+    --spectrum-accent-color-100: light-dark(rgb(245 249 255), rgb(14 23 63));
+    --spectrum-accent-color-200: light-dark(rgb(229 240 254), rgb(15 28 82));
+    --spectrum-accent-color-300: light-dark(rgb(203 226 254), rgb(12 33 117));
+    --spectrum-accent-color-400: light-dark(rgb(172 207 253), rgb(18 45 154));
+    --spectrum-accent-color-500: light-dark(rgb(142 185 252), rgb(26 58 195));
+    --spectrum-accent-color-600: light-dark(rgb(114 158 253), rgb(37 73 229));
+    --spectrum-accent-color-700: light-dark(rgb(93 137 255), rgb(52 91 248));
+    --spectrum-accent-color-800: light-dark(rgb(75 117 255), rgb(64 105 253));
+    --spectrum-accent-color-900: light-dark(rgb(59 99 251), rgb(86 129 255));
+    --spectrum-accent-color-1000: light-dark(rgb(39 77 234), rgb(105 149 254));
+    --spectrum-accent-color-1100: light-dark(rgb(29 62 207), rgb(124 169 252));
+    --spectrum-accent-color-1200: light-dark(rgb(21 50 173), rgb(152 192 252));
+    --spectrum-accent-color-1300: light-dark(rgb(16 40 140), rgb(181 213 253));
+    --spectrum-accent-color-1400: light-dark(rgb(12 31 105), rgb(213 231 254));
+    --spectrum-accent-color-1500: light-dark(rgb(14 24 67), rgb(238 245 255));
+    --spectrum-accent-color-1600: light-dark(rgb(7 11 30), rgb(255 255 255));
+    --spectrum-accent-content-color-default: light-dark(rgb(59 99 251), rgb(86 129 255));
+    --spectrum-accent-content-color-down: light-dark(rgb(39 77 234), rgb(105 149 254));
+    --spectrum-accent-content-color-hover: light-dark(rgb(39 77 234), rgb(105 149 254));
+    --spectrum-accent-content-color-key-focus: light-dark(rgb(39 77 234), rgb(105 149 254));
+    --spectrum-accent-content-color-selected: light-dark(rgb(39 77 234), rgb(105 149 254));
+    --spectrum-accent-subtle-background-color-default: light-dark(rgb(229 240 254), rgb(12 33 117));
+    --spectrum-accent-visual-color: light-dark(rgb(75 117 255), rgb(86 129 255));
+    --spectrum-accordion-bottom-to-text-compact-extra-large: 8px;
+    --spectrum-accordion-bottom-to-text-compact-large: 8px;
+    --spectrum-accordion-bottom-to-text-compact-medium: 5px;
+    --spectrum-accordion-bottom-to-text-compact-small: 2px;
+    --spectrum-accordion-bottom-to-text-extra-large: 12px;
+    --spectrum-accordion-bottom-to-text-large: 11px;
+    --spectrum-accordion-bottom-to-text-medium: 9px;
+
+    /** @deprecated */
+    --spectrum-accordion-bottom-to-text-regular-extra-large: var(--spectrum-accordion-bottom-to-text-extra-large);
+
+    /** @deprecated */
+    --spectrum-accordion-bottom-to-text-regular-large: var(--spectrum-accordion-bottom-to-text-large);
+
+    /** @deprecated */
+    --spectrum-accordion-bottom-to-text-regular-medium: var(--spectrum-accordion-bottom-to-text-medium);
+
+    /** @deprecated */
+    --spectrum-accordion-bottom-to-text-regular-small: var(--spectrum-accordion-bottom-to-text-small);
+    --spectrum-accordion-bottom-to-text-small: 7px;
+    --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px;
+    --spectrum-accordion-bottom-to-text-spacious-large: 16px;
+    --spectrum-accordion-bottom-to-text-spacious-medium: 13px;
+    --spectrum-accordion-bottom-to-text-spacious-small: 11px;
+    --spectrum-accordion-content-area-bottom-to-content: 16px;
+    --spectrum-accordion-content-area-edge-to-content-extra-large: 15px;
+    --spectrum-accordion-content-area-edge-to-content-large: 12px;
+    --spectrum-accordion-content-area-edge-to-content-medium: 9px;
+    --spectrum-accordion-content-area-edge-to-content-small: 8px;
+    --spectrum-accordion-content-area-top-to-content: 8px;
+
+    /** @deprecated */
+    --spectrum-accordion-disclosure-indicator-to-text: 0px;
+    --spectrum-accordion-disclosure-indicator-to-text-extra-large: 17px;
+    --spectrum-accordion-disclosure-indicator-to-text-large: 14px;
+    --spectrum-accordion-disclosure-indicator-to-text-medium: 11px;
+    --spectrum-accordion-disclosure-indicator-to-text-small: 7px;
+    --spectrum-accordion-edge-to-content-area-extra-large: 17px;
+    --spectrum-accordion-edge-to-content-area-large: 14px;
+    --spectrum-accordion-edge-to-content-area-medium: 11px;
+    --spectrum-accordion-edge-to-content-area-small: 7px;
+
+    /** @deprecated */
+    --spectrum-accordion-edge-to-disclosure-indicator: 0px;
+    --spectrum-accordion-edge-to-text: 0px;
+    --spectrum-accordion-focus-indicator-gap: 0px;
+    --spectrum-accordion-item-to-divider: 0px;
+    --spectrum-accordion-minimum-width: 200px;
+
+    /** @deprecated Introduced as an error. Use --spectrum-accordion-top-to-text-spacious-small instead */
+    --spectrum-accordion-small-top-to-text-spacious: 9px;
+    --spectrum-accordion-top-to-text-compact-extra-large: 8px;
+    --spectrum-accordion-top-to-text-compact-large: 8px;
+    --spectrum-accordion-top-to-text-compact-medium: 8px;
+    --spectrum-accordion-top-to-text-compact-small: 3px;
+    --spectrum-accordion-top-to-text-extra-large: 13px;
+    --spectrum-accordion-top-to-text-large: 12px;
+    --spectrum-accordion-top-to-text-medium: 12px;
+
+    /** @deprecated */
+    --spectrum-accordion-top-to-text-regular-extra-large: var(--spectrum-accordion-top-to-text-extra-large);
+
+    /** @deprecated */
+    --spectrum-accordion-top-to-text-regular-large: var(--spectrum-accordion-top-to-text-large);
+
+    /** @deprecated */
+    --spectrum-accordion-top-to-text-regular-medium: var(--spectrum-accordion-top-to-text-medium);
+
+    /** @deprecated */
+    --spectrum-accordion-top-to-text-regular-small: var(--spectrum-accordion-top-to-text-small);
+    --spectrum-accordion-top-to-text-small: 7px;
+    --spectrum-accordion-top-to-text-spacious-extra-large: 17px;
+    --spectrum-accordion-top-to-text-spacious-large: 16px;
+    --spectrum-accordion-top-to-text-spacious-medium: 16px;
+    --spectrum-accordion-top-to-text-spacious-small: 11px;
+    --spectrum-action-bar-border-color: light-dark(var(--spectrum-transparent-white-25), rgb(68 68 68));
+    --spectrum-action-bar-bottom-to-content-area: var(--spectrum-spacing-200);
+    --spectrum-action-bar-close-button-to-counter: var(--spectrum-text-to-control-50);
+    --spectrum-action-bar-counter-font-size: var(--spectrum-font-size-100);
+    --spectrum-action-bar-edge-to-content-area: var(--spectrum-spacing-100);
+    --spectrum-action-bar-height: var(--spectrum-component-height-400);
+    --spectrum-action-bar-label-to-action-group-area: var(--spectrum-spacing-300);
+    --spectrum-action-bar-minimum-width: 176px;
+    --spectrum-action-bar-top-to-content-area: var(--spectrum-spacing-200);
+    --spectrum-action-bar-top-to-item-counter: var(--spectrum-component-top-to-text-300);
+    --spectrum-action-button-edge-to-hold-icon-extra-large: 6px;
+    --spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
+    --spectrum-action-button-edge-to-hold-icon-large: 5px;
+    --spectrum-action-button-edge-to-hold-icon-medium: 4px;
+    --spectrum-action-button-edge-to-hold-icon-small: 3px;
+    --spectrum-add-icon-size-50: 8px;
+    --spectrum-add-icon-size-75: 8px;
+    --spectrum-add-icon-size-100: 10px;
+    --spectrum-add-icon-size-200: 12px;
+    --spectrum-add-icon-size-300: 12px;
+    --spectrum-alert-banner-bottom-to-text: 20px;
+    --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-minimum-height: 56px;
+    --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
+
+    /** @deprecated Introduced as an error. Use --spectrum-alert-banner-bottom-to-text instead */
+    --spectrum-alert-banner-to-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
+
+    /** @deprecated Introduced as an error. Use --spectrum-alert-banner-top-to-text instead */
+    --spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text);
+
+    /** @deprecated Introduced as an error. Use --spectrum-alert-banner-top-to-workflow-icon instead */
+    --spectrum-alert-banner-to-top-workflow-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
+    --spectrum-alert-banner-top-to-alert-icon: 37px;
+    --spectrum-alert-banner-top-to-text: 18px;
+    --spectrum-alert-banner-top-to-workflow-icon: 18px;
+    --spectrum-alert-banner-width: 832px;
+    --spectrum-alert-dialog-description-font-size: var(--spectrum-body-size-m);
+    --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
+    --spectrum-alert-dialog-maximum-width: 480px;
+    --spectrum-alert-dialog-minimum-width: 288px;
+    --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
+    --spectrum-alert-dialog-title-font-size: var(--spectrum-title-size-xxl);
+    --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: 3500ms;
+    --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: cubic-bezier(0.5, 0, 1, 1);
+    --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
+    --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
+    --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
+    --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
+    --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-assestcard-focus-indicator-color: light-dark(rgb(75 117 255), rgb(52 91 248));
+    --spectrum-assetcard-border-color-selected: light-dark(rgb(59 99 251), rgb(64 105 253));
+    --spectrum-assetcard-border-color-selected-down: light-dark(rgb(39 77 234), rgb(86 129 255));
+    --spectrum-assetcard-border-color-selected-hover: light-dark(rgb(59 99 251), rgb(64 105 253));
+    --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-background-color-ordered: light-dark(rgb(59 99 251), rgb(64 105 253));
+    --spectrum-assetcard-selectionindicator-margin: 12px;
+    --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
+    --spectrum-assetlist-border-color-key-focus: light-dark(rgb(75 117 255), rgb(52 91 248));
+    --spectrum-assetlist-item-background-color-selected: color-mix(in sRGB, var(--spectrum-blue-900) 10%, transparent);
+    --spectrum-assetlist-item-background-color-selected-hover: color-mix(in sRGB, var(--spectrum-blue-900) 20%, transparent);
+    --spectrum-asterisk-icon-size-75: 8px;
+    --spectrum-asterisk-icon-size-100: 8px;
+    --spectrum-asterisk-icon-size-200: 10px;
+    --spectrum-asterisk-icon-size-300: 10px;
+    --spectrum-avatar-border-color: light-dark(rgb(255 255 255), rgb(17 17 17));
+    --spectrum-avatar-border-width: var(--spectrum-border-width-100);
+    --spectrum-avatar-group-size-50: var(--spectrum-avatar-size-50);
+    --spectrum-avatar-group-size-75: var(--spectrum-avatar-size-75);
+    --spectrum-avatar-group-size-100: var(--spectrum-avatar-size-100);
+    --spectrum-avatar-group-size-200: var(--spectrum-avatar-size-200);
+    --spectrum-avatar-group-size-300: var(--spectrum-avatar-size-300);
+    --spectrum-avatar-group-size-400: var(--spectrum-avatar-size-400);
+    --spectrum-avatar-group-size-500: var(--spectrum-avatar-size-500);
+    --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled);
+    --spectrum-avatar-size-50: 16px;
+    --spectrum-avatar-size-75: 20px;
+    --spectrum-avatar-size-100: 24px;
+    --spectrum-avatar-size-200: 28px;
+    --spectrum-avatar-size-300: 32px;
+    --spectrum-avatar-size-400: 36px;
+    --spectrum-avatar-size-500: 40px;
+    --spectrum-avatar-size-600: 44px;
+    --spectrum-avatar-size-700: 48px;
+    --spectrum-avatar-size-800: 52px;
+    --spectrum-avatar-size-900: 56px;
+    --spectrum-avatar-size-1000: 64px;
+    --spectrum-avatar-size-1100: 72px;
+    --spectrum-avatar-size-1200: 80px;
+    --spectrum-avatar-size-1300: 88px;
+    --spectrum-avatar-size-1400: 96px;
+    --spectrum-avatar-size-1500: 104px;
+    --spectrum-avatar-to-avatar-50: -4px;
+    --spectrum-avatar-to-avatar-75: -5px;
+    --spectrum-avatar-to-avatar-100: -6px;
+    --spectrum-avatar-to-avatar-200: -7px;
+    --spectrum-avatar-to-avatar-300: -8px;
+    --spectrum-avatar-to-avatar-400: -9px;
+    --spectrum-avatar-to-avatar-500: -10px;
+    --spectrum-background-base-color: light-dark(rgb(255 255 255), rgb(17 17 17));
+    --spectrum-background-elevated-color: light-dark(rgb(255 255 255), rgb(34 34 34));
+    --spectrum-background-layer-1-color: light-dark(rgb(248 248 248), rgb(27 27 27));
+    --spectrum-background-layer-2-color: light-dark(rgb(255 255 255), rgb(34 34 34));
+    --spectrum-background-opacity-default: 0%;
+    --spectrum-background-opacity-down: 10%;
+    --spectrum-background-opacity-hover: 10%;
+    --spectrum-background-opacity-key-focus: 10%;
+    --spectrum-background-pasteboard-color: light-dark(rgb(233 233 233), rgb(17 17 17));
+    --spectrum-badge-label-icon-color-primary: light-dark(var(--spectrum-white), var(--spectrum-black));
+    --spectrum-bar-panel-gripper-color: light-dark(rgb(225 225 225), rgb(50 50 50));
+    --spectrum-bar-panel-gripper-color-drag: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-bar-panel-maximum-width: 72px;
+    --spectrum-bar-panel-minimum-width: 40px;
+    --spectrum-bar-panel-spacing-extra-spacious: 20px;
+    --spectrum-bar-panel-width: 56px;
+    --spectrum-black: rgb(0 0 0);
+    --spectrum-black-font-weight: 900;
+    --spectrum-blue-100: light-dark(rgb(245 249 255), rgb(14 23 63));
+    --spectrum-blue-200: light-dark(rgb(229 240 254), rgb(15 28 82));
+    --spectrum-blue-300: light-dark(rgb(203 226 254), rgb(12 33 117));
+    --spectrum-blue-400: light-dark(rgb(172 207 253), rgb(18 45 154));
+    --spectrum-blue-500: light-dark(rgb(142 185 252), rgb(26 58 195));
+    --spectrum-blue-600: light-dark(rgb(114 158 253), rgb(37 73 229));
+    --spectrum-blue-700: light-dark(rgb(93 137 255), rgb(52 91 248));
+    --spectrum-blue-800: light-dark(rgb(75 117 255), rgb(64 105 253));
+    --spectrum-blue-900: light-dark(rgb(59 99 251), rgb(86 129 255));
+    --spectrum-blue-1000: light-dark(rgb(39 77 234), rgb(105 149 254));
+    --spectrum-blue-1100: light-dark(rgb(29 62 207), rgb(124 169 252));
+    --spectrum-blue-1200: light-dark(rgb(21 50 173), rgb(152 192 252));
+    --spectrum-blue-1300: light-dark(rgb(16 40 140), rgb(181 213 253));
+    --spectrum-blue-1400: light-dark(rgb(12 31 105), rgb(213 231 254));
+    --spectrum-blue-1500: light-dark(rgb(14 24 67), rgb(238 245 255));
+    --spectrum-blue-1600: light-dark(rgb(7 11 30), rgb(255 255 255));
+    --spectrum-blue-background-color-default: light-dark(rgb(59 99 251), rgb(64 105 253));
+    --spectrum-blue-subtle-background-color-default: light-dark(rgb(229 240 254), rgb(12 33 117));
+    --spectrum-blue-visual-color: light-dark(rgb(75 117 255), rgb(86 129 255));
+    --spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-body-cjk-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family);
+    --spectrum-body-cjk-font-style: var(--spectrum-default-font-style);
+    --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200);
+    --spectrum-body-cjk-size-l: var(--spectrum-font-size-200);
+    --spectrum-body-cjk-size-m: var(--spectrum-font-size-100);
+    --spectrum-body-cjk-size-s: var(--spectrum-font-size-75);
+    --spectrum-body-cjk-size-xl: var(--spectrum-font-size-300);
+    --spectrum-body-cjk-size-xs: var(--spectrum-font-size-50);
+    --spectrum-body-cjk-size-xxl: var(--spectrum-font-size-400);
+    --spectrum-body-cjk-size-xxs: var(--spectrum-font-size-25);
+    --spectrum-body-cjk-size-xxxl: var(--spectrum-font-size-500);
+    --spectrum-body-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-body-cjk-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-body-cjk-strong-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-body-color: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-body-line-height: var(--spectrum-line-height-200);
+    --spectrum-body-margin-multiplier: 0.75;
+    --spectrum-body-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-body-sans-serif-emphasized-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-body-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
+    --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style);
+    --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-body-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-body-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-body-sans-serif-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-body-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-body-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-body-serif-emphasized-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-body-serif-font-family: var(--spectrum-serif-font-family);
+    --spectrum-body-serif-font-style: var(--spectrum-default-font-style);
+    --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-body-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-font-style: var(--spectrum-default-font-style);
+    --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight);
+    --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-xl: var(--spectrum-font-size-400);
+    --spectrum-body-size-xs: var(--spectrum-font-size-75);
+    --spectrum-body-size-xxl: var(--spectrum-font-size-500);
+    --spectrum-body-size-xxs: var(--spectrum-font-size-50);
+    --spectrum-body-size-xxxl: var(--spectrum-font-size-600);
+    --spectrum-bold-font-weight: 700;
+    --spectrum-border-width-100: 1px;
+    --spectrum-border-width-200: 2px;
+    --spectrum-border-width-400: 4px;
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-bottom-to-text-compact: var(--spectrum-component-bottom-to-text-100);
+    --spectrum-breadcrumbs-bottom-to-text-multiline: 9px;
+    --spectrum-breadcrumbs-end-edge-to-text: 0px;
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-height: var(--spectrum-component-height-200);
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-100);
+    --spectrum-breadcrumbs-height-multiline: 72px;
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline);
+    --spectrum-breadcrumbs-separator-to-bottom-text-multiline: 11px;
+
+    /** @deprecated Use a sized token instead, e.g., --spectrum-breadcrumbs-start-edge-to-text-large. */
+    --spectrum-breadcrumbs-start-edge-to-text: var(--spectrum-breadcrumbs-start-edge-to-text-large);
+    --spectrum-breadcrumbs-start-edge-to-text-large: 9px;
+    --spectrum-breadcrumbs-start-edge-to-text-medium: 6px;
+    --spectrum-breadcrumbs-start-edge-to-text-multiline: 4px;
+    --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px;
+    --spectrum-breadcrumbs-text-to-separator-large: 9px;
+    --spectrum-breadcrumbs-text-to-separator-medium: 6px;
+    --spectrum-breadcrumbs-text-to-separator-multiline: 4px;
+    --spectrum-breadcrumbs-top-text-to-bottom-text: 9px;
+
+    /** @deprecated Use a sized token instead, e.g., --spectrum-breadcrumbs-top-to-separator-large. */
+    --spectrum-breadcrumbs-top-to-separator-icon: var(--spectrum-breadcrumbs-top-to-separator-large);
+
+    /** @deprecated Use a sized token instead, e.g., --spectrum-breadcrumbs-top-to-separator-medium. */
+    --spectrum-breadcrumbs-top-to-separator-icon-compact: var(--spectrum-breadcrumbs-top-to-separator-medium);
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-top-to-separator-icon-multiline: var(--spectrum-breadcrumbs-top-to-separator-multiline);
+    --spectrum-breadcrumbs-top-to-separator-large: 15px;
+    --spectrum-breadcrumbs-top-to-separator-medium: 11px;
+    --spectrum-breadcrumbs-top-to-separator-multiline: 7px;
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-top-to-text: var(--spectrum-component-top-to-text-200);
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-top-to-text-compact: var(--spectrum-component-top-to-text-100);
+    --spectrum-breadcrumbs-top-to-text-multiline: 4px;
+    --spectrum-breadcrumbs-top-to-truncated-menu: 0px;
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-top-to-truncated-menu-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu);
+    --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 4px;
+    --spectrum-breadcrumbs-truncated-menu-to-separator: 0px;
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-truncated-menu-to-separator-icon: var(--spectrum-breadcrumbs-truncated-menu-to-separator);
+    --spectrum-brown-100: light-dark(rgb(252 247 242), rgb(35 24 8));
+    --spectrum-brown-200: light-dark(rgb(247 238 225), rgb(44 31 11));
+    --spectrum-brown-300: light-dark(rgb(239 221 195), rgb(58 40 14));
+    --spectrum-brown-400: light-dark(rgb(229 200 157), rgb(78 55 19));
+    --spectrum-brown-500: light-dark(rgb(214 177 123), rgb(98 71 30));
+    --spectrum-brown-600: light-dark(rgb(190 155 104), rgb(115 88 47));
+    --spectrum-brown-700: light-dark(rgb(171 138 90), rgb(132 104 61));
+    --spectrum-brown-800: light-dark(rgb(154 123 77), rgb(143 114 69));
+    --spectrum-brown-900: light-dark(rgb(139 109 66), rgb(163 132 84));
+    --spectrum-brown-1000: light-dark(rgb(119 91 50), rgb(181 147 98));
+    --spectrum-brown-1100: light-dark(rgb(103 76 35), rgb(199 163 112));
+    --spectrum-brown-1200: light-dark(rgb(88 61 21), rgb(222 185 130));
+    --spectrum-brown-1300: light-dark(rgb(70 49 17), rgb(232 207 169));
+    --spectrum-brown-1400: light-dark(rgb(52 37 13), rgb(242 227 206));
+    --spectrum-brown-1500: light-dark(rgb(38 26 9), rgb(250 244 236));
+    --spectrum-brown-1600: light-dark(rgb(16 12 4), rgb(255 255 255));
+    --spectrum-brown-background-color-default: light-dark(rgb(139 109 66), rgb(143 114 69));
+    --spectrum-brown-subtle-background-color-default: light-dark(rgb(247 238 225), rgb(58 40 14));
+    --spectrum-brown-visual-color: light-dark(rgb(154 123 77), rgb(163 132 84));
+    --spectrum-button-bottom-to-text-extra-large: 13px;
+    --spectrum-button-bottom-to-text-large: 10px;
+    --spectrum-button-bottom-to-text-medium: 8px;
+    --spectrum-button-bottom-to-text-small: 4px;
+    --spectrum-button-minimum-width-multiplier: 2.25;
+    --spectrum-button-top-to-text-extra-large: 13px;
+    --spectrum-button-top-to-text-large: 10px;
+    --spectrum-button-top-to-text-medium: 7px;
+    --spectrum-button-top-to-text-small: 5px;
+    --spectrum-calendar-day-background-color-cap-selected: color-mix(in sRGB, var(--spectrum-blue-900) 20%, transparent);
+    --spectrum-calendar-day-background-color-down: light-dark(var(--spectrum-transparent-black-200), var(--spectrum-transparent-white-200));
+    --spectrum-calendar-day-background-color-hover: color-mix(in sRGB, var(--spectrum-black) 6%, transparent);
+    --spectrum-calendar-day-background-color-key-focus: color-mix(in sRGB, var(--spectrum-black) 6%, transparent);
+    --spectrum-calendar-day-background-color-selected: color-mix(in sRGB, var(--spectrum-blue-900) 10%, transparent);
+    --spectrum-calendar-day-background-color-selected-hover: color-mix(in sRGB, var(--spectrum-blue-900) 20%, transparent);
+    --spectrum-calendar-day-border-color-key-focus: light-dark(rgb(75 117 255), rgb(52 91 248));
+    --spectrum-calendar-day-today-background-color-selected-hover: color-mix(in sRGB, var(--spectrum-blue-900) 20%, transparent);
+    --spectrum-card-background-loading-color: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-card-background-well-color: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-card-default-width-extra-large: 400px;
+    --spectrum-card-default-width-extra-small: 120px;
+    --spectrum-card-default-width-large: 320px;
+    --spectrum-card-default-width-medium: 240px;
+    --spectrum-card-default-width-small: 180px;
+    --spectrum-card-description-to-footer: var(--spectrum-spacing-300);
+    --spectrum-card-edge-to-content-compact-extra-large: 20px;
+    --spectrum-card-edge-to-content-compact-extra-small: 6px;
+    --spectrum-card-edge-to-content-compact-large: 16px;
+    --spectrum-card-edge-to-content-compact-medium: 12px;
+    --spectrum-card-edge-to-content-compact-small: 8px;
+    --spectrum-card-edge-to-content-default-extra-large: 24px;
+    --spectrum-card-edge-to-content-default-extra-small: 8px;
+    --spectrum-card-edge-to-content-default-large: 20px;
+    --spectrum-card-edge-to-content-default-medium: 16px;
+    --spectrum-card-edge-to-content-default-small: 12px;
+    --spectrum-card-edge-to-content-spacious-extra-large: 28px;
+    --spectrum-card-edge-to-content-spacious-extra-small: 12px;
+    --spectrum-card-edge-to-content-spacious-large: 24px;
+    --spectrum-card-edge-to-content-spacious-medium: 20px;
+    --spectrum-card-edge-to-content-spacious-small: 16px;
+    --spectrum-card-header-to-description: var(--spectrum-spacing-75);
+    --spectrum-card-horizontal-edge-to-content-compact: 12px;
+    --spectrum-card-horizontal-edge-to-content-default: 16px;
+    --spectrum-card-horizontal-edge-to-content-spacious: 20px;
+    --spectrum-card-maximum-width-extra-large: 460px;
+    --spectrum-card-maximum-width-extra-small: 140px;
+    --spectrum-card-maximum-width-large: 370px;
+    --spectrum-card-maximum-width-medium: 280px;
+    --spectrum-card-maximum-width-small: 210px;
+    --spectrum-card-minimum-height-extra-large: 300px;
+    --spectrum-card-minimum-height-extra-small: 90px;
+    --spectrum-card-minimum-height-large: 240px;
+    --spectrum-card-minimum-height-medium: 180px;
+    --spectrum-card-minimum-height-small: 135px;
+    --spectrum-card-minimum-width: 100px;
+    --spectrum-card-minimum-width-extra-large: 340px;
+    --spectrum-card-minimum-width-extra-small: 100px;
+    --spectrum-card-minimum-width-large: 270px;
+    --spectrum-card-minimum-width-medium: 200px;
+    --spectrum-card-minimum-width-small: 150px;
+    --spectrum-card-preview-minimum-height: 130px;
+    --spectrum-card-selected-background-color: light-dark(rgb(59 99 251), rgb(26 58 195));
+    --spectrum-card-selection-background-color: light-dark(var(--spectrum-transparent-white-600), var(--spectrum-transparent-black-600));
+    --spectrum-card-selection-background-color-opacity: 95%;
+    --spectrum-card-selection-background-size: 40px;
+    --spectrum-card-selection-background-size-extra-large: 28px;
+    --spectrum-card-selection-background-size-large: 26px;
+    --spectrum-card-selection-background-size-medium: 24px;
+    --spectrum-card-selection-background-size-small: 22px;
+    --spectrum-celery-100: light-dark(rgb(235 255 220), rgb(11 31 0));
+    --spectrum-celery-200: light-dark(rgb(197 255 156), rgb(15 38 0));
+    --spectrum-celery-300: light-dark(rgb(157 247 92), rgb(21 51 1));
+    --spectrum-celery-400: light-dark(rgb(129 228 58), rgb(31 67 4));
+    --spectrum-celery-500: light-dark(rgb(110 206 42), rgb(41 86 8));
+    --spectrum-celery-600: light-dark(rgb(93 180 31), rgb(50 105 11));
+    --spectrum-celery-700: light-dark(rgb(82 161 25), rgb(60 122 15));
+    --spectrum-celery-800: light-dark(rgb(72 144 20), rgb(66 134 18));
+    --spectrum-celery-900: light-dark(rgb(64 129 17), rgb(78 154 23));
+    --spectrum-celery-1000: light-dark(rgb(52 109 12), rgb(88 172 28));
+    --spectrum-celery-1100: light-dark(rgb(44 92 9), rgb(100 190 35));
+    --spectrum-celery-1200: light-dark(rgb(35 75 6), rgb(116 213 46));
+    --spectrum-celery-1300: light-dark(rgb(27 60 3), rgb(136 234 65));
+    --spectrum-celery-1400: light-dark(rgb(19 46 0), rgb(170 251 112));
+    --spectrum-celery-1500: light-dark(rgb(12 33 0), rgb(222 255 198));
+    --spectrum-celery-1600: light-dark(rgb(4 15 0), rgb(255 255 255));
+    --spectrum-celery-background-color-default: light-dark(rgb(93 180 31), rgb(78 154 23));
+    --spectrum-celery-subtle-background-color-default: light-dark(rgb(197 255 156), rgb(21 51 1));
+    --spectrum-celery-visual-color: light-dark(rgb(82 161 25), rgb(66 134 18));
+
+    /** @deprecated */
+    --spectrum-character-count-to-field-quiet-extra-large: -4px;
+
+    /** @deprecated */
+    --spectrum-character-count-to-field-quiet-large: -3px;
+
+    /** @deprecated */
+    --spectrum-character-count-to-field-quiet-medium: -3px;
+
+    /** @deprecated */
+    --spectrum-character-count-to-field-quiet-small: -3px;
+    --spectrum-chartreuse-100: light-dark(rgb(246 251 222), rgb(23 28 0));
+    --spectrum-chartreuse-200: light-dark(rgb(234 246 173), rgb(30 36 0));
+    --spectrum-chartreuse-300: light-dark(rgb(208 236 70), rgb(39 47 0));
+    --spectrum-chartreuse-400: light-dark(rgb(182 219 0), rgb(53 63 0));
+    --spectrum-chartreuse-500: light-dark(rgb(163 196 0), rgb(68 82 0));
+    --spectrum-chartreuse-600: light-dark(rgb(143 172 0), rgb(83 100 0));
+    --spectrum-chartreuse-700: light-dark(rgb(128 153 0), rgb(97 116 0));
+    --spectrum-chartreuse-800: light-dark(rgb(114 137 0), rgb(106 127 0));
+    --spectrum-chartreuse-900: light-dark(rgb(102 122 0), rgb(122 147 0));
+    --spectrum-chartreuse-1000: light-dark(rgb(86 103 0), rgb(136 164 0));
+    --spectrum-chartreuse-1100: light-dark(rgb(73 87 0), rgb(151 181 0));
+    --spectrum-chartreuse-1200: light-dark(rgb(60 71 0), rgb(169 203 0));
+    --spectrum-chartreuse-1300: light-dark(rgb(47 57 0), rgb(187 225 0));
+    --spectrum-chartreuse-1400: light-dark(rgb(35 43 0), rgb(219 240 117));
+    --spectrum-chartreuse-1500: light-dark(rgb(25 30 0), rgb(242 249 206));
+    --spectrum-chartreuse-1600: light-dark(rgb(11 14 0), rgb(255 255 255));
+    --spectrum-chartreuse-background-color-default: light-dark(rgb(163 196 0), rgb(136 164 0));
+    --spectrum-chartreuse-subtle-background-color-default: light-dark(rgb(234 246 173), rgb(39 47 0));
+    --spectrum-chartreuse-visual-color: light-dark(rgb(143 172 0), rgb(122 147 0));
+    --spectrum-checkbox-control-size-extra-large: 20px;
+    --spectrum-checkbox-control-size-large: 18px;
+    --spectrum-checkbox-control-size-medium: 16px;
+    --spectrum-checkbox-control-size-small: 14px;
+    --spectrum-checkbox-top-to-control-extra-large: 14px;
+    --spectrum-checkbox-top-to-control-large: 11px;
+    --spectrum-checkbox-top-to-control-medium: 8px;
+    --spectrum-checkbox-top-to-control-small: 5px;
+    --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-cinnamon-100: light-dark(rgb(253 247 243), rgb(48 17 4));
+    --spectrum-cinnamon-200: light-dark(rgb(249 236 229), rgb(59 21 5));
+    --spectrum-cinnamon-300: light-dark(rgb(244 218 203), rgb(79 28 7));
+    --spectrum-cinnamon-400: light-dark(rgb(237 196 172), rgb(100 41 15));
+    --spectrum-cinnamon-500: light-dark(rgb(229 170 136), rgb(122 57 28));
+    --spectrum-cinnamon-600: light-dark(rgb(212 145 108), rgb(143 74 40));
+    --spectrum-cinnamon-700: light-dark(rgb(198 126 88), rgb(163 88 52));
+    --spectrum-cinnamon-800: light-dark(rgb(184 109 70), rgb(176 98 59));
+    --spectrum-cinnamon-900: light-dark(rgb(170 94 56), rgb(192 119 80));
+    --spectrum-cinnamon-1000: light-dark(rgb(147 77 43), rgb(206 136 99));
+    --spectrum-cinnamon-1100: light-dark(rgb(128 62 32), rgb(220 154 118));
+    --spectrum-cinnamon-1200: light-dark(rgb(110 48 21), rgb(232 179 149));
+    --spectrum-cinnamon-1300: light-dark(rgb(92 35 11), rgb(239 203 183));
+    --spectrum-cinnamon-1400: light-dark(rgb(72 25 6), rgb(246 225 214));
+    --spectrum-cinnamon-1500: light-dark(rgb(52 18 4), rgb(252 244 239));
+    --spectrum-cinnamon-1600: light-dark(rgb(24 8 2), rgb(255 255 255));
+    --spectrum-cinnamon-background-color-default: light-dark(rgb(170 94 56), rgb(176 98 59));
+    --spectrum-cinnamon-subtle-background-color-default: light-dark(rgb(249 236 229), rgb(79 28 7));
+    --spectrum-cinnamon-visual-color: light-dark(rgb(184 109 70), rgb(192 119 80));
+    --spectrum-cjk-font: var(--spectrum-cjk-font-family-stack);
+    --spectrum-cjk-font-family: adobe clean han;
+    --spectrum-cjk-font-family-stack: adobe-clean-han-japanese;
+    --spectrum-cjk-letter-spacing: var(--spectrum-letter-spacing);
+    --spectrum-cjk-line-height-100: 1.5;
+    --spectrum-cjk-line-height-200: 1.7;
+    --spectrum-coach-indicator-collapsed-gap: 2px;
+    --spectrum-coach-indicator-collapsed-ring-rounding-increment: 6px;
+    --spectrum-coach-indicator-collapsed-ring-thickness: 4px;
+    --spectrum-coach-indicator-color: light-dark(rgb(75 117 255), rgb(64 105 253));
+    --spectrum-coach-indicator-expanded-gap: 6px;
+    --spectrum-coach-indicator-expanded-ring-rounding-increment: 14px;
+    --spectrum-coach-indicator-expanded-ring-thickness: 8px;
+    --spectrum-coach-indicator-gap: 6px;
+    --spectrum-coach-indicator-opacity: 20%;
+    --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
+    --spectrum-coach-indicator-ring-default-color: light-dark(rgb(75 117 255), rgb(52 91 248));
+    --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
+    --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
+    --spectrum-coach-mark-body-font-size: var(--spectrum-body-size-m);
+    --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400);
+    --spectrum-coach-mark-maximum-width: 380px;
+    --spectrum-coach-mark-media-height: 222px;
+    --spectrum-coach-mark-media-minimum-height: 166px;
+    --spectrum-coach-mark-minimum-width: 296px;
+    --spectrum-coach-mark-pagination-body-font-size: var(--spectrum-body-size-s);
+    --spectrum-coach-mark-pagination-color: light-dark(rgb(113 113 113), rgb(138 138 138));
+    --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px;
+    --spectrum-coach-mark-title-font-size: var(--spectrum-title-size-m);
+    --spectrum-coach-mark-width: 296px;
+    --spectrum-coachmark-action-menu-vertical-offset: -4px;
+    --spectrum-coachmark-buttongroup-display: flex;
+    --spectrum-coachmark-buttongroup-mobile-display: none;
+    --spectrum-coachmark-menu-display: inline-flex;
+    --spectrum-coachmark-menu-mobile-display: none;
+    --spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-code-cjk-font-family: var(--spectrum-code-font-family);
+    --spectrum-code-cjk-font-style: var(--spectrum-default-font-style);
+    --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200);
+    --spectrum-code-cjk-size-l: var(--spectrum-code-size-l);
+    --spectrum-code-cjk-size-m: var(--spectrum-code-size-m);
+    --spectrum-code-cjk-size-s: var(--spectrum-code-size-s);
+    --spectrum-code-cjk-size-xl: var(--spectrum-code-size-xl);
+    --spectrum-code-cjk-size-xs: var(--spectrum-code-size-xs);
+    --spectrum-code-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-code-cjk-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-code-cjk-strong-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-code-color: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-code-font-family: source code pro;
+    --spectrum-code-font-family-stack: "Source Code Pro", monaco, monospace;
+    --spectrum-code-font-style: var(--spectrum-default-font-style);
+    --spectrum-code-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-code-line-height: var(--spectrum-line-height-200);
+    --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-xl: var(--spectrum-font-size-400);
+    --spectrum-code-size-xs: var(--spectrum-font-size-75);
+    --spectrum-code-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-code-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-code-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-collection-card-minimum-height-extra-large: 249px;
+    --spectrum-collection-card-minimum-height-extra-small: 88px;
+    --spectrum-collection-card-minimum-height-hero-extra-large: 514px;
+    --spectrum-collection-card-minimum-height-hero-extra-small: 168px;
+    --spectrum-collection-card-minimum-height-hero-large: 414px;
+    --spectrum-collection-card-minimum-height-hero-medium: 317px;
+    --spectrum-collection-card-minimum-height-hero-small: 243px;
+    --spectrum-collection-card-minimum-height-large: 202px;
+    --spectrum-collection-card-minimum-height-medium: 157px;
+    --spectrum-collection-card-minimum-height-small: 124px;
+    --spectrum-color-area-border-color: light-dark(rgb(0 0 0), rgb(255 255 255));
+    --spectrum-color-area-border-opacity: 10%;
+    --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-medium-size-small);
+    --spectrum-color-area-border-width: var(--spectrum-border-width-100);
+    --spectrum-color-area-height: 192px;
+    --spectrum-color-area-minimum-height: 64px;
+    --spectrum-color-area-minimum-width: 64px;
+    --spectrum-color-area-width: 192px;
+    --spectrum-color-control-track-width: 24px;
+    --spectrum-color-handle-border-width: var(--spectrum-border-width-200);
+    --spectrum-color-handle-drop-shadow-blur: 0;
+
+    /** @deprecated Express does not need a separate design for Color loupe and Color handle components */
+    --spectrum-color-handle-drop-shadow-color: light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 36%));
+    --spectrum-color-handle-drop-shadow-x: 0;
+    --spectrum-color-handle-drop-shadow-y: 0;
+    --spectrum-color-handle-inner-border-color: var(--spectrum-black);
+    --spectrum-color-handle-inner-border-opacity: 42%;
+    --spectrum-color-handle-inner-border-width: 1px;
+    --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-outer-border-width: 1px;
+    --spectrum-color-handle-size: 16px;
+    --spectrum-color-handle-size-key-focus: 32px;
+    --spectrum-color-loupe-bottom-to-color-handle: 12px;
+
+    /** @deprecated */
+    --spectrum-color-loupe-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
+
+    /** @deprecated Use `--spectrum-drop-shadow-elevated-color` instead */
+    --spectrum-color-loupe-drop-shadow-color: light-dark(rgb(0 0 0 / 16%), rgb(0 0 0 / 48%));
+
+    /** @deprecated */
+    --spectrum-color-loupe-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y);
+    --spectrum-color-loupe-height: 64px;
+    --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200);
+    --spectrum-color-loupe-inner-border-width: 1px;
+    --spectrum-color-loupe-outer-border: var(--spectrum-white);
+    --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200);
+    --spectrum-color-loupe-width: 48px;
+    --spectrum-color-slider-border-color: light-dark(rgb(0 0 0), rgb(255 255 255));
+    --spectrum-color-slider-border-opacity: 10%;
+    --spectrum-color-slider-border-rounding: var(--spectrum-corner-radius-medium-size-small);
+    --spectrum-color-slider-border-width: 1px;
+    --spectrum-color-slider-length: 192px;
+    --spectrum-color-slider-minimum-length: 80px;
+    --spectrum-color-wheel-border-color: light-dark(rgb(0 0 0), rgb(255 255 255));
+    --spectrum-color-wheel-border-opacity: 10%;
+    --spectrum-color-wheel-color-area-margin: 12px;
+    --spectrum-color-wheel-minimum-width: 175px;
+    --spectrum-color-wheel-width: 192px;
+    --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-combo-box-minimum-width-multiplier: 2.5;
+
+    /** @deprecated */
+    --spectrum-combo-box-quiet-minimum-width-multiplier: 2;
+    --spectrum-combo-box-visual-to-field-button: 0px;
+
+    /** @deprecated Replaced with --spectrum-combo-box-visual-to-field-button */
+    --spectrum-combo-box-visual-to-field-button-extra-large: var(--spectrum-combo-box-visual-to-field-button);
+
+    /** @deprecated Replaced with --spectrum-combo-box-visual-to-field-button */
+    --spectrum-combo-box-visual-to-field-button-large: var(--spectrum-combo-box-visual-to-field-button);
+
+    /** @deprecated Replaced with --spectrum-combo-box-visual-to-field-button */
+    --spectrum-combo-box-visual-to-field-button-medium: var(--spectrum-combo-box-visual-to-field-button);
+
+    /** @deprecated Replaced with --spectrum-combo-box-visual-to-field-button */
+    --spectrum-combo-box-visual-to-field-button-quiet: var(--spectrum-combo-box-visual-to-field-button);
+
+    /** @deprecated Replaced with --spectrum-combo-box-visual-to-field-button */
+    --spectrum-combo-box-visual-to-field-button-small: var(--spectrum-combo-box-visual-to-field-button);
+    --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-edge-to-text-50: 8px;
+    --spectrum-component-edge-to-text-75: 9px;
+    --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-visual-50: 6px;
+    --spectrum-component-edge-to-visual-75: 7px;
+    --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-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-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-text-75: 12px;
+    --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-pill-edge-to-visual-75: 10px;
+    --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-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-size-difference-down: -2px;
+    --spectrum-component-size-maximum-perspective-down: 96px;
+    --spectrum-component-size-minimum-perspective-down: 24px;
+    --spectrum-component-size-width-ratio-down: 0.3333;
+    --spectrum-component-to-menu-extra-large: 8px;
+    --spectrum-component-to-menu-large: 7px;
+    --spectrum-component-to-menu-medium: 6px;
+    --spectrum-component-to-menu-small: 6px;
+    --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-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-contextual-help-body-font-size: var(--spectrum-body-size-s);
+    --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
+    --spectrum-contextual-help-minimum-width: 268px;
+    --spectrum-contextual-help-title-font-size: var(--spectrum-title-size-m);
+    --spectrum-corner-radius-0: 0px;
+    --spectrum-corner-radius-75: 3px;
+    --spectrum-corner-radius-100: 4px;
+    --spectrum-corner-radius-200: 5px;
+    --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: 9999px;
+    --spectrum-corner-radius-extra-large-default: var(--spectrum-corner-radius-800);
+    --spectrum-corner-radius-full: var(--spectrum-corner-radius-1000);
+    --spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700);
+    --spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500);
+    --spectrum-corner-radius-medium-size-extra-large: var(--spectrum-corner-radius-700);
+    --spectrum-corner-radius-medium-size-extra-small: var(--spectrum-corner-radius-300);
+    --spectrum-corner-radius-medium-size-large: var(--spectrum-corner-radius-600);
+    --spectrum-corner-radius-medium-size-medium: var(--spectrum-corner-radius-500);
+    --spectrum-corner-radius-medium-size-small: var(--spectrum-corner-radius-400);
+    --spectrum-corner-radius-none: var(--spectrum-corner-radius-0);
+    --spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100);
+    --spectrum-corner-radius-small-size-extra-large: var(--spectrum-corner-radius-300);
+    --spectrum-corner-radius-small-size-large: var(--spectrum-corner-radius-200);
+    --spectrum-corner-radius-small-size-medium: var(--spectrum-corner-radius-100);
+    --spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75);
+    --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-cyan-100: light-dark(rgb(238 250 254), rgb(0 29 39));
+    --spectrum-cyan-200: light-dark(rgb(217 244 253), rgb(0 36 49));
+    --spectrum-cyan-300: light-dark(rgb(183 231 252), rgb(0 48 65));
+    --spectrum-cyan-400: light-dark(rgb(138 213 255), rgb(0 64 88));
+    --spectrum-cyan-500: light-dark(rgb(92 192 255), rgb(0 82 113));
+    --spectrum-cyan-600: light-dark(rgb(48 167 254), rgb(3 99 140));
+    --spectrum-cyan-700: light-dark(rgb(29 149 231), rgb(8 115 168));
+    --spectrum-cyan-800: light-dark(rgb(18 134 205), rgb(13 125 186));
+    --spectrum-cyan-900: light-dark(rgb(11 120 179), rgb(24 142 220));
+    --spectrum-cyan-1000: light-dark(rgb(4 102 145), rgb(38 159 244));
+    --spectrum-cyan-1100: light-dark(rgb(0 87 121), rgb(63 177 255));
+    --spectrum-cyan-1200: light-dark(rgb(0 71 98), rgb(107 199 255));
+    --spectrum-cyan-1300: light-dark(rgb(0 57 78), rgb(152 219 255));
+    --spectrum-cyan-1400: light-dark(rgb(0 43 59), rgb(195 236 252));
+    --spectrum-cyan-1500: light-dark(rgb(0 31 43), rgb(230 248 253));
+    --spectrum-cyan-1600: light-dark(rgb(0 14 20), rgb(255 255 255));
+    --spectrum-cyan-background-color-default: light-dark(rgb(11 120 179), rgb(13 125 186));
+    --spectrum-cyan-subtle-background-color-default: light-dark(rgb(217 244 253), rgb(0 48 65));
+    --spectrum-cyan-visual-color: light-dark(rgb(48 167 254), rgb(24 142 220));
+    --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-date-field-minimum-width: 152px;
+    --spectrum-date-field-text-to-visual: 20px;
+    --spectrum-date-picker-minimum-width: 152px;
+    --spectrum-date-picker-text-to-visual: 0px;
+    --spectrum-date-picker-visual-to-field-button: 0px;
+    --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-default-font-family: var(--spectrum-sans-serif-font-family);
+    --spectrum-default-font-style: normal;
+    --spectrum-detail-cjk-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-detail-cjk-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family);
+    --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style);
+    --spectrum-detail-cjk-font-weight: var(--spectrum-bold-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-cjk-light-emphasized-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-cjk-light-strong-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100);
+    --spectrum-detail-cjk-size-l: var(--spectrum-font-size-100);
+    --spectrum-detail-cjk-size-m: var(--spectrum-font-size-75);
+    --spectrum-detail-cjk-size-s: var(--spectrum-font-size-50);
+    --spectrum-detail-cjk-size-xl: var(--spectrum-font-size-200);
+    --spectrum-detail-cjk-size-xs: var(--spectrum-font-size-25);
+    --spectrum-detail-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-detail-cjk-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-detail-cjk-strong-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-detail-color: light-dark(rgb(113 113 113), rgb(138 138 138));
+
+    /** @deprecated */
+    --spectrum-detail-letter-spacing: 0.06em;
+    --spectrum-detail-line-height: var(--spectrum-line-height-100);
+    --spectrum-detail-margin-bottom-multiplier: 0.25;
+    --spectrum-detail-margin-top-multiplier: 0.88888889;
+    --spectrum-detail-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-detail-sans-serif-emphasized-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-detail-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
+    --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style);
+    --spectrum-detail-sans-serif-font-weight: var(--spectrum-medium-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-sans-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-sans-serif-light-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-sans-serif-light-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-sans-serif-light-strong-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-sans-serif-light-strong-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-detail-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-detail-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-detail-sans-serif-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-detail-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-sans-serif-text-transform: uppercase;
+    --spectrum-detail-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-detail-serif-emphasized-font-weight: var(--spectrum-medium-font-weight);
+    --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family);
+    --spectrum-detail-serif-font-style: var(--spectrum-default-font-style);
+    --spectrum-detail-serif-font-weight: var(--spectrum-medium-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-serif-light-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-serif-light-strong-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-detail-serif-light-strong-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-detail-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-font-style: var(--spectrum-default-font-style);
+    --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight);
+
+    /** @deprecated */
+    --spectrum-detail-serif-text-transform: uppercase;
+    --spectrum-detail-size-l: var(--spectrum-font-size-200);
+    --spectrum-detail-size-m: var(--spectrum-font-size-100);
+    --spectrum-detail-size-s: var(--spectrum-font-size-75);
+    --spectrum-detail-size-xl: var(--spectrum-font-size-300);
+    --spectrum-detail-size-xs: var(--spectrum-font-size-50);
+    --spectrum-dial-border-radius: 16px;
+    --spectrum-dial-controls-margin: 8px;
+    --spectrum-dial-handle-block-margin: 16px;
+    --spectrum-dial-handle-inline-margin: 20px;
+    --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-disabled-background-color: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-disabled-border-color: light-dark(rgb(218 218 218), rgb(57 57 57));
+    --spectrum-disabled-content-color: light-dark(rgb(198 198 198), rgb(68 68 68));
+    --spectrum-disabled-static-black-background-color: var(--spectrum-transparent-black-100);
+    --spectrum-disabled-static-black-border-color: var(--spectrum-transparent-black-300);
+    --spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-400);
+    --spectrum-disabled-static-white-background-color: var(--spectrum-transparent-white-100);
+    --spectrum-disabled-static-white-border-color: var(--spectrum-transparent-white-300);
+    --spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-400);
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px;
+    --spectrum-divider-horizontal-minimum-width: 200px;
+    --spectrum-divider-thickness-large: 4px;
+    --spectrum-divider-thickness-medium: 2px;
+    --spectrum-divider-thickness-small: 1px;
+    --spectrum-divider-vertical-minimum-height: 200px;
+    --spectrum-double-calendar-popover-minimum-height: 320px;
+    --spectrum-double-calendar-popover-minimum-width: 616px;
+    --spectrum-drag-handle-icon-size-75: 10px;
+    --spectrum-drag-handle-icon-size-100: 10px;
+    --spectrum-drag-handle-icon-size-200: 12px;
+    --spectrum-drag-handle-icon-size-300: 14px;
+
+    /** @deprecated */
+    --spectrum-drop-shadow-blur: var(--spectrum-drop-shadow-blur-100);
+    --spectrum-drop-shadow-blur-100: 6px;
+    --spectrum-drop-shadow-blur-200: 8px;
+    --spectrum-drop-shadow-blur-300: 16px;
+
+    /** @deprecated Replaced with --spectrum-drop-shadow-color-100 */
+    --spectrum-drop-shadow-color: light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 36%));
+    --spectrum-drop-shadow-color-100: light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 36%));
+    --spectrum-drop-shadow-color-200: light-dark(rgb(0 0 0 / 16%), rgb(0 0 0 / 48%));
+    --spectrum-drop-shadow-color-300: light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 60%));
+    --spectrum-drop-shadow-dragged-blur: var(--spectrum-drop-shadow-blur-300);
+    --spectrum-drop-shadow-dragged-color: light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 60%));
+    --spectrum-drop-shadow-dragged-x: var(--spectrum-drop-shadow-x-300);
+    --spectrum-drop-shadow-dragged-y: var(--spectrum-drop-shadow-y-300);
+    --spectrum-drop-shadow-elevated-blur: var(--spectrum-drop-shadow-blur-200);
+    --spectrum-drop-shadow-elevated-color: light-dark(rgb(0 0 0 / 16%), rgb(0 0 0 / 48%));
+    --spectrum-drop-shadow-elevated-x: var(--spectrum-drop-shadow-x-200);
+    --spectrum-drop-shadow-elevated-y: var(--spectrum-drop-shadow-y-200);
+    --spectrum-drop-shadow-emphasized-default-blur: var(--spectrum-drop-shadow-blur-100);
+    --spectrum-drop-shadow-emphasized-default-color: light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 36%));
+    --spectrum-drop-shadow-emphasized-default-x: var(--spectrum-drop-shadow-x-100);
+    --spectrum-drop-shadow-emphasized-default-y: var(--spectrum-drop-shadow-y-100);
+    --spectrum-drop-shadow-emphasized-hover-blur: var(--spectrum-drop-shadow-blur-200);
+    --spectrum-drop-shadow-emphasized-hover-color: light-dark(rgb(0 0 0 / 16%), rgb(0 0 0 / 48%));
+    --spectrum-drop-shadow-emphasized-hover-x: var(--spectrum-drop-shadow-x-200);
+    --spectrum-drop-shadow-emphasized-hover-y: var(--spectrum-drop-shadow-y-200);
+
+    /** @deprecated */
+    --spectrum-drop-shadow-x: var(--spectrum-drop-shadow-x-100);
+    --spectrum-drop-shadow-x-100: 0px;
+    --spectrum-drop-shadow-x-200: 0px;
+    --spectrum-drop-shadow-x-300: 0px;
+
+    /** @deprecated */
+    --spectrum-drop-shadow-y: var(--spectrum-drop-shadow-y-100);
+    --spectrum-drop-shadow-y-100: 1px;
+    --spectrum-drop-shadow-y-200: 2px;
+    --spectrum-drop-shadow-y-300: 6px;
+    --spectrum-drop-zone-background-color-opacity: 10%;
+    --spectrum-drop-zone-background-color-opacity-filled: 30%;
+    --spectrum-drop-zone-border-dash-gap: 6px;
+    --spectrum-drop-zone-border-dash-length: 8px;
+
+    /** @deprecated */
+    --spectrum-drop-zone-content-maximum-width: var(--spectrum-illustrated-message-maximum-width);
+    --spectrum-drop-zone-width: 428px;
+    --spectrum-dropindicator-color: light-dark(rgb(75 117 255), rgb(52 91 248));
+    --spectrum-extra-bold-font-weight: 800;
+    --spectrum-field-default-width-extra-large: 240px;
+    --spectrum-field-default-width-large: 224px;
+    --spectrum-field-default-width-medium: 208px;
+    --spectrum-field-default-width-small: 192px;
+    --spectrum-field-edge-to-alert-icon-extra-large: 18px;
+    --spectrum-field-edge-to-alert-icon-large: 15px;
+    --spectrum-field-edge-to-alert-icon-medium: 12px;
+
+    /** @deprecated */
+    --spectrum-field-edge-to-alert-icon-quiet: 0px;
+    --spectrum-field-edge-to-alert-icon-small: 9px;
+
+    /** @deprecated */
+    --spectrum-field-edge-to-border-quiet: 0px;
+    --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;
+
+    /** @deprecated */
+    --spectrum-field-edge-to-text-quiet: 0px;
+    --spectrum-field-edge-to-validation-icon-extra-large: 18px;
+    --spectrum-field-edge-to-validation-icon-large: 15px;
+    --spectrum-field-edge-to-validation-icon-medium: 12px;
+
+    /** @deprecated */
+    --spectrum-field-edge-to-validation-icon-quiet: 0px;
+    --spectrum-field-edge-to-validation-icon-small: 9px;
+    --spectrum-field-edge-to-visual-quiet: 0px;
+    --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-label-text-to-asterisk-extra-large: 5px;
+    --spectrum-field-label-text-to-asterisk-large: 5px;
+    --spectrum-field-label-text-to-asterisk-medium: 4px;
+    --spectrum-field-label-text-to-asterisk-small: 4px;
+    --spectrum-field-label-to-component: 0px;
+
+    /** @deprecated */
+    --spectrum-field-label-to-component-quiet-extra-large: -15px;
+
+    /** @deprecated */
+    --spectrum-field-label-to-component-quiet-large: -12px;
+
+    /** @deprecated */
+    --spectrum-field-label-to-component-quiet-medium: -8px;
+
+    /** @deprecated */
+    --spectrum-field-label-to-component-quiet-small: -8px;
+    --spectrum-field-label-top-margin-extra-large: 0px;
+    --spectrum-field-label-top-margin-large: 0px;
+    --spectrum-field-label-top-margin-medium: 0px;
+    --spectrum-field-label-top-margin-small: 0px;
+    --spectrum-field-label-top-to-asterisk-extra-large: 18px;
+    --spectrum-field-label-top-to-asterisk-large: 15px;
+    --spectrum-field-label-top-to-asterisk-medium: 12px;
+    --spectrum-field-label-top-to-asterisk-small: 8px;
+    --spectrum-field-text-to-alert-icon-extra-large: 18px;
+    --spectrum-field-text-to-alert-icon-large: 15px;
+    --spectrum-field-text-to-alert-icon-medium: 12px;
+    --spectrum-field-text-to-alert-icon-small: 8px;
+    --spectrum-field-text-to-validation-icon-extra-large: 18px;
+    --spectrum-field-text-to-validation-icon-large: 15px;
+    --spectrum-field-text-to-validation-icon-medium: 12px;
+    --spectrum-field-text-to-validation-icon-small: 8px;
+    --spectrum-field-top-to-alert-icon-extra-large: 13px;
+    --spectrum-field-top-to-alert-icon-large: 10px;
+    --spectrum-field-top-to-alert-icon-medium: 7px;
+    --spectrum-field-top-to-alert-icon-small: 4px;
+    --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-disclosure-icon-compact-extra-large: 17px;
+    --spectrum-field-top-to-disclosure-icon-compact-large: 14px;
+    --spectrum-field-top-to-disclosure-icon-compact-medium: 11px;
+    --spectrum-field-top-to-disclosure-icon-compact-small: 7px;
+    --spectrum-field-top-to-disclosure-icon-extra-large: 21px;
+    --spectrum-field-top-to-disclosure-icon-large: 18px;
+    --spectrum-field-top-to-disclosure-icon-medium: 15px;
+    --spectrum-field-top-to-disclosure-icon-small: 11px;
+    --spectrum-field-top-to-disclosure-icon-spacious-extra-large: 25px;
+    --spectrum-field-top-to-disclosure-icon-spacious-large: 22px;
+    --spectrum-field-top-to-disclosure-icon-spacious-medium: 19px;
+    --spectrum-field-top-to-disclosure-icon-spacious-small: 15px;
+    --spectrum-field-top-to-progress-circle-extra-large: 11px;
+    --spectrum-field-top-to-progress-circle-large: 9px;
+    --spectrum-field-top-to-progress-circle-medium: 6px;
+    --spectrum-field-top-to-progress-circle-small: 4px;
+    --spectrum-field-top-to-validation-icon-extra-large: 17px;
+    --spectrum-field-top-to-validation-icon-large: 14px;
+    --spectrum-field-top-to-validation-icon-medium: 11px;
+    --spectrum-field-top-to-validation-icon-small: 7px;
+    --spectrum-field-width: var(--spectrum-field-width-small);
+
+    /** @deprecated This token has been deprecated, use --spectrum-field-default-width-extra-large instead. */
+    --spectrum-field-width-extra-large: var(--spectrum-field-default-width-extra-large);
+
+    /** @deprecated This token has been deprecated, use --spectrum-field-default-width-large instead. */
+    --spectrum-field-width-large: var(--spectrum-field-default-width-large);
+
+    /** @deprecated This token has been deprecated, use --spectrum-field-default-width-medium instead. */
+    --spectrum-field-width-medium: var(--spectrum-field-default-width-medium);
+
+    /** @deprecated This token has been deprecated, use --spectrum-field-default-width-small instead. */
+    --spectrum-field-width-small: var(--spectrum-field-default-width-small);
+    --spectrum-floating-action-button-drop-shadow-blur: 12px;
+    --spectrum-floating-action-button-drop-shadow-color: var(--spectrum-transparent-black-300);
+    --spectrum-floating-action-button-drop-shadow-y: 4px;
+
+    /** @deprecated Use `--spectrum-floating-action-button-drop-shadow-color` instead */
+    --spectrum-floating-action-button-shadow-color: var(--spectrum-floating-action-button-drop-shadow-color);
+    --spectrum-focus-indicator-color: light-dark(rgb(75 117 255), rgb(64 105 253));
+    --spectrum-focus-indicator-gap: 2px;
+    --spectrum-focus-indicator-thickness: 2px;
+    --spectrum-font-family: var(--spectrum-sans-font-family-stack);
+    --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-size: var(--spectrum-font-size-100);
+    --spectrum-font-size-25: 10px;
+    --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: 51px;
+    --spectrum-font-size-1300: 58px;
+    --spectrum-font-size-1400: 65px;
+    --spectrum-font-size-1500: 73px;
+    --spectrum-font-style: var(--spectrum-default-font-style);
+    --spectrum-fuchsia-100: light-dark(rgb(254 246 255), rgb(50 0 61));
+    --spectrum-fuchsia-200: light-dark(rgb(253 233 255), rgb(61 0 74));
+    --spectrum-fuchsia-300: light-dark(rgb(250 211 255), rgb(79 0 95));
+    --spectrum-fuchsia-400: light-dark(rgb(247 181 255), rgb(102 9 120));
+    --spectrum-fuchsia-500: light-dark(rgb(243 147 255), rgb(127 23 146));
+    --spectrum-fuchsia-600: light-dark(rgb(236 105 255), rgb(151 38 170));
+    --spectrum-fuchsia-700: light-dark(rgb(223 77 245), rgb(173 51 192));
+    --spectrum-fuchsia-800: light-dark(rgb(200 68 220), rgb(186 60 206));
+    --spectrum-fuchsia-900: light-dark(rgb(181 57 200), rgb(213 73 235));
+    --spectrum-fuchsia-1000: light-dark(rgb(156 40 175), rgb(232 91 253));
+    --spectrum-fuchsia-1100: light-dark(rgb(135 27 154), rgb(240 122 255));
+    --spectrum-fuchsia-1200: light-dark(rgb(113 15 131), rgb(245 159 255));
+    --spectrum-fuchsia-1300: light-dark(rgb(92 4 109), rgb(248 191 255));
+    --spectrum-fuchsia-1400: light-dark(rgb(72 0 88), rgb(251 219 255));
+    --spectrum-fuchsia-1500: light-dark(rgb(54 0 66), rgb(253 241 255));
+    --spectrum-fuchsia-1600: light-dark(rgb(29 0 35), rgb(255 255 255));
+    --spectrum-fuchsia-background-color-default: light-dark(rgb(181 57 200), rgb(186 60 206));
+    --spectrum-fuchsia-subtle-background-color-default: light-dark(rgb(253 233 255), rgb(79 0 95));
+    --spectrum-fuchsia-visual-color: light-dark(rgb(200 68 220), rgb(213 73 235));
+    --spectrum-gradient-stop-2-genai: 0.3333;
+    --spectrum-gradient-stop-2-premium: 0.6666;
+    --spectrum-gradient-stop-3-genai: 1;
+    --spectrum-gradient-stop-3-premium: 1;
+    --spectrum-gray-25: light-dark(rgb(255 255 255), rgb(17 17 17));
+    --spectrum-gray-50: light-dark(rgb(248 248 248), rgb(27 27 27));
+    --spectrum-gray-75: light-dark(rgb(243 243 243), rgb(34 34 34));
+    --spectrum-gray-100: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-gray-200: light-dark(rgb(225 225 225), rgb(50 50 50));
+    --spectrum-gray-300: light-dark(rgb(218 218 218), rgb(57 57 57));
+    --spectrum-gray-400: light-dark(rgb(198 198 198), rgb(68 68 68));
+    --spectrum-gray-500: light-dark(rgb(143 143 143), rgb(109 109 109));
+    --spectrum-gray-600: light-dark(rgb(113 113 113), rgb(138 138 138));
+    --spectrum-gray-700: light-dark(rgb(80 80 80), rgb(175 175 175));
+    --spectrum-gray-800: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-gray-900: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-gray-1000: light-dark(rgb(0 0 0), rgb(255 255 255));
+    --spectrum-gray-background-color-default: light-dark(rgb(80 80 80), rgb(109 109 109));
+    --spectrum-gray-subtle-background-color-default: light-dark(rgb(233 233 233), rgb(57 57 57));
+    --spectrum-gray-visual-color: light-dark(rgb(143 143 143), rgb(138 138 138));
+    --spectrum-green-100: light-dark(rgb(237 252 241), rgb(0 30 23));
+    --spectrum-green-200: light-dark(rgb(215 247 225), rgb(0 38 29));
+    --spectrum-green-300: light-dark(rgb(173 238 197), rgb(0 51 38));
+    --spectrum-green-400: light-dark(rgb(107 227 162), rgb(0 68 48));
+    --spectrum-green-500: light-dark(rgb(43 209 125), rgb(2 87 58));
+    --spectrum-green-600: light-dark(rgb(18 184 103), rgb(3 106 67));
+    --spectrum-green-700: light-dark(rgb(11 164 93), rgb(4 124 75));
+    --spectrum-green-800: light-dark(rgb(7 147 85), rgb(6 136 80));
+    --spectrum-green-900: light-dark(rgb(5 131 78), rgb(9 157 89));
+    --spectrum-green-1000: light-dark(rgb(3 110 69), rgb(14 175 98));
+    --spectrum-green-1100: light-dark(rgb(2 93 60), rgb(24 193 110));
+    --spectrum-green-1200: light-dark(rgb(1 76 52), rgb(57 215 134));
+    --spectrum-green-1300: light-dark(rgb(0 61 44), rgb(126 231 172));
+    --spectrum-green-1400: light-dark(rgb(0 46 34), rgb(189 241 208));
+    --spectrum-green-1500: light-dark(rgb(0 33 25), rgb(229 250 236));
+    --spectrum-green-1600: light-dark(rgb(0 15 12), rgb(255 255 255));
+    --spectrum-green-background-color-default: light-dark(rgb(5 131 78), rgb(6 136 80));
+    --spectrum-green-subtle-background-color-default: light-dark(rgb(215 247 225), rgb(0 51 38));
+    --spectrum-green-visual-color: light-dark(rgb(11 164 93), rgb(6 136 80));
+    --spectrum-gripper-icon-size-100: 24px;
+    --spectrum-heading-cjk-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-cjk-emphasized-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family);
+    --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-heading-cjk-heavy-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-cjk-heavy-emphasized-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-cjk-heavy-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-cjk-heavy-strong-font-weight: var(--spectrum-black-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-cjk-light-emphasized-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-cjk-light-strong-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100);
+    --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-xl: var(--spectrum-font-size-800);
+    --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200);
+    --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-1000);
+
+    /** @deprecated */
+    --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100);
+    --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1200);
+    --spectrum-heading-cjk-size-xxxxl: var(--spectrum-font-size-1400);
+    --spectrum-heading-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-color: rgb(19 19 19);
+    --spectrum-heading-line-height: var(--spectrum-line-height-100);
+    --spectrum-heading-margin-bottom-multiplier: 0.25;
+    --spectrum-heading-margin-top-multiplier: 0.88888889;
+    --spectrum-heading-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
+    --spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-sans-serif-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-heading-sans-serif-heavy-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-sans-serif-heavy-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-sans-serif-heavy-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-sans-serif-heavy-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-sans-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-sans-serif-light-emphasized-font-weight: var(--spectrum-light-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-sans-serif-light-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-sans-serif-light-font-weight: var(--spectrum-light-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-sans-serif-light-strong-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-sans-serif-light-strong-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-heading-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-heading-sans-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-sans-serif-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-sans-serif-strong-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family);
+    --spectrum-heading-serif-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-heading-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-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-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-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-serif-light-font-weight: var(--spectrum-regular-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
+
+    /** @deprecated */
+    --spectrum-heading-serif-light-strong-font-style: var(--spectrum-default-font-style);
+
+    /** @deprecated */
+    --spectrum-heading-serif-light-strong-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-heading-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-font-style: var(--spectrum-default-font-style);
+    --spectrum-heading-serif-strong-font-weight: var(--spectrum-black-font-weight);
+    --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-400);
+    --spectrum-heading-size-xl: var(--spectrum-font-size-900);
+    --spectrum-heading-size-xs: var(--spectrum-font-size-300);
+    --spectrum-heading-size-xxl: var(--spectrum-font-size-1100);
+
+    /** @deprecated */
+    --spectrum-heading-size-xxs: var(--spectrum-font-size-100);
+    --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300);
+    --spectrum-heading-size-xxxxl: var(--spectrum-font-size-1500);
+    --spectrum-help-text-to-component: 0px;
+
+    /** @deprecated Replaced with --spectrum-component-top-to-workflow-icon-300 */
+    --spectrum-help-text-top-to-workflow-icon-extra-large: var(--spectrum-component-top-to-workflow-icon-300);
+
+    /** @deprecated Replaced with --spectrum-component-top-to-workflow-icon-200 */
+    --spectrum-help-text-top-to-workflow-icon-large: var(--spectrum-component-top-to-workflow-icon-200);
+
+    /** @deprecated Replaced with --spectrum-component-top-to-workflow-icon-100 */
+    --spectrum-help-text-top-to-workflow-icon-medium: var(--spectrum-component-top-to-workflow-icon-100);
+
+    /** @deprecated Replaced with --spectrum-component-top-to-workflow-icon-75 */
+    --spectrum-help-text-top-to-workflow-icon-small: var(--spectrum-component-top-to-workflow-icon-75);
+    --spectrum-icon-color-blue-background: light-dark(rgb(229 240 254), rgb(12 33 117));
+    --spectrum-icon-color-blue-primary-default: light-dark(rgb(59 99 251), rgb(64 105 253));
+    --spectrum-icon-color-blue-primary-down: light-dark(rgb(29 62 207), rgb(105 149 254));
+    --spectrum-icon-color-blue-primary-hover: light-dark(rgb(39 77 234), rgb(86 129 255));
+    --spectrum-icon-color-brown-background: light-dark(rgb(247 238 225), rgb(78 55 19));
+    --spectrum-icon-color-brown-primary-default: light-dark(rgb(154 123 77), rgb(132 104 61));
+    --spectrum-icon-color-brown-primary-down: light-dark(rgb(119 91 50), rgb(163 132 84));
+    --spectrum-icon-color-brown-primary-hover: light-dark(rgb(139 109 66), rgb(143 114 69));
+    --spectrum-icon-color-celery-background: light-dark(rgb(235 255 220), rgb(31 67 4));
+    --spectrum-icon-color-celery-primary-default: light-dark(rgb(82 161 25), rgb(78 154 23));
+    --spectrum-icon-color-celery-primary-down: light-dark(rgb(64 129 17), rgb(100 190 35));
+    --spectrum-icon-color-celery-primary-hover: light-dark(rgb(72 144 20), rgb(88 172 28));
+    --spectrum-icon-color-chartreuse-background: light-dark(rgb(234 246 173), rgb(53 63 0));
+    --spectrum-icon-color-chartreuse-primary-default: light-dark(rgb(143 172 0), rgb(136 164 0));
+    --spectrum-icon-color-chartreuse-primary-down: light-dark(rgb(114 137 0), rgb(169 203 0));
+    --spectrum-icon-color-chartreuse-primary-hover: light-dark(rgb(128 153 0), rgb(151 181 0));
+    --spectrum-icon-color-cinnamon-background: light-dark(rgb(249 236 229), rgb(79 28 7));
+    --spectrum-icon-color-cinnamon-primary-default: light-dark(rgb(184 109 70), rgb(176 98 59));
+    --spectrum-icon-color-cinnamon-primary-down: light-dark(rgb(147 77 43), rgb(206 136 99));
+    --spectrum-icon-color-cinnamon-primary-hover: light-dark(rgb(170 94 56), rgb(192 119 80));
+    --spectrum-icon-color-cyan-background: light-dark(rgb(238 250 254), rgb(0 64 88));
+    --spectrum-icon-color-cyan-primary-default: light-dark(rgb(18 134 205), rgb(13 125 186));
+    --spectrum-icon-color-cyan-primary-down: light-dark(rgb(4 102 145), rgb(38 159 244));
+    --spectrum-icon-color-cyan-primary-hover: light-dark(rgb(11 120 179), rgb(24 142 220));
+    --spectrum-icon-color-disabled-primary: light-dark(rgb(198 198 198), rgb(68 68 68));
+    --spectrum-icon-color-emphasized-background: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-icon-color-fuchsia-background: light-dark(rgb(253 233 255), rgb(61 0 74));
+    --spectrum-icon-color-fuchsia-primary-default: light-dark(rgb(181 57 200), rgb(173 51 192));
+    --spectrum-icon-color-fuchsia-primary-down: light-dark(rgb(135 27 154), rgb(213 73 235));
+    --spectrum-icon-color-fuchsia-primary-hover: light-dark(rgb(156 40 175), rgb(186 60 206));
+    --spectrum-icon-color-green-background: light-dark(rgb(237 252 241), rgb(0 68 48));
+    --spectrum-icon-color-green-primary-default: light-dark(rgb(7 147 85), rgb(6 136 80));
+    --spectrum-icon-color-green-primary-down: light-dark(rgb(3 110 69), rgb(14 175 98));
+    --spectrum-icon-color-green-primary-hover: light-dark(rgb(5 131 78), rgb(9 157 89));
+    --spectrum-icon-color-indigo-background: light-dark(rgb(235 238 255), rgb(30 0 93));
+    --spectrum-icon-color-indigo-primary-default: light-dark(rgb(113 85 250), rgb(109 75 248));
+    --spectrum-icon-color-indigo-primary-down: light-dark(rgb(84 36 219), rgb(128 119 254));
+    --spectrum-icon-color-indigo-primary-hover: light-dark(rgb(99 56 238), rgb(116 91 252));
+
+    /** @deprecated */
+    --spectrum-icon-color-inverse: light-dark(rgb(248 248 248), rgb(27 27 27));
+    --spectrum-icon-color-inverse-background: light-dark(rgb(248 248 248), rgb(27 27 27));
+    --spectrum-icon-color-magenta-background: light-dark(rgb(255 232 240), rgb(74 0 27));
+    --spectrum-icon-color-magenta-primary-default: light-dark(rgb(217 35 97), rgb(207 31 92));
+    --spectrum-icon-color-magenta-primary-down: light-dark(rgb(163 5 62), rgb(255 51 119));
+    --spectrum-icon-color-magenta-primary-hover: light-dark(rgb(186 22 80), rgb(224 38 101));
+    --spectrum-icon-color-orange-background: light-dark(rgb(255 236 207), rgb(80 27 0));
+    --spectrum-icon-color-orange-primary-default: light-dark(rgb(232 106 0), rgb(224 100 0));
+    --spectrum-icon-color-orange-primary-down: light-dark(rgb(194 78 0), rgb(255 137 0));
+    --spectrum-icon-color-orange-primary-hover: light-dark(rgb(212 91 0), rgb(243 117 0));
+    --spectrum-icon-color-pink-background: light-dark(rgb(255 232 247), rgb(71 0 44));
+    --spectrum-icon-color-pink-primary-default: light-dark(rgb(228 52 163), rgb(196 39 138));
+    --spectrum-icon-color-pink-primary-down: light-dark(rgb(176 31 123), rgb(236 67 175));
+    --spectrum-icon-color-pink-primary-hover: light-dark(rgb(206 42 146), rgb(213 45 151));
+    --spectrum-icon-color-primary-default: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-icon-color-primary-down: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-icon-color-primary-hover: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-icon-color-purple-background: light-dark(rgb(244 235 252), rgb(50 0 96));
+    --spectrum-icon-color-purple-primary-default: light-dark(rgb(154 71 226), rgb(148 62 224));
+    --spectrum-icon-color-purple-primary-down: light-dark(rgb(115 13 204), rgb(173 105 233));
+    --spectrum-icon-color-purple-primary-hover: light-dark(rgb(134 40 217), rgb(157 78 228));
+    --spectrum-icon-color-red-background: light-dark(rgb(255 235 232), rgb(87 17 7));
+    --spectrum-icon-color-red-primary-default: light-dark(rgb(215 50 32), rgb(205 46 29));
+    --spectrum-icon-color-red-primary-down: light-dark(rgb(156 33 19), rgb(252 67 46));
+    --spectrum-icon-color-red-primary-hover: light-dark(rgb(183 40 24), rgb(223 52 34));
+    --spectrum-icon-color-seafoam-background: light-dark(rgb(211 246 234), rgb(0 67 59));
+    --spectrum-icon-color-seafoam-primary-default: light-dark(rgb(9 144 120), rgb(8 134 112));
+    --spectrum-icon-color-seafoam-primary-down: light-dark(rgb(5 108 92), rgb(12 173 142));
+    --spectrum-icon-color-seafoam-primary-hover: light-dark(rgb(7 129 109), rgb(10 154 128));
+    --spectrum-icon-color-silver-background: light-dark(rgb(239 239 239), rgb(59 59 59));
+    --spectrum-icon-color-silver-primary-default: light-dark(rgb(143 143 143), rgb(118 118 118));
+    --spectrum-icon-color-silver-primary-down: light-dark(rgb(114 114 114), rgb(152 152 152));
+    --spectrum-icon-color-silver-primary-hover: light-dark(rgb(128 128 128), rgb(137 137 137));
+    --spectrum-icon-color-turquoise-background: light-dark(rgb(209 245 245), rgb(0 66 72));
+    --spectrum-icon-color-turquoise-primary-default: light-dark(rgb(12 158 171), rgb(9 131 142));
+    --spectrum-icon-color-turquoise-primary-down: light-dark(rgb(8 126 137), rgb(13 168 182));
+    --spectrum-icon-color-turquoise-primary-hover: light-dark(rgb(10 141 153), rgb(11 151 164));
+    --spectrum-icon-color-yellow-background: light-dark(rgb(255 248 204), rgb(83 52 0));
+    --spectrum-icon-color-yellow-primary-default: light-dark(rgb(245 199 0), rgb(235 183 0));
+    --spectrum-icon-color-yellow-primary-down: light-dark(rgb(210 149 0), rgb(255 230 86));
+    --spectrum-icon-color-yellow-primary-hover: light-dark(rgb(230 175 0), rgb(249 206 0));
+    --spectrum-illustrated-message-horizontal-maximum-width: 535px;
+    --spectrum-illustrated-message-large-body-font-size: var(--spectrum-body-size-s);
+    --spectrum-illustrated-message-large-cjk-title-font-size: var(--spectrum-title-cjk-size-xxl);
+    --spectrum-illustrated-message-large-title-font-size: var(--spectrum-title-size-xxl);
+
+    /** @deprecated */
+    --spectrum-illustrated-message-maximum-width: var(--spectrum-illustrated-message-vertical-maximum-width);
+    --spectrum-illustrated-message-medium-body-font-size: var(--spectrum-body-size-s);
+    --spectrum-illustrated-message-medium-cjk-title-font-size: var(--spectrum-title-cjk-size-xl);
+    --spectrum-illustrated-message-medium-title-font-size: var(--spectrum-title-size-xl);
+    --spectrum-illustrated-message-small-body-font-size: var(--spectrum-body-size-xs);
+    --spectrum-illustrated-message-small-cjk-title-font-size: var(--spectrum-title-cjk-size-m);
+    --spectrum-illustrated-message-small-title-font-size: var(--spectrum-title-size-m);
+    --spectrum-illustrated-message-vertical-maximum-width: 380px;
+    --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px;
+    --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px;
+    --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px;
+    --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px;
+
+    /** @deprecated */
+    --spectrum-in-field-button-edge-to-fill: 0px;
+    --spectrum-in-field-button-edge-to-fill-extra-large: 8px;
+    --spectrum-in-field-button-edge-to-fill-large: 8px;
+    --spectrum-in-field-button-edge-to-fill-medium: 6px;
+    --spectrum-in-field-button-edge-to-fill-small: 4px;
+    --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
+    --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-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-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
+    --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-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
+    --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
+    --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
+    --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px;
+    --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
+    --spectrum-in-field-button-width-stacked-extra-large: 44px;
+    --spectrum-in-field-button-width-stacked-large: 36px;
+    --spectrum-in-field-button-width-stacked-medium: 28px;
+    --spectrum-in-field-button-width-stacked-small: 20px;
+    --spectrum-in-field-progress-circle-edge-to-fill: 1px;
+    --spectrum-in-field-progress-circle-size-75: 16px;
+    --spectrum-in-field-progress-circle-size-100: 20px;
+    --spectrum-in-field-progress-circle-size-200: 22px;
+    --spectrum-in-field-progress-circle-size-300: 26px;
+    --spectrum-in-field-stepper-to-end-extra-large: 4px;
+    --spectrum-in-field-stepper-to-end-large: 4px;
+    --spectrum-in-field-stepper-to-end-medium: 3px;
+    --spectrum-in-field-stepper-to-end-small: 0px;
+    --spectrum-in-line-alert-minimum-width: 240px;
+    --spectrum-indigo-100: light-dark(rgb(247 248 255), rgb(30 0 93));
+    --spectrum-indigo-200: light-dark(rgb(235 238 255), rgb(35 0 110));
+    --spectrum-indigo-300: light-dark(rgb(216 222 255), rgb(47 0 140));
+    --spectrum-indigo-400: light-dark(rgb(192 201 255), rgb(62 12 174));
+    --spectrum-indigo-500: light-dark(rgb(167 178 255), rgb(79 30 209));
+    --spectrum-indigo-600: light-dark(rgb(145 151 254), rgb(95 52 235));
+    --spectrum-indigo-700: light-dark(rgb(132 128 254), rgb(109 75 248));
+    --spectrum-indigo-800: light-dark(rgb(122 106 253), rgb(116 91 252));
+    --spectrum-indigo-900: light-dark(rgb(113 85 250), rgb(128 119 254));
+    --spectrum-indigo-1000: light-dark(rgb(99 56 238), rgb(139 141 254));
+    --spectrum-indigo-1100: light-dark(rgb(84 36 219), rgb(153 161 255));
+    --spectrum-indigo-1200: light-dark(rgb(69 19 191), rgb(176 186 255));
+    --spectrum-indigo-1300: light-dark(rgb(55 6 160), rgb(199 208 255));
+    --spectrum-indigo-1400: light-dark(rgb(42 0 129), rgb(223 228 255));
+    --spectrum-indigo-1500: light-dark(rgb(31 0 98), rgb(243 244 255));
+    --spectrum-indigo-1600: light-dark(rgb(17 0 54), rgb(255 255 255));
+    --spectrum-indigo-background-color-default: light-dark(rgb(113 85 250), rgb(116 91 252));
+    --spectrum-indigo-subtle-background-color-default: light-dark(rgb(235 238 255), rgb(47 0 140));
+    --spectrum-indigo-visual-color: light-dark(rgb(122 106 253), rgb(128 119 254));
+    --spectrum-informative-background-color-default: light-dark(rgb(59 99 251), rgb(64 105 253));
+    --spectrum-informative-background-color-down: light-dark(rgb(39 77 234), rgb(52 91 248));
+    --spectrum-informative-background-color-hover: light-dark(rgb(39 77 234), rgb(52 91 248));
+    --spectrum-informative-background-color-key-focus: light-dark(rgb(39 77 234), rgb(52 91 248));
+    --spectrum-informative-color-100: light-dark(rgb(245 249 255), rgb(14 23 63));
+    --spectrum-informative-color-200: light-dark(rgb(229 240 254), rgb(15 28 82));
+    --spectrum-informative-color-300: light-dark(rgb(203 226 254), rgb(12 33 117));
+    --spectrum-informative-color-400: light-dark(rgb(172 207 253), rgb(18 45 154));
+    --spectrum-informative-color-500: light-dark(rgb(142 185 252), rgb(26 58 195));
+    --spectrum-informative-color-600: light-dark(rgb(114 158 253), rgb(37 73 229));
+    --spectrum-informative-color-700: light-dark(rgb(93 137 255), rgb(52 91 248));
+    --spectrum-informative-color-800: light-dark(rgb(75 117 255), rgb(64 105 253));
+    --spectrum-informative-color-900: light-dark(rgb(59 99 251), rgb(86 129 255));
+    --spectrum-informative-color-1000: light-dark(rgb(39 77 234), rgb(105 149 254));
+    --spectrum-informative-color-1100: light-dark(rgb(29 62 207), rgb(124 169 252));
+    --spectrum-informative-color-1200: light-dark(rgb(21 50 173), rgb(152 192 252));
+    --spectrum-informative-color-1300: light-dark(rgb(16 40 140), rgb(181 213 253));
+    --spectrum-informative-color-1400: light-dark(rgb(12 31 105), rgb(213 231 254));
+    --spectrum-informative-color-1500: light-dark(rgb(14 24 67), rgb(238 245 255));
+    --spectrum-informative-color-1600: light-dark(rgb(7 11 30), rgb(255 255 255));
+    --spectrum-informative-subtle-background-color-default: light-dark(rgb(229 240 254), rgb(12 33 117));
+    --spectrum-informative-visual-color: light-dark(rgb(75 117 255), rgb(86 129 255));
+    --spectrum-italic-font-style: italic;
+    --spectrum-label-to-description-0: 0px;
+    --spectrum-letter-spacing: 0em;
+    --spectrum-light-font-weight: 300;
+    --spectrum-line-height-100: 1.3;
+    --spectrum-line-height-200: 1.5;
+    --spectrum-line-height-font-size-25: 12px;
+    --spectrum-line-height-font-size-50: 14px;
+    --spectrum-line-height-font-size-75: 16px;
+    --spectrum-line-height-font-size-100: 18px;
+    --spectrum-line-height-font-size-200: 20px;
+    --spectrum-line-height-font-size-300: 22px;
+    --spectrum-line-height-font-size-400: 24px;
+    --spectrum-line-height-font-size-500: 26px;
+    --spectrum-line-height-font-size-600: 30px;
+    --spectrum-line-height-font-size-700: 32px;
+    --spectrum-line-height-font-size-800: 36px;
+    --spectrum-line-height-font-size-900: 42px;
+    --spectrum-line-height-font-size-1000: 46px;
+    --spectrum-line-height-font-size-1100: 52px;
+    --spectrum-line-height-font-size-1200: 58px;
+    --spectrum-line-height-font-size-1300: 66px;
+    --spectrum-line-height-font-size-1400: 74px;
+    --spectrum-line-height-font-size-1500: 84px;
+    --spectrum-link-out-icon-size-75: 10px;
+    --spectrum-link-out-icon-size-100: 12px;
+    --spectrum-link-out-icon-size-200: 14px;
+    --spectrum-link-out-icon-size-300: 14px;
+    --spectrum-link-out-icon-size-400: 16px;
+    --spectrum-list-view-end-edge-to-content: 6px;
+    --spectrum-list-view-item-bottom-corner-radius: var(--spectrum-corner-radius-medium-default);
+    --spectrum-list-view-item-top-corner-radius: var(--spectrum-corner-radius-medium-default);
+    --spectrum-list-view-minimum-height: 40px;
+    --spectrum-list-view-minimum-width: 200px;
+    --spectrum-logic-button-and-background-color: light-dark(rgb(59 99 251), rgb(64 105 253));
+    --spectrum-logic-button-and-background-color-hover: light-dark(rgb(29 62 207), rgb(105 149 254));
+    --spectrum-logic-button-and-border-color: light-dark(rgb(59 99 251), rgb(64 105 253));
+    --spectrum-logic-button-and-border-color-hover: light-dark(rgb(29 62 207), rgb(105 149 254));
+    --spectrum-logic-button-or-background-color: light-dark(rgb(217 35 97), rgb(207 31 92));
+    --spectrum-logic-button-or-background-color-hover: light-dark(rgb(163 5 62), rgb(255 51 119));
+    --spectrum-logic-button-or-border-color: light-dark(rgb(217 35 97), rgb(207 31 92));
+    --spectrum-logic-button-or-border-color-hover: light-dark(rgb(163 5 62), rgb(255 51 119));
+    --spectrum-magenta-100: light-dark(rgb(255 245 248), rgb(59 0 22));
+    --spectrum-magenta-200: light-dark(rgb(255 232 240), rgb(74 0 27));
+    --spectrum-magenta-300: light-dark(rgb(255 213 227), rgb(93 0 34));
+    --spectrum-magenta-400: light-dark(rgb(255 185 208), rgb(123 0 45));
+    --spectrum-magenta-500: light-dark(rgb(255 152 187), rgb(152 7 60));
+    --spectrum-magenta-600: light-dark(rgb(255 112 159), rgb(181 19 76));
+    --spectrum-magenta-700: light-dark(rgb(255 72 133), rgb(207 31 92));
+    --spectrum-magenta-800: light-dark(rgb(240 45 110), rgb(224 38 101));
+    --spectrum-magenta-900: light-dark(rgb(217 35 97), rgb(255 51 119));
+    --spectrum-magenta-1000: light-dark(rgb(186 22 80), rgb(255 96 149));
+    --spectrum-magenta-1100: light-dark(rgb(163 5 62), rgb(255 128 171));
+    --spectrum-magenta-1200: light-dark(rgb(136 0 51), rgb(255 163 194));
+    --spectrum-magenta-1300: light-dark(rgb(111 0 40), rgb(255 193 214));
+    --spectrum-magenta-1400: light-dark(rgb(86 0 30), rgb(255 220 232));
+    --spectrum-magenta-1500: light-dark(rgb(64 0 22), rgb(255 241 246));
+    --spectrum-magenta-1600: light-dark(rgb(35 0 12), rgb(255 255 255));
+    --spectrum-magenta-background-color-default: light-dark(rgb(217 35 97), rgb(224 38 101));
+    --spectrum-magenta-subtle-background-color-default: light-dark(rgb(255 232 240), rgb(93 0 34));
+    --spectrum-magenta-visual-color: light-dark(rgb(240 45 110), rgb(255 51 119));
+    --spectrum-medium-font-weight: 500;
+    --spectrum-menu-item-background-color-default: light-dark(rgb(233 233 233), rgb(50 50 50));
+    --spectrum-menu-item-background-color-disabled: light-dark(rgb(233 233 233), rgb(50 50 50));
+    --spectrum-menu-item-background-color-down: light-dark(rgb(233 233 233), rgb(50 50 50));
+    --spectrum-menu-item-background-color-hover: light-dark(rgb(233 233 233), rgb(50 50 50));
+    --spectrum-menu-item-background-color-keyboard-focus: light-dark(rgb(233 233 233), rgb(50 50 50));
+    --spectrum-menu-item-background-opacity: 0%;
+    --spectrum-menu-item-checkmark-height-extra-large: 14px;
+    --spectrum-menu-item-checkmark-height-large: 12px;
+    --spectrum-menu-item-checkmark-height-medium: 10px;
+    --spectrum-menu-item-checkmark-height-small: 10px;
+    --spectrum-menu-item-checkmark-width-extra-large: 14px;
+    --spectrum-menu-item-checkmark-width-large: 12px;
+    --spectrum-menu-item-checkmark-width-medium: 10px;
+    --spectrum-menu-item-checkmark-width-small: 10px;
+    --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px;
+    --spectrum-menu-item-edge-to-content-not-selected-large: 38px;
+    --spectrum-menu-item-edge-to-content-not-selected-medium: 32px;
+    --spectrum-menu-item-edge-to-content-not-selected-small: 28px;
+
+    /** @deprecated */
+    --spectrum-menu-item-label-to-description: var(--spectrum-menu-item-label-to-description-medium);
+    --spectrum-menu-item-label-to-description-extra-large: 2px;
+    --spectrum-menu-item-label-to-description-large: 2px;
+    --spectrum-menu-item-label-to-description-medium: 1px;
+    --spectrum-menu-item-label-to-description-small: 1px;
+    --spectrum-menu-item-section-divider-height: 12px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
+    --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px;
+    --spectrum-menu-item-top-to-disclosure-icon-large: 14px;
+    --spectrum-menu-item-top-to-disclosure-icon-medium: 11px;
+    --spectrum-menu-item-top-to-disclosure-icon-small: 7px;
+    --spectrum-menu-item-top-to-selected-icon-extra-large: 17px;
+    --spectrum-menu-item-top-to-selected-icon-large: 14px;
+    --spectrum-menu-item-top-to-selected-icon-medium: 11px;
+    --spectrum-menu-item-top-to-selected-icon-small: 7px;
+    --spectrum-menu-item-top-to-thumbnail-extra-large: 11px;
+    --spectrum-menu-item-top-to-thumbnail-large: 10px;
+    --spectrum-menu-item-top-to-thumbnail-medium: 9px;
+    --spectrum-menu-item-top-to-thumbnail-small: 8px;
+    --spectrum-menu-section-header-to-description-extra-large: 2px;
+    --spectrum-menu-section-header-to-description-large: 2px;
+    --spectrum-menu-section-header-to-description-medium: 1px;
+    --spectrum-menu-section-header-to-description-small: 1px;
+
+    /** @deprecated Token renamed, use `--spectrum-meter-width` */
+    --spectrum-meter-default-width: var(--spectrum-meter-width);
+    --spectrum-meter-maximum-width: 768px;
+    --spectrum-meter-minimum-width: 48px;
+    --spectrum-meter-thickness-extra-large: 10px;
+    --spectrum-meter-thickness-large: 8px;
+    --spectrum-meter-thickness-medium: 6px;
+    --spectrum-meter-thickness-small: 4px;
+    --spectrum-meter-width: 192px;
+    --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px;
+    --spectrum-navigational-indicator-top-to-back-icon-large: 12px;
+    --spectrum-navigational-indicator-top-to-back-icon-medium: 9px;
+    --spectrum-navigational-indicator-top-to-back-icon-small: 6px;
+    --spectrum-negative-background-color-default: light-dark(rgb(215 50 32), rgb(223 52 34));
+    --spectrum-negative-background-color-down: light-dark(rgb(183 40 24), rgb(205 46 29));
+    --spectrum-negative-background-color-hover: light-dark(rgb(183 40 24), rgb(205 46 29));
+    --spectrum-negative-background-color-key-focus: light-dark(rgb(183 40 24), rgb(205 46 29));
+    --spectrum-negative-border-color-default: light-dark(rgb(215 50 32), rgb(252 67 46));
+    --spectrum-negative-border-color-down: light-dark(rgb(156 33 19), rgb(255 134 120));
+    --spectrum-negative-border-color-focus: light-dark(rgb(183 40 24), rgb(255 103 86));
+    --spectrum-negative-border-color-focus-hover: light-dark(rgb(156 33 19), rgb(255 134 120));
+    --spectrum-negative-border-color-hover: light-dark(rgb(183 40 24), rgb(255 103 86));
+    --spectrum-negative-border-color-key-focus: light-dark(rgb(183 40 24), rgb(255 103 86));
+    --spectrum-negative-color-100: light-dark(rgb(255 246 245), rgb(54 10 3));
+    --spectrum-negative-color-200: light-dark(rgb(255 235 232), rgb(68 13 5));
+    --spectrum-negative-color-300: light-dark(rgb(255 214 209), rgb(87 17 7));
+    --spectrum-negative-color-400: light-dark(rgb(255 188 180), rgb(115 24 11));
+    --spectrum-negative-color-500: light-dark(rgb(255 157 145), rgb(147 31 17));
+    --spectrum-negative-color-600: light-dark(rgb(255 118 101), rgb(177 38 23));
+    --spectrum-negative-color-700: light-dark(rgb(255 81 61), rgb(205 46 29));
+    --spectrum-negative-color-800: light-dark(rgb(240 56 35), rgb(223 52 34));
+    --spectrum-negative-color-900: light-dark(rgb(215 50 32), rgb(252 67 46));
+    --spectrum-negative-color-1000: light-dark(rgb(183 40 24), rgb(255 103 86));
+    --spectrum-negative-color-1100: light-dark(rgb(156 33 19), rgb(255 134 120));
+    --spectrum-negative-color-1200: light-dark(rgb(129 27 14), rgb(255 167 157));
+    --spectrum-negative-color-1300: light-dark(rgb(104 21 10), rgb(255 196 189));
+    --spectrum-negative-color-1400: light-dark(rgb(80 16 6), rgb(255 222 219));
+    --spectrum-negative-color-1500: light-dark(rgb(59 11 4), rgb(255 242 240));
+    --spectrum-negative-color-1600: light-dark(rgb(29 5 2), rgb(255 255 255));
+    --spectrum-negative-content-color-default: light-dark(rgb(215 50 32), rgb(252 67 46));
+    --spectrum-negative-content-color-down: light-dark(rgb(183 40 24), rgb(255 103 86));
+    --spectrum-negative-content-color-hover: light-dark(rgb(183 40 24), rgb(255 103 86));
+    --spectrum-negative-content-color-key-focus: light-dark(rgb(183 40 24), rgb(255 103 86));
+
+    /** @deprecated */
+    --spectrum-negative-subdued-background-color-down: light-dark(rgb(255 214 209), rgb(87 17 7));
+
+    /** @deprecated */
+    --spectrum-negative-subdued-background-color-hover: light-dark(rgb(255 214 209), rgb(87 17 7));
+
+    /** @deprecated */
+    --spectrum-negative-subdued-background-color-key-focus: light-dark(rgb(255 214 209), rgb(87 17 7));
+    --spectrum-negative-subtle-background-color-default: light-dark(rgb(255 235 232), rgb(87 17 7));
+    --spectrum-negative-visual-color: light-dark(rgb(240 56 35), rgb(252 67 46));
+    --spectrum-neutral-background-color-default: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-neutral-background-color-down: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-background-color-hover: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-background-color-key-focus: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-background-color-selected-default: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-neutral-background-color-selected-down: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-background-color-selected-hover: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-background-color-selected-key-focus: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-content-color-default: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-neutral-content-color-down: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-content-color-focus: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-content-color-focus-hover: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-content-color-hover: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-content-color-key-focus: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-neutral-subdued-background-color-default: light-dark(rgb(80 80 80), rgb(109 109 109));
+    --spectrum-neutral-subdued-background-color-down: light-dark(rgb(41 41 41), rgb(68 68 68));
+    --spectrum-neutral-subdued-background-color-hover: light-dark(rgb(41 41 41), rgb(68 68 68));
+    --spectrum-neutral-subdued-background-color-key-focus: light-dark(rgb(41 41 41), rgb(68 68 68));
+    --spectrum-neutral-subdued-content-color-default: light-dark(rgb(80 80 80), rgb(175 175 175));
+    --spectrum-neutral-subdued-content-color-down: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-neutral-subdued-content-color-hover: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-neutral-subdued-content-color-key-focus: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-neutral-subdued-content-color-selected: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-neutral-subtle-background-color-default: light-dark(rgb(233 233 233), rgb(57 57 57));
+    --spectrum-neutral-visual-color: light-dark(rgb(143 143 143), rgb(138 138 138));
+    --spectrum-notice-background-color-default: light-dark(rgb(252 125 0), rgb(224 100 0));
+    --spectrum-notice-color-100: light-dark(rgb(255 246 231), rgb(49 16 0));
+    --spectrum-notice-color-200: light-dark(rgb(255 236 207), rgb(61 21 0));
+    --spectrum-notice-color-300: light-dark(rgb(255 218 158), rgb(80 27 0));
+    --spectrum-notice-color-400: light-dark(rgb(255 193 94), rgb(106 36 0));
+    --spectrum-notice-color-500: light-dark(rgb(255 162 19), rgb(135 47 0));
+    --spectrum-notice-color-600: light-dark(rgb(252 125 0), rgb(162 59 0));
+    --spectrum-notice-color-700: light-dark(rgb(232 106 0), rgb(185 73 0));
+    --spectrum-notice-color-800: light-dark(rgb(212 91 0), rgb(199 82 0));
+    --spectrum-notice-color-900: light-dark(rgb(194 78 0), rgb(224 100 0));
+    --spectrum-notice-color-1000: light-dark(rgb(167 62 0), rgb(243 117 0));
+    --spectrum-notice-color-1100: light-dark(rgb(144 51 0), rgb(255 137 0));
+    --spectrum-notice-color-1200: light-dark(rgb(118 41 0), rgb(255 173 45));
+    --spectrum-notice-color-1300: light-dark(rgb(95 32 0), rgb(255 201 116));
+    --spectrum-notice-color-1400: light-dark(rgb(73 24 0), rgb(255 225 178));
+    --spectrum-notice-color-1500: light-dark(rgb(52 18 0), rgb(255 243 225));
+    --spectrum-notice-color-1600: light-dark(rgb(25 8 0), rgb(255 255 255));
+    --spectrum-notice-subtle-background-color-default: light-dark(rgb(255 236 207), rgb(80 27 0));
+    --spectrum-notice-visual-color: light-dark(rgb(212 91 0), rgb(224 100 0));
+    --spectrum-number-field-minimum-width-multiplier: 1.25;
+    --spectrum-number-field-visual-to-in-field-stepper-extra-large: 8px;
+    --spectrum-number-field-visual-to-in-field-stepper-large: 7px;
+    --spectrum-number-field-visual-to-in-field-stepper-medium: 6px;
+    --spectrum-number-field-visual-to-in-field-stepper-small: 5px;
+    --spectrum-number-field-with-stepper-minimum-width-extra-large: 168px;
+    --spectrum-number-field-with-stepper-minimum-width-large: 144px;
+    --spectrum-number-field-with-stepper-minimum-width-medium: 120px;
+    --spectrum-number-field-with-stepper-minimum-width-small: 104px;
+    --spectrum-opacity-checkerboard-square-dark: light-dark(rgb(225 225 225), rgb(219 219 219));
+    --spectrum-opacity-checkerboard-square-light: var(--spectrum-white);
+    --spectrum-opacity-checkerboard-square-size: var(--spectrum-opacity-checkerboard-square-size-medium);
+    --spectrum-opacity-checkerboard-square-size-medium: 8px;
+    --spectrum-opacity-checkerboard-square-size-small: 4px;
+    --spectrum-opacity-disabled: 30%;
+    --spectrum-orange-100: light-dark(rgb(255 246 231), rgb(49 16 0));
+    --spectrum-orange-200: light-dark(rgb(255 236 207), rgb(61 21 0));
+    --spectrum-orange-300: light-dark(rgb(255 218 158), rgb(80 27 0));
+    --spectrum-orange-400: light-dark(rgb(255 193 94), rgb(106 36 0));
+    --spectrum-orange-500: light-dark(rgb(255 162 19), rgb(135 47 0));
+    --spectrum-orange-600: light-dark(rgb(252 125 0), rgb(162 59 0));
+    --spectrum-orange-700: light-dark(rgb(232 106 0), rgb(185 73 0));
+    --spectrum-orange-800: light-dark(rgb(212 91 0), rgb(199 82 0));
+    --spectrum-orange-900: light-dark(rgb(194 78 0), rgb(224 100 0));
+    --spectrum-orange-1000: light-dark(rgb(167 62 0), rgb(243 117 0));
+    --spectrum-orange-1100: light-dark(rgb(144 51 0), rgb(255 137 0));
+    --spectrum-orange-1200: light-dark(rgb(118 41 0), rgb(255 173 45));
+    --spectrum-orange-1300: light-dark(rgb(95 32 0), rgb(255 201 116));
+    --spectrum-orange-1400: light-dark(rgb(73 24 0), rgb(255 225 178));
+    --spectrum-orange-1500: light-dark(rgb(52 18 0), rgb(255 243 225));
+    --spectrum-orange-1600: light-dark(rgb(25 8 0), rgb(255 255 255));
+    --spectrum-orange-background-color-default: light-dark(rgb(252 125 0), rgb(224 100 0));
+    --spectrum-orange-subtle-background-color-default: light-dark(rgb(255 236 207), rgb(80 27 0));
+    --spectrum-orange-visual-color: light-dark(rgb(232 106 0), rgb(224 100 0));
+    --spectrum-overlay-color: var(--spectrum-black);
+    --spectrum-overlay-opacity: 40%;
+    --spectrum-pagination-item-inline-spacing: 5px;
+    --spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
+    --spectrum-picker-border-width: var(--spectrum-border-width-100);
+    --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px;
+
+    /** @deprecated Use `--spectrum-picker-end-edge-to-disclosure-icon-quiet` instead */
+    --spectrum-picker-end-edge-to-disclousure-icon-quiet: var(--spectrum-picker-end-edge-to-disclosure-icon-quiet);
+    --spectrum-picker-minimum-width-multiplier: 2;
+    --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px;
+    --spectrum-picker-visual-to-disclosure-icon-large: 9px;
+    --spectrum-picker-visual-to-disclosure-icon-medium: 8px;
+    --spectrum-picker-visual-to-disclosure-icon-small: 7px;
+    --spectrum-pink-100: light-dark(rgb(255 246 252), rgb(58 0 37));
+    --spectrum-pink-200: light-dark(rgb(255 232 247), rgb(71 0 44));
+    --spectrum-pink-300: light-dark(rgb(255 211 240), rgb(90 0 57));
+    --spectrum-pink-400: light-dark(rgb(255 181 230), rgb(115 7 75));
+    --spectrum-pink-500: light-dark(rgb(255 148 219), rgb(143 18 97));
+    --spectrum-pink-600: light-dark(rgb(255 103 204), rgb(171 29 119));
+    --spectrum-pink-700: light-dark(rgb(242 76 184), rgb(196 39 138));
+    --spectrum-pink-800: light-dark(rgb(228 52 163), rgb(213 45 151));
+    --spectrum-pink-900: light-dark(rgb(206 42 146), rgb(236 67 175));
+    --spectrum-pink-1000: light-dark(rgb(176 31 123), rgb(251 90 196));
+    --spectrum-pink-1100: light-dark(rgb(152 22 104), rgb(255 122 210));
+    --spectrum-pink-1200: light-dark(rgb(128 12 85), rgb(255 159 223));
+    --spectrum-pink-1300: light-dark(rgb(105 3 68), rgb(255 191 234));
+    --spectrum-pink-1400: light-dark(rgb(83 0 53), rgb(255 219 243));
+    --spectrum-pink-1500: light-dark(rgb(62 0 39), rgb(255 241 250));
+    --spectrum-pink-1600: light-dark(rgb(33 0 21), rgb(255 255 255));
+    --spectrum-pink-background-color-default: light-dark(rgb(206 42 146), rgb(213 45 151));
+    --spectrum-pink-subtle-background-color-default: light-dark(rgb(255 232 247), rgb(90 0 57));
+    --spectrum-pink-visual-color: light-dark(rgb(228 52 163), rgb(236 67 175));
+    --spectrum-popover-border-color: light-dark(rgb(255 255 255 / 0%), rgb(68 68 68));
+    --spectrum-popover-border-opacity: 0%;
+    --spectrum-popover-edge-to-content-area: var(--spectrum-spacing-100);
+    --spectrum-popover-tip-height: 8px;
+    --spectrum-popover-tip-width: 16px;
+
+    /** @deprecated Introduced as an error. Use --spectrum-popover-edge-to-content-area instead */
+    --spectrum-popover-top-to-content-area: var(--spectrum-popover-edge-to-content-area);
+    --spectrum-positive-background-color-default: light-dark(rgb(5 131 78), rgb(6 136 80));
+    --spectrum-positive-background-color-down: light-dark(rgb(3 110 69), rgb(4 124 75));
+    --spectrum-positive-background-color-hover: light-dark(rgb(3 110 69), rgb(4 124 75));
+    --spectrum-positive-background-color-key-focus: light-dark(rgb(3 110 69), rgb(4 124 75));
+    --spectrum-positive-color-100: light-dark(rgb(237 252 241), rgb(0 30 23));
+    --spectrum-positive-color-200: light-dark(rgb(215 247 225), rgb(0 38 29));
+    --spectrum-positive-color-300: light-dark(rgb(173 238 197), rgb(0 51 38));
+    --spectrum-positive-color-400: light-dark(rgb(107 227 162), rgb(0 68 48));
+    --spectrum-positive-color-500: light-dark(rgb(43 209 125), rgb(2 87 58));
+    --spectrum-positive-color-600: light-dark(rgb(18 184 103), rgb(3 106 67));
+    --spectrum-positive-color-700: light-dark(rgb(11 164 93), rgb(4 124 75));
+    --spectrum-positive-color-800: light-dark(rgb(7 147 85), rgb(6 136 80));
+    --spectrum-positive-color-900: light-dark(rgb(5 131 78), rgb(9 157 89));
+    --spectrum-positive-color-1000: light-dark(rgb(3 110 69), rgb(14 175 98));
+    --spectrum-positive-color-1100: light-dark(rgb(2 93 60), rgb(24 193 110));
+    --spectrum-positive-color-1200: light-dark(rgb(1 76 52), rgb(57 215 134));
+    --spectrum-positive-color-1300: light-dark(rgb(0 61 44), rgb(126 231 172));
+    --spectrum-positive-color-1400: light-dark(rgb(0 46 34), rgb(189 241 208));
+    --spectrum-positive-color-1500: light-dark(rgb(0 33 25), rgb(229 250 236));
+    --spectrum-positive-color-1600: light-dark(rgb(0 15 12), rgb(255 255 255));
+    --spectrum-positive-subtle-background-color-default: light-dark(rgb(215 247 225), rgb(0 51 38));
+    --spectrum-positive-visual-color: light-dark(rgb(7 147 85), rgb(9 157 89));
+    --spectrum-progress-bar-maximum-width: 768px;
+    --spectrum-progress-bar-minimum-width: 48px;
+    --spectrum-progress-bar-thickness-extra-large: 10px;
+    --spectrum-progress-bar-thickness-large: 8px;
+    --spectrum-progress-bar-thickness-medium: 6px;
+    --spectrum-progress-bar-thickness-small: 4px;
+    --spectrum-progress-circle-size-large: 64px;
+    --spectrum-progress-circle-size-medium: 32px;
+    --spectrum-progress-circle-size-small: 16px;
+    --spectrum-progress-circle-thickness-large: 4px;
+    --spectrum-progress-circle-thickness-medium: 3px;
+    --spectrum-progress-circle-thickness-small: 2px;
+    --spectrum-purple-100: light-dark(rgb(251 247 254), rgb(41 0 79));
+    --spectrum-purple-200: light-dark(rgb(244 235 252), rgb(50 0 96));
+    --spectrum-purple-300: light-dark(rgb(235 218 249), rgb(64 0 122));
+    --spectrum-purple-400: light-dark(rgb(221 193 246), rgb(83 0 159));
+    --spectrum-purple-500: light-dark(rgb(208 167 243), rgb(107 6 195));
+    --spectrum-purple-600: light-dark(rgb(191 138 238), rgb(130 34 215));
+    --spectrum-purple-700: light-dark(rgb(178 114 235), rgb(148 62 224));
+    --spectrum-purple-800: light-dark(rgb(166 92 231), rgb(157 78 228));
+    --spectrum-purple-900: light-dark(rgb(154 71 226), rgb(173 105 233));
+    --spectrum-purple-1000: light-dark(rgb(134 40 217), rgb(186 127 237));
+    --spectrum-purple-1100: light-dark(rgb(115 13 204), rgb(197 149 240));
+    --spectrum-purple-1200: light-dark(rgb(93 0 177), rgb(212 176 244));
+    --spectrum-purple-1300: light-dark(rgb(75 0 144), rgb(225 201 247));
+    --spectrum-purple-1400: light-dark(rgb(59 0 111), rgb(238 224 250));
+    --spectrum-purple-1500: light-dark(rgb(44 0 84), rgb(248 243 253));
+    --spectrum-purple-1600: light-dark(rgb(23 0 45), rgb(255 255 255));
+    --spectrum-purple-background-color-default: light-dark(rgb(154 71 226), rgb(157 78 228));
+    --spectrum-purple-subtle-background-color-default: light-dark(rgb(244 235 252), rgb(64 0 122));
+    --spectrum-purple-visual-color: light-dark(rgb(166 92 231), rgb(173 105 233));
+    --spectrum-radio-button-control-size-extra-large: 18px;
+    --spectrum-radio-button-control-size-large: 16px;
+    --spectrum-radio-button-control-size-medium: 14px;
+    --spectrum-radio-button-control-size-small: 12px;
+    --spectrum-radio-button-selection-indicator: 4px;
+    --spectrum-radio-button-top-to-control-extra-large: 15px;
+    --spectrum-radio-button-top-to-control-large: 12px;
+    --spectrum-radio-button-top-to-control-medium: 9px;
+    --spectrum-radio-button-top-to-control-small: 6px;
+    --spectrum-rating-bottom-to-content-area-medium: 6px;
+    --spectrum-rating-bottom-to-content-area-small: var(--spectrum-spacing-75);
+    --spectrum-rating-edge-to-content-area-medium: 6px;
+    --spectrum-rating-edge-to-content-area-small: var(--spectrum-spacing-75);
+    --spectrum-rating-height-medium: var(--spectrum-component-height-100);
+    --spectrum-rating-height-small: var(--spectrum-component-height-75);
+    --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+
+    /** @deprecated */
+    --spectrum-rating-indicator-to-icon: 4px;
+
+    /** @deprecated */
+    --spectrum-rating-indicator-width: 18px;
+    --spectrum-rating-top-to-content-area-medium: 6px;
+    --spectrum-rating-top-to-content-area-small: var(--spectrum-spacing-75);
+    --spectrum-rating-width-medium: 128px;
+    --spectrum-rating-width-small: 104px;
+    --spectrum-red-100: light-dark(rgb(255 246 245), rgb(54 10 3));
+    --spectrum-red-200: light-dark(rgb(255 235 232), rgb(68 13 5));
+    --spectrum-red-300: light-dark(rgb(255 214 209), rgb(87 17 7));
+    --spectrum-red-400: light-dark(rgb(255 188 180), rgb(115 24 11));
+    --spectrum-red-500: light-dark(rgb(255 157 145), rgb(147 31 17));
+    --spectrum-red-600: light-dark(rgb(255 118 101), rgb(177 38 23));
+    --spectrum-red-700: light-dark(rgb(255 81 61), rgb(205 46 29));
+    --spectrum-red-800: light-dark(rgb(240 56 35), rgb(223 52 34));
+    --spectrum-red-900: light-dark(rgb(215 50 32), rgb(252 67 46));
+    --spectrum-red-1000: light-dark(rgb(183 40 24), rgb(255 103 86));
+    --spectrum-red-1100: light-dark(rgb(156 33 19), rgb(255 134 120));
+    --spectrum-red-1200: light-dark(rgb(129 27 14), rgb(255 167 157));
+    --spectrum-red-1300: light-dark(rgb(104 21 10), rgb(255 196 189));
+    --spectrum-red-1400: light-dark(rgb(80 16 6), rgb(255 222 219));
+    --spectrum-red-1500: light-dark(rgb(59 11 4), rgb(255 242 240));
+    --spectrum-red-1600: light-dark(rgb(29 5 2), rgb(255 255 255));
+    --spectrum-red-background-color-default: light-dark(rgb(215 50 32), rgb(223 52 34));
+    --spectrum-red-subtle-background-color-default: light-dark(rgb(255 235 232), rgb(87 17 7));
+    --spectrum-red-visual-color: light-dark(rgb(240 56 35), rgb(205 46 29));
+    --spectrum-regular-font-weight: 400;
+    --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-sans-serif-font-family: adobe clean;
+    --spectrum-seafoam-100: light-dark(rgb(235 251 246), rgb(0 30 27));
+    --spectrum-seafoam-200: light-dark(rgb(211 246 234), rgb(0 39 35));
+    --spectrum-seafoam-300: light-dark(rgb(169 237 216), rgb(0 50 44));
+    --spectrum-seafoam-400: light-dark(rgb(92 225 194), rgb(0 67 59));
+    --spectrum-seafoam-500: light-dark(rgb(16 207 169), rgb(2 86 75));
+    --spectrum-seafoam-600: light-dark(rgb(13 181 149), rgb(4 105 89));
+    --spectrum-seafoam-700: light-dark(rgb(11 162 134), rgb(6 122 103));
+    --spectrum-seafoam-800: light-dark(rgb(9 144 120), rgb(8 134 112));
+    --spectrum-seafoam-900: light-dark(rgb(7 129 109), rgb(10 154 128));
+    --spectrum-seafoam-1000: light-dark(rgb(5 108 92), rgb(12 173 142));
+    --spectrum-seafoam-1100: light-dark(rgb(3 92 80), rgb(14 190 156));
+    --spectrum-seafoam-1200: light-dark(rgb(1 75 67), rgb(29 214 176));
+    --spectrum-seafoam-1300: light-dark(rgb(0 60 54), rgb(122 229 203));
+    --spectrum-seafoam-1400: light-dark(rgb(0 46 40), rgb(186 241 222));
+    --spectrum-seafoam-1500: light-dark(rgb(0 33 29), rgb(229 249 243));
+    --spectrum-seafoam-1600: light-dark(rgb(0 15 14), rgb(255 255 255));
+    --spectrum-seafoam-background-color-default: light-dark(rgb(7 129 109), rgb(8 134 112));
+    --spectrum-seafoam-subtle-background-color-default: light-dark(rgb(211 246 234), rgb(0 50 44));
+    --spectrum-seafoam-visual-color: light-dark(rgb(11 162 134), rgb(8 134 112));
+    --spectrum-search-field-minimum-width-multiplier: 4;
+    --spectrum-segmented-control-item-height: var(--spectrum-component-height-100);
+    --spectrum-segmented-control-item-maximum-width: 265px;
+    --spectrum-segmented-control-selection-border-width: var(--spectrum-border-width-200);
+    --spectrum-segmented-text-field-gap: 0px;
+    --spectrum-segmented-text-field-rounding: 2px;
+    --spectrum-select-box-edge-to-checkbox: 12px;
+    --spectrum-select-box-horizontal-end-to-content: 32px;
+    --spectrum-select-box-horizontal-illustration-to-label: 10px;
+    --spectrum-select-box-horizontal-label-to-description: 2px;
+    --spectrum-select-box-horizontal-minimum-height: 80px;
+    --spectrum-select-box-horizontal-start-to-content: 24px;
+    --spectrum-select-box-horizontal-top-to-content: 16px;
+    --spectrum-select-box-horizontal-width: 368px;
+    --spectrum-select-box-selected-border-color: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-select-box-top-to-checkbox: 4px;
+    --spectrum-select-box-vertical-edge-to-content: 24px;
+    --spectrum-select-box-vertical-height: 170px;
+    --spectrum-select-box-vertical-illustration-to-label: 8px;
+    --spectrum-serif-font: var(--spectrum-serif-font-family-stack);
+    --spectrum-serif-font-family: adobe clean serif;
+    --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", georgia, serif;
+    --spectrum-side-focus-indicator: 4px;
+    --spectrum-side-label-character-count-to-field: 12px;
+    --spectrum-side-label-character-count-top-margin-extra-large: 0px;
+    --spectrum-side-label-character-count-top-margin-large: 0px;
+    --spectrum-side-label-character-count-top-margin-medium: 0px;
+    --spectrum-side-label-character-count-top-margin-small: 0px;
+    --spectrum-side-navigation-bottom-to-text: 8px;
+    --spectrum-side-navigation-header-to-item: 8px;
+    --spectrum-side-navigation-item-to-header: 24px;
+    --spectrum-side-navigation-item-to-item: 4px;
+    --spectrum-side-navigation-maximum-width: 240px;
+    --spectrum-side-navigation-minimum-width: 160px;
+    --spectrum-side-navigation-second-level-edge-to-text: 24px;
+    --spectrum-side-navigation-third-level-edge-to-text: 36px;
+    --spectrum-side-navigation-width: 192px;
+    --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px;
+    --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px;
+    --spectrum-silver-100: light-dark(rgb(247 247 247), rgb(26 26 26));
+    --spectrum-silver-200: light-dark(rgb(239 239 239), rgb(33 33 33));
+    --spectrum-silver-300: light-dark(rgb(223 223 223), rgb(44 44 44));
+    --spectrum-silver-400: light-dark(rgb(204 204 204), rgb(59 59 59));
+    --spectrum-silver-500: light-dark(rgb(183 183 183), rgb(76 76 76));
+    --spectrum-silver-600: light-dark(rgb(160 160 160), rgb(92 92 92));
+    --spectrum-silver-700: light-dark(rgb(143 143 143), rgb(108 108 108));
+    --spectrum-silver-800: light-dark(rgb(128 128 128), rgb(118 118 118));
+    --spectrum-silver-900: light-dark(rgb(114 114 114), rgb(137 137 137));
+    --spectrum-silver-1000: light-dark(rgb(96 96 96), rgb(152 152 152));
+    --spectrum-silver-1100: light-dark(rgb(81 81 81), rgb(169 169 169));
+    --spectrum-silver-1200: light-dark(rgb(66 66 66), rgb(190 190 190));
+    --spectrum-silver-1300: light-dark(rgb(52 52 52), rgb(211 211 211));
+    --spectrum-silver-1400: light-dark(rgb(39 39 39), rgb(229 229 229));
+    --spectrum-silver-1500: light-dark(rgb(28 28 28), rgb(244 244 244));
+    --spectrum-silver-1600: light-dark(rgb(12 12 12), rgb(255 255 255));
+    --spectrum-silver-background-color-default: light-dark(rgb(114 114 114), rgb(118 118 118));
+    --spectrum-silver-subtle-background-color-default: light-dark(rgb(239 239 239), rgb(44 44 44));
+    --spectrum-silver-visual-color: light-dark(rgb(128 128 128), rgb(137 137 137));
+    --spectrum-single-calendar-popover-minimum-height: 320px;
+    --spectrum-single-calendar-popover-minimum-width: 320px;
+
+    /** @deprecated */
+    --spectrum-slider-bottom-to-handle-extra-large: 14px;
+
+    /** @deprecated */
+    --spectrum-slider-bottom-to-handle-large: 11px;
+
+    /** @deprecated */
+    --spectrum-slider-bottom-to-handle-medium: 8px;
+
+    /** @deprecated */
+    --spectrum-slider-bottom-to-handle-small: 5px;
+
+    /** @deprecated */
+    --spectrum-slider-control-height-extra-large: 20px;
+
+    /** @deprecated */
+    --spectrum-slider-control-height-large: 18px;
+
+    /** @deprecated */
+    --spectrum-slider-control-height-medium: 16px;
+
+    /** @deprecated */
+    --spectrum-slider-control-height-small: 14px;
+    --spectrum-slider-control-to-field-label-editable-extra-large: -20px;
+    --spectrum-slider-control-to-field-label-editable-large: -16px;
+    --spectrum-slider-control-to-field-label-editable-medium: -12px;
+    --spectrum-slider-control-to-field-label-editable-small: -4px;
+    --spectrum-slider-control-to-field-label-extra-large: -20px;
+    --spectrum-slider-control-to-field-label-large: -16px;
+    --spectrum-slider-control-to-field-label-medium: -12px;
+    --spectrum-slider-control-to-field-label-side-extra-large: 24px;
+    --spectrum-slider-control-to-field-label-side-large: 20px;
+    --spectrum-slider-control-to-field-label-side-medium: 16px;
+    --spectrum-slider-control-to-field-label-side-small: 16px;
+    --spectrum-slider-control-to-field-label-small: -4px;
+    --spectrum-slider-control-to-text-field-extra-large: 24px;
+    --spectrum-slider-control-to-text-field-large: 20px;
+    --spectrum-slider-control-to-text-field-medium: 16px;
+    --spectrum-slider-control-to-text-field-small: 16px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-border-width-down-extra-large: 8px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-border-width-down-large: 7px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-border-width-down-medium: 6px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-border-width-down-small: 5px;
+    --spectrum-slider-handle-extra-large: 24px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-gap: 4px;
+    --spectrum-slider-handle-height-precision-extra-large: 26px;
+    --spectrum-slider-handle-height-precision-large: 24px;
+    --spectrum-slider-handle-height-precision-medium: 22px;
+    --spectrum-slider-handle-height-precision-small: 20px;
+    --spectrum-slider-handle-large: 22px;
+    --spectrum-slider-handle-medium: 20px;
+    --spectrum-slider-handle-precision-width: 6px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-size-extra-large: 20px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-size-large: 18px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-size-medium: 16px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-size-small: 14px;
+    --spectrum-slider-handle-small: 18px;
+    --spectrum-slider-ramp-track-height: 16px;
+    --spectrum-slider-tick-mark-height: 10px;
+    --spectrum-slider-track-height-large: 16px;
+    --spectrum-slider-track-height-medium: 4px;
+
+    /** @deprecated */
+    --spectrum-slider-track-thickness: 2px;
+    --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-stack-item-action-to-navigation: 4px;
+    --spectrum-stack-item-background-color-down: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-stack-item-background-color-hover: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-stack-item-background-color-key-focus: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-stack-item-drag-handle-to-control: 8px;
+    --spectrum-stack-item-edge-to-control: 12px;
+    --spectrum-stack-item-edge-to-visual: 12px;
+    --spectrum-stack-item-header-minimum-width: 200px;
+    --spectrum-stack-item-header-to-item: 0px;
+    --spectrum-stack-item-item-to-item: -1px;
+    --spectrum-stack-item-selected-background-color-default: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-stack-item-selected-background-color-down: light-dark(rgb(225 225 225), rgb(50 50 50));
+    --spectrum-stack-item-selected-background-color-hover: light-dark(rgb(225 225 225), rgb(50 50 50));
+    --spectrum-stack-item-selected-background-color-key-focus: light-dark(rgb(225 225 225), rgb(50 50 50));
+    --spectrum-stack-item-selected-background-opacity-emphasized: 10%;
+    --spectrum-stack-item-selected-background-opacity-emphasized-down: 15%;
+    --spectrum-stack-item-selected-background-opacity-emphasized-hover: 15%;
+    --spectrum-stack-item-selected-background-opacity-emphasized-key-focus: 15%;
+    --spectrum-stack-item-start-edge-to-content: 4px;
+    --spectrum-stack-item-text-to-control: 8px;
+    --spectrum-standard-dialog-body-font-size: var(--spectrum-body-size-m);
+    --spectrum-standard-dialog-maximum-width-large: 640px;
+    --spectrum-standard-dialog-maximum-width-medium: 480px;
+    --spectrum-standard-dialog-maximum-width-small: 400px;
+    --spectrum-standard-dialog-minimum-width: 288px;
+    --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500);
+    --spectrum-standard-dialog-title-font-size: var(--spectrum-title-size-xxl);
+    --spectrum-standard-panel-edge-to-close-button-compact: 3px;
+    --spectrum-standard-panel-edge-to-close-button-regular: 7px;
+    --spectrum-standard-panel-edge-to-close-button-spacious: 15px;
+    --spectrum-standard-panel-gripper-color: light-dark(rgb(225 225 225), rgb(50 50 50));
+    --spectrum-standard-panel-gripper-color-drag: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-standard-panel-maximum-width: 400px;
+    --spectrum-standard-panel-minimum-width: 200px;
+    --spectrum-standard-panel-title-font-size: var(--spectrum-title-size-s);
+    --spectrum-standard-panel-top-to-close-button-compact: 5px;
+    --spectrum-standard-panel-top-to-close-button-regular: 9px;
+    --spectrum-standard-panel-top-to-close-button-spacious: 17px;
+    --spectrum-standard-panel-width: 260px;
+    --spectrum-static-black-focus-indicator-color: var(--spectrum-black);
+    --spectrum-static-black-text-color: var(--spectrum-black);
+    --spectrum-static-black-track-color: var(--spectrum-transparent-black-300);
+    --spectrum-static-black-track-indicator-color: var(--spectrum-transparent-black-900);
+    --spectrum-static-blue-900: light-dark(rgb(59 99 251), rgb(59 99 251));
+    --spectrum-static-blue-1000: light-dark(rgb(39 77 234), rgb(39 77 234));
+    --spectrum-static-fuchsia-900: light-dark(rgb(181 57 200), rgb(181 57 200));
+    --spectrum-static-fuchsia-1000: light-dark(rgb(156 40 175), rgb(156 40 175));
+    --spectrum-static-indigo-900: light-dark(rgb(113 85 250), rgb(113 85 250));
+    --spectrum-static-indigo-1000: light-dark(rgb(99 56 238), rgb(99 56 238));
+    --spectrum-static-magenta-900: light-dark(rgb(217 35 97), rgb(217 35 97));
+    --spectrum-static-magenta-1000: light-dark(rgb(186 22 80), rgb(186 22 80));
+    --spectrum-static-red-900: light-dark(rgb(215 50 32), rgb(215 50 32));
+    --spectrum-static-red-1000: light-dark(rgb(183 40 24), rgb(183 40 24));
+    --spectrum-static-white-focus-indicator-color: var(--spectrum-white);
+    --spectrum-static-white-text-color: var(--spectrum-white);
+    --spectrum-static-white-track-color: var(--spectrum-transparent-white-300);
+    --spectrum-static-white-track-indicator-color: var(--spectrum-transparent-white-900);
+    --spectrum-status-light-dot-size-extra-large: 14px;
+    --spectrum-status-light-dot-size-large: 12px;
+    --spectrum-status-light-dot-size-medium: 10px;
+    --spectrum-status-light-dot-size-small: 8px;
+    --spectrum-status-light-text-to-visual-75: var(--spectrum-text-to-visual-75);
+    --spectrum-status-light-text-to-visual-100: var(--spectrum-text-to-visual-100);
+    --spectrum-status-light-text-to-visual-200: var(--spectrum-text-to-visual-200);
+    --spectrum-status-light-text-to-visual-300: var(--spectrum-text-to-visual-300);
+    --spectrum-status-light-top-to-dot-extra-large: 17px;
+    --spectrum-status-light-top-to-dot-large: 14px;
+    --spectrum-status-light-top-to-dot-medium: 11px;
+    --spectrum-status-light-top-to-dot-small: 8px;
+    --spectrum-steplist-bottom-to-text: 1px;
+    --spectrum-steplist-current-marker-color-key-focus: light-dark(rgb(75 117 255), rgb(52 91 248));
+    --spectrum-steplist-step-default-height-extra-large: 78px;
+    --spectrum-steplist-step-default-height-large: 70px;
+    --spectrum-steplist-step-default-height-medium: 54px;
+    --spectrum-steplist-step-default-height-small: 46px;
+    --spectrum-steplist-step-default-width-extra-large: 78px;
+    --spectrum-steplist-step-default-width-large: 70px;
+    --spectrum-steplist-step-default-width-medium: 54px;
+    --spectrum-steplist-step-default-width-small: 46px;
+    --spectrum-steplist-step-to-track-size-extra-large: 9px;
+    --spectrum-steplist-step-to-track-size-large: 8px;
+    --spectrum-steplist-step-to-track-size-medium: 7px;
+    --spectrum-steplist-step-to-track-size-small: 6px;
+    --spectrum-steplist-track-thickness-medium: 2px;
+    --spectrum-steplist-visual-size-extra-large: 32px;
+    --spectrum-steplist-visual-size-large: 24px;
+    --spectrum-steplist-visual-size-medium: 16px;
+    --spectrum-steplist-visual-size-small: 8px;
+    --spectrum-swatch-border-color: light-dark(rgb(0 0 0), rgb(255 255 255));
+    --spectrum-swatch-border-color-light: rgb(0 0 0 / 20%);
+    --spectrum-swatch-border-opacity: 42%;
+    --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black);
+    --spectrum-swatch-disabled-icon-border-opacity: 42%;
+    --spectrum-swatch-group-border-color: light-dark(rgb(0 0 0), rgb(255 255 255));
+    --spectrum-swatch-group-border-opacity: 20%;
+    --spectrum-swatch-group-spacing-spacious: 6px;
+    --spectrum-swatch-rectangle-width-multiplier: 2;
+    --spectrum-swatch-size-extra-small: 16px;
+    --spectrum-swatch-size-large: 40px;
+    --spectrum-swatch-size-medium: 32px;
+    --spectrum-swatch-size-small: 24px;
+    --spectrum-swatch-slash-thickness-extra-small: 2px;
+    --spectrum-swatch-slash-thickness-large: 5px;
+    --spectrum-swatch-slash-thickness-medium: 4px;
+    --spectrum-swatch-slash-thickness-small: 3px;
+    --spectrum-switch-control-height-extra-large: 20px;
+    --spectrum-switch-control-height-large: 18px;
+    --spectrum-switch-control-height-medium: 16px;
+    --spectrum-switch-control-height-small: 14px;
+    --spectrum-switch-control-width-extra-large: 34px;
+    --spectrum-switch-control-width-large: 30px;
+    --spectrum-switch-control-width-medium: 26px;
+    --spectrum-switch-control-width-small: 22px;
+    --spectrum-switch-handle-selected-size-extra-large: 14px;
+    --spectrum-switch-handle-selected-size-large: 12px;
+    --spectrum-switch-handle-selected-size-medium: 10px;
+    --spectrum-switch-handle-selected-size-small: 8px;
+    --spectrum-switch-handle-size-extra-large: 12px;
+    --spectrum-switch-handle-size-large: 10px;
+    --spectrum-switch-handle-size-medium: 8px;
+    --spectrum-switch-handle-size-small: 6px;
+    --spectrum-switch-top-to-control-extra-large: 15px;
+    --spectrum-switch-top-to-control-large: 12px;
+    --spectrum-switch-top-to-control-medium: 9px;
+    --spectrum-switch-top-to-control-small: 6px;
+    --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px;
+    --spectrum-tab-item-bottom-to-text-compact-large: 12px;
+    --spectrum-tab-item-bottom-to-text-compact-medium: 8px;
+    --spectrum-tab-item-bottom-to-text-compact-small: 5px;
+    --spectrum-tab-item-bottom-to-text-extra-large: 20px;
+    --spectrum-tab-item-bottom-to-text-large: 18px;
+    --spectrum-tab-item-bottom-to-text-medium: 14px;
+    --spectrum-tab-item-bottom-to-text-small: 12px;
+    --spectrum-tab-item-compact-height-extra-large: var(--spectrum-component-height-300);
+    --spectrum-tab-item-compact-height-large: var(--spectrum-component-height-200);
+    --spectrum-tab-item-compact-height-medium: var(--spectrum-component-height-100);
+    --spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75);
+    --spectrum-tab-item-focus-indicator-gap-extra-large: 10px;
+    --spectrum-tab-item-focus-indicator-gap-large: 9px;
+    --spectrum-tab-item-focus-indicator-gap-medium: 8px;
+    --spectrum-tab-item-focus-indicator-gap-small: 7px;
+    --spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500);
+    --spectrum-tab-item-height-large: var(--spectrum-component-height-400);
+    --spectrum-tab-item-height-medium: var(--spectrum-component-height-300);
+    --spectrum-tab-item-height-small: var(--spectrum-component-height-200);
+    --spectrum-tab-item-start-to-edge-extra-large: 13px;
+    --spectrum-tab-item-start-to-edge-large: 13px;
+    --spectrum-tab-item-start-to-edge-medium: 12px;
+    --spectrum-tab-item-start-to-edge-quiet: 0px;
+    --spectrum-tab-item-start-to-edge-small: 12px;
+    --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px;
+    --spectrum-tab-item-to-tab-item-horizontal-large: 27px;
+    --spectrum-tab-item-to-tab-item-horizontal-medium: 24px;
+    --spectrum-tab-item-to-tab-item-horizontal-small: 21px;
+    --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px;
+    --spectrum-tab-item-to-tab-item-vertical-large: 5px;
+    --spectrum-tab-item-to-tab-item-vertical-medium: 4px;
+    --spectrum-tab-item-to-tab-item-vertical-small: 4px;
+    --spectrum-tab-item-top-to-text-compact-extra-large: 12px;
+    --spectrum-tab-item-top-to-text-compact-large: 10px;
+    --spectrum-tab-item-top-to-text-compact-medium: 6px;
+    --spectrum-tab-item-top-to-text-compact-small: 4px;
+    --spectrum-tab-item-top-to-text-extra-large: 19px;
+    --spectrum-tab-item-top-to-text-large: 16px;
+    --spectrum-tab-item-top-to-text-medium: 14px;
+    --spectrum-tab-item-top-to-text-small: 11px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px;
+    --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px;
+    --spectrum-tab-item-top-to-workflow-icon-large: 17px;
+    --spectrum-tab-item-top-to-workflow-icon-medium: 15px;
+    --spectrum-tab-item-top-to-workflow-icon-small: 13px;
+    --spectrum-table-border-divider-width: 1px;
+    --spectrum-table-checkbox-to-text: 24px;
+    --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px;
+    --spectrum-table-column-header-row-bottom-to-text-large: 10px;
+    --spectrum-table-column-header-row-bottom-to-text-medium: 8px;
+    --spectrum-table-column-header-row-bottom-to-text-small: 9px;
+    --spectrum-table-column-header-row-top-to-text-extra-large: 13px;
+    --spectrum-table-column-header-row-top-to-text-large: 10px;
+    --spectrum-table-column-header-row-top-to-text-medium: 6px;
+    --spectrum-table-column-header-row-top-to-text-small: 8px;
+    --spectrum-table-edge-to-content: 16px;
+    --spectrum-table-header-row-checkbox-to-top-extra-large: 15px;
+    --spectrum-table-header-row-checkbox-to-top-large: 12px;
+    --spectrum-table-header-row-checkbox-to-top-medium: 8px;
+    --spectrum-table-header-row-checkbox-to-top-small: 10px;
+    --spectrum-table-row-bottom-to-text-extra-large: 17px;
+    --spectrum-table-row-bottom-to-text-extra-large-compact: var(--spectrum-component-bottom-to-text-300);
+    --spectrum-table-row-bottom-to-text-extra-large-regular: var(--spectrum-table-row-bottom-to-text-extra-large);
+    --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px;
+    --spectrum-table-row-bottom-to-text-large: 14px;
+    --spectrum-table-row-bottom-to-text-large-compact: var(--spectrum-component-bottom-to-text-200);
+    --spectrum-table-row-bottom-to-text-large-regular: var(--spectrum-table-row-bottom-to-text-large);
+    --spectrum-table-row-bottom-to-text-large-spacious: 18px;
+    --spectrum-table-row-bottom-to-text-medium: 13px;
+    --spectrum-table-row-bottom-to-text-medium-compact: var(--spectrum-component-bottom-to-text-100);
+    --spectrum-table-row-bottom-to-text-medium-regular: var(--spectrum-table-row-bottom-to-text-medium);
+    --spectrum-table-row-bottom-to-text-medium-spacious: 16px;
+    --spectrum-table-row-bottom-to-text-small: 9px;
+    --spectrum-table-row-bottom-to-text-small-compact: var(--spectrum-component-bottom-to-text-75);
+    --spectrum-table-row-bottom-to-text-small-regular: var(--spectrum-table-row-bottom-to-text-small);
+    --spectrum-table-row-bottom-to-text-small-spacious: 13px;
+    --spectrum-table-row-checkbox-to-top-extra-large: 19px;
+    --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px;
+    --spectrum-table-row-checkbox-to-top-extra-large-regular: var(--spectrum-table-row-checkbox-to-top-extra-large);
+    --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px;
+    --spectrum-table-row-checkbox-to-top-large: 16px;
+    --spectrum-table-row-checkbox-to-top-large-compact: 12px;
+    --spectrum-table-row-checkbox-to-top-large-regular: var(--spectrum-table-row-checkbox-to-top-large);
+    --spectrum-table-row-checkbox-to-top-large-spacious: 20px;
+    --spectrum-table-row-checkbox-to-top-medium: 12px;
+    --spectrum-table-row-checkbox-to-top-medium-compact: 8px;
+    --spectrum-table-row-checkbox-to-top-medium-regular: var(--spectrum-table-row-checkbox-to-top-medium);
+    --spectrum-table-row-checkbox-to-top-medium-spacious: 16px;
+    --spectrum-table-row-checkbox-to-top-small: 10px;
+    --spectrum-table-row-checkbox-to-top-small-compact: 6px;
+    --spectrum-table-row-checkbox-to-top-small-regular: var(--spectrum-table-row-checkbox-to-top-small);
+    --spectrum-table-row-checkbox-to-top-small-spacious: 14px;
+    --spectrum-table-row-down-opacity: 10%;
+    --spectrum-table-row-height-extra-large: 56px;
+    --spectrum-table-row-height-extra-large-compact: var(--spectrum-component-height-300);
+    --spectrum-table-row-height-extra-large-regular: var(--spectrum-table-row-height-extra-large);
+    --spectrum-table-row-height-extra-large-spacious: 64px;
+    --spectrum-table-row-height-large: 48px;
+    --spectrum-table-row-height-large-compact: var(--spectrum-component-height-200);
+    --spectrum-table-row-height-large-regular: var(--spectrum-table-row-height-large);
+    --spectrum-table-row-height-large-spacious: 56px;
+    --spectrum-table-row-height-medium: 40px;
+    --spectrum-table-row-height-medium-compact: var(--spectrum-component-height-100);
+    --spectrum-table-row-height-medium-regular: var(--spectrum-table-row-height-medium);
+    --spectrum-table-row-height-medium-spacious: 48px;
+    --spectrum-table-row-height-small: 32px;
+    --spectrum-table-row-height-small-compact: var(--spectrum-component-height-75);
+    --spectrum-table-row-height-small-regular: var(--spectrum-table-row-height-small);
+    --spectrum-table-row-height-small-spacious: 40px;
+    --spectrum-table-row-hover-color: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-table-row-hover-opacity: 7.000000000000001%;
+    --spectrum-table-row-top-to-text-extra-large: 17px;
+    --spectrum-table-row-top-to-text-extra-large-compact: var(--spectrum-component-top-to-text-300);
+    --spectrum-table-row-top-to-text-extra-large-regular: var(--spectrum-table-row-top-to-text-extra-large);
+    --spectrum-table-row-top-to-text-extra-large-spacious: 21px;
+    --spectrum-table-row-top-to-text-large: 14px;
+    --spectrum-table-row-top-to-text-large-compact: var(--spectrum-component-top-to-text-200);
+    --spectrum-table-row-top-to-text-large-regular: var(--spectrum-table-row-top-to-text-large);
+    --spectrum-table-row-top-to-text-large-spacious: 18px;
+    --spectrum-table-row-top-to-text-medium: 10px;
+    --spectrum-table-row-top-to-text-medium-compact: var(--spectrum-component-top-to-text-100);
+    --spectrum-table-row-top-to-text-medium-regular: var(--spectrum-table-row-top-to-text-medium);
+    --spectrum-table-row-top-to-text-medium-spacious: 15px;
+    --spectrum-table-row-top-to-text-small: 8px;
+    --spectrum-table-row-top-to-text-small-compact: var(--spectrum-component-top-to-text-75);
+    --spectrum-table-row-top-to-text-small-regular: var(--spectrum-table-row-top-to-text-small);
+    --spectrum-table-row-top-to-text-small-spacious: 12px;
+    --spectrum-table-section-header-row-height-extra-large: 48px;
+    --spectrum-table-section-header-row-height-large: 40px;
+    --spectrum-table-section-header-row-height-medium: 32px;
+    --spectrum-table-section-header-row-height-small: 24px;
+    --spectrum-table-selected-row-background-color-non-emphasized: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-table-selected-row-background-opacity: 10%;
+    --spectrum-table-selected-row-background-opacity-hover: 15%;
+    --spectrum-table-selected-row-background-opacity-non-emphasized: 10%;
+    --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 15%;
+    --spectrum-table-thumbnail-to-top-minimum-extra-large: 8px;
+    --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px;
+    --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: var(--spectrum-table-thumbnail-to-top-minimum-extra-large);
+    --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-large: 8px;
+    --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px;
+    --spectrum-table-thumbnail-to-top-minimum-large-regular: var(--spectrum-table-thumbnail-to-top-minimum-large);
+    --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px;
+    --spectrum-table-thumbnail-to-top-minimum-medium: 7px;
+    --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px;
+    --spectrum-table-thumbnail-to-top-minimum-medium-regular: var(--spectrum-table-thumbnail-to-top-minimum-medium);
+    --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px;
+    --spectrum-table-thumbnail-to-top-minimum-small: 5px;
+    --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px;
+    --spectrum-table-thumbnail-to-top-minimum-small-regular: var(--spectrum-table-thumbnail-to-top-minimum-small);
+    --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px;
+    --spectrum-tag-edge-to-clear-icon-large: 15px;
+    --spectrum-tag-edge-to-clear-icon-medium: 12px;
+    --spectrum-tag-edge-to-clear-icon-small: 8px;
+    --spectrum-tag-field-default-width-large: 288px;
+    --spectrum-tag-field-default-width-medium: 264px;
+    --spectrum-tag-field-default-width-small: 240px;
+    --spectrum-tag-field-edge-to-content-large: 14px;
+    --spectrum-tag-field-edge-to-content-medium: 12px;
+    --spectrum-tag-field-edge-to-content-small: 10px;
+    --spectrum-tag-field-minimum-height-large: 68px;
+    --spectrum-tag-field-minimum-height-medium: 56px;
+    --spectrum-tag-field-minimum-height-small: 44px;
+    --spectrum-tag-field-minimum-width: 180px;
+    --spectrum-tag-label-to-clear-icon-large: 15px;
+    --spectrum-tag-label-to-clear-icon-medium: 12px;
+    --spectrum-tag-label-to-clear-icon-small: 8px;
+    --spectrum-tag-maximum-width-multiplier: 7;
+    --spectrum-tag-minimum-width-large: 33px;
+    --spectrum-tag-minimum-width-medium: 27px;
+
+    /** @deprecated */
+    --spectrum-tag-minimum-width-multiplier: 1;
+    --spectrum-tag-minimum-width-small: 21px;
+    --spectrum-tag-top-to-avatar-large: 9px;
+    --spectrum-tag-top-to-avatar-medium: 6px;
+    --spectrum-tag-top-to-avatar-small: 4px;
+    --spectrum-tag-top-to-cross-icon-large: 15px;
+    --spectrum-tag-top-to-cross-icon-medium: 12px;
+    --spectrum-tag-top-to-cross-icon-small: 8px;
+    --spectrum-takeover-dialog-height: 100%;
+    --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-500);
+    --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-400);
+    --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-500);
+    --spectrum-takeover-dialog-width: 100%;
+    --spectrum-text-align-center: center;
+    --spectrum-text-align-end: end;
+    --spectrum-text-align-start: start;
+    --spectrum-text-area-minimum-height: 56px;
+    --spectrum-text-area-minimum-width: 112px;
+    --spectrum-text-field-minimum-width-multiplier: 1.5;
+    --spectrum-text-to-control-50: 4px;
+    --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-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-underline-gap: 1px;
+    --spectrum-text-underline-thickness: 1px;
+    --spectrum-thumbnail-border-color: light-dark(rgb(41 41 41), rgb(219 219 219));
+    --spectrum-thumbnail-border-opacity: 10%;
+    --spectrum-thumbnail-corner-radius: var(--spectrum-corner-radius-75);
+    --spectrum-thumbnail-opacity-checkerboard-square-size: 4px;
+    --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled);
+    --spectrum-thumbnail-size-50: 16px;
+    --spectrum-thumbnail-size-75: 20px;
+    --spectrum-thumbnail-size-100: 24px;
+    --spectrum-thumbnail-size-200: 28px;
+    --spectrum-thumbnail-size-300: 32px;
+    --spectrum-thumbnail-size-400: 36px;
+    --spectrum-thumbnail-size-500: 40px;
+    --spectrum-thumbnail-size-600: 44px;
+    --spectrum-thumbnail-size-700: 48px;
+    --spectrum-thumbnail-size-800: 52px;
+    --spectrum-thumbnail-size-900: 56px;
+    --spectrum-thumbnail-size-1000: 64px;
+    --spectrum-time-field-minimum-width: 2.5;
+    --spectrum-time-field-text-to-visual: 20px;
+    --spectrum-title-cjk-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-title-cjk-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-title-cjk-font-family: var(--spectrum-cjk-font-family);
+    --spectrum-title-cjk-font-style: var(--spectrum-default-font-style);
+    --spectrum-title-cjk-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-title-cjk-line-height: var(--spectrum-cjk-line-height-100);
+    --spectrum-title-cjk-size-l: var(--spectrum-font-size-200);
+    --spectrum-title-cjk-size-m: var(--spectrum-font-size-100);
+    --spectrum-title-cjk-size-s: var(--spectrum-font-size-75);
+    --spectrum-title-cjk-size-xl: var(--spectrum-font-size-300);
+    --spectrum-title-cjk-size-xs: var(--spectrum-font-size-50);
+    --spectrum-title-cjk-size-xxl: var(--spectrum-font-size-400);
+    --spectrum-title-cjk-size-xxxl: var(--spectrum-font-size-500);
+    --spectrum-title-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
+    --spectrum-title-cjk-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-title-cjk-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-title-cjk-strong-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-title-color: light-dark(rgb(19 19 19), rgb(242 242 242));
+    --spectrum-title-line-height: var(--spectrum-line-height-100);
+    --spectrum-title-margin-bottom-multiplier: 0.25;
+    --spectrum-title-margin-top-multiplier: 0.88888889;
+    --spectrum-title-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-title-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-title-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
+    --spectrum-title-sans-serif-font-style: var(--spectrum-default-font-style);
+    --spectrum-title-sans-serif-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-title-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-title-sans-serif-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-title-sans-serif-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-title-sans-serif-strong-font-weight: var(--spectrum-extra-bold-font-weight);
+    --spectrum-title-serif-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-title-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-title-serif-font-family: var(--spectrum-serif-font-family);
+    --spectrum-title-serif-font-style: var(--spectrum-default-font-style);
+    --spectrum-title-serif-font-weight: var(--spectrum-bold-font-weight);
+    --spectrum-title-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
+    --spectrum-title-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-title-serif-strong-font-style: var(--spectrum-default-font-style);
+    --spectrum-title-serif-strong-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-title-size-l: var(--spectrum-font-size-300);
+    --spectrum-title-size-m: var(--spectrum-font-size-200);
+    --spectrum-title-size-s: var(--spectrum-font-size-100);
+    --spectrum-title-size-xl: var(--spectrum-font-size-400);
+    --spectrum-title-size-xs: var(--spectrum-font-size-75);
+    --spectrum-title-size-xxl: var(--spectrum-font-size-500);
+    --spectrum-title-size-xxxl: var(--spectrum-font-size-600);
+    --spectrum-toast-bottom-to-text: 20px;
+    --spectrum-toast-height: 52px;
+    --spectrum-toast-maximum-width: 336px;
+    --spectrum-toast-top-to-text: 18px;
+    --spectrum-toast-top-to-workflow-icon: 18px;
+    --spectrum-tooltip-maximum-width: 160px;
+    --spectrum-tooltip-tip-corner-radius: 1px;
+    --spectrum-tooltip-tip-height: 5px;
+    --spectrum-tooltip-tip-square-size: 8px;
+    --spectrum-tooltip-tip-width: 10px;
+    --spectrum-track-color: light-dark(rgb(218 218 218), rgb(57 57 57));
+    --spectrum-transparent-black-25: rgb(0 0 0 / 0%);
+    --spectrum-transparent-black-50: rgb(0 0 0 / 3%);
+    --spectrum-transparent-black-75: rgb(0 0 0 / 5%);
+    --spectrum-transparent-black-100: rgb(0 0 0 / 9%);
+    --spectrum-transparent-black-200: rgb(0 0 0 / 12%);
+    --spectrum-transparent-black-300: rgb(0 0 0 / 15%);
+    --spectrum-transparent-black-400: rgb(0 0 0 / 22%);
+    --spectrum-transparent-black-500: rgb(0 0 0 / 44%);
+    --spectrum-transparent-black-600: rgb(0 0 0 / 56%);
+    --spectrum-transparent-black-700: rgb(0 0 0 / 69%);
+    --spectrum-transparent-black-800: rgb(0 0 0 / 84%);
+    --spectrum-transparent-black-900: rgb(0 0 0 / 93%);
+    --spectrum-transparent-black-1000: rgb(0 0 0);
+    --spectrum-transparent-white-25: rgb(255 255 255 / 0%);
+    --spectrum-transparent-white-50: rgb(255 255 255 / 4%);
+    --spectrum-transparent-white-75: rgb(255 255 255 / 7%);
+    --spectrum-transparent-white-100: rgb(255 255 255 / 11%);
+    --spectrum-transparent-white-200: rgb(255 255 255 / 14%);
+    --spectrum-transparent-white-300: rgb(255 255 255 / 17%);
+    --spectrum-transparent-white-400: rgb(255 255 255 / 21%);
+    --spectrum-transparent-white-500: rgb(255 255 255 / 39%);
+    --spectrum-transparent-white-600: rgb(255 255 255 / 51%);
+    --spectrum-transparent-white-700: rgb(255 255 255 / 66%);
+    --spectrum-transparent-white-800: rgb(255 255 255 / 85%);
+    --spectrum-transparent-white-900: rgb(255 255 255 / 94%);
+    --spectrum-transparent-white-1000: rgb(255 255 255);
+    --spectrum-tray-top-to-content-area: 4px;
+    --spectrum-tree-view-bottom-to-label: 12px;
+    --spectrum-tree-view-disclosure-indicator-height: 32px;
+    --spectrum-tree-view-disclosure-indicator-width: 34px;
+    --spectrum-tree-view-drag-handle-to-checkbox: 8px;
+    --spectrum-tree-view-edge-to-checkbox: 12px;
+    --spectrum-tree-view-edge-to-drag-handle: 4px;
+    --spectrum-tree-view-end-edge-to-action-area: 6px;
+    --spectrum-tree-view-header-to-item: -1px;
+    --spectrum-tree-view-item-to-header: 24px;
+    --spectrum-tree-view-item-to-item: -1px;
+    --spectrum-tree-view-item-to-item-detached: 2px;
+    --spectrum-tree-view-label-to-action-area: 6px;
+    --spectrum-tree-view-level-increment: 16px;
+    --spectrum-tree-view-minimum-height: 40px;
+    --spectrum-tree-view-minimum-top-to-context-area: 8px;
+    --spectrum-tree-view-minimum-width: 160px;
+    --spectrum-tree-view-row-background-hover: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-tree-view-selected-row-background-default: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-tree-view-selected-row-background-hover: light-dark(rgb(233 233 233), rgb(44 44 44));
+    --spectrum-tree-view-selected-row-background-opacity-emphasized: 10%;
+    --spectrum-tree-view-selected-row-background-opacity-emphasized-hover: 15%;
+    --spectrum-tree-view-top-to-action-button: 4px;
+    --spectrum-tree-view-top-to-checkbox: 4px;
+    --spectrum-tree-view-top-to-disclosure-indicator: 15px;
+    --spectrum-tree-view-top-to-drag-handle: 15px;
+    --spectrum-tree-view-top-to-label: 10px;
+    --spectrum-treeview-indicator-inset-block-start: 5px;
+    --spectrum-treeview-item-background-color-quiet-selected: color-mix(in sRGB, var(--spectrum-gray-900) 6%, transparent);
+    --spectrum-treeview-item-background-color-selected: color-mix(in sRGB, var(--spectrum-blue-900) 15%, transparent);
+    --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
+    --spectrum-treeview-item-indentation-large: 20px;
+    --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
+    --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
+    --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
+    --spectrum-triple-calendar-popover-minimum-height: 320px;
+    --spectrum-triple-calendar-popover-minimum-width: 912px;
+    --spectrum-turquoise-100: light-dark(rgb(238 251 251), rgb(0 30 33));
+    --spectrum-turquoise-200: light-dark(rgb(209 245 245), rgb(0 37 41));
+    --spectrum-turquoise-300: light-dark(rgb(169 236 237), rgb(0 49 54));
+    --spectrum-turquoise-400: light-dark(rgb(111 221 228), rgb(0 66 72));
+    --spectrum-turquoise-500: light-dark(rgb(39 202 216), rgb(3 84 92));
+    --spectrum-turquoise-600: light-dark(rgb(15 177 192), rgb(5 103 112));
+    --spectrum-turquoise-700: light-dark(rgb(12 158 171), rgb(7 120 131));
+    --spectrum-turquoise-800: light-dark(rgb(10 141 153), rgb(9 131 142));
+    --spectrum-turquoise-900: light-dark(rgb(8 126 137), rgb(11 151 164));
+    --spectrum-turquoise-1000: light-dark(rgb(5 107 116), rgb(13 168 182));
+    --spectrum-turquoise-1100: light-dark(rgb(3 90 98), rgb(16 186 202));
+    --spectrum-turquoise-1200: light-dark(rgb(1 74 81), rgb(64 208 220));
+    --spectrum-turquoise-1300: light-dark(rgb(0 59 65), rgb(128 225 231));
+    --spectrum-turquoise-1400: light-dark(rgb(0 44 49), rgb(183 240 240));
+    --spectrum-turquoise-1500: light-dark(rgb(0 32 35), rgb(228 249 249));
+    --spectrum-turquoise-1600: light-dark(rgb(0 15 17), rgb(255 255 255));
+    --spectrum-turquoise-background-color-default: light-dark(rgb(8 126 137), rgb(9 131 142));
+    --spectrum-turquoise-subtle-background-color-default: light-dark(rgb(209 245 245), rgb(0 49 54));
+    --spectrum-turquoise-visual-color: light-dark(rgb(10 141 153), rgb(11 151 164));
+    --spectrum-user-card-minimum-height-extra-large: 236px;
+    --spectrum-user-card-minimum-height-large: 219px;
+    --spectrum-user-card-minimum-height-medium: 202px;
+    --spectrum-user-card-minimum-height-small: 192px;
+    --spectrum-user-card-minimum-height-title-below-extra-large: 263px;
+    --spectrum-user-card-minimum-height-title-below-large: 244px;
+    --spectrum-user-card-minimum-height-title-below-medium: 224px;
+    --spectrum-user-card-minimum-height-title-below-small: 212px;
+    --spectrum-visual-to-control-100: 8px;
+    --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-white: rgb(255 255 255);
+    --spectrum-window-to-edge: var(--spectrum-spacing-600);
+    --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-yellow-100: light-dark(rgb(255 248 204), rgb(37 23 0));
+    --spectrum-yellow-200: light-dark(rgb(255 241 151), rgb(47 29 0));
+    --spectrum-yellow-300: light-dark(rgb(255 222 44), rgb(61 39 0));
+    --spectrum-yellow-400: light-dark(rgb(245 199 0), rgb(83 52 0));
+    --spectrum-yellow-500: light-dark(rgb(230 175 0), rgb(107 67 0));
+    --spectrum-yellow-600: light-dark(rgb(210 149 0), rgb(130 82 0));
+    --spectrum-yellow-700: light-dark(rgb(193 131 0), rgb(151 97 0));
+    --spectrum-yellow-800: light-dark(rgb(175 116 0), rgb(164 106 0));
+    --spectrum-yellow-900: light-dark(rgb(158 102 0), rgb(186 124 0));
+    --spectrum-yellow-1000: light-dark(rgb(134 85 0), rgb(203 141 0));
+    --spectrum-yellow-1100: light-dark(rgb(114 72 0), rgb(218 159 0));
+    --spectrum-yellow-1200: light-dark(rgb(93 59 0), rgb(235 183 0));
+    --spectrum-yellow-1300: light-dark(rgb(75 47 0), rgb(249 206 0));
+    --spectrum-yellow-1400: light-dark(rgb(56 35 0), rgb(255 230 86));
+    --spectrum-yellow-1500: light-dark(rgb(40 25 0), rgb(255 246 195));
+    --spectrum-yellow-1600: light-dark(rgb(18 11 0), rgb(255 255 255));
+    --spectrum-yellow-background-color-default: light-dark(rgb(245 199 0), rgb(218 159 0));
+    --spectrum-yellow-subtle-background-color-default: light-dark(rgb(255 241 151), rgb(61 39 0));
+    --spectrum-yellow-visual-color: light-dark(rgb(210 149 0), rgb(218 159 0));
+
+    /* Web components specific styles */
+    --spectrum-global-alias-appframe-border-size: 2px;
+    --swc-scale-factor: 1;
     -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
 }
+
+@media (prefers-color-scheme: dark) {
+    :root,
+    :host {
+        --spectrum-treeview-item-background-color-quiet-selected: color-mix(in sRGB, var(--spectrum-gray-900) 7%, transparent);
+        --spectrum-treeview-item-background-color-selected: color-mix(in sRGB, var(--spectrum-blue-800) 15%, transparent);
+    }
+}
diff --git a/tools/styles/detail.ts b/tools/styles/detail.ts
index 891edfaa093..f9efd310f24 100644
--- a/tools/styles/detail.ts
+++ b/tools/styles/detail.ts
@@ -11,7 +11,6 @@
  */
 
 import baseStyles from './src/spectrum-base.css.js';
-import langStyles from './src/spectrum-lang.css.js';
 import detailStyles from './src/spectrum-detail.css.js';
 
-export default [baseStyles, langStyles, detailStyles];
+export default [baseStyles, detailStyles];
diff --git a/tools/styles/express/scale-medium.css b/tools/styles/express/scale-medium.css
deleted file mode 100644
index 9ba46899d36..00000000000
--- a/tools/styles/express/scale-medium.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-scale-medium.css";
-
-:host,
-:root {
-    --spectrum-global-alias-appframe-border-size: 2px;
-    --swc-scale-factor: 1;
-}
diff --git a/tools/styles/express/spectrum-core-global.css b/tools/styles/express/spectrum-core-global.css
deleted file mode 100644
index e777a486732..00000000000
--- a/tools/styles/express/spectrum-core-global.css
+++ /dev/null
@@ -1,1321 +0,0 @@
-:root,
-:host {
-    --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1);
-    --spectrum-global-animation-duration-0: 0s;
-    --spectrum-global-animation-duration-100: 0.13s;
-    --spectrum-global-animation-duration-200: 0.16s;
-    --spectrum-global-animation-duration-300: 0.19s;
-    --spectrum-global-animation-duration-400: 0.22s;
-    --spectrum-global-animation-duration-500: 0.25s;
-    --spectrum-global-animation-duration-600: 0.3s;
-    --spectrum-global-animation-duration-700: 0.35s;
-    --spectrum-global-animation-duration-800: 0.4s;
-    --spectrum-global-animation-duration-900: 0.45s;
-    --spectrum-global-animation-duration-1000: 0.5s;
-    --spectrum-global-animation-duration-2000: 1s;
-    --spectrum-global-animation-duration-4000: 2s;
-    --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
-    --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
-    --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
-    --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-static-black-rgb: 0, 0, 0;
-    --spectrum-global-color-static-black: rgb(var(--spectrum-global-color-static-black-rgb));
-    --spectrum-global-color-static-white-rgb: 255, 255, 255;
-    --spectrum-global-color-static-white: rgb(var(--spectrum-global-color-static-white-rgb));
-    --spectrum-global-color-static-blue-rgb: 0, 87, 191;
-    --spectrum-global-color-static-blue: rgb(var(--spectrum-global-color-static-blue-rgb));
-    --spectrum-global-color-static-gray-50-rgb: 255, 255, 255;
-    --spectrum-global-color-static-gray-50: rgb(var(--spectrum-global-color-static-gray-50-rgb));
-    --spectrum-global-color-static-gray-75-rgb: 255, 255, 255;
-    --spectrum-global-color-static-gray-75: rgb(var(--spectrum-global-color-static-gray-75-rgb));
-    --spectrum-global-color-static-gray-100-rgb: 255, 255, 255;
-    --spectrum-global-color-static-gray-100: rgb(var(--spectrum-global-color-static-gray-100-rgb));
-    --spectrum-global-color-static-gray-200-rgb: 235, 235, 235;
-    --spectrum-global-color-static-gray-200: rgb(var(--spectrum-global-color-static-gray-200-rgb));
-    --spectrum-global-color-static-gray-300-rgb: 217, 217, 217;
-    --spectrum-global-color-static-gray-300: rgb(var(--spectrum-global-color-static-gray-300-rgb));
-    --spectrum-global-color-static-gray-400-rgb: 179, 179, 179;
-    --spectrum-global-color-static-gray-400: rgb(var(--spectrum-global-color-static-gray-400-rgb));
-    --spectrum-global-color-static-gray-500-rgb: 146, 146, 146;
-    --spectrum-global-color-static-gray-500: rgb(var(--spectrum-global-color-static-gray-500-rgb));
-    --spectrum-global-color-static-gray-600-rgb: 110, 110, 110;
-    --spectrum-global-color-static-gray-600: rgb(var(--spectrum-global-color-static-gray-600-rgb));
-    --spectrum-global-color-static-gray-700-rgb: 71, 71, 71;
-    --spectrum-global-color-static-gray-700: rgb(var(--spectrum-global-color-static-gray-700-rgb));
-    --spectrum-global-color-static-gray-800-rgb: 34, 34, 34;
-    --spectrum-global-color-static-gray-800: rgb(var(--spectrum-global-color-static-gray-800-rgb));
-    --spectrum-global-color-static-gray-900-rgb: 0, 0, 0;
-    --spectrum-global-color-static-gray-900: rgb(var(--spectrum-global-color-static-gray-900-rgb));
-    --spectrum-global-color-static-red-400-rgb: 237, 64, 48;
-    --spectrum-global-color-static-red-400: rgb(var(--spectrum-global-color-static-red-400-rgb));
-    --spectrum-global-color-static-red-500-rgb: 217, 28, 21;
-    --spectrum-global-color-static-red-500: rgb(var(--spectrum-global-color-static-red-500-rgb));
-    --spectrum-global-color-static-red-600-rgb: 187, 2, 2;
-    --spectrum-global-color-static-red-600: rgb(var(--spectrum-global-color-static-red-600-rgb));
-    --spectrum-global-color-static-red-700-rgb: 154, 0, 0;
-    --spectrum-global-color-static-red-700: rgb(var(--spectrum-global-color-static-red-700-rgb));
-    --spectrum-global-color-static-red-800-rgb: 124, 0, 0;
-    --spectrum-global-color-static-red-800: rgb(var(--spectrum-global-color-static-red-800-rgb));
-    --spectrum-global-color-static-orange-400-rgb: 250, 139, 26;
-    --spectrum-global-color-static-orange-400: rgb(var(--spectrum-global-color-static-orange-400-rgb));
-    --spectrum-global-color-static-orange-500-rgb: 233, 117, 0;
-    --spectrum-global-color-static-orange-500: rgb(var(--spectrum-global-color-static-orange-500-rgb));
-    --spectrum-global-color-static-orange-600-rgb: 209, 97, 0;
-    --spectrum-global-color-static-orange-600: rgb(var(--spectrum-global-color-static-orange-600-rgb));
-    --spectrum-global-color-static-orange-700-rgb: 182, 80, 0;
-    --spectrum-global-color-static-orange-700: rgb(var(--spectrum-global-color-static-orange-700-rgb));
-    --spectrum-global-color-static-orange-800-rgb: 155, 64, 0;
-    --spectrum-global-color-static-orange-800: rgb(var(--spectrum-global-color-static-orange-800-rgb));
-    --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123;
-    --spectrum-global-color-static-yellow-200: rgb(var(--spectrum-global-color-static-yellow-200-rgb));
-    --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23;
-    --spectrum-global-color-static-yellow-300: rgb(var(--spectrum-global-color-static-yellow-300-rgb));
-    --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0;
-    --spectrum-global-color-static-yellow-400: rgb(var(--spectrum-global-color-static-yellow-400-rgb));
-    --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0;
-    --spectrum-global-color-static-yellow-500: rgb(var(--spectrum-global-color-static-yellow-500-rgb));
-    --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0;
-    --spectrum-global-color-static-yellow-600: rgb(var(--spectrum-global-color-static-yellow-600-rgb));
-    --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0;
-    --spectrum-global-color-static-yellow-700: rgb(var(--spectrum-global-color-static-yellow-700-rgb));
-    --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0;
-    --spectrum-global-color-static-yellow-800: rgb(var(--spectrum-global-color-static-yellow-800-rgb));
-    --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27;
-    --spectrum-global-color-static-chartreuse-300: rgb(var(--spectrum-global-color-static-chartreuse-300-rgb));
-    --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13;
-    --spectrum-global-color-static-chartreuse-400: rgb(var(--spectrum-global-color-static-chartreuse-400-rgb));
-    --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4;
-    --spectrum-global-color-static-chartreuse-500: rgb(var(--spectrum-global-color-static-chartreuse-500-rgb));
-    --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0;
-    --spectrum-global-color-static-chartreuse-600: rgb(var(--spectrum-global-color-static-chartreuse-600-rgb));
-    --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0;
-    --spectrum-global-color-static-chartreuse-700: rgb(var(--spectrum-global-color-static-chartreuse-700-rgb));
-    --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0;
-    --spectrum-global-color-static-chartreuse-800: rgb(var(--spectrum-global-color-static-chartreuse-800-rgb));
-    --spectrum-global-color-static-celery-200-rgb: 126, 229, 114;
-    --spectrum-global-color-static-celery-200: rgb(var(--spectrum-global-color-static-celery-200-rgb));
-    --spectrum-global-color-static-celery-300-rgb: 87, 212, 86;
-    --spectrum-global-color-static-celery-300: rgb(var(--spectrum-global-color-static-celery-300-rgb));
-    --spectrum-global-color-static-celery-400-rgb: 48, 193, 61;
-    --spectrum-global-color-static-celery-400: rgb(var(--spectrum-global-color-static-celery-400-rgb));
-    --spectrum-global-color-static-celery-500-rgb: 15, 172, 38;
-    --spectrum-global-color-static-celery-500: rgb(var(--spectrum-global-color-static-celery-500-rgb));
-    --spectrum-global-color-static-celery-600-rgb: 0, 150, 20;
-    --spectrum-global-color-static-celery-600: rgb(var(--spectrum-global-color-static-celery-600-rgb));
-    --spectrum-global-color-static-celery-700-rgb: 0, 128, 15;
-    --spectrum-global-color-static-celery-700: rgb(var(--spectrum-global-color-static-celery-700-rgb));
-    --spectrum-global-color-static-celery-800-rgb: 0, 107, 15;
-    --spectrum-global-color-static-celery-800: rgb(var(--spectrum-global-color-static-celery-800-rgb));
-    --spectrum-global-color-static-green-400-rgb: 29, 169, 115;
-    --spectrum-global-color-static-green-400: rgb(var(--spectrum-global-color-static-green-400-rgb));
-    --spectrum-global-color-static-green-500-rgb: 0, 148, 97;
-    --spectrum-global-color-static-green-500: rgb(var(--spectrum-global-color-static-green-500-rgb));
-    --spectrum-global-color-static-green-600-rgb: 0, 126, 80;
-    --spectrum-global-color-static-green-600: rgb(var(--spectrum-global-color-static-green-600-rgb));
-    --spectrum-global-color-static-green-700-rgb: 0, 105, 65;
-    --spectrum-global-color-static-green-700: rgb(var(--spectrum-global-color-static-green-700-rgb));
-    --spectrum-global-color-static-green-800-rgb: 0, 86, 53;
-    --spectrum-global-color-static-green-800: rgb(var(--spectrum-global-color-static-green-800-rgb));
-    --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199;
-    --spectrum-global-color-static-seafoam-200: rgb(var(--spectrum-global-color-static-seafoam-200-rgb));
-    --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180;
-    --spectrum-global-color-static-seafoam-300: rgb(var(--spectrum-global-color-static-seafoam-300-rgb));
-    --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160;
-    --spectrum-global-color-static-seafoam-400: rgb(var(--spectrum-global-color-static-seafoam-400-rgb));
-    --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139;
-    --spectrum-global-color-static-seafoam-500: rgb(var(--spectrum-global-color-static-seafoam-500-rgb));
-    --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118;
-    --spectrum-global-color-static-seafoam-600: rgb(var(--spectrum-global-color-static-seafoam-600-rgb));
-    --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99;
-    --spectrum-global-color-static-seafoam-700: rgb(var(--spectrum-global-color-static-seafoam-700-rgb));
-    --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80;
-    --spectrum-global-color-static-seafoam-800: rgb(var(--spectrum-global-color-static-seafoam-800-rgb));
-    --spectrum-global-color-static-blue-200-rgb: 130, 193, 251;
-    --spectrum-global-color-static-blue-200: rgb(var(--spectrum-global-color-static-blue-200-rgb));
-    --spectrum-global-color-static-blue-300-rgb: 98, 173, 247;
-    --spectrum-global-color-static-blue-300: rgb(var(--spectrum-global-color-static-blue-300-rgb));
-    --spectrum-global-color-static-blue-400-rgb: 66, 151, 244;
-    --spectrum-global-color-static-blue-400: rgb(var(--spectrum-global-color-static-blue-400-rgb));
-    --spectrum-global-color-static-blue-500-rgb: 27, 127, 245;
-    --spectrum-global-color-static-blue-500: rgb(var(--spectrum-global-color-static-blue-500-rgb));
-    --spectrum-global-color-static-blue-600-rgb: 4, 105, 227;
-    --spectrum-global-color-static-blue-600: rgb(var(--spectrum-global-color-static-blue-600-rgb));
-    --spectrum-global-color-static-blue-700-rgb: 0, 87, 190;
-    --spectrum-global-color-static-blue-700: rgb(var(--spectrum-global-color-static-blue-700-rgb));
-    --spectrum-global-color-static-blue-800-rgb: 0, 72, 153;
-    --spectrum-global-color-static-blue-800: rgb(var(--spectrum-global-color-static-blue-800-rgb));
-    --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255;
-    --spectrum-global-color-static-indigo-200: rgb(var(--spectrum-global-color-static-indigo-200-rgb));
-    --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255;
-    --spectrum-global-color-static-indigo-300: rgb(var(--spectrum-global-color-static-indigo-300-rgb));
-    --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253;
-    --spectrum-global-color-static-indigo-400: rgb(var(--spectrum-global-color-static-indigo-400-rgb));
-    --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246;
-    --spectrum-global-color-static-indigo-500: rgb(var(--spectrum-global-color-static-indigo-500-rgb));
-    --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232;
-    --spectrum-global-color-static-indigo-600: rgb(var(--spectrum-global-color-static-indigo-600-rgb));
-    --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208;
-    --spectrum-global-color-static-indigo-700: rgb(var(--spectrum-global-color-static-indigo-700-rgb));
-    --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208;
-    --spectrum-global-color-static-indigo-800: rgb(var(--spectrum-global-color-static-indigo-800-rgb));
-    --spectrum-global-color-static-purple-400-rgb: 178, 121, 250;
-    --spectrum-global-color-static-purple-400: rgb(var(--spectrum-global-color-static-purple-400-rgb));
-    --spectrum-global-color-static-purple-500-rgb: 161, 93, 246;
-    --spectrum-global-color-static-purple-500: rgb(var(--spectrum-global-color-static-purple-500-rgb));
-    --spectrum-global-color-static-purple-600-rgb: 142, 67, 234;
-    --spectrum-global-color-static-purple-600: rgb(var(--spectrum-global-color-static-purple-600-rgb));
-    --spectrum-global-color-static-purple-700-rgb: 120, 43, 216;
-    --spectrum-global-color-static-purple-700: rgb(var(--spectrum-global-color-static-purple-700-rgb));
-    --spectrum-global-color-static-purple-800-rgb: 98, 23, 190;
-    --spectrum-global-color-static-purple-800: rgb(var(--spectrum-global-color-static-purple-800-rgb));
-    --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230;
-    --spectrum-global-color-static-fuchsia-400: rgb(var(--spectrum-global-color-static-fuchsia-400-rgb));
-    --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212;
-    --spectrum-global-color-static-fuchsia-500: rgb(var(--spectrum-global-color-static-fuchsia-500-rgb));
-    --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187;
-    --spectrum-global-color-static-fuchsia-600: rgb(var(--spectrum-global-color-static-fuchsia-600-rgb));
-    --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163;
-    --spectrum-global-color-static-fuchsia-700: rgb(var(--spectrum-global-color-static-fuchsia-700-rgb));
-    --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136;
-    --spectrum-global-color-static-fuchsia-800: rgb(var(--spectrum-global-color-static-fuchsia-800-rgb));
-    --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175;
-    --spectrum-global-color-static-magenta-200: rgb(var(--spectrum-global-color-static-magenta-200-rgb));
-    --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157;
-    --spectrum-global-color-static-magenta-300: rgb(var(--spectrum-global-color-static-magenta-300-rgb));
-    --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135;
-    --spectrum-global-color-static-magenta-400: rgb(var(--spectrum-global-color-static-magenta-400-rgb));
-    --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111;
-    --spectrum-global-color-static-magenta-500: rgb(var(--spectrum-global-color-static-magenta-500-rgb));
-    --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89;
-    --spectrum-global-color-static-magenta-600: rgb(var(--spectrum-global-color-static-magenta-600-rgb));
-    --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72;
-    --spectrum-global-color-static-magenta-700: rgb(var(--spectrum-global-color-static-magenta-700-rgb));
-    --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58;
-    --spectrum-global-color-static-magenta-800: rgb(var(--spectrum-global-color-static-magenta-800-rgb));
-    --spectrum-global-color-static-transparent-white-200: #ffffff1a;
-    --spectrum-global-color-static-transparent-white-300: #ffffff40;
-    --spectrum-global-color-static-transparent-white-400: #fff6;
-    --spectrum-global-color-static-transparent-white-500: #ffffff8c;
-    --spectrum-global-color-static-transparent-white-600: #ffffffb3;
-    --spectrum-global-color-static-transparent-white-700: #fffc;
-    --spectrum-global-color-static-transparent-white-800: #ffffffe6;
-    --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255;
-    --spectrum-global-color-static-transparent-white-900: rgb(var(--spectrum-global-color-static-transparent-white-900-rgb));
-    --spectrum-global-color-static-transparent-black-200: #0000001a;
-    --spectrum-global-color-static-transparent-black-300: #00000040;
-    --spectrum-global-color-static-transparent-black-400: #0006;
-    --spectrum-global-color-static-transparent-black-500: #0000008c;
-    --spectrum-global-color-static-transparent-black-600: #000000b3;
-    --spectrum-global-color-static-transparent-black-700: #000c;
-    --spectrum-global-color-static-transparent-black-800: #000000e6;
-    --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0;
-    --spectrum-global-color-static-transparent-black-900: rgb(var(--spectrum-global-color-static-transparent-black-900-rgb));
-    --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, #1a4b83, #1a3979, #1a266f, #191264, #180057;
-    --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, #196b47, #105c45, #094d41, #033f3e, #00313a;
-    --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, #71167c, #560f74, #370b6e, #000968;
-    --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, #3ea8a6, #208288, #076769, #00494b, #002c2d;
-    --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, #397aa8, #1c5796, #163771, #10194d;
-    --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, #2f74b3, #265191, #163670, #0b194c;
-    --spectrum-semantic-cta-background-color-default: var(--spectrum-global-color-static-indigo-600);
-    --spectrum-semantic-cta-background-color-hover: var(--spectrum-global-color-static-indigo-700);
-    --spectrum-semantic-cta-background-color-down: var(--spectrum-global-color-static-indigo-800);
-    --spectrum-semantic-cta-background-color-key-focus: var(--spectrum-global-color-static-indigo-700);
-    --spectrum-semantic-emphasized-border-color-default: var(--spectrum-global-color-indigo-500);
-    --spectrum-semantic-emphasized-border-color-hover: var(--spectrum-global-color-indigo-600);
-    --spectrum-semantic-emphasized-border-color-down: var(--spectrum-global-color-indigo-700);
-    --spectrum-semantic-emphasized-border-color-key-focus: var(--spectrum-global-color-indigo-600);
-    --spectrum-semantic-neutral-background-color-default: var(--spectrum-global-color-static-gray-800);
-    --spectrum-semantic-negative-background-color: var(--spectrum-global-color-static-red-600);
-    --spectrum-semantic-negative-color-default: var(--spectrum-global-color-red-500);
-    --spectrum-semantic-negative-color-hover: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-border-color: var(--spectrum-global-color-red-400);
-    --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-status-color: var(--spectrum-global-color-red-400);
-    --spectrum-semantic-negative-text-color-large: var(--spectrum-global-color-red-500);
-    --spectrum-semantic-negative-text-color-small: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-text-color-small-hover: var(--spectrum-global-color-red-700);
-    --spectrum-semantic-negative-text-color-small-down: var(--spectrum-global-color-red-700);
-    --spectrum-semantic-negative-text-color-small-key-focus: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700);
-    --spectrum-semantic-negative-color-key-focus: var(--spectrum-global-color-red-400);
-    --spectrum-semantic-negative-background-color-default: var(--spectrum-global-color-static-red-600);
-    --spectrum-semantic-negative-background-color-hover: var(--spectrum-global-color-static-red-700);
-    --spectrum-semantic-negative-background-color-down: var(--spectrum-global-color-static-red-800);
-    --spectrum-semantic-negative-background-color-key-focus: var(--spectrum-global-color-static-red-700);
-    --spectrum-semantic-notice-background-color: var(--spectrum-global-color-static-orange-600);
-    --spectrum-semantic-notice-color-default: var(--spectrum-global-color-orange-500);
-    --spectrum-semantic-notice-color-dark: var(--spectrum-global-color-orange-600);
-    --spectrum-semantic-notice-border-color: var(--spectrum-global-color-orange-400);
-    --spectrum-semantic-notice-icon-color: var(--spectrum-global-color-orange-600);
-    --spectrum-semantic-notice-status-color: var(--spectrum-global-color-orange-400);
-    --spectrum-semantic-notice-text-color-large: var(--spectrum-global-color-orange-500);
-    --spectrum-semantic-notice-text-color-small: var(--spectrum-global-color-orange-600);
-    --spectrum-semantic-notice-color-down: var(--spectrum-global-color-orange-700);
-    --spectrum-semantic-notice-color-key-focus: var(--spectrum-global-color-orange-400);
-    --spectrum-semantic-notice-background-color-default: var(--spectrum-global-color-static-orange-600);
-    --spectrum-semantic-notice-background-color-hover: var(--spectrum-global-color-static-orange-700);
-    --spectrum-semantic-notice-background-color-down: var(--spectrum-global-color-static-orange-800);
-    --spectrum-semantic-notice-background-color-key-focus: var(--spectrum-global-color-static-orange-700);
-    --spectrum-semantic-positive-background-color: var(--spectrum-global-color-static-green-600);
-    --spectrum-semantic-positive-color-default: var(--spectrum-global-color-green-500);
-    --spectrum-semantic-positive-color-dark: var(--spectrum-global-color-green-600);
-    --spectrum-semantic-positive-border-color: var(--spectrum-global-color-green-400);
-    --spectrum-semantic-positive-icon-color: var(--spectrum-global-color-green-600);
-    --spectrum-semantic-positive-status-color: var(--spectrum-global-color-green-400);
-    --spectrum-semantic-positive-text-color-large: var(--spectrum-global-color-green-500);
-    --spectrum-semantic-positive-text-color-small: var(--spectrum-global-color-green-600);
-    --spectrum-semantic-positive-color-down: var(--spectrum-global-color-green-700);
-    --spectrum-semantic-positive-color-key-focus: var(--spectrum-global-color-green-400);
-    --spectrum-semantic-positive-background-color-default: var(--spectrum-global-color-static-green-600);
-    --spectrum-semantic-positive-background-color-hover: var(--spectrum-global-color-static-green-700);
-    --spectrum-semantic-positive-background-color-down: var(--spectrum-global-color-static-green-800);
-    --spectrum-semantic-positive-background-color-key-focus: var(--spectrum-global-color-static-green-700);
-    --spectrum-semantic-informative-background-color: var(--spectrum-global-color-static-blue-600);
-    --spectrum-semantic-informative-color-default: var(--spectrum-global-color-blue-500);
-    --spectrum-semantic-informative-color-dark: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-informative-border-color: var(--spectrum-global-color-blue-400);
-    --spectrum-semantic-informative-icon-color: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-informative-status-color: var(--spectrum-global-color-blue-400);
-    --spectrum-semantic-informative-text-color-large: var(--spectrum-global-color-blue-500);
-    --spectrum-semantic-informative-text-color-small: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-informative-color-down: var(--spectrum-global-color-blue-700);
-    --spectrum-semantic-informative-color-key-focus: var(--spectrum-global-color-blue-400);
-    --spectrum-semantic-informative-background-color-default: var(--spectrum-global-color-static-blue-600);
-    --spectrum-semantic-informative-background-color-hover: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-informative-background-color-down: var(--spectrum-global-color-static-blue-800);
-    --spectrum-semantic-informative-background-color-key-focus: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-neutral-background-color-hover: var(--spectrum-global-color-static-gray-800);
-    --spectrum-semantic-neutral-background-color-down: var(--spectrum-global-color-static-gray-900);
-    --spectrum-semantic-neutral-background-color-key-focus: var(--spectrum-global-color-static-gray-800);
-    --spectrum-semantic-presence-color-1: var(--spectrum-global-color-static-red-500);
-    --spectrum-semantic-presence-color-2: var(--spectrum-global-color-static-orange-400);
-    --spectrum-semantic-presence-color-3: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-semantic-presence-color-4-rgb: 75, 204, 162;
-    --spectrum-semantic-presence-color-4: rgb(var(--spectrum-semantic-presence-color-4-rgb));
-    --spectrum-semantic-presence-color-5-rgb: 0, 199, 255;
-    --spectrum-semantic-presence-color-5: rgb(var(--spectrum-semantic-presence-color-5-rgb));
-    --spectrum-semantic-presence-color-6-rgb: 0, 140, 184;
-    --spectrum-semantic-presence-color-6: rgb(var(--spectrum-semantic-presence-color-6-rgb));
-    --spectrum-semantic-presence-color-7-rgb: 126, 75, 243;
-    --spectrum-semantic-presence-color-7: rgb(var(--spectrum-semantic-presence-color-7-rgb));
-    --spectrum-semantic-presence-color-8: var(--spectrum-global-color-static-fuchsia-600);
-    --spectrum-global-dimension-static-percent-50: 50%;
-    --spectrum-global-dimension-static-percent-70: 70%;
-    --spectrum-global-dimension-static-percent-100: 100%;
-    --spectrum-global-dimension-static-breakpoint-xsmall: 304px;
-    --spectrum-global-dimension-static-breakpoint-small: 768px;
-    --spectrum-global-dimension-static-breakpoint-medium: 1280px;
-    --spectrum-global-dimension-static-breakpoint-large: 1768px;
-    --spectrum-global-dimension-static-breakpoint-xlarge: 2160px;
-    --spectrum-global-dimension-static-grid-columns: 12;
-    --spectrum-global-dimension-static-grid-fluid-width: 100%;
-    --spectrum-global-dimension-static-grid-fixed-max-width: 1280px;
-    --spectrum-global-dimension-static-size-0: 0px;
-    --spectrum-global-dimension-static-size-10: 1px;
-    --spectrum-global-dimension-static-size-25: 2px;
-    --spectrum-global-dimension-static-size-40: 3px;
-    --spectrum-global-dimension-static-size-50: 4px;
-    --spectrum-global-dimension-static-size-65: 5px;
-    --spectrum-global-dimension-static-size-75: 6px;
-    --spectrum-global-dimension-static-size-85: 7px;
-    --spectrum-global-dimension-static-size-100: 8px;
-    --spectrum-global-dimension-static-size-115: 9px;
-    --spectrum-global-dimension-static-size-125: 10px;
-    --spectrum-global-dimension-static-size-130: 11px;
-    --spectrum-global-dimension-static-size-150: 12px;
-    --spectrum-global-dimension-static-size-160: 13px;
-    --spectrum-global-dimension-static-size-175: 14px;
-    --spectrum-global-dimension-static-size-185: 15px;
-    --spectrum-global-dimension-static-size-200: 16px;
-    --spectrum-global-dimension-static-size-225: 18px;
-    --spectrum-global-dimension-static-size-250: 20px;
-    --spectrum-global-dimension-static-size-275: 22px;
-    --spectrum-global-dimension-static-size-300: 24px;
-    --spectrum-global-dimension-static-size-325: 26px;
-    --spectrum-global-dimension-static-size-350: 28px;
-    --spectrum-global-dimension-static-size-400: 32px;
-    --spectrum-global-dimension-static-size-450: 36px;
-    --spectrum-global-dimension-static-size-500: 40px;
-    --spectrum-global-dimension-static-size-550: 44px;
-    --spectrum-global-dimension-static-size-600: 48px;
-    --spectrum-global-dimension-static-size-700: 56px;
-    --spectrum-global-dimension-static-size-800: 64px;
-    --spectrum-global-dimension-static-size-900: 72px;
-    --spectrum-global-dimension-static-size-1000: 80px;
-    --spectrum-global-dimension-static-size-1200: 96px;
-    --spectrum-global-dimension-static-size-1700: 136px;
-    --spectrum-global-dimension-static-size-2400: 192px;
-    --spectrum-global-dimension-static-size-2500: 200px;
-    --spectrum-global-dimension-static-size-2600: 208px;
-    --spectrum-global-dimension-static-size-2800: 224px;
-    --spectrum-global-dimension-static-size-3200: 256px;
-    --spectrum-global-dimension-static-size-3400: 272px;
-    --spectrum-global-dimension-static-size-3500: 280px;
-    --spectrum-global-dimension-static-size-3600: 288px;
-    --spectrum-global-dimension-static-size-3800: 304px;
-    --spectrum-global-dimension-static-size-4600: 368px;
-    --spectrum-global-dimension-static-size-5000: 400px;
-    --spectrum-global-dimension-static-size-6000: 480px;
-    --spectrum-global-dimension-static-size-16000: 1280px;
-    --spectrum-global-dimension-static-font-size-50: 11px;
-    --spectrum-global-dimension-static-font-size-75: 12px;
-    --spectrum-global-dimension-static-font-size-100: 14px;
-    --spectrum-global-dimension-static-font-size-150: 15px;
-    --spectrum-global-dimension-static-font-size-200: 16px;
-    --spectrum-global-dimension-static-font-size-300: 18px;
-    --spectrum-global-dimension-static-font-size-400: 20px;
-    --spectrum-global-dimension-static-font-size-500: 22px;
-    --spectrum-global-dimension-static-font-size-600: 25px;
-    --spectrum-global-dimension-static-font-size-700: 28px;
-    --spectrum-global-dimension-static-font-size-800: 32px;
-    --spectrum-global-dimension-static-font-size-900: 36px;
-    --spectrum-global-dimension-static-font-size-1000: 40px;
-    --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-global-font-family-serif: adobe-clean-serif, "Source Serif Pro", Georgia, serif;
-    --spectrum-global-font-family-code: "Source Code Pro", Monaco, monospace;
-    --spectrum-global-font-weight-thin: 100;
-    --spectrum-global-font-weight-ultra-light: 200;
-    --spectrum-global-font-weight-light: 300;
-    --spectrum-global-font-weight-regular: 400;
-    --spectrum-global-font-weight-medium: 500;
-    --spectrum-global-font-weight-semi-bold: 600;
-    --spectrum-global-font-weight-bold: 700;
-    --spectrum-global-font-weight-extra-bold: 800;
-    --spectrum-global-font-weight-black: 900;
-    --spectrum-global-font-style-regular: normal;
-    --spectrum-global-font-style-italic: italic;
-    --spectrum-global-font-letter-spacing-none: 0;
-    --spectrum-global-font-letter-spacing-small: 0.0125em;
-    --spectrum-global-font-letter-spacing-han: 0.05em;
-    --spectrum-global-font-letter-spacing-medium: 0.06em;
-    --spectrum-global-font-line-height-large: 1.7;
-    --spectrum-global-font-line-height-medium: 1.5;
-    --spectrum-global-font-line-height-small: 1.3;
-    --spectrum-global-font-multiplier-0: 0em;
-    --spectrum-global-font-multiplier-25: 0.25em;
-    --spectrum-global-font-multiplier-75: 0.75em;
-    --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", "sans-serif";
-    --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, "SimSun", "Heiti SC Light", "sans-serif";
-    --spectrum-global-font-font-family-ko: adobe-clean-han-korean, source-han-korean, "Malgun Gothic", "Apple Gothic", "sans-serif";
-    --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
-    --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550);
-    --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-loupe-entry-animation-duration: var(--spectrum-global-animation-duration-300);
-    --spectrum-alias-loupe-exit-animation-duration: var(--spectrum-global-animation-duration-300);
-    --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-line-height: var(--spectrum-global-font-line-height-small);
-    --spectrum-alias-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-light: var(--spectrum-global-font-weight-light);
-    --spectrum-alias-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-light);
-    --spectrum-alias-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-strong-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-margin-bottom: var(--spectrum-global-font-multiplier-25);
-    --spectrum-alias-subheading-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base);
-    --spectrum-alias-body-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-body-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-body-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-body-margin-bottom: var(--spectrum-global-font-multiplier-75);
-    --spectrum-alias-detail-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-detail-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-detail-text-font-weight-light: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-heading-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-article-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-article-body-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-article-body-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-subheading-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-article-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-article-detail-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-code-text-font-family: var(--spectrum-global-font-family-code);
-    --spectrum-alias-code-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-code-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-code-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0);
-    --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar);
-    --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he);
-    --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh);
-    --spectrum-alias-font-family-zhhans: var(--spectrum-global-font-font-family-zhhans);
-    --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko);
-    --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja);
-    --spectrum-alias-font-family-condensed: var(--spectrum-global-font-font-family-condensed);
-    --spectrum-alias-button-text-line-height: var(--spectrum-global-font-line-height-small);
-    --spectrum-alias-component-text-line-height: var(--spectrum-global-font-line-height-small);
-    --spectrum-alias-han-component-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-serif-text-font-family: var(--spectrum-global-font-family-serif);
-    --spectrum-alias-han-heading-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-han-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(--spectrum-global-font-weight-extra-bold);
-    --spectrum-alias-han-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-heading-text-font-weight-light: var(--spectrum-global-font-weight-light);
-    --spectrum-alias-han-heading-text-font-weight-light-emphasis: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-han-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-body-text-line-height: var(--spectrum-global-font-line-height-large);
-    --spectrum-alias-han-body-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-han-body-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-body-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-subheading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-subheading-text-font-weight-emphasis: var(--spectrum-global-font-weight-extra-bold);
-    --spectrum-alias-han-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-}
-
-:root,
-:host {
-    --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600);
-    --spectrum-alias-item-rounded-border-radius-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-rounded-border-radius-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-rounded-border-radius-l: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-item-rounded-border-radius-xl: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-item-text-size-s: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-item-text-size-m: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-item-text-size-l: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-item-text-size-xl: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-item-text-padding-top-s: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-item-text-padding-top-m: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-text-padding-top-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-text-padding-bottom-m: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-text-padding-bottom-l: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-text-padding-bottom-xl: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-icon-padding-top-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-icon-padding-top-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-icon-padding-top-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-icon-padding-top-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-icon-padding-bottom-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-icon-padding-bottom-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-icon-padding-bottom-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-icon-padding-bottom-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-rounded-padding-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-rounded-padding-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-rounded-padding-l: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-item-rounded-padding-xl: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-item-icononly-padding-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-icononly-padding-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-icononly-padding-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-icononly-padding-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-control-gap-s: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-gap-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-gap-l: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-control-gap-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-workflow-icon-gap-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-workflow-icon-gap-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-workflow-icon-gap-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-workflow-icon-gap-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-ui-icon-gap-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-ui-icon-gap-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-ui-icon-gap-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-clearbutton-gap-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-clearbutton-gap-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-clearbutton-gap-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-clearbutton-gap-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-workflow-padding-left-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-workflow-padding-left-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-workflow-padding-left-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-rounded-workflow-padding-left-s: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-rounded-workflow-padding-left-l: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-mark-padding-top-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-item-mark-padding-top-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-mark-padding-top-xl: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-mark-padding-bottom-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-item-mark-padding-bottom-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-mark-padding-bottom-xl: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-mark-padding-left-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-mark-padding-left-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-mark-padding-left-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-control-1-size-s: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-item-control-1-size-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-control-2-size-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-control-2-size-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-control-2-size-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-control-2-size-xxl: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-item-control-2-border-radius-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-2-border-radius-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-control-2-border-radius-l: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-control-2-border-radius-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-2-border-radius-xxl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-2-padding-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-2-padding-m: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-2-padding-l: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-2-padding-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-control-3-height-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-control-3-height-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-control-3-height-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-control-3-border-radius-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-3-border-radius-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-control-3-border-radius-l: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-control-3-border-radius-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-3-padding-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-3-padding-m: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-3-padding-l: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-3-padding-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-heading-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300);
-    --spectrum-alias-heading-xxl-text-size: var(--spectrum-global-dimension-font-size-1100);
-    --spectrum-alias-heading-xl-text-size: var(--spectrum-global-dimension-font-size-900);
-    --spectrum-alias-heading-l-text-size: var(--spectrum-global-dimension-font-size-700);
-    --spectrum-alias-heading-m-text-size: var(--spectrum-global-dimension-font-size-500);
-    --spectrum-alias-heading-s-text-size: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-heading-xs-text-size: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-xxs-text-size: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200);
-    --spectrum-alias-heading-xxl-margin-top: var(--spectrum-global-dimension-font-size-900);
-    --spectrum-alias-heading-xl-margin-top: var(--spectrum-global-dimension-font-size-800);
-    --spectrum-alias-heading-l-margin-top: var(--spectrum-global-dimension-font-size-600);
-    --spectrum-alias-heading-m-margin-top: var(--spectrum-global-dimension-font-size-400);
-    --spectrum-alias-heading-s-margin-top: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-xs-margin-top: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-xxs-margin-top: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-heading-han-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300);
-    --spectrum-alias-heading-han-xxl-text-size: var(--spectrum-global-dimension-font-size-900);
-    --spectrum-alias-heading-han-xl-text-size: var(--spectrum-global-dimension-font-size-800);
-    --spectrum-alias-heading-han-l-text-size: var(--spectrum-global-dimension-font-size-600);
-    --spectrum-alias-heading-han-m-text-size: var(--spectrum-global-dimension-font-size-400);
-    --spectrum-alias-heading-han-s-text-size: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-heading-han-xs-text-size: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-han-xxs-text-size: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-han-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200);
-    --spectrum-alias-heading-han-xxl-margin-top: var(--spectrum-global-dimension-font-size-800);
-    --spectrum-alias-heading-han-xl-margin-top: var(--spectrum-global-dimension-font-size-700);
-    --spectrum-alias-heading-han-l-margin-top: var(--spectrum-global-dimension-font-size-500);
-    --spectrum-alias-heading-han-m-margin-top: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-heading-han-s-margin-top: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-han-xs-margin-top: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-han-xxs-margin-top: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-component-border-radius: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-component-border-radius-quiet: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-component-focusring-gap: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-component-focusring-gap-emphasized: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-component-focusring-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-component-focusring-size-emphasized: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-input-focusring-gap: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-input-quiet-focusline-gap: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-radius-xsmall: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-border-radius-medium: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-border-radius-large: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-border-radius-xlarge: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-focus-ring-border-radius-xsmall: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-focus-ring-border-radius-medium: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-focus-ring-border-radius-large: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-focus-ring-border-radius-xlarge: var(--spectrum-global-dimension-size-350);
-    --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-control-two-size-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-control-two-size-l: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-control-two-size-xl: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-control-two-size-xxl: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-control-two-border-radius-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-control-two-border-radius-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-control-two-border-radius-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-control-two-border-radius-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-control-two-border-radius-xxl: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-control-two-focus-ring-border-radius-s: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-control-two-focus-ring-border-radius-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-control-two-focus-ring-border-radius-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-control-two-focus-ring-border-radius-xl: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-control-two-focus-ring-border-radius-xxl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-control-three-height-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-control-three-height-l: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-control-three-height-xl: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-control-three-width-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-infieldbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-infieldbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-infieldbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-infieldbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-infieldbutton-padding-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-padding-m: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-padding-l: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-padding-xl: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-border-radius: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-infieldbutton-border-radius-sided: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-infieldbutton-border-size: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-infieldbutton-fill-padding-s: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-infieldbutton-fill-padding-m: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-infieldbutton-fill-padding-l: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-infieldbutton-fill-padding-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-infieldbutton-full-height-s: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-infieldbutton-full-height-m: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-infieldbutton-full-height-l: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-infieldbutton-full-height-xl: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-infieldbutton-half-height-s: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-infieldbutton-half-height-m: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-infieldbutton-half-height-l: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-infieldbutton-half-height-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-stepperbutton-gap: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-stepperbutton-width-s: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-stepperbutton-width-m: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-stepperbutton-width-l: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-stepperbutton-width-xl: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-stepperbutton-icon-x-offset-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-stepperbutton-icon-x-offset-m: var(--spectrum-global-dimension-size-65);
-    --spectrum-alias-stepperbutton-icon-x-offset-l: var(--spectrum-global-dimension-size-65);
-    --spectrum-alias-stepperbutton-icon-x-offset-xl: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-s: 0;
-    --spectrum-alias-stepperbutton-icon-y-offset-top-m: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-l: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: 0;
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: 0;
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: 0;
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: 0;
-    --spectrum-alias-stepperbutton-radius-touching: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-clearbutton-icon-margin-xl: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-clearbutton-border-radius: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-pickerbutton-icononly-padding-x-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-pickerbutton-icononly-padding-x-m: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-pickerbutton-icononly-padding-x-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-pickerbutton-icononly-padding-x-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-pickerbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-pickerbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-pickerbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-pickerbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-pickerbutton-label-padding-y-s: 0;
-    --spectrum-alias-pickerbutton-label-padding-y-m: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-pickerbutton-label-padding-y-l: var(--spectrum-global-dimension-size-65);
-    --spectrum-alias-pickerbutton-label-padding-y-xl: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-pickerbutton-border-radius-rounded: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-pickerbutton-border-radius-rounded-sided: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-search-border-radius: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-combobox-quiet-button-offset-x: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-thumbnail-border-radius-small: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-focus-ring-gap-small: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-focus-ring-size-small: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-input-border-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-avatar-border-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-actiongroup-button-gap: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-actiongroup-button-gap-compact: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-actiongroup-button-gap-quiet: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-actiongroup-button-gap-quiet-compact: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-search-padding-left-s: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-search-padding-left-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-search-padding-left-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-tag-border-radius: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-tag-border-size-default: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-tag-border-size-disabled: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-tag-border-size-key-focus: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-tag-padding-right-s: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-tag-padding-right-m: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-tag-padding-right-l: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-tag-font-size-s: var(--spectrum-global-dimension-font-size-50);
-    --spectrum-alias-tag-font-size-m: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-tag-font-size-l: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-tag-text-padding-top-m: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-tag-text-padding-top-l: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-tag-icon-margin-top-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-tag-icon-margin-top-m: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-tag-icon-margin-top-l: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-tag-clearbutton-width-s: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-tag-clearbutton-width-m: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-tag-clearbutton-width-l: var(--spectrum-global-dimension-size-350);
-    --spectrum-alias-tag-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-30);
-    --spectrum-alias-tag-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-tag-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-tag-focusring-gap: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-450);
-    --spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-550);
-    --spectrum-alias-search-border-radius-quiet: 0;
-    --spectrum-alias-percent-50: 50%;
-    --spectrum-alias-percent-70: 70%;
-    --spectrum-alias-percent-100: 100%;
-    --spectrum-alias-breakpoint-xsmall: 304px;
-    --spectrum-alias-breakpoint-small: 768px;
-    --spectrum-alias-breakpoint-medium: 1280px;
-    --spectrum-alias-breakpoint-large: 1768px;
-    --spectrum-alias-breakpoint-xlarge: 2160px;
-    --spectrum-alias-grid-columns: 12;
-    --spectrum-alias-grid-fluid-width: 100%;
-    --spectrum-alias-grid-fixed-max-width: 1280px;
-    --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550);
-    --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-dropshadow-offset-y: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-font-size-default: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-layout-label-gap-size: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-pill-button-text-size: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-pill-button-text-baseline: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-single-line-height: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-single-line-width: var(--spectrum-global-dimension-size-2400);
-    --spectrum-alias-workflow-icon-size-s: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-workflow-icon-size-m: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-workflow-icon-size-xl: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-ui-icon-alert-size-75: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-ui-icon-alert-size-100: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-ui-icon-alert-size-200: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-ui-icon-alert-size-300: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-ui-icon-triplegripper-size-100-height: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-ui-icon-doublegripper-size-100-width: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-ui-icon-singlegripper-size-100-width: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-ui-icon-cornertriangle-size-75: var(--spectrum-global-dimension-size-65);
-    --spectrum-alias-ui-icon-cornertriangle-size-200: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-ui-icon-asterisk-size-75: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-asterisk-size-100: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-tag-border-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-tag-icon-margin-right-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-tag-icon-margin-right-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-tag-icon-margin-right-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25);
-}
-
-:root,
-:host {
-    --spectrum-alias-colorhandle-outer-border-color: #0000006b;
-    --spectrum-alias-component-text-color-selected-default: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-component-text-color-selected-hover: var(--spectrum-alias-component-text-color-selected-default);
-    --spectrum-alias-component-text-color-selected-down: var(--spectrum-alias-component-text-color-selected-default);
-    --spectrum-alias-component-text-color-selected-key-focus: var(--spectrum-alias-component-text-color-selected-default);
-    --spectrum-alias-component-text-color-selected-mouse-focus: var(--spectrum-alias-component-text-color-selected-default);
-    --spectrum-alias-component-icon-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-component-icon-color-selected: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-component-background-color-default: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-hover: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-component-background-color-down: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-component-background-color-key-focus: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-component-background-color-quiet-hover: var(--spectrum-alias-component-background-color-hover);
-    --spectrum-alias-component-background-color-quiet-down: var(--spectrum-alias-component-background-color-down);
-    --spectrum-alias-component-background-color-quiet-key-focus: var(--spectrum-alias-component-background-color-key-focus);
-    --spectrum-alias-component-background-color-selected-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-component-background-color-selected-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-component-background-color-selected-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-component-background-color-selected-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-component-border-color-default: var(--spectrum-alias-component-background-color-default);
-    --spectrum-alias-component-border-color-hover: var(--spectrum-alias-component-background-color-hover);
-    --spectrum-alias-component-border-color-down: var(--spectrum-alias-component-background-color-down);
-    --spectrum-alias-component-border-color-key-focus: var(--spectrum-alias-component-background-color-key-focus);
-    --spectrum-alias-component-border-color-selected-default: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-border-color-selected-hover: var(--spectrum-alias-component-background-color-selected-hover);
-    --spectrum-alias-component-border-color-selected-down: var(--spectrum-alias-component-background-color-selected-down);
-    --spectrum-alias-component-border-color-selected-key-focus: var(--spectrum-alias-component-background-color-selected-key-focus);
-    --spectrum-alias-component-border-color-quiet-key-focus: var(--spectrum-alias-component-background-color-quiet-default);
-    --spectrum-alias-component-border-color-quiet-selected-default: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-border-color-quiet-selected-hover: var(--spectrum-alias-component-background-color-quiet-selected-hover);
-    --spectrum-alias-component-border-color-quiet-selected-down: var(--spectrum-alias-component-background-color-quiet-selected-down);
-    --spectrum-alias-component-border-color-quiet-selected-key-focus: var(--spectrum-alias-component-background-color-quiet-selected-key-focus);
-    --spectrum-alias-toggle-background-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-background-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-toggle-background-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-toggle-background-color-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-toggle-background-color-emphasized-selected-default: var(--spectrum-global-color-indigo-500);
-    --spectrum-alias-toggle-background-color-emphasized-selected-hover: var(--spectrum-global-color-indigo-600);
-    --spectrum-alias-toggle-background-color-emphasized-selected-down: var(--spectrum-global-color-indigo-700);
-    --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var(--spectrum-global-color-indigo-600);
-    --spectrum-alias-toggle-border-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-border-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-toggle-border-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-toggle-border-color-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tag-border-color-default: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-tag-border-color-hover: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-tag-border-color-down: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-tag-border-color-key-focus: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-tag-border-color-disabled-default: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-tag-border-color-error-key-focus: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-focusring-border-color-key-focus: var(--spectrum-alias-focus-ring-color);
-    --spectrum-alias-tag-background-color-disabled: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-tag-background-color-default: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-tag-background-color-hover: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-tag-background-color-down: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-tag-background-color-key-focus: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-tag-background-color-error-default: var(--spectrum-alias-tag-background-color-default);
-    --spectrum-alias-tag-background-color-error-hover: var(--spectrum-alias-tag-background-color-hover);
-    --spectrum-alias-tag-background-color-error-down: var(--spectrum-alias-tag-background-color-down);
-    --spectrum-alias-tag-background-color-error-key-focus: var(--spectrum-alias-tag-background-color-key-focus);
-    --spectrum-alias-avatar-border-color-disabled: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected-default: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-avatar-border-color-selected-hover: var(--spectrum-alias-component-background-color-selected-hover);
-    --spectrum-alias-avatar-border-color-selected-down: var(--spectrum-alias-component-background-color-selected-hover);
-    --spectrum-alias-avatar-border-color-selected-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-link-primary-text-color-default: var(--spectrum-global-color-indigo-600);
-    --spectrum-alias-link-primary-text-color-hover: var(--spectrum-global-color-indigo-600);
-    --spectrum-alias-link-primary-text-color-down: var(--spectrum-global-color-indigo-700);
-    --spectrum-alias-link-primary-text-color-key-focus: var(--spectrum-alias-text-color-key-focus);
-    --spectrum-alias-link-secondary-text-color-default: var(--spectrum-alias-text-color);
-    --spectrum-alias-link-secondary-text-color-hover: var(--spectrum-alias-link-primary-text-color-hover);
-    --spectrum-alias-link-secondary-text-color-down: var(--spectrum-alias-link-primary-text-color-down);
-    --spectrum-alias-link-secondary-text-color-key-focus: var(--spectrum-alias-link-primary-text-color-key-focus);
-    --spectrum-alias-button-primary-background-color-default: var(--spectrum-alias-button-primary-border-color-default);
-    --spectrum-alias-button-primary-text-color-default: var(--spectrum-alias-button-primary-text-color-hover);
-    --spectrum-alias-button-primary-icon-color-default: var(--spectrum-alias-button-primary-text-color-default);
-    --spectrum-alias-button-secondary-background-color-default: var(--spectrum-alias-button-secondary-border-color-default);
-    --spectrum-alias-button-secondary-text-color-default: var(--spectrum-alias-button-secondary-text-color-hover);
-    --spectrum-alias-button-secondary-icon-color-default: var(--spectrum-alias-button-secondary-text-color-default);
-    --spectrum-alias-button-negative-background-color-default: var(--spectrum-alias-button-negative-border-color-default);
-    --spectrum-alias-button-negative-text-color-default: var(--spectrum-alias-button-negative-text-color-hover);
-    --spectrum-alias-button-negative-icon-color-default: var(--spectrum-alias-button-negative-text-color-default);
-    --spectrum-alias-input-border-color-default: var(--spectrum-alias-border-color);
-    --spectrum-alias-input-border-color-hover: var(--spectrum-alias-border-color-hover);
-    --spectrum-alias-input-border-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-input-border-color-mouse-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-input-border-color-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-input-border-color-invalid-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-yellow-background-color-default: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-alias-yellow-background-color-hover: var(--spectrum-global-color-static-yellow-500);
-    --spectrum-alias-yellow-background-color-key-focus: var(--spectrum-global-color-static-yellow-500);
-    --spectrum-alias-yellow-background-color-down: var(--spectrum-global-color-static-yellow-600);
-    --spectrum-alias-infieldbutton-background-color: transparent;
-    --spectrum-alias-infieldbutton-fill-border-color-default: transparent;
-    --spectrum-alias-infieldbutton-fill-border-color-hover: transparent;
-    --spectrum-alias-infieldbutton-fill-border-color-down: transparent;
-    --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: transparent;
-    --spectrum-alias-infieldbutton-fill-border-color-key-focus: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(--spectrum-alias-component-background-color-disabled);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover);
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down);
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus);
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-default: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-default: #0000001a;
-    --spectrum-alias-actionbutton-staticBlack-border-color-hover: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040;
-    --spectrum-alias-actionbutton-staticBlack-border-color-down: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006;
-    --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040;
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a;
-    --spectrum-alias-actionbutton-staticWhite-border-color-default: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-default: #ffffff1a;
-    --spectrum-alias-actionbutton-staticWhite-border-color-hover: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40;
-    --spectrum-alias-actionbutton-staticWhite-border-color-down: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6;
-    --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40;
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a;
-    --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-thumbnail-darksquare-background-color: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-thumbnail-lightsquare-background-color: var(--spectrum-global-color-static-white);
-    --spectrum-alias-tabs-divider-background-color-default: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-tabs-divider-background-color-quiet: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-tabitem-text-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-tabitem-text-color-hover: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tabitem-text-color-down: var(--spectrum-alias-text-color-down);
-    --spectrum-alias-tabitem-text-color-key-focus: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tabitem-text-color-mouse-focus: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tabitem-text-color-selected-default: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tabitem-text-color-selected-hover: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected-down: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected-key-focus: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-default: var(--spectrum-global-color-indigo-600);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-down: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-selection-indicator-color-default: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tabitem-selection-indicator-color-emphasized: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-icon-color-disabled: var(--spectrum-alias-text-color-disabled);
-    --spectrum-alias-tabitem-icon-color-default: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-icon-color-hover: var(--spectrum-alias-tabitem-text-color-hover);
-    --spectrum-alias-tabitem-icon-color-down: var(--spectrum-alias-tabitem-text-color-down);
-    --spectrum-alias-tabitem-icon-color-key-focus: var(--spectrum-alias-tabitem-text-color-hover);
-    --spectrum-alias-tabitem-icon-color-mouse-focus: var(--spectrum-alias-tabitem-text-color-down);
-    --spectrum-alias-tabitem-icon-color-selected: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-icon-color-emphasized: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-icon-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var(--spectrum-global-color-indigo-500);
-    --spectrum-alias-assetcard-overlay-background-color: #6d73f633;
-    --spectrum-alias-assetcard-border-color-selected: var(--spectrum-global-color-indigo-500);
-    --spectrum-alias-assetcard-border-color-selected-hover: var(--spectrum-global-color-indigo-500);
-    --spectrum-alias-assetcard-border-color-selected-down: var(--spectrum-global-color-indigo-600);
-    --spectrum-alias-transparent-blue-background-color-mouse-focus: var(--spectrum-alias-transparent-blue-background-color-hover);
-    --spectrum-alias-transparent-blue-background-color: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-transparent-red-background-color-hover: #9a000026;
-    --spectrum-alias-transparent-red-background-color-down: #7c00004d;
-    --spectrum-alias-transparent-red-background-color-key-focus: var(--spectrum-alias-transparent-red-background-color-hover);
-    --spectrum-alias-transparent-red-background-color-mouse-focus: var(--spectrum-alias-transparent-red-background-color-hover);
-    --spectrum-alias-transparent-red-background-color: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-component-text-color-disabled: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-component-text-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-component-text-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-component-text-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-component-text-color-key-focus: var(--spectrum-alias-component-text-color-hover);
-    --spectrum-alias-component-text-color-mouse-focus: var(--spectrum-alias-component-text-color-hover);
-    --spectrum-alias-component-text-color: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-component-text-color-selected: var(--spectrum-alias-component-text-color-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-default: var(--spectrum-global-color-static-white);
-    --spectrum-alias-component-text-color-emphasized-selected-hover: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-down: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-key-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-error-default: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-component-text-color-error-hover: var(--spectrum-semantic-negative-text-color-small-hover);
-    --spectrum-alias-component-text-color-error-down: var(--spectrum-semantic-negative-text-color-small-down);
-    --spectrum-alias-component-text-color-error-key-focus: var(--spectrum-semantic-negative-text-color-small-key-focus);
-    --spectrum-alias-component-text-color-error-mouse-focus: var(--spectrum-semantic-negative-text-color-small-key-focus);
-    --spectrum-alias-component-text-color-error: var(--spectrum-alias-component-text-color-error-default);
-    --spectrum-alias-component-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
-    --spectrum-alias-component-icon-color-hover: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-component-icon-color-down: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-component-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-component-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-component-icon-color: var(--spectrum-alias-component-icon-color-default);
-    --spectrum-alias-component-icon-color-emphasized-selected-default: var(--spectrum-global-color-static-white);
-    --spectrum-alias-component-icon-color-emphasized-selected-hover: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-icon-color-emphasized-selected-down: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-icon-color-emphasized-selected: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-background-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-quiet-disabled: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet-selected-disabled: var(--spectrum-alias-component-background-color-disabled);
-    --spectrum-alias-component-background-color: var(--spectrum-alias-component-background-color-default);
-    --spectrum-alias-component-background-color-selected: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-background-color-quiet-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet: var(--spectrum-alias-component-background-color-quiet-default);
-    --spectrum-alias-component-background-color-quiet-selected-default: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-background-color-quiet-selected-hover: var(--spectrum-alias-component-background-color-selected-hover);
-    --spectrum-alias-component-background-color-quiet-selected-down: var(--spectrum-alias-component-background-color-selected-down);
-    --spectrum-alias-component-background-color-quiet-selected-key-focus: var(--spectrum-alias-component-background-color-selected-key-focus);
-    --spectrum-alias-component-background-color-quiet-selected: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-background-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default);
-    --spectrum-alias-component-background-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover);
-    --spectrum-alias-component-background-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down);
-    --spectrum-alias-component-background-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus);
-    --spectrum-alias-component-background-color-emphasized-selected: var(--spectrum-alias-component-background-color-emphasized-selected-default);
-    --spectrum-alias-component-border-color-disabled: var(--spectrum-alias-border-color-disabled);
-    --spectrum-alias-component-border-color-quiet-disabled: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color: var(--spectrum-alias-component-border-color-default);
-    --spectrum-alias-component-border-color-selected: var(--spectrum-alias-component-border-color-selected-default);
-    --spectrum-alias-component-border-color-quiet-default: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-quiet-hover: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-quiet-down: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-quiet: var(--spectrum-alias-component-border-color-quiet-default);
-    --spectrum-alias-component-border-color-quiet-selected: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-border-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default);
-    --spectrum-alias-component-border-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover);
-    --spectrum-alias-component-border-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down);
-    --spectrum-alias-component-border-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus);
-    --spectrum-alias-component-border-color-emphasized-selected: var(--spectrum-alias-component-border-color-emphasized-selected-default);
-    --spectrum-alias-tag-border-color-error-default: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-border-color-error-hover: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-border-color-error-down: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-border-color-error-selected: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-border-color-selected: var(--spectrum-alias-tag-background-color-selected-default);
-    --spectrum-alias-tag-border-color: var(--spectrum-alias-tag-border-color-default);
-    --spectrum-alias-tag-border-color-disabled: var(--spectrum-alias-border-color-disabled);
-    --spectrum-alias-tag-border-color-error: var(--spectrum-alias-tag-border-color-error-default);
-    --spectrum-alias-tag-text-color-default: var(--spectrum-alias-label-text-color);
-    --spectrum-alias-tag-text-color-hover: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down);
-    --spectrum-alias-tag-text-color-key-focus: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tag-text-color-disabled: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-tag-text-color: var(--spectrum-alias-tag-text-color-default);
-    --spectrum-alias-tag-text-color-error-default: var(--spectrum-global-color-red-600);
-    --spectrum-alias-tag-text-color-error-hover: var(--spectrum-global-color-red-700);
-    --spectrum-alias-tag-text-color-error-down: var(--spectrum-global-color-red-700);
-    --spectrum-alias-tag-text-color-error-key-focus: var(--spectrum-global-color-red-700);
-    --spectrum-alias-tag-text-color-error: var(--spectrum-alias-tag-text-color-error-default);
-    --spectrum-alias-tag-text-color-selected: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color);
-    --spectrum-alias-tag-icon-color-hover: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-tag-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tag-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
-    --spectrum-alias-tag-icon-color: var(--spectrum-alias-tag-icon-color-default);
-    --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600);
-    --spectrum-alias-tag-icon-color-selected: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color: var(--spectrum-alias-tag-background-color-default);
-    --spectrum-alias-tag-background-color-error: var(--spectrum-alias-tag-background-color-error-default);
-    --spectrum-alias-tag-background-color-error-selected-default: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-background-color-error-selected-hover: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-background-color-error-selected-down: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-background-color-error-selected-key-focus: var(--spectrum-global-color-red-600);
-    --spectrum-alias-tag-background-color-error-selected: var(--spectrum-alias-tag-background-color-error-selected-default);
-    --spectrum-alias-tag-background-color-selected-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-tag-background-color-selected-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-tag-background-color-selected-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tag-background-color-selected-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tag-background-color-selected: var(--spectrum-alias-tag-background-color-selected-default);
-    --spectrum-alias-tag-focusring-border-color-default: transparent;
-    --spectrum-alias-tag-focusring-border-color-disabled: transparent;
-    --spectrum-alias-tag-focusring-border-color-selected-key-focus: var(--spectrum-alias-focus-ring-color);
-    --spectrum-alias-tag-focusring-border-color: var(--spectrum-alias-tag-focusring-border-color-default);
-    --spectrum-alias-avatar-border-color: var(--spectrum-alias-avatar-border-color-default);
-    --spectrum-alias-avatar-border-color-selected: var(--spectrum-alias-avatar-border-color-selected-default);
-    --spectrum-alias-toggle-background-color: var(--spectrum-alias-toggle-background-color-default);
-    --spectrum-alias-toggle-background-color-emphasized-selected: var(--spectrum-alias-toggle-background-color-emphasized-selected-default);
-    --spectrum-alias-toggle-border-color: var(--spectrum-alias-toggle-border-color-default);
-    --spectrum-alias-toggle-icon-color-selected: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-toggle-icon-color-emphasized-selected: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-button-primary-background-color-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-background-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-button-primary-background-color-key-focus: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-background-color: var(--spectrum-alias-button-primary-background-color-default);
-    --spectrum-alias-button-primary-border-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-border-color-hover: var(--spectrum-alias-button-primary-background-color-hover);
-    --spectrum-alias-button-primary-border-color-down: var(--spectrum-alias-button-primary-background-color-down);
-    --spectrum-alias-button-primary-border-color-key-focus: var(--spectrum-alias-button-primary-background-color-key-focus);
-    --spectrum-alias-button-primary-border-color: var(--spectrum-alias-button-primary-border-color-default);
-    --spectrum-alias-button-primary-text-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-primary-text-color-down: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-primary-text-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-primary-text-color: var(--spectrum-alias-button-primary-text-color-default);
-    --spectrum-alias-button-primary-icon-color-hover: var(--spectrum-alias-button-primary-text-color-hover);
-    --spectrum-alias-button-primary-icon-color-down: var(--spectrum-alias-button-primary-text-color-down);
-    --spectrum-alias-button-primary-icon-color-key-focus: var(--spectrum-alias-button-primary-text-color-key-focus);
-    --spectrum-alias-button-primary-icon-color: var(--spectrum-alias-button-primary-icon-color-default);
-    --spectrum-alias-button-secondary-background-color-hover: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-background-color-down: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-secondary-background-color-key-focus: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-background-color: var(--spectrum-alias-button-secondary-background-color-default);
-    --spectrum-alias-button-secondary-border-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-border-color-hover: var(--spectrum-alias-button-secondary-background-color-hover);
-    --spectrum-alias-button-secondary-border-color-down: var(--spectrum-alias-button-secondary-background-color-down);
-    --spectrum-alias-button-secondary-border-color-key-focus: var(--spectrum-alias-button-secondary-background-color-key-focus);
-    --spectrum-alias-button-secondary-border-color: var(--spectrum-alias-button-secondary-border-color-default);
-    --spectrum-alias-button-secondary-text-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-secondary-text-color-down: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-secondary-text-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-secondary-text-color: var(--spectrum-alias-button-secondary-text-color-default);
-    --spectrum-alias-button-secondary-icon-color-hover: var(--spectrum-alias-button-secondary-text-color-hover);
-    --spectrum-alias-button-secondary-icon-color-down: var(--spectrum-alias-button-secondary-text-color-down);
-    --spectrum-alias-button-secondary-icon-color-key-focus: var(--spectrum-alias-button-secondary-text-color-key-focus);
-    --spectrum-alias-button-secondary-icon-color: var(--spectrum-alias-button-secondary-icon-color-default);
-    --spectrum-alias-button-negative-background-color-hover: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-background-color-down: var(--spectrum-global-color-red-700);
-    --spectrum-alias-button-negative-background-color-key-focus: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-background-color: var(--spectrum-alias-button-negative-background-color-default);
-    --spectrum-alias-button-negative-border-color-default: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-border-color-hover: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-border-color-down: var(--spectrum-global-color-red-700);
-    --spectrum-alias-button-negative-border-color-key-focus: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-border-color: var(--spectrum-alias-button-negative-border-color-default);
-    --spectrum-alias-button-negative-text-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-negative-text-color-down: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-negative-text-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-negative-text-color: var(--spectrum-alias-button-negative-text-color-default);
-    --spectrum-alias-button-negative-icon-color-hover: var(--spectrum-alias-button-negative-text-color-hover);
-    --spectrum-alias-button-negative-icon-color-down: var(--spectrum-alias-button-negative-text-color-down);
-    --spectrum-alias-button-negative-icon-color-key-focus: var(--spectrum-alias-button-negative-text-color-key-focus);
-    --spectrum-alias-button-negative-icon-color: var(--spectrum-alias-button-negative-icon-color-default);
-    --spectrum-alias-input-border-color-disabled: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-input-border-color-quiet-disabled: var(--spectrum-alias-border-color-mid);
-    --spectrum-alias-input-border-color: var(--spectrum-alias-input-border-color-default);
-    --spectrum-alias-input-border-color-invalid-default: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-input-border-color-invalid-hover: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-input-border-color-invalid-down: var(--spectrum-semantic-negative-color-down);
-    --spectrum-alias-input-border-color-invalid-mouse-focus: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-input-border-color-invalid: var(--spectrum-alias-input-border-color-invalid-default);
-    --spectrum-alias-background-color-yellow-default: var(--spectrum-global-color-static-yellow-300);
-    --spectrum-alias-background-color-yellow-hover: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-alias-background-color-yellow-key-focus: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-alias-background-color-yellow-down: var(--spectrum-global-color-static-yellow-500);
-    --spectrum-alias-background-color-yellow: var(--spectrum-alias-background-color-yellow-default);
-    --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var(--spectrum-alias-component-background-color-disabled);
-    --spectrum-alias-tabitem-text-color: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-text-color-selected: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-icon-color: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-background-color-default: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-background-color-transparent: transparent;
-    --spectrum-alias-background-color-overbackground-down: #fff3;
-    --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a;
-    --spectrum-alias-background-color-quiet-overbackground-down: #fff3;
-    --spectrum-alias-background-color-overbackground-disabled: #ffffff1a;
-    --spectrum-alias-background-color-quickactions-overlay: #0003;
-    --spectrum-alias-placeholder-text-color: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-placeholder-text-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-placeholder-text-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-placeholder-text-color-selected: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-text-color: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-text-color-mouse-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500);
-    --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-text-color-selected-neutral: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-text-color-overbackground: var(--spectrum-global-color-static-white);
-    --spectrum-alias-text-color-overbackground-disabled: #fff3;
-    --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3;
-    --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-link-primary-text-color: var(--spectrum-alias-link-primary-text-color-default);
-    --spectrum-alias-link-secondary-text-color: var(--spectrum-alias-link-secondary-text-color-default);
-    --spectrum-alias-border-color: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-border-color-key-focus: var(--spectrum-global-color-blue-400);
-    --spectrum-alias-border-color-mouse-focus: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-border-color-extralight: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-border-color-darker-default: var(--spectrum-global-color-gray-600);
-    --spectrum-alias-border-color-darker-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-border-color-darker-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-border-color-transparent: transparent;
-    --spectrum-alias-border-color-translucent-dark: #0000000d;
-    --spectrum-alias-border-color-translucent-darker: #0000001a;
-    --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400);
-    --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color);
-    --spectrum-alias-track-fill-color-overbackground: var(--spectrum-global-color-static-white);
-    --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-track-color-overbackground: #fff3;
-    --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-icon-color-overbackground: var(--spectrum-global-color-static-white);
-    --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-icon-color-overbackground-disabled: #fff3;
-    --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26;
-    --spectrum-alias-icon-color-selected-neutral: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-selected-neutral-subdued: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-icon-color-selected-hover: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-icon-color-selected-down: var(--spectrum-global-color-blue-700);
-    --spectrum-alias-icon-color-selected-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-image-opacity-disabled: var(--spectrum-global-color-opacity-30);
-    --spectrum-alias-toolbar-background-color: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-code-highlight-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-code-highlight-background-color: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-code-highlight-color-keyword: var(--spectrum-global-color-fuchsia-600);
-    --spectrum-alias-code-highlight-color-section: var(--spectrum-global-color-red-600);
-    --spectrum-alias-code-highlight-color-literal: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-code-highlight-color-attribute: var(--spectrum-global-color-seafoam-600);
-    --spectrum-alias-code-highlight-color-class: var(--spectrum-global-color-magenta-600);
-    --spectrum-alias-code-highlight-color-variable: var(--spectrum-global-color-purple-600);
-    --spectrum-alias-code-highlight-color-title: var(--spectrum-global-color-indigo-600);
-    --spectrum-alias-code-highlight-color-string: var(--spectrum-global-color-fuchsia-600);
-    --spectrum-alias-code-highlight-color-function: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-code-highlight-color-comment: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-categorical-color-1: var(--spectrum-global-color-static-seafoam-200);
-    --spectrum-alias-categorical-color-2: var(--spectrum-global-color-static-indigo-700);
-    --spectrum-alias-categorical-color-3: var(--spectrum-global-color-static-orange-500);
-    --spectrum-alias-categorical-color-4: var(--spectrum-global-color-static-magenta-500);
-    --spectrum-alias-categorical-color-5: var(--spectrum-global-color-static-indigo-200);
-    --spectrum-alias-categorical-color-6: var(--spectrum-global-color-static-celery-200);
-    --spectrum-alias-categorical-color-7: var(--spectrum-global-color-static-blue-500);
-    --spectrum-alias-categorical-color-8: var(--spectrum-global-color-static-purple-800);
-    --spectrum-alias-categorical-color-9: var(--spectrum-global-color-static-yellow-500);
-    --spectrum-alias-categorical-color-10: var(--spectrum-global-color-static-orange-700);
-    --spectrum-alias-categorical-color-11: var(--spectrum-global-color-static-green-600);
-    --spectrum-alias-categorical-color-12: var(--spectrum-global-color-static-chartreuse-300);
-    --spectrum-alias-categorical-color-13: var(--spectrum-global-color-static-blue-200);
-    --spectrum-alias-categorical-color-14: var(--spectrum-global-color-static-fuchsia-500);
-    --spectrum-alias-categorical-color-15: var(--spectrum-global-color-static-magenta-200);
-    --spectrum-alias-categorical-color-16: var(--spectrum-global-color-static-yellow-200);
-}
diff --git a/tools/styles/express/spectrum-scale-large.css b/tools/styles/express/spectrum-scale-large.css
deleted file mode 100644
index 78fcfd8ee5c..00000000000
--- a/tools/styles/express/spectrum-scale-large.css
+++ /dev/null
@@ -1,147 +0,0 @@
-:root,
-:host {
-    --spectrum-global-dimension-scale-factor: 1.25;
-    --spectrum-global-dimension-size-0: 0px;
-    --spectrum-global-dimension-size-10: 1px;
-    --spectrum-global-dimension-size-25: 2px;
-    --spectrum-global-dimension-size-30: 3px;
-    --spectrum-global-dimension-size-40: 4px;
-    --spectrum-global-dimension-size-50: 5px;
-    --spectrum-global-dimension-size-65: 6px;
-    --spectrum-global-dimension-size-75: 8px;
-    --spectrum-global-dimension-size-85: 9px;
-    --spectrum-global-dimension-size-100: 10px;
-    --spectrum-global-dimension-size-115: 11px;
-    --spectrum-global-dimension-size-125: 13px;
-    --spectrum-global-dimension-size-130: 14px;
-    --spectrum-global-dimension-size-150: 15px;
-    --spectrum-global-dimension-size-160: 16px;
-    --spectrum-global-dimension-size-175: 18px;
-    --spectrum-global-dimension-size-185: 19px;
-    --spectrum-global-dimension-size-200: 20px;
-    --spectrum-global-dimension-size-225: 22px;
-    --spectrum-global-dimension-size-250: 25px;
-    --spectrum-global-dimension-size-275: 28px;
-    --spectrum-global-dimension-size-300: 30px;
-    --spectrum-global-dimension-size-325: 32px;
-    --spectrum-global-dimension-size-350: 35px;
-    --spectrum-global-dimension-size-400: 40px;
-    --spectrum-global-dimension-size-450: 45px;
-    --spectrum-global-dimension-size-500: 50px;
-    --spectrum-global-dimension-size-550: 56px;
-    --spectrum-global-dimension-size-600: 60px;
-    --spectrum-global-dimension-size-650: 65px;
-    --spectrum-global-dimension-size-675: 68px;
-    --spectrum-global-dimension-size-700: 70px;
-    --spectrum-global-dimension-size-750: 75px;
-    --spectrum-global-dimension-size-800: 80px;
-    --spectrum-global-dimension-size-900: 90px;
-    --spectrum-global-dimension-size-1000: 100px;
-    --spectrum-global-dimension-size-1125: 112px;
-    --spectrum-global-dimension-size-1200: 120px;
-    --spectrum-global-dimension-size-1250: 125px;
-    --spectrum-global-dimension-size-1600: 160px;
-    --spectrum-global-dimension-size-1700: 170px;
-    --spectrum-global-dimension-size-1800: 180px;
-    --spectrum-global-dimension-size-2000: 200px;
-    --spectrum-global-dimension-size-2400: 240px;
-    --spectrum-global-dimension-size-2500: 250px;
-    --spectrum-global-dimension-size-3000: 300px;
-    --spectrum-global-dimension-size-3400: 340px;
-    --spectrum-global-dimension-size-3600: 360px;
-    --spectrum-global-dimension-size-4600: 460px;
-    --spectrum-global-dimension-size-5000: 500px;
-    --spectrum-global-dimension-size-6000: 600px;
-    --spectrum-global-dimension-font-size-25: 12px;
-    --spectrum-global-dimension-font-size-50: 13px;
-    --spectrum-global-dimension-font-size-75: 15px;
-    --spectrum-global-dimension-font-size-100: 17px;
-    --spectrum-global-dimension-font-size-150: 18px;
-    --spectrum-global-dimension-font-size-200: 19px;
-    --spectrum-global-dimension-font-size-300: 22px;
-    --spectrum-global-dimension-font-size-400: 24px;
-    --spectrum-global-dimension-font-size-500: 27px;
-    --spectrum-global-dimension-font-size-600: 31px;
-    --spectrum-global-dimension-font-size-700: 34px;
-    --spectrum-global-dimension-font-size-800: 39px;
-    --spectrum-global-dimension-font-size-900: 44px;
-    --spectrum-global-dimension-font-size-1000: 49px;
-    --spectrum-global-dimension-font-size-1100: 55px;
-    --spectrum-global-dimension-font-size-1200: 62px;
-    --spectrum-global-dimension-font-size-1300: 70px;
-    --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-rounded-workflow-padding-left-m: 17px;
-    --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px;
-    --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-control-3-width-s: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-450);
-    --spectrum-alias-item-control-3-width-l: 41px;
-    --spectrum-alias-item-control-3-width-xl: 46px;
-    --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-static-size-325);
-    --spectrum-alias-component-focusring-border-radius: var(--spectrum-alias-focus-ring-border-radius-regular);
-    --spectrum-alias-focus-ring-border-radius-small: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-focus-ring-border-radius-regular: 12px;
-    --spectrum-alias-control-three-width-m: 34px;
-    --spectrum-alias-control-three-width-l: 38px;
-    --spectrum-alias-control-three-width-xl: var(--spectrum-global-dimension-static-size-550);
-    --spectrum-alias-tag-text-padding-top-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-275);
-    --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-115);
-    --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-275);
-    --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-275);
-    --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-avatar-size-100: 26px;
-    --spectrum-alias-avatar-size-400: 36px;
-    --spectrum-alias-avatar-size-600: 46px;
-    --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-xs-text-size);
-    --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-75);
-}
diff --git a/tools/styles/express/spectrum-scale-medium.css b/tools/styles/express/spectrum-scale-medium.css
deleted file mode 100644
index 98ff6bd8101..00000000000
--- a/tools/styles/express/spectrum-scale-medium.css
+++ /dev/null
@@ -1,147 +0,0 @@
-:root,
-:host {
-    --spectrum-global-dimension-scale-factor: 1;
-    --spectrum-global-dimension-size-0: 0px;
-    --spectrum-global-dimension-size-10: 1px;
-    --spectrum-global-dimension-size-25: 2px;
-    --spectrum-global-dimension-size-30: 2px;
-    --spectrum-global-dimension-size-40: 3px;
-    --spectrum-global-dimension-size-50: 4px;
-    --spectrum-global-dimension-size-65: 5px;
-    --spectrum-global-dimension-size-75: 6px;
-    --spectrum-global-dimension-size-85: 7px;
-    --spectrum-global-dimension-size-100: 8px;
-    --spectrum-global-dimension-size-115: 9px;
-    --spectrum-global-dimension-size-125: 10px;
-    --spectrum-global-dimension-size-130: 11px;
-    --spectrum-global-dimension-size-150: 12px;
-    --spectrum-global-dimension-size-160: 13px;
-    --spectrum-global-dimension-size-175: 14px;
-    --spectrum-global-dimension-size-185: 15px;
-    --spectrum-global-dimension-size-200: 16px;
-    --spectrum-global-dimension-size-225: 18px;
-    --spectrum-global-dimension-size-250: 20px;
-    --spectrum-global-dimension-size-275: 22px;
-    --spectrum-global-dimension-size-300: 24px;
-    --spectrum-global-dimension-size-325: 26px;
-    --spectrum-global-dimension-size-350: 28px;
-    --spectrum-global-dimension-size-400: 32px;
-    --spectrum-global-dimension-size-450: 36px;
-    --spectrum-global-dimension-size-500: 40px;
-    --spectrum-global-dimension-size-550: 44px;
-    --spectrum-global-dimension-size-600: 48px;
-    --spectrum-global-dimension-size-650: 52px;
-    --spectrum-global-dimension-size-675: 54px;
-    --spectrum-global-dimension-size-700: 56px;
-    --spectrum-global-dimension-size-750: 60px;
-    --spectrum-global-dimension-size-800: 64px;
-    --spectrum-global-dimension-size-900: 72px;
-    --spectrum-global-dimension-size-1000: 80px;
-    --spectrum-global-dimension-size-1125: 90px;
-    --spectrum-global-dimension-size-1200: 96px;
-    --spectrum-global-dimension-size-1250: 100px;
-    --spectrum-global-dimension-size-1600: 128px;
-    --spectrum-global-dimension-size-1700: 136px;
-    --spectrum-global-dimension-size-1800: 144px;
-    --spectrum-global-dimension-size-2000: 160px;
-    --spectrum-global-dimension-size-2400: 192px;
-    --spectrum-global-dimension-size-2500: 200px;
-    --spectrum-global-dimension-size-3000: 240px;
-    --spectrum-global-dimension-size-3400: 272px;
-    --spectrum-global-dimension-size-3600: 288px;
-    --spectrum-global-dimension-size-4600: 368px;
-    --spectrum-global-dimension-size-5000: 400px;
-    --spectrum-global-dimension-size-6000: 480px;
-    --spectrum-global-dimension-font-size-25: 10px;
-    --spectrum-global-dimension-font-size-50: 11px;
-    --spectrum-global-dimension-font-size-75: 12px;
-    --spectrum-global-dimension-font-size-100: 14px;
-    --spectrum-global-dimension-font-size-150: 15px;
-    --spectrum-global-dimension-font-size-200: 16px;
-    --spectrum-global-dimension-font-size-300: 18px;
-    --spectrum-global-dimension-font-size-400: 20px;
-    --spectrum-global-dimension-font-size-500: 22px;
-    --spectrum-global-dimension-font-size-600: 25px;
-    --spectrum-global-dimension-font-size-700: 28px;
-    --spectrum-global-dimension-font-size-800: 32px;
-    --spectrum-global-dimension-font-size-900: 36px;
-    --spectrum-global-dimension-font-size-1000: 40px;
-    --spectrum-global-dimension-font-size-1100: 45px;
-    --spectrum-global-dimension-font-size-1200: 50px;
-    --spectrum-global-dimension-font-size-1300: 60px;
-    --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-rounded-workflow-padding-left-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px;
-    --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-3-width-s: 23px;
-    --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-325);
-    --spectrum-alias-item-control-3-width-l: 29px;
-    --spectrum-alias-item-control-3-width-xl: 33px;
-    --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-focus-ring-border-radius-small: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-control-three-width-m: 28px;
-    --spectrum-alias-control-three-width-l: var(--spectrum-global-dimension-static-size-450);
-    --spectrum-alias-control-three-width-xl: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-tag-text-padding-top-s: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350);
-    --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450);
-    --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-s-text-size);
-    --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-100);
-}
diff --git a/tools/styles/express/spectrum-theme-dark.css b/tools/styles/express/spectrum-theme-dark.css
deleted file mode 100644
index 69d113f9044..00000000000
--- a/tools/styles/express/spectrum-theme-dark.css
+++ /dev/null
@@ -1,170 +0,0 @@
-:root,
-:host {
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-opacity-100: 1;
-    --spectrum-global-color-opacity-90: 0.9;
-    --spectrum-global-color-opacity-80: 0.8;
-    --spectrum-global-color-opacity-70: 0.7;
-    --spectrum-global-color-opacity-60: 0.6;
-    --spectrum-global-color-opacity-55: 0.55;
-    --spectrum-global-color-opacity-50: 0.5;
-    --spectrum-global-color-opacity-42: 0.42;
-    --spectrum-global-color-opacity-40: 0.4;
-    --spectrum-global-color-opacity-30: 0.3;
-    --spectrum-global-color-opacity-25: 0.25;
-    --spectrum-global-color-opacity-20: 0.2;
-    --spectrum-global-color-opacity-15: 0.15;
-    --spectrum-global-color-opacity-10: 0.1;
-    --spectrum-global-color-opacity-8: 0.08;
-    --spectrum-global-color-opacity-7: 0.07;
-    --spectrum-global-color-opacity-6: 0.06;
-    --spectrum-global-color-opacity-5: 0.05;
-    --spectrum-global-color-opacity-4: 0.04;
-    --spectrum-global-color-opacity-0: 0;
-    --spectrum-global-color-celery-400-rgb: 34, 184, 51;
-    --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb));
-    --spectrum-global-color-celery-500-rgb: 68, 202, 73;
-    --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb));
-    --spectrum-global-color-celery-600-rgb: 105, 220, 99;
-    --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb));
-    --spectrum-global-color-celery-700-rgb: 142, 235, 127;
-    --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb));
-    --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8;
-    --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb));
-    --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18;
-    --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb));
-    --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37;
-    --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb));
-    --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71;
-    --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb));
-    --spectrum-global-color-yellow-400-rgb: 228, 194, 0;
-    --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb));
-    --spectrum-global-color-yellow-500-rgb: 244, 213, 0;
-    --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb));
-    --spectrum-global-color-yellow-600-rgb: 249, 232, 92;
-    --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb));
-    --spectrum-global-color-yellow-700-rgb: 252, 246, 187;
-    --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb));
-    --spectrum-global-color-magenta-400-rgb: 222, 61, 130;
-    --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb));
-    --spectrum-global-color-magenta-500-rgb: 237, 87, 149;
-    --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb));
-    --spectrum-global-color-magenta-600-rgb: 249, 114, 167;
-    --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb));
-    --spectrum-global-color-magenta-700-rgb: 255, 143, 185;
-    --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb));
-    --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206;
-    --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb));
-    --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224;
-    --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb));
-    --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236;
-    --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb));
-    --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242;
-    --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb));
-    --spectrum-global-color-purple-400-rgb: 157, 87, 243;
-    --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb));
-    --spectrum-global-color-purple-500-rgb: 172, 111, 249;
-    --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb));
-    --spectrum-global-color-purple-600-rgb: 187, 135, 251;
-    --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb));
-    --spectrum-global-color-purple-700-rgb: 202, 159, 252;
-    --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb));
-    --spectrum-global-color-indigo-400-rgb: 104, 109, 244;
-    --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb));
-    --spectrum-global-color-indigo-500-rgb: 124, 129, 251;
-    --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb));
-    --spectrum-global-color-indigo-600-rgb: 145, 149, 255;
-    --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb));
-    --spectrum-global-color-indigo-700-rgb: 167, 170, 255;
-    --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb));
-    --spectrum-global-color-seafoam-400-rgb: 0, 158, 152;
-    --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb));
-    --spectrum-global-color-seafoam-500-rgb: 3, 178, 171;
-    --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb));
-    --spectrum-global-color-seafoam-600-rgb: 54, 197, 189;
-    --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb));
-    --spectrum-global-color-seafoam-700-rgb: 93, 214, 207;
-    --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb));
-    --spectrum-global-color-red-400-rgb: 234, 56, 41;
-    --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb));
-    --spectrum-global-color-red-500-rgb: 246, 88, 67;
-    --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb));
-    --spectrum-global-color-red-600-rgb: 255, 117, 94;
-    --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb));
-    --spectrum-global-color-red-700-rgb: 255, 149, 129;
-    --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb));
-    --spectrum-global-color-orange-400-rgb: 244, 129, 12;
-    --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb));
-    --spectrum-global-color-orange-500-rgb: 254, 154, 46;
-    --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb));
-    --spectrum-global-color-orange-600-rgb: 255, 181, 88;
-    --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb));
-    --spectrum-global-color-orange-700-rgb: 253, 206, 136;
-    --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb));
-    --spectrum-global-color-green-400-rgb: 18, 162, 108;
-    --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb));
-    --spectrum-global-color-green-500-rgb: 43, 180, 125;
-    --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb));
-    --spectrum-global-color-green-600-rgb: 67, 199, 143;
-    --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb));
-    --spectrum-global-color-green-700-rgb: 94, 217, 162;
-    --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb));
-    --spectrum-global-color-blue-400-rgb: 52, 143, 244;
-    --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb));
-    --spectrum-global-color-blue-500-rgb: 84, 163, 246;
-    --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb));
-    --spectrum-global-color-blue-600-rgb: 114, 183, 249;
-    --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb));
-    --spectrum-global-color-blue-700-rgb: 143, 202, 252;
-    --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb));
-    --spectrum-global-color-gray-50-rgb: 29, 29, 29;
-    --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb));
-    --spectrum-global-color-gray-75-rgb: 38, 38, 38;
-    --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb));
-    --spectrum-global-color-gray-100-rgb: 50, 50, 50;
-    --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb));
-    --spectrum-global-color-gray-200-rgb: 63, 63, 63;
-    --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb));
-    --spectrum-global-color-gray-300-rgb: 84, 84, 84;
-    --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb));
-    --spectrum-global-color-gray-400-rgb: 112, 112, 112;
-    --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb));
-    --spectrum-global-color-gray-500-rgb: 144, 144, 144;
-    --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb));
-    --spectrum-global-color-gray-600-rgb: 178, 178, 178;
-    --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb));
-    --spectrum-global-color-gray-700-rgb: 209, 209, 209;
-    --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb));
-    --spectrum-global-color-gray-800-rgb: 235, 235, 235;
-    --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb));
-    --spectrum-global-color-gray-900-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb));
-    --spectrum-alias-avatar-border-color-default: #ffffff1a;
-    --spectrum-alias-avatar-border-color-hover: #ffffff40;
-    --spectrum-alias-avatar-border-color-down: #fff6;
-    --spectrum-alias-avatar-border-color-key-focus: #ffffff40;
-    --spectrum-alias-avatar-border-color-selected-disabled: #ffffff1a;
-    --spectrum-alias-transparent-blue-background-color-default: #7c81fb26;
-    --spectrum-alias-transparent-blue-background-color-hover: #9195ff26;
-    --spectrum-alias-transparent-blue-background-color-down: #a7aaff26;
-    --spectrum-alias-transparent-blue-background-color-key-focus: #9195ff26;
-    --spectrum-alias-border-color-selected: #ffffffe6;
-    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-background-color-modal-overlay: #00000080;
-    --spectrum-alias-dropshadow-color: #00000080;
-    --spectrum-alias-background-color-hover-overlay: #ffffff0f;
-    --spectrum-alias-highlight-hover: #ffffff12;
-    --spectrum-alias-highlight-down: #ffffff1a;
-    --spectrum-alias-highlight-selected: #54a3f626;
-    --spectrum-alias-highlight-selected-hover: #54a3f640;
-    --spectrum-alias-text-highlight-color: #54a3f640;
-    --spectrum-alias-background-color-quickactions: #323232e6;
-    --spectrum-alias-border-color-translucent: #ffffff1a;
-    --spectrum-alias-radial-reaction-color-default: #ebebeb99;
-    --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-50);
-}
diff --git a/tools/styles/express/spectrum-theme-light.css b/tools/styles/express/spectrum-theme-light.css
deleted file mode 100644
index 55a587758dd..00000000000
--- a/tools/styles/express/spectrum-theme-light.css
+++ /dev/null
@@ -1,170 +0,0 @@
-:root,
-:host {
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-opacity-100: 1;
-    --spectrum-global-color-opacity-90: 0.9;
-    --spectrum-global-color-opacity-80: 0.8;
-    --spectrum-global-color-opacity-70: 0.7;
-    --spectrum-global-color-opacity-60: 0.6;
-    --spectrum-global-color-opacity-55: 0.55;
-    --spectrum-global-color-opacity-50: 0.5;
-    --spectrum-global-color-opacity-42: 0.42;
-    --spectrum-global-color-opacity-40: 0.4;
-    --spectrum-global-color-opacity-30: 0.3;
-    --spectrum-global-color-opacity-25: 0.25;
-    --spectrum-global-color-opacity-20: 0.2;
-    --spectrum-global-color-opacity-15: 0.15;
-    --spectrum-global-color-opacity-10: 0.1;
-    --spectrum-global-color-opacity-8: 0.08;
-    --spectrum-global-color-opacity-7: 0.07;
-    --spectrum-global-color-opacity-6: 0.06;
-    --spectrum-global-color-opacity-5: 0.05;
-    --spectrum-global-color-opacity-4: 0.04;
-    --spectrum-global-color-opacity-0: 0;
-    --spectrum-global-color-celery-400-rgb: 39, 187, 54;
-    --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb));
-    --spectrum-global-color-celery-500-rgb: 7, 167, 33;
-    --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb));
-    --spectrum-global-color-celery-600-rgb: 0, 145, 18;
-    --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb));
-    --spectrum-global-color-celery-700-rgb: 0, 124, 15;
-    --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb));
-    --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10;
-    --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb));
-    --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3;
-    --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb));
-    --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0;
-    --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb));
-    --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0;
-    --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb));
-    --spectrum-global-color-yellow-400-rgb: 232, 198, 0;
-    --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb));
-    --spectrum-global-color-yellow-500-rgb: 215, 179, 0;
-    --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb));
-    --spectrum-global-color-yellow-600-rgb: 196, 159, 0;
-    --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb));
-    --spectrum-global-color-yellow-700-rgb: 176, 140, 0;
-    --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb));
-    --spectrum-global-color-magenta-400-rgb: 222, 61, 130;
-    --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb));
-    --spectrum-global-color-magenta-500-rgb: 200, 34, 105;
-    --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb));
-    --spectrum-global-color-magenta-600-rgb: 173, 9, 85;
-    --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb));
-    --spectrum-global-color-magenta-700-rgb: 142, 0, 69;
-    --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb));
-    --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206;
-    --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb));
-    --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183;
-    --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb));
-    --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158;
-    --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb));
-    --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129;
-    --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb));
-    --spectrum-global-color-purple-400-rgb: 157, 87, 244;
-    --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb));
-    --spectrum-global-color-purple-500-rgb: 137, 61, 231;
-    --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb));
-    --spectrum-global-color-purple-600-rgb: 115, 38, 211;
-    --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb));
-    --spectrum-global-color-purple-700-rgb: 93, 19, 183;
-    --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb));
-    --spectrum-global-color-indigo-400-rgb: 104, 109, 244;
-    --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb));
-    --spectrum-global-color-indigo-500-rgb: 82, 88, 228;
-    --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb));
-    --spectrum-global-color-indigo-600-rgb: 64, 70, 202;
-    --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb));
-    --spectrum-global-color-indigo-700-rgb: 50, 54, 168;
-    --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb));
-    --spectrum-global-color-seafoam-400-rgb: 0, 161, 154;
-    --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb));
-    --spectrum-global-color-seafoam-500-rgb: 0, 140, 135;
-    --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb));
-    --spectrum-global-color-seafoam-600-rgb: 0, 119, 114;
-    --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb));
-    --spectrum-global-color-seafoam-700-rgb: 0, 99, 95;
-    --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb));
-    --spectrum-global-color-red-400-rgb: 234, 56, 41;
-    --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb));
-    --spectrum-global-color-red-500-rgb: 211, 21, 16;
-    --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb));
-    --spectrum-global-color-red-600-rgb: 180, 0, 0;
-    --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb));
-    --spectrum-global-color-red-700-rgb: 147, 0, 0;
-    --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb));
-    --spectrum-global-color-orange-400-rgb: 246, 133, 17;
-    --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb));
-    --spectrum-global-color-orange-500-rgb: 228, 111, 0;
-    --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb));
-    --spectrum-global-color-orange-600-rgb: 203, 93, 0;
-    --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb));
-    --spectrum-global-color-orange-700-rgb: 177, 76, 0;
-    --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb));
-    --spectrum-global-color-green-400-rgb: 0, 143, 93;
-    --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb));
-    --spectrum-global-color-green-500-rgb: 0, 122, 77;
-    --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb));
-    --spectrum-global-color-green-600-rgb: 0, 101, 62;
-    --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb));
-    --spectrum-global-color-green-700-rgb: 0, 81, 50;
-    --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb));
-    --spectrum-global-color-blue-400-rgb: 20, 122, 243;
-    --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb));
-    --spectrum-global-color-blue-500-rgb: 2, 101, 220;
-    --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb));
-    --spectrum-global-color-blue-600-rgb: 0, 84, 182;
-    --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb));
-    --spectrum-global-color-blue-700-rgb: 0, 68, 145;
-    --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb));
-    --spectrum-global-color-gray-50-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb));
-    --spectrum-global-color-gray-75-rgb: 253, 253, 253;
-    --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb));
-    --spectrum-global-color-gray-100-rgb: 248, 248, 248;
-    --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb));
-    --spectrum-global-color-gray-200-rgb: 230, 230, 230;
-    --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb));
-    --spectrum-global-color-gray-300-rgb: 213, 213, 213;
-    --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb));
-    --spectrum-global-color-gray-400-rgb: 177, 177, 177;
-    --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb));
-    --spectrum-global-color-gray-500-rgb: 144, 144, 144;
-    --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb));
-    --spectrum-global-color-gray-600-rgb: 109, 109, 109;
-    --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb));
-    --spectrum-global-color-gray-700-rgb: 70, 70, 70;
-    --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb));
-    --spectrum-global-color-gray-800-rgb: 34, 34, 34;
-    --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb));
-    --spectrum-global-color-gray-900-rgb: 0, 0, 0;
-    --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb));
-    --spectrum-alias-avatar-border-color-default: #0000001a;
-    --spectrum-alias-avatar-border-color-hover: #00000040;
-    --spectrum-alias-avatar-border-color-down: #0006;
-    --spectrum-alias-avatar-border-color-key-focus: #00000040;
-    --spectrum-alias-avatar-border-color-selected-disabled: #0000001a;
-    --spectrum-alias-transparent-blue-background-color-default: #5258e426;
-    --spectrum-alias-transparent-blue-background-color-hover: #4046ca26;
-    --spectrum-alias-transparent-blue-background-color-down: #3236a826;
-    --spectrum-alias-transparent-blue-background-color-key-focus: #4046ca26;
-    --spectrum-alias-border-color-selected: #000000e6;
-    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-background-color-modal-overlay: #0006;
-    --spectrum-alias-dropshadow-color: #00000026;
-    --spectrum-alias-background-color-hover-overlay: #0000000a;
-    --spectrum-alias-highlight-hover: #0000000f;
-    --spectrum-alias-highlight-down: #0000001a;
-    --spectrum-alias-highlight-selected: #0265dc1a;
-    --spectrum-alias-highlight-selected-hover: #0265dc33;
-    --spectrum-alias-text-highlight-color: #0265dc33;
-    --spectrum-alias-background-color-quickactions: #f8f8f8e6;
-    --spectrum-alias-border-color-translucent: #0000001a;
-    --spectrum-alias-radial-reaction-color-default: #2229;
-    --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-300);
-}
diff --git a/tools/styles/express/theme-light.css b/tools/styles/express/theme-light.css
deleted file mode 100644
index 8302458aa8e..00000000000
--- a/tools/styles/express/theme-light.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-theme-light.css";
-
-:host,
-:root {
-    color-scheme: light;
-}
diff --git a/tools/styles/fonts.css b/tools/styles/fonts.css
deleted file mode 100755
index 22270fbe70b..00000000000
--- a/tools/styles/fonts.css
+++ /dev/null
@@ -1,783 +0,0 @@
-.spectrum-Typography {
-    font-family: var(--spectrum-font-family);
-    font-style: var(--spectrum-font-style);
-    font-size: var(--spectrum-font-size);
-}
-
-.spectrum-Typography:lang(ar) {
-    font-family: var(--spectrum-font-family-ar);
-}
-
-.spectrum-Typography:lang(he) {
-    font-family: var(--spectrum-font-family-he);
-}
-
-.spectrum-Typography .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-Typography .spectrum-Body {
-    --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
-}
-
-.spectrum-Typography .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));
-}
-
-.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);
-}
-
-.spectrum-Heading--sizeXXS {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xxs);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs);
-}
-
-.spectrum-Heading--sizeXS {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xs);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs);
-}
-
-.spectrum-Heading--sizeS {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-s);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s);
-}
-
-.spectrum-Heading--sizeL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-l);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l);
-}
-
-.spectrum-Heading--sizeXL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xl);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl);
-}
-
-.spectrum-Heading--sizeXXL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xxl);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl);
-}
-
-.spectrum-Heading--sizeXXXL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl);
-}
-
-.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: 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));
-}
-
-.spectrum-Heading .spectrum-Heading-strong,
-.spectrum-Heading strong {
-    font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style));
-    font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight));
-}
-
-.spectrum-Heading .spectrum-Heading-emphasized,
-.spectrum-Heading em {
-    font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight));
-}
-
-.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading em strong,
-.spectrum-Heading strong em {
-    font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading:lang(ja),
-.spectrum-Heading:lang(ko),
-.spectrum-Heading:lang(zh) {
-    font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family));
-    font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style));
-    font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight));
-    font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size));
-    line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height));
-    letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing));
-}
-
-.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ja) em,
-.spectrum-Heading:lang(ko) .spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ko) em,
-.spectrum-Heading:lang(zh) .spectrum-Heading-emphasized,
-.spectrum-Heading:lang(zh) em {
-    font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight));
-}
-
-.spectrum-Heading:lang(ja) .spectrum-Heading-strong,
-.spectrum-Heading:lang(ja) strong,
-.spectrum-Heading:lang(ko) .spectrum-Heading-strong,
-.spectrum-Heading:lang(ko) strong,
-.spectrum-Heading:lang(zh) .spectrum-Heading-strong,
-.spectrum-Heading:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style));
-    font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight));
-}
-
-.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ja) em strong,
-.spectrum-Heading:lang(ja) strong em,
-.spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ko) em strong,
-.spectrum-Heading:lang(ko) strong em,
-.spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading:lang(zh) em strong,
-.spectrum-Heading:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy {
-    font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight));
-}
-
-.spectrum-Heading--heavy .spectrum-Heading-strong,
-.spectrum-Heading--heavy strong {
-    font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight));
-}
-
-.spectrum-Heading--heavy .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy em {
-    font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy em strong,
-.spectrum-Heading--heavy strong em {
-    font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja),
-.spectrum-Heading--heavy:lang(ko),
-.spectrum-Heading--heavy:lang(zh) {
-    font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ja) em,
-.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ko) em,
-.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(zh) em {
-    font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong,
-.spectrum-Heading--heavy:lang(ja) strong,
-.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong,
-.spectrum-Heading--heavy:lang(ko) strong,
-.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong,
-.spectrum-Heading--heavy:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ja) em strong,
-.spectrum-Heading--heavy:lang(ja) strong em,
-.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ko) em strong,
-.spectrum-Heading--heavy:lang(ko) strong em,
-.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(zh) em strong,
-.spectrum-Heading--heavy:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--light {
-    font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight));
-}
-
-.spectrum-Heading--light .spectrum-Heading-emphasized,
-.spectrum-Heading--light em {
-    font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight));
-}
-
-.spectrum-Heading--light .spectrum-Heading-strong,
-.spectrum-Heading--light strong {
-    font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight));
-}
-
-.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light em strong,
-.spectrum-Heading--light strong em {
-    font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja),
-.spectrum-Heading--light:lang(ko),
-.spectrum-Heading--light:lang(zh) {
-    font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style));
-    font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong,
-.spectrum-Heading--light:lang(ja) strong,
-.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong,
-.spectrum-Heading--light:lang(ko) strong,
-.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong,
-.spectrum-Heading--light:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style));
-    font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ja) em,
-.spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ko) em,
-.spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(zh) em {
-    font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ja) em strong,
-.spectrum-Heading--light:lang(ja) strong em,
-.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ko) em strong,
-.spectrum-Heading--light:lang(ko) strong em,
-.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(zh) em strong,
-.spectrum-Heading--light:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif {
-    font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family));
-    font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style));
-    font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight));
-}
-
-.spectrum-Heading--serif .spectrum-Heading-emphasized,
-.spectrum-Heading--serif em {
-    font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif .spectrum-Heading-strong,
-.spectrum-Heading--serif strong {
-    font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style));
-    font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight));
-}
-
-.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--serif em strong,
-.spectrum-Heading--serif strong em {
-    font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--heavy {
-    font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style));
-    font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong,
-.spectrum-Heading--serif.spectrum-Heading--heavy strong {
-    font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style));
-    font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized,
-.spectrum-Heading--serif.spectrum-Heading--heavy em {
-    font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--serif.spectrum-Heading--heavy em strong,
-.spectrum-Heading--serif.spectrum-Heading--heavy strong em {
-    font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--light {
-    font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style));
-    font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized,
-.spectrum-Heading--serif.spectrum-Heading--light em {
-    font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong,
-.spectrum-Heading--serif.spectrum-Heading--light strong {
-    font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style));
-    font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--serif.spectrum-Heading--light em strong,
-.spectrum-Heading--serif.spectrum-Heading--light strong em {
-    font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Body,
-.spectrum-Body--sizeM {
-    --spectrum-body-font-size: var(--spectrum-body-size-m);
-}
-
-.spectrum-Body--sizeXS {
-    --spectrum-body-font-size: var(--spectrum-body-size-xs);
-}
-
-.spectrum-Body--sizeS {
-    --spectrum-body-font-size: var(--spectrum-body-size-s);
-}
-
-.spectrum-Body--sizeL {
-    --spectrum-body-font-size: var(--spectrum-body-size-l);
-}
-
-.spectrum-Body--sizeXL {
-    --spectrum-body-font-size: var(--spectrum-body-size-xl);
-}
-
-.spectrum-Body--sizeXXL {
-    --spectrum-body-font-size: var(--spectrum-body-size-xxl);
-}
-
-.spectrum-Body--sizeXXXL {
-    --spectrum-body-font-size: var(--spectrum-body-size-xxxl);
-}
-
-.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)));
-    line-height: var(--mod-body-line-height, var(--spectrum-body-line-height));
-    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)));
-}
-
-.spectrum-Body .spectrum-Body-strong,
-.spectrum-Body strong {
-    font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style));
-    font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight));
-}
-
-.spectrum-Body .spectrum-Body-emphasized,
-.spectrum-Body em {
-    font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style));
-    font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight));
-}
-
-.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body em strong,
-.spectrum-Body strong em {
-    font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Body:lang(ja),
-.spectrum-Body:lang(ko),
-.spectrum-Body:lang(zh) {
-    font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family));
-    font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style));
-    font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight));
-    line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height));
-    letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing));
-}
-
-.spectrum-Body:lang(ja) .spectrum-Body-strong,
-.spectrum-Body:lang(ja) strong,
-.spectrum-Body:lang(ko) .spectrum-Body-strong,
-.spectrum-Body:lang(ko) strong,
-.spectrum-Body:lang(zh) .spectrum-Body-strong,
-.spectrum-Body:lang(zh) strong {
-    font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style));
-    font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight));
-}
-
-.spectrum-Body:lang(ja) .spectrum-Body-emphasized,
-.spectrum-Body:lang(ja) em,
-.spectrum-Body:lang(ko) .spectrum-Body-emphasized,
-.spectrum-Body:lang(ko) em,
-.spectrum-Body:lang(zh) .spectrum-Body-emphasized,
-.spectrum-Body:lang(zh) em {
-    font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style));
-    font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight));
-}
-
-.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body:lang(ja) em strong,
-.spectrum-Body:lang(ja) strong em,
-.spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body:lang(ko) em strong,
-.spectrum-Body:lang(ko) strong em,
-.spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body:lang(zh) em strong,
-.spectrum-Body:lang(zh) strong em {
-    font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight));
-}
-
-.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));
-    font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style));
-}
-
-.spectrum-Body--serif .spectrum-Body-strong,
-.spectrum-Body--serif strong {
-    font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style));
-    font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight));
-}
-
-.spectrum-Body--serif .spectrum-Body-emphasized,
-.spectrum-Body--serif em {
-    font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style));
-    font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight));
-}
-
-.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body--serif em strong,
-.spectrum-Body--serif strong em {
-    font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail,
-.spectrum-Detail--sizeM {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-m);
-}
-
-.spectrum-Detail--sizeS {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-s);
-}
-
-.spectrum-Detail--sizeL {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-l);
-}
-
-.spectrum-Detail--sizeXL {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-xl);
-}
-
-.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));
-    color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color)));
-    line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height));
-    letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing));
-    text-transform: uppercase;
-    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));
-}
-
-.spectrum-Detail .spectrum-Detail-strong,
-.spectrum-Detail strong {
-    font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style));
-    font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight));
-}
-
-.spectrum-Detail .spectrum-Detail-emphasized,
-.spectrum-Detail em {
-    font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight));
-}
-
-.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail em strong,
-.spectrum-Detail strong em {
-    font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail:lang(ja),
-.spectrum-Detail:lang(ko),
-.spectrum-Detail:lang(zh) {
-    font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family));
-    font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style));
-    font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight));
-    line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height));
-}
-
-.spectrum-Detail:lang(ja) .spectrum-Detail-strong,
-.spectrum-Detail:lang(ja) strong,
-.spectrum-Detail:lang(ko) .spectrum-Detail-strong,
-.spectrum-Detail:lang(ko) strong,
-.spectrum-Detail:lang(zh) .spectrum-Detail-strong,
-.spectrum-Detail:lang(zh) strong {
-    font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style));
-    font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight));
-}
-
-.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ja) em,
-.spectrum-Detail:lang(ko) .spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ko) em,
-.spectrum-Detail:lang(zh) .spectrum-Detail-emphasized,
-.spectrum-Detail:lang(zh) em {
-    font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight));
-}
-
-.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ja) em strong,
-.spectrum-Detail:lang(ja) strong em,
-.spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ko) em strong,
-.spectrum-Detail:lang(ko) strong em,
-.spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail:lang(zh) em strong,
-.spectrum-Detail:lang(zh) strong em {
-    font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight));
-}
-
-.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));
-    font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight));
-}
-
-.spectrum-Detail--serif .spectrum-Detail-strong,
-.spectrum-Detail--serif strong {
-    font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style));
-    font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight));
-}
-
-.spectrum-Detail--serif .spectrum-Detail-emphasized,
-.spectrum-Detail--serif em {
-    font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight));
-}
-
-.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail--serif em strong,
-.spectrum-Detail--serif strong em {
-    font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight));
-}
-
-.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));
-}
-
-.spectrum-Detail--light .spectrum-Detail-strong,
-.spectrum-Detail--light strong {
-    font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight));
-}
-
-.spectrum-Detail--light .spectrum-Detail-emphasized,
-.spectrum-Detail--light em {
-    font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight));
-}
-
-.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized,
-.spectrum-Detail--light em strong,
-.spectrum-Detail--light strong em {
-    font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja),
-.spectrum-Detail--light:lang(ko),
-.spectrum-Detail--light:lang(zh) {
-    font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style));
-    font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong,
-.spectrum-Detail--light:lang(ja) strong,
-.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong,
-.spectrum-Detail--light:lang(ko) strong,
-.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong,
-.spectrum-Detail--light:lang(zh) strong {
-    font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style));
-    font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(ja) em,
-.spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(ko) em,
-.spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(zh) em {
-    font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized {
-    font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight));
-}
-
-.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));
-}
-
-.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong,
-.spectrum-Detail--serif.spectrum-Detail--light strong {
-    font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style));
-    font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight));
-}
-
-.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized,
-.spectrum-Detail--serif.spectrum-Detail--light em {
-    font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight));
-}
-
-.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized,
-.spectrum-Detail--serif.spectrum-Detail--light em strong,
-.spectrum-Detail--serif.spectrum-Detail--light strong em {
-    font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Code,
-.spectrum-Code--sizeM {
-    --spectrum-code-font-size: var(--spectrum-code-size-m);
-}
-
-.spectrum-Code--sizeXS {
-    --spectrum-code-font-size: var(--spectrum-code-size-xs);
-}
-
-.spectrum-Code--sizeS {
-    --spectrum-code-font-size: var(--spectrum-code-size-s);
-}
-
-.spectrum-Code--sizeL {
-    --spectrum-code-font-size: var(--spectrum-code-size-l);
-}
-
-.spectrum-Code--sizeXL {
-    --spectrum-code-font-size: var(--spectrum-code-size-xl);
-}
-
-.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));
-    line-height: var(--mod-code-line-height, var(--spectrum-code-line-height));
-    color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color)));
-    margin-block-start: var(--mod-code-margin-start, 0);
-    margin-block-end: var(--mod-code-margin-end, 0);
-}
-
-.spectrum-Code .spectrum-Code-strong,
-.spectrum-Code strong {
-    font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style));
-    font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight));
-}
-
-.spectrum-Code .spectrum-Code-emphasized,
-.spectrum-Code em {
-    font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style));
-    font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight));
-}
-
-.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code em strong,
-.spectrum-Code strong em {
-    font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style));
-    font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight));
-}
-
-.spectrum-Code:lang(ja),
-.spectrum-Code:lang(ko),
-.spectrum-Code:lang(zh) {
-    font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family));
-    font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style));
-    font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight));
-    line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height));
-    letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing));
-}
-
-.spectrum-Code:lang(ja) .spectrum-Code-strong,
-.spectrum-Code:lang(ja) strong,
-.spectrum-Code:lang(ko) .spectrum-Code-strong,
-.spectrum-Code:lang(ko) strong,
-.spectrum-Code:lang(zh) .spectrum-Code-strong,
-.spectrum-Code:lang(zh) strong {
-    font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style));
-    font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight));
-}
-
-.spectrum-Code:lang(ja) .spectrum-Code-emphasized,
-.spectrum-Code:lang(ja) em,
-.spectrum-Code:lang(ko) .spectrum-Code-emphasized,
-.spectrum-Code:lang(ko) em,
-.spectrum-Code:lang(zh) .spectrum-Code-emphasized,
-.spectrum-Code:lang(zh) em {
-    font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style));
-    font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight));
-}
-
-.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code:lang(ja) em strong,
-.spectrum-Code:lang(ja) strong em,
-.spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code:lang(ko) em strong,
-.spectrum-Code:lang(ko) strong em,
-.spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code:lang(zh) em strong,
-.spectrum-Code:lang(zh) strong em {
-    font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight));
-}
diff --git a/tools/styles/heading.ts b/tools/styles/heading.ts
index 9e46411c300..a1cf421eed1 100644
--- a/tools/styles/heading.ts
+++ b/tools/styles/heading.ts
@@ -11,7 +11,6 @@
  */
 
 import baseStyles from './src/spectrum-base.css.js';
-import langStyles from './src/spectrum-lang.css.js';
 import headingStyles from './src/spectrum-heading.css.js';
 
-export default [baseStyles, langStyles, headingStyles];
+export default [baseStyles, headingStyles];
diff --git a/tools/styles/package.json b/tools/styles/package.json
index edc9ac2f308..83d5bd850ca 100755
--- a/tools/styles/package.json
+++ b/tools/styles/package.json
@@ -23,27 +23,11 @@
         ".": "./src/spectrum-base.css.js",
         "./package.json": "./package.json",
         "./all-large-dark.css": "./all-large-dark.css",
-        "./all-large-darkest.css": "./all-large-darkest.css",
         "./all-large-light.css": "./all-large-light.css",
-        "./all-large-lightest.css": "./all-large-lightest.css",
         "./all-medium-dark.css": "./all-medium-dark.css",
-        "./all-medium-darkest.css": "./all-medium-darkest.css",
         "./all-medium-light.css": "./all-medium-light.css",
-        "./all-medium-lightest.css": "./all-medium-lightest.css",
         "./core-global.css": "./core-global.css",
-        "./express/core-global.css": "./express/core-global.css",
         "./scale-large.css": "./scale-large.css",
-        "./express/scale-large.css": "./express/scale-large.css",
-        "./scale-medium.css": "./scale-medium.css",
-        "./express/scale-medium.css": "./express/scale-medium.css",
-        "./theme-dark.css": "./theme-dark.css",
-        "./express/theme-dark.css": "./express/theme-dark.css",
-        "./theme-darkest.css": "./theme-darkest.css",
-        "./express/theme-darkest.css": "./express/theme-darkest.css",
-        "./theme-light.css": "./theme-light.css",
-        "./express/theme-light.css": "./express/theme-light.css",
-        "./theme-lightest.css": "./theme-lightest.css",
-        "./express/theme-lightest.css": "./express/theme-lightest.css",
         "./typography.css": "./typography.css",
         "./body.js": {
             "development": "./body.dev.js",
@@ -65,36 +49,13 @@
             "development": "./typography.dev.js",
             "default": "./typography.js"
         },
-        "./src/body-overrides.css.js": "./src/body-overrides.css.js",
-        "./src/code-overrides.css.js": "./src/code-overrides.css.js",
-        "./src/detail-overrides.css.js": "./src/detail-overrides.css.js",
-        "./src/heading-overrides.css.js": "./src/heading-overrides.css.js",
-        "./src/lang-overrides.css.js": "./src/lang-overrides.css.js",
         "./src/spectrum-base.css": "./src/spectrum-base.css",
         "./src/spectrum-body.css": "./src/spectrum-body.css",
-        "./src/body-overrides.css": "./src/body-overrides.css",
         "./src/spectrum-code.css": "./src/spectrum-code.css",
-        "./src/code-overrides.css": "./src/code-overrides.css",
         "./src/spectrum-detail.css": "./src/spectrum-code.css",
-        "./src/detail-overrides.css": "./src/detail-overrides.css",
         "./src/spectrum-heading.css": "./src/spectrum-heading.css",
-        "./src/heading-overrides.css": "./src/heading-overrides.css",
         "./src/spectrum-lang.css": "./src/spectrum-lang.css",
-        "./src/lang-overrides.css": "./src/lang-overrides.css",
-        "./src/spectrum-typography.css": "./src/spectrum-typography.css",
-        "./tokens/*": "./tokens/*",
-        "./tokens-v2/*": "./tokens-v2/*",
-        "./tokens/express/custom-large-vars.css": "./tokens/express/large-vars.css",
-        "./tokens/express/custom-medium-vars.css": "./tokens/express/medium-vars.css",
-        "./tokens/express/custom-vars.css": "./tokens/express/global-vars.css",
-        "./tokens/spectrum/custom-large-vars.css": "./tokens/spectrum/large-vars.css",
-        "./tokens/spectrum/custom-medium-vars.css": "./tokens/spectrum/medium-vars.css",
-        "./tokens/spectrum/custom-vars.css": "./tokens/spectrum/global-vars.css",
-        "./tokens-v2/spectrum/custom-large-vars.css": "./tokens-v2/large-vars.css",
-        "./tokens-v2/spectrum/custom-medium-vars.css": "./tokens-v2/medium-vars.css",
-        "./tokens-v2/spectrum/custom-vars.css": "./tokens-v2/global-vars.css",
-        "./tokens-v2/spectrum/custom-dark-vars.css": "./tokens-v2/dark-vars.css",
-        "./tokens-v2/spectrum/custom-light-vars.css": "./tokens-v2/light-vars.css"
+        "./src/spectrum-typography.css": "./src/spectrum-typography.css"
     },
     "scripts": {
         "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
@@ -128,5 +89,5 @@
     "sideEffects": [
         "./**/*.css"
     ],
-    "style": "all-medium-lightest.css"
+    "style": "all-medium-light.css"
 }
diff --git a/tools/styles/scale-large.css b/tools/styles/scale-large.css
index cd76be719ab..f40ef368db6 100644
--- a/tools/styles/scale-large.css
+++ b/tools/styles/scale-large.css
@@ -10,10 +10,897 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./spectrum-scale-large.css";
-
 :host,
 :root {
     --spectrum-global-alias-appframe-border-size: 1px;
     --swc-scale-factor: 1.25;
+
+    --spectrum-accordion-bottom-to-text-compact-extra-large: 10px;
+    --spectrum-accordion-bottom-to-text-compact-large: 9px;
+    --spectrum-accordion-bottom-to-text-compact-medium: 8px;
+    --spectrum-accordion-bottom-to-text-compact-small: 4px;
+    --spectrum-accordion-bottom-to-text-extra-large: 15px;
+    --spectrum-accordion-bottom-to-text-large: 14px;
+    --spectrum-accordion-bottom-to-text-medium: 13px;
+    --spectrum-accordion-bottom-to-text-small: 9px;
+    --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px;
+    --spectrum-accordion-bottom-to-text-spacious-large: 19px;
+    --spectrum-accordion-bottom-to-text-spacious-medium: 18px;
+    --spectrum-accordion-bottom-to-text-spacious-small: 15px;
+    --spectrum-accordion-content-area-bottom-to-content: 20px;
+    --spectrum-accordion-content-area-edge-to-content-extra-large: 19px;
+    --spectrum-accordion-content-area-edge-to-content-large: 15px;
+    --spectrum-accordion-content-area-edge-to-content-medium: 11px;
+    --spectrum-accordion-content-area-edge-to-content-small: 10px;
+    --spectrum-accordion-content-area-top-to-content: 10px;
+    --spectrum-accordion-disclosure-indicator-to-text-extra-large: 22px;
+    --spectrum-accordion-disclosure-indicator-to-text-large: 17px;
+    --spectrum-accordion-disclosure-indicator-to-text-medium: 13px;
+    --spectrum-accordion-disclosure-indicator-to-text-small: 9px;
+    --spectrum-accordion-minimum-width: 250px;
+
+    /** @deprecated Introduced as an error. Use --spectrum-accordion-top-to-text-spacious-small instead */
+    --spectrum-accordion-small-top-to-text-spacious: 12px;
+    --spectrum-accordion-top-to-text-compact-extra-large: 11px;
+    --spectrum-accordion-top-to-text-compact-large: 14px;
+    --spectrum-accordion-top-to-text-compact-medium: 14px;
+    --spectrum-accordion-top-to-text-compact-small: 4px;
+    --spectrum-accordion-top-to-text-extra-large: 17px;
+    --spectrum-accordion-top-to-text-large: 16px;
+    --spectrum-accordion-top-to-text-medium: 16px;
+    --spectrum-accordion-top-to-text-small: 10px;
+    --spectrum-accordion-top-to-text-spacious-extra-large: 21px;
+    --spectrum-accordion-top-to-text-spacious-large: 19px;
+    --spectrum-accordion-top-to-text-spacious-medium: 19px;
+    --spectrum-accordion-top-to-text-spacious-small: 15px;
+    --spectrum-action-button-edge-to-hold-icon-extra-large: 7px;
+    --spectrum-action-button-edge-to-hold-icon-large: 6px;
+    --spectrum-action-button-edge-to-hold-icon-medium: 5px;
+    --spectrum-add-icon-size-50: 10px;
+    --spectrum-add-icon-size-75: 10px;
+    --spectrum-add-icon-size-100: 14px;
+    --spectrum-add-icon-size-200: 14px;
+    --spectrum-add-icon-size-300: 16px;
+    --spectrum-alert-banner-bottom-to-text: 22px;
+    --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
+    --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
+    --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
+    --spectrum-alert-banner-minimum-height: 64px;
+    --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
+    --spectrum-alert-banner-top-to-alert-icon: 29px;
+    --spectrum-alert-banner-top-to-text: 21px;
+    --spectrum-alert-banner-top-to-workflow-icon: 20px;
+    --spectrum-alert-banner-width: 680px;
+    --spectrum-alert-dialog-description-font-size: var(--spectrum-body-size-s);
+    --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
+    --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
+    --spectrum-alert-dialog-title-font-size: var(--spectrum-title-size-xl);
+    --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-assetcard-content-font-size: var(--spectrum-body-size-xs);
+    --spectrum-assetcard-focus-ring-border-radius: 9px;
+    --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
+    --spectrum-assetcard-selectionindicator-margin: 15px;
+    --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
+    --spectrum-asterisk-icon-size-100: 10px;
+    --spectrum-asterisk-icon-size-200: 12px;
+    --spectrum-asterisk-icon-size-300: 12px;
+    --spectrum-avatar-size-50: 20px;
+    --spectrum-avatar-size-75: 24px;
+    --spectrum-avatar-size-100: 28px;
+    --spectrum-avatar-size-200: 32px;
+    --spectrum-avatar-size-300: 36px;
+    --spectrum-avatar-size-400: 40px;
+    --spectrum-avatar-size-500: 44px;
+    --spectrum-avatar-size-600: 48px;
+    --spectrum-avatar-size-700: 52px;
+    --spectrum-avatar-size-800: 56px;
+    --spectrum-avatar-size-900: 64px;
+    --spectrum-avatar-size-1000: 72px;
+    --spectrum-avatar-size-1100: 80px;
+    --spectrum-avatar-size-1200: 88px;
+    --spectrum-avatar-size-1300: 96px;
+    --spectrum-avatar-size-1400: 104px;
+    --spectrum-avatar-size-1500: 112px;
+    --spectrum-avatar-to-avatar-50: -5px;
+    --spectrum-avatar-to-avatar-75: -6px;
+    --spectrum-avatar-to-avatar-100: -7px;
+    --spectrum-avatar-to-avatar-200: -8px;
+    --spectrum-avatar-to-avatar-300: -9px;
+    --spectrum-avatar-to-avatar-400: -10px;
+    --spectrum-avatar-to-avatar-500: -11px;
+    --spectrum-breadcrumbs-bottom-to-text-multiline: 11px;
+    --spectrum-breadcrumbs-height-multiline: 90px;
+    --spectrum-breadcrumbs-separator-to-bottom-text-multiline: 15px;
+    --spectrum-breadcrumbs-start-edge-to-text-large: 11px;
+    --spectrum-breadcrumbs-start-edge-to-text-medium: 8px;
+    --spectrum-breadcrumbs-start-edge-to-text-multiline: 5px;
+    --spectrum-breadcrumbs-text-to-separator-large: 11px;
+    --spectrum-breadcrumbs-text-to-separator-medium: 8px;
+    --spectrum-breadcrumbs-text-to-separator-multiline: 5px;
+    --spectrum-breadcrumbs-top-text-to-bottom-text: 11px;
+
+    /** @deprecated */
+    --spectrum-breadcrumbs-top-to-separator-icon-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline);
+    --spectrum-breadcrumbs-top-to-separator-large: 20px;
+    --spectrum-breadcrumbs-top-to-separator-medium: 15px;
+    --spectrum-breadcrumbs-top-to-separator-multiline: 10px;
+    --spectrum-breadcrumbs-top-to-text-multiline: 5px;
+    --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 5px;
+    --spectrum-button-bottom-to-text-extra-large: 17px;
+    --spectrum-button-bottom-to-text-large: 13px;
+    --spectrum-button-bottom-to-text-medium: 10px;
+    --spectrum-button-bottom-to-text-small: 5px;
+    --spectrum-button-top-to-text-extra-large: 16px;
+    --spectrum-button-top-to-text-large: 12px;
+    --spectrum-button-top-to-text-medium: 9px;
+    --spectrum-button-top-to-text-small: 6px;
+
+    /** @deprecated */
+    --spectrum-character-count-to-field-quiet-extra-large: -5px;
+
+    /** @deprecated */
+    --spectrum-character-count-to-field-quiet-large: -4px;
+
+    /** @deprecated */
+    --spectrum-character-count-to-field-quiet-medium: -4px;
+
+    /** @deprecated */
+    --spectrum-character-count-to-field-quiet-small: -4px;
+    --spectrum-checkbox-control-size-extra-large: 26px;
+    --spectrum-checkbox-control-size-large: 22px;
+    --spectrum-checkbox-control-size-medium: 20px;
+    --spectrum-checkbox-control-size-small: 18px;
+    --spectrum-checkbox-top-to-control-extra-large: 17px;
+    --spectrum-checkbox-top-to-control-large: 14px;
+    --spectrum-checkbox-top-to-control-medium: 10px;
+    --spectrum-checkbox-top-to-control-small: 6px;
+    --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-coach-indicator-gap: 8px;
+    --spectrum-coach-indicator-quiet-ring-diameter: 10px;
+    --spectrum-coach-indicator-ring-diameter: 20px;
+    --spectrum-coach-mark-body-font-size: var(--spectrum-body-size-s);
+    --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300);
+    --spectrum-coach-mark-maximum-width: 248px;
+    --spectrum-coach-mark-media-height: 162px;
+    --spectrum-coach-mark-media-minimum-height: 121px;
+    --spectrum-coach-mark-minimum-width: 216px;
+    --spectrum-coach-mark-pagination-body-font-size: var(--spectrum-body-size-xs);
+    --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px;
+    --spectrum-coach-mark-title-font-size: var(--spectrum-title-size-s);
+    --spectrum-coach-mark-width: 216px;
+    --spectrum-coachmark-action-menu-vertical-offset: -6px;
+    --spectrum-coachmark-buttongroup-display: none;
+    --spectrum-coachmark-buttongroup-mobile-display: flex;
+    --spectrum-coachmark-menu-display: none;
+    --spectrum-coachmark-menu-mobile-display: inline-flex;
+    --spectrum-color-area-height: 240px;
+    --spectrum-color-area-minimum-height: 80px;
+    --spectrum-color-area-minimum-width: 80px;
+    --spectrum-color-area-width: 240px;
+    --spectrum-color-control-track-width: 30px;
+    --spectrum-color-handle-size: 20px;
+    --spectrum-color-handle-size-key-focus: 40px;
+    --spectrum-color-slider-length: 240px;
+    --spectrum-color-slider-minimum-length: 100px;
+    --spectrum-color-wheel-minimum-width: 219px;
+    --spectrum-color-wheel-width: 240px;
+    --spectrum-colorloupe-checkerboard-fill: url("#checkerboard-secondary");
+    --spectrum-colorwheel-colorarea-container-size: 182px;
+    --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-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-edge-to-text-50: 10px;
+    --spectrum-component-edge-to-text-75: 11px;
+    --spectrum-component-edge-to-text-100: 15px;
+    --spectrum-component-edge-to-text-200: 19px;
+    --spectrum-component-edge-to-text-300: 22px;
+    --spectrum-component-edge-to-visual-50: 7px;
+    --spectrum-component-edge-to-visual-75: 9px;
+    --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: 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-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-text-75: 15px;
+    --spectrum-component-pill-edge-to-text-100: 20px;
+    --spectrum-component-pill-edge-to-text-200: 25px;
+    --spectrum-component-pill-edge-to-text-300: 30px;
+    --spectrum-component-pill-edge-to-visual-75: 13px;
+    --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: 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-to-menu-extra-large: 10px;
+    --spectrum-component-to-menu-large: 9px;
+    --spectrum-component-to-menu-medium: 8px;
+    --spectrum-component-to-menu-small: 7px;
+    --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-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-contextual-help-body-font-size: var(--spectrum-body-size-xs);
+    --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
+    --spectrum-contextual-help-title-font-size: var(--spectrum-title-size-s);
+    --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-datepicker-dash-line-height: 30px;
+    --spectrum-datepicker-datetime-width-first: 45px;
+    --spectrum-datepicker-generic-padding: 15px;
+    --spectrum-datepicker-initial-width: 160px;
+    --spectrum-datepicker-input-datetime-width: 30px;
+    --spectrum-datepicker-invalid-icon-to-button: 10px;
+    --spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
+    --spectrum-datepicker-width-quiet-first: 90px;
+    --spectrum-datepicker-width-quiet-second: 20px;
+    --spectrum-dial-border-radius: 20px;
+    --spectrum-dial-controls-margin: 10px;
+    --spectrum-dial-handle-block-margin: 20px;
+    --spectrum-dial-handle-inline-margin: 16px;
+    --spectrum-dial-handle-position: 10px;
+    --spectrum-dial-label-container-top-to-text: 5px;
+    --spectrum-dial-label-gap-y: 6px;
+    --spectrum-dialog-confirm-border-radius: 5px;
+    --spectrum-dialog-confirm-description-text-size: 15px;
+    --spectrum-dialog-confirm-entry-animation-distance: 25px;
+    --spectrum-dialog-confirm-hero-height: 160px;
+    --spectrum-dialog-confirm-padding-grid: 24px;
+    --spectrum-dialog-confirm-title-text-size: 19px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px;
+    --spectrum-drag-handle-icon-size-75: 12px;
+    --spectrum-drag-handle-icon-size-100: 12px;
+    --spectrum-drag-handle-icon-size-200: 14px;
+    --spectrum-drag-handle-icon-size-300: 16px;
+    --spectrum-field-default-width-extra-large: 288px;
+    --spectrum-field-default-width-large: 272px;
+    --spectrum-field-default-width-medium: 256px;
+    --spectrum-field-default-width-small: 240px;
+    --spectrum-field-edge-to-alert-icon-extra-large: 22px;
+    --spectrum-field-edge-to-alert-icon-large: 19px;
+    --spectrum-field-edge-to-alert-icon-medium: 15px;
+    --spectrum-field-edge-to-alert-icon-small: 11px;
+    --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-edge-to-validation-icon-extra-large: 22px;
+    --spectrum-field-edge-to-validation-icon-large: 19px;
+    --spectrum-field-edge-to-validation-icon-medium: 15px;
+    --spectrum-field-edge-to-validation-icon-small: 11px;
+    --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-label-text-to-asterisk-extra-large: 6px;
+    --spectrum-field-label-text-to-asterisk-large: 6px;
+    --spectrum-field-label-text-to-asterisk-medium: 5px;
+    --spectrum-field-label-text-to-asterisk-small: 5px;
+
+    /** @deprecated */
+    --spectrum-field-label-to-component-quiet-extra-large: -19px;
+
+    /** @deprecated */
+    --spectrum-field-label-to-component-quiet-large: -15px;
+
+    /** @deprecated */
+    --spectrum-field-label-to-component-quiet-medium: -10px;
+
+    /** @deprecated */
+    --spectrum-field-label-to-component-quiet-small: -10px;
+    --spectrum-field-label-top-to-asterisk-extra-large: 24px;
+    --spectrum-field-label-top-to-asterisk-large: 19px;
+    --spectrum-field-label-top-to-asterisk-medium: 15px;
+    --spectrum-field-label-top-to-asterisk-small: 11px;
+    --spectrum-field-text-to-alert-icon-extra-large: 22px;
+    --spectrum-field-text-to-alert-icon-large: 19px;
+    --spectrum-field-text-to-alert-icon-medium: 15px;
+    --spectrum-field-text-to-alert-icon-small: 10px;
+    --spectrum-field-text-to-validation-icon-extra-large: 22px;
+    --spectrum-field-text-to-validation-icon-large: 19px;
+    --spectrum-field-text-to-validation-icon-medium: 15px;
+    --spectrum-field-text-to-validation-icon-small: 10px;
+    --spectrum-field-top-to-alert-icon-extra-large: 16px;
+    --spectrum-field-top-to-alert-icon-large: 13px;
+    --spectrum-field-top-to-alert-icon-medium: 9px;
+    --spectrum-field-top-to-alert-icon-small: 5px;
+    --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-disclosure-icon-compact-extra-large: 21px;
+    --spectrum-field-top-to-disclosure-icon-compact-large: 17px;
+    --spectrum-field-top-to-disclosure-icon-compact-medium: 13px;
+    --spectrum-field-top-to-disclosure-icon-compact-small: 9px;
+    --spectrum-field-top-to-disclosure-icon-extra-large: 26px;
+    --spectrum-field-top-to-disclosure-icon-large: 22px;
+    --spectrum-field-top-to-disclosure-icon-medium: 18px;
+    --spectrum-field-top-to-disclosure-icon-small: 13px;
+    --spectrum-field-top-to-disclosure-icon-spacious-extra-large: 31px;
+    --spectrum-field-top-to-disclosure-icon-spacious-large: 27px;
+    --spectrum-field-top-to-disclosure-icon-spacious-medium: 23px;
+    --spectrum-field-top-to-disclosure-icon-spacious-small: 18px;
+    --spectrum-field-top-to-progress-circle-extra-large: 15px;
+    --spectrum-field-top-to-progress-circle-large: 11px;
+    --spectrum-field-top-to-progress-circle-medium: 8px;
+    --spectrum-field-top-to-progress-circle-small: 6px;
+    --spectrum-field-top-to-validation-icon-extra-large: 22px;
+    --spectrum-field-top-to-validation-icon-large: 17px;
+    --spectrum-field-top-to-validation-icon-medium: 13px;
+    --spectrum-field-top-to-validation-icon-small: 9px;
+    --spectrum-field-width: var(--spectrum-field-width-small);
+    --spectrum-font-size-25: 12px;
+    --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;
+    --spectrum-font-size-1400: 79px;
+    --spectrum-font-size-1500: 88px;
+
+    /** @deprecated Replaced with --spectrum-component-top-to-workflow-icon-300 */
+    --spectrum-help-text-top-to-workflow-icon-extra-large: var(--spectrum-component-top-to-workflow-icon-300);
+
+    /** @deprecated Replaced with --spectrum-component-top-to-workflow-icon-200 */
+    --spectrum-help-text-top-to-workflow-icon-large: var(--spectrum-component-top-to-workflow-icon-200);
+
+    /** @deprecated Replaced with --spectrum-component-top-to-workflow-icon-100 */
+    --spectrum-help-text-top-to-workflow-icon-medium: var(--spectrum-component-top-to-workflow-icon-100);
+
+    /** @deprecated Replaced with --spectrum-component-top-to-workflow-icon-75 */
+    --spectrum-help-text-top-to-workflow-icon-small: var(--spectrum-component-top-to-workflow-icon-75);
+    --spectrum-illustrated-message-large-body-font-size: var(--spectrum-body-size-xs);
+    --spectrum-illustrated-message-large-cjk-title-font-size: var(--spectrum-title-cjk-size-xl);
+    --spectrum-illustrated-message-large-title-font-size: var(--spectrum-title-size-xl);
+    --spectrum-illustrated-message-medium-body-font-size: var(--spectrum-body-size-xs);
+    --spectrum-illustrated-message-medium-cjk-title-font-size: var(--spectrum-title-cjk-size-l);
+    --spectrum-illustrated-message-medium-title-font-size: var(--spectrum-title-size-l);
+    --spectrum-illustrated-message-small-cjk-title-font-size: var(--spectrum-title-cjk-size-s);
+    --spectrum-illustrated-message-small-title-font-size: var(--spectrum-title-size-s);
+    --spectrum-in-field-button-edge-to-fill-extra-large: 10px;
+    --spectrum-in-field-button-edge-to-fill-small: 5px;
+    --spectrum-in-field-progress-circle-edge-to-fill: 2px;
+    --spectrum-in-field-progress-circle-size-75: 18px;
+    --spectrum-in-field-progress-circle-size-100: 24px;
+    --spectrum-in-field-progress-circle-size-200: 28px;
+    --spectrum-in-field-progress-circle-size-300: 30px;
+    --spectrum-in-field-stepper-to-end-extra-large: 5px;
+    --spectrum-in-field-stepper-to-end-small: 3px;
+    --spectrum-line-height-font-size-25: 14px;
+    --spectrum-line-height-font-size-50: 16px;
+    --spectrum-line-height-font-size-75: 20px;
+    --spectrum-line-height-font-size-100: 22px;
+    --spectrum-line-height-font-size-200: 24px;
+    --spectrum-line-height-font-size-300: 26px;
+    --spectrum-line-height-font-size-400: 28px;
+    --spectrum-line-height-font-size-500: 32px;
+    --spectrum-line-height-font-size-600: 36px;
+    --spectrum-line-height-font-size-700: 40px;
+    --spectrum-line-height-font-size-800: 44px;
+    --spectrum-line-height-font-size-900: 50px;
+    --spectrum-line-height-font-size-1000: 56px;
+    --spectrum-line-height-font-size-1100: 64px;
+    --spectrum-line-height-font-size-1200: 72px;
+    --spectrum-line-height-font-size-1300: 80px;
+    --spectrum-line-height-font-size-1400: 90px;
+    --spectrum-line-height-font-size-1500: 102px;
+    --spectrum-link-out-icon-size-75: 12px;
+    --spectrum-link-out-icon-size-100: 14px;
+    --spectrum-link-out-icon-size-200: 16px;
+    --spectrum-link-out-icon-size-300: 16px;
+    --spectrum-link-out-icon-size-400: 18px;
+    --spectrum-list-view-end-edge-to-content: 8px;
+    --spectrum-list-view-minimum-height: 50px;
+    --spectrum-list-view-minimum-width: 240px;
+    --spectrum-menu-item-checkmark-height-extra-large: 16px;
+    --spectrum-menu-item-checkmark-height-large: 16px;
+    --spectrum-menu-item-checkmark-height-medium: 14px;
+    --spectrum-menu-item-checkmark-height-small: 12px;
+    --spectrum-menu-item-checkmark-width-extra-large: 16px;
+    --spectrum-menu-item-checkmark-width-large: 16px;
+    --spectrum-menu-item-checkmark-width-medium: 14px;
+    --spectrum-menu-item-checkmark-width-small: 12px;
+    --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px;
+    --spectrum-menu-item-edge-to-content-not-selected-large: 47px;
+    --spectrum-menu-item-edge-to-content-not-selected-medium: 42px;
+    --spectrum-menu-item-edge-to-content-not-selected-small: 24px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
+    --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px;
+    --spectrum-menu-item-top-to-disclosure-icon-large: 17px;
+    --spectrum-menu-item-top-to-disclosure-icon-medium: 13px;
+    --spectrum-menu-item-top-to-disclosure-icon-small: 9px;
+    --spectrum-menu-item-top-to-selected-icon-extra-large: 22px;
+    --spectrum-menu-item-top-to-selected-icon-large: 17px;
+    --spectrum-menu-item-top-to-selected-icon-medium: 13px;
+    --spectrum-menu-item-top-to-selected-icon-small: 9px;
+    --spectrum-menu-item-top-to-thumbnail-extra-large: 13px;
+    --spectrum-menu-item-top-to-thumbnail-large: 12px;
+    --spectrum-menu-item-top-to-thumbnail-medium: 11px;
+    --spectrum-menu-item-top-to-thumbnail-small: 10px;
+    --spectrum-meter-thickness-extra-large: 13px;
+    --spectrum-meter-thickness-large: 10px;
+    --spectrum-meter-thickness-medium: 8px;
+    --spectrum-meter-thickness-small: 5px;
+    --spectrum-meter-width: 240px;
+    --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px;
+    --spectrum-navigational-indicator-top-to-back-icon-large: 16px;
+    --spectrum-navigational-indicator-top-to-back-icon-medium: 12px;
+    --spectrum-navigational-indicator-top-to-back-icon-small: 7px;
+    --spectrum-number-field-visual-to-in-field-stepper-extra-large: 10px;
+    --spectrum-number-field-visual-to-in-field-stepper-large: 9px;
+    --spectrum-number-field-visual-to-in-field-stepper-medium: 8px;
+    --spectrum-number-field-visual-to-in-field-stepper-small: 7px;
+    --spectrum-number-field-with-stepper-minimum-width-extra-large: 198px;
+    --spectrum-number-field-with-stepper-minimum-width-large: 174px;
+    --spectrum-number-field-with-stepper-minimum-width-medium: 150px;
+    --spectrum-number-field-with-stepper-minimum-width-small: 126px;
+    --spectrum-opacity-checkerboard-square-size: var(--spectrum-opacity-checkerboard-square-size-medium);
+    --spectrum-opacity-checkerboard-square-size-medium: nan%; --spectrum-opacity-checkerboard-square-size-small: nan%; --spectrum-pagination-item-inline-spacing: 6px;
+    --spectrum-pagination-textfield-width: 60px;
+    --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px;
+    --spectrum-picker-visual-to-disclosure-icon-large: 11px;
+    --spectrum-picker-visual-to-disclosure-icon-medium: 10px;
+    --spectrum-picker-visual-to-disclosure-icon-small: 9px;
+    --spectrum-progress-bar-thickness-extra-large: 13px;
+    --spectrum-progress-bar-thickness-large: 10px;
+    --spectrum-progress-bar-thickness-medium: 8px;
+    --spectrum-progress-bar-thickness-small: 5px;
+    --spectrum-progress-circle-size-large: 80px;
+    --spectrum-progress-circle-size-medium: 40px;
+    --spectrum-progress-circle-size-small: 20px;
+    --spectrum-progress-circle-thickness-large: 5px;
+    --spectrum-progress-circle-thickness-medium: 4px;
+    --spectrum-progress-circle-thickness-small: 3px;
+    --spectrum-radio-button-control-size-extra-large: 22px;
+    --spectrum-radio-button-control-size-large: 20px;
+    --spectrum-radio-button-control-size-medium: 18px;
+    --spectrum-radio-button-control-size-small: 16px;
+    --spectrum-radio-button-top-to-control-extra-large: 19px;
+    --spectrum-radio-button-top-to-control-large: 15px;
+    --spectrum-radio-button-top-to-control-medium: 11px;
+    --spectrum-radio-button-top-to-control-small: 7px;
+    --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+
+    /** @deprecated */
+    --spectrum-rating-indicator-to-icon: 5px;
+
+    /** @deprecated */
+    --spectrum-rating-indicator-width: 22px;
+    --spectrum-select-box-edge-to-checkbox: 15px;
+    --spectrum-select-box-horizontal-end-to-content: 40px;
+    --spectrum-select-box-horizontal-illustration-to-label: 12px;
+    --spectrum-select-box-horizontal-label-to-description: 3px;
+    --spectrum-select-box-horizontal-minimum-height: 100px;
+    --spectrum-select-box-horizontal-start-to-content: 30px;
+    --spectrum-select-box-horizontal-top-to-content: 20px;
+    --spectrum-select-box-horizontal-width: 460px;
+    --spectrum-select-box-top-to-checkbox: 5px;
+    --spectrum-select-box-vertical-edge-to-content: 30px;
+    --spectrum-select-box-vertical-height: 212px;
+    --spectrum-select-box-vertical-illustration-to-label: 10px;
+    --spectrum-side-label-character-count-to-field: 15px;
+    --spectrum-side-navigation-bottom-to-text: 10px;
+    --spectrum-side-navigation-header-to-item: 10px;
+    --spectrum-side-navigation-item-to-header: 30px;
+    --spectrum-side-navigation-item-to-item: 5px;
+    --spectrum-side-navigation-maximum-width: 300px;
+    --spectrum-side-navigation-minimum-width: 200px;
+    --spectrum-side-navigation-second-level-edge-to-text: 30px;
+    --spectrum-side-navigation-third-level-edge-to-text: 45px;
+    --spectrum-side-navigation-width: 240px;
+    --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px;
+    --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px;
+
+    /** @deprecated */
+    --spectrum-slider-bottom-to-handle-extra-large: 17px;
+
+    /** @deprecated */
+    --spectrum-slider-bottom-to-handle-large: 14px;
+
+    /** @deprecated */
+    --spectrum-slider-bottom-to-handle-medium: 10px;
+
+    /** @deprecated */
+    --spectrum-slider-bottom-to-handle-small: 6px;
+
+    /** @deprecated */
+    --spectrum-slider-control-height-extra-large: 26px;
+
+    /** @deprecated */
+    --spectrum-slider-control-height-large: 22px;
+
+    /** @deprecated */
+    --spectrum-slider-control-height-medium: 20px;
+
+    /** @deprecated */
+    --spectrum-slider-control-height-small: 18px;
+    --spectrum-slider-control-to-field-label-editable-extra-large: -24px;
+    --spectrum-slider-control-to-field-label-editable-large: -20px;
+    --spectrum-slider-control-to-field-label-editable-medium: -16px;
+    --spectrum-slider-control-to-field-label-editable-small: -8px;
+    --spectrum-slider-control-to-field-label-extra-large: -28px;
+    --spectrum-slider-control-to-field-label-large: -20px;
+    --spectrum-slider-control-to-field-label-medium: -16px;
+    --spectrum-slider-control-to-field-label-side-extra-large: 28px;
+    --spectrum-slider-control-to-field-label-side-large: 24px;
+    --spectrum-slider-control-to-field-label-side-medium: 20px;
+    --spectrum-slider-control-to-field-label-side-small: 20px;
+    --spectrum-slider-control-to-field-label-small: -8px;
+    --spectrum-slider-control-to-text-field-extra-large: 28px;
+    --spectrum-slider-control-to-text-field-large: 24px;
+    --spectrum-slider-control-to-text-field-medium: 20px;
+    --spectrum-slider-control-to-text-field-small: 20px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-border-width-down-extra-large: 11px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-border-width-down-large: 9px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-border-width-down-medium: 8px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-border-width-down-small: 7px;
+    --spectrum-slider-handle-extra-large: 30px;
+    --spectrum-slider-handle-height-precision-extra-large: 32px;
+    --spectrum-slider-handle-height-precision-large: 30px;
+    --spectrum-slider-handle-height-precision-medium: 26px;
+    --spectrum-slider-handle-height-precision-small: 24px;
+    --spectrum-slider-handle-large: 28px;
+    --spectrum-slider-handle-medium: 24px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-size-extra-large: 26px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-size-large: 22px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-size-medium: 20px;
+
+    /** @deprecated */
+    --spectrum-slider-handle-size-small: 18px;
+    --spectrum-slider-handle-small: 22px;
+    --spectrum-slider-ramp-track-height: 20px;
+    --spectrum-slider-tick-mark-height: 13px;
+    --spectrum-stack-item-action-to-navigation: 6px;
+    --spectrum-stack-item-drag-handle-to-control: 10px;
+    --spectrum-stack-item-edge-to-control: 15px;
+    --spectrum-stack-item-edge-to-visual: 15px;
+    --spectrum-stack-item-header-minimum-width: 240px;
+    --spectrum-stack-item-start-edge-to-content: 5px;
+    --spectrum-stack-item-text-to-control: 10px;
+    --spectrum-standard-dialog-body-font-size: var(--spectrum-body-size-s);
+    --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400);
+    --spectrum-standard-dialog-title-font-size: var(--spectrum-title-size-xl);
+    --spectrum-status-light-dot-size-extra-large: 16px;
+    --spectrum-status-light-dot-size-large: 14px;
+    --spectrum-status-light-dot-size-medium: 12px;
+    --spectrum-status-light-dot-size-small: 10px;
+    --spectrum-status-light-top-to-dot-extra-large: 22px;
+    --spectrum-status-light-top-to-dot-large: 18px;
+    --spectrum-status-light-top-to-dot-medium: 14px;
+    --spectrum-status-light-top-to-dot-small: 10px;
+    --spectrum-swatch-size-extra-small: 20px;
+    --spectrum-swatch-size-large: 50px;
+    --spectrum-swatch-size-medium: 40px;
+    --spectrum-swatch-size-small: 30px;
+    --spectrum-switch-control-height-extra-large: 26px;
+    --spectrum-switch-control-height-large: 22px;
+    --spectrum-switch-control-height-medium: 20px;
+    --spectrum-switch-control-height-small: 18px;
+    --spectrum-switch-control-width-extra-large: 46px;
+    --spectrum-switch-control-width-large: 38px;
+    --spectrum-switch-control-width-medium: 34px;
+    --spectrum-switch-control-width-small: 30px;
+    --spectrum-switch-handle-selected-size-extra-large: 20px;
+    --spectrum-switch-handle-selected-size-large: 16px;
+    --spectrum-switch-handle-selected-size-medium: 14px;
+    --spectrum-switch-handle-selected-size-small: 12px;
+    --spectrum-switch-handle-size-extra-large: 18px;
+    --spectrum-switch-handle-size-large: 14px;
+    --spectrum-switch-handle-size-medium: 12px;
+    --spectrum-switch-handle-size-small: 10px;
+    --spectrum-switch-top-to-control-extra-large: 19px;
+    --spectrum-switch-top-to-control-large: 15px;
+    --spectrum-switch-top-to-control-medium: 11px;
+    --spectrum-switch-top-to-control-small: 7px;
+    --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px;
+    --spectrum-tab-item-bottom-to-text-compact-large: 14px;
+    --spectrum-tab-item-bottom-to-text-compact-medium: 10px;
+    --spectrum-tab-item-bottom-to-text-compact-small: 6px;
+    --spectrum-tab-item-bottom-to-text-extra-large: 25px;
+    --spectrum-tab-item-bottom-to-text-large: 22px;
+    --spectrum-tab-item-bottom-to-text-medium: 19px;
+    --spectrum-tab-item-bottom-to-text-small: 15px;
+    --spectrum-tab-item-focus-indicator-gap-extra-large: 12px;
+    --spectrum-tab-item-focus-indicator-gap-large: 11px;
+    --spectrum-tab-item-focus-indicator-gap-medium: 10px;
+    --spectrum-tab-item-focus-indicator-gap-small: 9px;
+    --spectrum-tab-item-start-to-edge-extra-large: 19px;
+    --spectrum-tab-item-start-to-edge-large: 17px;
+    --spectrum-tab-item-start-to-edge-medium: 15px;
+    --spectrum-tab-item-start-to-edge-small: 13px;
+    --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px;
+    --spectrum-tab-item-to-tab-item-horizontal-large: 33px;
+    --spectrum-tab-item-to-tab-item-horizontal-medium: 30px;
+    --spectrum-tab-item-to-tab-item-horizontal-small: 27px;
+    --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px;
+    --spectrum-tab-item-to-tab-item-vertical-large: 6px;
+    --spectrum-tab-item-to-tab-item-vertical-medium: 5px;
+    --spectrum-tab-item-to-tab-item-vertical-small: 5px;
+    --spectrum-tab-item-top-to-text-compact-extra-large: 15px;
+    --spectrum-tab-item-top-to-text-compact-large: 12px;
+    --spectrum-tab-item-top-to-text-compact-medium: 9px;
+    --spectrum-tab-item-top-to-text-compact-small: 5px;
+    --spectrum-tab-item-top-to-text-extra-large: 25px;
+    --spectrum-tab-item-top-to-text-large: 22px;
+    --spectrum-tab-item-top-to-text-medium: 18px;
+    --spectrum-tab-item-top-to-text-small: 14px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px;
+    --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px;
+    --spectrum-tab-item-top-to-workflow-icon-large: 23px;
+    --spectrum-tab-item-top-to-workflow-icon-medium: 19px;
+    --spectrum-tab-item-top-to-workflow-icon-small: 15px;
+    --spectrum-table-checkbox-to-text: 30px;
+    --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px;
+    --spectrum-table-column-header-row-bottom-to-text-large: 13px;
+    --spectrum-table-column-header-row-bottom-to-text-medium: 10px;
+    --spectrum-table-column-header-row-bottom-to-text-small: 11px;
+    --spectrum-table-column-header-row-top-to-text-extra-large: 16px;
+    --spectrum-table-column-header-row-top-to-text-large: 13px;
+    --spectrum-table-column-header-row-top-to-text-medium: 9px;
+    --spectrum-table-column-header-row-top-to-text-small: 10px;
+    --spectrum-table-header-row-checkbox-to-top-extra-large: 21px;
+    --spectrum-table-header-row-checkbox-to-top-large: 17px;
+    --spectrum-table-header-row-checkbox-to-top-medium: 11px;
+    --spectrum-table-header-row-checkbox-to-top-small: 14px;
+    --spectrum-table-row-bottom-to-text-extra-large: 22px;
+    --spectrum-table-row-bottom-to-text-extra-large-regular: var(--spectrum-table-row-bottom-to-text-extra-large);
+    --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px;
+    --spectrum-table-row-bottom-to-text-large: 18px;
+    --spectrum-table-row-bottom-to-text-large-regular: var(--spectrum-table-row-bottom-to-text-large);
+    --spectrum-table-row-bottom-to-text-large-spacious: 23px;
+    --spectrum-table-row-bottom-to-text-medium: 15px;
+    --spectrum-table-row-bottom-to-text-medium-regular: var(--spectrum-table-row-bottom-to-text-medium);
+    --spectrum-table-row-bottom-to-text-medium-spacious: 18px;
+    --spectrum-table-row-bottom-to-text-small: 11px;
+    --spectrum-table-row-bottom-to-text-small-regular: var(--spectrum-table-row-bottom-to-text-small);
+    --spectrum-table-row-bottom-to-text-small-spacious: 16px;
+    --spectrum-table-row-checkbox-to-top-extra-large: 26px;
+    --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px;
+    --spectrum-table-row-checkbox-to-top-extra-large-regular: var(--spectrum-table-row-checkbox-to-top-extra-large);
+    --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px;
+    --spectrum-table-row-checkbox-to-top-large: 22px;
+    --spectrum-table-row-checkbox-to-top-large-compact: 17px;
+    --spectrum-table-row-checkbox-to-top-large-regular: var(--spectrum-table-row-checkbox-to-top-large);
+    --spectrum-table-row-checkbox-to-top-large-spacious: 27px;
+    --spectrum-table-row-checkbox-to-top-medium: 16px;
+    --spectrum-table-row-checkbox-to-top-medium-compact: 11px;
+    --spectrum-table-row-checkbox-to-top-medium-regular: var(--spectrum-table-row-checkbox-to-top-medium);
+    --spectrum-table-row-checkbox-to-top-medium-spacious: 21px;
+    --spectrum-table-row-checkbox-to-top-small: 14px;
+    --spectrum-table-row-checkbox-to-top-small-compact: 9px;
+    --spectrum-table-row-checkbox-to-top-small-regular: var(--spectrum-table-row-checkbox-to-top-small);
+    --spectrum-table-row-checkbox-to-top-small-spacious: 19px;
+    --spectrum-table-row-height-extra-large: 70px;
+    --spectrum-table-row-height-extra-large-regular: var(--spectrum-table-row-height-extra-large);
+    --spectrum-table-row-height-extra-large-spacious: 80px;
+    --spectrum-table-row-height-large: 60px;
+    --spectrum-table-row-height-large-regular: var(--spectrum-table-row-height-large);
+    --spectrum-table-row-height-large-spacious: 70px;
+    --spectrum-table-row-height-medium: 50px;
+    --spectrum-table-row-height-medium-regular: var(--spectrum-table-row-height-medium);
+    --spectrum-table-row-height-medium-spacious: 60px;
+    --spectrum-table-row-height-small: 40px;
+    --spectrum-table-row-height-small-regular: var(--spectrum-table-row-height-small);
+    --spectrum-table-row-height-small-spacious: 50px;
+    --spectrum-table-row-top-to-text-extra-large: 21px;
+    --spectrum-table-row-top-to-text-extra-large-regular: var(--spectrum-table-row-top-to-text-extra-large);
+    --spectrum-table-row-top-to-text-extra-large-spacious: 26px;
+    --spectrum-table-row-top-to-text-large: 18px;
+    --spectrum-table-row-top-to-text-large-regular: var(--spectrum-table-row-top-to-text-large);
+    --spectrum-table-row-top-to-text-large-spacious: 23px;
+    --spectrum-table-row-top-to-text-medium: 14px;
+    --spectrum-table-row-top-to-text-medium-regular: var(--spectrum-table-row-top-to-text-medium);
+    --spectrum-table-row-top-to-text-medium-spacious: 16px;
+    --spectrum-table-row-top-to-text-small: 10px;
+    --spectrum-table-row-top-to-text-small-regular: var(--spectrum-table-row-top-to-text-small);
+    --spectrum-table-row-top-to-text-small-spacious: 15px;
+    --spectrum-table-section-header-row-height-extra-large: 60px;
+    --spectrum-table-section-header-row-height-large: 50px;
+    --spectrum-table-section-header-row-height-medium: 40px;
+    --spectrum-table-section-header-row-height-small: 30px;
+    --spectrum-table-thumbnail-to-top-minimum-extra-large: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: var(--spectrum-table-thumbnail-to-top-minimum-extra-large);
+    --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px;
+    --spectrum-table-thumbnail-to-top-minimum-large: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px;
+    --spectrum-table-thumbnail-to-top-minimum-large-regular: var(--spectrum-table-thumbnail-to-top-minimum-large);
+    --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-medium: 9px;
+    --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px;
+    --spectrum-table-thumbnail-to-top-minimum-medium-regular: var(--spectrum-table-thumbnail-to-top-minimum-medium);
+    --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-small: 6px;
+    --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px;
+    --spectrum-table-thumbnail-to-top-minimum-small-regular: var(--spectrum-table-thumbnail-to-top-minimum-small);
+    --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px;
+    --spectrum-tag-edge-to-clear-icon-large: 19px;
+    --spectrum-tag-edge-to-clear-icon-medium: 15px;
+    --spectrum-tag-edge-to-clear-icon-small: 10px;
+    --spectrum-tag-field-default-width-large: 312px;
+    --spectrum-tag-field-default-width-medium: 288px;
+    --spectrum-tag-field-default-width-small: 264px;
+    --spectrum-tag-field-edge-to-content-large: 16px;
+    --spectrum-tag-field-edge-to-content-medium: 14px;
+    --spectrum-tag-field-edge-to-content-small: 12px;
+    --spectrum-tag-field-minimum-height-large: 82px;
+    --spectrum-tag-field-minimum-height-medium: 68px;
+    --spectrum-tag-field-minimum-height-small: 54px;
+    --spectrum-tag-field-minimum-width: 200px;
+    --spectrum-tag-label-to-clear-icon-large: 19px;
+    --spectrum-tag-label-to-clear-icon-medium: 15px;
+    --spectrum-tag-label-to-clear-icon-small: 10px;
+    --spectrum-tag-minimum-width-large: 42px;
+    --spectrum-tag-minimum-width-medium: 34px;
+    --spectrum-tag-minimum-width-small: 25px;
+    --spectrum-tag-top-to-avatar-large: 11px;
+    --spectrum-tag-top-to-avatar-medium: 7px;
+    --spectrum-tag-top-to-avatar-small: 5px;
+    --spectrum-tag-top-to-cross-icon-large: 19px;
+    --spectrum-tag-top-to-cross-icon-medium: 15px;
+    --spectrum-tag-top-to-cross-icon-small: 10px;
+    --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-400);
+    --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-300);
+    --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-400);
+    --spectrum-text-area-minimum-height: 70px;
+    --spectrum-text-area-minimum-width: 140px;
+    --spectrum-text-to-control-50: 5px;
+    --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-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-thumbnail-size-50: 20px;
+    --spectrum-thumbnail-size-75: 24px;
+    --spectrum-thumbnail-size-100: 28px;
+    --spectrum-thumbnail-size-200: 32px;
+    --spectrum-thumbnail-size-300: 36px;
+    --spectrum-thumbnail-size-400: 40px;
+    --spectrum-thumbnail-size-500: 44px;
+    --spectrum-thumbnail-size-600: 48px;
+    --spectrum-thumbnail-size-700: 52px;
+    --spectrum-thumbnail-size-800: 56px;
+    --spectrum-thumbnail-size-900: 64px;
+    --spectrum-thumbnail-size-1000: 72px;
+    --spectrum-toast-bottom-to-text: 22px;
+    --spectrum-toast-height: 60px;
+    --spectrum-toast-maximum-width: 420px;
+    --spectrum-toast-top-to-text: 20px;
+    --spectrum-toast-top-to-workflow-icon: 20px;
+    --spectrum-tooltip-maximum-width: 200px;
+    --spectrum-tooltip-tip-height: 6px;
+    --spectrum-tooltip-tip-square-size: 10px;
+    --spectrum-tooltip-tip-width: 12px;
+    --spectrum-tray-top-to-content-area: 5px;
+    --spectrum-tree-view-bottom-to-label: 16px;
+    --spectrum-tree-view-disclosure-indicator-height: 40px;
+    --spectrum-tree-view-disclosure-indicator-width: 42px;
+    --spectrum-tree-view-drag-handle-to-checkbox: 10px;
+    --spectrum-tree-view-edge-to-checkbox: 15px;
+    --spectrum-tree-view-edge-to-drag-handle: 5px;
+    --spectrum-tree-view-end-edge-to-action-area: 7px;
+    --spectrum-tree-view-item-to-header: 30px;
+    --spectrum-tree-view-label-to-action-area: 8px;
+    --spectrum-tree-view-level-increment: 20px;
+    --spectrum-tree-view-minimum-height: 50px;
+    --spectrum-tree-view-minimum-top-to-context-area: 10px;
+    --spectrum-tree-view-minimum-width: 200px;
+    --spectrum-tree-view-top-to-action-button: 5px;
+    --spectrum-tree-view-top-to-checkbox: 5px;
+    --spectrum-tree-view-top-to-disclosure-indicator: 19px;
+    --spectrum-tree-view-top-to-drag-handle: 19px;
+    --spectrum-tree-view-top-to-label: 13px;
+    --spectrum-treeview-indicator-inset-block-start: 6px;
+    --spectrum-treeview-item-indentation-extra-large: 30px;
+    --spectrum-treeview-item-indentation-large: 25px;
+    --spectrum-treeview-item-indentation-medium: 20px;
+    --spectrum-treeview-item-indentation-small: 15px;
+    --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
+    --spectrum-visual-to-control-100: 10px;
+    --spectrum-well-border-radius: 5px;
+    --spectrum-well-margin-top: 5px;
+    --spectrum-well-min-width: 300px;
+    --spectrum-well-padding: 20px;
+    --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;
 }
diff --git a/tools/styles/scale-medium.css b/tools/styles/scale-medium.css
deleted file mode 100644
index 9ba46899d36..00000000000
--- a/tools/styles/scale-medium.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-scale-medium.css";
-
-:host,
-:root {
-    --spectrum-global-alias-appframe-border-size: 2px;
-    --swc-scale-factor: 1;
-}
diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css
deleted file mode 100644
index af8078db72b..00000000000
--- a/tools/styles/spectrum-core-global.css
+++ /dev/null
@@ -1,1321 +0,0 @@
-:root,
-:host {
-    --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1);
-    --spectrum-global-animation-duration-0: 0s;
-    --spectrum-global-animation-duration-100: 0.13s;
-    --spectrum-global-animation-duration-200: 0.16s;
-    --spectrum-global-animation-duration-300: 0.19s;
-    --spectrum-global-animation-duration-400: 0.22s;
-    --spectrum-global-animation-duration-500: 0.25s;
-    --spectrum-global-animation-duration-600: 0.3s;
-    --spectrum-global-animation-duration-700: 0.35s;
-    --spectrum-global-animation-duration-800: 0.4s;
-    --spectrum-global-animation-duration-900: 0.45s;
-    --spectrum-global-animation-duration-1000: 0.5s;
-    --spectrum-global-animation-duration-2000: 1s;
-    --spectrum-global-animation-duration-4000: 2s;
-    --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
-    --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
-    --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
-    --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-static-black-rgb: 0, 0, 0;
-    --spectrum-global-color-static-black: rgb(var(--spectrum-global-color-static-black-rgb));
-    --spectrum-global-color-static-white-rgb: 255, 255, 255;
-    --spectrum-global-color-static-white: rgb(var(--spectrum-global-color-static-white-rgb));
-    --spectrum-global-color-static-blue-rgb: 0, 87, 191;
-    --spectrum-global-color-static-blue: rgb(var(--spectrum-global-color-static-blue-rgb));
-    --spectrum-global-color-static-gray-50-rgb: 255, 255, 255;
-    --spectrum-global-color-static-gray-50: rgb(var(--spectrum-global-color-static-gray-50-rgb));
-    --spectrum-global-color-static-gray-75-rgb: 255, 255, 255;
-    --spectrum-global-color-static-gray-75: rgb(var(--spectrum-global-color-static-gray-75-rgb));
-    --spectrum-global-color-static-gray-100-rgb: 255, 255, 255;
-    --spectrum-global-color-static-gray-100: rgb(var(--spectrum-global-color-static-gray-100-rgb));
-    --spectrum-global-color-static-gray-200-rgb: 235, 235, 235;
-    --spectrum-global-color-static-gray-200: rgb(var(--spectrum-global-color-static-gray-200-rgb));
-    --spectrum-global-color-static-gray-300-rgb: 217, 217, 217;
-    --spectrum-global-color-static-gray-300: rgb(var(--spectrum-global-color-static-gray-300-rgb));
-    --spectrum-global-color-static-gray-400-rgb: 179, 179, 179;
-    --spectrum-global-color-static-gray-400: rgb(var(--spectrum-global-color-static-gray-400-rgb));
-    --spectrum-global-color-static-gray-500-rgb: 146, 146, 146;
-    --spectrum-global-color-static-gray-500: rgb(var(--spectrum-global-color-static-gray-500-rgb));
-    --spectrum-global-color-static-gray-600-rgb: 110, 110, 110;
-    --spectrum-global-color-static-gray-600: rgb(var(--spectrum-global-color-static-gray-600-rgb));
-    --spectrum-global-color-static-gray-700-rgb: 71, 71, 71;
-    --spectrum-global-color-static-gray-700: rgb(var(--spectrum-global-color-static-gray-700-rgb));
-    --spectrum-global-color-static-gray-800-rgb: 34, 34, 34;
-    --spectrum-global-color-static-gray-800: rgb(var(--spectrum-global-color-static-gray-800-rgb));
-    --spectrum-global-color-static-gray-900-rgb: 0, 0, 0;
-    --spectrum-global-color-static-gray-900: rgb(var(--spectrum-global-color-static-gray-900-rgb));
-    --spectrum-global-color-static-red-400-rgb: 237, 64, 48;
-    --spectrum-global-color-static-red-400: rgb(var(--spectrum-global-color-static-red-400-rgb));
-    --spectrum-global-color-static-red-500-rgb: 217, 28, 21;
-    --spectrum-global-color-static-red-500: rgb(var(--spectrum-global-color-static-red-500-rgb));
-    --spectrum-global-color-static-red-600-rgb: 187, 2, 2;
-    --spectrum-global-color-static-red-600: rgb(var(--spectrum-global-color-static-red-600-rgb));
-    --spectrum-global-color-static-red-700-rgb: 154, 0, 0;
-    --spectrum-global-color-static-red-700: rgb(var(--spectrum-global-color-static-red-700-rgb));
-    --spectrum-global-color-static-red-800-rgb: 124, 0, 0;
-    --spectrum-global-color-static-red-800: rgb(var(--spectrum-global-color-static-red-800-rgb));
-    --spectrum-global-color-static-orange-400-rgb: 250, 139, 26;
-    --spectrum-global-color-static-orange-400: rgb(var(--spectrum-global-color-static-orange-400-rgb));
-    --spectrum-global-color-static-orange-500-rgb: 233, 117, 0;
-    --spectrum-global-color-static-orange-500: rgb(var(--spectrum-global-color-static-orange-500-rgb));
-    --spectrum-global-color-static-orange-600-rgb: 209, 97, 0;
-    --spectrum-global-color-static-orange-600: rgb(var(--spectrum-global-color-static-orange-600-rgb));
-    --spectrum-global-color-static-orange-700-rgb: 182, 80, 0;
-    --spectrum-global-color-static-orange-700: rgb(var(--spectrum-global-color-static-orange-700-rgb));
-    --spectrum-global-color-static-orange-800-rgb: 155, 64, 0;
-    --spectrum-global-color-static-orange-800: rgb(var(--spectrum-global-color-static-orange-800-rgb));
-    --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123;
-    --spectrum-global-color-static-yellow-200: rgb(var(--spectrum-global-color-static-yellow-200-rgb));
-    --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23;
-    --spectrum-global-color-static-yellow-300: rgb(var(--spectrum-global-color-static-yellow-300-rgb));
-    --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0;
-    --spectrum-global-color-static-yellow-400: rgb(var(--spectrum-global-color-static-yellow-400-rgb));
-    --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0;
-    --spectrum-global-color-static-yellow-500: rgb(var(--spectrum-global-color-static-yellow-500-rgb));
-    --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0;
-    --spectrum-global-color-static-yellow-600: rgb(var(--spectrum-global-color-static-yellow-600-rgb));
-    --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0;
-    --spectrum-global-color-static-yellow-700: rgb(var(--spectrum-global-color-static-yellow-700-rgb));
-    --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0;
-    --spectrum-global-color-static-yellow-800: rgb(var(--spectrum-global-color-static-yellow-800-rgb));
-    --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27;
-    --spectrum-global-color-static-chartreuse-300: rgb(var(--spectrum-global-color-static-chartreuse-300-rgb));
-    --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13;
-    --spectrum-global-color-static-chartreuse-400: rgb(var(--spectrum-global-color-static-chartreuse-400-rgb));
-    --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4;
-    --spectrum-global-color-static-chartreuse-500: rgb(var(--spectrum-global-color-static-chartreuse-500-rgb));
-    --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0;
-    --spectrum-global-color-static-chartreuse-600: rgb(var(--spectrum-global-color-static-chartreuse-600-rgb));
-    --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0;
-    --spectrum-global-color-static-chartreuse-700: rgb(var(--spectrum-global-color-static-chartreuse-700-rgb));
-    --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0;
-    --spectrum-global-color-static-chartreuse-800: rgb(var(--spectrum-global-color-static-chartreuse-800-rgb));
-    --spectrum-global-color-static-celery-200-rgb: 126, 229, 114;
-    --spectrum-global-color-static-celery-200: rgb(var(--spectrum-global-color-static-celery-200-rgb));
-    --spectrum-global-color-static-celery-300-rgb: 87, 212, 86;
-    --spectrum-global-color-static-celery-300: rgb(var(--spectrum-global-color-static-celery-300-rgb));
-    --spectrum-global-color-static-celery-400-rgb: 48, 193, 61;
-    --spectrum-global-color-static-celery-400: rgb(var(--spectrum-global-color-static-celery-400-rgb));
-    --spectrum-global-color-static-celery-500-rgb: 15, 172, 38;
-    --spectrum-global-color-static-celery-500: rgb(var(--spectrum-global-color-static-celery-500-rgb));
-    --spectrum-global-color-static-celery-600-rgb: 0, 150, 20;
-    --spectrum-global-color-static-celery-600: rgb(var(--spectrum-global-color-static-celery-600-rgb));
-    --spectrum-global-color-static-celery-700-rgb: 0, 128, 15;
-    --spectrum-global-color-static-celery-700: rgb(var(--spectrum-global-color-static-celery-700-rgb));
-    --spectrum-global-color-static-celery-800-rgb: 0, 107, 15;
-    --spectrum-global-color-static-celery-800: rgb(var(--spectrum-global-color-static-celery-800-rgb));
-    --spectrum-global-color-static-green-400-rgb: 29, 169, 115;
-    --spectrum-global-color-static-green-400: rgb(var(--spectrum-global-color-static-green-400-rgb));
-    --spectrum-global-color-static-green-500-rgb: 0, 148, 97;
-    --spectrum-global-color-static-green-500: rgb(var(--spectrum-global-color-static-green-500-rgb));
-    --spectrum-global-color-static-green-600-rgb: 0, 126, 80;
-    --spectrum-global-color-static-green-600: rgb(var(--spectrum-global-color-static-green-600-rgb));
-    --spectrum-global-color-static-green-700-rgb: 0, 105, 65;
-    --spectrum-global-color-static-green-700: rgb(var(--spectrum-global-color-static-green-700-rgb));
-    --spectrum-global-color-static-green-800-rgb: 0, 86, 53;
-    --spectrum-global-color-static-green-800: rgb(var(--spectrum-global-color-static-green-800-rgb));
-    --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199;
-    --spectrum-global-color-static-seafoam-200: rgb(var(--spectrum-global-color-static-seafoam-200-rgb));
-    --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180;
-    --spectrum-global-color-static-seafoam-300: rgb(var(--spectrum-global-color-static-seafoam-300-rgb));
-    --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160;
-    --spectrum-global-color-static-seafoam-400: rgb(var(--spectrum-global-color-static-seafoam-400-rgb));
-    --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139;
-    --spectrum-global-color-static-seafoam-500: rgb(var(--spectrum-global-color-static-seafoam-500-rgb));
-    --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118;
-    --spectrum-global-color-static-seafoam-600: rgb(var(--spectrum-global-color-static-seafoam-600-rgb));
-    --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99;
-    --spectrum-global-color-static-seafoam-700: rgb(var(--spectrum-global-color-static-seafoam-700-rgb));
-    --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80;
-    --spectrum-global-color-static-seafoam-800: rgb(var(--spectrum-global-color-static-seafoam-800-rgb));
-    --spectrum-global-color-static-blue-200-rgb: 130, 193, 251;
-    --spectrum-global-color-static-blue-200: rgb(var(--spectrum-global-color-static-blue-200-rgb));
-    --spectrum-global-color-static-blue-300-rgb: 98, 173, 247;
-    --spectrum-global-color-static-blue-300: rgb(var(--spectrum-global-color-static-blue-300-rgb));
-    --spectrum-global-color-static-blue-400-rgb: 66, 151, 244;
-    --spectrum-global-color-static-blue-400: rgb(var(--spectrum-global-color-static-blue-400-rgb));
-    --spectrum-global-color-static-blue-500-rgb: 27, 127, 245;
-    --spectrum-global-color-static-blue-500: rgb(var(--spectrum-global-color-static-blue-500-rgb));
-    --spectrum-global-color-static-blue-600-rgb: 4, 105, 227;
-    --spectrum-global-color-static-blue-600: rgb(var(--spectrum-global-color-static-blue-600-rgb));
-    --spectrum-global-color-static-blue-700-rgb: 0, 87, 190;
-    --spectrum-global-color-static-blue-700: rgb(var(--spectrum-global-color-static-blue-700-rgb));
-    --spectrum-global-color-static-blue-800-rgb: 0, 72, 153;
-    --spectrum-global-color-static-blue-800: rgb(var(--spectrum-global-color-static-blue-800-rgb));
-    --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255;
-    --spectrum-global-color-static-indigo-200: rgb(var(--spectrum-global-color-static-indigo-200-rgb));
-    --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255;
-    --spectrum-global-color-static-indigo-300: rgb(var(--spectrum-global-color-static-indigo-300-rgb));
-    --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253;
-    --spectrum-global-color-static-indigo-400: rgb(var(--spectrum-global-color-static-indigo-400-rgb));
-    --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246;
-    --spectrum-global-color-static-indigo-500: rgb(var(--spectrum-global-color-static-indigo-500-rgb));
-    --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232;
-    --spectrum-global-color-static-indigo-600: rgb(var(--spectrum-global-color-static-indigo-600-rgb));
-    --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208;
-    --spectrum-global-color-static-indigo-700: rgb(var(--spectrum-global-color-static-indigo-700-rgb));
-    --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208;
-    --spectrum-global-color-static-indigo-800: rgb(var(--spectrum-global-color-static-indigo-800-rgb));
-    --spectrum-global-color-static-purple-400-rgb: 178, 121, 250;
-    --spectrum-global-color-static-purple-400: rgb(var(--spectrum-global-color-static-purple-400-rgb));
-    --spectrum-global-color-static-purple-500-rgb: 161, 93, 246;
-    --spectrum-global-color-static-purple-500: rgb(var(--spectrum-global-color-static-purple-500-rgb));
-    --spectrum-global-color-static-purple-600-rgb: 142, 67, 234;
-    --spectrum-global-color-static-purple-600: rgb(var(--spectrum-global-color-static-purple-600-rgb));
-    --spectrum-global-color-static-purple-700-rgb: 120, 43, 216;
-    --spectrum-global-color-static-purple-700: rgb(var(--spectrum-global-color-static-purple-700-rgb));
-    --spectrum-global-color-static-purple-800-rgb: 98, 23, 190;
-    --spectrum-global-color-static-purple-800: rgb(var(--spectrum-global-color-static-purple-800-rgb));
-    --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230;
-    --spectrum-global-color-static-fuchsia-400: rgb(var(--spectrum-global-color-static-fuchsia-400-rgb));
-    --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212;
-    --spectrum-global-color-static-fuchsia-500: rgb(var(--spectrum-global-color-static-fuchsia-500-rgb));
-    --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187;
-    --spectrum-global-color-static-fuchsia-600: rgb(var(--spectrum-global-color-static-fuchsia-600-rgb));
-    --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163;
-    --spectrum-global-color-static-fuchsia-700: rgb(var(--spectrum-global-color-static-fuchsia-700-rgb));
-    --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136;
-    --spectrum-global-color-static-fuchsia-800: rgb(var(--spectrum-global-color-static-fuchsia-800-rgb));
-    --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175;
-    --spectrum-global-color-static-magenta-200: rgb(var(--spectrum-global-color-static-magenta-200-rgb));
-    --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157;
-    --spectrum-global-color-static-magenta-300: rgb(var(--spectrum-global-color-static-magenta-300-rgb));
-    --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135;
-    --spectrum-global-color-static-magenta-400: rgb(var(--spectrum-global-color-static-magenta-400-rgb));
-    --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111;
-    --spectrum-global-color-static-magenta-500: rgb(var(--spectrum-global-color-static-magenta-500-rgb));
-    --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89;
-    --spectrum-global-color-static-magenta-600: rgb(var(--spectrum-global-color-static-magenta-600-rgb));
-    --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72;
-    --spectrum-global-color-static-magenta-700: rgb(var(--spectrum-global-color-static-magenta-700-rgb));
-    --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58;
-    --spectrum-global-color-static-magenta-800: rgb(var(--spectrum-global-color-static-magenta-800-rgb));
-    --spectrum-global-color-static-transparent-white-200: #ffffff1a;
-    --spectrum-global-color-static-transparent-white-300: #ffffff40;
-    --spectrum-global-color-static-transparent-white-400: #fff6;
-    --spectrum-global-color-static-transparent-white-500: #ffffff8c;
-    --spectrum-global-color-static-transparent-white-600: #ffffffb3;
-    --spectrum-global-color-static-transparent-white-700: #fffc;
-    --spectrum-global-color-static-transparent-white-800: #ffffffe6;
-    --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255;
-    --spectrum-global-color-static-transparent-white-900: rgb(var(--spectrum-global-color-static-transparent-white-900-rgb));
-    --spectrum-global-color-static-transparent-black-200: #0000001a;
-    --spectrum-global-color-static-transparent-black-300: #00000040;
-    --spectrum-global-color-static-transparent-black-400: #0006;
-    --spectrum-global-color-static-transparent-black-500: #0000008c;
-    --spectrum-global-color-static-transparent-black-600: #000000b3;
-    --spectrum-global-color-static-transparent-black-700: #000c;
-    --spectrum-global-color-static-transparent-black-800: #000000e6;
-    --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0;
-    --spectrum-global-color-static-transparent-black-900: rgb(var(--spectrum-global-color-static-transparent-black-900-rgb));
-    --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, #1a4b83, #1a3979, #1a266f, #191264, #180057;
-    --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, #196b47, #105c45, #094d41, #033f3e, #00313a;
-    --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, #71167c, #560f74, #370b6e, #000968;
-    --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, #3ea8a6, #208288, #076769, #00494b, #002c2d;
-    --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, #397aa8, #1c5796, #163771, #10194d;
-    --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, #2f74b3, #265191, #163670, #0b194c;
-    --spectrum-semantic-negative-background-color: var(--spectrum-global-color-static-red-600);
-    --spectrum-semantic-negative-color-default: var(--spectrum-global-color-red-500);
-    --spectrum-semantic-negative-color-hover: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-border-color: var(--spectrum-global-color-red-400);
-    --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-status-color: var(--spectrum-global-color-red-400);
-    --spectrum-semantic-negative-text-color-large: var(--spectrum-global-color-red-500);
-    --spectrum-semantic-negative-text-color-small: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-text-color-small-hover: var(--spectrum-global-color-red-700);
-    --spectrum-semantic-negative-text-color-small-down: var(--spectrum-global-color-red-700);
-    --spectrum-semantic-negative-text-color-small-key-focus: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700);
-    --spectrum-semantic-negative-color-key-focus: var(--spectrum-global-color-red-400);
-    --spectrum-semantic-negative-background-color-default: var(--spectrum-global-color-static-red-600);
-    --spectrum-semantic-negative-background-color-hover: var(--spectrum-global-color-static-red-700);
-    --spectrum-semantic-negative-background-color-down: var(--spectrum-global-color-static-red-800);
-    --spectrum-semantic-negative-background-color-key-focus: var(--spectrum-global-color-static-red-700);
-    --spectrum-semantic-notice-background-color: var(--spectrum-global-color-static-orange-600);
-    --spectrum-semantic-notice-color-default: var(--spectrum-global-color-orange-500);
-    --spectrum-semantic-notice-color-dark: var(--spectrum-global-color-orange-600);
-    --spectrum-semantic-notice-border-color: var(--spectrum-global-color-orange-400);
-    --spectrum-semantic-notice-icon-color: var(--spectrum-global-color-orange-600);
-    --spectrum-semantic-notice-status-color: var(--spectrum-global-color-orange-400);
-    --spectrum-semantic-notice-text-color-large: var(--spectrum-global-color-orange-500);
-    --spectrum-semantic-notice-text-color-small: var(--spectrum-global-color-orange-600);
-    --spectrum-semantic-notice-color-down: var(--spectrum-global-color-orange-700);
-    --spectrum-semantic-notice-color-key-focus: var(--spectrum-global-color-orange-400);
-    --spectrum-semantic-notice-background-color-default: var(--spectrum-global-color-static-orange-600);
-    --spectrum-semantic-notice-background-color-hover: var(--spectrum-global-color-static-orange-700);
-    --spectrum-semantic-notice-background-color-down: var(--spectrum-global-color-static-orange-800);
-    --spectrum-semantic-notice-background-color-key-focus: var(--spectrum-global-color-static-orange-700);
-    --spectrum-semantic-positive-background-color: var(--spectrum-global-color-static-green-600);
-    --spectrum-semantic-positive-color-default: var(--spectrum-global-color-green-500);
-    --spectrum-semantic-positive-color-dark: var(--spectrum-global-color-green-600);
-    --spectrum-semantic-positive-border-color: var(--spectrum-global-color-green-400);
-    --spectrum-semantic-positive-icon-color: var(--spectrum-global-color-green-600);
-    --spectrum-semantic-positive-status-color: var(--spectrum-global-color-green-400);
-    --spectrum-semantic-positive-text-color-large: var(--spectrum-global-color-green-500);
-    --spectrum-semantic-positive-text-color-small: var(--spectrum-global-color-green-600);
-    --spectrum-semantic-positive-color-down: var(--spectrum-global-color-green-700);
-    --spectrum-semantic-positive-color-key-focus: var(--spectrum-global-color-green-400);
-    --spectrum-semantic-positive-background-color-default: var(--spectrum-global-color-static-green-600);
-    --spectrum-semantic-positive-background-color-hover: var(--spectrum-global-color-static-green-700);
-    --spectrum-semantic-positive-background-color-down: var(--spectrum-global-color-static-green-800);
-    --spectrum-semantic-positive-background-color-key-focus: var(--spectrum-global-color-static-green-700);
-    --spectrum-semantic-informative-background-color: var(--spectrum-global-color-static-blue-600);
-    --spectrum-semantic-informative-color-default: var(--spectrum-global-color-blue-500);
-    --spectrum-semantic-informative-color-dark: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-informative-border-color: var(--spectrum-global-color-blue-400);
-    --spectrum-semantic-informative-icon-color: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-informative-status-color: var(--spectrum-global-color-blue-400);
-    --spectrum-semantic-informative-text-color-large: var(--spectrum-global-color-blue-500);
-    --spectrum-semantic-informative-text-color-small: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-informative-color-down: var(--spectrum-global-color-blue-700);
-    --spectrum-semantic-informative-color-key-focus: var(--spectrum-global-color-blue-400);
-    --spectrum-semantic-informative-background-color-default: var(--spectrum-global-color-static-blue-600);
-    --spectrum-semantic-informative-background-color-hover: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-informative-background-color-down: var(--spectrum-global-color-static-blue-800);
-    --spectrum-semantic-informative-background-color-key-focus: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-cta-background-color-default: var(--spectrum-global-color-static-blue-600);
-    --spectrum-semantic-cta-background-color-hover: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-cta-background-color-down: var(--spectrum-global-color-static-blue-800);
-    --spectrum-semantic-cta-background-color-key-focus: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-emphasized-border-color-default: var(--spectrum-global-color-blue-500);
-    --spectrum-semantic-emphasized-border-color-hover: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-emphasized-border-color-down: var(--spectrum-global-color-blue-700);
-    --spectrum-semantic-emphasized-border-color-key-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-neutral-background-color-default: var(--spectrum-global-color-static-gray-700);
-    --spectrum-semantic-neutral-background-color-hover: var(--spectrum-global-color-static-gray-800);
-    --spectrum-semantic-neutral-background-color-down: var(--spectrum-global-color-static-gray-900);
-    --spectrum-semantic-neutral-background-color-key-focus: var(--spectrum-global-color-static-gray-800);
-    --spectrum-semantic-presence-color-1: var(--spectrum-global-color-static-red-500);
-    --spectrum-semantic-presence-color-2: var(--spectrum-global-color-static-orange-400);
-    --spectrum-semantic-presence-color-3: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-semantic-presence-color-4-rgb: 75, 204, 162;
-    --spectrum-semantic-presence-color-4: rgb(var(--spectrum-semantic-presence-color-4-rgb));
-    --spectrum-semantic-presence-color-5-rgb: 0, 199, 255;
-    --spectrum-semantic-presence-color-5: rgb(var(--spectrum-semantic-presence-color-5-rgb));
-    --spectrum-semantic-presence-color-6-rgb: 0, 140, 184;
-    --spectrum-semantic-presence-color-6: rgb(var(--spectrum-semantic-presence-color-6-rgb));
-    --spectrum-semantic-presence-color-7-rgb: 126, 75, 243;
-    --spectrum-semantic-presence-color-7: rgb(var(--spectrum-semantic-presence-color-7-rgb));
-    --spectrum-semantic-presence-color-8: var(--spectrum-global-color-static-fuchsia-600);
-    --spectrum-global-dimension-static-percent-50: 50%;
-    --spectrum-global-dimension-static-percent-70: 70%;
-    --spectrum-global-dimension-static-percent-100: 100%;
-    --spectrum-global-dimension-static-breakpoint-xsmall: 304px;
-    --spectrum-global-dimension-static-breakpoint-small: 768px;
-    --spectrum-global-dimension-static-breakpoint-medium: 1280px;
-    --spectrum-global-dimension-static-breakpoint-large: 1768px;
-    --spectrum-global-dimension-static-breakpoint-xlarge: 2160px;
-    --spectrum-global-dimension-static-grid-columns: 12;
-    --spectrum-global-dimension-static-grid-fluid-width: 100%;
-    --spectrum-global-dimension-static-grid-fixed-max-width: 1280px;
-    --spectrum-global-dimension-static-size-0: 0px;
-    --spectrum-global-dimension-static-size-10: 1px;
-    --spectrum-global-dimension-static-size-25: 2px;
-    --spectrum-global-dimension-static-size-40: 3px;
-    --spectrum-global-dimension-static-size-50: 4px;
-    --spectrum-global-dimension-static-size-65: 5px;
-    --spectrum-global-dimension-static-size-75: 6px;
-    --spectrum-global-dimension-static-size-85: 7px;
-    --spectrum-global-dimension-static-size-100: 8px;
-    --spectrum-global-dimension-static-size-115: 9px;
-    --spectrum-global-dimension-static-size-125: 10px;
-    --spectrum-global-dimension-static-size-130: 11px;
-    --spectrum-global-dimension-static-size-150: 12px;
-    --spectrum-global-dimension-static-size-160: 13px;
-    --spectrum-global-dimension-static-size-175: 14px;
-    --spectrum-global-dimension-static-size-185: 15px;
-    --spectrum-global-dimension-static-size-200: 16px;
-    --spectrum-global-dimension-static-size-225: 18px;
-    --spectrum-global-dimension-static-size-250: 20px;
-    --spectrum-global-dimension-static-size-275: 22px;
-    --spectrum-global-dimension-static-size-300: 24px;
-    --spectrum-global-dimension-static-size-325: 26px;
-    --spectrum-global-dimension-static-size-350: 28px;
-    --spectrum-global-dimension-static-size-400: 32px;
-    --spectrum-global-dimension-static-size-450: 36px;
-    --spectrum-global-dimension-static-size-500: 40px;
-    --spectrum-global-dimension-static-size-550: 44px;
-    --spectrum-global-dimension-static-size-600: 48px;
-    --spectrum-global-dimension-static-size-700: 56px;
-    --spectrum-global-dimension-static-size-800: 64px;
-    --spectrum-global-dimension-static-size-900: 72px;
-    --spectrum-global-dimension-static-size-1000: 80px;
-    --spectrum-global-dimension-static-size-1200: 96px;
-    --spectrum-global-dimension-static-size-1700: 136px;
-    --spectrum-global-dimension-static-size-2400: 192px;
-    --spectrum-global-dimension-static-size-2500: 200px;
-    --spectrum-global-dimension-static-size-2600: 208px;
-    --spectrum-global-dimension-static-size-2800: 224px;
-    --spectrum-global-dimension-static-size-3200: 256px;
-    --spectrum-global-dimension-static-size-3400: 272px;
-    --spectrum-global-dimension-static-size-3500: 280px;
-    --spectrum-global-dimension-static-size-3600: 288px;
-    --spectrum-global-dimension-static-size-3800: 304px;
-    --spectrum-global-dimension-static-size-4600: 368px;
-    --spectrum-global-dimension-static-size-5000: 400px;
-    --spectrum-global-dimension-static-size-6000: 480px;
-    --spectrum-global-dimension-static-size-16000: 1280px;
-    --spectrum-global-dimension-static-font-size-50: 11px;
-    --spectrum-global-dimension-static-font-size-75: 12px;
-    --spectrum-global-dimension-static-font-size-100: 14px;
-    --spectrum-global-dimension-static-font-size-150: 15px;
-    --spectrum-global-dimension-static-font-size-200: 16px;
-    --spectrum-global-dimension-static-font-size-300: 18px;
-    --spectrum-global-dimension-static-font-size-400: 20px;
-    --spectrum-global-dimension-static-font-size-500: 22px;
-    --spectrum-global-dimension-static-font-size-600: 25px;
-    --spectrum-global-dimension-static-font-size-700: 28px;
-    --spectrum-global-dimension-static-font-size-800: 32px;
-    --spectrum-global-dimension-static-font-size-900: 36px;
-    --spectrum-global-dimension-static-font-size-1000: 40px;
-    --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-global-font-family-serif: adobe-clean-serif, "Source Serif Pro", Georgia, serif;
-    --spectrum-global-font-family-code: "Source Code Pro", Monaco, monospace;
-    --spectrum-global-font-weight-thin: 100;
-    --spectrum-global-font-weight-ultra-light: 200;
-    --spectrum-global-font-weight-light: 300;
-    --spectrum-global-font-weight-regular: 400;
-    --spectrum-global-font-weight-medium: 500;
-    --spectrum-global-font-weight-semi-bold: 600;
-    --spectrum-global-font-weight-bold: 700;
-    --spectrum-global-font-weight-extra-bold: 800;
-    --spectrum-global-font-weight-black: 900;
-    --spectrum-global-font-style-regular: normal;
-    --spectrum-global-font-style-italic: italic;
-    --spectrum-global-font-letter-spacing-none: 0;
-    --spectrum-global-font-letter-spacing-small: 0.0125em;
-    --spectrum-global-font-letter-spacing-han: 0.05em;
-    --spectrum-global-font-letter-spacing-medium: 0.06em;
-    --spectrum-global-font-line-height-large: 1.7;
-    --spectrum-global-font-line-height-medium: 1.5;
-    --spectrum-global-font-line-height-small: 1.3;
-    --spectrum-global-font-multiplier-0: 0em;
-    --spectrum-global-font-multiplier-25: 0.25em;
-    --spectrum-global-font-multiplier-75: 0.75em;
-    --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", "sans-serif";
-    --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, "SimSun", "Heiti SC Light", "sans-serif";
-    --spectrum-global-font-font-family-ko: adobe-clean-han-korean, source-han-korean, "Malgun Gothic", "Apple Gothic", "sans-serif";
-    --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
-    --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550);
-    --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-loupe-entry-animation-duration: var(--spectrum-global-animation-duration-300);
-    --spectrum-alias-loupe-exit-animation-duration: var(--spectrum-global-animation-duration-300);
-    --spectrum-alias-heading-text-line-height: var(--spectrum-global-font-line-height-small);
-    --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-light: var(--spectrum-global-font-weight-light);
-    --spectrum-alias-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-light);
-    --spectrum-alias-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-strong-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-margin-bottom: var(--spectrum-global-font-multiplier-25);
-    --spectrum-alias-subheading-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base);
-    --spectrum-alias-body-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-body-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-body-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-body-margin-bottom: var(--spectrum-global-font-multiplier-75);
-    --spectrum-alias-detail-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-detail-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-detail-text-font-weight-light: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-heading-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-article-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-article-body-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-article-body-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-subheading-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-article-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-article-detail-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-code-text-font-family: var(--spectrum-global-font-family-code);
-    --spectrum-alias-code-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-code-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-code-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0);
-    --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar);
-    --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he);
-    --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh);
-    --spectrum-alias-font-family-zhhans: var(--spectrum-global-font-font-family-zhhans);
-    --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko);
-    --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja);
-    --spectrum-alias-font-family-condensed: var(--spectrum-global-font-font-family-condensed);
-    --spectrum-alias-button-text-line-height: var(--spectrum-global-font-line-height-small);
-    --spectrum-alias-component-text-line-height: var(--spectrum-global-font-line-height-small);
-    --spectrum-alias-han-component-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-serif-text-font-family: var(--spectrum-global-font-family-serif);
-    --spectrum-alias-han-heading-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-han-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(--spectrum-global-font-weight-extra-bold);
-    --spectrum-alias-han-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-heading-text-font-weight-light: var(--spectrum-global-font-weight-light);
-    --spectrum-alias-han-heading-text-font-weight-light-emphasis: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-han-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-body-text-line-height: var(--spectrum-global-font-line-height-large);
-    --spectrum-alias-han-body-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-han-body-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-body-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-subheading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-subheading-text-font-weight-emphasis: var(--spectrum-global-font-weight-extra-bold);
-    --spectrum-alias-han-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-}
-
-:root,
-:host {
-    --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600);
-    --spectrum-alias-item-rounded-border-radius-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-rounded-border-radius-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-rounded-border-radius-l: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-item-rounded-border-radius-xl: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-item-text-size-s: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-item-text-size-m: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-item-text-size-l: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-item-text-size-xl: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-item-text-padding-top-s: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-item-text-padding-top-m: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-text-padding-top-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-text-padding-bottom-m: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-text-padding-bottom-l: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-text-padding-bottom-xl: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-icon-padding-top-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-icon-padding-top-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-icon-padding-top-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-icon-padding-top-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-icon-padding-bottom-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-icon-padding-bottom-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-icon-padding-bottom-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-icon-padding-bottom-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-rounded-padding-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-rounded-padding-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-rounded-padding-l: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-item-rounded-padding-xl: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-item-icononly-padding-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-icononly-padding-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-icononly-padding-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-icononly-padding-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-control-gap-s: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-gap-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-gap-l: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-control-gap-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-workflow-icon-gap-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-workflow-icon-gap-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-workflow-icon-gap-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-workflow-icon-gap-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-ui-icon-gap-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-ui-icon-gap-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-ui-icon-gap-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-clearbutton-gap-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-clearbutton-gap-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-clearbutton-gap-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-clearbutton-gap-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-workflow-padding-left-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-workflow-padding-left-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-workflow-padding-left-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-rounded-workflow-padding-left-s: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-rounded-workflow-padding-left-l: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-mark-padding-top-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-item-mark-padding-top-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-mark-padding-top-xl: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-mark-padding-bottom-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-item-mark-padding-bottom-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-mark-padding-bottom-xl: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-mark-padding-left-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-mark-padding-left-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-mark-padding-left-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-control-1-size-s: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-item-control-1-size-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-control-2-size-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-control-2-size-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-control-2-size-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-control-2-size-xxl: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-item-control-2-border-radius-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-2-border-radius-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-control-2-border-radius-l: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-control-2-border-radius-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-2-border-radius-xxl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-2-padding-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-2-padding-m: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-2-padding-l: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-2-padding-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-control-3-height-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-control-3-height-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-control-3-height-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-control-3-border-radius-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-3-border-radius-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-control-3-border-radius-l: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-control-3-border-radius-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-3-padding-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-3-padding-m: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-3-padding-l: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-3-padding-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-heading-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300);
-    --spectrum-alias-heading-xxl-text-size: var(--spectrum-global-dimension-font-size-1100);
-    --spectrum-alias-heading-xl-text-size: var(--spectrum-global-dimension-font-size-900);
-    --spectrum-alias-heading-l-text-size: var(--spectrum-global-dimension-font-size-700);
-    --spectrum-alias-heading-m-text-size: var(--spectrum-global-dimension-font-size-500);
-    --spectrum-alias-heading-s-text-size: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-heading-xs-text-size: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-xxs-text-size: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200);
-    --spectrum-alias-heading-xxl-margin-top: var(--spectrum-global-dimension-font-size-900);
-    --spectrum-alias-heading-xl-margin-top: var(--spectrum-global-dimension-font-size-800);
-    --spectrum-alias-heading-l-margin-top: var(--spectrum-global-dimension-font-size-600);
-    --spectrum-alias-heading-m-margin-top: var(--spectrum-global-dimension-font-size-400);
-    --spectrum-alias-heading-s-margin-top: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-xs-margin-top: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-xxs-margin-top: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-heading-han-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300);
-    --spectrum-alias-heading-han-xxl-text-size: var(--spectrum-global-dimension-font-size-900);
-    --spectrum-alias-heading-han-xl-text-size: var(--spectrum-global-dimension-font-size-800);
-    --spectrum-alias-heading-han-l-text-size: var(--spectrum-global-dimension-font-size-600);
-    --spectrum-alias-heading-han-m-text-size: var(--spectrum-global-dimension-font-size-400);
-    --spectrum-alias-heading-han-s-text-size: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-heading-han-xs-text-size: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-han-xxs-text-size: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-han-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200);
-    --spectrum-alias-heading-han-xxl-margin-top: var(--spectrum-global-dimension-font-size-800);
-    --spectrum-alias-heading-han-xl-margin-top: var(--spectrum-global-dimension-font-size-700);
-    --spectrum-alias-heading-han-l-margin-top: var(--spectrum-global-dimension-font-size-500);
-    --spectrum-alias-heading-han-m-margin-top: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-heading-han-s-margin-top: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-han-xs-margin-top: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-han-xxs-margin-top: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-component-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-component-border-radius-quiet: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-component-focusring-gap: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-component-focusring-gap-emphasized: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-component-focusring-size: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-component-focusring-size-emphasized: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-input-border-size: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-input-focusring-gap: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-input-quiet-focusline-gap: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-control-two-size-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-control-two-size-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-control-two-size-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-control-two-size-xxl: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-control-two-border-radius-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-control-two-border-radius-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-control-two-border-radius-l: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-control-two-border-radius-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-control-two-border-radius-xxl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-control-two-focus-ring-border-radius-s: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-control-two-focus-ring-border-radius-m: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-control-two-focus-ring-border-radius-l: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-control-two-focus-ring-border-radius-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-control-two-focus-ring-border-radius-xxl: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-control-three-height-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-control-three-height-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-control-three-height-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-infieldbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-infieldbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-infieldbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-infieldbutton-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-border-radius-sided: 0;
-    --spectrum-alias-infieldbutton-border-size: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-infieldbutton-fill-padding-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-fill-padding-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-infieldbutton-fill-padding-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-infieldbutton-fill-padding-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-infieldbutton-padding-s: 0;
-    --spectrum-alias-infieldbutton-padding-m: 0;
-    --spectrum-alias-infieldbutton-padding-l: 0;
-    --spectrum-alias-infieldbutton-padding-xl: 0;
-    --spectrum-alias-infieldbutton-full-height-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-infieldbutton-full-height-m: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-infieldbutton-full-height-l: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-infieldbutton-full-height-xl: var(--spectrum-global-dimension-size-600);
-    --spectrum-alias-infieldbutton-half-height-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-infieldbutton-half-height-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-infieldbutton-half-height-l: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-infieldbutton-half-height-xl: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-stepperbutton-gap: 0;
-    --spectrum-alias-stepperbutton-width-s: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-stepperbutton-width-m: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-stepperbutton-width-l: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-stepperbutton-width-xl: var(--spectrum-global-dimension-size-450);
-    --spectrum-alias-stepperbutton-icon-x-offset-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-stepperbutton-icon-x-offset-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-stepperbutton-icon-x-offset-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-stepperbutton-icon-x-offset-xl: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-s: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-m: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-l: var(--spectrum-global-dimension-size-65);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-stepperbutton-radius-touching: 0;
-    --spectrum-alias-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-clearbutton-icon-margin-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-clearbutton-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-pickerbutton-icononly-padding-x-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-pickerbutton-icononly-padding-x-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-pickerbutton-icononly-padding-x-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-pickerbutton-icononly-padding-x-xl: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-pickerbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-pickerbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-pickerbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-pickerbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-pickerbutton-label-padding-y-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-pickerbutton-label-padding-y-m: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-pickerbutton-label-padding-y-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-pickerbutton-label-padding-y-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-pickerbutton-border-radius-rounded: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0;
-    --spectrum-alias-search-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-search-border-radius-quiet: 0;
-    --spectrum-alias-combobox-quiet-button-offset-x: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-thumbnail-border-radius-small: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-actiongroup-button-gap: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-actiongroup-button-gap-compact: var(--spectrum-global-dimension-size-0);
-    --spectrum-alias-actiongroup-button-gap-quiet: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-actiongroup-button-gap-quiet-compact: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-search-padding-left-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-search-padding-left-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-search-padding-left-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-percent-50: 50%;
-    --spectrum-alias-percent-70: 70%;
-    --spectrum-alias-percent-100: 100%;
-    --spectrum-alias-breakpoint-xsmall: 304px;
-    --spectrum-alias-breakpoint-small: 768px;
-    --spectrum-alias-breakpoint-medium: 1280px;
-    --spectrum-alias-breakpoint-large: 1768px;
-    --spectrum-alias-breakpoint-xlarge: 2160px;
-    --spectrum-alias-grid-columns: 12;
-    --spectrum-alias-grid-fluid-width: 100%;
-    --spectrum-alias-grid-fixed-max-width: 1280px;
-    --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550);
-    --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-focus-ring-gap-small: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-focus-ring-size-small: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-dropshadow-offset-y: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-font-size-default: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-layout-label-gap-size: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-pill-button-text-size: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-pill-button-text-baseline: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-border-radius-xsmall: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-border-radius-medium: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-border-radius-large: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-border-radius-xlarge: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-focus-ring-border-radius-xsmall: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-focus-ring-border-radius-small: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-focus-ring-border-radius-medium: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-focus-ring-border-radius-large: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-focus-ring-border-radius-xlarge: var(--spectrum-global-dimension-size-350);
-    --spectrum-alias-single-line-height: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-single-line-width: var(--spectrum-global-dimension-size-2400);
-    --spectrum-alias-workflow-icon-size-s: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-workflow-icon-size-m: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-workflow-icon-size-xl: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-ui-icon-alert-size-75: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-ui-icon-alert-size-100: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-ui-icon-alert-size-200: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-ui-icon-alert-size-300: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-ui-icon-triplegripper-size-100-height: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-ui-icon-doublegripper-size-100-width: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-ui-icon-singlegripper-size-100-width: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-ui-icon-cornertriangle-size-75: var(--spectrum-global-dimension-size-65);
-    --spectrum-alias-ui-icon-cornertriangle-size-200: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-ui-icon-asterisk-size-75: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-asterisk-size-100: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-avatar-border-size: var(--spectrum-global-dimension-size-0);
-    --spectrum-alias-tag-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-tag-border-size-default: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-tag-border-size-key-focus: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-tag-border-size-disabled: var(--spectrum-global-dimension-size-0);
-    --spectrum-alias-tag-border-size: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-tag-padding-right-s: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-tag-padding-right-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-tag-padding-right-l: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-tag-font-size-s: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-tag-font-size-m: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-tag-font-size-l: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-tag-text-padding-top-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-tag-text-padding-top-m: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-tag-text-padding-top-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-tag-icon-margin-top-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-tag-icon-margin-top-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-tag-icon-margin-top-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-tag-icon-margin-right-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-tag-icon-margin-right-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-tag-icon-margin-right-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-tag-clearbutton-width-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-tag-clearbutton-width-m: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-tag-clearbutton-width-l: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-tag-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-tag-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-tag-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-tag-focusring-gap: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-800);
-}
-
-:root,
-:host {
-    --spectrum-alias-colorhandle-outer-border-color: #0000006b;
-    --spectrum-alias-transparent-blue-background-color-hover: #0057be26;
-    --spectrum-alias-transparent-blue-background-color-down: #0048994d;
-    --spectrum-alias-transparent-blue-background-color-key-focus: var(--spectrum-alias-transparent-blue-background-color-hover);
-    --spectrum-alias-transparent-blue-background-color-mouse-focus: var(--spectrum-alias-transparent-blue-background-color-hover);
-    --spectrum-alias-transparent-blue-background-color: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-transparent-red-background-color-hover: #9a000026;
-    --spectrum-alias-transparent-red-background-color-down: #7c00004d;
-    --spectrum-alias-transparent-red-background-color-key-focus: var(--spectrum-alias-transparent-red-background-color-hover);
-    --spectrum-alias-transparent-red-background-color-mouse-focus: var(--spectrum-alias-transparent-red-background-color-hover);
-    --spectrum-alias-transparent-red-background-color: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-component-text-color-disabled: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-component-text-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-component-text-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-component-text-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-component-text-color-key-focus: var(--spectrum-alias-component-text-color-hover);
-    --spectrum-alias-component-text-color-mouse-focus: var(--spectrum-alias-component-text-color-hover);
-    --spectrum-alias-component-text-color: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-component-text-color-selected-default: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-component-text-color-selected-hover: var(--spectrum-alias-component-text-color-hover);
-    --spectrum-alias-component-text-color-selected-down: var(--spectrum-alias-component-text-color-down);
-    --spectrum-alias-component-text-color-selected-key-focus: var(--spectrum-alias-component-text-color-key-focus);
-    --spectrum-alias-component-text-color-selected-mouse-focus: var(--spectrum-alias-component-text-color-mouse-focus);
-    --spectrum-alias-component-text-color-selected: var(--spectrum-alias-component-text-color-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-default: var(--spectrum-global-color-static-white);
-    --spectrum-alias-component-text-color-emphasized-selected-hover: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-down: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-key-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-error-default: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-component-text-color-error-hover: var(--spectrum-semantic-negative-text-color-small-hover);
-    --spectrum-alias-component-text-color-error-down: var(--spectrum-semantic-negative-text-color-small-down);
-    --spectrum-alias-component-text-color-error-key-focus: var(--spectrum-semantic-negative-text-color-small-key-focus);
-    --spectrum-alias-component-text-color-error-mouse-focus: var(--spectrum-semantic-negative-text-color-small-key-focus);
-    --spectrum-alias-component-text-color-error: var(--spectrum-alias-component-text-color-error-default);
-    --spectrum-alias-component-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
-    --spectrum-alias-component-icon-color-default: var(--spectrum-alias-icon-color);
-    --spectrum-alias-component-icon-color-hover: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-component-icon-color-down: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-component-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-component-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-component-icon-color: var(--spectrum-alias-component-icon-color-default);
-    --spectrum-alias-component-icon-color-selected: var(--spectrum-alias-icon-color-selected-neutral-subdued);
-    --spectrum-alias-component-icon-color-emphasized-selected-default: var(--spectrum-global-color-static-white);
-    --spectrum-alias-component-icon-color-emphasized-selected-hover: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-icon-color-emphasized-selected-down: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-icon-color-emphasized-selected: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-background-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-quiet-disabled: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet-selected-disabled: var(--spectrum-alias-component-background-color-disabled);
-    --spectrum-alias-component-background-color-default: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-component-background-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-component-background-color-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-component-background-color: var(--spectrum-alias-component-background-color-default);
-    --spectrum-alias-component-background-color-selected-default: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-selected-hover: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-selected-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-selected-key-focus: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-selected: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-background-color-quiet-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet-hover: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet-down: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-component-background-color-quiet-key-focus: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet: var(--spectrum-alias-component-background-color-quiet-default);
-    --spectrum-alias-component-background-color-quiet-selected-default: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-background-color-quiet-selected-hover: var(--spectrum-alias-component-background-color-selected-hover);
-    --spectrum-alias-component-background-color-quiet-selected-down: var(--spectrum-alias-component-background-color-selected-down);
-    --spectrum-alias-component-background-color-quiet-selected-key-focus: var(--spectrum-alias-component-background-color-selected-key-focus);
-    --spectrum-alias-component-background-color-quiet-selected: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-background-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default);
-    --spectrum-alias-component-background-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover);
-    --spectrum-alias-component-background-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down);
-    --spectrum-alias-component-background-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus);
-    --spectrum-alias-component-background-color-emphasized-selected: var(--spectrum-alias-component-background-color-emphasized-selected-default);
-    --spectrum-alias-component-border-color-disabled: var(--spectrum-alias-border-color-disabled);
-    --spectrum-alias-component-border-color-quiet-disabled: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-default: var(--spectrum-alias-border-color);
-    --spectrum-alias-component-border-color-hover: var(--spectrum-alias-border-color-hover);
-    --spectrum-alias-component-border-color-down: var(--spectrum-alias-border-color-down);
-    --spectrum-alias-component-border-color-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-component-border-color: var(--spectrum-alias-component-border-color-default);
-    --spectrum-alias-component-border-color-selected-default: var(--spectrum-alias-border-color);
-    --spectrum-alias-component-border-color-selected-hover: var(--spectrum-alias-border-color-hover);
-    --spectrum-alias-component-border-color-selected-down: var(--spectrum-alias-border-color-down);
-    --spectrum-alias-component-border-color-selected-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-component-border-color-selected: var(--spectrum-alias-component-border-color-selected-default);
-    --spectrum-alias-component-border-color-quiet-default: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-quiet-hover: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-quiet-down: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-quiet-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-component-border-color-quiet: var(--spectrum-alias-component-border-color-quiet-default);
-    --spectrum-alias-component-border-color-quiet-selected-default: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-border-color-quiet-selected-hover: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-border-color-quiet-selected-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-border-color-quiet-selected-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-component-border-color-quiet-selected: var(--spectrum-alias-component-border-color-quiet-selected-default);
-    --spectrum-alias-component-border-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default);
-    --spectrum-alias-component-border-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover);
-    --spectrum-alias-component-border-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down);
-    --spectrum-alias-component-border-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus);
-    --spectrum-alias-component-border-color-emphasized-selected: var(--spectrum-alias-component-border-color-emphasized-selected-default);
-    --spectrum-alias-tag-border-color-default: var(--spectrum-alias-border-color-darker-default);
-    --spectrum-alias-tag-border-color-hover: var(--spectrum-alias-border-color-darker-hover);
-    --spectrum-alias-tag-border-color-down: var(--spectrum-alias-border-color-darker-hover);
-    --spectrum-alias-tag-border-color-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-tag-border-color-error-default: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-border-color-error-hover: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-border-color-error-down: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-border-color-error-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-tag-border-color-error-selected: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-border-color-selected: var(--spectrum-alias-tag-background-color-selected-default);
-    --spectrum-alias-tag-border-color: var(--spectrum-alias-tag-border-color-default);
-    --spectrum-alias-tag-border-color-disabled: var(--spectrum-alias-border-color-disabled);
-    --spectrum-alias-tag-border-color-error: var(--spectrum-alias-tag-border-color-error-default);
-    --spectrum-alias-tag-text-color-default: var(--spectrum-alias-label-text-color);
-    --spectrum-alias-tag-text-color-hover: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down);
-    --spectrum-alias-tag-text-color-key-focus: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tag-text-color-disabled: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-tag-text-color: var(--spectrum-alias-tag-text-color-default);
-    --spectrum-alias-tag-text-color-error-default: var(--spectrum-global-color-red-600);
-    --spectrum-alias-tag-text-color-error-hover: var(--spectrum-global-color-red-700);
-    --spectrum-alias-tag-text-color-error-down: var(--spectrum-global-color-red-700);
-    --spectrum-alias-tag-text-color-error-key-focus: var(--spectrum-global-color-red-700);
-    --spectrum-alias-tag-text-color-error: var(--spectrum-alias-tag-text-color-error-default);
-    --spectrum-alias-tag-text-color-selected: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color);
-    --spectrum-alias-tag-icon-color-hover: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-tag-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tag-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
-    --spectrum-alias-tag-icon-color: var(--spectrum-alias-tag-icon-color-default);
-    --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600);
-    --spectrum-alias-tag-icon-color-selected: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-tag-background-color-default: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-tag-background-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color: var(--spectrum-alias-tag-background-color-default);
-    --spectrum-alias-tag-background-color-error-default: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-error-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-error-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-tag-background-color-error-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-error: var(--spectrum-alias-tag-background-color-error-default);
-    --spectrum-alias-tag-background-color-error-selected-default: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-background-color-error-selected-hover: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-background-color-error-selected-down: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-background-color-error-selected-key-focus: var(--spectrum-global-color-red-600);
-    --spectrum-alias-tag-background-color-error-selected: var(--spectrum-alias-tag-background-color-error-selected-default);
-    --spectrum-alias-tag-background-color-selected-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-tag-background-color-selected-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-tag-background-color-selected-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tag-background-color-selected-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tag-background-color-selected: var(--spectrum-alias-tag-background-color-selected-default);
-    --spectrum-alias-tag-focusring-border-color-default: transparent;
-    --spectrum-alias-tag-focusring-border-color-key-focus: transparent;
-    --spectrum-alias-tag-focusring-border-color-disabled: transparent;
-    --spectrum-alias-tag-focusring-border-color-selected-key-focus: var(--spectrum-alias-focus-ring-color);
-    --spectrum-alias-tag-focusring-border-color: var(--spectrum-alias-tag-focusring-border-color-default);
-    --spectrum-alias-avatar-border-color-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-hover: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-down: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-key-focus: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color: var(--spectrum-alias-avatar-border-color-default);
-    --spectrum-alias-avatar-border-color-disabled: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected-hover: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected-down: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected-key-focus: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected: var(--spectrum-alias-avatar-border-color-selected-default);
-    --spectrum-alias-avatar-border-color-selected-disabled: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-toggle-background-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-toggle-background-color-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-background-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-toggle-background-color-key-focus: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-background-color: var(--spectrum-alias-toggle-background-color-default);
-    --spectrum-alias-toggle-background-color-emphasized-selected-default: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-toggle-background-color-emphasized-selected-hover: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-toggle-background-color-emphasized-selected-down: var(--spectrum-global-color-blue-700);
-    --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-toggle-background-color-emphasized-selected: var(--spectrum-alias-toggle-background-color-emphasized-selected-default);
-    --spectrum-alias-toggle-border-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-toggle-border-color-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-border-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-toggle-border-color-key-focus: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-border-color: var(--spectrum-alias-toggle-border-color-default);
-    --spectrum-alias-toggle-icon-color-selected: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-toggle-icon-color-emphasized-selected: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-button-primary-background-color-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-button-primary-background-color-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-background-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-button-primary-background-color-key-focus: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-background-color: var(--spectrum-alias-button-primary-background-color-default);
-    --spectrum-alias-button-primary-border-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-border-color-hover: var(--spectrum-alias-button-primary-background-color-hover);
-    --spectrum-alias-button-primary-border-color-down: var(--spectrum-alias-button-primary-background-color-down);
-    --spectrum-alias-button-primary-border-color-key-focus: var(--spectrum-alias-button-primary-background-color-key-focus);
-    --spectrum-alias-button-primary-border-color: var(--spectrum-alias-button-primary-border-color-default);
-    --spectrum-alias-button-primary-text-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-text-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-primary-text-color-down: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-primary-text-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-primary-text-color: var(--spectrum-alias-button-primary-text-color-default);
-    --spectrum-alias-button-primary-icon-color-default: var(--spectrum-alias-button-primary-text-color-default);
-    --spectrum-alias-button-primary-icon-color-hover: var(--spectrum-alias-button-primary-text-color-hover);
-    --spectrum-alias-button-primary-icon-color-down: var(--spectrum-alias-button-primary-text-color-down);
-    --spectrum-alias-button-primary-icon-color-key-focus: var(--spectrum-alias-button-primary-text-color-key-focus);
-    --spectrum-alias-button-primary-icon-color: var(--spectrum-alias-button-primary-icon-color-default);
-    --spectrum-alias-button-secondary-background-color-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-button-secondary-background-color-hover: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-background-color-down: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-secondary-background-color-key-focus: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-background-color: var(--spectrum-alias-button-secondary-background-color-default);
-    --spectrum-alias-button-secondary-border-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-border-color-hover: var(--spectrum-alias-button-secondary-background-color-hover);
-    --spectrum-alias-button-secondary-border-color-down: var(--spectrum-alias-button-secondary-background-color-down);
-    --spectrum-alias-button-secondary-border-color-key-focus: var(--spectrum-alias-button-secondary-background-color-key-focus);
-    --spectrum-alias-button-secondary-border-color: var(--spectrum-alias-button-secondary-border-color-default);
-    --spectrum-alias-button-secondary-text-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-text-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-secondary-text-color-down: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-secondary-text-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-secondary-text-color: var(--spectrum-alias-button-secondary-text-color-default);
-    --spectrum-alias-button-secondary-icon-color-default: var(--spectrum-alias-button-secondary-text-color-default);
-    --spectrum-alias-button-secondary-icon-color-hover: var(--spectrum-alias-button-secondary-text-color-hover);
-    --spectrum-alias-button-secondary-icon-color-down: var(--spectrum-alias-button-secondary-text-color-down);
-    --spectrum-alias-button-secondary-icon-color-key-focus: var(--spectrum-alias-button-secondary-text-color-key-focus);
-    --spectrum-alias-button-secondary-icon-color: var(--spectrum-alias-button-secondary-icon-color-default);
-    --spectrum-alias-button-negative-background-color-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-button-negative-background-color-hover: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-background-color-down: var(--spectrum-global-color-red-700);
-    --spectrum-alias-button-negative-background-color-key-focus: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-background-color: var(--spectrum-alias-button-negative-background-color-default);
-    --spectrum-alias-button-negative-border-color-default: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-border-color-hover: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-border-color-down: var(--spectrum-global-color-red-700);
-    --spectrum-alias-button-negative-border-color-key-focus: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-border-color: var(--spectrum-alias-button-negative-border-color-default);
-    --spectrum-alias-button-negative-text-color-default: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-text-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-negative-text-color-down: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-negative-text-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-negative-text-color: var(--spectrum-alias-button-negative-text-color-default);
-    --spectrum-alias-button-negative-icon-color-default: var(--spectrum-alias-button-negative-text-color-default);
-    --spectrum-alias-button-negative-icon-color-hover: var(--spectrum-alias-button-negative-text-color-hover);
-    --spectrum-alias-button-negative-icon-color-down: var(--spectrum-alias-button-negative-text-color-down);
-    --spectrum-alias-button-negative-icon-color-key-focus: var(--spectrum-alias-button-negative-text-color-key-focus);
-    --spectrum-alias-button-negative-icon-color: var(--spectrum-alias-button-negative-icon-color-default);
-    --spectrum-alias-input-border-color-disabled: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-input-border-color-quiet-disabled: var(--spectrum-alias-border-color-mid);
-    --spectrum-alias-input-border-color-default: var(--spectrum-alias-border-color);
-    --spectrum-alias-input-border-color-hover: var(--spectrum-alias-border-color-hover);
-    --spectrum-alias-input-border-color-down: var(--spectrum-alias-border-color-mouse-focus);
-    --spectrum-alias-input-border-color-mouse-focus: var(--spectrum-alias-border-color-mouse-focus);
-    --spectrum-alias-input-border-color-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-input-border-color: var(--spectrum-alias-input-border-color-default);
-    --spectrum-alias-input-border-color-invalid-default: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-input-border-color-invalid-hover: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-input-border-color-invalid-down: var(--spectrum-semantic-negative-color-down);
-    --spectrum-alias-input-border-color-invalid-mouse-focus: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-input-border-color-invalid-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-input-border-color-invalid: var(--spectrum-alias-input-border-color-invalid-default);
-    --spectrum-alias-background-color-yellow-default: var(--spectrum-global-color-static-yellow-300);
-    --spectrum-alias-background-color-yellow-hover: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-alias-background-color-yellow-key-focus: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-alias-background-color-yellow-down: var(--spectrum-global-color-static-yellow-500);
-    --spectrum-alias-background-color-yellow: var(--spectrum-alias-background-color-yellow-default);
-    --spectrum-alias-infieldbutton-background-color: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var(--spectrum-alias-component-background-color-disabled);
-    --spectrum-alias-infieldbutton-fill-border-color-default: var(--spectrum-alias-input-border-color-default);
-    --spectrum-alias-infieldbutton-fill-border-color-hover: var(--spectrum-alias-input-border-color-hover);
-    --spectrum-alias-infieldbutton-fill-border-color-down: var(--spectrum-alias-input-border-color-down);
-    --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var(--spectrum-alias-input-border-color-mouse-focus);
-    --spectrum-alias-infieldbutton-fill-border-color-key-focus: var(--spectrum-alias-input-border-color-key-focus);
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var(--spectrum-alias-component-background-color-default);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var(--spectrum-alias-component-background-color-hover);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var(--spectrum-alias-component-background-color-down);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var(--spectrum-alias-component-background-color-key-focus);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(--spectrum-alias-component-background-color-disabled);
-    --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006;
-    --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c;
-    --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040;
-    --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3;
-    --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006;
-    --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c;
-    --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040;
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040;
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a;
-    --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6;
-    --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent;
-    --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c;
-    --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40;
-    --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3;
-    --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6;
-    --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c;
-    --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40;
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40;
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a;
-    --spectrum-alias-tabs-divider-background-color-default: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-tabs-divider-background-color-quiet: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-tabitem-text-color-default: var(--spectrum-alias-label-text-color);
-    --spectrum-alias-tabitem-text-color-hover: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tabitem-text-color-down: var(--spectrum-alias-text-color-down);
-    --spectrum-alias-tabitem-text-color-key-focus: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tabitem-text-color-mouse-focus: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tabitem-text-color: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-text-color-selected-default: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tabitem-text-color-selected-hover: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected-down: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected-key-focus: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-default: var(--spectrum-global-color-static-blue-500);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-down: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-selection-indicator-color-default: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-selection-indicator-color-emphasized: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-icon-color-disabled: var(--spectrum-alias-text-color-disabled);
-    --spectrum-alias-tabitem-icon-color-default: var(--spectrum-alias-icon-color);
-    --spectrum-alias-tabitem-icon-color-hover: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tabitem-icon-color-down: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-tabitem-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tabitem-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-tabitem-icon-color: var(--spectrum-alias-tabitem-icon-color-default);
-    --spectrum-alias-tabitem-icon-color-selected: var(--spectrum-alias-icon-color-selected-neutral);
-    --spectrum-alias-tabitem-icon-color-emphasized: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-icon-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a;
-    --spectrum-alias-assetcard-border-color-selected: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-assetcard-border-color-selected-hover: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-assetcard-border-color-selected-down: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-background-color-default: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-background-color-transparent: transparent;
-    --spectrum-alias-background-color-overbackground-down: #fff3;
-    --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a;
-    --spectrum-alias-background-color-quiet-overbackground-down: #fff3;
-    --spectrum-alias-background-color-overbackground-disabled: #ffffff1a;
-    --spectrum-alias-background-color-quickactions-overlay: #0003;
-    --spectrum-alias-placeholder-text-color: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-placeholder-text-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-placeholder-text-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-placeholder-text-color-selected: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-text-color: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-text-color-mouse-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500);
-    --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-text-color-selected-neutral: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-text-color-overbackground: var(--spectrum-global-color-static-white);
-    --spectrum-alias-text-color-overbackground-disabled: #fff3;
-    --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3;
-    --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-link-primary-text-color-default: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-link-primary-text-color-hover: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-link-primary-text-color-down: var(--spectrum-global-color-blue-700);
-    --spectrum-alias-link-primary-text-color-key-focus: var(--spectrum-alias-text-color-key-focus);
-    --spectrum-alias-link-primary-text-color: var(--spectrum-alias-link-primary-text-color-default);
-    --spectrum-alias-link-secondary-text-color-default: var(--spectrum-alias-link-primary-text-color-default);
-    --spectrum-alias-link-secondary-text-color-hover: var(--spectrum-alias-link-primary-text-color-hover);
-    --spectrum-alias-link-secondary-text-color-down: var(--spectrum-alias-link-primary-text-color-down);
-    --spectrum-alias-link-secondary-text-color-key-focus: var(--spectrum-alias-link-primary-text-color-key-focus);
-    --spectrum-alias-link-secondary-text-color: var(--spectrum-alias-link-secondary-text-color-default);
-    --spectrum-alias-border-color: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-border-color-key-focus: var(--spectrum-global-color-blue-400);
-    --spectrum-alias-border-color-mouse-focus: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-border-color-extralight: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-border-color-darker-default: var(--spectrum-global-color-gray-600);
-    --spectrum-alias-border-color-darker-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-border-color-darker-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-border-color-transparent: transparent;
-    --spectrum-alias-border-color-translucent-dark: #0000000d;
-    --spectrum-alias-border-color-translucent-darker: #0000001a;
-    --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400);
-    --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color);
-    --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-track-fill-color-overbackground: var(--spectrum-global-color-static-white);
-    --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-thumbnail-darksquare-background-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-thumbnail-lightsquare-background-color: var(--spectrum-global-color-static-white);
-    --spectrum-alias-track-color-overbackground: #fff3;
-    --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-icon-color-overbackground: var(--spectrum-global-color-static-white);
-    --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-icon-color-overbackground-disabled: #fff3;
-    --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26;
-    --spectrum-alias-icon-color-selected-neutral: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-selected-neutral-subdued: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-icon-color-selected-hover: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-icon-color-selected-down: var(--spectrum-global-color-blue-700);
-    --spectrum-alias-icon-color-selected-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-image-opacity-disabled: var(--spectrum-global-color-opacity-30);
-    --spectrum-alias-toolbar-background-color: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-code-highlight-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-code-highlight-background-color: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-code-highlight-color-keyword: var(--spectrum-global-color-fuchsia-600);
-    --spectrum-alias-code-highlight-color-section: var(--spectrum-global-color-red-600);
-    --spectrum-alias-code-highlight-color-literal: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-code-highlight-color-attribute: var(--spectrum-global-color-seafoam-600);
-    --spectrum-alias-code-highlight-color-class: var(--spectrum-global-color-magenta-600);
-    --spectrum-alias-code-highlight-color-variable: var(--spectrum-global-color-purple-600);
-    --spectrum-alias-code-highlight-color-title: var(--spectrum-global-color-indigo-600);
-    --spectrum-alias-code-highlight-color-string: var(--spectrum-global-color-fuchsia-600);
-    --spectrum-alias-code-highlight-color-function: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-code-highlight-color-comment: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-categorical-color-1: var(--spectrum-global-color-static-seafoam-200);
-    --spectrum-alias-categorical-color-2: var(--spectrum-global-color-static-indigo-700);
-    --spectrum-alias-categorical-color-3: var(--spectrum-global-color-static-orange-500);
-    --spectrum-alias-categorical-color-4: var(--spectrum-global-color-static-magenta-500);
-    --spectrum-alias-categorical-color-5: var(--spectrum-global-color-static-indigo-200);
-    --spectrum-alias-categorical-color-6: var(--spectrum-global-color-static-celery-200);
-    --spectrum-alias-categorical-color-7: var(--spectrum-global-color-static-blue-500);
-    --spectrum-alias-categorical-color-8: var(--spectrum-global-color-static-purple-800);
-    --spectrum-alias-categorical-color-9: var(--spectrum-global-color-static-yellow-500);
-    --spectrum-alias-categorical-color-10: var(--spectrum-global-color-static-orange-700);
-    --spectrum-alias-categorical-color-11: var(--spectrum-global-color-static-green-600);
-    --spectrum-alias-categorical-color-12: var(--spectrum-global-color-static-chartreuse-300);
-    --spectrum-alias-categorical-color-13: var(--spectrum-global-color-static-blue-200);
-    --spectrum-alias-categorical-color-14: var(--spectrum-global-color-static-fuchsia-500);
-    --spectrum-alias-categorical-color-15: var(--spectrum-global-color-static-magenta-200);
-    --spectrum-alias-categorical-color-16: var(--spectrum-global-color-static-yellow-200);
-}
diff --git a/tools/styles/spectrum-scale-large.css b/tools/styles/spectrum-scale-large.css
deleted file mode 100644
index 9e7baf50679..00000000000
--- a/tools/styles/spectrum-scale-large.css
+++ /dev/null
@@ -1,150 +0,0 @@
-:root,
-:host {
-    --spectrum-global-dimension-scale-factor: 1.25;
-    --spectrum-global-dimension-size-0: 0px;
-    --spectrum-global-dimension-size-10: 1px;
-    --spectrum-global-dimension-size-25: 2px;
-    --spectrum-global-dimension-size-30: 3px;
-    --spectrum-global-dimension-size-40: 4px;
-    --spectrum-global-dimension-size-50: 5px;
-    --spectrum-global-dimension-size-65: 6px;
-    --spectrum-global-dimension-size-75: 8px;
-    --spectrum-global-dimension-size-85: 9px;
-    --spectrum-global-dimension-size-100: 10px;
-    --spectrum-global-dimension-size-115: 11px;
-    --spectrum-global-dimension-size-125: 13px;
-    --spectrum-global-dimension-size-130: 14px;
-    --spectrum-global-dimension-size-150: 15px;
-    --spectrum-global-dimension-size-160: 16px;
-    --spectrum-global-dimension-size-175: 18px;
-    --spectrum-global-dimension-size-185: 19px;
-    --spectrum-global-dimension-size-200: 20px;
-    --spectrum-global-dimension-size-225: 22px;
-    --spectrum-global-dimension-size-250: 25px;
-    --spectrum-global-dimension-size-275: 28px;
-    --spectrum-global-dimension-size-300: 30px;
-    --spectrum-global-dimension-size-325: 32px;
-    --spectrum-global-dimension-size-350: 35px;
-    --spectrum-global-dimension-size-400: 40px;
-    --spectrum-global-dimension-size-450: 45px;
-    --spectrum-global-dimension-size-500: 50px;
-    --spectrum-global-dimension-size-550: 56px;
-    --spectrum-global-dimension-size-600: 60px;
-    --spectrum-global-dimension-size-650: 65px;
-    --spectrum-global-dimension-size-675: 68px;
-    --spectrum-global-dimension-size-700: 70px;
-    --spectrum-global-dimension-size-750: 75px;
-    --spectrum-global-dimension-size-800: 80px;
-    --spectrum-global-dimension-size-900: 90px;
-    --spectrum-global-dimension-size-1000: 100px;
-    --spectrum-global-dimension-size-1125: 112px;
-    --spectrum-global-dimension-size-1200: 120px;
-    --spectrum-global-dimension-size-1250: 125px;
-    --spectrum-global-dimension-size-1600: 160px;
-    --spectrum-global-dimension-size-1700: 170px;
-    --spectrum-global-dimension-size-1800: 180px;
-    --spectrum-global-dimension-size-2000: 200px;
-    --spectrum-global-dimension-size-2400: 240px;
-    --spectrum-global-dimension-size-2500: 250px;
-    --spectrum-global-dimension-size-3000: 300px;
-    --spectrum-global-dimension-size-3400: 340px;
-    --spectrum-global-dimension-size-3600: 360px;
-    --spectrum-global-dimension-size-4600: 460px;
-    --spectrum-global-dimension-size-5000: 500px;
-    --spectrum-global-dimension-size-6000: 600px;
-    --spectrum-global-dimension-font-size-25: 12px;
-    --spectrum-global-dimension-font-size-50: 13px;
-    --spectrum-global-dimension-font-size-75: 15px;
-    --spectrum-global-dimension-font-size-100: 17px;
-    --spectrum-global-dimension-font-size-150: 18px;
-    --spectrum-global-dimension-font-size-200: 19px;
-    --spectrum-global-dimension-font-size-300: 22px;
-    --spectrum-global-dimension-font-size-400: 24px;
-    --spectrum-global-dimension-font-size-500: 27px;
-    --spectrum-global-dimension-font-size-600: 31px;
-    --spectrum-global-dimension-font-size-700: 34px;
-    --spectrum-global-dimension-font-size-800: 39px;
-    --spectrum-global-dimension-font-size-900: 44px;
-    --spectrum-global-dimension-font-size-1000: 49px;
-    --spectrum-global-dimension-font-size-1100: 55px;
-    --spectrum-global-dimension-font-size-1200: 62px;
-    --spectrum-global-dimension-font-size-1300: 70px;
-    --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-rounded-workflow-padding-left-m: 17px;
-    --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px;
-    --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-control-3-width-s: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-450);
-    --spectrum-alias-item-control-3-width-l: 41px;
-    --spectrum-alias-item-control-3-width-xl: 46px;
-    --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-static-size-325);
-    --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-control-three-width-s: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-control-three-width-m: var(--spectrum-global-dimension-static-size-450);
-    --spectrum-alias-control-three-width-l: 41px;
-    --spectrum-alias-control-three-width-xl: 46px;
-    --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-static-size-115);
-    --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-115);
-    --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-275);
-    --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-275);
-    --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-avatar-size-100: 26px;
-    --spectrum-alias-avatar-size-400: 36px;
-    --spectrum-alias-avatar-size-600: 46px;
-    --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-xs-text-size);
-    --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-75);
-}
diff --git a/tools/styles/spectrum-scale-medium.css b/tools/styles/spectrum-scale-medium.css
deleted file mode 100644
index 384c65fdbfc..00000000000
--- a/tools/styles/spectrum-scale-medium.css
+++ /dev/null
@@ -1,150 +0,0 @@
-:root,
-:host {
-    --spectrum-global-dimension-scale-factor: 1;
-    --spectrum-global-dimension-size-0: 0px;
-    --spectrum-global-dimension-size-10: 1px;
-    --spectrum-global-dimension-size-25: 2px;
-    --spectrum-global-dimension-size-30: 2px;
-    --spectrum-global-dimension-size-40: 3px;
-    --spectrum-global-dimension-size-50: 4px;
-    --spectrum-global-dimension-size-65: 5px;
-    --spectrum-global-dimension-size-75: 6px;
-    --spectrum-global-dimension-size-85: 7px;
-    --spectrum-global-dimension-size-100: 8px;
-    --spectrum-global-dimension-size-115: 9px;
-    --spectrum-global-dimension-size-125: 10px;
-    --spectrum-global-dimension-size-130: 11px;
-    --spectrum-global-dimension-size-150: 12px;
-    --spectrum-global-dimension-size-160: 13px;
-    --spectrum-global-dimension-size-175: 14px;
-    --spectrum-global-dimension-size-185: 15px;
-    --spectrum-global-dimension-size-200: 16px;
-    --spectrum-global-dimension-size-225: 18px;
-    --spectrum-global-dimension-size-250: 20px;
-    --spectrum-global-dimension-size-275: 22px;
-    --spectrum-global-dimension-size-300: 24px;
-    --spectrum-global-dimension-size-325: 26px;
-    --spectrum-global-dimension-size-350: 28px;
-    --spectrum-global-dimension-size-400: 32px;
-    --spectrum-global-dimension-size-450: 36px;
-    --spectrum-global-dimension-size-500: 40px;
-    --spectrum-global-dimension-size-550: 44px;
-    --spectrum-global-dimension-size-600: 48px;
-    --spectrum-global-dimension-size-650: 52px;
-    --spectrum-global-dimension-size-675: 54px;
-    --spectrum-global-dimension-size-700: 56px;
-    --spectrum-global-dimension-size-750: 60px;
-    --spectrum-global-dimension-size-800: 64px;
-    --spectrum-global-dimension-size-900: 72px;
-    --spectrum-global-dimension-size-1000: 80px;
-    --spectrum-global-dimension-size-1125: 90px;
-    --spectrum-global-dimension-size-1200: 96px;
-    --spectrum-global-dimension-size-1250: 100px;
-    --spectrum-global-dimension-size-1600: 128px;
-    --spectrum-global-dimension-size-1700: 136px;
-    --spectrum-global-dimension-size-1800: 144px;
-    --spectrum-global-dimension-size-2000: 160px;
-    --spectrum-global-dimension-size-2400: 192px;
-    --spectrum-global-dimension-size-2500: 200px;
-    --spectrum-global-dimension-size-3000: 240px;
-    --spectrum-global-dimension-size-3400: 272px;
-    --spectrum-global-dimension-size-3600: 288px;
-    --spectrum-global-dimension-size-4600: 368px;
-    --spectrum-global-dimension-size-5000: 400px;
-    --spectrum-global-dimension-size-6000: 480px;
-    --spectrum-global-dimension-font-size-25: 10px;
-    --spectrum-global-dimension-font-size-50: 11px;
-    --spectrum-global-dimension-font-size-75: 12px;
-    --spectrum-global-dimension-font-size-100: 14px;
-    --spectrum-global-dimension-font-size-150: 15px;
-    --spectrum-global-dimension-font-size-200: 16px;
-    --spectrum-global-dimension-font-size-300: 18px;
-    --spectrum-global-dimension-font-size-400: 20px;
-    --spectrum-global-dimension-font-size-500: 22px;
-    --spectrum-global-dimension-font-size-600: 25px;
-    --spectrum-global-dimension-font-size-700: 28px;
-    --spectrum-global-dimension-font-size-800: 32px;
-    --spectrum-global-dimension-font-size-900: 36px;
-    --spectrum-global-dimension-font-size-1000: 40px;
-    --spectrum-global-dimension-font-size-1100: 45px;
-    --spectrum-global-dimension-font-size-1200: 50px;
-    --spectrum-global-dimension-font-size-1300: 60px;
-    --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-rounded-workflow-padding-left-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px;
-    --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-3-width-s: 23px;
-    --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-325);
-    --spectrum-alias-item-control-3-width-l: 29px;
-    --spectrum-alias-item-control-3-width-xl: 33px;
-    --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-control-three-width-s: 23px;
-    --spectrum-alias-control-three-width-m: var(--spectrum-global-dimension-static-size-325);
-    --spectrum-alias-control-three-width-l: 29px;
-    --spectrum-alias-control-three-width-xl: 33px;
-    --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350);
-    --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450);
-    --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-s-text-size);
-    --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-100);
-}
diff --git a/tools/styles/spectrum-theme-dark.css b/tools/styles/spectrum-theme-dark.css
deleted file mode 100644
index c17f93e699a..00000000000
--- a/tools/styles/spectrum-theme-dark.css
+++ /dev/null
@@ -1,161 +0,0 @@
-:root,
-:host {
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-opacity-100: 1;
-    --spectrum-global-color-opacity-90: 0.9;
-    --spectrum-global-color-opacity-80: 0.8;
-    --spectrum-global-color-opacity-70: 0.7;
-    --spectrum-global-color-opacity-60: 0.6;
-    --spectrum-global-color-opacity-55: 0.55;
-    --spectrum-global-color-opacity-50: 0.5;
-    --spectrum-global-color-opacity-42: 0.42;
-    --spectrum-global-color-opacity-40: 0.4;
-    --spectrum-global-color-opacity-30: 0.3;
-    --spectrum-global-color-opacity-25: 0.25;
-    --spectrum-global-color-opacity-20: 0.2;
-    --spectrum-global-color-opacity-15: 0.15;
-    --spectrum-global-color-opacity-10: 0.1;
-    --spectrum-global-color-opacity-8: 0.08;
-    --spectrum-global-color-opacity-7: 0.07;
-    --spectrum-global-color-opacity-6: 0.06;
-    --spectrum-global-color-opacity-5: 0.05;
-    --spectrum-global-color-opacity-4: 0.04;
-    --spectrum-global-color-opacity-0: 0;
-    --spectrum-global-color-celery-400-rgb: 34, 184, 51;
-    --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb));
-    --spectrum-global-color-celery-500-rgb: 68, 202, 73;
-    --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb));
-    --spectrum-global-color-celery-600-rgb: 105, 220, 99;
-    --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb));
-    --spectrum-global-color-celery-700-rgb: 142, 235, 127;
-    --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb));
-    --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8;
-    --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb));
-    --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18;
-    --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb));
-    --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37;
-    --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb));
-    --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71;
-    --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb));
-    --spectrum-global-color-yellow-400-rgb: 228, 194, 0;
-    --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb));
-    --spectrum-global-color-yellow-500-rgb: 244, 213, 0;
-    --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb));
-    --spectrum-global-color-yellow-600-rgb: 249, 232, 92;
-    --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb));
-    --spectrum-global-color-yellow-700-rgb: 252, 246, 187;
-    --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb));
-    --spectrum-global-color-magenta-400-rgb: 222, 61, 130;
-    --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb));
-    --spectrum-global-color-magenta-500-rgb: 237, 87, 149;
-    --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb));
-    --spectrum-global-color-magenta-600-rgb: 249, 114, 167;
-    --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb));
-    --spectrum-global-color-magenta-700-rgb: 255, 143, 185;
-    --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb));
-    --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206;
-    --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb));
-    --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224;
-    --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb));
-    --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236;
-    --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb));
-    --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242;
-    --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb));
-    --spectrum-global-color-purple-400-rgb: 157, 87, 243;
-    --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb));
-    --spectrum-global-color-purple-500-rgb: 172, 111, 249;
-    --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb));
-    --spectrum-global-color-purple-600-rgb: 187, 135, 251;
-    --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb));
-    --spectrum-global-color-purple-700-rgb: 202, 159, 252;
-    --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb));
-    --spectrum-global-color-indigo-400-rgb: 104, 109, 244;
-    --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb));
-    --spectrum-global-color-indigo-500-rgb: 124, 129, 251;
-    --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb));
-    --spectrum-global-color-indigo-600-rgb: 145, 149, 255;
-    --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb));
-    --spectrum-global-color-indigo-700-rgb: 167, 170, 255;
-    --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb));
-    --spectrum-global-color-seafoam-400-rgb: 0, 158, 152;
-    --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb));
-    --spectrum-global-color-seafoam-500-rgb: 3, 178, 171;
-    --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb));
-    --spectrum-global-color-seafoam-600-rgb: 54, 197, 189;
-    --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb));
-    --spectrum-global-color-seafoam-700-rgb: 93, 214, 207;
-    --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb));
-    --spectrum-global-color-red-400-rgb: 234, 56, 41;
-    --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb));
-    --spectrum-global-color-red-500-rgb: 246, 88, 67;
-    --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb));
-    --spectrum-global-color-red-600-rgb: 255, 117, 94;
-    --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb));
-    --spectrum-global-color-red-700-rgb: 255, 149, 129;
-    --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb));
-    --spectrum-global-color-orange-400-rgb: 244, 129, 12;
-    --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb));
-    --spectrum-global-color-orange-500-rgb: 254, 154, 46;
-    --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb));
-    --spectrum-global-color-orange-600-rgb: 255, 181, 88;
-    --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb));
-    --spectrum-global-color-orange-700-rgb: 253, 206, 136;
-    --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb));
-    --spectrum-global-color-green-400-rgb: 18, 162, 108;
-    --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb));
-    --spectrum-global-color-green-500-rgb: 43, 180, 125;
-    --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb));
-    --spectrum-global-color-green-600-rgb: 67, 199, 143;
-    --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb));
-    --spectrum-global-color-green-700-rgb: 94, 217, 162;
-    --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb));
-    --spectrum-global-color-blue-400-rgb: 52, 143, 244;
-    --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb));
-    --spectrum-global-color-blue-500-rgb: 84, 163, 246;
-    --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb));
-    --spectrum-global-color-blue-600-rgb: 114, 183, 249;
-    --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb));
-    --spectrum-global-color-blue-700-rgb: 143, 202, 252;
-    --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb));
-    --spectrum-global-color-gray-50-rgb: 29, 29, 29;
-    --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb));
-    --spectrum-global-color-gray-75-rgb: 38, 38, 38;
-    --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb));
-    --spectrum-global-color-gray-100-rgb: 50, 50, 50;
-    --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb));
-    --spectrum-global-color-gray-200-rgb: 63, 63, 63;
-    --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb));
-    --spectrum-global-color-gray-300-rgb: 84, 84, 84;
-    --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb));
-    --spectrum-global-color-gray-400-rgb: 112, 112, 112;
-    --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb));
-    --spectrum-global-color-gray-500-rgb: 144, 144, 144;
-    --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb));
-    --spectrum-global-color-gray-600-rgb: 178, 178, 178;
-    --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb));
-    --spectrum-global-color-gray-700-rgb: 209, 209, 209;
-    --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb));
-    --spectrum-global-color-gray-800-rgb: 235, 235, 235;
-    --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb));
-    --spectrum-global-color-gray-900-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb));
-    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-background-color-modal-overlay: #00000080;
-    --spectrum-alias-dropshadow-color: #00000080;
-    --spectrum-alias-background-color-hover-overlay: #ffffff0f;
-    --spectrum-alias-highlight-hover: #ffffff12;
-    --spectrum-alias-highlight-down: #ffffff1a;
-    --spectrum-alias-highlight-selected: #54a3f626;
-    --spectrum-alias-highlight-selected-hover: #54a3f640;
-    --spectrum-alias-text-highlight-color: #54a3f640;
-    --spectrum-alias-background-color-quickactions: #323232e6;
-    --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-border-color-translucent: #ffffff1a;
-    --spectrum-alias-radial-reaction-color-default: #ebebeb99;
-    --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-50);
-}
diff --git a/tools/styles/spectrum-theme-darkest.css b/tools/styles/spectrum-theme-darkest.css
deleted file mode 100644
index 41610134774..00000000000
--- a/tools/styles/spectrum-theme-darkest.css
+++ /dev/null
@@ -1,161 +0,0 @@
-:root,
-:host {
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-opacity-100: 1;
-    --spectrum-global-color-opacity-90: 0.9;
-    --spectrum-global-color-opacity-80: 0.8;
-    --spectrum-global-color-opacity-70: 0.7;
-    --spectrum-global-color-opacity-60: 0.6;
-    --spectrum-global-color-opacity-55: 0.55;
-    --spectrum-global-color-opacity-50: 0.5;
-    --spectrum-global-color-opacity-42: 0.42;
-    --spectrum-global-color-opacity-40: 0.4;
-    --spectrum-global-color-opacity-30: 0.3;
-    --spectrum-global-color-opacity-25: 0.25;
-    --spectrum-global-color-opacity-20: 0.2;
-    --spectrum-global-color-opacity-15: 0.15;
-    --spectrum-global-color-opacity-10: 0.1;
-    --spectrum-global-color-opacity-8: 0.08;
-    --spectrum-global-color-opacity-7: 0.07;
-    --spectrum-global-color-opacity-6: 0.06;
-    --spectrum-global-color-opacity-5: 0.05;
-    --spectrum-global-color-opacity-4: 0.04;
-    --spectrum-global-color-opacity-0: 0;
-    --spectrum-global-color-celery-400-rgb: 13, 171, 37;
-    --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb));
-    --spectrum-global-color-celery-500-rgb: 45, 191, 58;
-    --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb));
-    --spectrum-global-color-celery-600-rgb: 80, 208, 82;
-    --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb));
-    --spectrum-global-color-celery-700-rgb: 115, 224, 107;
-    --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb));
-    --spectrum-global-color-chartreuse-400-rgb: 138, 180, 3;
-    --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb));
-    --spectrum-global-color-chartreuse-500-rgb: 154, 198, 11;
-    --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb));
-    --spectrum-global-color-chartreuse-600-rgb: 170, 216, 22;
-    --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb));
-    --spectrum-global-color-chartreuse-700-rgb: 187, 232, 41;
-    --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb));
-    --spectrum-global-color-yellow-400-rgb: 216, 181, 0;
-    --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb));
-    --spectrum-global-color-yellow-500-rgb: 233, 199, 0;
-    --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb));
-    --spectrum-global-color-yellow-600-rgb: 247, 216, 4;
-    --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb));
-    --spectrum-global-color-yellow-700-rgb: 249, 233, 97;
-    --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb));
-    --spectrum-global-color-magenta-400-rgb: 209, 43, 114;
-    --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb));
-    --spectrum-global-color-magenta-500-rgb: 227, 69, 137;
-    --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb));
-    --spectrum-global-color-magenta-600-rgb: 241, 97, 156;
-    --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb));
-    --spectrum-global-color-magenta-700-rgb: 252, 124, 173;
-    --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb));
-    --spectrum-global-color-fuchsia-400-rgb: 191, 43, 191;
-    --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb));
-    --spectrum-global-color-fuchsia-500-rgb: 211, 65, 213;
-    --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb));
-    --spectrum-global-color-fuchsia-600-rgb: 228, 91, 229;
-    --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb));
-    --spectrum-global-color-fuchsia-700-rgb: 239, 120, 238;
-    --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb));
-    --spectrum-global-color-purple-400-rgb: 145, 70, 236;
-    --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb));
-    --spectrum-global-color-purple-500-rgb: 162, 94, 246;
-    --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb));
-    --spectrum-global-color-purple-600-rgb: 178, 119, 250;
-    --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb));
-    --spectrum-global-color-purple-700-rgb: 192, 143, 252;
-    --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb));
-    --spectrum-global-color-indigo-400-rgb: 90, 96, 235;
-    --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb));
-    --spectrum-global-color-indigo-500-rgb: 110, 115, 246;
-    --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb));
-    --spectrum-global-color-indigo-600-rgb: 132, 136, 253;
-    --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb));
-    --spectrum-global-color-indigo-700-rgb: 153, 157, 255;
-    --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb));
-    --spectrum-global-color-seafoam-400-rgb: 0, 146, 140;
-    --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb));
-    --spectrum-global-color-seafoam-500-rgb: 0, 165, 159;
-    --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb));
-    --spectrum-global-color-seafoam-600-rgb: 26, 185, 178;
-    --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb));
-    --spectrum-global-color-seafoam-700-rgb: 66, 202, 195;
-    --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb));
-    --spectrum-global-color-red-400-rgb: 221, 33, 24;
-    --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb));
-    --spectrum-global-color-red-500-rgb: 238, 67, 49;
-    --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb));
-    --spectrum-global-color-red-600-rgb: 249, 99, 76;
-    --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb));
-    --spectrum-global-color-red-700-rgb: 255, 129, 107;
-    --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb));
-    --spectrum-global-color-orange-400-rgb: 232, 116, 0;
-    --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb));
-    --spectrum-global-color-orange-500-rgb: 249, 137, 23;
-    --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb));
-    --spectrum-global-color-orange-600-rgb: 255, 162, 59;
-    --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb));
-    --spectrum-global-color-orange-700-rgb: 255, 188, 102;
-    --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb));
-    --spectrum-global-color-green-400-rgb: 0, 149, 98;
-    --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb));
-    --spectrum-global-color-green-500-rgb: 28, 168, 114;
-    --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb));
-    --spectrum-global-color-green-600-rgb: 52, 187, 132;
-    --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb));
-    --spectrum-global-color-green-700-rgb: 75, 205, 149;
-    --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb));
-    --spectrum-global-color-blue-400-rgb: 29, 128, 245;
-    --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb));
-    --spectrum-global-color-blue-500-rgb: 64, 150, 243;
-    --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb));
-    --spectrum-global-color-blue-600-rgb: 94, 170, 247;
-    --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb));
-    --spectrum-global-color-blue-700-rgb: 124, 189, 250;
-    --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb));
-    --spectrum-global-color-gray-50-rgb: 0, 0, 0;
-    --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb));
-    --spectrum-global-color-gray-75-rgb: 14, 14, 14;
-    --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb));
-    --spectrum-global-color-gray-100-rgb: 29, 29, 29;
-    --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb));
-    --spectrum-global-color-gray-200-rgb: 48, 48, 48;
-    --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb));
-    --spectrum-global-color-gray-300-rgb: 75, 75, 75;
-    --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb));
-    --spectrum-global-color-gray-400-rgb: 106, 106, 106;
-    --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb));
-    --spectrum-global-color-gray-500-rgb: 141, 141, 141;
-    --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb));
-    --spectrum-global-color-gray-600-rgb: 176, 176, 176;
-    --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb));
-    --spectrum-global-color-gray-700-rgb: 208, 208, 208;
-    --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb));
-    --spectrum-global-color-gray-800-rgb: 235, 235, 235;
-    --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb));
-    --spectrum-global-color-gray-900-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb));
-    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-background-color-modal-overlay: #0009;
-    --spectrum-alias-dropshadow-color: #000c;
-    --spectrum-alias-background-color-hover-overlay: #ffffff14;
-    --spectrum-alias-highlight-hover: #ffffff14;
-    --spectrum-alias-highlight-down: #ffffff26;
-    --spectrum-alias-highlight-selected: #4096f333;
-    --spectrum-alias-highlight-selected-hover: #4096f34d;
-    --spectrum-alias-text-highlight-color: #4096f34d;
-    --spectrum-alias-background-color-quickactions: #1d1d1de6;
-    --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-border-color-translucent: #ffffff1a;
-    --spectrum-alias-radial-reaction-color-default: #ebebeb99;
-    --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-50);
-}
diff --git a/tools/styles/spectrum-theme-light.css b/tools/styles/spectrum-theme-light.css
deleted file mode 100644
index b7c7b986e3e..00000000000
--- a/tools/styles/spectrum-theme-light.css
+++ /dev/null
@@ -1,161 +0,0 @@
-:root,
-:host {
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-opacity-100: 1;
-    --spectrum-global-color-opacity-90: 0.9;
-    --spectrum-global-color-opacity-80: 0.8;
-    --spectrum-global-color-opacity-70: 0.7;
-    --spectrum-global-color-opacity-60: 0.6;
-    --spectrum-global-color-opacity-55: 0.55;
-    --spectrum-global-color-opacity-50: 0.5;
-    --spectrum-global-color-opacity-42: 0.42;
-    --spectrum-global-color-opacity-40: 0.4;
-    --spectrum-global-color-opacity-30: 0.3;
-    --spectrum-global-color-opacity-25: 0.25;
-    --spectrum-global-color-opacity-20: 0.2;
-    --spectrum-global-color-opacity-15: 0.15;
-    --spectrum-global-color-opacity-10: 0.1;
-    --spectrum-global-color-opacity-8: 0.08;
-    --spectrum-global-color-opacity-7: 0.07;
-    --spectrum-global-color-opacity-6: 0.06;
-    --spectrum-global-color-opacity-5: 0.05;
-    --spectrum-global-color-opacity-4: 0.04;
-    --spectrum-global-color-opacity-0: 0;
-    --spectrum-global-color-celery-400-rgb: 39, 187, 54;
-    --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb));
-    --spectrum-global-color-celery-500-rgb: 7, 167, 33;
-    --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb));
-    --spectrum-global-color-celery-600-rgb: 0, 145, 18;
-    --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb));
-    --spectrum-global-color-celery-700-rgb: 0, 124, 15;
-    --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb));
-    --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10;
-    --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb));
-    --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3;
-    --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb));
-    --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0;
-    --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb));
-    --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0;
-    --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb));
-    --spectrum-global-color-yellow-400-rgb: 232, 198, 0;
-    --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb));
-    --spectrum-global-color-yellow-500-rgb: 215, 179, 0;
-    --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb));
-    --spectrum-global-color-yellow-600-rgb: 196, 159, 0;
-    --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb));
-    --spectrum-global-color-yellow-700-rgb: 176, 140, 0;
-    --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb));
-    --spectrum-global-color-magenta-400-rgb: 222, 61, 130;
-    --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb));
-    --spectrum-global-color-magenta-500-rgb: 200, 34, 105;
-    --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb));
-    --spectrum-global-color-magenta-600-rgb: 173, 9, 85;
-    --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb));
-    --spectrum-global-color-magenta-700-rgb: 142, 0, 69;
-    --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb));
-    --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206;
-    --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb));
-    --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183;
-    --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb));
-    --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158;
-    --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb));
-    --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129;
-    --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb));
-    --spectrum-global-color-purple-400-rgb: 157, 87, 244;
-    --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb));
-    --spectrum-global-color-purple-500-rgb: 137, 61, 231;
-    --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb));
-    --spectrum-global-color-purple-600-rgb: 115, 38, 211;
-    --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb));
-    --spectrum-global-color-purple-700-rgb: 93, 19, 183;
-    --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb));
-    --spectrum-global-color-indigo-400-rgb: 104, 109, 244;
-    --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb));
-    --spectrum-global-color-indigo-500-rgb: 82, 88, 228;
-    --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb));
-    --spectrum-global-color-indigo-600-rgb: 64, 70, 202;
-    --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb));
-    --spectrum-global-color-indigo-700-rgb: 50, 54, 168;
-    --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb));
-    --spectrum-global-color-seafoam-400-rgb: 0, 161, 154;
-    --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb));
-    --spectrum-global-color-seafoam-500-rgb: 0, 140, 135;
-    --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb));
-    --spectrum-global-color-seafoam-600-rgb: 0, 119, 114;
-    --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb));
-    --spectrum-global-color-seafoam-700-rgb: 0, 99, 95;
-    --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb));
-    --spectrum-global-color-red-400-rgb: 234, 56, 41;
-    --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb));
-    --spectrum-global-color-red-500-rgb: 211, 21, 16;
-    --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb));
-    --spectrum-global-color-red-600-rgb: 180, 0, 0;
-    --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb));
-    --spectrum-global-color-red-700-rgb: 147, 0, 0;
-    --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb));
-    --spectrum-global-color-orange-400-rgb: 246, 133, 17;
-    --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb));
-    --spectrum-global-color-orange-500-rgb: 228, 111, 0;
-    --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb));
-    --spectrum-global-color-orange-600-rgb: 203, 93, 0;
-    --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb));
-    --spectrum-global-color-orange-700-rgb: 177, 76, 0;
-    --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb));
-    --spectrum-global-color-green-400-rgb: 0, 143, 93;
-    --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb));
-    --spectrum-global-color-green-500-rgb: 0, 122, 77;
-    --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb));
-    --spectrum-global-color-green-600-rgb: 0, 101, 62;
-    --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb));
-    --spectrum-global-color-green-700-rgb: 0, 81, 50;
-    --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb));
-    --spectrum-global-color-blue-400-rgb: 20, 122, 243;
-    --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb));
-    --spectrum-global-color-blue-500-rgb: 2, 101, 220;
-    --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb));
-    --spectrum-global-color-blue-600-rgb: 0, 84, 182;
-    --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb));
-    --spectrum-global-color-blue-700-rgb: 0, 68, 145;
-    --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb));
-    --spectrum-global-color-gray-50-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb));
-    --spectrum-global-color-gray-75-rgb: 253, 253, 253;
-    --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb));
-    --spectrum-global-color-gray-100-rgb: 248, 248, 248;
-    --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb));
-    --spectrum-global-color-gray-200-rgb: 230, 230, 230;
-    --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb));
-    --spectrum-global-color-gray-300-rgb: 213, 213, 213;
-    --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb));
-    --spectrum-global-color-gray-400-rgb: 177, 177, 177;
-    --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb));
-    --spectrum-global-color-gray-500-rgb: 144, 144, 144;
-    --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb));
-    --spectrum-global-color-gray-600-rgb: 109, 109, 109;
-    --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb));
-    --spectrum-global-color-gray-700-rgb: 70, 70, 70;
-    --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb));
-    --spectrum-global-color-gray-800-rgb: 34, 34, 34;
-    --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb));
-    --spectrum-global-color-gray-900-rgb: 0, 0, 0;
-    --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb));
-    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-background-color-modal-overlay: #0006;
-    --spectrum-alias-dropshadow-color: #00000026;
-    --spectrum-alias-background-color-hover-overlay: #0000000a;
-    --spectrum-alias-highlight-hover: #0000000f;
-    --spectrum-alias-highlight-down: #0000001a;
-    --spectrum-alias-highlight-selected: #0265dc1a;
-    --spectrum-alias-highlight-selected-hover: #0265dc33;
-    --spectrum-alias-text-highlight-color: #0265dc33;
-    --spectrum-alias-background-color-quickactions: #f8f8f8e6;
-    --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-border-color-translucent: #0000001a;
-    --spectrum-alias-radial-reaction-color-default: #2229;
-    --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-300);
-}
diff --git a/tools/styles/spectrum-theme-lightest.css b/tools/styles/spectrum-theme-lightest.css
deleted file mode 100644
index 2de6beda5fc..00000000000
--- a/tools/styles/spectrum-theme-lightest.css
+++ /dev/null
@@ -1,161 +0,0 @@
-:root,
-:host {
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-opacity-100: 1;
-    --spectrum-global-color-opacity-90: 0.9;
-    --spectrum-global-color-opacity-80: 0.8;
-    --spectrum-global-color-opacity-70: 0.7;
-    --spectrum-global-color-opacity-60: 0.6;
-    --spectrum-global-color-opacity-55: 0.55;
-    --spectrum-global-color-opacity-50: 0.5;
-    --spectrum-global-color-opacity-42: 0.42;
-    --spectrum-global-color-opacity-40: 0.4;
-    --spectrum-global-color-opacity-30: 0.3;
-    --spectrum-global-color-opacity-25: 0.25;
-    --spectrum-global-color-opacity-20: 0.2;
-    --spectrum-global-color-opacity-15: 0.15;
-    --spectrum-global-color-opacity-10: 0.1;
-    --spectrum-global-color-opacity-8: 0.08;
-    --spectrum-global-color-opacity-7: 0.07;
-    --spectrum-global-color-opacity-6: 0.06;
-    --spectrum-global-color-opacity-5: 0.05;
-    --spectrum-global-color-opacity-4: 0.04;
-    --spectrum-global-color-opacity-0: 0;
-    --spectrum-global-color-celery-400-rgb: 48, 193, 61;
-    --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb));
-    --spectrum-global-color-celery-500-rgb: 15, 172, 38;
-    --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb));
-    --spectrum-global-color-celery-600-rgb: 0, 150, 20;
-    --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb));
-    --spectrum-global-color-celery-700-rgb: 0, 128, 15;
-    --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb));
-    --spectrum-global-color-chartreuse-400-rgb: 157, 203, 13;
-    --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb));
-    --spectrum-global-color-chartreuse-500-rgb: 139, 182, 4;
-    --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb));
-    --spectrum-global-color-chartreuse-600-rgb: 122, 162, 0;
-    --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb));
-    --spectrum-global-color-chartreuse-700-rgb: 106, 141, 0;
-    --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb));
-    --spectrum-global-color-yellow-400-rgb: 238, 205, 0;
-    --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb));
-    --spectrum-global-color-yellow-500-rgb: 221, 185, 0;
-    --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb));
-    --spectrum-global-color-yellow-600-rgb: 201, 164, 0;
-    --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb));
-    --spectrum-global-color-yellow-700-rgb: 181, 144, 0;
-    --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb));
-    --spectrum-global-color-magenta-400-rgb: 226, 68, 135;
-    --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb));
-    --spectrum-global-color-magenta-500-rgb: 205, 40, 111;
-    --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb));
-    --spectrum-global-color-magenta-600-rgb: 179, 15, 89;
-    --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb));
-    --spectrum-global-color-magenta-700-rgb: 149, 0, 72;
-    --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb));
-    --spectrum-global-color-fuchsia-400-rgb: 211, 63, 212;
-    --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb));
-    --spectrum-global-color-fuchsia-500-rgb: 188, 39, 187;
-    --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb));
-    --spectrum-global-color-fuchsia-600-rgb: 163, 10, 163;
-    --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb));
-    --spectrum-global-color-fuchsia-700-rgb: 135, 0, 136;
-    --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb));
-    --spectrum-global-color-purple-400-rgb: 161, 93, 246;
-    --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb));
-    --spectrum-global-color-purple-500-rgb: 142, 67, 234;
-    --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb));
-    --spectrum-global-color-purple-600-rgb: 120, 43, 216;
-    --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb));
-    --spectrum-global-color-purple-700-rgb: 98, 23, 190;
-    --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb));
-    --spectrum-global-color-indigo-400-rgb: 109, 115, 246;
-    --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb));
-    --spectrum-global-color-indigo-500-rgb: 87, 93, 232;
-    --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb));
-    --spectrum-global-color-indigo-600-rgb: 68, 74, 208;
-    --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb));
-    --spectrum-global-color-indigo-700-rgb: 53, 58, 176;
-    --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb));
-    --spectrum-global-color-seafoam-400-rgb: 0, 166, 160;
-    --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb));
-    --spectrum-global-color-seafoam-500-rgb: 0, 145, 139;
-    --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb));
-    --spectrum-global-color-seafoam-600-rgb: 0, 124, 118;
-    --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb));
-    --spectrum-global-color-seafoam-700-rgb: 0, 103, 99;
-    --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb));
-    --spectrum-global-color-red-400-rgb: 237, 64, 48;
-    --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb));
-    --spectrum-global-color-red-500-rgb: 217, 28, 21;
-    --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb));
-    --spectrum-global-color-red-600-rgb: 187, 2, 2;
-    --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb));
-    --spectrum-global-color-red-700-rgb: 154, 0, 0;
-    --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb));
-    --spectrum-global-color-orange-400-rgb: 250, 139, 26;
-    --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb));
-    --spectrum-global-color-orange-500-rgb: 233, 117, 0;
-    --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb));
-    --spectrum-global-color-orange-600-rgb: 209, 97, 0;
-    --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb));
-    --spectrum-global-color-orange-700-rgb: 182, 80, 0;
-    --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb));
-    --spectrum-global-color-green-400-rgb: 0, 148, 97;
-    --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb));
-    --spectrum-global-color-green-500-rgb: 0, 126, 80;
-    --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb));
-    --spectrum-global-color-green-600-rgb: 0, 105, 65;
-    --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb));
-    --spectrum-global-color-green-700-rgb: 0, 86, 53;
-    --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb));
-    --spectrum-global-color-blue-400-rgb: 27, 127, 245;
-    --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb));
-    --spectrum-global-color-blue-500-rgb: 4, 105, 227;
-    --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb));
-    --spectrum-global-color-blue-600-rgb: 0, 87, 190;
-    --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb));
-    --spectrum-global-color-blue-700-rgb: 0, 72, 153;
-    --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb));
-    --spectrum-global-color-gray-50-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb));
-    --spectrum-global-color-gray-75-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb));
-    --spectrum-global-color-gray-100-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb));
-    --spectrum-global-color-gray-200-rgb: 235, 235, 235;
-    --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb));
-    --spectrum-global-color-gray-300-rgb: 217, 217, 217;
-    --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb));
-    --spectrum-global-color-gray-400-rgb: 179, 179, 179;
-    --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb));
-    --spectrum-global-color-gray-500-rgb: 146, 146, 146;
-    --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb));
-    --spectrum-global-color-gray-600-rgb: 110, 110, 110;
-    --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb));
-    --spectrum-global-color-gray-700-rgb: 71, 71, 71;
-    --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb));
-    --spectrum-global-color-gray-800-rgb: 34, 34, 34;
-    --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb));
-    --spectrum-global-color-gray-900-rgb: 0, 0, 0;
-    --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb));
-    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-background-color-modal-overlay: #0006;
-    --spectrum-alias-dropshadow-color: #00000026;
-    --spectrum-alias-background-color-hover-overlay: #0000000a;
-    --spectrum-alias-highlight-hover: #0000000f;
-    --spectrum-alias-highlight-down: #0000001a;
-    --spectrum-alias-highlight-selected: #0469e31a;
-    --spectrum-alias-highlight-selected-hover: #0469e333;
-    --spectrum-alias-text-highlight-color: #0469e333;
-    --spectrum-alias-background-color-quickactions: #ffffffe6;
-    --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-border-color-translucent: #0000001a;
-    --spectrum-alias-radial-reaction-color-default: #2229;
-    --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-300);
-}
diff --git a/tools/styles/spectrum-two/core-global.css b/tools/styles/spectrum-two/core-global.css
deleted file mode 100644
index 012a8a3aa57..00000000000
--- a/tools/styles/spectrum-two/core-global.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-core-global.css";
-
-:host,
-:root {
-    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-}
diff --git a/tools/styles/spectrum-two/scale-large.css b/tools/styles/spectrum-two/scale-large.css
deleted file mode 100644
index cd76be719ab..00000000000
--- a/tools/styles/spectrum-two/scale-large.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-scale-large.css";
-
-:host,
-:root {
-    --spectrum-global-alias-appframe-border-size: 1px;
-    --swc-scale-factor: 1.25;
-}
diff --git a/tools/styles/spectrum-two/scale-medium.css b/tools/styles/spectrum-two/scale-medium.css
deleted file mode 100644
index 9ba46899d36..00000000000
--- a/tools/styles/spectrum-two/scale-medium.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-scale-medium.css";
-
-:host,
-:root {
-    --spectrum-global-alias-appframe-border-size: 2px;
-    --swc-scale-factor: 1;
-}
diff --git a/tools/styles/spectrum-two/spectrum-core-global.css b/tools/styles/spectrum-two/spectrum-core-global.css
deleted file mode 100644
index af8078db72b..00000000000
--- a/tools/styles/spectrum-two/spectrum-core-global.css
+++ /dev/null
@@ -1,1321 +0,0 @@
-:root,
-:host {
-    --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1);
-    --spectrum-global-animation-duration-0: 0s;
-    --spectrum-global-animation-duration-100: 0.13s;
-    --spectrum-global-animation-duration-200: 0.16s;
-    --spectrum-global-animation-duration-300: 0.19s;
-    --spectrum-global-animation-duration-400: 0.22s;
-    --spectrum-global-animation-duration-500: 0.25s;
-    --spectrum-global-animation-duration-600: 0.3s;
-    --spectrum-global-animation-duration-700: 0.35s;
-    --spectrum-global-animation-duration-800: 0.4s;
-    --spectrum-global-animation-duration-900: 0.45s;
-    --spectrum-global-animation-duration-1000: 0.5s;
-    --spectrum-global-animation-duration-2000: 1s;
-    --spectrum-global-animation-duration-4000: 2s;
-    --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
-    --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
-    --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
-    --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-static-black-rgb: 0, 0, 0;
-    --spectrum-global-color-static-black: rgb(var(--spectrum-global-color-static-black-rgb));
-    --spectrum-global-color-static-white-rgb: 255, 255, 255;
-    --spectrum-global-color-static-white: rgb(var(--spectrum-global-color-static-white-rgb));
-    --spectrum-global-color-static-blue-rgb: 0, 87, 191;
-    --spectrum-global-color-static-blue: rgb(var(--spectrum-global-color-static-blue-rgb));
-    --spectrum-global-color-static-gray-50-rgb: 255, 255, 255;
-    --spectrum-global-color-static-gray-50: rgb(var(--spectrum-global-color-static-gray-50-rgb));
-    --spectrum-global-color-static-gray-75-rgb: 255, 255, 255;
-    --spectrum-global-color-static-gray-75: rgb(var(--spectrum-global-color-static-gray-75-rgb));
-    --spectrum-global-color-static-gray-100-rgb: 255, 255, 255;
-    --spectrum-global-color-static-gray-100: rgb(var(--spectrum-global-color-static-gray-100-rgb));
-    --spectrum-global-color-static-gray-200-rgb: 235, 235, 235;
-    --spectrum-global-color-static-gray-200: rgb(var(--spectrum-global-color-static-gray-200-rgb));
-    --spectrum-global-color-static-gray-300-rgb: 217, 217, 217;
-    --spectrum-global-color-static-gray-300: rgb(var(--spectrum-global-color-static-gray-300-rgb));
-    --spectrum-global-color-static-gray-400-rgb: 179, 179, 179;
-    --spectrum-global-color-static-gray-400: rgb(var(--spectrum-global-color-static-gray-400-rgb));
-    --spectrum-global-color-static-gray-500-rgb: 146, 146, 146;
-    --spectrum-global-color-static-gray-500: rgb(var(--spectrum-global-color-static-gray-500-rgb));
-    --spectrum-global-color-static-gray-600-rgb: 110, 110, 110;
-    --spectrum-global-color-static-gray-600: rgb(var(--spectrum-global-color-static-gray-600-rgb));
-    --spectrum-global-color-static-gray-700-rgb: 71, 71, 71;
-    --spectrum-global-color-static-gray-700: rgb(var(--spectrum-global-color-static-gray-700-rgb));
-    --spectrum-global-color-static-gray-800-rgb: 34, 34, 34;
-    --spectrum-global-color-static-gray-800: rgb(var(--spectrum-global-color-static-gray-800-rgb));
-    --spectrum-global-color-static-gray-900-rgb: 0, 0, 0;
-    --spectrum-global-color-static-gray-900: rgb(var(--spectrum-global-color-static-gray-900-rgb));
-    --spectrum-global-color-static-red-400-rgb: 237, 64, 48;
-    --spectrum-global-color-static-red-400: rgb(var(--spectrum-global-color-static-red-400-rgb));
-    --spectrum-global-color-static-red-500-rgb: 217, 28, 21;
-    --spectrum-global-color-static-red-500: rgb(var(--spectrum-global-color-static-red-500-rgb));
-    --spectrum-global-color-static-red-600-rgb: 187, 2, 2;
-    --spectrum-global-color-static-red-600: rgb(var(--spectrum-global-color-static-red-600-rgb));
-    --spectrum-global-color-static-red-700-rgb: 154, 0, 0;
-    --spectrum-global-color-static-red-700: rgb(var(--spectrum-global-color-static-red-700-rgb));
-    --spectrum-global-color-static-red-800-rgb: 124, 0, 0;
-    --spectrum-global-color-static-red-800: rgb(var(--spectrum-global-color-static-red-800-rgb));
-    --spectrum-global-color-static-orange-400-rgb: 250, 139, 26;
-    --spectrum-global-color-static-orange-400: rgb(var(--spectrum-global-color-static-orange-400-rgb));
-    --spectrum-global-color-static-orange-500-rgb: 233, 117, 0;
-    --spectrum-global-color-static-orange-500: rgb(var(--spectrum-global-color-static-orange-500-rgb));
-    --spectrum-global-color-static-orange-600-rgb: 209, 97, 0;
-    --spectrum-global-color-static-orange-600: rgb(var(--spectrum-global-color-static-orange-600-rgb));
-    --spectrum-global-color-static-orange-700-rgb: 182, 80, 0;
-    --spectrum-global-color-static-orange-700: rgb(var(--spectrum-global-color-static-orange-700-rgb));
-    --spectrum-global-color-static-orange-800-rgb: 155, 64, 0;
-    --spectrum-global-color-static-orange-800: rgb(var(--spectrum-global-color-static-orange-800-rgb));
-    --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123;
-    --spectrum-global-color-static-yellow-200: rgb(var(--spectrum-global-color-static-yellow-200-rgb));
-    --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23;
-    --spectrum-global-color-static-yellow-300: rgb(var(--spectrum-global-color-static-yellow-300-rgb));
-    --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0;
-    --spectrum-global-color-static-yellow-400: rgb(var(--spectrum-global-color-static-yellow-400-rgb));
-    --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0;
-    --spectrum-global-color-static-yellow-500: rgb(var(--spectrum-global-color-static-yellow-500-rgb));
-    --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0;
-    --spectrum-global-color-static-yellow-600: rgb(var(--spectrum-global-color-static-yellow-600-rgb));
-    --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0;
-    --spectrum-global-color-static-yellow-700: rgb(var(--spectrum-global-color-static-yellow-700-rgb));
-    --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0;
-    --spectrum-global-color-static-yellow-800: rgb(var(--spectrum-global-color-static-yellow-800-rgb));
-    --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27;
-    --spectrum-global-color-static-chartreuse-300: rgb(var(--spectrum-global-color-static-chartreuse-300-rgb));
-    --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13;
-    --spectrum-global-color-static-chartreuse-400: rgb(var(--spectrum-global-color-static-chartreuse-400-rgb));
-    --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4;
-    --spectrum-global-color-static-chartreuse-500: rgb(var(--spectrum-global-color-static-chartreuse-500-rgb));
-    --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0;
-    --spectrum-global-color-static-chartreuse-600: rgb(var(--spectrum-global-color-static-chartreuse-600-rgb));
-    --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0;
-    --spectrum-global-color-static-chartreuse-700: rgb(var(--spectrum-global-color-static-chartreuse-700-rgb));
-    --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0;
-    --spectrum-global-color-static-chartreuse-800: rgb(var(--spectrum-global-color-static-chartreuse-800-rgb));
-    --spectrum-global-color-static-celery-200-rgb: 126, 229, 114;
-    --spectrum-global-color-static-celery-200: rgb(var(--spectrum-global-color-static-celery-200-rgb));
-    --spectrum-global-color-static-celery-300-rgb: 87, 212, 86;
-    --spectrum-global-color-static-celery-300: rgb(var(--spectrum-global-color-static-celery-300-rgb));
-    --spectrum-global-color-static-celery-400-rgb: 48, 193, 61;
-    --spectrum-global-color-static-celery-400: rgb(var(--spectrum-global-color-static-celery-400-rgb));
-    --spectrum-global-color-static-celery-500-rgb: 15, 172, 38;
-    --spectrum-global-color-static-celery-500: rgb(var(--spectrum-global-color-static-celery-500-rgb));
-    --spectrum-global-color-static-celery-600-rgb: 0, 150, 20;
-    --spectrum-global-color-static-celery-600: rgb(var(--spectrum-global-color-static-celery-600-rgb));
-    --spectrum-global-color-static-celery-700-rgb: 0, 128, 15;
-    --spectrum-global-color-static-celery-700: rgb(var(--spectrum-global-color-static-celery-700-rgb));
-    --spectrum-global-color-static-celery-800-rgb: 0, 107, 15;
-    --spectrum-global-color-static-celery-800: rgb(var(--spectrum-global-color-static-celery-800-rgb));
-    --spectrum-global-color-static-green-400-rgb: 29, 169, 115;
-    --spectrum-global-color-static-green-400: rgb(var(--spectrum-global-color-static-green-400-rgb));
-    --spectrum-global-color-static-green-500-rgb: 0, 148, 97;
-    --spectrum-global-color-static-green-500: rgb(var(--spectrum-global-color-static-green-500-rgb));
-    --spectrum-global-color-static-green-600-rgb: 0, 126, 80;
-    --spectrum-global-color-static-green-600: rgb(var(--spectrum-global-color-static-green-600-rgb));
-    --spectrum-global-color-static-green-700-rgb: 0, 105, 65;
-    --spectrum-global-color-static-green-700: rgb(var(--spectrum-global-color-static-green-700-rgb));
-    --spectrum-global-color-static-green-800-rgb: 0, 86, 53;
-    --spectrum-global-color-static-green-800: rgb(var(--spectrum-global-color-static-green-800-rgb));
-    --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199;
-    --spectrum-global-color-static-seafoam-200: rgb(var(--spectrum-global-color-static-seafoam-200-rgb));
-    --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180;
-    --spectrum-global-color-static-seafoam-300: rgb(var(--spectrum-global-color-static-seafoam-300-rgb));
-    --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160;
-    --spectrum-global-color-static-seafoam-400: rgb(var(--spectrum-global-color-static-seafoam-400-rgb));
-    --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139;
-    --spectrum-global-color-static-seafoam-500: rgb(var(--spectrum-global-color-static-seafoam-500-rgb));
-    --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118;
-    --spectrum-global-color-static-seafoam-600: rgb(var(--spectrum-global-color-static-seafoam-600-rgb));
-    --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99;
-    --spectrum-global-color-static-seafoam-700: rgb(var(--spectrum-global-color-static-seafoam-700-rgb));
-    --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80;
-    --spectrum-global-color-static-seafoam-800: rgb(var(--spectrum-global-color-static-seafoam-800-rgb));
-    --spectrum-global-color-static-blue-200-rgb: 130, 193, 251;
-    --spectrum-global-color-static-blue-200: rgb(var(--spectrum-global-color-static-blue-200-rgb));
-    --spectrum-global-color-static-blue-300-rgb: 98, 173, 247;
-    --spectrum-global-color-static-blue-300: rgb(var(--spectrum-global-color-static-blue-300-rgb));
-    --spectrum-global-color-static-blue-400-rgb: 66, 151, 244;
-    --spectrum-global-color-static-blue-400: rgb(var(--spectrum-global-color-static-blue-400-rgb));
-    --spectrum-global-color-static-blue-500-rgb: 27, 127, 245;
-    --spectrum-global-color-static-blue-500: rgb(var(--spectrum-global-color-static-blue-500-rgb));
-    --spectrum-global-color-static-blue-600-rgb: 4, 105, 227;
-    --spectrum-global-color-static-blue-600: rgb(var(--spectrum-global-color-static-blue-600-rgb));
-    --spectrum-global-color-static-blue-700-rgb: 0, 87, 190;
-    --spectrum-global-color-static-blue-700: rgb(var(--spectrum-global-color-static-blue-700-rgb));
-    --spectrum-global-color-static-blue-800-rgb: 0, 72, 153;
-    --spectrum-global-color-static-blue-800: rgb(var(--spectrum-global-color-static-blue-800-rgb));
-    --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255;
-    --spectrum-global-color-static-indigo-200: rgb(var(--spectrum-global-color-static-indigo-200-rgb));
-    --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255;
-    --spectrum-global-color-static-indigo-300: rgb(var(--spectrum-global-color-static-indigo-300-rgb));
-    --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253;
-    --spectrum-global-color-static-indigo-400: rgb(var(--spectrum-global-color-static-indigo-400-rgb));
-    --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246;
-    --spectrum-global-color-static-indigo-500: rgb(var(--spectrum-global-color-static-indigo-500-rgb));
-    --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232;
-    --spectrum-global-color-static-indigo-600: rgb(var(--spectrum-global-color-static-indigo-600-rgb));
-    --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208;
-    --spectrum-global-color-static-indigo-700: rgb(var(--spectrum-global-color-static-indigo-700-rgb));
-    --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208;
-    --spectrum-global-color-static-indigo-800: rgb(var(--spectrum-global-color-static-indigo-800-rgb));
-    --spectrum-global-color-static-purple-400-rgb: 178, 121, 250;
-    --spectrum-global-color-static-purple-400: rgb(var(--spectrum-global-color-static-purple-400-rgb));
-    --spectrum-global-color-static-purple-500-rgb: 161, 93, 246;
-    --spectrum-global-color-static-purple-500: rgb(var(--spectrum-global-color-static-purple-500-rgb));
-    --spectrum-global-color-static-purple-600-rgb: 142, 67, 234;
-    --spectrum-global-color-static-purple-600: rgb(var(--spectrum-global-color-static-purple-600-rgb));
-    --spectrum-global-color-static-purple-700-rgb: 120, 43, 216;
-    --spectrum-global-color-static-purple-700: rgb(var(--spectrum-global-color-static-purple-700-rgb));
-    --spectrum-global-color-static-purple-800-rgb: 98, 23, 190;
-    --spectrum-global-color-static-purple-800: rgb(var(--spectrum-global-color-static-purple-800-rgb));
-    --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230;
-    --spectrum-global-color-static-fuchsia-400: rgb(var(--spectrum-global-color-static-fuchsia-400-rgb));
-    --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212;
-    --spectrum-global-color-static-fuchsia-500: rgb(var(--spectrum-global-color-static-fuchsia-500-rgb));
-    --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187;
-    --spectrum-global-color-static-fuchsia-600: rgb(var(--spectrum-global-color-static-fuchsia-600-rgb));
-    --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163;
-    --spectrum-global-color-static-fuchsia-700: rgb(var(--spectrum-global-color-static-fuchsia-700-rgb));
-    --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136;
-    --spectrum-global-color-static-fuchsia-800: rgb(var(--spectrum-global-color-static-fuchsia-800-rgb));
-    --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175;
-    --spectrum-global-color-static-magenta-200: rgb(var(--spectrum-global-color-static-magenta-200-rgb));
-    --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157;
-    --spectrum-global-color-static-magenta-300: rgb(var(--spectrum-global-color-static-magenta-300-rgb));
-    --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135;
-    --spectrum-global-color-static-magenta-400: rgb(var(--spectrum-global-color-static-magenta-400-rgb));
-    --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111;
-    --spectrum-global-color-static-magenta-500: rgb(var(--spectrum-global-color-static-magenta-500-rgb));
-    --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89;
-    --spectrum-global-color-static-magenta-600: rgb(var(--spectrum-global-color-static-magenta-600-rgb));
-    --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72;
-    --spectrum-global-color-static-magenta-700: rgb(var(--spectrum-global-color-static-magenta-700-rgb));
-    --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58;
-    --spectrum-global-color-static-magenta-800: rgb(var(--spectrum-global-color-static-magenta-800-rgb));
-    --spectrum-global-color-static-transparent-white-200: #ffffff1a;
-    --spectrum-global-color-static-transparent-white-300: #ffffff40;
-    --spectrum-global-color-static-transparent-white-400: #fff6;
-    --spectrum-global-color-static-transparent-white-500: #ffffff8c;
-    --spectrum-global-color-static-transparent-white-600: #ffffffb3;
-    --spectrum-global-color-static-transparent-white-700: #fffc;
-    --spectrum-global-color-static-transparent-white-800: #ffffffe6;
-    --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255;
-    --spectrum-global-color-static-transparent-white-900: rgb(var(--spectrum-global-color-static-transparent-white-900-rgb));
-    --spectrum-global-color-static-transparent-black-200: #0000001a;
-    --spectrum-global-color-static-transparent-black-300: #00000040;
-    --spectrum-global-color-static-transparent-black-400: #0006;
-    --spectrum-global-color-static-transparent-black-500: #0000008c;
-    --spectrum-global-color-static-transparent-black-600: #000000b3;
-    --spectrum-global-color-static-transparent-black-700: #000c;
-    --spectrum-global-color-static-transparent-black-800: #000000e6;
-    --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0;
-    --spectrum-global-color-static-transparent-black-900: rgb(var(--spectrum-global-color-static-transparent-black-900-rgb));
-    --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, #1a4b83, #1a3979, #1a266f, #191264, #180057;
-    --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, #196b47, #105c45, #094d41, #033f3e, #00313a;
-    --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, #71167c, #560f74, #370b6e, #000968;
-    --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, #3ea8a6, #208288, #076769, #00494b, #002c2d;
-    --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, #397aa8, #1c5796, #163771, #10194d;
-    --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, #2f74b3, #265191, #163670, #0b194c;
-    --spectrum-semantic-negative-background-color: var(--spectrum-global-color-static-red-600);
-    --spectrum-semantic-negative-color-default: var(--spectrum-global-color-red-500);
-    --spectrum-semantic-negative-color-hover: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-border-color: var(--spectrum-global-color-red-400);
-    --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-status-color: var(--spectrum-global-color-red-400);
-    --spectrum-semantic-negative-text-color-large: var(--spectrum-global-color-red-500);
-    --spectrum-semantic-negative-text-color-small: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-text-color-small-hover: var(--spectrum-global-color-red-700);
-    --spectrum-semantic-negative-text-color-small-down: var(--spectrum-global-color-red-700);
-    --spectrum-semantic-negative-text-color-small-key-focus: var(--spectrum-global-color-red-600);
-    --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700);
-    --spectrum-semantic-negative-color-key-focus: var(--spectrum-global-color-red-400);
-    --spectrum-semantic-negative-background-color-default: var(--spectrum-global-color-static-red-600);
-    --spectrum-semantic-negative-background-color-hover: var(--spectrum-global-color-static-red-700);
-    --spectrum-semantic-negative-background-color-down: var(--spectrum-global-color-static-red-800);
-    --spectrum-semantic-negative-background-color-key-focus: var(--spectrum-global-color-static-red-700);
-    --spectrum-semantic-notice-background-color: var(--spectrum-global-color-static-orange-600);
-    --spectrum-semantic-notice-color-default: var(--spectrum-global-color-orange-500);
-    --spectrum-semantic-notice-color-dark: var(--spectrum-global-color-orange-600);
-    --spectrum-semantic-notice-border-color: var(--spectrum-global-color-orange-400);
-    --spectrum-semantic-notice-icon-color: var(--spectrum-global-color-orange-600);
-    --spectrum-semantic-notice-status-color: var(--spectrum-global-color-orange-400);
-    --spectrum-semantic-notice-text-color-large: var(--spectrum-global-color-orange-500);
-    --spectrum-semantic-notice-text-color-small: var(--spectrum-global-color-orange-600);
-    --spectrum-semantic-notice-color-down: var(--spectrum-global-color-orange-700);
-    --spectrum-semantic-notice-color-key-focus: var(--spectrum-global-color-orange-400);
-    --spectrum-semantic-notice-background-color-default: var(--spectrum-global-color-static-orange-600);
-    --spectrum-semantic-notice-background-color-hover: var(--spectrum-global-color-static-orange-700);
-    --spectrum-semantic-notice-background-color-down: var(--spectrum-global-color-static-orange-800);
-    --spectrum-semantic-notice-background-color-key-focus: var(--spectrum-global-color-static-orange-700);
-    --spectrum-semantic-positive-background-color: var(--spectrum-global-color-static-green-600);
-    --spectrum-semantic-positive-color-default: var(--spectrum-global-color-green-500);
-    --spectrum-semantic-positive-color-dark: var(--spectrum-global-color-green-600);
-    --spectrum-semantic-positive-border-color: var(--spectrum-global-color-green-400);
-    --spectrum-semantic-positive-icon-color: var(--spectrum-global-color-green-600);
-    --spectrum-semantic-positive-status-color: var(--spectrum-global-color-green-400);
-    --spectrum-semantic-positive-text-color-large: var(--spectrum-global-color-green-500);
-    --spectrum-semantic-positive-text-color-small: var(--spectrum-global-color-green-600);
-    --spectrum-semantic-positive-color-down: var(--spectrum-global-color-green-700);
-    --spectrum-semantic-positive-color-key-focus: var(--spectrum-global-color-green-400);
-    --spectrum-semantic-positive-background-color-default: var(--spectrum-global-color-static-green-600);
-    --spectrum-semantic-positive-background-color-hover: var(--spectrum-global-color-static-green-700);
-    --spectrum-semantic-positive-background-color-down: var(--spectrum-global-color-static-green-800);
-    --spectrum-semantic-positive-background-color-key-focus: var(--spectrum-global-color-static-green-700);
-    --spectrum-semantic-informative-background-color: var(--spectrum-global-color-static-blue-600);
-    --spectrum-semantic-informative-color-default: var(--spectrum-global-color-blue-500);
-    --spectrum-semantic-informative-color-dark: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-informative-border-color: var(--spectrum-global-color-blue-400);
-    --spectrum-semantic-informative-icon-color: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-informative-status-color: var(--spectrum-global-color-blue-400);
-    --spectrum-semantic-informative-text-color-large: var(--spectrum-global-color-blue-500);
-    --spectrum-semantic-informative-text-color-small: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-informative-color-down: var(--spectrum-global-color-blue-700);
-    --spectrum-semantic-informative-color-key-focus: var(--spectrum-global-color-blue-400);
-    --spectrum-semantic-informative-background-color-default: var(--spectrum-global-color-static-blue-600);
-    --spectrum-semantic-informative-background-color-hover: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-informative-background-color-down: var(--spectrum-global-color-static-blue-800);
-    --spectrum-semantic-informative-background-color-key-focus: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-cta-background-color-default: var(--spectrum-global-color-static-blue-600);
-    --spectrum-semantic-cta-background-color-hover: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-cta-background-color-down: var(--spectrum-global-color-static-blue-800);
-    --spectrum-semantic-cta-background-color-key-focus: var(--spectrum-global-color-static-blue-700);
-    --spectrum-semantic-emphasized-border-color-default: var(--spectrum-global-color-blue-500);
-    --spectrum-semantic-emphasized-border-color-hover: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-emphasized-border-color-down: var(--spectrum-global-color-blue-700);
-    --spectrum-semantic-emphasized-border-color-key-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-semantic-neutral-background-color-default: var(--spectrum-global-color-static-gray-700);
-    --spectrum-semantic-neutral-background-color-hover: var(--spectrum-global-color-static-gray-800);
-    --spectrum-semantic-neutral-background-color-down: var(--spectrum-global-color-static-gray-900);
-    --spectrum-semantic-neutral-background-color-key-focus: var(--spectrum-global-color-static-gray-800);
-    --spectrum-semantic-presence-color-1: var(--spectrum-global-color-static-red-500);
-    --spectrum-semantic-presence-color-2: var(--spectrum-global-color-static-orange-400);
-    --spectrum-semantic-presence-color-3: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-semantic-presence-color-4-rgb: 75, 204, 162;
-    --spectrum-semantic-presence-color-4: rgb(var(--spectrum-semantic-presence-color-4-rgb));
-    --spectrum-semantic-presence-color-5-rgb: 0, 199, 255;
-    --spectrum-semantic-presence-color-5: rgb(var(--spectrum-semantic-presence-color-5-rgb));
-    --spectrum-semantic-presence-color-6-rgb: 0, 140, 184;
-    --spectrum-semantic-presence-color-6: rgb(var(--spectrum-semantic-presence-color-6-rgb));
-    --spectrum-semantic-presence-color-7-rgb: 126, 75, 243;
-    --spectrum-semantic-presence-color-7: rgb(var(--spectrum-semantic-presence-color-7-rgb));
-    --spectrum-semantic-presence-color-8: var(--spectrum-global-color-static-fuchsia-600);
-    --spectrum-global-dimension-static-percent-50: 50%;
-    --spectrum-global-dimension-static-percent-70: 70%;
-    --spectrum-global-dimension-static-percent-100: 100%;
-    --spectrum-global-dimension-static-breakpoint-xsmall: 304px;
-    --spectrum-global-dimension-static-breakpoint-small: 768px;
-    --spectrum-global-dimension-static-breakpoint-medium: 1280px;
-    --spectrum-global-dimension-static-breakpoint-large: 1768px;
-    --spectrum-global-dimension-static-breakpoint-xlarge: 2160px;
-    --spectrum-global-dimension-static-grid-columns: 12;
-    --spectrum-global-dimension-static-grid-fluid-width: 100%;
-    --spectrum-global-dimension-static-grid-fixed-max-width: 1280px;
-    --spectrum-global-dimension-static-size-0: 0px;
-    --spectrum-global-dimension-static-size-10: 1px;
-    --spectrum-global-dimension-static-size-25: 2px;
-    --spectrum-global-dimension-static-size-40: 3px;
-    --spectrum-global-dimension-static-size-50: 4px;
-    --spectrum-global-dimension-static-size-65: 5px;
-    --spectrum-global-dimension-static-size-75: 6px;
-    --spectrum-global-dimension-static-size-85: 7px;
-    --spectrum-global-dimension-static-size-100: 8px;
-    --spectrum-global-dimension-static-size-115: 9px;
-    --spectrum-global-dimension-static-size-125: 10px;
-    --spectrum-global-dimension-static-size-130: 11px;
-    --spectrum-global-dimension-static-size-150: 12px;
-    --spectrum-global-dimension-static-size-160: 13px;
-    --spectrum-global-dimension-static-size-175: 14px;
-    --spectrum-global-dimension-static-size-185: 15px;
-    --spectrum-global-dimension-static-size-200: 16px;
-    --spectrum-global-dimension-static-size-225: 18px;
-    --spectrum-global-dimension-static-size-250: 20px;
-    --spectrum-global-dimension-static-size-275: 22px;
-    --spectrum-global-dimension-static-size-300: 24px;
-    --spectrum-global-dimension-static-size-325: 26px;
-    --spectrum-global-dimension-static-size-350: 28px;
-    --spectrum-global-dimension-static-size-400: 32px;
-    --spectrum-global-dimension-static-size-450: 36px;
-    --spectrum-global-dimension-static-size-500: 40px;
-    --spectrum-global-dimension-static-size-550: 44px;
-    --spectrum-global-dimension-static-size-600: 48px;
-    --spectrum-global-dimension-static-size-700: 56px;
-    --spectrum-global-dimension-static-size-800: 64px;
-    --spectrum-global-dimension-static-size-900: 72px;
-    --spectrum-global-dimension-static-size-1000: 80px;
-    --spectrum-global-dimension-static-size-1200: 96px;
-    --spectrum-global-dimension-static-size-1700: 136px;
-    --spectrum-global-dimension-static-size-2400: 192px;
-    --spectrum-global-dimension-static-size-2500: 200px;
-    --spectrum-global-dimension-static-size-2600: 208px;
-    --spectrum-global-dimension-static-size-2800: 224px;
-    --spectrum-global-dimension-static-size-3200: 256px;
-    --spectrum-global-dimension-static-size-3400: 272px;
-    --spectrum-global-dimension-static-size-3500: 280px;
-    --spectrum-global-dimension-static-size-3600: 288px;
-    --spectrum-global-dimension-static-size-3800: 304px;
-    --spectrum-global-dimension-static-size-4600: 368px;
-    --spectrum-global-dimension-static-size-5000: 400px;
-    --spectrum-global-dimension-static-size-6000: 480px;
-    --spectrum-global-dimension-static-size-16000: 1280px;
-    --spectrum-global-dimension-static-font-size-50: 11px;
-    --spectrum-global-dimension-static-font-size-75: 12px;
-    --spectrum-global-dimension-static-font-size-100: 14px;
-    --spectrum-global-dimension-static-font-size-150: 15px;
-    --spectrum-global-dimension-static-font-size-200: 16px;
-    --spectrum-global-dimension-static-font-size-300: 18px;
-    --spectrum-global-dimension-static-font-size-400: 20px;
-    --spectrum-global-dimension-static-font-size-500: 22px;
-    --spectrum-global-dimension-static-font-size-600: 25px;
-    --spectrum-global-dimension-static-font-size-700: 28px;
-    --spectrum-global-dimension-static-font-size-800: 32px;
-    --spectrum-global-dimension-static-font-size-900: 36px;
-    --spectrum-global-dimension-static-font-size-1000: 40px;
-    --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-global-font-family-serif: adobe-clean-serif, "Source Serif Pro", Georgia, serif;
-    --spectrum-global-font-family-code: "Source Code Pro", Monaco, monospace;
-    --spectrum-global-font-weight-thin: 100;
-    --spectrum-global-font-weight-ultra-light: 200;
-    --spectrum-global-font-weight-light: 300;
-    --spectrum-global-font-weight-regular: 400;
-    --spectrum-global-font-weight-medium: 500;
-    --spectrum-global-font-weight-semi-bold: 600;
-    --spectrum-global-font-weight-bold: 700;
-    --spectrum-global-font-weight-extra-bold: 800;
-    --spectrum-global-font-weight-black: 900;
-    --spectrum-global-font-style-regular: normal;
-    --spectrum-global-font-style-italic: italic;
-    --spectrum-global-font-letter-spacing-none: 0;
-    --spectrum-global-font-letter-spacing-small: 0.0125em;
-    --spectrum-global-font-letter-spacing-han: 0.05em;
-    --spectrum-global-font-letter-spacing-medium: 0.06em;
-    --spectrum-global-font-line-height-large: 1.7;
-    --spectrum-global-font-line-height-medium: 1.5;
-    --spectrum-global-font-line-height-small: 1.3;
-    --spectrum-global-font-multiplier-0: 0em;
-    --spectrum-global-font-multiplier-25: 0.25em;
-    --spectrum-global-font-multiplier-75: 0.75em;
-    --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", "sans-serif";
-    --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, "SimSun", "Heiti SC Light", "sans-serif";
-    --spectrum-global-font-font-family-ko: adobe-clean-han-korean, source-han-korean, "Malgun Gothic", "Apple Gothic", "sans-serif";
-    --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
-    --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-    --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550);
-    --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-loupe-entry-animation-duration: var(--spectrum-global-animation-duration-300);
-    --spectrum-alias-loupe-exit-animation-duration: var(--spectrum-global-animation-duration-300);
-    --spectrum-alias-heading-text-line-height: var(--spectrum-global-font-line-height-small);
-    --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-light: var(--spectrum-global-font-weight-light);
-    --spectrum-alias-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-light);
-    --spectrum-alias-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-text-font-weight-strong-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-heading-margin-bottom: var(--spectrum-global-font-multiplier-25);
-    --spectrum-alias-subheading-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base);
-    --spectrum-alias-body-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-body-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-body-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-body-margin-bottom: var(--spectrum-global-font-multiplier-75);
-    --spectrum-alias-detail-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-detail-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-detail-text-font-weight-light: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-heading-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-article-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-article-body-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-article-body-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-subheading-text-font-weight: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-article-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-article-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-article-detail-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-code-text-font-family: var(--spectrum-global-font-family-code);
-    --spectrum-alias-code-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-code-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-code-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0);
-    --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar);
-    --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he);
-    --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh);
-    --spectrum-alias-font-family-zhhans: var(--spectrum-global-font-font-family-zhhans);
-    --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko);
-    --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja);
-    --spectrum-alias-font-family-condensed: var(--spectrum-global-font-font-family-condensed);
-    --spectrum-alias-button-text-line-height: var(--spectrum-global-font-line-height-small);
-    --spectrum-alias-component-text-line-height: var(--spectrum-global-font-line-height-small);
-    --spectrum-alias-han-component-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-serif-text-font-family: var(--spectrum-global-font-family-serif);
-    --spectrum-alias-han-heading-text-line-height: var(--spectrum-global-font-line-height-medium);
-    --spectrum-alias-han-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(--spectrum-global-font-weight-extra-bold);
-    --spectrum-alias-han-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-heading-text-font-weight-light: var(--spectrum-global-font-weight-light);
-    --spectrum-alias-han-heading-text-font-weight-light-emphasis: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-han-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-body-text-line-height: var(--spectrum-global-font-line-height-large);
-    --spectrum-alias-han-body-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-han-body-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-body-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-subheading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-subheading-text-font-weight-emphasis: var(--spectrum-global-font-weight-extra-bold);
-    --spectrum-alias-han-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-    --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
-    --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
-    --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-}
-
-:root,
-:host {
-    --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600);
-    --spectrum-alias-item-rounded-border-radius-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-rounded-border-radius-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-rounded-border-radius-l: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-item-rounded-border-radius-xl: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-item-text-size-s: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-item-text-size-m: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-item-text-size-l: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-item-text-size-xl: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-item-text-padding-top-s: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-item-text-padding-top-m: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-text-padding-top-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-text-padding-bottom-m: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-text-padding-bottom-l: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-text-padding-bottom-xl: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-icon-padding-top-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-icon-padding-top-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-icon-padding-top-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-icon-padding-top-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-icon-padding-bottom-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-icon-padding-bottom-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-icon-padding-bottom-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-icon-padding-bottom-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-rounded-padding-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-rounded-padding-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-rounded-padding-l: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-item-rounded-padding-xl: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-item-icononly-padding-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-icononly-padding-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-icononly-padding-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-icononly-padding-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-control-gap-s: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-gap-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-gap-l: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-control-gap-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-workflow-icon-gap-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-workflow-icon-gap-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-workflow-icon-gap-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-workflow-icon-gap-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-ui-icon-gap-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-ui-icon-gap-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-ui-icon-gap-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-clearbutton-gap-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-item-clearbutton-gap-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-clearbutton-gap-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-clearbutton-gap-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-workflow-padding-left-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-workflow-padding-left-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-workflow-padding-left-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-rounded-workflow-padding-left-s: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-rounded-workflow-padding-left-l: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-mark-padding-top-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-item-mark-padding-top-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-mark-padding-top-xl: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-mark-padding-bottom-s: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-item-mark-padding-bottom-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-mark-padding-bottom-xl: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-item-mark-padding-left-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-mark-padding-left-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-mark-padding-left-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-control-1-size-s: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-item-control-1-size-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-control-2-size-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-control-2-size-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-control-2-size-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-control-2-size-xxl: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-item-control-2-border-radius-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-2-border-radius-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-control-2-border-radius-l: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-control-2-border-radius-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-2-border-radius-xxl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-2-padding-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-2-padding-m: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-2-padding-l: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-2-padding-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-control-3-height-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-control-3-height-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-item-control-3-height-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-control-3-border-radius-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-3-border-radius-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-item-control-3-border-radius-l: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-item-control-3-border-radius-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-3-padding-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-item-control-3-padding-m: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-control-3-padding-l: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-3-padding-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-heading-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300);
-    --spectrum-alias-heading-xxl-text-size: var(--spectrum-global-dimension-font-size-1100);
-    --spectrum-alias-heading-xl-text-size: var(--spectrum-global-dimension-font-size-900);
-    --spectrum-alias-heading-l-text-size: var(--spectrum-global-dimension-font-size-700);
-    --spectrum-alias-heading-m-text-size: var(--spectrum-global-dimension-font-size-500);
-    --spectrum-alias-heading-s-text-size: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-heading-xs-text-size: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-xxs-text-size: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200);
-    --spectrum-alias-heading-xxl-margin-top: var(--spectrum-global-dimension-font-size-900);
-    --spectrum-alias-heading-xl-margin-top: var(--spectrum-global-dimension-font-size-800);
-    --spectrum-alias-heading-l-margin-top: var(--spectrum-global-dimension-font-size-600);
-    --spectrum-alias-heading-m-margin-top: var(--spectrum-global-dimension-font-size-400);
-    --spectrum-alias-heading-s-margin-top: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-xs-margin-top: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-xxs-margin-top: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-heading-han-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300);
-    --spectrum-alias-heading-han-xxl-text-size: var(--spectrum-global-dimension-font-size-900);
-    --spectrum-alias-heading-han-xl-text-size: var(--spectrum-global-dimension-font-size-800);
-    --spectrum-alias-heading-han-l-text-size: var(--spectrum-global-dimension-font-size-600);
-    --spectrum-alias-heading-han-m-text-size: var(--spectrum-global-dimension-font-size-400);
-    --spectrum-alias-heading-han-s-text-size: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-heading-han-xs-text-size: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-han-xxs-text-size: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-han-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200);
-    --spectrum-alias-heading-han-xxl-margin-top: var(--spectrum-global-dimension-font-size-800);
-    --spectrum-alias-heading-han-xl-margin-top: var(--spectrum-global-dimension-font-size-700);
-    --spectrum-alias-heading-han-l-margin-top: var(--spectrum-global-dimension-font-size-500);
-    --spectrum-alias-heading-han-m-margin-top: var(--spectrum-global-dimension-font-size-300);
-    --spectrum-alias-heading-han-s-margin-top: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-heading-han-xs-margin-top: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-heading-han-xxs-margin-top: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-component-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-component-border-radius-quiet: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-component-focusring-gap: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-component-focusring-gap-emphasized: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-component-focusring-size: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-component-focusring-size-emphasized: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-input-border-size: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-input-focusring-gap: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-input-quiet-focusline-gap: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-control-two-size-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-control-two-size-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-control-two-size-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-control-two-size-xxl: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-control-two-border-radius-s: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-control-two-border-radius-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-control-two-border-radius-l: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-control-two-border-radius-xl: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-control-two-border-radius-xxl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-control-two-focus-ring-border-radius-s: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-control-two-focus-ring-border-radius-m: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-control-two-focus-ring-border-radius-l: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-control-two-focus-ring-border-radius-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-control-two-focus-ring-border-radius-xxl: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-control-three-height-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-control-three-height-l: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-control-three-height-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-infieldbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-infieldbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-infieldbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-infieldbutton-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-border-radius-sided: 0;
-    --spectrum-alias-infieldbutton-border-size: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-infieldbutton-fill-padding-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-infieldbutton-fill-padding-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-infieldbutton-fill-padding-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-infieldbutton-fill-padding-xl: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-infieldbutton-padding-s: 0;
-    --spectrum-alias-infieldbutton-padding-m: 0;
-    --spectrum-alias-infieldbutton-padding-l: 0;
-    --spectrum-alias-infieldbutton-padding-xl: 0;
-    --spectrum-alias-infieldbutton-full-height-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-infieldbutton-full-height-m: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-infieldbutton-full-height-l: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-infieldbutton-full-height-xl: var(--spectrum-global-dimension-size-600);
-    --spectrum-alias-infieldbutton-half-height-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-infieldbutton-half-height-m: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-infieldbutton-half-height-l: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-infieldbutton-half-height-xl: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-stepperbutton-gap: 0;
-    --spectrum-alias-stepperbutton-width-s: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-stepperbutton-width-m: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-stepperbutton-width-l: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-stepperbutton-width-xl: var(--spectrum-global-dimension-size-450);
-    --spectrum-alias-stepperbutton-icon-x-offset-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-stepperbutton-icon-x-offset-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-stepperbutton-icon-x-offset-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-stepperbutton-icon-x-offset-xl: var(--spectrum-global-dimension-size-130);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-s: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-m: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-l: var(--spectrum-global-dimension-size-65);
-    --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var(--spectrum-global-dimension-size-40);
-    --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-stepperbutton-radius-touching: 0;
-    --spectrum-alias-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-clearbutton-icon-margin-xl: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-clearbutton-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-pickerbutton-icononly-padding-x-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-pickerbutton-icononly-padding-x-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-pickerbutton-icononly-padding-x-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-pickerbutton-icononly-padding-x-xl: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-pickerbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-pickerbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-pickerbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-pickerbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-pickerbutton-label-padding-y-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-pickerbutton-label-padding-y-m: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-pickerbutton-label-padding-y-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-pickerbutton-label-padding-y-xl: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-pickerbutton-border-radius-rounded: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0;
-    --spectrum-alias-search-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-search-border-radius-quiet: 0;
-    --spectrum-alias-combobox-quiet-button-offset-x: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-thumbnail-border-radius-small: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-actiongroup-button-gap: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-actiongroup-button-gap-compact: var(--spectrum-global-dimension-size-0);
-    --spectrum-alias-actiongroup-button-gap-quiet: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-actiongroup-button-gap-quiet-compact: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-search-padding-left-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-search-padding-left-l: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-search-padding-left-xl: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-percent-50: 50%;
-    --spectrum-alias-percent-70: 70%;
-    --spectrum-alias-percent-100: 100%;
-    --spectrum-alias-breakpoint-xsmall: 304px;
-    --spectrum-alias-breakpoint-small: 768px;
-    --spectrum-alias-breakpoint-medium: 1280px;
-    --spectrum-alias-breakpoint-large: 1768px;
-    --spectrum-alias-breakpoint-xlarge: 2160px;
-    --spectrum-alias-grid-columns: 12;
-    --spectrum-alias-grid-fluid-width: 100%;
-    --spectrum-alias-grid-fixed-max-width: 1280px;
-    --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400);
-    --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500);
-    --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550);
-    --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-focus-ring-gap-small: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-focus-ring-size-small: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-dropshadow-offset-y: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-font-size-default: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-layout-label-gap-size: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-pill-button-text-size: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-pill-button-text-baseline: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-border-radius-xsmall: var(--spectrum-global-dimension-size-10);
-    --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-border-radius-medium: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-border-radius-large: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-border-radius-xlarge: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-focus-ring-border-radius-xsmall: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-focus-ring-border-radius-small: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-focus-ring-border-radius-medium: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-focus-ring-border-radius-large: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-focus-ring-border-radius-xlarge: var(--spectrum-global-dimension-size-350);
-    --spectrum-alias-single-line-height: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-single-line-width: var(--spectrum-global-dimension-size-2400);
-    --spectrum-alias-workflow-icon-size-s: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-workflow-icon-size-m: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-workflow-icon-size-xl: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-ui-icon-alert-size-75: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-ui-icon-alert-size-100: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-ui-icon-alert-size-200: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-ui-icon-alert-size-300: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-ui-icon-triplegripper-size-100-height: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-ui-icon-doublegripper-size-100-width: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-ui-icon-singlegripper-size-100-width: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-ui-icon-cornertriangle-size-75: var(--spectrum-global-dimension-size-65);
-    --spectrum-alias-ui-icon-cornertriangle-size-200: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-ui-icon-asterisk-size-75: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-asterisk-size-100: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275);
-    --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-avatar-border-size: var(--spectrum-global-dimension-size-0);
-    --spectrum-alias-tag-border-radius: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-tag-border-size-default: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-tag-border-size-key-focus: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-tag-border-size-disabled: var(--spectrum-global-dimension-size-0);
-    --spectrum-alias-tag-border-size: var(--spectrum-global-dimension-static-size-10);
-    --spectrum-alias-tag-padding-right-s: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-tag-padding-right-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-tag-padding-right-l: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-tag-font-size-s: var(--spectrum-global-dimension-font-size-75);
-    --spectrum-alias-tag-font-size-m: var(--spectrum-global-dimension-font-size-100);
-    --spectrum-alias-tag-font-size-l: var(--spectrum-global-dimension-font-size-200);
-    --spectrum-alias-tag-text-padding-top-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-tag-text-padding-top-m: var(--spectrum-global-dimension-size-75);
-    --spectrum-alias-tag-text-padding-top-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200);
-    --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225);
-    --spectrum-alias-tag-icon-margin-top-s: var(--spectrum-global-dimension-size-50);
-    --spectrum-alias-tag-icon-margin-top-m: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-tag-icon-margin-top-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-tag-icon-margin-right-s: var(--spectrum-global-dimension-size-85);
-    --spectrum-alias-tag-icon-margin-right-m: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-tag-icon-margin-right-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-tag-clearbutton-width-s: var(--spectrum-global-dimension-size-300);
-    --spectrum-alias-tag-clearbutton-width-m: var(--spectrum-global-dimension-size-400);
-    --spectrum-alias-tag-clearbutton-width-l: var(--spectrum-global-dimension-size-500);
-    --spectrum-alias-tag-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-100);
-    --spectrum-alias-tag-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-tag-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-185);
-    --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-tag-focusring-gap: var(--spectrum-global-dimension-static-size-0);
-    --spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25);
-    --spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-600);
-    --spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-800);
-}
-
-:root,
-:host {
-    --spectrum-alias-colorhandle-outer-border-color: #0000006b;
-    --spectrum-alias-transparent-blue-background-color-hover: #0057be26;
-    --spectrum-alias-transparent-blue-background-color-down: #0048994d;
-    --spectrum-alias-transparent-blue-background-color-key-focus: var(--spectrum-alias-transparent-blue-background-color-hover);
-    --spectrum-alias-transparent-blue-background-color-mouse-focus: var(--spectrum-alias-transparent-blue-background-color-hover);
-    --spectrum-alias-transparent-blue-background-color: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-transparent-red-background-color-hover: #9a000026;
-    --spectrum-alias-transparent-red-background-color-down: #7c00004d;
-    --spectrum-alias-transparent-red-background-color-key-focus: var(--spectrum-alias-transparent-red-background-color-hover);
-    --spectrum-alias-transparent-red-background-color-mouse-focus: var(--spectrum-alias-transparent-red-background-color-hover);
-    --spectrum-alias-transparent-red-background-color: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-component-text-color-disabled: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-component-text-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-component-text-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-component-text-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-component-text-color-key-focus: var(--spectrum-alias-component-text-color-hover);
-    --spectrum-alias-component-text-color-mouse-focus: var(--spectrum-alias-component-text-color-hover);
-    --spectrum-alias-component-text-color: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-component-text-color-selected-default: var(--spectrum-alias-component-text-color-default);
-    --spectrum-alias-component-text-color-selected-hover: var(--spectrum-alias-component-text-color-hover);
-    --spectrum-alias-component-text-color-selected-down: var(--spectrum-alias-component-text-color-down);
-    --spectrum-alias-component-text-color-selected-key-focus: var(--spectrum-alias-component-text-color-key-focus);
-    --spectrum-alias-component-text-color-selected-mouse-focus: var(--spectrum-alias-component-text-color-mouse-focus);
-    --spectrum-alias-component-text-color-selected: var(--spectrum-alias-component-text-color-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-default: var(--spectrum-global-color-static-white);
-    --spectrum-alias-component-text-color-emphasized-selected-hover: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-down: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-key-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-emphasized-selected: var(--spectrum-alias-component-text-color-emphasized-selected-default);
-    --spectrum-alias-component-text-color-error-default: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-component-text-color-error-hover: var(--spectrum-semantic-negative-text-color-small-hover);
-    --spectrum-alias-component-text-color-error-down: var(--spectrum-semantic-negative-text-color-small-down);
-    --spectrum-alias-component-text-color-error-key-focus: var(--spectrum-semantic-negative-text-color-small-key-focus);
-    --spectrum-alias-component-text-color-error-mouse-focus: var(--spectrum-semantic-negative-text-color-small-key-focus);
-    --spectrum-alias-component-text-color-error: var(--spectrum-alias-component-text-color-error-default);
-    --spectrum-alias-component-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
-    --spectrum-alias-component-icon-color-default: var(--spectrum-alias-icon-color);
-    --spectrum-alias-component-icon-color-hover: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-component-icon-color-down: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-component-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-component-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-component-icon-color: var(--spectrum-alias-component-icon-color-default);
-    --spectrum-alias-component-icon-color-selected: var(--spectrum-alias-icon-color-selected-neutral-subdued);
-    --spectrum-alias-component-icon-color-emphasized-selected-default: var(--spectrum-global-color-static-white);
-    --spectrum-alias-component-icon-color-emphasized-selected-hover: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-icon-color-emphasized-selected-down: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-icon-color-emphasized-selected: var(--spectrum-alias-component-icon-color-emphasized-selected-default);
-    --spectrum-alias-component-background-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-quiet-disabled: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet-selected-disabled: var(--spectrum-alias-component-background-color-disabled);
-    --spectrum-alias-component-background-color-default: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-component-background-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-component-background-color-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-component-background-color: var(--spectrum-alias-component-background-color-default);
-    --spectrum-alias-component-background-color-selected-default: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-selected-hover: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-selected-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-selected-key-focus: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-background-color-selected: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-background-color-quiet-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet-hover: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet-down: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-component-background-color-quiet-key-focus: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-component-background-color-quiet: var(--spectrum-alias-component-background-color-quiet-default);
-    --spectrum-alias-component-background-color-quiet-selected-default: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-background-color-quiet-selected-hover: var(--spectrum-alias-component-background-color-selected-hover);
-    --spectrum-alias-component-background-color-quiet-selected-down: var(--spectrum-alias-component-background-color-selected-down);
-    --spectrum-alias-component-background-color-quiet-selected-key-focus: var(--spectrum-alias-component-background-color-selected-key-focus);
-    --spectrum-alias-component-background-color-quiet-selected: var(--spectrum-alias-component-background-color-selected-default);
-    --spectrum-alias-component-background-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default);
-    --spectrum-alias-component-background-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover);
-    --spectrum-alias-component-background-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down);
-    --spectrum-alias-component-background-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus);
-    --spectrum-alias-component-background-color-emphasized-selected: var(--spectrum-alias-component-background-color-emphasized-selected-default);
-    --spectrum-alias-component-border-color-disabled: var(--spectrum-alias-border-color-disabled);
-    --spectrum-alias-component-border-color-quiet-disabled: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-default: var(--spectrum-alias-border-color);
-    --spectrum-alias-component-border-color-hover: var(--spectrum-alias-border-color-hover);
-    --spectrum-alias-component-border-color-down: var(--spectrum-alias-border-color-down);
-    --spectrum-alias-component-border-color-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-component-border-color: var(--spectrum-alias-component-border-color-default);
-    --spectrum-alias-component-border-color-selected-default: var(--spectrum-alias-border-color);
-    --spectrum-alias-component-border-color-selected-hover: var(--spectrum-alias-border-color-hover);
-    --spectrum-alias-component-border-color-selected-down: var(--spectrum-alias-border-color-down);
-    --spectrum-alias-component-border-color-selected-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-component-border-color-selected: var(--spectrum-alias-component-border-color-selected-default);
-    --spectrum-alias-component-border-color-quiet-default: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-quiet-hover: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-quiet-down: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-component-border-color-quiet-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-component-border-color-quiet: var(--spectrum-alias-component-border-color-quiet-default);
-    --spectrum-alias-component-border-color-quiet-selected-default: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-border-color-quiet-selected-hover: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-border-color-quiet-selected-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-component-border-color-quiet-selected-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-component-border-color-quiet-selected: var(--spectrum-alias-component-border-color-quiet-selected-default);
-    --spectrum-alias-component-border-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default);
-    --spectrum-alias-component-border-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover);
-    --spectrum-alias-component-border-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down);
-    --spectrum-alias-component-border-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus);
-    --spectrum-alias-component-border-color-emphasized-selected: var(--spectrum-alias-component-border-color-emphasized-selected-default);
-    --spectrum-alias-tag-border-color-default: var(--spectrum-alias-border-color-darker-default);
-    --spectrum-alias-tag-border-color-hover: var(--spectrum-alias-border-color-darker-hover);
-    --spectrum-alias-tag-border-color-down: var(--spectrum-alias-border-color-darker-hover);
-    --spectrum-alias-tag-border-color-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-tag-border-color-error-default: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-border-color-error-hover: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-border-color-error-down: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-border-color-error-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-tag-border-color-error-selected: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-border-color-selected: var(--spectrum-alias-tag-background-color-selected-default);
-    --spectrum-alias-tag-border-color: var(--spectrum-alias-tag-border-color-default);
-    --spectrum-alias-tag-border-color-disabled: var(--spectrum-alias-border-color-disabled);
-    --spectrum-alias-tag-border-color-error: var(--spectrum-alias-tag-border-color-error-default);
-    --spectrum-alias-tag-text-color-default: var(--spectrum-alias-label-text-color);
-    --spectrum-alias-tag-text-color-hover: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down);
-    --spectrum-alias-tag-text-color-key-focus: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tag-text-color-disabled: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-tag-text-color: var(--spectrum-alias-tag-text-color-default);
-    --spectrum-alias-tag-text-color-error-default: var(--spectrum-global-color-red-600);
-    --spectrum-alias-tag-text-color-error-hover: var(--spectrum-global-color-red-700);
-    --spectrum-alias-tag-text-color-error-down: var(--spectrum-global-color-red-700);
-    --spectrum-alias-tag-text-color-error-key-focus: var(--spectrum-global-color-red-700);
-    --spectrum-alias-tag-text-color-error: var(--spectrum-alias-tag-text-color-error-default);
-    --spectrum-alias-tag-text-color-selected: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color);
-    --spectrum-alias-tag-icon-color-hover: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-tag-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tag-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
-    --spectrum-alias-tag-icon-color: var(--spectrum-alias-tag-icon-color-default);
-    --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600);
-    --spectrum-alias-tag-icon-color-selected: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-tag-background-color-default: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-tag-background-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color: var(--spectrum-alias-tag-background-color-default);
-    --spectrum-alias-tag-background-color-error-default: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-error-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-error-down: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-tag-background-color-error-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-tag-background-color-error: var(--spectrum-alias-tag-background-color-error-default);
-    --spectrum-alias-tag-background-color-error-selected-default: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-tag-background-color-error-selected-hover: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-background-color-error-selected-down: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-tag-background-color-error-selected-key-focus: var(--spectrum-global-color-red-600);
-    --spectrum-alias-tag-background-color-error-selected: var(--spectrum-alias-tag-background-color-error-selected-default);
-    --spectrum-alias-tag-background-color-selected-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-tag-background-color-selected-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-tag-background-color-selected-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tag-background-color-selected-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tag-background-color-selected: var(--spectrum-alias-tag-background-color-selected-default);
-    --spectrum-alias-tag-focusring-border-color-default: transparent;
-    --spectrum-alias-tag-focusring-border-color-key-focus: transparent;
-    --spectrum-alias-tag-focusring-border-color-disabled: transparent;
-    --spectrum-alias-tag-focusring-border-color-selected-key-focus: var(--spectrum-alias-focus-ring-color);
-    --spectrum-alias-tag-focusring-border-color: var(--spectrum-alias-tag-focusring-border-color-default);
-    --spectrum-alias-avatar-border-color-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-hover: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-down: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-key-focus: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color: var(--spectrum-alias-avatar-border-color-default);
-    --spectrum-alias-avatar-border-color-disabled: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected-hover: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected-down: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected-key-focus: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-avatar-border-color-selected: var(--spectrum-alias-avatar-border-color-selected-default);
-    --spectrum-alias-avatar-border-color-selected-disabled: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-toggle-background-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-toggle-background-color-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-background-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-toggle-background-color-key-focus: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-background-color: var(--spectrum-alias-toggle-background-color-default);
-    --spectrum-alias-toggle-background-color-emphasized-selected-default: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-toggle-background-color-emphasized-selected-hover: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-toggle-background-color-emphasized-selected-down: var(--spectrum-global-color-blue-700);
-    --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-toggle-background-color-emphasized-selected: var(--spectrum-alias-toggle-background-color-emphasized-selected-default);
-    --spectrum-alias-toggle-border-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-toggle-border-color-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-border-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-toggle-border-color-key-focus: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-toggle-border-color: var(--spectrum-alias-toggle-border-color-default);
-    --spectrum-alias-toggle-icon-color-selected: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-toggle-icon-color-emphasized-selected: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-button-primary-background-color-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-button-primary-background-color-hover: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-background-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-button-primary-background-color-key-focus: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-background-color: var(--spectrum-alias-button-primary-background-color-default);
-    --spectrum-alias-button-primary-border-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-border-color-hover: var(--spectrum-alias-button-primary-background-color-hover);
-    --spectrum-alias-button-primary-border-color-down: var(--spectrum-alias-button-primary-background-color-down);
-    --spectrum-alias-button-primary-border-color-key-focus: var(--spectrum-alias-button-primary-background-color-key-focus);
-    --spectrum-alias-button-primary-border-color: var(--spectrum-alias-button-primary-border-color-default);
-    --spectrum-alias-button-primary-text-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-primary-text-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-primary-text-color-down: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-primary-text-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-primary-text-color: var(--spectrum-alias-button-primary-text-color-default);
-    --spectrum-alias-button-primary-icon-color-default: var(--spectrum-alias-button-primary-text-color-default);
-    --spectrum-alias-button-primary-icon-color-hover: var(--spectrum-alias-button-primary-text-color-hover);
-    --spectrum-alias-button-primary-icon-color-down: var(--spectrum-alias-button-primary-text-color-down);
-    --spectrum-alias-button-primary-icon-color-key-focus: var(--spectrum-alias-button-primary-text-color-key-focus);
-    --spectrum-alias-button-primary-icon-color: var(--spectrum-alias-button-primary-icon-color-default);
-    --spectrum-alias-button-secondary-background-color-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-button-secondary-background-color-hover: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-background-color-down: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-button-secondary-background-color-key-focus: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-background-color: var(--spectrum-alias-button-secondary-background-color-default);
-    --spectrum-alias-button-secondary-border-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-border-color-hover: var(--spectrum-alias-button-secondary-background-color-hover);
-    --spectrum-alias-button-secondary-border-color-down: var(--spectrum-alias-button-secondary-background-color-down);
-    --spectrum-alias-button-secondary-border-color-key-focus: var(--spectrum-alias-button-secondary-background-color-key-focus);
-    --spectrum-alias-button-secondary-border-color: var(--spectrum-alias-button-secondary-border-color-default);
-    --spectrum-alias-button-secondary-text-color-default: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-button-secondary-text-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-secondary-text-color-down: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-secondary-text-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-secondary-text-color: var(--spectrum-alias-button-secondary-text-color-default);
-    --spectrum-alias-button-secondary-icon-color-default: var(--spectrum-alias-button-secondary-text-color-default);
-    --spectrum-alias-button-secondary-icon-color-hover: var(--spectrum-alias-button-secondary-text-color-hover);
-    --spectrum-alias-button-secondary-icon-color-down: var(--spectrum-alias-button-secondary-text-color-down);
-    --spectrum-alias-button-secondary-icon-color-key-focus: var(--spectrum-alias-button-secondary-text-color-key-focus);
-    --spectrum-alias-button-secondary-icon-color: var(--spectrum-alias-button-secondary-icon-color-default);
-    --spectrum-alias-button-negative-background-color-default: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-button-negative-background-color-hover: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-background-color-down: var(--spectrum-global-color-red-700);
-    --spectrum-alias-button-negative-background-color-key-focus: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-background-color: var(--spectrum-alias-button-negative-background-color-default);
-    --spectrum-alias-button-negative-border-color-default: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-border-color-hover: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-border-color-down: var(--spectrum-global-color-red-700);
-    --spectrum-alias-button-negative-border-color-key-focus: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-border-color: var(--spectrum-alias-button-negative-border-color-default);
-    --spectrum-alias-button-negative-text-color-default: var(--spectrum-semantic-negative-text-color-small);
-    --spectrum-alias-button-negative-text-color-hover: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-negative-text-color-down: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-negative-text-color-key-focus: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-button-negative-text-color: var(--spectrum-alias-button-negative-text-color-default);
-    --spectrum-alias-button-negative-icon-color-default: var(--spectrum-alias-button-negative-text-color-default);
-    --spectrum-alias-button-negative-icon-color-hover: var(--spectrum-alias-button-negative-text-color-hover);
-    --spectrum-alias-button-negative-icon-color-down: var(--spectrum-alias-button-negative-text-color-down);
-    --spectrum-alias-button-negative-icon-color-key-focus: var(--spectrum-alias-button-negative-text-color-key-focus);
-    --spectrum-alias-button-negative-icon-color: var(--spectrum-alias-button-negative-icon-color-default);
-    --spectrum-alias-input-border-color-disabled: var(--spectrum-alias-border-color-transparent);
-    --spectrum-alias-input-border-color-quiet-disabled: var(--spectrum-alias-border-color-mid);
-    --spectrum-alias-input-border-color-default: var(--spectrum-alias-border-color);
-    --spectrum-alias-input-border-color-hover: var(--spectrum-alias-border-color-hover);
-    --spectrum-alias-input-border-color-down: var(--spectrum-alias-border-color-mouse-focus);
-    --spectrum-alias-input-border-color-mouse-focus: var(--spectrum-alias-border-color-mouse-focus);
-    --spectrum-alias-input-border-color-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-input-border-color: var(--spectrum-alias-input-border-color-default);
-    --spectrum-alias-input-border-color-invalid-default: var(--spectrum-semantic-negative-color-default);
-    --spectrum-alias-input-border-color-invalid-hover: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-input-border-color-invalid-down: var(--spectrum-semantic-negative-color-down);
-    --spectrum-alias-input-border-color-invalid-mouse-focus: var(--spectrum-semantic-negative-color-hover);
-    --spectrum-alias-input-border-color-invalid-key-focus: var(--spectrum-alias-border-color-key-focus);
-    --spectrum-alias-input-border-color-invalid: var(--spectrum-alias-input-border-color-invalid-default);
-    --spectrum-alias-background-color-yellow-default: var(--spectrum-global-color-static-yellow-300);
-    --spectrum-alias-background-color-yellow-hover: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-alias-background-color-yellow-key-focus: var(--spectrum-global-color-static-yellow-400);
-    --spectrum-alias-background-color-yellow-down: var(--spectrum-global-color-static-yellow-500);
-    --spectrum-alias-background-color-yellow: var(--spectrum-alias-background-color-yellow-default);
-    --spectrum-alias-infieldbutton-background-color: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var(--spectrum-alias-component-background-color-disabled);
-    --spectrum-alias-infieldbutton-fill-border-color-default: var(--spectrum-alias-input-border-color-default);
-    --spectrum-alias-infieldbutton-fill-border-color-hover: var(--spectrum-alias-input-border-color-hover);
-    --spectrum-alias-infieldbutton-fill-border-color-down: var(--spectrum-alias-input-border-color-down);
-    --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var(--spectrum-alias-input-border-color-mouse-focus);
-    --spectrum-alias-infieldbutton-fill-border-color-key-focus: var(--spectrum-alias-input-border-color-key-focus);
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus);
-    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent;
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var(--spectrum-alias-component-background-color-default);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var(--spectrum-alias-component-background-color-hover);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var(--spectrum-alias-component-background-color-down);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var(--spectrum-alias-component-background-color-key-focus);
-    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(--spectrum-alias-component-background-color-disabled);
-    --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006;
-    --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c;
-    --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040;
-    --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3;
-    --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006;
-    --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c;
-    --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040;
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040;
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a;
-    --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6;
-    --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent;
-    --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c;
-    --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40;
-    --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3;
-    --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6;
-    --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c;
-    --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40;
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40;
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a;
-    --spectrum-alias-tabs-divider-background-color-default: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-tabs-divider-background-color-quiet: var(--spectrum-alias-background-color-transparent);
-    --spectrum-alias-tabitem-text-color-default: var(--spectrum-alias-label-text-color);
-    --spectrum-alias-tabitem-text-color-hover: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tabitem-text-color-down: var(--spectrum-alias-text-color-down);
-    --spectrum-alias-tabitem-text-color-key-focus: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tabitem-text-color-mouse-focus: var(--spectrum-alias-text-color-hover);
-    --spectrum-alias-tabitem-text-color: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-text-color-selected-default: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-tabitem-text-color-selected-hover: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected-down: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected-key-focus: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-selected: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-default: var(--spectrum-global-color-static-blue-500);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-down: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-text-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-selection-indicator-color-default: var(--spectrum-alias-tabitem-text-color-selected-default);
-    --spectrum-alias-tabitem-selection-indicator-color-emphasized: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-tabitem-icon-color-disabled: var(--spectrum-alias-text-color-disabled);
-    --spectrum-alias-tabitem-icon-color-default: var(--spectrum-alias-icon-color);
-    --spectrum-alias-tabitem-icon-color-hover: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tabitem-icon-color-down: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-tabitem-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
-    --spectrum-alias-tabitem-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down);
-    --spectrum-alias-tabitem-icon-color: var(--spectrum-alias-tabitem-icon-color-default);
-    --spectrum-alias-tabitem-icon-color-selected: var(--spectrum-alias-icon-color-selected-neutral);
-    --spectrum-alias-tabitem-icon-color-emphasized: var(--spectrum-alias-tabitem-text-color-default);
-    --spectrum-alias-tabitem-icon-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default);
-    --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a;
-    --spectrum-alias-assetcard-border-color-selected: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-assetcard-border-color-selected-hover: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-assetcard-border-color-selected-down: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-background-color-default: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-background-color-transparent: transparent;
-    --spectrum-alias-background-color-overbackground-down: #fff3;
-    --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a;
-    --spectrum-alias-background-color-quiet-overbackground-down: #fff3;
-    --spectrum-alias-background-color-overbackground-disabled: #ffffff1a;
-    --spectrum-alias-background-color-quickactions-overlay: #0003;
-    --spectrum-alias-placeholder-text-color: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-placeholder-text-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-placeholder-text-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-placeholder-text-color-selected: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-text-color: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-text-color-mouse-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500);
-    --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-text-color-selected-neutral: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-text-color-overbackground: var(--spectrum-global-color-static-white);
-    --spectrum-alias-text-color-overbackground-disabled: #fff3;
-    --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3;
-    --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-link-primary-text-color-default: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-link-primary-text-color-hover: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-link-primary-text-color-down: var(--spectrum-global-color-blue-700);
-    --spectrum-alias-link-primary-text-color-key-focus: var(--spectrum-alias-text-color-key-focus);
-    --spectrum-alias-link-primary-text-color: var(--spectrum-alias-link-primary-text-color-default);
-    --spectrum-alias-link-secondary-text-color-default: var(--spectrum-alias-link-primary-text-color-default);
-    --spectrum-alias-link-secondary-text-color-hover: var(--spectrum-alias-link-primary-text-color-hover);
-    --spectrum-alias-link-secondary-text-color-down: var(--spectrum-alias-link-primary-text-color-down);
-    --spectrum-alias-link-secondary-text-color-key-focus: var(--spectrum-alias-link-primary-text-color-key-focus);
-    --spectrum-alias-link-secondary-text-color: var(--spectrum-alias-link-secondary-text-color-default);
-    --spectrum-alias-border-color: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500);
-    --spectrum-alias-border-color-key-focus: var(--spectrum-global-color-blue-400);
-    --spectrum-alias-border-color-mouse-focus: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-border-color-extralight: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200);
-    --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-border-color-darker-default: var(--spectrum-global-color-gray-600);
-    --spectrum-alias-border-color-darker-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-border-color-darker-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-border-color-transparent: transparent;
-    --spectrum-alias-border-color-translucent-dark: #0000000d;
-    --spectrum-alias-border-color-translucent-darker: #0000001a;
-    --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400);
-    --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color);
-    --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-track-fill-color-overbackground: var(--spectrum-global-color-static-white);
-    --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-thumbnail-darksquare-background-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-thumbnail-lightsquare-background-color: var(--spectrum-global-color-static-white);
-    --spectrum-alias-track-color-overbackground: #fff3;
-    --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-icon-color-overbackground: var(--spectrum-global-color-static-white);
-    --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-icon-color-overbackground-disabled: #fff3;
-    --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26;
-    --spectrum-alias-icon-color-selected-neutral: var(--spectrum-global-color-gray-900);
-    --spectrum-alias-icon-color-selected-neutral-subdued: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-icon-color-selected-hover: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-icon-color-selected-down: var(--spectrum-global-color-blue-700);
-    --spectrum-alias-icon-color-selected-focus: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-image-opacity-disabled: var(--spectrum-global-color-opacity-30);
-    --spectrum-alias-toolbar-background-color: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-code-highlight-color-default: var(--spectrum-global-color-gray-800);
-    --spectrum-alias-code-highlight-background-color: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-code-highlight-color-keyword: var(--spectrum-global-color-fuchsia-600);
-    --spectrum-alias-code-highlight-color-section: var(--spectrum-global-color-red-600);
-    --spectrum-alias-code-highlight-color-literal: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-code-highlight-color-attribute: var(--spectrum-global-color-seafoam-600);
-    --spectrum-alias-code-highlight-color-class: var(--spectrum-global-color-magenta-600);
-    --spectrum-alias-code-highlight-color-variable: var(--spectrum-global-color-purple-600);
-    --spectrum-alias-code-highlight-color-title: var(--spectrum-global-color-indigo-600);
-    --spectrum-alias-code-highlight-color-string: var(--spectrum-global-color-fuchsia-600);
-    --spectrum-alias-code-highlight-color-function: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-code-highlight-color-comment: var(--spectrum-global-color-gray-700);
-    --spectrum-alias-categorical-color-1: var(--spectrum-global-color-static-seafoam-200);
-    --spectrum-alias-categorical-color-2: var(--spectrum-global-color-static-indigo-700);
-    --spectrum-alias-categorical-color-3: var(--spectrum-global-color-static-orange-500);
-    --spectrum-alias-categorical-color-4: var(--spectrum-global-color-static-magenta-500);
-    --spectrum-alias-categorical-color-5: var(--spectrum-global-color-static-indigo-200);
-    --spectrum-alias-categorical-color-6: var(--spectrum-global-color-static-celery-200);
-    --spectrum-alias-categorical-color-7: var(--spectrum-global-color-static-blue-500);
-    --spectrum-alias-categorical-color-8: var(--spectrum-global-color-static-purple-800);
-    --spectrum-alias-categorical-color-9: var(--spectrum-global-color-static-yellow-500);
-    --spectrum-alias-categorical-color-10: var(--spectrum-global-color-static-orange-700);
-    --spectrum-alias-categorical-color-11: var(--spectrum-global-color-static-green-600);
-    --spectrum-alias-categorical-color-12: var(--spectrum-global-color-static-chartreuse-300);
-    --spectrum-alias-categorical-color-13: var(--spectrum-global-color-static-blue-200);
-    --spectrum-alias-categorical-color-14: var(--spectrum-global-color-static-fuchsia-500);
-    --spectrum-alias-categorical-color-15: var(--spectrum-global-color-static-magenta-200);
-    --spectrum-alias-categorical-color-16: var(--spectrum-global-color-static-yellow-200);
-}
diff --git a/tools/styles/spectrum-two/spectrum-scale-large.css b/tools/styles/spectrum-two/spectrum-scale-large.css
deleted file mode 100644
index 9e7baf50679..00000000000
--- a/tools/styles/spectrum-two/spectrum-scale-large.css
+++ /dev/null
@@ -1,150 +0,0 @@
-:root,
-:host {
-    --spectrum-global-dimension-scale-factor: 1.25;
-    --spectrum-global-dimension-size-0: 0px;
-    --spectrum-global-dimension-size-10: 1px;
-    --spectrum-global-dimension-size-25: 2px;
-    --spectrum-global-dimension-size-30: 3px;
-    --spectrum-global-dimension-size-40: 4px;
-    --spectrum-global-dimension-size-50: 5px;
-    --spectrum-global-dimension-size-65: 6px;
-    --spectrum-global-dimension-size-75: 8px;
-    --spectrum-global-dimension-size-85: 9px;
-    --spectrum-global-dimension-size-100: 10px;
-    --spectrum-global-dimension-size-115: 11px;
-    --spectrum-global-dimension-size-125: 13px;
-    --spectrum-global-dimension-size-130: 14px;
-    --spectrum-global-dimension-size-150: 15px;
-    --spectrum-global-dimension-size-160: 16px;
-    --spectrum-global-dimension-size-175: 18px;
-    --spectrum-global-dimension-size-185: 19px;
-    --spectrum-global-dimension-size-200: 20px;
-    --spectrum-global-dimension-size-225: 22px;
-    --spectrum-global-dimension-size-250: 25px;
-    --spectrum-global-dimension-size-275: 28px;
-    --spectrum-global-dimension-size-300: 30px;
-    --spectrum-global-dimension-size-325: 32px;
-    --spectrum-global-dimension-size-350: 35px;
-    --spectrum-global-dimension-size-400: 40px;
-    --spectrum-global-dimension-size-450: 45px;
-    --spectrum-global-dimension-size-500: 50px;
-    --spectrum-global-dimension-size-550: 56px;
-    --spectrum-global-dimension-size-600: 60px;
-    --spectrum-global-dimension-size-650: 65px;
-    --spectrum-global-dimension-size-675: 68px;
-    --spectrum-global-dimension-size-700: 70px;
-    --spectrum-global-dimension-size-750: 75px;
-    --spectrum-global-dimension-size-800: 80px;
-    --spectrum-global-dimension-size-900: 90px;
-    --spectrum-global-dimension-size-1000: 100px;
-    --spectrum-global-dimension-size-1125: 112px;
-    --spectrum-global-dimension-size-1200: 120px;
-    --spectrum-global-dimension-size-1250: 125px;
-    --spectrum-global-dimension-size-1600: 160px;
-    --spectrum-global-dimension-size-1700: 170px;
-    --spectrum-global-dimension-size-1800: 180px;
-    --spectrum-global-dimension-size-2000: 200px;
-    --spectrum-global-dimension-size-2400: 240px;
-    --spectrum-global-dimension-size-2500: 250px;
-    --spectrum-global-dimension-size-3000: 300px;
-    --spectrum-global-dimension-size-3400: 340px;
-    --spectrum-global-dimension-size-3600: 360px;
-    --spectrum-global-dimension-size-4600: 460px;
-    --spectrum-global-dimension-size-5000: 500px;
-    --spectrum-global-dimension-size-6000: 600px;
-    --spectrum-global-dimension-font-size-25: 12px;
-    --spectrum-global-dimension-font-size-50: 13px;
-    --spectrum-global-dimension-font-size-75: 15px;
-    --spectrum-global-dimension-font-size-100: 17px;
-    --spectrum-global-dimension-font-size-150: 18px;
-    --spectrum-global-dimension-font-size-200: 19px;
-    --spectrum-global-dimension-font-size-300: 22px;
-    --spectrum-global-dimension-font-size-400: 24px;
-    --spectrum-global-dimension-font-size-500: 27px;
-    --spectrum-global-dimension-font-size-600: 31px;
-    --spectrum-global-dimension-font-size-700: 34px;
-    --spectrum-global-dimension-font-size-800: 39px;
-    --spectrum-global-dimension-font-size-900: 44px;
-    --spectrum-global-dimension-font-size-1000: 49px;
-    --spectrum-global-dimension-font-size-1100: 55px;
-    --spectrum-global-dimension-font-size-1200: 62px;
-    --spectrum-global-dimension-font-size-1300: 70px;
-    --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-rounded-workflow-padding-left-m: 17px;
-    --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px;
-    --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-item-control-3-width-s: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-450);
-    --spectrum-alias-item-control-3-width-l: 41px;
-    --spectrum-alias-item-control-3-width-xl: 46px;
-    --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-static-size-325);
-    --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-160);
-    --spectrum-alias-control-three-width-s: var(--spectrum-global-dimension-size-325);
-    --spectrum-alias-control-three-width-m: var(--spectrum-global-dimension-static-size-450);
-    --spectrum-alias-control-three-width-l: 41px;
-    --spectrum-alias-control-three-width-xl: 46px;
-    --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-static-size-115);
-    --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-115);
-    --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-275);
-    --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-275);
-    --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-avatar-size-100: 26px;
-    --spectrum-alias-avatar-size-400: 36px;
-    --spectrum-alias-avatar-size-600: 46px;
-    --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-300);
-    --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-xs-text-size);
-    --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-75);
-}
diff --git a/tools/styles/spectrum-two/spectrum-scale-medium.css b/tools/styles/spectrum-two/spectrum-scale-medium.css
deleted file mode 100644
index 384c65fdbfc..00000000000
--- a/tools/styles/spectrum-two/spectrum-scale-medium.css
+++ /dev/null
@@ -1,150 +0,0 @@
-:root,
-:host {
-    --spectrum-global-dimension-scale-factor: 1;
-    --spectrum-global-dimension-size-0: 0px;
-    --spectrum-global-dimension-size-10: 1px;
-    --spectrum-global-dimension-size-25: 2px;
-    --spectrum-global-dimension-size-30: 2px;
-    --spectrum-global-dimension-size-40: 3px;
-    --spectrum-global-dimension-size-50: 4px;
-    --spectrum-global-dimension-size-65: 5px;
-    --spectrum-global-dimension-size-75: 6px;
-    --spectrum-global-dimension-size-85: 7px;
-    --spectrum-global-dimension-size-100: 8px;
-    --spectrum-global-dimension-size-115: 9px;
-    --spectrum-global-dimension-size-125: 10px;
-    --spectrum-global-dimension-size-130: 11px;
-    --spectrum-global-dimension-size-150: 12px;
-    --spectrum-global-dimension-size-160: 13px;
-    --spectrum-global-dimension-size-175: 14px;
-    --spectrum-global-dimension-size-185: 15px;
-    --spectrum-global-dimension-size-200: 16px;
-    --spectrum-global-dimension-size-225: 18px;
-    --spectrum-global-dimension-size-250: 20px;
-    --spectrum-global-dimension-size-275: 22px;
-    --spectrum-global-dimension-size-300: 24px;
-    --spectrum-global-dimension-size-325: 26px;
-    --spectrum-global-dimension-size-350: 28px;
-    --spectrum-global-dimension-size-400: 32px;
-    --spectrum-global-dimension-size-450: 36px;
-    --spectrum-global-dimension-size-500: 40px;
-    --spectrum-global-dimension-size-550: 44px;
-    --spectrum-global-dimension-size-600: 48px;
-    --spectrum-global-dimension-size-650: 52px;
-    --spectrum-global-dimension-size-675: 54px;
-    --spectrum-global-dimension-size-700: 56px;
-    --spectrum-global-dimension-size-750: 60px;
-    --spectrum-global-dimension-size-800: 64px;
-    --spectrum-global-dimension-size-900: 72px;
-    --spectrum-global-dimension-size-1000: 80px;
-    --spectrum-global-dimension-size-1125: 90px;
-    --spectrum-global-dimension-size-1200: 96px;
-    --spectrum-global-dimension-size-1250: 100px;
-    --spectrum-global-dimension-size-1600: 128px;
-    --spectrum-global-dimension-size-1700: 136px;
-    --spectrum-global-dimension-size-1800: 144px;
-    --spectrum-global-dimension-size-2000: 160px;
-    --spectrum-global-dimension-size-2400: 192px;
-    --spectrum-global-dimension-size-2500: 200px;
-    --spectrum-global-dimension-size-3000: 240px;
-    --spectrum-global-dimension-size-3400: 272px;
-    --spectrum-global-dimension-size-3600: 288px;
-    --spectrum-global-dimension-size-4600: 368px;
-    --spectrum-global-dimension-size-5000: 400px;
-    --spectrum-global-dimension-size-6000: 480px;
-    --spectrum-global-dimension-font-size-25: 10px;
-    --spectrum-global-dimension-font-size-50: 11px;
-    --spectrum-global-dimension-font-size-75: 12px;
-    --spectrum-global-dimension-font-size-100: 14px;
-    --spectrum-global-dimension-font-size-150: 15px;
-    --spectrum-global-dimension-font-size-200: 16px;
-    --spectrum-global-dimension-font-size-300: 18px;
-    --spectrum-global-dimension-font-size-400: 20px;
-    --spectrum-global-dimension-font-size-500: 22px;
-    --spectrum-global-dimension-font-size-600: 25px;
-    --spectrum-global-dimension-font-size-700: 28px;
-    --spectrum-global-dimension-font-size-800: 32px;
-    --spectrum-global-dimension-font-size-900: 36px;
-    --spectrum-global-dimension-font-size-1000: 40px;
-    --spectrum-global-dimension-font-size-1100: 45px;
-    --spectrum-global-dimension-font-size-1200: 50px;
-    --spectrum-global-dimension-font-size-1300: 60px;
-    --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-size-115);
-    --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-rounded-workflow-padding-left-m: var(--spectrum-global-dimension-size-175);
-    --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px;
-    --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-75);
-    --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-item-control-3-width-s: 23px;
-    --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-325);
-    --spectrum-alias-item-control-3-width-l: 29px;
-    --spectrum-alias-item-control-3-width-xl: 33px;
-    --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-150);
-    --spectrum-alias-control-three-width-s: 23px;
-    --spectrum-alias-control-three-width-m: var(--spectrum-global-dimension-static-size-325);
-    --spectrum-alias-control-three-width-l: 29px;
-    --spectrum-alias-control-three-width-xl: 33px;
-    --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-size-125);
-    --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-100);
-    --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-150);
-    --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-175);
-    --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-200);
-    --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-225);
-    --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-50);
-    --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-25);
-    --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-85);
-    --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-125);
-    --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250);
-    --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350);
-    --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450);
-    --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-250);
-    --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-static-size-65);
-    --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-s-text-size);
-    --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-100);
-}
diff --git a/tools/styles/spectrum-two/spectrum-theme-dark.css b/tools/styles/spectrum-two/spectrum-theme-dark.css
deleted file mode 100644
index c17f93e699a..00000000000
--- a/tools/styles/spectrum-two/spectrum-theme-dark.css
+++ /dev/null
@@ -1,161 +0,0 @@
-:root,
-:host {
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-opacity-100: 1;
-    --spectrum-global-color-opacity-90: 0.9;
-    --spectrum-global-color-opacity-80: 0.8;
-    --spectrum-global-color-opacity-70: 0.7;
-    --spectrum-global-color-opacity-60: 0.6;
-    --spectrum-global-color-opacity-55: 0.55;
-    --spectrum-global-color-opacity-50: 0.5;
-    --spectrum-global-color-opacity-42: 0.42;
-    --spectrum-global-color-opacity-40: 0.4;
-    --spectrum-global-color-opacity-30: 0.3;
-    --spectrum-global-color-opacity-25: 0.25;
-    --spectrum-global-color-opacity-20: 0.2;
-    --spectrum-global-color-opacity-15: 0.15;
-    --spectrum-global-color-opacity-10: 0.1;
-    --spectrum-global-color-opacity-8: 0.08;
-    --spectrum-global-color-opacity-7: 0.07;
-    --spectrum-global-color-opacity-6: 0.06;
-    --spectrum-global-color-opacity-5: 0.05;
-    --spectrum-global-color-opacity-4: 0.04;
-    --spectrum-global-color-opacity-0: 0;
-    --spectrum-global-color-celery-400-rgb: 34, 184, 51;
-    --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb));
-    --spectrum-global-color-celery-500-rgb: 68, 202, 73;
-    --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb));
-    --spectrum-global-color-celery-600-rgb: 105, 220, 99;
-    --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb));
-    --spectrum-global-color-celery-700-rgb: 142, 235, 127;
-    --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb));
-    --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8;
-    --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb));
-    --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18;
-    --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb));
-    --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37;
-    --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb));
-    --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71;
-    --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb));
-    --spectrum-global-color-yellow-400-rgb: 228, 194, 0;
-    --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb));
-    --spectrum-global-color-yellow-500-rgb: 244, 213, 0;
-    --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb));
-    --spectrum-global-color-yellow-600-rgb: 249, 232, 92;
-    --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb));
-    --spectrum-global-color-yellow-700-rgb: 252, 246, 187;
-    --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb));
-    --spectrum-global-color-magenta-400-rgb: 222, 61, 130;
-    --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb));
-    --spectrum-global-color-magenta-500-rgb: 237, 87, 149;
-    --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb));
-    --spectrum-global-color-magenta-600-rgb: 249, 114, 167;
-    --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb));
-    --spectrum-global-color-magenta-700-rgb: 255, 143, 185;
-    --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb));
-    --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206;
-    --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb));
-    --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224;
-    --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb));
-    --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236;
-    --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb));
-    --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242;
-    --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb));
-    --spectrum-global-color-purple-400-rgb: 157, 87, 243;
-    --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb));
-    --spectrum-global-color-purple-500-rgb: 172, 111, 249;
-    --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb));
-    --spectrum-global-color-purple-600-rgb: 187, 135, 251;
-    --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb));
-    --spectrum-global-color-purple-700-rgb: 202, 159, 252;
-    --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb));
-    --spectrum-global-color-indigo-400-rgb: 104, 109, 244;
-    --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb));
-    --spectrum-global-color-indigo-500-rgb: 124, 129, 251;
-    --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb));
-    --spectrum-global-color-indigo-600-rgb: 145, 149, 255;
-    --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb));
-    --spectrum-global-color-indigo-700-rgb: 167, 170, 255;
-    --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb));
-    --spectrum-global-color-seafoam-400-rgb: 0, 158, 152;
-    --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb));
-    --spectrum-global-color-seafoam-500-rgb: 3, 178, 171;
-    --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb));
-    --spectrum-global-color-seafoam-600-rgb: 54, 197, 189;
-    --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb));
-    --spectrum-global-color-seafoam-700-rgb: 93, 214, 207;
-    --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb));
-    --spectrum-global-color-red-400-rgb: 234, 56, 41;
-    --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb));
-    --spectrum-global-color-red-500-rgb: 246, 88, 67;
-    --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb));
-    --spectrum-global-color-red-600-rgb: 255, 117, 94;
-    --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb));
-    --spectrum-global-color-red-700-rgb: 255, 149, 129;
-    --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb));
-    --spectrum-global-color-orange-400-rgb: 244, 129, 12;
-    --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb));
-    --spectrum-global-color-orange-500-rgb: 254, 154, 46;
-    --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb));
-    --spectrum-global-color-orange-600-rgb: 255, 181, 88;
-    --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb));
-    --spectrum-global-color-orange-700-rgb: 253, 206, 136;
-    --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb));
-    --spectrum-global-color-green-400-rgb: 18, 162, 108;
-    --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb));
-    --spectrum-global-color-green-500-rgb: 43, 180, 125;
-    --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb));
-    --spectrum-global-color-green-600-rgb: 67, 199, 143;
-    --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb));
-    --spectrum-global-color-green-700-rgb: 94, 217, 162;
-    --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb));
-    --spectrum-global-color-blue-400-rgb: 52, 143, 244;
-    --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb));
-    --spectrum-global-color-blue-500-rgb: 84, 163, 246;
-    --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb));
-    --spectrum-global-color-blue-600-rgb: 114, 183, 249;
-    --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb));
-    --spectrum-global-color-blue-700-rgb: 143, 202, 252;
-    --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb));
-    --spectrum-global-color-gray-50-rgb: 29, 29, 29;
-    --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb));
-    --spectrum-global-color-gray-75-rgb: 38, 38, 38;
-    --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb));
-    --spectrum-global-color-gray-100-rgb: 50, 50, 50;
-    --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb));
-    --spectrum-global-color-gray-200-rgb: 63, 63, 63;
-    --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb));
-    --spectrum-global-color-gray-300-rgb: 84, 84, 84;
-    --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb));
-    --spectrum-global-color-gray-400-rgb: 112, 112, 112;
-    --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb));
-    --spectrum-global-color-gray-500-rgb: 144, 144, 144;
-    --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb));
-    --spectrum-global-color-gray-600-rgb: 178, 178, 178;
-    --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb));
-    --spectrum-global-color-gray-700-rgb: 209, 209, 209;
-    --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb));
-    --spectrum-global-color-gray-800-rgb: 235, 235, 235;
-    --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb));
-    --spectrum-global-color-gray-900-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb));
-    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75);
-    --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-background-color-modal-overlay: #00000080;
-    --spectrum-alias-dropshadow-color: #00000080;
-    --spectrum-alias-background-color-hover-overlay: #ffffff0f;
-    --spectrum-alias-highlight-hover: #ffffff12;
-    --spectrum-alias-highlight-down: #ffffff1a;
-    --spectrum-alias-highlight-selected: #54a3f626;
-    --spectrum-alias-highlight-selected-hover: #54a3f640;
-    --spectrum-alias-text-highlight-color: #54a3f640;
-    --spectrum-alias-background-color-quickactions: #323232e6;
-    --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600);
-    --spectrum-alias-border-color-translucent: #ffffff1a;
-    --spectrum-alias-radial-reaction-color-default: #ebebeb99;
-    --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-50);
-}
diff --git a/tools/styles/spectrum-two/spectrum-theme-light.css b/tools/styles/spectrum-two/spectrum-theme-light.css
deleted file mode 100644
index b7c7b986e3e..00000000000
--- a/tools/styles/spectrum-two/spectrum-theme-light.css
+++ /dev/null
@@ -1,161 +0,0 @@
-:root,
-:host {
-    --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1;
-    --spectrum-global-color-opacity-100: 1;
-    --spectrum-global-color-opacity-90: 0.9;
-    --spectrum-global-color-opacity-80: 0.8;
-    --spectrum-global-color-opacity-70: 0.7;
-    --spectrum-global-color-opacity-60: 0.6;
-    --spectrum-global-color-opacity-55: 0.55;
-    --spectrum-global-color-opacity-50: 0.5;
-    --spectrum-global-color-opacity-42: 0.42;
-    --spectrum-global-color-opacity-40: 0.4;
-    --spectrum-global-color-opacity-30: 0.3;
-    --spectrum-global-color-opacity-25: 0.25;
-    --spectrum-global-color-opacity-20: 0.2;
-    --spectrum-global-color-opacity-15: 0.15;
-    --spectrum-global-color-opacity-10: 0.1;
-    --spectrum-global-color-opacity-8: 0.08;
-    --spectrum-global-color-opacity-7: 0.07;
-    --spectrum-global-color-opacity-6: 0.06;
-    --spectrum-global-color-opacity-5: 0.05;
-    --spectrum-global-color-opacity-4: 0.04;
-    --spectrum-global-color-opacity-0: 0;
-    --spectrum-global-color-celery-400-rgb: 39, 187, 54;
-    --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb));
-    --spectrum-global-color-celery-500-rgb: 7, 167, 33;
-    --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb));
-    --spectrum-global-color-celery-600-rgb: 0, 145, 18;
-    --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb));
-    --spectrum-global-color-celery-700-rgb: 0, 124, 15;
-    --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb));
-    --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10;
-    --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb));
-    --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3;
-    --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb));
-    --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0;
-    --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb));
-    --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0;
-    --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb));
-    --spectrum-global-color-yellow-400-rgb: 232, 198, 0;
-    --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb));
-    --spectrum-global-color-yellow-500-rgb: 215, 179, 0;
-    --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb));
-    --spectrum-global-color-yellow-600-rgb: 196, 159, 0;
-    --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb));
-    --spectrum-global-color-yellow-700-rgb: 176, 140, 0;
-    --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb));
-    --spectrum-global-color-magenta-400-rgb: 222, 61, 130;
-    --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb));
-    --spectrum-global-color-magenta-500-rgb: 200, 34, 105;
-    --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb));
-    --spectrum-global-color-magenta-600-rgb: 173, 9, 85;
-    --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb));
-    --spectrum-global-color-magenta-700-rgb: 142, 0, 69;
-    --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb));
-    --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206;
-    --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb));
-    --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183;
-    --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb));
-    --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158;
-    --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb));
-    --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129;
-    --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb));
-    --spectrum-global-color-purple-400-rgb: 157, 87, 244;
-    --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb));
-    --spectrum-global-color-purple-500-rgb: 137, 61, 231;
-    --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb));
-    --spectrum-global-color-purple-600-rgb: 115, 38, 211;
-    --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb));
-    --spectrum-global-color-purple-700-rgb: 93, 19, 183;
-    --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb));
-    --spectrum-global-color-indigo-400-rgb: 104, 109, 244;
-    --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb));
-    --spectrum-global-color-indigo-500-rgb: 82, 88, 228;
-    --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb));
-    --spectrum-global-color-indigo-600-rgb: 64, 70, 202;
-    --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb));
-    --spectrum-global-color-indigo-700-rgb: 50, 54, 168;
-    --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb));
-    --spectrum-global-color-seafoam-400-rgb: 0, 161, 154;
-    --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb));
-    --spectrum-global-color-seafoam-500-rgb: 0, 140, 135;
-    --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb));
-    --spectrum-global-color-seafoam-600-rgb: 0, 119, 114;
-    --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb));
-    --spectrum-global-color-seafoam-700-rgb: 0, 99, 95;
-    --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb));
-    --spectrum-global-color-red-400-rgb: 234, 56, 41;
-    --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb));
-    --spectrum-global-color-red-500-rgb: 211, 21, 16;
-    --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb));
-    --spectrum-global-color-red-600-rgb: 180, 0, 0;
-    --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb));
-    --spectrum-global-color-red-700-rgb: 147, 0, 0;
-    --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb));
-    --spectrum-global-color-orange-400-rgb: 246, 133, 17;
-    --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb));
-    --spectrum-global-color-orange-500-rgb: 228, 111, 0;
-    --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb));
-    --spectrum-global-color-orange-600-rgb: 203, 93, 0;
-    --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb));
-    --spectrum-global-color-orange-700-rgb: 177, 76, 0;
-    --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb));
-    --spectrum-global-color-green-400-rgb: 0, 143, 93;
-    --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb));
-    --spectrum-global-color-green-500-rgb: 0, 122, 77;
-    --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb));
-    --spectrum-global-color-green-600-rgb: 0, 101, 62;
-    --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb));
-    --spectrum-global-color-green-700-rgb: 0, 81, 50;
-    --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb));
-    --spectrum-global-color-blue-400-rgb: 20, 122, 243;
-    --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb));
-    --spectrum-global-color-blue-500-rgb: 2, 101, 220;
-    --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb));
-    --spectrum-global-color-blue-600-rgb: 0, 84, 182;
-    --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb));
-    --spectrum-global-color-blue-700-rgb: 0, 68, 145;
-    --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb));
-    --spectrum-global-color-gray-50-rgb: 255, 255, 255;
-    --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb));
-    --spectrum-global-color-gray-75-rgb: 253, 253, 253;
-    --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb));
-    --spectrum-global-color-gray-100-rgb: 248, 248, 248;
-    --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb));
-    --spectrum-global-color-gray-200-rgb: 230, 230, 230;
-    --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb));
-    --spectrum-global-color-gray-300-rgb: 213, 213, 213;
-    --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb));
-    --spectrum-global-color-gray-400-rgb: 177, 177, 177;
-    --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb));
-    --spectrum-global-color-gray-500-rgb: 144, 144, 144;
-    --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb));
-    --spectrum-global-color-gray-600-rgb: 109, 109, 109;
-    --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb));
-    --spectrum-global-color-gray-700-rgb: 70, 70, 70;
-    --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb));
-    --spectrum-global-color-gray-800-rgb: 34, 34, 34;
-    --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb));
-    --spectrum-global-color-gray-900-rgb: 0, 0, 0;
-    --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb));
-    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
-    --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-100);
-    --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-background-color-modal-overlay: #0006;
-    --spectrum-alias-dropshadow-color: #00000026;
-    --spectrum-alias-background-color-hover-overlay: #0000000a;
-    --spectrum-alias-highlight-hover: #0000000f;
-    --spectrum-alias-highlight-down: #0000001a;
-    --spectrum-alias-highlight-selected: #0265dc1a;
-    --spectrum-alias-highlight-selected-hover: #0265dc33;
-    --spectrum-alias-text-highlight-color: #0265dc33;
-    --spectrum-alias-background-color-quickactions: #f8f8f8e6;
-    --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500);
-    --spectrum-alias-border-color-translucent: #0000001a;
-    --spectrum-alias-radial-reaction-color-default: #2229;
-    --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300);
-    --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-300);
-}
diff --git a/tools/styles/spectrum-two/theme-dark.css b/tools/styles/spectrum-two/theme-dark.css
deleted file mode 100644
index f60d61f6759..00000000000
--- a/tools/styles/spectrum-two/theme-dark.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-theme-dark.css";
-
-:host,
-:root {
-    color-scheme: dark;
-}
diff --git a/tools/styles/spectrum-two/theme-light.css b/tools/styles/spectrum-two/theme-light.css
deleted file mode 100644
index 8302458aa8e..00000000000
--- a/tools/styles/spectrum-two/theme-light.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-theme-light.css";
-
-:host,
-:root {
-    color-scheme: light;
-}
diff --git a/tools/styles/spectrum-two/themes.ts b/tools/styles/spectrum-two/themes.ts
deleted file mode 100644
index 5a3896e2c8c..00000000000
--- a/tools/styles/spectrum-two/themes.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import '../../spectrum-two/theme-light.js';
-import '../../spectrum-two/theme-dark.js';
-import '../../spectrum-two/scale-medium.js';
-import '../../spectrum-two/scale-large.js';
diff --git a/tools/styles/src/body-overrides.css b/tools/styles/src/body-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/tools/styles/src/body-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/tools/styles/src/code-overrides.css b/tools/styles/src/code-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/tools/styles/src/code-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/tools/styles/src/detail-overrides.css b/tools/styles/src/detail-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/tools/styles/src/detail-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/tools/styles/src/heading-overrides.css b/tools/styles/src/heading-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/tools/styles/src/heading-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/tools/styles/src/lang-overrides.css b/tools/styles/src/lang-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/tools/styles/src/lang-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/tools/styles/src/spectrum-base.css b/tools/styles/src/spectrum-base.css
index 5c139abeede..1db5abfaf5e 100644
--- a/tools/styles/src/spectrum-base.css
+++ b/tools/styles/src/spectrum-base.css
@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum {
-    color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color));
-    font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base)); /* .spectrum */
+:root {
+	font-family: var(--spectrum-sans-font-family-stack);
+	font-size: var(--spectrum-font-size-100);
+	font-style: var(--spectrum-default-font-style);
 
-    font-size: var(--spectrum-alias-font-size-default, var(--spectrum-global-dimension-font-size-100)); /* .spectrum,
-   * .spectrum-Body */
+	color: var(--spectrum-neutral-content-color-default);
+	background-color: var(--spectrum-background-base-color);
 }
diff --git a/tools/styles/src/spectrum-body.css b/tools/styles/src/spectrum-body.css
index bfa698f2937..571904b95bf 100644
--- a/tools/styles/src/spectrum-body.css
+++ b/tools/styles/src/spectrum-body.css
@@ -11,87 +11,102 @@
  */
 
 .spectrum-Typography .spectrum-Body {
-    --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
+	--spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
 }
 
 @media (forced-colors: active) {
-    .spectrum-Body {
-        --highcontrast-body-font-color: Text;
-    }
+	.spectrum-Body {
+		--highcontrast-body-font-color: Text;
+	}
+
+	.spectrum-Detail {
+		--highcontrast-detail-font-color: Text;
+	}
+
+	.spectrum-Code {
+		--highcontrast-code-font-color: Text;
+	}
 }
 
 .spectrum-Body,
 .spectrum-Body--sizeM {
-    --spectrum-body-font-size: var(--spectrum-body-size-m);
+	--spectrum-body-font-size: var(--spectrum-body-size-m);
 }
 
 .spectrum-Body--sizeXS {
-    --spectrum-body-font-size: var(--spectrum-body-size-xs);
+	--spectrum-body-font-size: var(--spectrum-body-size-xs);
 }
 
 .spectrum-Body--sizeS {
-    --spectrum-body-font-size: var(--spectrum-body-size-s);
+	--spectrum-body-font-size: var(--spectrum-body-size-s);
 }
 
 .spectrum-Body--sizeL {
-    --spectrum-body-font-size: var(--spectrum-body-size-l);
+	--spectrum-body-font-size: var(--spectrum-body-size-l);
 }
 
 .spectrum-Body--sizeXL {
-    --spectrum-body-font-size: var(--spectrum-body-size-xl);
+	--spectrum-body-font-size: var(--spectrum-body-size-xl);
 }
 
 .spectrum-Body--sizeXXL {
-    --spectrum-body-font-size: var(--spectrum-body-size-xxl);
+	--spectrum-body-font-size: var(--spectrum-body-size-xxl);
 }
 
 .spectrum-Body--sizeXXXL {
-    --spectrum-body-font-size: var(--spectrum-body-size-xxxl);
+	--spectrum-body-font-size: var(--spectrum-body-size-xxxl);
 }
 
 .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)));
-    line-height: var(--mod-body-line-height, var(--spectrum-body-line-height));
-    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)));
+	--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: 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));
 }
 
 .spectrum-Body .spectrum-Body-strong,
 .spectrum-Body strong {
-    font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style));
-    font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight));
+	font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style));
+	font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight));
 }
 
 .spectrum-Body .spectrum-Body-emphasized,
 .spectrum-Body em {
-    font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style));
-    font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight));
+	font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style));
+	font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight));
 }
 
 .spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized,
 .spectrum-Body em strong,
 .spectrum-Body strong em {
-    font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight));
+	font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style));
+	font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight));
 }
 
 .spectrum-Body:lang(ja),
 .spectrum-Body:lang(ko),
 .spectrum-Body:lang(zh) {
-    font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family));
-    font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style));
-    font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight));
-    line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height));
-    letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing));
+	font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family));
+	font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style));
+	font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight));
+
+	line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height));
+
+	letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing));
 }
 
 .spectrum-Body:lang(ja) .spectrum-Body-strong,
@@ -100,8 +115,8 @@
 .spectrum-Body:lang(ko) strong,
 .spectrum-Body:lang(zh) .spectrum-Body-strong,
 .spectrum-Body:lang(zh) strong {
-    font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style));
-    font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight));
+	font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style));
+	font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight));
 }
 
 .spectrum-Body:lang(ja) .spectrum-Body-emphasized,
@@ -110,8 +125,8 @@
 .spectrum-Body:lang(ko) em,
 .spectrum-Body:lang(zh) .spectrum-Body-emphasized,
 .spectrum-Body:lang(zh) em {
-    font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style));
-    font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight));
+	font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style));
+	font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight));
 }
 
 .spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized,
@@ -123,41 +138,31 @@
 .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized,
 .spectrum-Body:lang(zh) em strong,
 .spectrum-Body:lang(zh) strong em {
-    font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight));
+	font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style));
+	font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight));
 }
 
 .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));
-    font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style));
+	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));
+	font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style));
 }
 
 .spectrum-Body--serif .spectrum-Body-strong,
 .spectrum-Body--serif strong {
-    font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style));
-    font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight));
+	font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style));
+	font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight));
 }
 
 .spectrum-Body--serif .spectrum-Body-emphasized,
 .spectrum-Body--serif em {
-    font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style));
-    font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight));
+	font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style));
+	font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight));
 }
 
 .spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized,
 .spectrum-Body--serif em strong,
 .spectrum-Body--serif strong em {
-    font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized {
-    font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized {
-    font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight));
+	font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style));
+	font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight));
 }
diff --git a/tools/styles/src/spectrum-code.css b/tools/styles/src/spectrum-code.css
index fe9020fb5f4..7528d5b608f 100644
--- a/tools/styles/src/spectrum-code.css
+++ b/tools/styles/src/spectrum-code.css
@@ -11,73 +11,77 @@
  */
 
 @media (forced-colors: active) {
-    .spectrum-Code {
-        --highcontrast-code-font-color: Text;
-    }
+	.spectrum-Code {
+		--highcontrast-code-font-color: Text;
+	}
 }
 
 .spectrum-Code,
 .spectrum-Code--sizeM {
-    --spectrum-code-font-size: var(--spectrum-code-size-m);
+	--spectrum-code-font-size: var(--spectrum-code-size-m);
 }
 
 .spectrum-Code--sizeXS {
-    --spectrum-code-font-size: var(--spectrum-code-size-xs);
+	--spectrum-code-font-size: var(--spectrum-code-size-xs);
 }
 
 .spectrum-Code--sizeS {
-    --spectrum-code-font-size: var(--spectrum-code-size-s);
+	--spectrum-code-font-size: var(--spectrum-code-size-s);
 }
 
 .spectrum-Code--sizeL {
-    --spectrum-code-font-size: var(--spectrum-code-size-l);
+	--spectrum-code-font-size: var(--spectrum-code-size-l);
 }
 
 .spectrum-Code--sizeXL {
-    --spectrum-code-font-size: var(--spectrum-code-size-xl);
+	--spectrum-code-font-size: var(--spectrum-code-size-xl);
 }
 
 .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));
-    line-height: var(--mod-code-line-height, var(--spectrum-code-line-height));
-    color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color)));
-    margin-block-start: var(--mod-code-margin-start, 0);
-    margin-block-end: var(--mod-code-margin-end, 0);
+	--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: 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));
+
+	color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color)));
 }
 
 .spectrum-Code .spectrum-Code-strong,
 .spectrum-Code strong {
-    font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style));
-    font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight));
+	font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style));
+	font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight));
 }
 
 .spectrum-Code .spectrum-Code-emphasized,
 .spectrum-Code em {
-    font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style));
-    font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight));
+	font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style));
+	font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight));
 }
 
 .spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized,
 .spectrum-Code em strong,
 .spectrum-Code strong em {
-    font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style));
-    font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight));
+	font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style));
+	font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight));
 }
 
 .spectrum-Code:lang(ja),
 .spectrum-Code:lang(ko),
 .spectrum-Code:lang(zh) {
-    font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family));
-    font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style));
-    font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight));
-    line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height));
-    letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing));
+	font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family));
+	font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style));
+	font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight));
+
+	line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height));
+	letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing));
 }
 
 .spectrum-Code:lang(ja) .spectrum-Code-strong,
@@ -86,8 +90,8 @@
 .spectrum-Code:lang(ko) strong,
 .spectrum-Code:lang(zh) .spectrum-Code-strong,
 .spectrum-Code:lang(zh) strong {
-    font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style));
-    font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight));
+	font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style));
+	font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight));
 }
 
 .spectrum-Code:lang(ja) .spectrum-Code-emphasized,
@@ -96,8 +100,8 @@
 .spectrum-Code:lang(ko) em,
 .spectrum-Code:lang(zh) .spectrum-Code-emphasized,
 .spectrum-Code:lang(zh) em {
-    font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style));
-    font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight));
+	font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style));
+	font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight));
 }
 
 .spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized,
@@ -109,6 +113,6 @@
 .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized,
 .spectrum-Code:lang(zh) em strong,
 .spectrum-Code:lang(zh) strong em {
-    font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight));
+	font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style));
+	font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight));
 }
diff --git a/tools/styles/src/spectrum-detail.css b/tools/styles/src/spectrum-detail.css
index 95f8165315a..0b85a9f52df 100644
--- a/tools/styles/src/spectrum-detail.css
+++ b/tools/styles/src/spectrum-detail.css
@@ -11,78 +11,84 @@
  */
 
 .spectrum-Typography .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));
+	--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));
 }
 
 @media (forced-colors: active) {
-    .spectrum-Detail {
-        --highcontrast-detail-font-color: Text;
-    }
+	.spectrum-Detail {
+		--highcontrast-detail-font-color: Text;
+	}
 }
 
 .spectrum-Detail,
 .spectrum-Detail--sizeM {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-m);
+	--spectrum-detail-font-size: var(--spectrum-detail-size-m);
 }
 
 .spectrum-Detail--sizeS {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-s);
+	--spectrum-detail-font-size: var(--spectrum-detail-size-s);
 }
 
 .spectrum-Detail--sizeL {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-l);
+	--spectrum-detail-font-size: var(--spectrum-detail-size-l);
 }
 
 .spectrum-Detail--sizeXL {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-xl);
+	--spectrum-detail-font-size: var(--spectrum-detail-size-xl);
 }
 
 .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));
-    color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color)));
-    line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height));
-    letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing));
-    text-transform: uppercase;
-    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));
+	--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: 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)));
+
+	line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height));
+	letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing));
+	text-transform: uppercase;
 }
 
 .spectrum-Detail .spectrum-Detail-strong,
 .spectrum-Detail strong {
-    font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style));
-    font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight));
+	font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style));
+	font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight));
 }
 
 .spectrum-Detail .spectrum-Detail-emphasized,
 .spectrum-Detail em {
-    font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight));
+	font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style));
+	font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight));
 }
 
 .spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized,
 .spectrum-Detail em strong,
 .spectrum-Detail strong em {
-    font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight));
+	font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style));
+	font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight));
 }
 
 .spectrum-Detail:lang(ja),
 .spectrum-Detail:lang(ko),
 .spectrum-Detail:lang(zh) {
-    font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family));
-    font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style));
-    font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight));
-    line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height));
+	font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family));
+	font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style));
+	font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight));
+
+	line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height));
 }
 
 .spectrum-Detail:lang(ja) .spectrum-Detail-strong,
@@ -91,8 +97,8 @@
 .spectrum-Detail:lang(ko) strong,
 .spectrum-Detail:lang(zh) .spectrum-Detail-strong,
 .spectrum-Detail:lang(zh) strong {
-    font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style));
-    font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight));
+	font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style));
+	font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight));
 }
 
 .spectrum-Detail:lang(ja) .spectrum-Detail-emphasized,
@@ -101,8 +107,8 @@
 .spectrum-Detail:lang(ko) em,
 .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized,
 .spectrum-Detail:lang(zh) em {
-    font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight));
+	font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style));
+	font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight));
 }
 
 .spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
@@ -114,64 +120,64 @@
 .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized,
 .spectrum-Detail:lang(zh) em strong,
 .spectrum-Detail:lang(zh) strong em {
-    font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight));
+	font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style));
+	font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight));
 }
 
 .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));
-    font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight));
+	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));
+	font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight));
 }
 
 .spectrum-Detail--serif .spectrum-Detail-strong,
 .spectrum-Detail--serif strong {
-    font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style));
-    font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight));
+	font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style));
+	font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight));
 }
 
 .spectrum-Detail--serif .spectrum-Detail-emphasized,
 .spectrum-Detail--serif em {
-    font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight));
+	font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style));
+	font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight));
 }
 
 .spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized,
 .spectrum-Detail--serif em strong,
 .spectrum-Detail--serif strong em {
-    font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight));
+	font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style));
+	font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight));
 }
 
 .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));
+	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));
 }
 
 .spectrum-Detail--light .spectrum-Detail-strong,
 .spectrum-Detail--light strong {
-    font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight));
+	font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style));
+	font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight));
 }
 
 .spectrum-Detail--light .spectrum-Detail-emphasized,
 .spectrum-Detail--light em {
-    font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight));
+	font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style));
+	font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight));
 }
 
 .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized,
 .spectrum-Detail--light em strong,
 .spectrum-Detail--light strong em {
-    font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight));
+	font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style));
+	font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight));
 }
 
 .spectrum-Detail--light:lang(ja),
 .spectrum-Detail--light:lang(ko),
 .spectrum-Detail--light:lang(zh) {
-    font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style));
-    font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight));
+	font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style));
+	font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight));
 }
 
 .spectrum-Detail--light:lang(ja) .spectrum-Detail-strong,
@@ -180,8 +186,8 @@
 .spectrum-Detail--light:lang(ko) strong,
 .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong,
 .spectrum-Detail--light:lang(zh) strong {
-    font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style));
-    font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight));
+	font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style));
+	font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight));
 }
 
 .spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized,
@@ -190,37 +196,37 @@
 .spectrum-Detail--light:lang(ko) em,
 .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized,
 .spectrum-Detail--light:lang(zh) em {
-    font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight));
+	font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style));
+	font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight));
 }
 
 .spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
 .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized,
 .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized {
-    font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight));
+	font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style));
+	font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight));
 }
 
 .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));
+	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));
 }
 
 .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong,
 .spectrum-Detail--serif.spectrum-Detail--light strong {
-    font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style));
-    font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight));
+	font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style));
+	font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight));
 }
 
 .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized,
 .spectrum-Detail--serif.spectrum-Detail--light em {
-    font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight));
+	font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style));
+	font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight));
 }
 
 .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized,
 .spectrum-Detail--serif.spectrum-Detail--light em strong,
 .spectrum-Detail--serif.spectrum-Detail--light strong em {
-    font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight));
+	font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style));
+	font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight));
 }
diff --git a/tools/styles/src/spectrum-heading.css b/tools/styles/src/spectrum-heading.css
index 358df7740c3..899e26a2510 100644
--- a/tools/styles/src/spectrum-heading.css
+++ b/tools/styles/src/spectrum-heading.css
@@ -11,103 +11,108 @@
  */
 
 .spectrum-Typography .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-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));
 }
 
 @media (forced-colors: active) {
-    .spectrum-Heading {
-        --highcontrast-heading-font-color: Text;
-    }
+	.spectrum-Heading {
+		--highcontrast-heading-font-color: Text;
+	}
 }
 
 .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);
+	--spectrum-heading-font-size: var(--spectrum-heading-size-m);
+	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m);
 }
 
 .spectrum-Heading--sizeXXS {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xxs);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs);
+	--spectrum-heading-font-size: var(--spectrum-heading-size-xxs);
+	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs);
 }
 
 .spectrum-Heading--sizeXS {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xs);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs);
+	--spectrum-heading-font-size: var(--spectrum-heading-size-xs);
+	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs);
 }
 
 .spectrum-Heading--sizeS {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-s);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s);
+	--spectrum-heading-font-size: var(--spectrum-heading-size-s);
+	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s);
 }
 
 .spectrum-Heading--sizeL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-l);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l);
+	--spectrum-heading-font-size: var(--spectrum-heading-size-l);
+	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l);
 }
 
 .spectrum-Heading--sizeXL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xl);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl);
+	--spectrum-heading-font-size: var(--spectrum-heading-size-xl);
+	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl);
 }
 
 .spectrum-Heading--sizeXXL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xxl);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl);
+	--spectrum-heading-font-size: var(--spectrum-heading-size-xxl);
+	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl);
 }
 
 .spectrum-Heading--sizeXXXL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl);
+	--spectrum-heading-font-size: var(--spectrum-heading-size-xxxl);
+	--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl);
 }
 
 .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: 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));
+	--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: 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));
 }
 
 .spectrum-Heading .spectrum-Heading-strong,
 .spectrum-Heading strong {
-    font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style));
-    font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight));
+	font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style));
+	font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight));
 }
 
 .spectrum-Heading .spectrum-Heading-emphasized,
 .spectrum-Heading em {
-    font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight));
+	font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style));
+	font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight));
 }
 
 .spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized,
 .spectrum-Heading em strong,
 .spectrum-Heading strong em {
-    font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight));
+	font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style));
+	font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight));
 }
 
 .spectrum-Heading:lang(ja),
 .spectrum-Heading:lang(ko),
 .spectrum-Heading:lang(zh) {
-    font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family));
-    font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style));
-    font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight));
-    font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size));
-    line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height));
-    letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing));
+	font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family));
+	font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style));
+	font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight));
+	font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size));
+
+	line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height));
+	letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing));
 }
 
 .spectrum-Heading:lang(ja) .spectrum-Heading-emphasized,
@@ -116,8 +121,8 @@
 .spectrum-Heading:lang(ko) em,
 .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized,
 .spectrum-Heading:lang(zh) em {
-    font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight));
+	font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style));
+	font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight));
 }
 
 .spectrum-Heading:lang(ja) .spectrum-Heading-strong,
@@ -126,8 +131,8 @@
 .spectrum-Heading:lang(ko) strong,
 .spectrum-Heading:lang(zh) .spectrum-Heading-strong,
 .spectrum-Heading:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style));
-    font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight));
+	font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style));
+	font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight));
 }
 
 .spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
@@ -139,39 +144,39 @@
 .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
 .spectrum-Heading:lang(zh) em strong,
 .spectrum-Heading:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight));
+	font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style));
+	font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight));
 }
 
 .spectrum-Heading--heavy {
-    font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight));
+	font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style));
+	font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight));
 }
 
 .spectrum-Heading--heavy .spectrum-Heading-strong,
 .spectrum-Heading--heavy strong {
-    font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight));
+	font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style));
+	font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight));
 }
 
 .spectrum-Heading--heavy .spectrum-Heading-emphasized,
 .spectrum-Heading--heavy em {
-    font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight));
+	font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style));
+	font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight));
 }
 
 .spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized,
 .spectrum-Heading--heavy em strong,
 .spectrum-Heading--heavy strong em {
-    font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight));
+	font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style));
+	font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight));
 }
 
 .spectrum-Heading--heavy:lang(ja),
 .spectrum-Heading--heavy:lang(ko),
 .spectrum-Heading--heavy:lang(zh) {
-    font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight));
+	font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style));
+	font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight));
 }
 
 .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized,
@@ -180,8 +185,8 @@
 .spectrum-Heading--heavy:lang(ko) em,
 .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized,
 .spectrum-Heading--heavy:lang(zh) em {
-    font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight));
+	font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style));
+	font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight));
 }
 
 .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong,
@@ -190,8 +195,8 @@
 .spectrum-Heading--heavy:lang(ko) strong,
 .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong,
 .spectrum-Heading--heavy:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight));
+	font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style));
+	font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight));
 }
 
 .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
@@ -203,39 +208,39 @@
 .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
 .spectrum-Heading--heavy:lang(zh) em strong,
 .spectrum-Heading--heavy:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight));
+	font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style));
+	font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight));
 }
 
 .spectrum-Heading--light {
-    font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight));
+	font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style));
+	font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight));
 }
 
 .spectrum-Heading--light .spectrum-Heading-emphasized,
 .spectrum-Heading--light em {
-    font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight));
+	font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style));
+	font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight));
 }
 
 .spectrum-Heading--light .spectrum-Heading-strong,
 .spectrum-Heading--light strong {
-    font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight));
+	font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style));
+	font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight));
 }
 
 .spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized,
 .spectrum-Heading--light em strong,
 .spectrum-Heading--light strong em {
-    font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight));
+	font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style));
+	font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight));
 }
 
 .spectrum-Heading--light:lang(ja),
 .spectrum-Heading--light:lang(ko),
 .spectrum-Heading--light:lang(zh) {
-    font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style));
-    font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight));
+	font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style));
+	font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight));
 }
 
 .spectrum-Heading--light:lang(ja) .spectrum-Heading-strong,
@@ -244,8 +249,8 @@
 .spectrum-Heading--light:lang(ko) strong,
 .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong,
 .spectrum-Heading--light:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style));
-    font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight));
+	font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style));
+	font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight));
 }
 
 .spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized,
@@ -254,8 +259,8 @@
 .spectrum-Heading--light:lang(ko) em,
 .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized,
 .spectrum-Heading--light:lang(zh) em {
-    font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight));
+	font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style));
+	font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight));
 }
 
 .spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
@@ -267,79 +272,79 @@
 .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
 .spectrum-Heading--light:lang(zh) em strong,
 .spectrum-Heading--light:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight));
+	font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style));
+	font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight));
 }
 
 .spectrum-Heading--serif {
-    font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family));
-    font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style));
-    font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight));
+	font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family));
+	font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style));
+	font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight));
 }
 
 .spectrum-Heading--serif .spectrum-Heading-emphasized,
 .spectrum-Heading--serif em {
-    font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight));
+	font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style));
+	font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight));
 }
 
 .spectrum-Heading--serif .spectrum-Heading-strong,
 .spectrum-Heading--serif strong {
-    font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style));
-    font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight));
+	font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style));
+	font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight));
 }
 
 .spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized,
 .spectrum-Heading--serif em strong,
 .spectrum-Heading--serif strong em {
-    font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight));
+	font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style));
+	font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight));
 }
 
 .spectrum-Heading--serif.spectrum-Heading--heavy {
-    font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style));
-    font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight));
+	font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style));
+	font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight));
 }
 
 .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong,
 .spectrum-Heading--serif.spectrum-Heading--heavy strong {
-    font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style));
-    font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight));
+	font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style));
+	font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight));
 }
 
 .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized,
 .spectrum-Heading--serif.spectrum-Heading--heavy em {
-    font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight));
+	font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style));
+	font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight));
 }
 
 .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized,
 .spectrum-Heading--serif.spectrum-Heading--heavy em strong,
 .spectrum-Heading--serif.spectrum-Heading--heavy strong em {
-    font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight));
+	font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style));
+	font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight));
 }
 
 .spectrum-Heading--serif.spectrum-Heading--light {
-    font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style));
-    font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight));
+	font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style));
+	font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight));
 }
 
 .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized,
 .spectrum-Heading--serif.spectrum-Heading--light em {
-    font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight));
+	font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style));
+	font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight));
 }
 
 .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong,
 .spectrum-Heading--serif.spectrum-Heading--light strong {
-    font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style));
-    font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight));
+	font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style));
+	font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight));
 }
 
 .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized,
 .spectrum-Heading--serif.spectrum-Heading--light em strong,
 .spectrum-Heading--serif.spectrum-Heading--light strong em {
-    font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight));
+	font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style));
+	font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight));
 }
diff --git a/tools/styles/src/spectrum-lang.css b/tools/styles/src/spectrum-lang.css
deleted file mode 100644
index 306522316ab..00000000000
--- a/tools/styles/src/spectrum-lang.css
+++ /dev/null
@@ -1,305 +0,0 @@
-/**
- * Copyright 2025 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-Typography:lang(ar) {
-    font-family: var(--spectrum-font-family-ar);
-}
-
-.spectrum-Typography:lang(he) {
-    font-family: var(--spectrum-font-family-he);
-}
-
-.spectrum-Heading:lang(ja),
-.spectrum-Heading:lang(ko),
-.spectrum-Heading:lang(zh) {
-    font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family));
-    font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style));
-    font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight));
-    font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size));
-    line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height));
-    letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing));
-}
-
-.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ja) em,
-.spectrum-Heading:lang(ko) .spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ko) em,
-.spectrum-Heading:lang(zh) .spectrum-Heading-emphasized,
-.spectrum-Heading:lang(zh) em {
-    font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight));
-}
-
-.spectrum-Heading:lang(ja) .spectrum-Heading-strong,
-.spectrum-Heading:lang(ja) strong,
-.spectrum-Heading:lang(ko) .spectrum-Heading-strong,
-.spectrum-Heading:lang(ko) strong,
-.spectrum-Heading:lang(zh) .spectrum-Heading-strong,
-.spectrum-Heading:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style));
-    font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight));
-}
-
-.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ja) em strong,
-.spectrum-Heading:lang(ja) strong em,
-.spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ko) em strong,
-.spectrum-Heading:lang(ko) strong em,
-.spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading:lang(zh) em strong,
-.spectrum-Heading:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja),
-.spectrum-Heading--heavy:lang(ko),
-.spectrum-Heading--heavy:lang(zh) {
-    font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ja) em,
-.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ko) em,
-.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(zh) em {
-    font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong,
-.spectrum-Heading--heavy:lang(ja) strong,
-.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong,
-.spectrum-Heading--heavy:lang(ko) strong,
-.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong,
-.spectrum-Heading--heavy:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ja) em strong,
-.spectrum-Heading--heavy:lang(ja) strong em,
-.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ko) em strong,
-.spectrum-Heading--heavy:lang(ko) strong em,
-.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(zh) em strong,
-.spectrum-Heading--heavy:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja),
-.spectrum-Heading--light:lang(ko),
-.spectrum-Heading--light:lang(zh) {
-    font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style));
-    font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong,
-.spectrum-Heading--light:lang(ja) strong,
-.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong,
-.spectrum-Heading--light:lang(ko) strong,
-.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong,
-.spectrum-Heading--light:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style));
-    font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ja) em,
-.spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ko) em,
-.spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(zh) em {
-    font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ja) em strong,
-.spectrum-Heading--light:lang(ja) strong em,
-.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ko) em strong,
-.spectrum-Heading--light:lang(ko) strong em,
-.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(zh) em strong,
-.spectrum-Heading--light:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Body:lang(ja),
-.spectrum-Body:lang(ko),
-.spectrum-Body:lang(zh) {
-    font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family));
-    font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style));
-    font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight));
-    line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height));
-    letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing));
-}
-
-.spectrum-Body:lang(ja) .spectrum-Body-strong,
-.spectrum-Body:lang(ja) strong,
-.spectrum-Body:lang(ko) .spectrum-Body-strong,
-.spectrum-Body:lang(ko) strong,
-.spectrum-Body:lang(zh) .spectrum-Body-strong,
-.spectrum-Body:lang(zh) strong {
-    font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style));
-    font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight));
-}
-
-.spectrum-Body:lang(ja) .spectrum-Body-emphasized,
-.spectrum-Body:lang(ja) em,
-.spectrum-Body:lang(ko) .spectrum-Body-emphasized,
-.spectrum-Body:lang(ko) em,
-.spectrum-Body:lang(zh) .spectrum-Body-emphasized,
-.spectrum-Body:lang(zh) em {
-    font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style));
-    font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight));
-}
-
-.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body:lang(ja) em strong,
-.spectrum-Body:lang(ja) strong em,
-.spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body:lang(ko) em strong,
-.spectrum-Body:lang(ko) strong em,
-.spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body:lang(zh) em strong,
-.spectrum-Body:lang(zh) strong em {
-    font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail:lang(ja),
-.spectrum-Detail:lang(ko),
-.spectrum-Detail:lang(zh) {
-    font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family));
-    font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style));
-    font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight));
-    line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height));
-}
-
-.spectrum-Detail:lang(ja) .spectrum-Detail-strong,
-.spectrum-Detail:lang(ja) strong,
-.spectrum-Detail:lang(ko) .spectrum-Detail-strong,
-.spectrum-Detail:lang(ko) strong,
-.spectrum-Detail:lang(zh) .spectrum-Detail-strong,
-.spectrum-Detail:lang(zh) strong {
-    font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style));
-    font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight));
-}
-
-.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ja) em,
-.spectrum-Detail:lang(ko) .spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ko) em,
-.spectrum-Detail:lang(zh) .spectrum-Detail-emphasized,
-.spectrum-Detail:lang(zh) em {
-    font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight));
-}
-
-.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ja) em strong,
-.spectrum-Detail:lang(ja) strong em,
-.spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ko) em strong,
-.spectrum-Detail:lang(ko) strong em,
-.spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail:lang(zh) em strong,
-.spectrum-Detail:lang(zh) strong em {
-    font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja),
-.spectrum-Detail--light:lang(ko),
-.spectrum-Detail--light:lang(zh) {
-    font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style));
-    font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong,
-.spectrum-Detail--light:lang(ja) strong,
-.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong,
-.spectrum-Detail--light:lang(ko) strong,
-.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong,
-.spectrum-Detail--light:lang(zh) strong {
-    font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style));
-    font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(ja) em,
-.spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(ko) em,
-.spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(zh) em {
-    font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized {
-    font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Code:lang(ja),
-.spectrum-Code:lang(ko),
-.spectrum-Code:lang(zh) {
-    font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family));
-    font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style));
-    font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight));
-    line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height));
-    letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing));
-}
-
-.spectrum-Code:lang(ja) .spectrum-Code-strong,
-.spectrum-Code:lang(ja) strong,
-.spectrum-Code:lang(ko) .spectrum-Code-strong,
-.spectrum-Code:lang(ko) strong,
-.spectrum-Code:lang(zh) .spectrum-Code-strong,
-.spectrum-Code:lang(zh) strong {
-    font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style));
-    font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight));
-}
-
-.spectrum-Code:lang(ja) .spectrum-Code-emphasized,
-.spectrum-Code:lang(ja) em,
-.spectrum-Code:lang(ko) .spectrum-Code-emphasized,
-.spectrum-Code:lang(ko) em,
-.spectrum-Code:lang(zh) .spectrum-Code-emphasized,
-.spectrum-Code:lang(zh) em {
-    font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style));
-    font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight));
-}
-
-.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code:lang(ja) em strong,
-.spectrum-Code:lang(ja) strong em,
-.spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code:lang(ko) em strong,
-.spectrum-Code:lang(ko) strong em,
-.spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code:lang(zh) em strong,
-.spectrum-Code:lang(zh) strong em {
-    font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight));
-}
diff --git a/tools/styles/src/spectrum-typography.css b/tools/styles/src/spectrum-typography.css
index 2aa22bbce01..a62e9a8ad82 100644
--- a/tools/styles/src/spectrum-typography.css
+++ b/tools/styles/src/spectrum-typography.css
@@ -11,29 +11,29 @@
  */
 
 .spectrum-Typography {
-    font-family: var(--spectrum-font-family);
-    font-style: var(--spectrum-font-style);
-    font-size: var(--spectrum-font-size);
+	font-family: var(--spectrum-font-family);
+	font-style: var(--spectrum-font-style);
+	font-size: var(--spectrum-font-size);
 }
 
 .spectrum-Typography:lang(ar) {
-    font-family: var(--spectrum-font-family-ar);
+	font-family: var(--spectrum-font-family-ar);
 }
 
 .spectrum-Typography:lang(he) {
-    font-family: var(--spectrum-font-family-he);
+	font-family: var(--spectrum-font-family-he);
 }
 
 .spectrum-Typography .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-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-Typography .spectrum-Body {
-    --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
+	--spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
 }
 
 .spectrum-Typography .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));
+	--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));
 }
diff --git a/tools/styles/src/typography-overrides.css b/tools/styles/src/typography-overrides.css
deleted file mode 100644
index 02fb71ea34c..00000000000
--- a/tools/styles/src/typography-overrides.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright 2025 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.
- */
diff --git a/tools/styles/theme-dark.css b/tools/styles/theme-dark.css
deleted file mode 100644
index f60d61f6759..00000000000
--- a/tools/styles/theme-dark.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-theme-dark.css";
-
-:host,
-:root {
-    color-scheme: dark;
-}
diff --git a/tools/styles/theme-darkest.css b/tools/styles/theme-darkest.css
deleted file mode 100644
index 40e7fd83d09..00000000000
--- a/tools/styles/theme-darkest.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-theme-darkest.css";
-
-:host,
-:root {
-    color-scheme: dark;
-}
diff --git a/tools/styles/theme-light.css b/tools/styles/theme-light.css
deleted file mode 100644
index 8302458aa8e..00000000000
--- a/tools/styles/theme-light.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-theme-light.css";
-
-:host,
-:root {
-    color-scheme: light;
-}
diff --git a/tools/styles/theme-lightest.css b/tools/styles/theme-lightest.css
deleted file mode 100644
index dfda6448328..00000000000
--- a/tools/styles/theme-lightest.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import "./spectrum-theme-lightest.css";
-
-:host,
-:root {
-    color-scheme: light;
-}
diff --git a/tools/styles/tokens-v2/dark-vars.css b/tools/styles/tokens-v2/dark-vars.css
deleted file mode 100644
index 03242aa6289..00000000000
--- a/tools/styles/tokens-v2/dark-vars.css
+++ /dev/null
@@ -1,829 +0,0 @@
-:host,
-:root {
-    --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);
-    --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/tools/styles/tokens-v2/global-vars.css b/tools/styles/tokens-v2/global-vars.css
deleted file mode 100644
index a22e5dd61de..00000000000
--- a/tools/styles/tokens-v2/global-vars.css
+++ /dev/null
@@ -1,654 +0,0 @@
-:host,
-:root {
-    --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.888889;
-    --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.888889;
-    --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: 0s;
-    --spectrum-animation-duration-100: 0.13s;
-    --spectrum-animation-duration-200: 0.16s;
-    --spectrum-animation-duration-300: 0.19s;
-    --spectrum-animation-duration-400: 0.22s;
-    --spectrum-animation-duration-500: 0.25s;
-    --spectrum-animation-duration-600: 0.3s;
-    --spectrum-animation-duration-700: 0.35s;
-    --spectrum-animation-duration-800: 0.4s;
-    --spectrum-animation-duration-900: 0.45s;
-    --spectrum-animation-duration-1000: 0.5s;
-    --spectrum-animation-duration-2000: 1s;
-    --spectrum-animation-duration-4000: 2s;
-    --spectrum-animation-duration-6000: 3s;
-    --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);
-    --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;
-    --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-cjk-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/tools/styles/tokens-v2/index.css b/tools/styles/tokens-v2/index.css
deleted file mode 100644
index 91eb9888c97..00000000000
--- a/tools/styles/tokens-v2/index.css
+++ /dev/null
@@ -1,3562 +0,0 @@
-:host,
-:root {
-    --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);
-    --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);
-}
-:host,
-:root {
-    --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.888889;
-    --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.888889;
-    --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: 0s;
-    --spectrum-animation-duration-100: 0.13s;
-    --spectrum-animation-duration-200: 0.16s;
-    --spectrum-animation-duration-300: 0.19s;
-    --spectrum-animation-duration-400: 0.22s;
-    --spectrum-animation-duration-500: 0.25s;
-    --spectrum-animation-duration-600: 0.3s;
-    --spectrum-animation-duration-700: 0.35s;
-    --spectrum-animation-duration-800: 0.4s;
-    --spectrum-animation-duration-900: 0.45s;
-    --spectrum-animation-duration-1000: 0.5s;
-    --spectrum-animation-duration-2000: 1s;
-    --spectrum-animation-duration-4000: 2s;
-    --spectrum-animation-duration-6000: 3s;
-    --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);
-    --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;
-    --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-cjk-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);
-}
-:host,
-:root {
-    --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;
-    --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;
-}
-:host,
-:root {
-    --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);
-    --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);
-}
-:host,
-:root {
-    --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;
-    --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/tools/styles/tokens-v2/large-vars.css b/tools/styles/tokens-v2/large-vars.css
deleted file mode 100644
index e193f4710e9..00000000000
--- a/tools/styles/tokens-v2/large-vars.css
+++ /dev/null
@@ -1,625 +0,0 @@
-:host,
-:root {
-    --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;
-    --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/tools/styles/tokens-v2/light-vars.css b/tools/styles/tokens-v2/light-vars.css
deleted file mode 100644
index 4e5fbcf2440..00000000000
--- a/tools/styles/tokens-v2/light-vars.css
+++ /dev/null
@@ -1,829 +0,0 @@
-:host,
-:root {
-    --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);
-    --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/tools/styles/tokens-v2/medium-vars.css b/tools/styles/tokens-v2/medium-vars.css
deleted file mode 100644
index 61cb4bd04e7..00000000000
--- a/tools/styles/tokens-v2/medium-vars.css
+++ /dev/null
@@ -1,625 +0,0 @@
-:host,
-:root {
-    --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;
-    --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/tools/styles/tokens-v2/spectrum/custom-dark-vars.css b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css
deleted file mode 100644
index 7c73eb52846..00000000000
--- a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in ../dark-vars.css */
-:host,
-:root {
-    --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-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.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-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);
-}
diff --git a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css
deleted file mode 100644
index 8ab79a20080..00000000000
--- a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/* @deprecated there is no darkest theme in S2; please use the dark theme provided at dark-vars.css */
-:host,
-:root {
-    --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-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-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);
-}
diff --git a/tools/styles/tokens-v2/spectrum/custom-large-vars.css b/tools/styles/tokens-v2/spectrum/custom-large-vars.css
deleted file mode 100644
index 7e1b339bd36..00000000000
--- a/tools/styles/tokens-v2/spectrum/custom-large-vars.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in ../large-vars.css */
-:host,
-:root {
-    /* edge-to-visual-only is used for icon-only buttons */
-    --spectrum-edge-to-visual-only-75: 5px;
-    --spectrum-edge-to-visual-only-100: 9px;
-    --spectrum-edge-to-visual-only-200: 13px;
-    --spectrum-edge-to-visual-only-300: 16px;
-
-    --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-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-icon-chevron-size-50: 8px;
-    /* 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-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/tools/styles/tokens-v2/spectrum/custom-light-vars.css b/tools/styles/tokens-v2/spectrum/custom-light-vars.css
deleted file mode 100644
index dfb5ff32ab2..00000000000
--- a/tools/styles/tokens-v2/spectrum/custom-light-vars.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in ../light-vars.css */
-:host,
-:root {
-    --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-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);
-
-    /* Drop Zone background color rgb */
-    --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/
-
-    /* Drop Indicator color 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-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-rgb);
-
-    --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);
-}
diff --git a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css
deleted file mode 100644
index 4a7f30e10a9..00000000000
--- a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in ../medium-vars.css */
-:host,
-:root {
-    /* edge-to-visual-only is used for icon-only buttons */
-    --spectrum-edge-to-visual-only-75: 4px;
-    --spectrum-edge-to-visual-only-100: 7px;
-    --spectrum-edge-to-visual-only-200: 10px;
-    --spectrum-edge-to-visual-only-300: 13px;
-
-    --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-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-icon-chevron-size-50: 6px;
-    /* 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-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/tools/styles/tokens-v2/spectrum/custom-vars.css b/tools/styles/tokens-v2/spectrum/custom-vars.css
deleted file mode 100644
index 78a40fbe3c2..00000000000
--- a/tools/styles/tokens-v2/spectrum/custom-vars.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in ../global-vars.css */
-:host,
-:root {
-    --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);
-
-    --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-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
-    --spectrum-cjk-font: var(--spectrum-cjk-font-family-stack);
-
-    /* static white / black background color for docs containers */
-    --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: 206, 247, 243;
-    --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
-
-    /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */
-    --spectrum-corner-radius-1000: 9999px;
-}
diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css
deleted file mode 100644
index 2ab1aa83de3..00000000000
--- a/tools/styles/tokens-v2/system-theme-bridge.css
+++ /dev/null
@@ -1,676 +0,0 @@
-:host,
-:root {
-    --system-accordion-divider-color: var(--spectrum-gray-200);
-    --system-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color);
-    --system-accordion-item-content-color: var(--spectrum-body-color);
-    --system-action-bar-popover-background-color: var(--spectrum-gray-25);
-    --system-action-bar-popover-border-color: var(--spectrum-gray-400);
-    --system-action-button-background-color-default: var(--spectrum-gray-100);
-    --system-action-button-background-color-hover: var(--spectrum-gray-200);
-    --system-action-button-background-color-down: var(--spectrum-gray-200);
-    --system-action-button-background-color-focus: var(--spectrum-gray-200);
-    --system-action-button-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-action-button-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
-    --system-action-button-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
-    --system-action-button-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
-    --system-action-button-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-    --system-action-button-border-color-default: transparent;
-    --system-action-button-border-color-hover: transparent;
-    --system-action-button-border-color-down: transparent;
-    --system-action-button-border-color-focus: transparent;
-    --system-action-button-border-color-disabled: transparent;
-    --system-action-button-content-color-selected: var(--spectrum-gray-50);
-    --system-action-button-size-m-border-radius-default: var(--spectrum-corner-radius-medium-size-medium);
-    --system-action-button-size-xs-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-small);
-    --system-action-button-size-s-border-radius-default: var(--spectrum-corner-radius-medium-size-small);
-    --system-action-button-size-l-border-radius-default: var(--spectrum-corner-radius-medium-size-large);
-    --system-action-button-size-xl-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-large);
-    --system-action-button-quiet-background-color-default: transparent;
-    --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200);
-    --system-action-button-quiet-background-color-down: var(--spectrum-gray-200);
-    --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200);
-    --system-action-button-quiet-background-color-disabled: transparent;
-    --system-action-button-quiet-background-color-selected-disabled: var(--spectrum-disabled-background-color);
-    --system-action-button-static-black-border-color-default: transparent;
-    --system-action-button-static-black-border-color-hover: transparent;
-    --system-action-button-static-black-border-color-down: transparent;
-    --system-action-button-static-black-border-color-focus: transparent;
-    --system-action-button-static-black-border-color-disabled: transparent;
-    --system-action-button-static-black-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
-    --system-action-button-static-black-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color);
-    --system-action-button-static-black-background-color-default: var(--spectrum-transparent-black-100);
-    --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-200);
-    --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-200);
-    --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-200);
-    --system-action-button-static-black-quiet-background-color-default: transparent;
-    --system-action-button-static-black-quiet-background-color-hover: var(--spectrum-transparent-black-200);
-    --system-action-button-static-black-quiet-background-color-down: var(--spectrum-transparent-black-200);
-    --system-action-button-static-black-quiet-background-color-focus: var(--spectrum-transparent-black-200);
-    --system-action-button-static-black-quiet-background-color-disabled: transparent;
-    --system-action-button-static-white-border-color-default: transparent;
-    --system-action-button-static-white-border-color-hover: transparent;
-    --system-action-button-static-white-border-color-down: transparent;
-    --system-action-button-static-white-border-color-focus: transparent;
-    --system-action-button-static-white-border-color-disabled: transparent;
-    --system-action-button-static-white-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
-    --system-action-button-static-white-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color);
-    --system-action-button-static-white-background-color-default: var(--spectrum-transparent-white-100);
-    --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-200);
-    --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-200);
-    --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-200);
-    --system-action-button-static-white-quiet-background-color-default: transparent;
-    --system-action-button-static-white-quiet-background-color-hover: var(--spectrum-transparent-white-200);
-    --system-action-button-static-white-quiet-background-color-down: var(--spectrum-transparent-white-200);
-    --system-action-button-static-white-quiet-background-color-focus: var(--spectrum-transparent-white-200);
-    --system-action-button-static-white-quiet-background-color-disabled: transparent;
-    --system-action-group-gap-size-compact: 0;
-    --system-action-group-horizontal-spacing-compact: -1px;
-    --system-action-group-vertical-spacing-compact: -1px;
-    --system-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
-    --system-asset-folder-background-color: var(--spectrum-gray-200);
-    --system-asset-file-background-color: var(--spectrum-gray-25);
-    --system-asset-icon-outline-color: var(--spectrum-gray-500);
-    --system-button-background-color-default: var(--spectrum-gray-50);
-    --system-button-background-color-hover: var(--spectrum-gray-100);
-    --system-button-background-color-down: var(--spectrum-gray-200);
-    --system-button-background-color-focus: var(--spectrum-gray-100);
-    --system-button-border-color-default: var(--spectrum-gray-400);
-    --system-button-border-color-hover: var(--spectrum-gray-500);
-    --system-button-border-color-down: var(--spectrum-gray-600);
-    --system-button-border-color-focus: var(--spectrum-gray-500);
-    --system-button-background-color-disabled: transparent;
-    --system-button-border-color-disabled: var(--spectrum-disabled-border-color);
-    --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-    --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
-    --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
-    --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-    --system-button-primary-content-color-default: var(--spectrum-gray-25);
-    --system-button-primary-content-color-hover: var(--spectrum-gray-25);
-    --system-button-primary-content-color-down: var(--spectrum-gray-25);
-    --system-button-primary-content-color-focus: var(--spectrum-gray-25);
-    --system-button-primary-outline-background-color-hover: var(--spectrum-gray-100);
-    --system-button-primary-outline-background-color-down: var(--spectrum-gray-100);
-    --system-button-primary-outline-background-color-focus: var(--spectrum-gray-100);
-    --system-button-secondary-background-color-default: var(--spectrum-gray-100);
-    --system-button-secondary-background-color-hover: var(--spectrum-gray-200);
-    --system-button-secondary-background-color-down: var(--spectrum-gray-200);
-    --system-button-secondary-background-color-focus: var(--spectrum-gray-200);
-    --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-100);
-    --system-button-secondary-outline-background-color-down: var(--spectrum-gray-100);
-    --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-100);
-    --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300);
-    --system-button-secondary-outline-border-color-down: var(--spectrum-gray-400);
-    --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900);
-    --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900);
-    --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900);
-    --system-button-static-white-content-color-default: var(--spectrum-black);
-    --system-button-static-white-content-color-hover: var(--spectrum-black);
-    --system-button-static-white-content-color-down: var(--spectrum-black);
-    --system-button-static-white-content-color-focus: var(--spectrum-black);
-    --system-button-static-white-outline-background-color-default: var(--spectrum-transparent-white-25);
-    --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-100);
-    --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-100);
-    --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-100);
-    --system-button-static-white-outline-content-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-outline-content-color-hover: var(--spectrum-transparent-white-900);
-    --system-button-static-white-outline-content-color-down: var(--spectrum-transparent-white-900);
-    --system-button-static-white-outline-content-color-focus: var(--spectrum-transparent-white-900);
-    --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900);
-    --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900);
-    --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900);
-    --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-100);
-    --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-200);
-    --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-200);
-    --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-200);
-    --system-button-static-white-secondary-content-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-secondary-content-color-hover: var(--spectrum-transparent-white-900);
-    --system-button-static-white-secondary-content-color-down: var(--spectrum-transparent-white-900);
-    --system-button-static-white-secondary-content-color-focus: var(--spectrum-transparent-white-900);
-    --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300);
-    --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-outline-background-color-default: var(--spectrum-transparent-white-25);
-    --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-100);
-    --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-100);
-    --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-100);
-    --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800);
-    --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900);
-    --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900);
-    --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900);
-    --system-button-static-black-content-color-default: var(--spectrum-white);
-    --system-button-static-black-content-color-hover: var(--spectrum-white);
-    --system-button-static-black-content-color-down: var(--spectrum-white);
-    --system-button-static-black-content-color-focus: var(--spectrum-white);
-    --system-button-static-black-outline-background-color-default: var(--spectrum-transparent-black-25);
-    --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-100);
-    --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-100);
-    --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-100);
-    --system-button-static-black-outline-content-color-default: var(--spectrum-transparent-black-800);
-    --system-button-static-black-outline-content-color-hover: var(--spectrum-transparent-black-900);
-    --system-button-static-black-outline-content-color-down: var(--spectrum-transparent-black-900);
-    --system-button-static-black-outline-content-color-focus: var(--spectrum-transparent-black-900);
-    --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-800);
-    --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-900);
-    --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-900);
-    --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-900);
-    --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-100);
-    --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-200);
-    --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-200);
-    --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-200);
-    --system-button-static-black-secondary-content-color-default: var(--spectrum-transparent-black-800);
-    --system-button-static-black-secondary-content-color-hover: var(--spectrum-transparent-black-900);
-    --system-button-static-black-secondary-content-color-down: var(--spectrum-transparent-black-900);
-    --system-button-static-black-secondary-content-color-focus: var(--spectrum-transparent-black-900);
-    --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300);
-    --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-outline-background-color-default: var(--spectrum-transparent-black-25);
-    --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-100);
-    --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-100);
-    --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-100);
-    --system-checkbox-control-color-default: var(--spectrum-neutral-content-color-default);
-    --system-checkbox-control-color-hover: var(--spectrum-gray-700);
-    --system-checkbox-control-color-down: var(--spectrum-gray-800);
-    --system-checkbox-control-color-focus: var(--spectrum-gray-700);
-    --system-checkbox-checkmark-color: var(--spectrum-gray-50);
-    --system-checkbox-control-corner-radius: 2px;
-    --system-card-border-color: var(--spectrum-gray-100);
-    --system-card-border-color-hover: var(--spectrum-gray-200);
-    --system-card-divider-color: var(--spectrum-gray-200);
-    --system-card-preview-background-color: var(--spectrum-gray-100);
-    --system-card-preview-background-color-hover: var(--spectrum-gray-200);
-    --system-clear-button-background-color: transparent;
-    --system-clear-button-background-color-hover: transparent;
-    --system-clear-button-background-color-down: transparent;
-    --system-clear-button-background-color-key-focus: transparent;
-    --system-clear-button-height: var(--spectrum-component-height-100);
-    --system-clear-button-width: var(--spectrum-component-height-100);
-    --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-    --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
-    --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
-    --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
-    --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --system-clear-button-size-s-height: var(--spectrum-component-height-75);
-    --system-clear-button-size-s-width: var(--spectrum-component-height-75);
-    --system-clear-button-size-l-height: var(--spectrum-component-height-200);
-    --system-clear-button-size-l-width: var(--spectrum-component-height-200);
-    --system-clear-button-size-xl-height: var(--spectrum-component-height-300);
-    --system-clear-button-size-xl-width: var(--spectrum-component-height-300);
-    --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent);
-    --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent);
-    --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent);
-    --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent);
-    --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent);
-    --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400));
-    --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-500));
-    --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400));
-    --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color);
-    --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
-    --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
-    --system-clear-button-disabled-background-color: transparent;
-    --system-close-button-background-color-default: transparent;
-    --system-close-button-background-color-hover: var(--spectrum-gray-100);
-    --system-close-button-background-color-down: var(--spectrum-gray-200);
-    --system-close-button-background-color-focus: var(--spectrum-gray-100);
-    --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-400);
-    --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-500);
-    --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-400);
-    --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-400);
-    --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-500);
-    --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-400);
-    --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
-    --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
-    --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
-    --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size);
-    --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size);
-    --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter);
-    --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter);
-    --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-    --system-coach-indicator-ring-light-color: var(--spectrum-gray-25);
-    --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size));
-    --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size));
-    --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
-    --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
-    --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66;
-    --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1;
-    --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
-    --system-coach-indicator-animation-name: pulse;
-    --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple);
-    --system-coach-indicator-animation-keyframe-0-scale: 1;
-    --system-coach-indicator-animation-keyframe-0-opacity: 0;
-    --system-coach-indicator-animation-keyframe-50-scale: 1.5;
-    --system-coach-indicator-animation-keyframe-50-opacity: 1;
-    --system-coach-indicator-animation-keyframe-100-scale: 2;
-    --system-coach-indicator-animation-keyframe-100-opacity: 0;
-    --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8;
-    --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter);
-    --system-coach-indicator-quiet-animation-name: pulse-quiet;
-    --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width);
-    --system-coach-mark-width: var(--spectrum-coach-mark-width);
-    --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width);
-    --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height);
-    --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
-    --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content);
-    --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300);
-    --system-coach-mark-header-to-body: var(--spectrum-spacing-200);
-    --system-coach-mark-body-to-footer: var(--spectrum-spacing-300);
-    --system-coach-mark-title-color: var(--spectrum-heading-color);
-    --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font);
-    --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style);
-    --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-    --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size);
-    --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height);
-    --system-coach-mark-content-font-color: var(--spectrum-body-color);
-    --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
-    --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font);
-    --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style);
-    --system-coach-mark-content-line-height: var(--spectrum-body-line-height);
-    --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size);
-    --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color);
-    --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight);
-    --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font);
-    --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style);
-    --system-coach-mark-step-line-height: var(--spectrum-body-line-height);
-    --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size);
-    --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
-    --system-coach-mark-popover-border-width: var(--spectrum-border-width-100);
-    --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100);
-    --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
-    --system-color-wheel-border-color: var(--spectrum-transparent-black-300);
-    --system-combobox-border-color-default: var(--spectrum-gray-500);
-    --system-combobox-border-color-hover: var(--spectrum-gray-600);
-    --system-combobox-border-color-focus: var(--spectrum-gray-800);
-    --system-combobox-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-combobox-border-color-key-focus: var(--spectrum-gray-800);
-    --system-combobox-readonly-input-border-color: var(--spectrum-gray-500);
-    --system-combobox-background-color-disabled: var(--spectrum-gray-25);
-    --system-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
-    --system-dialog-fullscreen-header-text-size: 28px;
-    --system-dialog-min-inline-size: 288px;
-    --system-dialog-confirm-small-width: 400px;
-    --system-dialog-confirm-medium-width: 480px;
-    --system-dialog-confirm-large-width: 640px;
-    --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
-    --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
-    --system-dialog-confirm-description-text-color: var(--spectrum-gray-800);
-    --system-dialog-confirm-title-text-color: var(--spectrum-gray-900);
-    --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100);
-    --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100);
-    --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-    --system-dialog-confirm-description-padding: var(--spectrum-spacing-50);
-    --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1);
-    --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
-    --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
-    --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
-    --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
-    --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));
-    --system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
-    --system-divider-background-color: var(--spectrum-gray-200);
-    --system-divider-background-color-static-white: var(--spectrum-transparent-white-200);
-    --system-divider-background-color-static-black: var(--spectrum-transparent-black-200);
-    --system-drop-zone-border-color: var(--spectrum-gray-200);
-    --system-field-group-margin: var(--spectrum-spacing-300);
-    --system-field-group-readonly-delimiter: ",";
-    --system-infield-button-border-width: var(--spectrum-border-width-100);
-    --system-infield-button-border-color: inherit;
-    --system-infield-button-border-radius: var(--spectrum-corner-radius-100);
-    --system-infield-button-border-radius-reset: 0;
-    --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset);
-    --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset);
-    --system-infield-button-background-color: var(--spectrum-gray-100);
-    --system-infield-button-background-color-hover: var(--spectrum-gray-200);
-    --system-infield-button-background-color-down: var(--spectrum-gray-200);
-    --system-infield-button-background-color-key-focus: var(--spectrum-gray-200);
-    --system-infield-button-disabled-border-color: var(--spectrum-gray-300);
-    --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
-    --system-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
-    --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
-    --system-menu-item-corner-radius: var(--spectrum-corner-radius-100);
-    --system-menu-item-focus-indicator-shadow: none;
-    --system-menu-item-focus-indicator-offset: var(--spectrum-spacing-50);
-    --system-menu-item-spacing-multiplier: 1;
-    --system-menu-item-focus-indicator-outline-style: solid;
-    --system-meter-min-width: var(--spectrum-meter-minimum-width);
-    --system-meter-max-width: var(--spectrum-meter-maximum-width);
-    --system-meter-inline-size: var(--spectrum-meter-width);
-    --system-meter-top-to-text: var(--spectrum-component-top-to-text);
-    --system-meter-fill-color-positive: var(--spectrum-positive-visual-color);
-    --system-meter-fill-color-notice: var(--spectrum-notice-visual-color);
-    --system-meter-fill-color-negative: var(--spectrum-negative-visual-color);
-    --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small);
-    --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400);
-    --system-meter-size-s-font-size: var(--spectrum-font-size-75);
-    --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-meter-thickness: var(--spectrum-meter-thickness-large);
-    --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large);
-    --system-meter-inline-size: var(--spectrum-progressbar-size-2500);
-    --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500);
-    --system-meter-font-size: var(--spectrum-font-size-100);
-    --system-meter-size-l-font-size: var(--spectrum-font-size-100);
-    --system-meter-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-modal-background-color: var(--spectrum-background-layer-2-color);
-    --system-picker-background-color-default: var(--spectrum-gray-100);
-    --system-picker-background-color-default-open: var(--spectrum-gray-200);
-    --system-picker-background-color-hover: var(--spectrum-gray-200);
-    --system-picker-background-color-hover-open: var(--spectrum-gray-200);
-    --system-picker-background-color-active: var(--spectrum-gray-200);
-    --system-picker-background-color-key-focus: var(--spectrum-gray-200);
-    --system-picker-border-color-default: var(--spectrum-gray-500);
-    --system-picker-border-color-default-open: var(--spectrum-gray-800);
-    --system-picker-border-color-hover: var(--spectrum-gray-600);
-    --system-picker-border-color-hover-open: var(--spectrum-gray-900);
-    --system-picker-border-color-active: var(--spectrum-gray-700);
-    --system-picker-border-color-key-focus: var(--spectrum-gray-900);
-    --system-picker-border-color-disabled: var(--spectrum-gray-300);
-    --system-picker-border-width: var(--spectrum-border-width-100);
-    --system-picker-button-background-color: var(--spectrum-gray-100);
-    --system-picker-button-background-color-hover: var(--spectrum-gray-200);
-    --system-picker-button-background-color-down: var(--spectrum-gray-200);
-    --system-picker-button-background-color-key-focus: var(--spectrum-gray-200);
-    --system-picker-button-border-color: none;
-    --system-picker-button-border-radius: var(--spectrum-corner-radius-75);
-    --system-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200);
-    --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75);
-    --system-picker-button-border-width: 0px;
-    --system-picker-button-padding: 4px;
-    --system-popover-border-width: var(--spectrum-border-width-100);
-    --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
-    --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
-    --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100);
-    --system-progress-bar-fill-size-indeterminate: 70%;
-    --system-progress-bar-size-2400: 192px;
-    --system-progress-bar-size-2500: 200px;
-    --system-progress-bar-size-2800: 224px;
-    --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width);
-    --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width);
-    --system-progress-bar-line-height: var(--spectrum-line-height-100);
-    --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75);
-    --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200);
-    --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default);
-    --system-progress-bar-track-color: var(--spectrum-gray-200);
-    --system-progress-bar-fill-color: var(--spectrum-accent-color-900);
-    --system-progress-bar-label-and-value-white: var(--spectrum-white);
-    --system-progress-bar-track-color-white: var(--spectrum-transparent-white-400);
-    --system-progress-bar-fill-color-white: var(--spectrum-white);
-    --system-progress-bar-size-default: var(--system-progress-bar-size-2400);
-    --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400);
-    --system-progress-bar-font-size: var(--spectrum-font-size-75);
-    --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75);
-    --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large);
-    --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large);
-    --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400);
-    --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75);
-    --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small);
-    --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500);
-    --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100);
-    --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large);
-    --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800);
-    --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200);
-    --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large);
-    --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
-    --system-progress-circle-track-border-color: var(--spectrum-gray-200);
-    --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400);
-    --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000);
-    --system-radio-button-border-color-default: var(--spectrum-gray-600);
-    --system-radio-button-border-color-hover: var(--spectrum-gray-700);
-    --system-radio-button-border-color-down: var(--spectrum-gray-800);
-    --system-radio-button-border-color-focus: var(--spectrum-gray-700);
-    --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
-    --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
-    --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
-    --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-    --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --system-radio-disabled-content-color: var(--spectrum-disabled-content-color);
-    --system-radio-disabled-border-color: var(--spectrum-disabled-content-color);
-    --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
-    --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
-    --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
-    --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
-    --system-radio-border-width: var(--spectrum-border-width-200);
-    --system-radio-button-background-color: var(--spectrum-gray-50);
-    --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
-    --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
-    --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
-    --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
-    --system-radio-line-height: var(--spectrum-line-height-100);
-    --system-radio-animation-duration: var(--spectrum-animation-duration-100);
-    --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-radio-height: var(--spectrum-component-height-100);
-    --system-radio-size-m-height: var(--spectrum-component-height-100);
-    --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
-    --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium);
-    --system-radio-text-to-control: var(--spectrum-text-to-control-100);
-    --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100);
-    --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
-    --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100);
-    --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-    --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-    --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
-    --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
-    --system-radio-font-size: var(--spectrum-font-size-100);
-    --system-radio-size-m-font-size: var(--spectrum-font-size-100);
-    --system-radio-size-s-height: var(--spectrum-component-height-75);
-    --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small);
-    --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75);
-    --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-    --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
-    --system-radio-size-s-font-size: var(--spectrum-font-size-75);
-    --system-radio-size-l-height: var(--spectrum-component-height-200);
-    --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large);
-    --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200);
-    --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
-    --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
-    --system-radio-size-l-font-size: var(--spectrum-font-size-200);
-    --system-radio-size-xl-height: var(--spectrum-component-height-300);
-    --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
-    --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300);
-    --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300);
-    --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
-    --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
-    --system-radio-size-xl-font-size: var(--spectrum-font-size-300);
-    --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900);
-    --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
-    --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100);
-    --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
-    --system-search-border-color-default: var(--spectrum-gray-500);
-    --system-search-border-color-hover: var(--spectrum-gray-600);
-    --system-search-border-color-focus: var(--spectrum-gray-800);
-    --system-search-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-search-border-color-key-focus: var(--spectrum-gray-800);
-    --system-search-background-color: var(--spectrum-gray-25);
-    --system-search-background-color-disabled: var(--spectrum-gray-25);
-    --system-search-border-color-disabled: var(--spectrum-gray-300);
-    --system-search-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-size-m-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
-    --system-search-size-m-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
-    --system-search-size-s-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
-    --system-search-size-l-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
-    --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
-    --system-search-quiet-background-color-disabled: transparent;
-    --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color);
-    --system-side-nav-background-hover: var(--spectrum-gray-100);
-    --system-side-nav-item-background-down: var(--spectrum-gray-200);
-    --system-side-nav-background-key-focus: var(--spectrum-gray-100);
-    --system-side-nav-item-background-default-selected: var(--spectrum-gray-100);
-    --system-side-nav-background-hover-selected: var(--spectrum-gray-200);
-    --system-side-nav-item-background-down-selected: var(--spectrum-gray-200);
-    --system-side-nav-background-key-focus-selected: var(--spectrum-gray-100);
-    --system-slider-track-color: var(--spectrum-gray-200);
-    --system-slider-track-fill-color: var(--spectrum-gray-700);
-    --system-slider-ramp-track-color: var(--spectrum-gray-400);
-    --system-slider-ramp-track-color-disabled: var(--spectrum-gray-100);
-    --system-slider-handle-background-color: transparent;
-    --system-slider-handle-background-color-disabled: transparent;
-    --system-slider-ramp-handle-background-color: var(--spectrum-gray-75);
-    --system-slider-ticks-handle-background-color: var(--spectrum-gray-75);
-    --system-slider-handle-border-color: var(--spectrum-gray-700);
-    --system-slider-handle-disabled-background-color: var(--spectrum-gray-75);
-    --system-slider-tick-mark-color: var(--spectrum-gray-200);
-    --system-slider-handle-border-color-hover: var(--spectrum-gray-800);
-    --system-slider-handle-border-color-down: var(--spectrum-gray-800);
-    --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
-    --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
-    --system-slider-track-corner-radius: 2px;
-    --system-slider-handle-border-radius: var(--spectrum-corner-radius-500);
-    --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-500);
-    --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-500);
-    --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
-    --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
-    --system-split-view-background-color: var(--spectrum-gray-75);
-    --system-split-view-handle-background-color: var(--spectrum-gray-200);
-    --system-split-view-gripper-border-radius: 2px;
-    --system-stepper-border-width: var(--spectrum-border-width-100);
-    --system-stepper-border-color-default: var(--spectrum-gray-500);
-    --system-stepper-border-color-hover: var(--spectrum-gray-600);
-    --system-stepper-border-color-focus: var(--spectrum-gray-800);
-    --system-stepper-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-800);
-    --system-stepper-buttons-border-style: none;
-    --system-stepper-buttons-border-width: 0;
-    --system-stepper-buttons-border-color: var(--spectrum-gray-500);
-    --system-stepper-buttons-background-color: var(--spectrum-gray-100);
-    --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
-    --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
-    --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-800);
-    --system-stepper-button-border-width: var(--spectrum-border-width-100);
-    --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
-    --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
-    --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
-    --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
-    --system-stepper-border-color-disabled: var(--spectrum-gray-300);
-    --system-stepper-button-border-width-disabled: var(--spectrum-border-width-200);
-    --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
-    --system-stepper-quiet-buttons-border-style: none;
-    --system-stepper-quiet-button-edge-to-fill: 0;
-    --system-swatch-border-radius: var(--spectrum-corner-radius-100);
-    --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200);
-    --system-swatch-border-thickness: var(--spectrum-border-width-100);
-    --system-swatch-border-thickness-selected: var(--spectrum-border-width-200);
-    --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-swatch-border-color-opacity: 0.51;
-    --system-swatch-border-color-light-opacity: 0.2;
-    --system-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--system-swatch-border-color-opacity));
-    --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity));
-    --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity));
-    --system-swatch-border-color-selected: var(--spectrum-gray-900);
-    --system-swatch-inner-border-color-selected: var(--spectrum-gray-25);
-    --system-swatch-disabled-icon-color: var(--spectrum-gray-25);
-    --system-swatch-dash-icon-color: var(--spectrum-gray-800);
-    --system-swatch-slash-icon-color: var(--spectrum-red-900);
-    --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --system-swatch-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-size-m-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
-    --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
-    --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small);
-    --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50);
-    --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small);
-    --system-swatch-size-s-size: var(--spectrum-swatch-size-small);
-    --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
-    --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
-    --system-swatch-size-l-size: var(--spectrum-swatch-size-large);
-    --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200);
-    --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large);
-    --system-swatch-group-spacing-compact: var(--spectrum-spacing-50);
-    --system-swatch-group-spacing-regular: var(--spectrum-spacing-75);
-    --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100);
-    --system-switch-handle-border-color-default: var(--spectrum-gray-600);
-    --system-switch-handle-border-color-hover: var(--spectrum-gray-700);
-    --system-switch-handle-border-color-down: var(--spectrum-gray-800);
-    --system-switch-handle-border-color-focus: var(--spectrum-gray-700);
-    --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700);
-    --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800);
-    --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
-    --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800);
-    --system-switch-background-color: var(--spectrum-gray-200);
-    --system-switch-background-color-disabled: var(--spectrum-gray-200);
-    --system-switch-handle-background-color: var(--spectrum-gray-50);
-    --system-table-header-background-color: var(--spectrum-transparent-white-25);
-    --system-table-border-color: var(--spectrum-gray-200);
-    --system-table-divider-color: var(--spectrum-gray-200);
-    --system-table-row-background-color: var(--spectrum-gray-25);
-    --system-table-summary-row-background-color: var(--spectrum-gray-100);
-    --system-table-section-header-background-color: var(--spectrum-gray-100);
-    --system-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --system-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover);
-    --system-table-quiet-header-background-color: var(--spectrum-transparent-white-25);
-    --system-table-quiet-row-background-color: var(--spectrum-transparent-white-25);
-    --system-tabs-font-weight: var(--spectrum-regular-font-weight);
-    --system-tabs-divider-background-color: var(--spectrum-gray-200);
-    --system-tag-background-color: var(--spectrum-gray-50);
-    --system-tag-background-color-hover: var(--spectrum-gray-50);
-    --system-tag-background-color-active: var(--spectrum-gray-100);
-    --system-tag-background-color-focus: var(--spectrum-gray-50);
-    --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
-    --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
-    --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
-    --system-tag-border-color: var(--spectrum-gray-700);
-    --system-tag-border-color-hover: var(--spectrum-gray-800);
-    --system-tag-border-color-active: var(--spectrum-gray-900);
-    --system-tag-border-color-focus: var(--spectrum-gray-800);
-    --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
-    --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
-    --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
-    --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --system-tag-content-color-selected: var(--spectrum-gray-25);
-    --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
-    --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
-    --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
-    --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-    --system-tag-border-color-disabled: transparent;
-    --system-tag-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
-    --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
-    --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
-    --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
-    --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
-    --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
-    --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
-    --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
-    --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
-    --system-textfield-background-color: var(--spectrum-gray-25);
-    --system-textfield-background-color-disabled: var(--spectrum-gray-25);
-    --system-textfield-border-color: var(--spectrum-gray-500);
-    --system-textfield-border-color-hover: var(--spectrum-gray-600);
-    --system-textfield-border-color-focus: var(--spectrum-gray-800);
-    --system-textfield-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-800);
-    --system-textfield-border-color-disabled: var(--spectrum-gray-300);
-    --system-textfield-border-width: var(--spectrum-border-width-100);
-    --system-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100);
-    --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75);
-    --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200);
-    --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300);
-    --system-textfield-quiet-border-color-disabled: var(--spectrum-gray-300);
-    --system-thumbnail-border-radius: 2px;
-    --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-    --system-toast-divider-color: var(--spectrum-transparent-white-400);
-    --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
-}
diff --git a/tools/styles/tokens/dark-vars.css b/tools/styles/tokens/dark-vars.css
deleted file mode 100644
index 435fd23f93b..00000000000
--- a/tools/styles/tokens/dark-vars.css
+++ /dev/null
@@ -1,460 +0,0 @@
-:host,
-:root {
-    --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-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: 29, 29, 29;
-    --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-    --spectrum-gray-75-rgb: 38, 38, 38;
-    --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-    --spectrum-gray-100-rgb: 50, 50, 50;
-    --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-    --spectrum-gray-200-rgb: 63, 63, 63;
-    --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-    --spectrum-gray-300-rgb: 84, 84, 84;
-    --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-    --spectrum-gray-400-rgb: 112, 112, 112;
-    --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-    --spectrum-gray-500-rgb: 144, 144, 144;
-    --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-    --spectrum-gray-600-rgb: 178, 178, 178;
-    --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-    --spectrum-gray-700-rgb: 209, 209, 209;
-    --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, 56, 119;
-    --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-    --spectrum-blue-200-rgb: 0, 65, 138;
-    --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-    --spectrum-blue-300-rgb: 0, 77, 163;
-    --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-    --spectrum-blue-400-rgb: 0, 89, 194;
-    --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-    --spectrum-blue-500-rgb: 3, 103, 224;
-    --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-    --spectrum-blue-600-rgb: 19, 121, 243;
-    --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-    --spectrum-blue-700-rgb: 52, 143, 244;
-    --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-    --spectrum-blue-800-rgb: 84, 163, 246;
-    --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-    --spectrum-blue-900-rgb: 114, 183, 249;
-    --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-    --spectrum-blue-1000-rgb: 143, 202, 252;
-    --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-    --spectrum-blue-1100-rgb: 174, 219, 254;
-    --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-    --spectrum-blue-1200-rgb: 204, 233, 255;
-    --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-    --spectrum-blue-1300-rgb: 232, 246, 255;
-    --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-    --spectrum-blue-1400-rgb: 255, 255, 255;
-    --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-    --spectrum-red-100-rgb: 123, 0, 0;
-    --spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-    --spectrum-red-200-rgb: 141, 0, 0;
-    --spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-    --spectrum-red-300-rgb: 165, 0, 0;
-    --spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-    --spectrum-red-400-rgb: 190, 4, 3;
-    --spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-    --spectrum-red-500-rgb: 215, 25, 19;
-    --spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-    --spectrum-red-600-rgb: 234, 56, 41;
-    --spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-    --spectrum-red-700-rgb: 246, 88, 67;
-    --spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-    --spectrum-red-800-rgb: 255, 117, 94;
-    --spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-    --spectrum-red-900-rgb: 255, 149, 129;
-    --spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-    --spectrum-red-1000-rgb: 255, 176, 161;
-    --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-    --spectrum-red-1100-rgb: 255, 201, 189;
-    --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-    --spectrum-red-1200-rgb: 255, 222, 216;
-    --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-    --spectrum-red-1300-rgb: 255, 241, 238;
-    --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-    --spectrum-red-1400-rgb: 255, 255, 255;
-    --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-    --spectrum-orange-100-rgb: 102, 37, 0;
-    --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-    --spectrum-orange-200-rgb: 117, 45, 0;
-    --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-    --spectrum-orange-300-rgb: 137, 55, 0;
-    --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-    --spectrum-orange-400-rgb: 158, 66, 0;
-    --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-    --spectrum-orange-500-rgb: 180, 78, 0;
-    --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-    --spectrum-orange-600-rgb: 202, 93, 0;
-    --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-    --spectrum-orange-700-rgb: 225, 109, 0;
-    --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-    --spectrum-orange-800-rgb: 244, 129, 12;
-    --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-    --spectrum-orange-900-rgb: 254, 154, 46;
-    --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-    --spectrum-orange-1000-rgb: 255, 181, 88;
-    --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-    --spectrum-orange-1100-rgb: 253, 206, 136;
-    --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-    --spectrum-orange-1200-rgb: 255, 225, 179;
-    --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-    --spectrum-orange-1300-rgb: 255, 242, 221;
-    --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-    --spectrum-orange-1400-rgb: 255, 253, 249;
-    --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-    --spectrum-yellow-100-rgb: 76, 54, 0;
-    --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-    --spectrum-yellow-200-rgb: 88, 64, 0;
-    --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-    --spectrum-yellow-300-rgb: 103, 76, 0;
-    --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-    --spectrum-yellow-400-rgb: 119, 89, 0;
-    --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-    --spectrum-yellow-500-rgb: 136, 104, 0;
-    --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-    --spectrum-yellow-600-rgb: 155, 120, 0;
-    --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-    --spectrum-yellow-700-rgb: 174, 137, 0;
-    --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-    --spectrum-yellow-800-rgb: 192, 156, 0;
-    --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-    --spectrum-yellow-900-rgb: 211, 174, 0;
-    --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-    --spectrum-yellow-1000-rgb: 228, 194, 0;
-    --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-    --spectrum-yellow-1100-rgb: 244, 213, 0;
-    --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-    --spectrum-yellow-1200-rgb: 249, 232, 92;
-    --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-    --spectrum-yellow-1300-rgb: 252, 246, 187;
-    --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-    --spectrum-yellow-1400-rgb: 255, 255, 255;
-    --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-    --spectrum-chartreuse-100-rgb: 48, 64, 0;
-    --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-    --spectrum-chartreuse-200-rgb: 55, 74, 0;
-    --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-    --spectrum-chartreuse-300-rgb: 65, 87, 0;
-    --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-    --spectrum-chartreuse-400-rgb: 76, 102, 0;
-    --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-    --spectrum-chartreuse-500-rgb: 89, 118, 0;
-    --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-    --spectrum-chartreuse-600-rgb: 102, 136, 0;
-    --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-    --spectrum-chartreuse-700-rgb: 117, 154, 0;
-    --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-    --spectrum-chartreuse-800-rgb: 132, 173, 1;
-    --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-    --spectrum-chartreuse-900-rgb: 148, 192, 8;
-    --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-    --spectrum-chartreuse-1000-rgb: 166, 211, 18;
-    --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-    --spectrum-chartreuse-1100-rgb: 184, 229, 37;
-    --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-    --spectrum-chartreuse-1200-rgb: 205, 245, 71;
-    --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-    --spectrum-chartreuse-1300-rgb: 231, 254, 154;
-    --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-    --spectrum-chartreuse-1400-rgb: 255, 255, 255;
-    --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-    --spectrum-celery-100-rgb: 0, 69, 10;
-    --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-    --spectrum-celery-200-rgb: 0, 80, 12;
-    --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-    --spectrum-celery-300-rgb: 0, 94, 14;
-    --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-    --spectrum-celery-400-rgb: 0, 109, 15;
-    --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-    --spectrum-celery-500-rgb: 0, 127, 15;
-    --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-    --spectrum-celery-600-rgb: 0, 145, 18;
-    --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-    --spectrum-celery-700-rgb: 4, 165, 30;
-    --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-    --spectrum-celery-800-rgb: 34, 184, 51;
-    --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-    --spectrum-celery-900-rgb: 68, 202, 73;
-    --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-    --spectrum-celery-1000-rgb: 105, 220, 99;
-    --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-    --spectrum-celery-1100-rgb: 142, 235, 127;
-    --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-    --spectrum-celery-1200-rgb: 180, 247, 162;
-    --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-    --spectrum-celery-1300-rgb: 221, 253, 211;
-    --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-    --spectrum-celery-1400-rgb: 255, 255, 255;
-    --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-    --spectrum-green-100-rgb: 4, 67, 41;
-    --spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-    --spectrum-green-200-rgb: 0, 78, 47;
-    --spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-    --spectrum-green-300-rgb: 0, 92, 56;
-    --spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-    --spectrum-green-400-rgb: 0, 108, 67;
-    --spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-    --spectrum-green-500-rgb: 0, 125, 78;
-    --spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-    --spectrum-green-600-rgb: 0, 143, 93;
-    --spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-    --spectrum-green-700-rgb: 18, 162, 108;
-    --spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-    --spectrum-green-800-rgb: 43, 180, 125;
-    --spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-    --spectrum-green-900-rgb: 67, 199, 143;
-    --spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-    --spectrum-green-1000-rgb: 94, 217, 162;
-    --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-    --spectrum-green-1100-rgb: 129, 233, 184;
-    --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-    --spectrum-green-1200-rgb: 177, 244, 209;
-    --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-    --spectrum-green-1300-rgb: 223, 250, 234;
-    --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-    --spectrum-green-1400-rgb: 254, 255, 252;
-    --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-    --spectrum-seafoam-100-rgb: 18, 65, 63;
-    --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-    --spectrum-seafoam-200-rgb: 14, 76, 73;
-    --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-    --spectrum-seafoam-300-rgb: 4, 90, 87;
-    --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-    --spectrum-seafoam-400-rgb: 0, 105, 101;
-    --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-    --spectrum-seafoam-500-rgb: 0, 122, 117;
-    --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-    --spectrum-seafoam-600-rgb: 0, 140, 135;
-    --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-    --spectrum-seafoam-700-rgb: 0, 158, 152;
-    --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-    --spectrum-seafoam-800-rgb: 3, 178, 171;
-    --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-    --spectrum-seafoam-900-rgb: 54, 197, 189;
-    --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-    --spectrum-seafoam-1000-rgb: 93, 214, 207;
-    --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-    --spectrum-seafoam-1100-rgb: 132, 230, 223;
-    --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-    --spectrum-seafoam-1200-rgb: 176, 242, 236;
-    --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-    --spectrum-seafoam-1300-rgb: 223, 249, 246;
-    --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-    --spectrum-seafoam-1400-rgb: 254, 255, 254;
-    --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-    --spectrum-cyan-100-rgb: 0, 61, 98;
-    --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-    --spectrum-cyan-200-rgb: 0, 71, 111;
-    --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-    --spectrum-cyan-300-rgb: 0, 85, 127;
-    --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-    --spectrum-cyan-400-rgb: 0, 100, 145;
-    --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-    --spectrum-cyan-500-rgb: 0, 116, 162;
-    --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-    --spectrum-cyan-600-rgb: 0, 134, 180;
-    --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-    --spectrum-cyan-700-rgb: 0, 153, 198;
-    --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-    --spectrum-cyan-800-rgb: 14, 173, 215;
-    --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-    --spectrum-cyan-900-rgb: 44, 193, 230;
-    --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-    --spectrum-cyan-1000-rgb: 84, 211, 241;
-    --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-    --spectrum-cyan-1100-rgb: 127, 228, 249;
-    --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-    --spectrum-cyan-1200-rgb: 167, 241, 255;
-    --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-    --spectrum-cyan-1300-rgb: 215, 250, 255;
-    --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-    --spectrum-cyan-1400-rgb: 255, 255, 255;
-    --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-    --spectrum-indigo-100-rgb: 40, 44, 140;
-    --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-    --spectrum-indigo-200-rgb: 47, 52, 163;
-    --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-    --spectrum-indigo-300-rgb: 57, 63, 187;
-    --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-    --spectrum-indigo-400-rgb: 70, 75, 211;
-    --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-    --spectrum-indigo-500-rgb: 85, 91, 231;
-    --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-    --spectrum-indigo-600-rgb: 104, 109, 244;
-    --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-    --spectrum-indigo-700-rgb: 124, 129, 251;
-    --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-    --spectrum-indigo-800-rgb: 145, 149, 255;
-    --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-    --spectrum-indigo-900-rgb: 167, 170, 255;
-    --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-    --spectrum-indigo-1000-rgb: 188, 190, 255;
-    --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-    --spectrum-indigo-1100-rgb: 208, 210, 255;
-    --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-    --spectrum-indigo-1200-rgb: 226, 228, 255;
-    --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-    --spectrum-indigo-1300-rgb: 243, 243, 254;
-    --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-    --spectrum-indigo-1400-rgb: 255, 255, 255;
-    --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-    --spectrum-purple-100-rgb: 76, 13, 157;
-    --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-    --spectrum-purple-200-rgb: 89, 17, 177;
-    --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-    --spectrum-purple-300-rgb: 105, 28, 200;
-    --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-    --spectrum-purple-400-rgb: 122, 45, 218;
-    --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-    --spectrum-purple-500-rgb: 140, 65, 233;
-    --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-    --spectrum-purple-600-rgb: 157, 87, 243;
-    --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-    --spectrum-purple-700-rgb: 172, 111, 249;
-    --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-    --spectrum-purple-800-rgb: 187, 135, 251;
-    --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-    --spectrum-purple-900-rgb: 202, 159, 252;
-    --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-    --spectrum-purple-1000-rgb: 215, 182, 254;
-    --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-    --spectrum-purple-1100-rgb: 228, 204, 254;
-    --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-    --spectrum-purple-1200-rgb: 239, 223, 255;
-    --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-    --spectrum-purple-1300-rgb: 249, 240, 255;
-    --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-    --spectrum-purple-1400-rgb: 255, 253, 255;
-    --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-    --spectrum-fuchsia-100-rgb: 107, 3, 106;
-    --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-    --spectrum-fuchsia-200-rgb: 123, 0, 123;
-    --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-    --spectrum-fuchsia-300-rgb: 144, 0, 145;
-    --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-    --spectrum-fuchsia-400-rgb: 165, 13, 166;
-    --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-    --spectrum-fuchsia-500-rgb: 185, 37, 185;
-    --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-    --spectrum-fuchsia-600-rgb: 205, 57, 206;
-    --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-    --spectrum-fuchsia-700-rgb: 223, 81, 224;
-    --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-    --spectrum-fuchsia-800-rgb: 235, 110, 236;
-    --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-    --spectrum-fuchsia-900-rgb: 244, 140, 242;
-    --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-    --spectrum-fuchsia-1000-rgb: 250, 168, 245;
-    --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-    --spectrum-fuchsia-1100-rgb: 254, 194, 248;
-    --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-    --spectrum-fuchsia-1200-rgb: 255, 219, 250;
-    --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-    --spectrum-fuchsia-1300-rgb: 255, 239, 252;
-    --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-    --spectrum-fuchsia-1400-rgb: 255, 253, 255;
-    --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-    --spectrum-magenta-100-rgb: 118, 0, 58;
-    --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-    --spectrum-magenta-200-rgb: 137, 0, 66;
-    --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-    --spectrum-magenta-300-rgb: 160, 0, 77;
-    --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-    --spectrum-magenta-400-rgb: 182, 18, 90;
-    --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-    --spectrum-magenta-500-rgb: 203, 38, 109;
-    --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-    --spectrum-magenta-600-rgb: 222, 61, 130;
-    --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-    --spectrum-magenta-700-rgb: 237, 87, 149;
-    --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-    --spectrum-magenta-800-rgb: 249, 114, 167;
-    --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-    --spectrum-magenta-900-rgb: 255, 143, 185;
-    --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-    --spectrum-magenta-1000-rgb: 255, 172, 202;
-    --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-    --spectrum-magenta-1100-rgb: 255, 198, 218;
-    --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-    --spectrum-magenta-1200-rgb: 255, 221, 233;
-    --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-    --spectrum-magenta-1300-rgb: 255, 240, 245;
-    --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);
-}
diff --git a/tools/styles/tokens/darkest-vars.css b/tools/styles/tokens/darkest-vars.css
deleted file mode 100644
index c45baca401b..00000000000
--- a/tools/styles/tokens/darkest-vars.css
+++ /dev/null
@@ -1,460 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/express/custom-dark-vars.css b/tools/styles/tokens/express/custom-dark-vars.css
deleted file mode 100644
index 1a5eec2d8a5..00000000000
--- a/tools/styles/tokens/express/custom-dark-vars.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in express/dark-vars.css */
-:host,
-:root {
-    --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);
-}
diff --git a/tools/styles/tokens/express/custom-darkest-vars.css b/tools/styles/tokens/express/custom-darkest-vars.css
deleted file mode 100644
index 26a339b0f55..00000000000
--- a/tools/styles/tokens/express/custom-darkest-vars.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in express/darkest-vars.css */
-:host,
-:root {
-    --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);
-}
diff --git a/tools/styles/tokens/express/custom-large-vars.css b/tools/styles/tokens/express/custom-large-vars.css
deleted file mode 100644
index 3fd534673c8..00000000000
--- a/tools/styles/tokens/express/custom-large-vars.css
+++ /dev/null
@@ -1,12 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in express/large-vars.css */
-:host,
-:root {
-    --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/tools/styles/tokens/express/custom-light-vars.css b/tools/styles/tokens/express/custom-light-vars.css
deleted file mode 100644
index 1b64128a6e9..00000000000
--- a/tools/styles/tokens/express/custom-light-vars.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in express/light-vars.css */
-:host,
-:root {
-    --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/tools/styles/tokens/express/custom-medium-vars.css b/tools/styles/tokens/express/custom-medium-vars.css
deleted file mode 100644
index 094179217ef..00000000000
--- a/tools/styles/tokens/express/custom-medium-vars.css
+++ /dev/null
@@ -1,12 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in express/medium-vars.css */
-:host,
-:root {
-    --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/tools/styles/tokens/express/custom-vars.css b/tools/styles/tokens/express/custom-vars.css
deleted file mode 100644
index 6498e011d1f..00000000000
--- a/tools/styles/tokens/express/custom-vars.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in express/global-vars.css */
-:host,
-:root {
-    --system: express;
-}
diff --git a/tools/styles/tokens/express/dark-vars.css b/tools/styles/tokens/express/dark-vars.css
deleted file mode 100644
index e988c5b23c7..00000000000
--- a/tools/styles/tokens/express/dark-vars.css
+++ /dev/null
@@ -1,9 +0,0 @@
-:host,
-:root {
-    --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);
-}
diff --git a/tools/styles/tokens/express/darkest-vars.css b/tools/styles/tokens/express/darkest-vars.css
deleted file mode 100644
index e988c5b23c7..00000000000
--- a/tools/styles/tokens/express/darkest-vars.css
+++ /dev/null
@@ -1,9 +0,0 @@
-:host,
-:root {
-    --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);
-}
diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css
deleted file mode 100644
index 701c7ae3e79..00000000000
--- a/tools/styles/tokens/express/global-vars.css
+++ /dev/null
@@ -1,41 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/express/index.css b/tools/styles/tokens/express/index.css
deleted file mode 100644
index ecff7adcf23..00000000000
--- a/tools/styles/tokens/express/index.css
+++ /dev/null
@@ -1,175 +0,0 @@
-:host,
-:root {
-    --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);
-}
-:host,
-:root {
-    --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;
-}
-:host,
-:root {
-    --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;
-}
-:host,
-:root {
-    --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);
-}
-:host,
-:root {
-    --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/tools/styles/tokens/express/large-vars.css b/tools/styles/tokens/express/large-vars.css
deleted file mode 100644
index fd120a80790..00000000000
--- a/tools/styles/tokens/express/large-vars.css
+++ /dev/null
@@ -1,58 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/express/light-vars.css b/tools/styles/tokens/express/light-vars.css
deleted file mode 100644
index 4a6a2b5db19..00000000000
--- a/tools/styles/tokens/express/light-vars.css
+++ /dev/null
@@ -1,9 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/express/medium-vars.css b/tools/styles/tokens/express/medium-vars.css
deleted file mode 100644
index 02ad7f3f03f..00000000000
--- a/tools/styles/tokens/express/medium-vars.css
+++ /dev/null
@@ -1,58 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css
deleted file mode 100644
index a5bde1ea167..00000000000
--- a/tools/styles/tokens/express/system-theme-bridge.css
+++ /dev/null
@@ -1,675 +0,0 @@
-:host,
-:root {
-    --system-accordion-divider-color: var(--spectrum-gray-300);
-    --system-accordion-item-content-disabled-color: var(--spectrum-gray-400);
-    --system-accordion-item-content-color: var(--spectrum-gray-800);
-    --system-action-bar-popover-background-color: var(--spectrum-gray-50);
-    --system-action-bar-popover-border-color: var(--spectrum-gray-400);
-    --system-action-button-background-color-default: var(--spectrum-gray-200);
-    --system-action-button-background-color-hover: var(--spectrum-gray-300);
-    --system-action-button-background-color-down: var(--spectrum-gray-400);
-    --system-action-button-background-color-focus: var(--spectrum-gray-300);
-    --system-action-button-background-color-disabled: var(--spectrum-gray-200);
-    --system-action-button-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
-    --system-action-button-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
-    --system-action-button-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
-    --system-action-button-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-    --system-action-button-border-color-default: transparent;
-    --system-action-button-border-color-hover: transparent;
-    --system-action-button-border-color-down: transparent;
-    --system-action-button-border-color-focus: transparent;
-    --system-action-button-border-color-disabled: transparent;
-    --system-action-button-content-color-selected: var(--spectrum-gray-75);
-    --system-action-button-size-m-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-size-xs-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-size-s-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-size-l-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-size-xl-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-quiet-background-color-default: transparent;
-    --system-action-button-quiet-background-color-hover: var(--spectrum-gray-300);
-    --system-action-button-quiet-background-color-down: var(--spectrum-gray-400);
-    --system-action-button-quiet-background-color-focus: var(--spectrum-gray-300);
-    --system-action-button-quiet-background-color-disabled: transparent;
-    --system-action-button-quiet-background-color-selected-disabled: var(--spectrum-disabled-background-color);
-    --system-action-button-static-black-border-color-default: transparent;
-    --system-action-button-static-black-border-color-hover: transparent;
-    --system-action-button-static-black-border-color-down: transparent;
-    --system-action-button-static-black-border-color-focus: transparent;
-    --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
-    --system-action-button-static-black-background-color-disabled: transparent;
-    --system-action-button-static-black-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color);
-    --system-action-button-static-black-background-color-default: var(--spectrum-transparent-black-200);
-    --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400);
-    --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-action-button-static-black-quiet-background-color-default: var(--spectrum-transparent-black-200);
-    --system-action-button-static-black-quiet-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-action-button-static-black-quiet-background-color-down: var(--spectrum-transparent-black-400);
-    --system-action-button-static-black-quiet-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-action-button-static-black-quiet-background-color-disabled: transparent;
-    --system-action-button-static-white-border-color-default: transparent;
-    --system-action-button-static-white-border-color-hover: transparent;
-    --system-action-button-static-white-border-color-down: transparent;
-    --system-action-button-static-white-border-color-focus: transparent;
-    --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
-    --system-action-button-static-white-background-color-disabled: transparent;
-    --system-action-button-static-white-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color);
-    --system-action-button-static-white-background-color-default: var(--spectrum-transparent-white-200);
-    --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400);
-    --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-action-button-static-white-quiet-background-color-default: var(--spectrum-transparent-white-200);
-    --system-action-button-static-white-quiet-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-action-button-static-white-quiet-background-color-down: var(--spectrum-transparent-white-400);
-    --system-action-button-static-white-quiet-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-action-button-static-white-quiet-background-color-disabled: transparent;
-    --system-action-button-background-color-selected-disabled: var(--spectrum-disabled-background-color);
-    --system-action-group-gap-size-compact: var(--spectrum-spacing-50);
-    --system-action-group-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50));
-    --system-action-group-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50));
-    --system-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default);
-    --system-asset-folder-background-color: var(--spectrum-gray-300);
-    --system-asset-file-background-color: var(--spectrum-gray-50);
-    --system-asset-icon-outline-color: var(--spectrum-gray-500);
-    --system-button-background-color-default: var(--spectrum-gray-200);
-    --system-button-background-color-hover: var(--spectrum-gray-300);
-    --system-button-background-color-down: var(--spectrum-gray-400);
-    --system-button-background-color-focus: var(--spectrum-gray-300);
-    --system-button-border-color-default: transparent;
-    --system-button-border-color-hover: transparent;
-    --system-button-border-color-down: transparent;
-    --system-button-border-color-focus: transparent;
-    --system-button-background-color-disabled: transparent;
-    --system-button-border-color-disabled: var(--spectrum-disabled-border-color);
-    --system-button-selected-background-color-default: var(--spectrum-neutral-background-color-default);
-    --system-button-selected-background-color-hover: var(--spectrum-neutral-background-color-hover);
-    --system-button-selected-background-color-down: var(--spectrum-neutral-background-color-down);
-    --system-button-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
-    --system-button-primary-content-color-default: var(--spectrum-white);
-    --system-button-primary-content-color-hover: var(--spectrum-white);
-    --system-button-primary-content-color-down: var(--spectrum-white);
-    --system-button-primary-content-color-focus: var(--spectrum-white);
-    --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300);
-    --system-button-primary-outline-background-color-down: var(--spectrum-gray-400);
-    --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300);
-    --system-button-secondary-background-color-default: var(--spectrum-gray-200);
-    --system-button-secondary-background-color-hover: var(--spectrum-gray-300);
-    --system-button-secondary-background-color-down: var(--spectrum-gray-400);
-    --system-button-secondary-background-color-focus: var(--spectrum-gray-300);
-    --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300);
-    --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400);
-    --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300);
-    --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300);
-    --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500);
-    --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900);
-    --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900);
-    --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900);
-    --system-button-static-white-content-color-default: var(--spectrum-black);
-    --system-button-static-white-content-color-hover: var(--spectrum-black);
-    --system-button-static-white-content-color-down: var(--spectrum-black);
-    --system-button-static-white-content-color-focus: var(--spectrum-black);
-    --system-button-static-white-outline-background-color-default: var(--spectrum-transparent-white-25);
-    --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400);
-    --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-button-static-white-outline-content-color-default: var(--spectrum-white);
-    --system-button-static-white-outline-content-color-hover: var(--spectrum-white);
-    --system-button-static-white-outline-content-color-down: var(--spectrum-white);
-    --system-button-static-white-outline-content-color-focus: var(--spectrum-white);
-    --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900);
-    --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900);
-    --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900);
-    --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200);
-    --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-button-static-white-secondary-content-color-default: var(--spectrum-white);
-    --system-button-static-white-secondary-content-color-hover: var(--spectrum-white);
-    --system-button-static-white-secondary-content-color-down: var(--spectrum-white);
-    --system-button-static-white-secondary-content-color-focus: var(--spectrum-white);
-    --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300);
-    --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500);
-    --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-outline-background-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800);
-    --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900);
-    --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900);
-    --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900);
-    --system-button-static-black-content-color-default: var(--spectrum-white);
-    --system-button-static-black-content-color-hover: var(--spectrum-white);
-    --system-button-static-black-content-color-down: var(--spectrum-white);
-    --system-button-static-black-content-color-focus: var(--spectrum-white);
-    --system-button-static-black-outline-background-color-default: var(--spectrum-transparent-black-25);
-    --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400);
-    --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-button-static-black-outline-content-color-default: var(--spectrum-black);
-    --system-button-static-black-outline-content-color-hover: var(--spectrum-black);
-    --system-button-static-black-outline-content-color-down: var(--spectrum-black);
-    --system-button-static-black-outline-content-color-focus: var(--spectrum-black);
-    --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400);
-    --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500);
-    --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600);
-    --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500);
-    --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200);
-    --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-button-static-black-secondary-content-color-default: var(--spectrum-black);
-    --system-button-static-black-secondary-content-color-hover: var(--spectrum-black);
-    --system-button-static-black-secondary-content-color-down: var(--spectrum-black);
-    --system-button-static-black-secondary-content-color-focus: var(--spectrum-black);
-    --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300);
-    --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500);
-    --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-outline-background-color-default: var(--spectrum-transparent-black-800);
-    --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-checkbox-control-color-default: var(--spectrum-gray-800);
-    --system-checkbox-control-color-hover: var(--spectrum-gray-900);
-    --system-checkbox-control-color-down: var(--spectrum-gray-900);
-    --system-checkbox-control-color-focus: var(--spectrum-gray-900);
-    --system-checkbox-checkmark-color: var(--spectrum-gray-75);
-    --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
-    --system-card-border-color: var(--spectrum-gray-200);
-    --system-card-border-color-hover: var(--spectrum-gray-300);
-    --system-card-divider-color: var(--spectrum-gray-300);
-    --system-card-preview-background-color: var(--spectrum-background-base-color);
-    --system-card-preview-background-color-hover: var(--spectrum-gray-300);
-    --system-clear-button-background-color: var(--spectrum-gray-200);
-    --system-clear-button-background-color-hover: var(--spectrum-gray-300);
-    --system-clear-button-background-color-down: var(--spectrum-gray-400);
-    --system-clear-button-background-color-key-focus: var(--spectrum-gray-300);
-    --system-clear-button-height: var(--spectrum-component-height-100);
-    --system-clear-button-width: var(--spectrum-component-height-100);
-    --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-    --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
-    --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
-    --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
-    --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --system-clear-button-size-s-height: var(--spectrum-component-height-75);
-    --system-clear-button-size-s-width: var(--spectrum-component-height-75);
-    --system-clear-button-size-l-height: var(--spectrum-component-height-200);
-    --system-clear-button-size-l-width: var(--spectrum-component-height-200);
-    --system-clear-button-size-xl-height: var(--spectrum-component-height-300);
-    --system-clear-button-size-xl-width: var(--spectrum-component-height-300);
-    --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent);
-    --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent);
-    --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent);
-    --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent);
-    --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent);
-    --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300));
-    --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400));
-    --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300));
-    --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color);
-    --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
-    --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
-    --system-clear-button-disabled-background-color: transparent;
-    --system-close-button-background-color-default: transparent;
-    --system-close-button-background-color-hover: var(--spectrum-gray-300);
-    --system-close-button-background-color-down: var(--spectrum-gray-400);
-    --system-close-button-background-color-focus: var(--spectrum-gray-300);
-    --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400);
-    --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400);
-    --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
-    --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
-    --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
-    --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size);
-    --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size);
-    --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter);
-    --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter);
-    --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-    --system-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-    --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size));
-    --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size));
-    --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
-    --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
-    --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66;
-    --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1;
-    --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
-    --system-coach-indicator-animation-name: pulse;
-    --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple);
-    --system-coach-indicator-animation-keyframe-0-scale: 1;
-    --system-coach-indicator-animation-keyframe-0-opacity: 0;
-    --system-coach-indicator-animation-keyframe-50-scale: 1.5;
-    --system-coach-indicator-animation-keyframe-50-opacity: 1;
-    --system-coach-indicator-animation-keyframe-100-scale: 2;
-    --system-coach-indicator-animation-keyframe-100-opacity: 0;
-    --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8;
-    --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter);
-    --system-coach-indicator-quiet-animation-name: pulse-quiet;
-    --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width);
-    --system-coach-mark-width: var(--spectrum-coach-mark-width);
-    --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width);
-    --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height);
-    --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
-    --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content);
-    --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300);
-    --system-coach-mark-header-to-body: var(--spectrum-spacing-200);
-    --system-coach-mark-body-to-footer: var(--spectrum-spacing-300);
-    --system-coach-mark-title-color: var(--spectrum-heading-color);
-    --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font);
-    --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style);
-    --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-    --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size);
-    --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height);
-    --system-coach-mark-content-font-color: var(--spectrum-body-color);
-    --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
-    --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font);
-    --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style);
-    --system-coach-mark-content-line-height: var(--spectrum-body-line-height);
-    --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size);
-    --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color);
-    --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight);
-    --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font);
-    --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style);
-    --system-coach-mark-step-line-height: var(--spectrum-body-line-height);
-    --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size);
-    --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
-    --system-coach-mark-popover-border-width: var(--spectrum-border-width-100);
-    --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100);
-    --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
-    --system-color-wheel-border-color: var(--spectrum-transparent-black-200);
-    --system-combobox-border-color-default: var(--spectrum-gray-400);
-    --system-combobox-border-color-hover: var(--spectrum-gray-500);
-    --system-combobox-border-color-focus: var(--spectrum-gray-900);
-    --system-combobox-border-color-focus-hover: var(--spectrum-gray-800);
-    --system-combobox-border-color-key-focus: var(--spectrum-gray-900);
-    --system-combobox-readonly-input-border-color: var(--spectrum-gray-400);
-    --system-combobox-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-combobox-border-color-disabled: transparent;
-    --system-dialog-fullscreen-header-text-size: 28px;
-    --system-dialog-min-inline-size: 288px;
-    --system-dialog-confirm-small-width: 400px;
-    --system-dialog-confirm-medium-width: 480px;
-    --system-dialog-confirm-large-width: 640px;
-    --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
-    --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
-    --system-dialog-confirm-description-text-color: var(--spectrum-gray-800);
-    --system-dialog-confirm-title-text-color: var(--spectrum-gray-900);
-    --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100);
-    --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100);
-    --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-    --system-dialog-confirm-description-padding: var(--spectrum-spacing-50);
-    --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1);
-    --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
-    --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
-    --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
-    --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
-    --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));
-    --system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
-    --system-divider-background-color: var(--spectrum-gray-300);
-    --system-divider-background-color-static-white: var(--spectrum-transparent-white-300);
-    --system-divider-background-color-static-black: var(--spectrum-transparent-black-300);
-    --system-drop-zone-border-color: var(--spectrum-gray-300);
-    --system-field-group-margin: var(--spectrum-spacing-300);
-    --system-field-group-readonly-delimiter: ",";
-    --system-infield-button-border-width: 0;
-    --system-infield-button-border-color: transparent;
-    --system-infield-button-border-radius: var(--spectrum-corner-radius-75);
-    --system-infield-button-border-radius-reset: var(--spectrum-corner-radius-75);
-    --system-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75);
-    --system-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75);
-    --system-infield-button-background-color: var(--spectrum-gray-200);
-    --system-infield-button-background-color-hover: var(--spectrum-gray-300);
-    --system-infield-button-background-color-down: var(--spectrum-gray-400);
-    --system-infield-button-background-color-key-focus: var(--spectrum-gray-300);
-    --system-infield-button-disabled-border-color: var(--spectrum-gray-200);
-    --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
-    --system-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
-    --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
-    --system-menu-item-corner-radius: 0;
-    --system-menu-item-focus-indicator-shadow: inset;
-    --system-menu-item-focus-indicator-offset: 0;
-    --system-menu-item-spacing-multiplier: 0;
-    --system-menu-item-focus-indicator-outline-style: none;
-    --system-meter-min-width: var(--spectrum-meter-minimum-width);
-    --system-meter-max-width: var(--spectrum-meter-maximum-width);
-    --system-meter-inline-size: var(--spectrum-progressbar-size-2500);
-    --system-meter-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-meter-fill-color-positive: var(--spectrum-positive-visual-color);
-    --system-meter-fill-color-notice: var(--spectrum-notice-visual-color);
-    --system-meter-fill-color-negative: var(--spectrum-negative-visual-color);
-    --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small);
-    --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400);
-    --system-meter-size-s-font-size: var(--spectrum-font-size-75);
-    --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-meter-thickness: var(--spectrum-meter-thickness-large);
-    --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large);
-    --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500);
-    --system-meter-font-size: var(--spectrum-font-size-100);
-    --system-meter-size-l-font-size: var(--spectrum-font-size-100);
-    --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-modal-background-color: var(--spectrum-gray-100);
-    --system-picker-background-color-default: var(--spectrum-gray-200);
-    --system-picker-background-color-default-open: var(--spectrum-gray-300);
-    --system-picker-background-color-hover: var(--spectrum-gray-300);
-    --system-picker-background-color-hover-open: var(--spectrum-gray-300);
-    --system-picker-background-color-active: var(--spectrum-gray-400);
-    --system-picker-background-color-key-focus: var(--spectrum-gray-300);
-    --system-picker-border-color-default: transparent;
-    --system-picker-border-color-default-open: transparent;
-    --system-picker-border-color-hover: transparent;
-    --system-picker-border-color-hover-open: transparent;
-    --system-picker-border-color-active: transparent;
-    --system-picker-border-color-key-focus: transparent;
-    --system-picker-border-color-disabled: transparent;
-    --system-picker-border-width: 0px;
-    --system-picker-button-background-color: var(--spectrum-gray-200);
-    --system-picker-button-background-color-hover: var(--spectrum-gray-300);
-    --system-picker-button-background-color-down: var(--spectrum-gray-400);
-    --system-picker-button-background-color-key-focus: var(--spectrum-gray-300);
-    --system-picker-button-border-color: none;
-    --system-picker-button-border-radius: var(--spectrum-corner-radius-75);
-    --system-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200);
-    --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75);
-    --system-picker-button-border-width: 0px;
-    --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-    --system-popover-border-width: 0;
-    --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
-    --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
-    --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100);
-    --system-progress-bar-fill-size-indeterminate: 70%;
-    --system-progress-bar-size-2400: 192px;
-    --system-progress-bar-size-2500: 200px;
-    --system-progress-bar-size-2800: 224px;
-    --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width);
-    --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width);
-    --system-progress-bar-line-height: var(--spectrum-line-height-100);
-    --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75);
-    --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200);
-    --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default);
-    --system-progress-bar-track-color: var(--spectrum-gray-300);
-    --system-progress-bar-fill-color: var(--spectrum-accent-color-900);
-    --system-progress-bar-label-and-value-white: var(--spectrum-white);
-    --system-progress-bar-track-color-white: var(--spectrum-transparent-white-300);
-    --system-progress-bar-fill-color-white: var(--spectrum-white);
-    --system-progress-bar-size-default: var(--system-progress-bar-size-2400);
-    --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400);
-    --system-progress-bar-font-size: var(--spectrum-font-size-75);
-    --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75);
-    --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large);
-    --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large);
-    --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400);
-    --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75);
-    --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small);
-    --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500);
-    --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100);
-    --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large);
-    --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800);
-    --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200);
-    --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large);
-    --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
-    --system-progress-circle-track-border-color: var(--spectrum-gray-300);
-    --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
-    --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
-    --system-radio-button-border-color-default: var(--spectrum-gray-800);
-    --system-radio-button-border-color-hover: var(--spectrum-gray-900);
-    --system-radio-button-border-color-down: var(--spectrum-gray-900);
-    --system-radio-button-border-color-focus: var(--spectrum-gray-900);
-    --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
-    --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
-    --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
-    --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-    --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --system-radio-disabled-content-color: var(--spectrum-disabled-content-color);
-    --system-radio-disabled-border-color: var(--spectrum-disabled-content-color);
-    --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
-    --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
-    --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
-    --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
-    --system-radio-border-width: var(--spectrum-border-width-200);
-    --system-radio-button-background-color: var(--spectrum-gray-50);
-    --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
-    --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
-    --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
-    --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
-    --system-radio-line-height: var(--spectrum-line-height-100);
-    --system-radio-animation-duration: var(--spectrum-animation-duration-100);
-    --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-radio-height: var(--spectrum-component-height-100);
-    --system-radio-size-m-height: var(--spectrum-component-height-100);
-    --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
-    --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium);
-    --system-radio-text-to-control: var(--spectrum-text-to-control-100);
-    --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100);
-    --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
-    --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100);
-    --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-    --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-    --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
-    --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
-    --system-radio-font-size: var(--spectrum-font-size-100);
-    --system-radio-size-m-font-size: var(--spectrum-font-size-100);
-    --system-radio-size-s-height: var(--spectrum-component-height-75);
-    --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small);
-    --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75);
-    --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-    --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
-    --system-radio-size-s-font-size: var(--spectrum-font-size-75);
-    --system-radio-size-l-height: var(--spectrum-component-height-200);
-    --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large);
-    --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200);
-    --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
-    --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
-    --system-radio-size-l-font-size: var(--spectrum-font-size-200);
-    --system-radio-size-xl-height: var(--spectrum-component-height-300);
-    --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
-    --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300);
-    --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300);
-    --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
-    --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
-    --system-radio-size-xl-font-size: var(--spectrum-font-size-300);
-    --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900);
-    --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
-    --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100);
-    --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
-    --system-search-border-color-default: var(--spectrum-gray-400);
-    --system-search-border-color-hover: var(--spectrum-gray-500);
-    --system-search-border-color-focus: var(--spectrum-gray-800);
-    --system-search-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-search-border-color-key-focus: var(--spectrum-gray-900);
-    --system-search-background-color: var(--spectrum-gray-50);
-    --system-search-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-search-border-color-disabled: var(--spectrum-disabled-background-color);
-    --system-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
-    --system-search-size-m-border-radius: calc(var(--spectrum-component-height-100) / 2);
-    --system-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
-    --system-search-size-m-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
-    --system-search-size-s-border-radius: calc(var(--spectrum-component-height-75) / 2);
-    --system-search-size-s-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75);
-    --system-search-size-l-border-radius: calc(var(--spectrum-component-height-200) / 2);
-    --system-search-size-l-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200);
-    --system-search-size-xl-border-radius: calc(var(--spectrum-component-height-300) / 2);
-    --system-search-size-xl-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300);
-    --system-search-quiet-background-color-disabled: transparent;
-    --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color);
-    --system-side-nav-background-hover: var(--spectrum-gray-200);
-    --system-side-nav-item-background-down: var(--spectrum-gray-300);
-    --system-side-nav-background-key-focus: var(--spectrum-gray-200);
-    --system-side-nav-item-background-default-selected: var(--spectrum-gray-200);
-    --system-side-nav-background-hover-selected: var(--spectrum-gray-300);
-    --system-side-nav-item-background-down-selected: var(--spectrum-gray-300);
-    --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200);
-    --system-slider-track-color: var(--spectrum-gray-200);
-    --system-slider-track-fill-color: var(--spectrum-gray-600);
-    --system-slider-ramp-track-color: var(--spectrum-gray-300);
-    --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200);
-    --system-slider-handle-background-color: var(--spectrum-gray-50);
-    --system-slider-handle-background-color-disabled: var(--spectrum-gray-50);
-    --system-slider-ramp-handle-background-color: var(--spectrum-gray-50);
-    --system-slider-ticks-handle-background-color: var(--spectrum-gray-50);
-    --system-slider-handle-border-color: var(--spectrum-gray-800);
-    --system-slider-handle-disabled-background-color: var(--spectrum-gray-50);
-    --system-slider-tick-mark-color: var(--spectrum-gray-200);
-    --system-slider-handle-border-color-hover: var(--spectrum-gray-900);
-    --system-slider-handle-border-color-down: var(--spectrum-gray-900);
-    --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900);
-    --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
-    --system-slider-track-corner-radius: var(--spectrum-corner-radius-75);
-    --system-slider-handle-border-radius: var(--spectrum-corner-radius-200);
-    --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-200);
-    --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200);
-    --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
-    --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
-    --system-split-view-background-color: var(--spectrum-gray-100);
-    --system-split-view-handle-background-color: var(--spectrum-gray-300);
-    --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75);
-    --system-stepper-border-width: var(--spectrum-border-width-200);
-    --system-stepper-border-color-default: var(--spectrum-gray-400);
-    --system-stepper-border-color-hover: var(--spectrum-gray-500);
-    --system-stepper-border-color-focus: var(--spectrum-gray-800);
-    --system-stepper-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
-    --system-stepper-buttons-border-style: solid;
-    --system-stepper-buttons-border-width: var(--spectrum-border-width-200);
-    --system-stepper-buttons-border-color: transparent;
-    --system-stepper-buttons-background-color: var(--spectrum-gray-50);
-    --system-stepper-buttons-border-color-hover: transparent;
-    --system-stepper-buttons-border-color-focus: transparent;
-    --system-stepper-buttons-border-color-keyboard-focus: transparent;
-    --system-stepper-button-border-width: 0;
-    --system-stepper-border-color-invalid: transparent;
-    --system-stepper-border-color-focus-invalid: transparent;
-    --system-stepper-border-color-focus-hover-invalid: transparent;
-    --system-stepper-border-color-keyboard-focus-invalid: transparent;
-    --system-stepper-border-color-disabled: var(--spectrum-disabled-background-color);
-    --system-stepper-button-border-width-disabled: 0;
-    --system-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-stepper-quiet-buttons-border-style: none;
-    --system-stepper-quiet-button-edge-to-fill: 0;
-    --system-swatch-border-radius: var(--spectrum-corner-radius-100);
-    --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200);
-    --system-swatch-border-thickness: var(--spectrum-border-width-100);
-    --system-swatch-border-thickness-selected: var(--spectrum-border-width-200);
-    --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-swatch-border-color-opacity: 0.51;
-    --system-swatch-border-color-light-opacity: 0.2;
-    --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-opacity));
-    --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity));
-    --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity));
-    --system-swatch-border-color-selected: var(--spectrum-gray-900);
-    --system-swatch-inner-border-color-selected: var(--spectrum-gray-50);
-    --system-swatch-disabled-icon-color: var(--spectrum-gray-50);
-    --system-swatch-dash-icon-color: var(--spectrum-gray-800);
-    --system-swatch-slash-icon-color: var(--spectrum-red-900);
-    --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --system-swatch-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-size-m-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
-    --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
-    --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small);
-    --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50);
-    --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small);
-    --system-swatch-size-s-size: var(--spectrum-swatch-size-small);
-    --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
-    --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
-    --system-swatch-size-l-size: var(--spectrum-swatch-size-large);
-    --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200);
-    --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large);
-    --system-swatch-group-spacing-compact: var(--spectrum-spacing-50);
-    --system-swatch-group-spacing-regular: var(--spectrum-spacing-75);
-    --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100);
-    --system-switch-handle-border-color-default: var(--spectrum-gray-800);
-    --system-switch-handle-border-color-hover: var(--spectrum-gray-900);
-    --system-switch-handle-border-color-down: var(--spectrum-gray-900);
-    --system-switch-handle-border-color-focus: var(--spectrum-gray-900);
-    --system-switch-handle-border-color-selected-default: var(--spectrum-gray-800);
-    --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-900);
-    --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
-    --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-900);
-    --system-switch-background-color: var(--spectrum-gray-300);
-    --system-switch-background-color-disabled: var(--spectrum-gray-300);
-    --system-switch-handle-background-color: var(--spectrum-gray-75);
-    --system-table-header-background-color: var(--spectrum-transparent-white-100);
-    --system-table-border-color: var(--spectrum-gray-300);
-    --system-table-divider-color: var(--spectrum-gray-300);
-    --system-table-row-background-color: var(--spectrum-gray-50);
-    --system-table-summary-row-background-color: var(--spectrum-gray-200);
-    --system-table-section-header-background-color: var(--spectrum-gray-200);
-    --system-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --system-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-down);
-    --system-table-quiet-header-background-color: var(--spectrum-transparent-white-100);
-    --system-table-quiet-row-background-color: var(--spectrum-transparent-white-100);
-    --system-tabs-font-weight: var(--spectrum-bold-font-weight);
-    --system-tabs-divider-background-color: var(--spectrum-gray-300);
-    --system-tag-background-color: transparent;
-    --system-tag-background-color-hover: var(--spectrum-gray-300);
-    --system-tag-background-color-active: var(--spectrum-gray-400);
-    --system-tag-background-color-focus: var(--spectrum-gray-300);
-    --system-tag-size-small-corner-radius: var(--spectrum-component-height-75);
-    --system-tag-size-medium-corner-radius: var(--spectrum-component-height-100);
-    --system-tag-size-large-corner-radius: var(--spectrum-component-height-200);
-    --system-tag-border-color: var(--spectrum-gray-300);
-    --system-tag-border-color-hover: var(--spectrum-gray-400);
-    --system-tag-border-color-active: var(--spectrum-gray-500);
-    --system-tag-border-color-focus: var(--spectrum-gray-400);
-    --system-tag-content-color: var(--spectrum-neutral-content-color-default);
-    --system-tag-content-color-hover: var(--spectrum-neutral-content-color-hover);
-    --system-tag-content-color-active: var(--spectrum-neutral-content-color-down);
-    --system-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-    --system-tag-content-color-selected: var(--spectrum-gray-50);
-    --system-tag-border-color-selected: var(--spectrum-neutral-background-color-default);
-    --system-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover);
-    --system-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down);
-    --system-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus);
-    --system-tag-border-color-disabled: var(--spectrum-disabled-border-color);
-    --system-tag-background-color-disabled: transparent;
-    --system-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75);
-    --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75);
-    --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75);
-    --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100);
-    --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100);
-    --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100);
-    --system-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200);
-    --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200);
-    --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200);
-    --system-textfield-background-color: var(--spectrum-gray-50);
-    --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-textfield-border-color: var(--spectrum-gray-400);
-    --system-textfield-border-color-hover: var(--spectrum-gray-500);
-    --system-textfield-border-color-focus: var(--spectrum-gray-800);
-    --system-textfield-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
-    --system-textfield-border-color-disabled: var(--spectrum-gray-200);
-    --system-textfield-border-width: var(--spectrum-border-width-200);
-    --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
-    --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small);
-    --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large);
-    --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large);
-    --system-textfield-quiet-border-color-disabled: var(--spectrum-gray-300);
-    --system-thumbnail-border-radius: var(--spectrum-corner-radius-75);
-    --system-toast-background-color-default: var(--spectrum-neutral-background-color-default);
-    --system-toast-divider-color: var(--spectrum-transparent-white-300);
-    --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default);
-}
diff --git a/tools/styles/tokens/global-vars.css b/tools/styles/tokens/global-vars.css
deleted file mode 100644
index 39c36b738e8..00000000000
--- a/tools/styles/tokens/global-vars.css
+++ /dev/null
@@ -1,574 +0,0 @@
-:host,
-:root {
-    --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-opacity-disabled: 0.3;
-    --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-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-900);
-    --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-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-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-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-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-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-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-picker-minimum-width-multiplier: 2;
-    --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-100);
-    --spectrum-color-wheel-color-area-margin: 12px;
-    --spectrum-color-slider-border-width: 1px;
-    --spectrum-color-slider-border-rounding: 4px;
-    --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-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-android-elevation: 2dp;
-    --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-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-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-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-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-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-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-style: var(--spectrum-default-font-style);
-    --spectrum-heading-serif-font-style: var(--spectrum-default-font-style);
-    --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-style: var(--spectrum-italic-font-style);
-    --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.888889;
-    --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.888889;
-    --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);
-}
diff --git a/tools/styles/tokens/index.css b/tools/styles/tokens/index.css
deleted file mode 100644
index 4858d300070..00000000000
--- a/tools/styles/tokens/index.css
+++ /dev/null
@@ -1,3614 +0,0 @@
-:host,
-:root {
-    --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-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: 29, 29, 29;
-    --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-    --spectrum-gray-75-rgb: 38, 38, 38;
-    --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-    --spectrum-gray-100-rgb: 50, 50, 50;
-    --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-    --spectrum-gray-200-rgb: 63, 63, 63;
-    --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-    --spectrum-gray-300-rgb: 84, 84, 84;
-    --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-    --spectrum-gray-400-rgb: 112, 112, 112;
-    --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-    --spectrum-gray-500-rgb: 144, 144, 144;
-    --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-    --spectrum-gray-600-rgb: 178, 178, 178;
-    --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-    --spectrum-gray-700-rgb: 209, 209, 209;
-    --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, 56, 119;
-    --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-    --spectrum-blue-200-rgb: 0, 65, 138;
-    --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-    --spectrum-blue-300-rgb: 0, 77, 163;
-    --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-    --spectrum-blue-400-rgb: 0, 89, 194;
-    --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-    --spectrum-blue-500-rgb: 3, 103, 224;
-    --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-    --spectrum-blue-600-rgb: 19, 121, 243;
-    --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-    --spectrum-blue-700-rgb: 52, 143, 244;
-    --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-    --spectrum-blue-800-rgb: 84, 163, 246;
-    --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-    --spectrum-blue-900-rgb: 114, 183, 249;
-    --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-    --spectrum-blue-1000-rgb: 143, 202, 252;
-    --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-    --spectrum-blue-1100-rgb: 174, 219, 254;
-    --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-    --spectrum-blue-1200-rgb: 204, 233, 255;
-    --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-    --spectrum-blue-1300-rgb: 232, 246, 255;
-    --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-    --spectrum-blue-1400-rgb: 255, 255, 255;
-    --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-    --spectrum-red-100-rgb: 123, 0, 0;
-    --spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-    --spectrum-red-200-rgb: 141, 0, 0;
-    --spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-    --spectrum-red-300-rgb: 165, 0, 0;
-    --spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-    --spectrum-red-400-rgb: 190, 4, 3;
-    --spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-    --spectrum-red-500-rgb: 215, 25, 19;
-    --spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-    --spectrum-red-600-rgb: 234, 56, 41;
-    --spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-    --spectrum-red-700-rgb: 246, 88, 67;
-    --spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-    --spectrum-red-800-rgb: 255, 117, 94;
-    --spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-    --spectrum-red-900-rgb: 255, 149, 129;
-    --spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-    --spectrum-red-1000-rgb: 255, 176, 161;
-    --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-    --spectrum-red-1100-rgb: 255, 201, 189;
-    --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-    --spectrum-red-1200-rgb: 255, 222, 216;
-    --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-    --spectrum-red-1300-rgb: 255, 241, 238;
-    --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-    --spectrum-red-1400-rgb: 255, 255, 255;
-    --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-    --spectrum-orange-100-rgb: 102, 37, 0;
-    --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-    --spectrum-orange-200-rgb: 117, 45, 0;
-    --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-    --spectrum-orange-300-rgb: 137, 55, 0;
-    --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-    --spectrum-orange-400-rgb: 158, 66, 0;
-    --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-    --spectrum-orange-500-rgb: 180, 78, 0;
-    --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-    --spectrum-orange-600-rgb: 202, 93, 0;
-    --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-    --spectrum-orange-700-rgb: 225, 109, 0;
-    --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-    --spectrum-orange-800-rgb: 244, 129, 12;
-    --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-    --spectrum-orange-900-rgb: 254, 154, 46;
-    --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-    --spectrum-orange-1000-rgb: 255, 181, 88;
-    --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-    --spectrum-orange-1100-rgb: 253, 206, 136;
-    --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-    --spectrum-orange-1200-rgb: 255, 225, 179;
-    --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-    --spectrum-orange-1300-rgb: 255, 242, 221;
-    --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-    --spectrum-orange-1400-rgb: 255, 253, 249;
-    --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-    --spectrum-yellow-100-rgb: 76, 54, 0;
-    --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-    --spectrum-yellow-200-rgb: 88, 64, 0;
-    --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-    --spectrum-yellow-300-rgb: 103, 76, 0;
-    --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-    --spectrum-yellow-400-rgb: 119, 89, 0;
-    --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-    --spectrum-yellow-500-rgb: 136, 104, 0;
-    --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-    --spectrum-yellow-600-rgb: 155, 120, 0;
-    --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-    --spectrum-yellow-700-rgb: 174, 137, 0;
-    --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-    --spectrum-yellow-800-rgb: 192, 156, 0;
-    --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-    --spectrum-yellow-900-rgb: 211, 174, 0;
-    --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-    --spectrum-yellow-1000-rgb: 228, 194, 0;
-    --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-    --spectrum-yellow-1100-rgb: 244, 213, 0;
-    --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-    --spectrum-yellow-1200-rgb: 249, 232, 92;
-    --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-    --spectrum-yellow-1300-rgb: 252, 246, 187;
-    --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-    --spectrum-yellow-1400-rgb: 255, 255, 255;
-    --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-    --spectrum-chartreuse-100-rgb: 48, 64, 0;
-    --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-    --spectrum-chartreuse-200-rgb: 55, 74, 0;
-    --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-    --spectrum-chartreuse-300-rgb: 65, 87, 0;
-    --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-    --spectrum-chartreuse-400-rgb: 76, 102, 0;
-    --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-    --spectrum-chartreuse-500-rgb: 89, 118, 0;
-    --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-    --spectrum-chartreuse-600-rgb: 102, 136, 0;
-    --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-    --spectrum-chartreuse-700-rgb: 117, 154, 0;
-    --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-    --spectrum-chartreuse-800-rgb: 132, 173, 1;
-    --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-    --spectrum-chartreuse-900-rgb: 148, 192, 8;
-    --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-    --spectrum-chartreuse-1000-rgb: 166, 211, 18;
-    --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-    --spectrum-chartreuse-1100-rgb: 184, 229, 37;
-    --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-    --spectrum-chartreuse-1200-rgb: 205, 245, 71;
-    --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-    --spectrum-chartreuse-1300-rgb: 231, 254, 154;
-    --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-    --spectrum-chartreuse-1400-rgb: 255, 255, 255;
-    --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-    --spectrum-celery-100-rgb: 0, 69, 10;
-    --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-    --spectrum-celery-200-rgb: 0, 80, 12;
-    --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-    --spectrum-celery-300-rgb: 0, 94, 14;
-    --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-    --spectrum-celery-400-rgb: 0, 109, 15;
-    --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-    --spectrum-celery-500-rgb: 0, 127, 15;
-    --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-    --spectrum-celery-600-rgb: 0, 145, 18;
-    --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-    --spectrum-celery-700-rgb: 4, 165, 30;
-    --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-    --spectrum-celery-800-rgb: 34, 184, 51;
-    --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-    --spectrum-celery-900-rgb: 68, 202, 73;
-    --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-    --spectrum-celery-1000-rgb: 105, 220, 99;
-    --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-    --spectrum-celery-1100-rgb: 142, 235, 127;
-    --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-    --spectrum-celery-1200-rgb: 180, 247, 162;
-    --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-    --spectrum-celery-1300-rgb: 221, 253, 211;
-    --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-    --spectrum-celery-1400-rgb: 255, 255, 255;
-    --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-    --spectrum-green-100-rgb: 4, 67, 41;
-    --spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-    --spectrum-green-200-rgb: 0, 78, 47;
-    --spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-    --spectrum-green-300-rgb: 0, 92, 56;
-    --spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-    --spectrum-green-400-rgb: 0, 108, 67;
-    --spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-    --spectrum-green-500-rgb: 0, 125, 78;
-    --spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-    --spectrum-green-600-rgb: 0, 143, 93;
-    --spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-    --spectrum-green-700-rgb: 18, 162, 108;
-    --spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-    --spectrum-green-800-rgb: 43, 180, 125;
-    --spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-    --spectrum-green-900-rgb: 67, 199, 143;
-    --spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-    --spectrum-green-1000-rgb: 94, 217, 162;
-    --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-    --spectrum-green-1100-rgb: 129, 233, 184;
-    --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-    --spectrum-green-1200-rgb: 177, 244, 209;
-    --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-    --spectrum-green-1300-rgb: 223, 250, 234;
-    --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-    --spectrum-green-1400-rgb: 254, 255, 252;
-    --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-    --spectrum-seafoam-100-rgb: 18, 65, 63;
-    --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-    --spectrum-seafoam-200-rgb: 14, 76, 73;
-    --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-    --spectrum-seafoam-300-rgb: 4, 90, 87;
-    --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-    --spectrum-seafoam-400-rgb: 0, 105, 101;
-    --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-    --spectrum-seafoam-500-rgb: 0, 122, 117;
-    --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-    --spectrum-seafoam-600-rgb: 0, 140, 135;
-    --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-    --spectrum-seafoam-700-rgb: 0, 158, 152;
-    --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-    --spectrum-seafoam-800-rgb: 3, 178, 171;
-    --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-    --spectrum-seafoam-900-rgb: 54, 197, 189;
-    --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-    --spectrum-seafoam-1000-rgb: 93, 214, 207;
-    --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-    --spectrum-seafoam-1100-rgb: 132, 230, 223;
-    --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-    --spectrum-seafoam-1200-rgb: 176, 242, 236;
-    --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-    --spectrum-seafoam-1300-rgb: 223, 249, 246;
-    --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-    --spectrum-seafoam-1400-rgb: 254, 255, 254;
-    --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-    --spectrum-cyan-100-rgb: 0, 61, 98;
-    --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-    --spectrum-cyan-200-rgb: 0, 71, 111;
-    --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-    --spectrum-cyan-300-rgb: 0, 85, 127;
-    --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-    --spectrum-cyan-400-rgb: 0, 100, 145;
-    --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-    --spectrum-cyan-500-rgb: 0, 116, 162;
-    --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-    --spectrum-cyan-600-rgb: 0, 134, 180;
-    --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-    --spectrum-cyan-700-rgb: 0, 153, 198;
-    --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-    --spectrum-cyan-800-rgb: 14, 173, 215;
-    --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-    --spectrum-cyan-900-rgb: 44, 193, 230;
-    --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-    --spectrum-cyan-1000-rgb: 84, 211, 241;
-    --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-    --spectrum-cyan-1100-rgb: 127, 228, 249;
-    --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-    --spectrum-cyan-1200-rgb: 167, 241, 255;
-    --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-    --spectrum-cyan-1300-rgb: 215, 250, 255;
-    --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-    --spectrum-cyan-1400-rgb: 255, 255, 255;
-    --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-    --spectrum-indigo-100-rgb: 40, 44, 140;
-    --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-    --spectrum-indigo-200-rgb: 47, 52, 163;
-    --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-    --spectrum-indigo-300-rgb: 57, 63, 187;
-    --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-    --spectrum-indigo-400-rgb: 70, 75, 211;
-    --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-    --spectrum-indigo-500-rgb: 85, 91, 231;
-    --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-    --spectrum-indigo-600-rgb: 104, 109, 244;
-    --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-    --spectrum-indigo-700-rgb: 124, 129, 251;
-    --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-    --spectrum-indigo-800-rgb: 145, 149, 255;
-    --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-    --spectrum-indigo-900-rgb: 167, 170, 255;
-    --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-    --spectrum-indigo-1000-rgb: 188, 190, 255;
-    --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-    --spectrum-indigo-1100-rgb: 208, 210, 255;
-    --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-    --spectrum-indigo-1200-rgb: 226, 228, 255;
-    --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-    --spectrum-indigo-1300-rgb: 243, 243, 254;
-    --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-    --spectrum-indigo-1400-rgb: 255, 255, 255;
-    --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-    --spectrum-purple-100-rgb: 76, 13, 157;
-    --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-    --spectrum-purple-200-rgb: 89, 17, 177;
-    --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-    --spectrum-purple-300-rgb: 105, 28, 200;
-    --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-    --spectrum-purple-400-rgb: 122, 45, 218;
-    --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-    --spectrum-purple-500-rgb: 140, 65, 233;
-    --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-    --spectrum-purple-600-rgb: 157, 87, 243;
-    --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-    --spectrum-purple-700-rgb: 172, 111, 249;
-    --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-    --spectrum-purple-800-rgb: 187, 135, 251;
-    --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-    --spectrum-purple-900-rgb: 202, 159, 252;
-    --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-    --spectrum-purple-1000-rgb: 215, 182, 254;
-    --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-    --spectrum-purple-1100-rgb: 228, 204, 254;
-    --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-    --spectrum-purple-1200-rgb: 239, 223, 255;
-    --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-    --spectrum-purple-1300-rgb: 249, 240, 255;
-    --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-    --spectrum-purple-1400-rgb: 255, 253, 255;
-    --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-    --spectrum-fuchsia-100-rgb: 107, 3, 106;
-    --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-    --spectrum-fuchsia-200-rgb: 123, 0, 123;
-    --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-    --spectrum-fuchsia-300-rgb: 144, 0, 145;
-    --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-    --spectrum-fuchsia-400-rgb: 165, 13, 166;
-    --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-    --spectrum-fuchsia-500-rgb: 185, 37, 185;
-    --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-    --spectrum-fuchsia-600-rgb: 205, 57, 206;
-    --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-    --spectrum-fuchsia-700-rgb: 223, 81, 224;
-    --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-    --spectrum-fuchsia-800-rgb: 235, 110, 236;
-    --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-    --spectrum-fuchsia-900-rgb: 244, 140, 242;
-    --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-    --spectrum-fuchsia-1000-rgb: 250, 168, 245;
-    --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-    --spectrum-fuchsia-1100-rgb: 254, 194, 248;
-    --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-    --spectrum-fuchsia-1200-rgb: 255, 219, 250;
-    --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-    --spectrum-fuchsia-1300-rgb: 255, 239, 252;
-    --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-    --spectrum-fuchsia-1400-rgb: 255, 253, 255;
-    --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-    --spectrum-magenta-100-rgb: 118, 0, 58;
-    --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-    --spectrum-magenta-200-rgb: 137, 0, 66;
-    --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-    --spectrum-magenta-300-rgb: 160, 0, 77;
-    --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-    --spectrum-magenta-400-rgb: 182, 18, 90;
-    --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-    --spectrum-magenta-500-rgb: 203, 38, 109;
-    --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-    --spectrum-magenta-600-rgb: 222, 61, 130;
-    --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-    --spectrum-magenta-700-rgb: 237, 87, 149;
-    --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-    --spectrum-magenta-800-rgb: 249, 114, 167;
-    --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-    --spectrum-magenta-900-rgb: 255, 143, 185;
-    --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-    --spectrum-magenta-1000-rgb: 255, 172, 202;
-    --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-    --spectrum-magenta-1100-rgb: 255, 198, 218;
-    --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-    --spectrum-magenta-1200-rgb: 255, 221, 233;
-    --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-    --spectrum-magenta-1300-rgb: 255, 240, 245;
-    --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);
-}
-:host,
-:root {
-    --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);
-}
-:host,
-:root {
-    --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-opacity-disabled: 0.3;
-    --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-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-900);
-    --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-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-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-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-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-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-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-picker-minimum-width-multiplier: 2;
-    --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-100);
-    --spectrum-color-wheel-color-area-margin: 12px;
-    --spectrum-color-slider-border-width: 1px;
-    --spectrum-color-slider-border-rounding: 4px;
-    --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-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-android-elevation: 2dp;
-    --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-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-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-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-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-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-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-style: var(--spectrum-default-font-style);
-    --spectrum-heading-serif-font-style: var(--spectrum-default-font-style);
-    --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-style: var(--spectrum-italic-font-style);
-    --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.888889;
-    --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.888889;
-    --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);
-}
-:host,
-:root {
-    --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-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-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-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-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-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: 13px;
-    --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-text-100: 20px;
-    --spectrum-component-pill-edge-to-text-200: 25px;
-    --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-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-text-100: 15px;
-    --spectrum-component-edge-to-text-200: 19px;
-    --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-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;
-}
-:host,
-:root {
-    --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);
-    --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-opacity-checkerboard-square-dark: var(--spectrum-gray-200);
-    --spectrum-gray-50-rgb: 255, 255, 255;
-    --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-    --spectrum-gray-75-rgb: 253, 253, 253;
-    --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-    --spectrum-gray-100-rgb: 248, 248, 248;
-    --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-    --spectrum-gray-200-rgb: 230, 230, 230;
-    --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-    --spectrum-gray-300-rgb: 213, 213, 213;
-    --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-    --spectrum-gray-400-rgb: 177, 177, 177;
-    --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-    --spectrum-gray-500-rgb: 144, 144, 144;
-    --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-    --spectrum-gray-600-rgb: 109, 109, 109;
-    --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-    --spectrum-gray-700-rgb: 70, 70, 70;
-    --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
-    --spectrum-gray-800-rgb: 34, 34, 34;
-    --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
-    --spectrum-gray-900-rgb: 0, 0, 0;
-    --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
-    --spectrum-blue-100-rgb: 224, 242, 255;
-    --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-    --spectrum-blue-200-rgb: 202, 232, 255;
-    --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-    --spectrum-blue-300-rgb: 181, 222, 255;
-    --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-    --spectrum-blue-400-rgb: 150, 206, 253;
-    --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-    --spectrum-blue-500-rgb: 120, 187, 250;
-    --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-    --spectrum-blue-600-rgb: 89, 167, 246;
-    --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-    --spectrum-blue-700-rgb: 56, 146, 243;
-    --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-    --spectrum-blue-800-rgb: 20, 122, 243;
-    --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-    --spectrum-blue-900-rgb: 2, 101, 220;
-    --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-    --spectrum-blue-1000-rgb: 0, 84, 182;
-    --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-    --spectrum-blue-1100-rgb: 0, 68, 145;
-    --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-    --spectrum-blue-1200-rgb: 0, 53, 113;
-    --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-    --spectrum-blue-1300-rgb: 0, 39, 84;
-    --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-    --spectrum-blue-1400-rgb: 0, 28, 60;
-    --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-    --spectrum-red-100-rgb: 255, 235, 231;
-    --spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-    --spectrum-red-200-rgb: 255, 221, 214;
-    --spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-    --spectrum-red-300-rgb: 255, 205, 195;
-    --spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-    --spectrum-red-400-rgb: 255, 183, 169;
-    --spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-    --spectrum-red-500-rgb: 255, 155, 136;
-    --spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-    --spectrum-red-600-rgb: 255, 124, 101;
-    --spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-    --spectrum-red-700-rgb: 247, 92, 70;
-    --spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-    --spectrum-red-800-rgb: 234, 56, 41;
-    --spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-    --spectrum-red-900-rgb: 211, 21, 16;
-    --spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-    --spectrum-red-1000-rgb: 180, 0, 0;
-    --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-    --spectrum-red-1100-rgb: 147, 0, 0;
-    --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-    --spectrum-red-1200-rgb: 116, 0, 0;
-    --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-    --spectrum-red-1300-rgb: 89, 0, 0;
-    --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-    --spectrum-red-1400-rgb: 67, 0, 0;
-    --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-    --spectrum-orange-100-rgb: 255, 236, 204;
-    --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-    --spectrum-orange-200-rgb: 255, 223, 173;
-    --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-    --spectrum-orange-300-rgb: 253, 210, 145;
-    --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-    --spectrum-orange-400-rgb: 255, 187, 99;
-    --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-    --spectrum-orange-500-rgb: 255, 160, 55;
-    --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-    --spectrum-orange-600-rgb: 246, 133, 17;
-    --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-    --spectrum-orange-700-rgb: 228, 111, 0;
-    --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-    --spectrum-orange-800-rgb: 203, 93, 0;
-    --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-    --spectrum-orange-900-rgb: 177, 76, 0;
-    --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-    --spectrum-orange-1000-rgb: 149, 61, 0;
-    --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-    --spectrum-orange-1100-rgb: 122, 47, 0;
-    --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-    --spectrum-orange-1200-rgb: 97, 35, 0;
-    --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-    --spectrum-orange-1300-rgb: 73, 25, 1;
-    --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-    --spectrum-orange-1400-rgb: 53, 18, 1;
-    --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-    --spectrum-yellow-100-rgb: 251, 241, 152;
-    --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-    --spectrum-yellow-200-rgb: 248, 231, 80;
-    --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-    --spectrum-yellow-300-rgb: 248, 217, 4;
-    --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-    --spectrum-yellow-400-rgb: 232, 198, 0;
-    --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-    --spectrum-yellow-500-rgb: 215, 179, 0;
-    --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-    --spectrum-yellow-600-rgb: 196, 159, 0;
-    --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-    --spectrum-yellow-700-rgb: 176, 140, 0;
-    --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-    --spectrum-yellow-800-rgb: 155, 120, 0;
-    --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-    --spectrum-yellow-900-rgb: 133, 102, 0;
-    --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-    --spectrum-yellow-1000-rgb: 112, 83, 0;
-    --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-    --spectrum-yellow-1100-rgb: 91, 67, 0;
-    --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-    --spectrum-yellow-1200-rgb: 72, 51, 0;
-    --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-    --spectrum-yellow-1300-rgb: 54, 37, 0;
-    --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-    --spectrum-yellow-1400-rgb: 40, 26, 0;
-    --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-    --spectrum-chartreuse-100-rgb: 219, 252, 110;
-    --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-    --spectrum-chartreuse-200-rgb: 203, 244, 67;
-    --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-    --spectrum-chartreuse-300-rgb: 188, 233, 42;
-    --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-    --spectrum-chartreuse-400-rgb: 170, 216, 22;
-    --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-    --spectrum-chartreuse-500-rgb: 152, 197, 10;
-    --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-    --spectrum-chartreuse-600-rgb: 135, 177, 3;
-    --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-    --spectrum-chartreuse-700-rgb: 118, 156, 0;
-    --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-    --spectrum-chartreuse-800-rgb: 103, 136, 0;
-    --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-    --spectrum-chartreuse-900-rgb: 87, 116, 0;
-    --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-    --spectrum-chartreuse-1000-rgb: 72, 96, 0;
-    --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-    --spectrum-chartreuse-1100-rgb: 58, 77, 0;
-    --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-    --spectrum-chartreuse-1200-rgb: 44, 59, 0;
-    --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-    --spectrum-chartreuse-1300-rgb: 33, 44, 0;
-    --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-    --spectrum-chartreuse-1400-rgb: 24, 31, 0;
-    --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-    --spectrum-celery-100-rgb: 205, 252, 191;
-    --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-    --spectrum-celery-200-rgb: 174, 246, 157;
-    --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-    --spectrum-celery-300-rgb: 150, 238, 133;
-    --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-    --spectrum-celery-400-rgb: 114, 224, 106;
-    --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-    --spectrum-celery-500-rgb: 78, 207, 80;
-    --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-    --spectrum-celery-600-rgb: 39, 187, 54;
-    --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-    --spectrum-celery-700-rgb: 7, 167, 33;
-    --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-    --spectrum-celery-800-rgb: 0, 145, 18;
-    --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-    --spectrum-celery-900-rgb: 0, 124, 15;
-    --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-    --spectrum-celery-1000-rgb: 0, 103, 15;
-    --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-    --spectrum-celery-1100-rgb: 0, 83, 13;
-    --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-    --spectrum-celery-1200-rgb: 0, 64, 10;
-    --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-    --spectrum-celery-1300-rgb: 0, 48, 7;
-    --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-    --spectrum-celery-1400-rgb: 0, 34, 5;
-    --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-    --spectrum-green-100-rgb: 206, 248, 224;
-    --spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-    --spectrum-green-200-rgb: 173, 244, 206;
-    --spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-    --spectrum-green-300-rgb: 137, 236, 188;
-    --spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-    --spectrum-green-400-rgb: 103, 222, 168;
-    --spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-    --spectrum-green-500-rgb: 73, 204, 147;
-    --spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-    --spectrum-green-600-rgb: 47, 184, 128;
-    --spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-    --spectrum-green-700-rgb: 21, 164, 110;
-    --spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-    --spectrum-green-800-rgb: 0, 143, 93;
-    --spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-    --spectrum-green-900-rgb: 0, 122, 77;
-    --spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-    --spectrum-green-1000-rgb: 0, 101, 62;
-    --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-    --spectrum-green-1100-rgb: 0, 81, 50;
-    --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-    --spectrum-green-1200-rgb: 5, 63, 39;
-    --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-    --spectrum-green-1300-rgb: 10, 46, 29;
-    --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-    --spectrum-green-1400-rgb: 10, 32, 21;
-    --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-    --spectrum-seafoam-100-rgb: 206, 247, 243;
-    --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-    --spectrum-seafoam-200-rgb: 170, 241, 234;
-    --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-    --spectrum-seafoam-300-rgb: 140, 233, 226;
-    --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-    --spectrum-seafoam-400-rgb: 101, 218, 210;
-    --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-    --spectrum-seafoam-500-rgb: 63, 201, 193;
-    --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-    --spectrum-seafoam-600-rgb: 15, 181, 174;
-    --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-    --spectrum-seafoam-700-rgb: 0, 161, 154;
-    --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-    --spectrum-seafoam-800-rgb: 0, 140, 135;
-    --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-    --spectrum-seafoam-900-rgb: 0, 119, 114;
-    --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-    --spectrum-seafoam-1000-rgb: 0, 99, 95;
-    --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-    --spectrum-seafoam-1100-rgb: 12, 79, 76;
-    --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-    --spectrum-seafoam-1200-rgb: 18, 60, 58;
-    --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-    --spectrum-seafoam-1300-rgb: 18, 44, 43;
-    --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-    --spectrum-seafoam-1400-rgb: 15, 31, 30;
-    --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-    --spectrum-cyan-100-rgb: 197, 248, 255;
-    --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-    --spectrum-cyan-200-rgb: 164, 240, 255;
-    --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-    --spectrum-cyan-300-rgb: 136, 231, 250;
-    --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-    --spectrum-cyan-400-rgb: 96, 216, 243;
-    --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-    --spectrum-cyan-500-rgb: 51, 197, 232;
-    --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-    --spectrum-cyan-600-rgb: 18, 176, 218;
-    --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-    --spectrum-cyan-700-rgb: 1, 156, 200;
-    --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-    --spectrum-cyan-800-rgb: 0, 134, 180;
-    --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-    --spectrum-cyan-900-rgb: 0, 113, 159;
-    --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-    --spectrum-cyan-1000-rgb: 0, 93, 137;
-    --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-    --spectrum-cyan-1100-rgb: 0, 74, 115;
-    --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-    --spectrum-cyan-1200-rgb: 0, 57, 93;
-    --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-    --spectrum-cyan-1300-rgb: 0, 42, 70;
-    --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-    --spectrum-cyan-1400-rgb: 0, 30, 51;
-    --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-    --spectrum-indigo-100-rgb: 237, 238, 255;
-    --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-    --spectrum-indigo-200-rgb: 224, 226, 255;
-    --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-    --spectrum-indigo-300-rgb: 211, 213, 255;
-    --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-    --spectrum-indigo-400-rgb: 193, 196, 255;
-    --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-    --spectrum-indigo-500-rgb: 172, 175, 255;
-    --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-    --spectrum-indigo-600-rgb: 149, 153, 255;
-    --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-    --spectrum-indigo-700-rgb: 126, 132, 252;
-    --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-    --spectrum-indigo-800-rgb: 104, 109, 244;
-    --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-    --spectrum-indigo-900-rgb: 82, 88, 228;
-    --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-    --spectrum-indigo-1000-rgb: 64, 70, 202;
-    --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-    --spectrum-indigo-1100-rgb: 50, 54, 168;
-    --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-    --spectrum-indigo-1200-rgb: 38, 41, 134;
-    --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-    --spectrum-indigo-1300-rgb: 27, 30, 100;
-    --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-    --spectrum-indigo-1400-rgb: 20, 22, 72;
-    --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-    --spectrum-purple-100-rgb: 246, 235, 255;
-    --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-    --spectrum-purple-200-rgb: 238, 221, 255;
-    --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-    --spectrum-purple-300-rgb: 230, 208, 255;
-    --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-    --spectrum-purple-400-rgb: 219, 187, 254;
-    --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-    --spectrum-purple-500-rgb: 204, 164, 253;
-    --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-    --spectrum-purple-600-rgb: 189, 139, 252;
-    --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-    --spectrum-purple-700-rgb: 174, 114, 249;
-    --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-    --spectrum-purple-800-rgb: 157, 87, 244;
-    --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-    --spectrum-purple-900-rgb: 137, 61, 231;
-    --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-    --spectrum-purple-1000-rgb: 115, 38, 211;
-    --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-    --spectrum-purple-1100-rgb: 93, 19, 183;
-    --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-    --spectrum-purple-1200-rgb: 71, 12, 148;
-    --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-    --spectrum-purple-1300-rgb: 51, 16, 106;
-    --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-    --spectrum-purple-1400-rgb: 35, 15, 73;
-    --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-    --spectrum-fuchsia-100-rgb: 255, 233, 252;
-    --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-    --spectrum-fuchsia-200-rgb: 255, 218, 250;
-    --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-    --spectrum-fuchsia-300-rgb: 254, 199, 248;
-    --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-    --spectrum-fuchsia-400-rgb: 251, 174, 246;
-    --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-    --spectrum-fuchsia-500-rgb: 245, 146, 243;
-    --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-    --spectrum-fuchsia-600-rgb: 237, 116, 237;
-    --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-    --spectrum-fuchsia-700-rgb: 224, 85, 226;
-    --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-    --spectrum-fuchsia-800-rgb: 205, 58, 206;
-    --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-    --spectrum-fuchsia-900-rgb: 182, 34, 183;
-    --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-    --spectrum-fuchsia-1000-rgb: 157, 3, 158;
-    --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-    --spectrum-fuchsia-1100-rgb: 128, 0, 129;
-    --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-    --spectrum-fuchsia-1200-rgb: 100, 6, 100;
-    --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-    --spectrum-fuchsia-1300-rgb: 71, 14, 70;
-    --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-    --spectrum-fuchsia-1400-rgb: 50, 13, 49;
-    --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-    --spectrum-magenta-100-rgb: 255, 234, 241;
-    --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-    --spectrum-magenta-200-rgb: 255, 220, 232;
-    --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-    --spectrum-magenta-300-rgb: 255, 202, 221;
-    --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-    --spectrum-magenta-400-rgb: 255, 178, 206;
-    --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-    --spectrum-magenta-500-rgb: 255, 149, 189;
-    --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-    --spectrum-magenta-600-rgb: 250, 119, 170;
-    --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-    --spectrum-magenta-700-rgb: 239, 90, 152;
-    --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-    --spectrum-magenta-800-rgb: 222, 61, 130;
-    --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-    --spectrum-magenta-900-rgb: 200, 34, 105;
-    --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-    --spectrum-magenta-1000-rgb: 173, 9, 85;
-    --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-    --spectrum-magenta-1100-rgb: 142, 0, 69;
-    --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-    --spectrum-magenta-1200-rgb: 112, 0, 55;
-    --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-    --spectrum-magenta-1300-rgb: 84, 3, 42;
-    --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
-    --spectrum-magenta-1400-rgb: 60, 6, 29;
-    --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-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);
-}
-:host,
-:root {
-    --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-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-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-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-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-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: 10px;
-    --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-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-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-edge-to-visual-100: 10px;
-    --spectrum-component-edge-to-visual-200: 13px;
-    --spectrum-component-edge-to-visual-300: 15px;
-    --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-text-50: 8px;
-    --spectrum-component-edge-to-text-75: 9px;
-    --spectrum-component-edge-to-text-100: 12px;
-    --spectrum-component-edge-to-text-200: 15px;
-    --spectrum-component-edge-to-text-300: 18px;
-    --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-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;
-}
-:host,
-:root {
-    --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));
-}
-:host,
-:root {
-    --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));
-}
-:host,
-:root {
-    --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: 0s;
-    --spectrum-animation-duration-100: 0.13s;
-    --spectrum-animation-duration-200: 0.16s;
-    --spectrum-animation-duration-300: 0.19s;
-    --spectrum-animation-duration-400: 0.22s;
-    --spectrum-animation-duration-500: 0.25s;
-    --spectrum-animation-duration-600: 0.3s;
-    --spectrum-animation-duration-700: 0.35s;
-    --spectrum-animation-duration-800: 0.4s;
-    --spectrum-animation-duration-900: 0.45s;
-    --spectrum-animation-duration-1000: 0.5s;
-    --spectrum-animation-duration-2000: 1s;
-    --spectrum-animation-duration-4000: 2s;
-    --spectrum-animation-duration-6000: 3s;
-    --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);
-    --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;
-    --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-cjk-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);
-}
-:host,
-:root {
-    --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;
-}
-:host,
-:root {
-    --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));
-}
-:host,
-:root {
-    --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;
-}
-:host,
-:root {
-    --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);
-}
-:host,
-:root {
-    --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;
-}
-:host,
-:root {
-    --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;
-}
-:host,
-:root {
-    --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);
-}
-:host,
-:root {
-    --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/tools/styles/tokens/large-vars.css b/tools/styles/tokens/large-vars.css
deleted file mode 100644
index 6b4144b8973..00000000000
--- a/tools/styles/tokens/large-vars.css
+++ /dev/null
@@ -1,492 +0,0 @@
-:host,
-:root {
-    --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-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-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-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-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-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: 13px;
-    --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-text-100: 20px;
-    --spectrum-component-pill-edge-to-text-200: 25px;
-    --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-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-text-100: 15px;
-    --spectrum-component-edge-to-text-200: 19px;
-    --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-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;
-}
diff --git a/tools/styles/tokens/light-vars.css b/tools/styles/tokens/light-vars.css
deleted file mode 100644
index 2d9313129d6..00000000000
--- a/tools/styles/tokens/light-vars.css
+++ /dev/null
@@ -1,460 +0,0 @@
-:host,
-:root {
-    --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);
-    --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-opacity-checkerboard-square-dark: var(--spectrum-gray-200);
-    --spectrum-gray-50-rgb: 255, 255, 255;
-    --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
-    --spectrum-gray-75-rgb: 253, 253, 253;
-    --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
-    --spectrum-gray-100-rgb: 248, 248, 248;
-    --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
-    --spectrum-gray-200-rgb: 230, 230, 230;
-    --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
-    --spectrum-gray-300-rgb: 213, 213, 213;
-    --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
-    --spectrum-gray-400-rgb: 177, 177, 177;
-    --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
-    --spectrum-gray-500-rgb: 144, 144, 144;
-    --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
-    --spectrum-gray-600-rgb: 109, 109, 109;
-    --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
-    --spectrum-gray-700-rgb: 70, 70, 70;
-    --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
-    --spectrum-gray-800-rgb: 34, 34, 34;
-    --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
-    --spectrum-gray-900-rgb: 0, 0, 0;
-    --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
-    --spectrum-blue-100-rgb: 224, 242, 255;
-    --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
-    --spectrum-blue-200-rgb: 202, 232, 255;
-    --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
-    --spectrum-blue-300-rgb: 181, 222, 255;
-    --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
-    --spectrum-blue-400-rgb: 150, 206, 253;
-    --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
-    --spectrum-blue-500-rgb: 120, 187, 250;
-    --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
-    --spectrum-blue-600-rgb: 89, 167, 246;
-    --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
-    --spectrum-blue-700-rgb: 56, 146, 243;
-    --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
-    --spectrum-blue-800-rgb: 20, 122, 243;
-    --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
-    --spectrum-blue-900-rgb: 2, 101, 220;
-    --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
-    --spectrum-blue-1000-rgb: 0, 84, 182;
-    --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
-    --spectrum-blue-1100-rgb: 0, 68, 145;
-    --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
-    --spectrum-blue-1200-rgb: 0, 53, 113;
-    --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
-    --spectrum-blue-1300-rgb: 0, 39, 84;
-    --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
-    --spectrum-blue-1400-rgb: 0, 28, 60;
-    --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
-    --spectrum-red-100-rgb: 255, 235, 231;
-    --spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
-    --spectrum-red-200-rgb: 255, 221, 214;
-    --spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
-    --spectrum-red-300-rgb: 255, 205, 195;
-    --spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
-    --spectrum-red-400-rgb: 255, 183, 169;
-    --spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
-    --spectrum-red-500-rgb: 255, 155, 136;
-    --spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
-    --spectrum-red-600-rgb: 255, 124, 101;
-    --spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
-    --spectrum-red-700-rgb: 247, 92, 70;
-    --spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
-    --spectrum-red-800-rgb: 234, 56, 41;
-    --spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
-    --spectrum-red-900-rgb: 211, 21, 16;
-    --spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
-    --spectrum-red-1000-rgb: 180, 0, 0;
-    --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
-    --spectrum-red-1100-rgb: 147, 0, 0;
-    --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
-    --spectrum-red-1200-rgb: 116, 0, 0;
-    --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
-    --spectrum-red-1300-rgb: 89, 0, 0;
-    --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
-    --spectrum-red-1400-rgb: 67, 0, 0;
-    --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
-    --spectrum-orange-100-rgb: 255, 236, 204;
-    --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
-    --spectrum-orange-200-rgb: 255, 223, 173;
-    --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
-    --spectrum-orange-300-rgb: 253, 210, 145;
-    --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
-    --spectrum-orange-400-rgb: 255, 187, 99;
-    --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
-    --spectrum-orange-500-rgb: 255, 160, 55;
-    --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
-    --spectrum-orange-600-rgb: 246, 133, 17;
-    --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
-    --spectrum-orange-700-rgb: 228, 111, 0;
-    --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
-    --spectrum-orange-800-rgb: 203, 93, 0;
-    --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
-    --spectrum-orange-900-rgb: 177, 76, 0;
-    --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
-    --spectrum-orange-1000-rgb: 149, 61, 0;
-    --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
-    --spectrum-orange-1100-rgb: 122, 47, 0;
-    --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
-    --spectrum-orange-1200-rgb: 97, 35, 0;
-    --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
-    --spectrum-orange-1300-rgb: 73, 25, 1;
-    --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
-    --spectrum-orange-1400-rgb: 53, 18, 1;
-    --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
-    --spectrum-yellow-100-rgb: 251, 241, 152;
-    --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
-    --spectrum-yellow-200-rgb: 248, 231, 80;
-    --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
-    --spectrum-yellow-300-rgb: 248, 217, 4;
-    --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
-    --spectrum-yellow-400-rgb: 232, 198, 0;
-    --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
-    --spectrum-yellow-500-rgb: 215, 179, 0;
-    --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
-    --spectrum-yellow-600-rgb: 196, 159, 0;
-    --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
-    --spectrum-yellow-700-rgb: 176, 140, 0;
-    --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
-    --spectrum-yellow-800-rgb: 155, 120, 0;
-    --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
-    --spectrum-yellow-900-rgb: 133, 102, 0;
-    --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
-    --spectrum-yellow-1000-rgb: 112, 83, 0;
-    --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
-    --spectrum-yellow-1100-rgb: 91, 67, 0;
-    --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
-    --spectrum-yellow-1200-rgb: 72, 51, 0;
-    --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
-    --spectrum-yellow-1300-rgb: 54, 37, 0;
-    --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
-    --spectrum-yellow-1400-rgb: 40, 26, 0;
-    --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
-    --spectrum-chartreuse-100-rgb: 219, 252, 110;
-    --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
-    --spectrum-chartreuse-200-rgb: 203, 244, 67;
-    --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
-    --spectrum-chartreuse-300-rgb: 188, 233, 42;
-    --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
-    --spectrum-chartreuse-400-rgb: 170, 216, 22;
-    --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
-    --spectrum-chartreuse-500-rgb: 152, 197, 10;
-    --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
-    --spectrum-chartreuse-600-rgb: 135, 177, 3;
-    --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
-    --spectrum-chartreuse-700-rgb: 118, 156, 0;
-    --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
-    --spectrum-chartreuse-800-rgb: 103, 136, 0;
-    --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
-    --spectrum-chartreuse-900-rgb: 87, 116, 0;
-    --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
-    --spectrum-chartreuse-1000-rgb: 72, 96, 0;
-    --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
-    --spectrum-chartreuse-1100-rgb: 58, 77, 0;
-    --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
-    --spectrum-chartreuse-1200-rgb: 44, 59, 0;
-    --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
-    --spectrum-chartreuse-1300-rgb: 33, 44, 0;
-    --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
-    --spectrum-chartreuse-1400-rgb: 24, 31, 0;
-    --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
-    --spectrum-celery-100-rgb: 205, 252, 191;
-    --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
-    --spectrum-celery-200-rgb: 174, 246, 157;
-    --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
-    --spectrum-celery-300-rgb: 150, 238, 133;
-    --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
-    --spectrum-celery-400-rgb: 114, 224, 106;
-    --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
-    --spectrum-celery-500-rgb: 78, 207, 80;
-    --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
-    --spectrum-celery-600-rgb: 39, 187, 54;
-    --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
-    --spectrum-celery-700-rgb: 7, 167, 33;
-    --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
-    --spectrum-celery-800-rgb: 0, 145, 18;
-    --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
-    --spectrum-celery-900-rgb: 0, 124, 15;
-    --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
-    --spectrum-celery-1000-rgb: 0, 103, 15;
-    --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
-    --spectrum-celery-1100-rgb: 0, 83, 13;
-    --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
-    --spectrum-celery-1200-rgb: 0, 64, 10;
-    --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
-    --spectrum-celery-1300-rgb: 0, 48, 7;
-    --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
-    --spectrum-celery-1400-rgb: 0, 34, 5;
-    --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
-    --spectrum-green-100-rgb: 206, 248, 224;
-    --spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
-    --spectrum-green-200-rgb: 173, 244, 206;
-    --spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
-    --spectrum-green-300-rgb: 137, 236, 188;
-    --spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
-    --spectrum-green-400-rgb: 103, 222, 168;
-    --spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
-    --spectrum-green-500-rgb: 73, 204, 147;
-    --spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
-    --spectrum-green-600-rgb: 47, 184, 128;
-    --spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
-    --spectrum-green-700-rgb: 21, 164, 110;
-    --spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
-    --spectrum-green-800-rgb: 0, 143, 93;
-    --spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
-    --spectrum-green-900-rgb: 0, 122, 77;
-    --spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
-    --spectrum-green-1000-rgb: 0, 101, 62;
-    --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
-    --spectrum-green-1100-rgb: 0, 81, 50;
-    --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
-    --spectrum-green-1200-rgb: 5, 63, 39;
-    --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
-    --spectrum-green-1300-rgb: 10, 46, 29;
-    --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
-    --spectrum-green-1400-rgb: 10, 32, 21;
-    --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
-    --spectrum-seafoam-100-rgb: 206, 247, 243;
-    --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
-    --spectrum-seafoam-200-rgb: 170, 241, 234;
-    --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
-    --spectrum-seafoam-300-rgb: 140, 233, 226;
-    --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
-    --spectrum-seafoam-400-rgb: 101, 218, 210;
-    --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
-    --spectrum-seafoam-500-rgb: 63, 201, 193;
-    --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
-    --spectrum-seafoam-600-rgb: 15, 181, 174;
-    --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
-    --spectrum-seafoam-700-rgb: 0, 161, 154;
-    --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
-    --spectrum-seafoam-800-rgb: 0, 140, 135;
-    --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
-    --spectrum-seafoam-900-rgb: 0, 119, 114;
-    --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
-    --spectrum-seafoam-1000-rgb: 0, 99, 95;
-    --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
-    --spectrum-seafoam-1100-rgb: 12, 79, 76;
-    --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
-    --spectrum-seafoam-1200-rgb: 18, 60, 58;
-    --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
-    --spectrum-seafoam-1300-rgb: 18, 44, 43;
-    --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
-    --spectrum-seafoam-1400-rgb: 15, 31, 30;
-    --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
-    --spectrum-cyan-100-rgb: 197, 248, 255;
-    --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
-    --spectrum-cyan-200-rgb: 164, 240, 255;
-    --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
-    --spectrum-cyan-300-rgb: 136, 231, 250;
-    --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
-    --spectrum-cyan-400-rgb: 96, 216, 243;
-    --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
-    --spectrum-cyan-500-rgb: 51, 197, 232;
-    --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
-    --spectrum-cyan-600-rgb: 18, 176, 218;
-    --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
-    --spectrum-cyan-700-rgb: 1, 156, 200;
-    --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
-    --spectrum-cyan-800-rgb: 0, 134, 180;
-    --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
-    --spectrum-cyan-900-rgb: 0, 113, 159;
-    --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
-    --spectrum-cyan-1000-rgb: 0, 93, 137;
-    --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
-    --spectrum-cyan-1100-rgb: 0, 74, 115;
-    --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
-    --spectrum-cyan-1200-rgb: 0, 57, 93;
-    --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
-    --spectrum-cyan-1300-rgb: 0, 42, 70;
-    --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
-    --spectrum-cyan-1400-rgb: 0, 30, 51;
-    --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
-    --spectrum-indigo-100-rgb: 237, 238, 255;
-    --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
-    --spectrum-indigo-200-rgb: 224, 226, 255;
-    --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
-    --spectrum-indigo-300-rgb: 211, 213, 255;
-    --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
-    --spectrum-indigo-400-rgb: 193, 196, 255;
-    --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
-    --spectrum-indigo-500-rgb: 172, 175, 255;
-    --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
-    --spectrum-indigo-600-rgb: 149, 153, 255;
-    --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
-    --spectrum-indigo-700-rgb: 126, 132, 252;
-    --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
-    --spectrum-indigo-800-rgb: 104, 109, 244;
-    --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
-    --spectrum-indigo-900-rgb: 82, 88, 228;
-    --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
-    --spectrum-indigo-1000-rgb: 64, 70, 202;
-    --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
-    --spectrum-indigo-1100-rgb: 50, 54, 168;
-    --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
-    --spectrum-indigo-1200-rgb: 38, 41, 134;
-    --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
-    --spectrum-indigo-1300-rgb: 27, 30, 100;
-    --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
-    --spectrum-indigo-1400-rgb: 20, 22, 72;
-    --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
-    --spectrum-purple-100-rgb: 246, 235, 255;
-    --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
-    --spectrum-purple-200-rgb: 238, 221, 255;
-    --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
-    --spectrum-purple-300-rgb: 230, 208, 255;
-    --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
-    --spectrum-purple-400-rgb: 219, 187, 254;
-    --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
-    --spectrum-purple-500-rgb: 204, 164, 253;
-    --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
-    --spectrum-purple-600-rgb: 189, 139, 252;
-    --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
-    --spectrum-purple-700-rgb: 174, 114, 249;
-    --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
-    --spectrum-purple-800-rgb: 157, 87, 244;
-    --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
-    --spectrum-purple-900-rgb: 137, 61, 231;
-    --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
-    --spectrum-purple-1000-rgb: 115, 38, 211;
-    --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
-    --spectrum-purple-1100-rgb: 93, 19, 183;
-    --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
-    --spectrum-purple-1200-rgb: 71, 12, 148;
-    --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
-    --spectrum-purple-1300-rgb: 51, 16, 106;
-    --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
-    --spectrum-purple-1400-rgb: 35, 15, 73;
-    --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
-    --spectrum-fuchsia-100-rgb: 255, 233, 252;
-    --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
-    --spectrum-fuchsia-200-rgb: 255, 218, 250;
-    --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
-    --spectrum-fuchsia-300-rgb: 254, 199, 248;
-    --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
-    --spectrum-fuchsia-400-rgb: 251, 174, 246;
-    --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
-    --spectrum-fuchsia-500-rgb: 245, 146, 243;
-    --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
-    --spectrum-fuchsia-600-rgb: 237, 116, 237;
-    --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
-    --spectrum-fuchsia-700-rgb: 224, 85, 226;
-    --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
-    --spectrum-fuchsia-800-rgb: 205, 58, 206;
-    --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
-    --spectrum-fuchsia-900-rgb: 182, 34, 183;
-    --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
-    --spectrum-fuchsia-1000-rgb: 157, 3, 158;
-    --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
-    --spectrum-fuchsia-1100-rgb: 128, 0, 129;
-    --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
-    --spectrum-fuchsia-1200-rgb: 100, 6, 100;
-    --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
-    --spectrum-fuchsia-1300-rgb: 71, 14, 70;
-    --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
-    --spectrum-fuchsia-1400-rgb: 50, 13, 49;
-    --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
-    --spectrum-magenta-100-rgb: 255, 234, 241;
-    --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
-    --spectrum-magenta-200-rgb: 255, 220, 232;
-    --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
-    --spectrum-magenta-300-rgb: 255, 202, 221;
-    --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
-    --spectrum-magenta-400-rgb: 255, 178, 206;
-    --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
-    --spectrum-magenta-500-rgb: 255, 149, 189;
-    --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
-    --spectrum-magenta-600-rgb: 250, 119, 170;
-    --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
-    --spectrum-magenta-700-rgb: 239, 90, 152;
-    --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
-    --spectrum-magenta-800-rgb: 222, 61, 130;
-    --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
-    --spectrum-magenta-900-rgb: 200, 34, 105;
-    --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
-    --spectrum-magenta-1000-rgb: 173, 9, 85;
-    --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
-    --spectrum-magenta-1100-rgb: 142, 0, 69;
-    --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
-    --spectrum-magenta-1200-rgb: 112, 0, 55;
-    --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
-    --spectrum-magenta-1300-rgb: 84, 3, 42;
-    --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
-    --spectrum-magenta-1400-rgb: 60, 6, 29;
-    --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-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);
-}
diff --git a/tools/styles/tokens/medium-vars.css b/tools/styles/tokens/medium-vars.css
deleted file mode 100644
index 32d6e4ebd31..00000000000
--- a/tools/styles/tokens/medium-vars.css
+++ /dev/null
@@ -1,492 +0,0 @@
-:host,
-:root {
-    --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-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-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-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-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-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: 10px;
-    --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-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-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-edge-to-visual-100: 10px;
-    --spectrum-component-edge-to-visual-200: 13px;
-    --spectrum-component-edge-to-visual-300: 15px;
-    --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-text-50: 8px;
-    --spectrum-component-edge-to-text-75: 9px;
-    --spectrum-component-edge-to-text-100: 12px;
-    --spectrum-component-edge-to-text-200: 15px;
-    --spectrum-component-edge-to-text-300: 18px;
-    --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-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;
-}
diff --git a/tools/styles/tokens/spectrum/custom-dark-vars.css b/tools/styles/tokens/spectrum/custom-dark-vars.css
deleted file mode 100644
index 110fd3f9db1..00000000000
--- a/tools/styles/tokens/spectrum/custom-dark-vars.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in spectrum/dark-vars.css */
-:host,
-:root {
-    --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-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);
-}
diff --git a/tools/styles/tokens/spectrum/custom-darkest-vars.css b/tools/styles/tokens/spectrum/custom-darkest-vars.css
deleted file mode 100644
index 95c9ad9276d..00000000000
--- a/tools/styles/tokens/spectrum/custom-darkest-vars.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in spectrum/darkest-vars.css */
-:host,
-:root {
-    --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-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);
-}
diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css
deleted file mode 100644
index 8205aef2228..00000000000
--- a/tools/styles/tokens/spectrum/custom-large-vars.css
+++ /dev/null
@@ -1,108 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in spectrum/large-vars.css */
-:host,
-:root {
-    --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-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/tools/styles/tokens/spectrum/custom-light-vars.css b/tools/styles/tokens/spectrum/custom-light-vars.css
deleted file mode 100644
index 8c9ec00e993..00000000000
--- a/tools/styles/tokens/spectrum/custom-light-vars.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in spectrum/light-vars.css */
-:host,
-:root {
-    --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-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-rgb);
-    --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);
-}
diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css
deleted file mode 100644
index e2fc6372ba7..00000000000
--- a/tools/styles/tokens/spectrum/custom-medium-vars.css
+++ /dev/null
@@ -1,107 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in spectrum/medium-vars.css */
-:host,
-:root {
-    --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-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/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css
deleted file mode 100644
index ee2789b739c..00000000000
--- a/tools/styles/tokens/spectrum/custom-vars.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/* @deprecated these assets should not be used; the custom override values exist in spectrum/global-vars.css */
-:host,
-:root {
-    --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);
-
-    --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-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
-    --spectrum-cjk-font: var(--spectrum-cjk-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));
-}
diff --git a/tools/styles/tokens/spectrum/dark-vars.css b/tools/styles/tokens/spectrum/dark-vars.css
deleted file mode 100644
index 95fcfeaa4b1..00000000000
--- a/tools/styles/tokens/spectrum/dark-vars.css
+++ /dev/null
@@ -1,50 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/spectrum/darkest-vars.css b/tools/styles/tokens/spectrum/darkest-vars.css
deleted file mode 100644
index b9c59cff7d1..00000000000
--- a/tools/styles/tokens/spectrum/darkest-vars.css
+++ /dev/null
@@ -1,50 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css
deleted file mode 100644
index 64af8772e7b..00000000000
--- a/tools/styles/tokens/spectrum/global-vars.css
+++ /dev/null
@@ -1,79 +0,0 @@
-:host,
-:root {
-    --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: 0s;
-    --spectrum-animation-duration-100: 0.13s;
-    --spectrum-animation-duration-200: 0.16s;
-    --spectrum-animation-duration-300: 0.19s;
-    --spectrum-animation-duration-400: 0.22s;
-    --spectrum-animation-duration-500: 0.25s;
-    --spectrum-animation-duration-600: 0.3s;
-    --spectrum-animation-duration-700: 0.35s;
-    --spectrum-animation-duration-800: 0.4s;
-    --spectrum-animation-duration-900: 0.45s;
-    --spectrum-animation-duration-1000: 0.5s;
-    --spectrum-animation-duration-2000: 1s;
-    --spectrum-animation-duration-4000: 2s;
-    --spectrum-animation-duration-6000: 3s;
-    --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);
-    --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;
-    --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-cjk-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/tools/styles/tokens/spectrum/index.css b/tools/styles/tokens/spectrum/index.css
deleted file mode 100644
index b205a2b6442..00000000000
--- a/tools/styles/tokens/spectrum/index.css
+++ /dev/null
@@ -1,501 +0,0 @@
-:host,
-:root {
-    --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));
-}
-:host,
-:root {
-    --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));
-}
-:host,
-:root {
-    --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: 0s;
-    --spectrum-animation-duration-100: 0.13s;
-    --spectrum-animation-duration-200: 0.16s;
-    --spectrum-animation-duration-300: 0.19s;
-    --spectrum-animation-duration-400: 0.22s;
-    --spectrum-animation-duration-500: 0.25s;
-    --spectrum-animation-duration-600: 0.3s;
-    --spectrum-animation-duration-700: 0.35s;
-    --spectrum-animation-duration-800: 0.4s;
-    --spectrum-animation-duration-900: 0.45s;
-    --spectrum-animation-duration-1000: 0.5s;
-    --spectrum-animation-duration-2000: 1s;
-    --spectrum-animation-duration-4000: 2s;
-    --spectrum-animation-duration-6000: 3s;
-    --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);
-    --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;
-    --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-cjk-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);
-}
-:host,
-:root {
-    --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;
-}
-:host,
-:root {
-    --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));
-}
-:host,
-:root {
-    --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/tools/styles/tokens/spectrum/large-vars.css b/tools/styles/tokens/spectrum/large-vars.css
deleted file mode 100644
index 6bcb8ac1b08..00000000000
--- a/tools/styles/tokens/spectrum/large-vars.css
+++ /dev/null
@@ -1,136 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/spectrum/light-vars.css b/tools/styles/tokens/spectrum/light-vars.css
deleted file mode 100644
index e79e90b0725..00000000000
--- a/tools/styles/tokens/spectrum/light-vars.css
+++ /dev/null
@@ -1,50 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/spectrum/medium-vars.css b/tools/styles/tokens/spectrum/medium-vars.css
deleted file mode 100644
index c9aeb079761..00000000000
--- a/tools/styles/tokens/spectrum/medium-vars.css
+++ /dev/null
@@ -1,136 +0,0 @@
-:host,
-:root {
-    --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/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css
deleted file mode 100644
index 2a1ab6eb9c9..00000000000
--- a/tools/styles/tokens/spectrum/system-theme-bridge.css
+++ /dev/null
@@ -1,675 +0,0 @@
-:host,
-:root {
-    --system-accordion-divider-color: var(--spectrum-gray-300);
-    --system-accordion-item-content-disabled-color: var(--spectrum-gray-400);
-    --system-accordion-item-content-color: var(--spectrum-gray-800);
-    --system-action-bar-popover-background-color: var(--spectrum-gray-50);
-    --system-action-bar-popover-border-color: var(--spectrum-gray-400);
-    --system-action-button-background-color-default: var(--spectrum-gray-75);
-    --system-action-button-background-color-hover: var(--spectrum-gray-200);
-    --system-action-button-background-color-down: var(--spectrum-gray-300);
-    --system-action-button-background-color-focus: var(--spectrum-gray-200);
-    --system-action-button-background-color-disabled: transparent;
-    --system-action-button-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
-    --system-action-button-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
-    --system-action-button-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
-    --system-action-button-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-    --system-action-button-border-color-default: var(--spectrum-gray-400);
-    --system-action-button-border-color-hover: var(--spectrum-gray-500);
-    --system-action-button-border-color-down: var(--spectrum-gray-600);
-    --system-action-button-border-color-focus: var(--spectrum-gray-500);
-    --system-action-button-border-color-disabled: var(--spectrum-disabled-border-color);
-    --system-action-button-content-color-selected: var(--spectrum-gray-75);
-    --system-action-button-size-m-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-size-xs-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-size-s-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-size-l-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-size-xl-border-radius-default: var(--spectrum-corner-radius-100);
-    --system-action-button-quiet-background-color-default: transparent;
-    --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200);
-    --system-action-button-quiet-background-color-down: var(--spectrum-gray-300);
-    --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200);
-    --system-action-button-quiet-background-color-disabled: transparent;
-    --system-action-button-quiet-background-color-selected-disabled: var(--spectrum-disabled-background-color);
-    --system-action-button-static-black-border-color-default: var(--spectrum-transparent-black-400);
-    --system-action-button-static-black-border-color-hover: var(--spectrum-transparent-black-500);
-    --system-action-button-static-black-border-color-down: var(--spectrum-transparent-black-600);
-    --system-action-button-static-black-border-color-focus: var(--spectrum-transparent-black-500);
-    --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
-    --system-action-button-static-black-background-color-disabled: transparent;
-    --system-action-button-static-black-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color);
-    --system-action-button-static-black-background-color-default: transparent;
-    --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400);
-    --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-action-button-static-black-quiet-background-color-default: transparent;
-    --system-action-button-static-black-quiet-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-action-button-static-black-quiet-background-color-down: var(--spectrum-transparent-black-400);
-    --system-action-button-static-black-quiet-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-action-button-static-black-quiet-background-color-disabled: transparent;
-    --system-action-button-static-white-border-color-default: var(--spectrum-transparent-white-400);
-    --system-action-button-static-white-border-color-hover: var(--spectrum-transparent-white-500);
-    --system-action-button-static-white-border-color-down: var(--spectrum-transparent-white-600);
-    --system-action-button-static-white-border-color-focus: var(--spectrum-transparent-white-500);
-    --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
-    --system-action-button-static-white-background-color-disabled: transparent;
-    --system-action-button-static-white-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color);
-    --system-action-button-static-white-background-color-default: transparent;
-    --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400);
-    --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-action-button-static-white-quiet-background-color-default: transparent;
-    --system-action-button-static-white-quiet-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-action-button-static-white-quiet-background-color-down: var(--spectrum-transparent-white-400);
-    --system-action-button-static-white-quiet-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-action-button-static-white-quiet-background-color-disabled: transparent;
-    --system-action-button-background-color-selected-disabled: var(--spectrum-disabled-background-color);
-    --system-action-group-gap-size-compact: 0;
-    --system-action-group-horizontal-spacing-compact: -1px;
-    --system-action-group-vertical-spacing-compact: -1px;
-    --system-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
-    --system-asset-folder-background-color: var(--spectrum-gray-300);
-    --system-asset-file-background-color: var(--spectrum-gray-50);
-    --system-asset-icon-outline-color: var(--spectrum-gray-500);
-    --system-button-background-color-default: var(--spectrum-gray-75);
-    --system-button-background-color-hover: var(--spectrum-gray-200);
-    --system-button-background-color-down: var(--spectrum-gray-300);
-    --system-button-background-color-focus: var(--spectrum-gray-200);
-    --system-button-border-color-default: var(--spectrum-gray-400);
-    --system-button-border-color-hover: var(--spectrum-gray-500);
-    --system-button-border-color-down: var(--spectrum-gray-600);
-    --system-button-border-color-focus: var(--spectrum-gray-500);
-    --system-button-background-color-disabled: transparent;
-    --system-button-border-color-disabled: var(--spectrum-disabled-border-color);
-    --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-    --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
-    --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
-    --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-    --system-button-primary-content-color-default: var(--spectrum-white);
-    --system-button-primary-content-color-hover: var(--spectrum-white);
-    --system-button-primary-content-color-down: var(--spectrum-white);
-    --system-button-primary-content-color-focus: var(--spectrum-white);
-    --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300);
-    --system-button-primary-outline-background-color-down: var(--spectrum-gray-400);
-    --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300);
-    --system-button-secondary-background-color-default: var(--spectrum-gray-200);
-    --system-button-secondary-background-color-hover: var(--spectrum-gray-300);
-    --system-button-secondary-background-color-down: var(--spectrum-gray-400);
-    --system-button-secondary-background-color-focus: var(--spectrum-gray-300);
-    --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300);
-    --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400);
-    --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300);
-    --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300);
-    --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500);
-    --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900);
-    --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900);
-    --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900);
-    --system-button-static-white-content-color-default: var(--spectrum-black);
-    --system-button-static-white-content-color-hover: var(--spectrum-black);
-    --system-button-static-white-content-color-down: var(--spectrum-black);
-    --system-button-static-white-content-color-focus: var(--spectrum-black);
-    --system-button-static-white-outline-background-color-default: var(--spectrum-transparent-white-25);
-    --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400);
-    --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-button-static-white-outline-content-color-default: var(--spectrum-white);
-    --system-button-static-white-outline-content-color-hover: var(--spectrum-white);
-    --system-button-static-white-outline-content-color-down: var(--spectrum-white);
-    --system-button-static-white-outline-content-color-focus: var(--spectrum-white);
-    --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900);
-    --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900);
-    --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900);
-    --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200);
-    --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-button-static-white-secondary-content-color-default: var(--spectrum-white);
-    --system-button-static-white-secondary-content-color-hover: var(--spectrum-white);
-    --system-button-static-white-secondary-content-color-down: var(--spectrum-white);
-    --system-button-static-white-secondary-content-color-focus: var(--spectrum-white);
-    --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300);
-    --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500);
-    --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-outline-background-color-default: var(--spectrum-transparent-white-800);
-    --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400);
-    --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800);
-    --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900);
-    --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900);
-    --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900);
-    --system-button-static-black-content-color-default: var(--spectrum-white);
-    --system-button-static-black-content-color-hover: var(--spectrum-white);
-    --system-button-static-black-content-color-down: var(--spectrum-white);
-    --system-button-static-black-content-color-focus: var(--spectrum-white);
-    --system-button-static-black-outline-background-color-default: var(--spectrum-transparent-black-25);
-    --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400);
-    --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-button-static-black-outline-content-color-default: var(--spectrum-black);
-    --system-button-static-black-outline-content-color-hover: var(--spectrum-black);
-    --system-button-static-black-outline-content-color-down: var(--spectrum-black);
-    --system-button-static-black-outline-content-color-focus: var(--spectrum-black);
-    --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400);
-    --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500);
-    --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600);
-    --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500);
-    --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200);
-    --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-button-static-black-secondary-content-color-default: var(--spectrum-black);
-    --system-button-static-black-secondary-content-color-hover: var(--spectrum-black);
-    --system-button-static-black-secondary-content-color-down: var(--spectrum-black);
-    --system-button-static-black-secondary-content-color-focus: var(--spectrum-black);
-    --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300);
-    --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500);
-    --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-outline-background-color-default: var(--spectrum-transparent-black-800);
-    --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400);
-    --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-checkbox-control-color-default: var(--spectrum-gray-600);
-    --system-checkbox-control-color-hover: var(--spectrum-gray-700);
-    --system-checkbox-control-color-down: var(--spectrum-gray-800);
-    --system-checkbox-control-color-focus: var(--spectrum-gray-700);
-    --system-checkbox-checkmark-color: var(--spectrum-gray-75);
-    --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
-    --system-card-border-color: var(--spectrum-gray-200);
-    --system-card-border-color-hover: var(--spectrum-gray-300);
-    --system-card-divider-color: var(--spectrum-gray-300);
-    --system-card-preview-background-color: var(--spectrum-background-base-color);
-    --system-card-preview-background-color-hover: var(--spectrum-gray-300);
-    --system-clear-button-background-color: transparent;
-    --system-clear-button-background-color-hover: transparent;
-    --system-clear-button-background-color-down: transparent;
-    --system-clear-button-background-color-key-focus: transparent;
-    --system-clear-button-height: var(--spectrum-component-height-100);
-    --system-clear-button-width: var(--spectrum-component-height-100);
-    --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-    --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
-    --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
-    --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
-    --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-    --system-clear-button-size-s-height: var(--spectrum-component-height-75);
-    --system-clear-button-size-s-width: var(--spectrum-component-height-75);
-    --system-clear-button-size-l-height: var(--spectrum-component-height-200);
-    --system-clear-button-size-l-width: var(--spectrum-component-height-200);
-    --system-clear-button-size-xl-height: var(--spectrum-component-height-300);
-    --system-clear-button-size-xl-width: var(--spectrum-component-height-300);
-    --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent);
-    --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent);
-    --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent);
-    --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent);
-    --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white));
-    --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent);
-    --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300));
-    --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400));
-    --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300));
-    --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color);
-    --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
-    --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
-    --system-clear-button-disabled-background-color: transparent;
-    --system-close-button-background-color-default: transparent;
-    --system-close-button-background-color-hover: var(--spectrum-gray-200);
-    --system-close-button-background-color-down: var(--spectrum-gray-300);
-    --system-close-button-background-color-focus: var(--spectrum-gray-200);
-    --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300);
-    --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400);
-    --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300);
-    --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300);
-    --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400);
-    --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300);
-    --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
-    --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
-    --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
-    --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size);
-    --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size);
-    --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter);
-    --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter);
-    --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
-    --system-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-    --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size));
-    --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size));
-    --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
-    --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
-    --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66;
-    --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1;
-    --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
-    --system-coach-indicator-animation-name: pulse;
-    --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple);
-    --system-coach-indicator-animation-keyframe-0-scale: 1;
-    --system-coach-indicator-animation-keyframe-0-opacity: 0;
-    --system-coach-indicator-animation-keyframe-50-scale: 1.5;
-    --system-coach-indicator-animation-keyframe-50-opacity: 1;
-    --system-coach-indicator-animation-keyframe-100-scale: 2;
-    --system-coach-indicator-animation-keyframe-100-opacity: 0;
-    --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8;
-    --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter);
-    --system-coach-indicator-quiet-animation-name: pulse-quiet;
-    --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width);
-    --system-coach-mark-width: var(--spectrum-coach-mark-width);
-    --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width);
-    --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height);
-    --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
-    --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content);
-    --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300);
-    --system-coach-mark-header-to-body: var(--spectrum-spacing-200);
-    --system-coach-mark-body-to-footer: var(--spectrum-spacing-300);
-    --system-coach-mark-title-color: var(--spectrum-heading-color);
-    --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font);
-    --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style);
-    --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-    --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size);
-    --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height);
-    --system-coach-mark-content-font-color: var(--spectrum-body-color);
-    --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
-    --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font);
-    --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style);
-    --system-coach-mark-content-line-height: var(--spectrum-body-line-height);
-    --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size);
-    --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color);
-    --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight);
-    --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font);
-    --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style);
-    --system-coach-mark-step-line-height: var(--spectrum-body-line-height);
-    --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size);
-    --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
-    --system-coach-mark-popover-border-width: var(--spectrum-border-width-100);
-    --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100);
-    --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
-    --system-color-wheel-border-color: var(--spectrum-transparent-black-200);
-    --system-combobox-border-color-default: var(--spectrum-gray-500);
-    --system-combobox-border-color-hover: var(--spectrum-gray-600);
-    --system-combobox-border-color-focus: var(--spectrum-gray-500);
-    --system-combobox-border-color-focus-hover: var(--spectrum-gray-600);
-    --system-combobox-border-color-key-focus: var(--spectrum-gray-600);
-    --system-combobox-readonly-input-border-color: var(--spectrum-gray-500);
-    --system-combobox-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-combobox-border-color-disabled: transparent;
-    --system-dialog-fullscreen-header-text-size: 28px;
-    --system-dialog-min-inline-size: 288px;
-    --system-dialog-confirm-small-width: 400px;
-    --system-dialog-confirm-medium-width: 480px;
-    --system-dialog-confirm-large-width: 640px;
-    --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
-    --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
-    --system-dialog-confirm-description-text-color: var(--spectrum-gray-800);
-    --system-dialog-confirm-title-text-color: var(--spectrum-gray-900);
-    --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100);
-    --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100);
-    --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-    --system-dialog-confirm-description-padding: var(--spectrum-spacing-50);
-    --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1);
-    --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
-    --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
-    --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
-    --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
-    --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));
-    --system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
-    --system-divider-background-color: var(--spectrum-gray-300);
-    --system-divider-background-color-static-white: var(--spectrum-transparent-white-300);
-    --system-divider-background-color-static-black: var(--spectrum-transparent-black-300);
-    --system-drop-zone-border-color: var(--spectrum-gray-300);
-    --system-field-group-margin: var(--spectrum-spacing-300);
-    --system-field-group-readonly-delimiter: ",";
-    --system-infield-button-border-width: var(--spectrum-border-width-100);
-    --system-infield-button-border-color: inherit;
-    --system-infield-button-border-radius: var(--spectrum-corner-radius-100);
-    --system-infield-button-border-radius-reset: 0;
-    --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset);
-    --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset);
-    --system-infield-button-background-color: var(--spectrum-gray-75);
-    --system-infield-button-background-color-hover: var(--spectrum-gray-200);
-    --system-infield-button-background-color-down: var(--spectrum-gray-300);
-    --system-infield-button-background-color-key-focus: var(--spectrum-gray-200);
-    --system-infield-button-disabled-border-color: var(--spectrum-gray-200);
-    --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
-    --system-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
-    --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
-    --system-menu-item-corner-radius: 0;
-    --system-menu-item-focus-indicator-shadow: inset;
-    --system-menu-item-focus-indicator-offset: 0;
-    --system-menu-item-spacing-multiplier: 0;
-    --system-menu-item-focus-indicator-outline-style: none;
-    --system-meter-min-width: var(--spectrum-meter-minimum-width);
-    --system-meter-max-width: var(--spectrum-meter-maximum-width);
-    --system-meter-inline-size: var(--spectrum-progressbar-size-2500);
-    --system-meter-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-meter-fill-color-positive: var(--spectrum-positive-visual-color);
-    --system-meter-fill-color-notice: var(--spectrum-notice-visual-color);
-    --system-meter-fill-color-negative: var(--spectrum-negative-visual-color);
-    --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small);
-    --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400);
-    --system-meter-size-s-font-size: var(--spectrum-font-size-75);
-    --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-meter-thickness: var(--spectrum-meter-thickness-large);
-    --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large);
-    --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500);
-    --system-meter-font-size: var(--spectrum-font-size-100);
-    --system-meter-size-l-font-size: var(--spectrum-font-size-100);
-    --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-modal-background-color: var(--spectrum-gray-100);
-    --system-picker-background-color-default: var(--spectrum-gray-75);
-    --system-picker-background-color-default-open: var(--spectrum-gray-200);
-    --system-picker-background-color-hover: var(--spectrum-gray-200);
-    --system-picker-background-color-hover-open: var(--spectrum-gray-200);
-    --system-picker-background-color-active: var(--spectrum-gray-300);
-    --system-picker-background-color-key-focus: var(--spectrum-gray-200);
-    --system-picker-border-color-default: var(--spectrum-gray-500);
-    --system-picker-border-color-default-open: var(--spectrum-gray-500);
-    --system-picker-border-color-hover: var(--spectrum-gray-600);
-    --system-picker-border-color-hover-open: var(--spectrum-gray-600);
-    --system-picker-border-color-active: var(--spectrum-gray-700);
-    --system-picker-border-color-key-focus: var(--spectrum-gray-600);
-    --system-picker-border-color-disabled: transparent;
-    --system-picker-border-width: var(--spectrum-border-width-100);
-    --system-picker-button-background-color: var(--spectrum-gray-75);
-    --system-picker-button-background-color-hover: var(--spectrum-gray-200);
-    --system-picker-button-background-color-down: var(--spectrum-gray-300);
-    --system-picker-button-background-color-key-focus: var(--spectrum-gray-200);
-    --system-picker-button-border-color: inherit;
-    --system-picker-button-border-radius: var(--spectrum-corner-radius-100);
-    --system-picker-button-border-radius-rounded-sided: 0;
-    --system-picker-button-border-radius-sided: 0;
-    --system-picker-button-border-width: var(--spectrum-border-width-100);
-    --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-    --system-popover-border-width: var(--spectrum-border-width-100);
-    --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
-    --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
-    --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100);
-    --system-progress-bar-fill-size-indeterminate: 70%;
-    --system-progress-bar-size-2400: 192px;
-    --system-progress-bar-size-2500: 200px;
-    --system-progress-bar-size-2800: 224px;
-    --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width);
-    --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width);
-    --system-progress-bar-line-height: var(--spectrum-line-height-100);
-    --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75);
-    --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200);
-    --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default);
-    --system-progress-bar-track-color: var(--spectrum-gray-300);
-    --system-progress-bar-fill-color: var(--spectrum-accent-color-900);
-    --system-progress-bar-label-and-value-white: var(--spectrum-white);
-    --system-progress-bar-track-color-white: var(--spectrum-transparent-white-300);
-    --system-progress-bar-fill-color-white: var(--spectrum-white);
-    --system-progress-bar-size-default: var(--system-progress-bar-size-2400);
-    --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400);
-    --system-progress-bar-font-size: var(--spectrum-font-size-75);
-    --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75);
-    --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large);
-    --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large);
-    --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400);
-    --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75);
-    --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small);
-    --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500);
-    --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100);
-    --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large);
-    --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800);
-    --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200);
-    --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large);
-    --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
-    --system-progress-circle-track-border-color: var(--spectrum-gray-300);
-    --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
-    --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
-    --system-radio-button-border-color-default: var(--spectrum-gray-600);
-    --system-radio-button-border-color-hover: var(--spectrum-gray-700);
-    --system-radio-button-border-color-down: var(--spectrum-gray-800);
-    --system-radio-button-border-color-focus: var(--spectrum-gray-700);
-    --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
-    --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
-    --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
-    --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-    --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --system-radio-disabled-content-color: var(--spectrum-disabled-content-color);
-    --system-radio-disabled-border-color: var(--spectrum-disabled-content-color);
-    --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
-    --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
-    --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
-    --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
-    --system-radio-border-width: var(--spectrum-border-width-200);
-    --system-radio-button-background-color: var(--spectrum-gray-50);
-    --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
-    --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
-    --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
-    --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
-    --system-radio-line-height: var(--spectrum-line-height-100);
-    --system-radio-animation-duration: var(--spectrum-animation-duration-100);
-    --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-radio-height: var(--spectrum-component-height-100);
-    --system-radio-size-m-height: var(--spectrum-component-height-100);
-    --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
-    --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium);
-    --system-radio-text-to-control: var(--spectrum-text-to-control-100);
-    --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100);
-    --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
-    --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100);
-    --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-    --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-    --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
-    --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
-    --system-radio-font-size: var(--spectrum-font-size-100);
-    --system-radio-size-m-font-size: var(--spectrum-font-size-100);
-    --system-radio-size-s-height: var(--spectrum-component-height-75);
-    --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small);
-    --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75);
-    --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-    --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
-    --system-radio-size-s-font-size: var(--spectrum-font-size-75);
-    --system-radio-size-l-height: var(--spectrum-component-height-200);
-    --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large);
-    --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200);
-    --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200);
-    --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
-    --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
-    --system-radio-size-l-font-size: var(--spectrum-font-size-200);
-    --system-radio-size-xl-height: var(--spectrum-component-height-300);
-    --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
-    --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300);
-    --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300);
-    --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
-    --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
-    --system-radio-size-xl-font-size: var(--spectrum-font-size-300);
-    --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900);
-    --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
-    --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100);
-    --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
-    --system-search-border-color-default: var(--spectrum-gray-500);
-    --system-search-border-color-hover: var(--spectrum-gray-600);
-    --system-search-border-color-focus: var(--spectrum-gray-800);
-    --system-search-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-search-border-color-key-focus: var(--spectrum-gray-900);
-    --system-search-background-color: var(--spectrum-gray-50);
-    --system-search-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-search-border-color-disabled: var(--spectrum-disabled-background-color);
-    --system-search-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-size-m-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
-    --system-search-size-m-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
-    --system-search-size-s-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
-    --system-search-size-l-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
-    --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100);
-    --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
-    --system-search-quiet-background-color-disabled: transparent;
-    --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color);
-    --system-side-nav-background-hover: var(--spectrum-gray-200);
-    --system-side-nav-item-background-down: var(--spectrum-gray-300);
-    --system-side-nav-background-key-focus: var(--spectrum-gray-200);
-    --system-side-nav-item-background-default-selected: var(--spectrum-gray-200);
-    --system-side-nav-background-hover-selected: var(--spectrum-gray-300);
-    --system-side-nav-item-background-down-selected: var(--spectrum-gray-300);
-    --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200);
-    --system-slider-track-color: var(--spectrum-gray-300);
-    --system-slider-track-fill-color: var(--spectrum-gray-700);
-    --system-slider-ramp-track-color: var(--spectrum-gray-400);
-    --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200);
-    --system-slider-handle-background-color: transparent;
-    --system-slider-handle-background-color-disabled: transparent;
-    --system-slider-ramp-handle-background-color: var(--spectrum-gray-100);
-    --system-slider-ticks-handle-background-color: var(--spectrum-gray-100);
-    --system-slider-handle-border-color: var(--spectrum-gray-700);
-    --system-slider-handle-disabled-background-color: var(--spectrum-gray-100);
-    --system-slider-tick-mark-color: var(--spectrum-gray-300);
-    --system-slider-handle-border-color-hover: var(--spectrum-gray-800);
-    --system-slider-handle-border-color-down: var(--spectrum-gray-800);
-    --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
-    --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
-    --system-slider-track-corner-radius: var(--spectrum-corner-radius-75);
-    --system-slider-handle-border-radius: var(--spectrum-corner-radius-200);
-    --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-200);
-    --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200);
-    --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
-    --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
-    --system-split-view-background-color: var(--spectrum-gray-100);
-    --system-split-view-handle-background-color: var(--spectrum-gray-300);
-    --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75);
-    --system-stepper-border-width: var(--spectrum-border-width-100);
-    --system-stepper-border-color-default: var(--spectrum-gray-500);
-    --system-stepper-border-color-hover: var(--spectrum-gray-600);
-    --system-stepper-border-color-focus: var(--spectrum-gray-800);
-    --system-stepper-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-800);
-    --system-stepper-buttons-border-style: none;
-    --system-stepper-buttons-border-width: 0;
-    --system-stepper-buttons-border-color: var(--spectrum-gray-500);
-    --system-stepper-buttons-background-color: var(--spectrum-gray-50);
-    --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
-    --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
-    --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-800);
-    --system-stepper-button-border-width: var(--spectrum-border-width-100);
-    --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
-    --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
-    --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
-    --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
-    --system-stepper-border-color-disabled: transparent;
-    --system-stepper-button-border-width-disabled: var(--spectrum-border-width-100);
-    --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-100);
-    --system-stepper-quiet-buttons-border-style: none;
-    --system-stepper-quiet-button-edge-to-fill: 0;
-    --system-swatch-border-radius: var(--spectrum-corner-radius-100);
-    --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200);
-    --system-swatch-border-thickness: var(--spectrum-border-width-100);
-    --system-swatch-border-thickness-selected: var(--spectrum-border-width-200);
-    --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-    --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-swatch-border-color-opacity: 0.51;
-    --system-swatch-border-color-light-opacity: 0.2;
-    --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-opacity));
-    --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity));
-    --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity));
-    --system-swatch-border-color-selected: var(--spectrum-gray-900);
-    --system-swatch-inner-border-color-selected: var(--spectrum-gray-50);
-    --system-swatch-disabled-icon-color: var(--spectrum-gray-50);
-    --system-swatch-dash-icon-color: var(--spectrum-gray-800);
-    --system-swatch-slash-icon-color: var(--spectrum-red-900);
-    --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
-    --system-swatch-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-size-m-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
-    --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
-    --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small);
-    --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50);
-    --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small);
-    --system-swatch-size-s-size: var(--spectrum-swatch-size-small);
-    --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
-    --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
-    --system-swatch-size-l-size: var(--spectrum-swatch-size-large);
-    --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200);
-    --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large);
-    --system-swatch-group-spacing-compact: var(--spectrum-spacing-50);
-    --system-swatch-group-spacing-regular: var(--spectrum-spacing-75);
-    --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100);
-    --system-switch-handle-border-color-default: var(--spectrum-gray-600);
-    --system-switch-handle-border-color-hover: var(--spectrum-gray-700);
-    --system-switch-handle-border-color-down: var(--spectrum-gray-800);
-    --system-switch-handle-border-color-focus: var(--spectrum-gray-700);
-    --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700);
-    --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800);
-    --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
-    --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800);
-    --system-switch-background-color: var(--spectrum-gray-300);
-    --system-switch-background-color-disabled: var(--spectrum-gray-300);
-    --system-switch-handle-background-color: var(--spectrum-gray-75);
-    --system-table-header-background-color: var(--spectrum-transparent-white-100);
-    --system-table-border-color: var(--spectrum-gray-300);
-    --system-table-divider-color: var(--spectrum-gray-300);
-    --system-table-row-background-color: var(--spectrum-gray-50);
-    --system-table-summary-row-background-color: var(--spectrum-gray-200);
-    --system-table-section-header-background-color: var(--spectrum-gray-200);
-    --system-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --system-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-down);
-    --system-table-quiet-header-background-color: var(--spectrum-transparent-white-100);
-    --system-table-quiet-row-background-color: var(--spectrum-transparent-white-100);
-    --system-tabs-font-weight: var(--spectrum-regular-font-weight);
-    --system-tabs-divider-background-color: var(--spectrum-gray-300);
-    --system-tag-background-color: var(--spectrum-gray-75);
-    --system-tag-background-color-hover: var(--spectrum-gray-75);
-    --system-tag-background-color-active: var(--spectrum-gray-200);
-    --system-tag-background-color-focus: var(--spectrum-gray-75);
-    --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
-    --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
-    --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
-    --system-tag-border-color: var(--spectrum-gray-700);
-    --system-tag-border-color-hover: var(--spectrum-gray-800);
-    --system-tag-border-color-active: var(--spectrum-gray-900);
-    --system-tag-border-color-focus: var(--spectrum-gray-800);
-    --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
-    --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
-    --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
-    --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-    --system-tag-content-color-selected: var(--spectrum-gray-50);
-    --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
-    --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
-    --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
-    --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-    --system-tag-border-color-disabled: transparent;
-    --system-tag-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
-    --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
-    --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
-    --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
-    --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
-    --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
-    --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
-    --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
-    --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
-    --system-textfield-background-color: var(--spectrum-gray-50);
-    --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
-    --system-textfield-border-color: var(--spectrum-gray-500);
-    --system-textfield-border-color-hover: var(--spectrum-gray-600);
-    --system-textfield-border-color-focus: var(--spectrum-gray-800);
-    --system-textfield-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
-    --system-textfield-border-color-disabled: var(--spectrum-gray-200);
-    --system-textfield-border-width: var(--spectrum-border-width-100);
-    --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
-    --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small);
-    --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large);
-    --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large);
-    --system-textfield-quiet-border-color-disabled: var(--spectrum-gray-300);
-    --system-thumbnail-border-radius: var(--spectrum-corner-radius-75);
-    --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-    --system-toast-divider-color: var(--spectrum-transparent-white-300);
-    --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
-}
diff --git a/tools/styles/typography.css b/tools/styles/typography.css
deleted file mode 100644
index 22270fbe70b..00000000000
--- a/tools/styles/typography.css
+++ /dev/null
@@ -1,783 +0,0 @@
-.spectrum-Typography {
-    font-family: var(--spectrum-font-family);
-    font-style: var(--spectrum-font-style);
-    font-size: var(--spectrum-font-size);
-}
-
-.spectrum-Typography:lang(ar) {
-    font-family: var(--spectrum-font-family-ar);
-}
-
-.spectrum-Typography:lang(he) {
-    font-family: var(--spectrum-font-family-he);
-}
-
-.spectrum-Typography .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-Typography .spectrum-Body {
-    --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
-}
-
-.spectrum-Typography .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));
-}
-
-.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);
-}
-
-.spectrum-Heading--sizeXXS {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xxs);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs);
-}
-
-.spectrum-Heading--sizeXS {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xs);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs);
-}
-
-.spectrum-Heading--sizeS {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-s);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s);
-}
-
-.spectrum-Heading--sizeL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-l);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l);
-}
-
-.spectrum-Heading--sizeXL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xl);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl);
-}
-
-.spectrum-Heading--sizeXXL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xxl);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl);
-}
-
-.spectrum-Heading--sizeXXXL {
-    --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl);
-    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl);
-}
-
-.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: 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));
-}
-
-.spectrum-Heading .spectrum-Heading-strong,
-.spectrum-Heading strong {
-    font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style));
-    font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight));
-}
-
-.spectrum-Heading .spectrum-Heading-emphasized,
-.spectrum-Heading em {
-    font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight));
-}
-
-.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading em strong,
-.spectrum-Heading strong em {
-    font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading:lang(ja),
-.spectrum-Heading:lang(ko),
-.spectrum-Heading:lang(zh) {
-    font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family));
-    font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style));
-    font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight));
-    font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size));
-    line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height));
-    letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing));
-}
-
-.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ja) em,
-.spectrum-Heading:lang(ko) .spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ko) em,
-.spectrum-Heading:lang(zh) .spectrum-Heading-emphasized,
-.spectrum-Heading:lang(zh) em {
-    font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight));
-}
-
-.spectrum-Heading:lang(ja) .spectrum-Heading-strong,
-.spectrum-Heading:lang(ja) strong,
-.spectrum-Heading:lang(ko) .spectrum-Heading-strong,
-.spectrum-Heading:lang(ko) strong,
-.spectrum-Heading:lang(zh) .spectrum-Heading-strong,
-.spectrum-Heading:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style));
-    font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight));
-}
-
-.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ja) em strong,
-.spectrum-Heading:lang(ja) strong em,
-.spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading:lang(ko) em strong,
-.spectrum-Heading:lang(ko) strong em,
-.spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading:lang(zh) em strong,
-.spectrum-Heading:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy {
-    font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight));
-}
-
-.spectrum-Heading--heavy .spectrum-Heading-strong,
-.spectrum-Heading--heavy strong {
-    font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight));
-}
-
-.spectrum-Heading--heavy .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy em {
-    font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy em strong,
-.spectrum-Heading--heavy strong em {
-    font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja),
-.spectrum-Heading--heavy:lang(ko),
-.spectrum-Heading--heavy:lang(zh) {
-    font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ja) em,
-.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ko) em,
-.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(zh) em {
-    font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong,
-.spectrum-Heading--heavy:lang(ja) strong,
-.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong,
-.spectrum-Heading--heavy:lang(ko) strong,
-.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong,
-.spectrum-Heading--heavy:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight));
-}
-
-.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ja) em strong,
-.spectrum-Heading--heavy:lang(ja) strong em,
-.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(ko) em strong,
-.spectrum-Heading--heavy:lang(ko) strong em,
-.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--heavy:lang(zh) em strong,
-.spectrum-Heading--heavy:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--light {
-    font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight));
-}
-
-.spectrum-Heading--light .spectrum-Heading-emphasized,
-.spectrum-Heading--light em {
-    font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight));
-}
-
-.spectrum-Heading--light .spectrum-Heading-strong,
-.spectrum-Heading--light strong {
-    font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight));
-}
-
-.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light em strong,
-.spectrum-Heading--light strong em {
-    font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja),
-.spectrum-Heading--light:lang(ko),
-.spectrum-Heading--light:lang(zh) {
-    font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style));
-    font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong,
-.spectrum-Heading--light:lang(ja) strong,
-.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong,
-.spectrum-Heading--light:lang(ko) strong,
-.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong,
-.spectrum-Heading--light:lang(zh) strong {
-    font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style));
-    font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ja) em,
-.spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ko) em,
-.spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(zh) em {
-    font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight));
-}
-
-.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ja) em strong,
-.spectrum-Heading--light:lang(ja) strong em,
-.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(ko) em strong,
-.spectrum-Heading--light:lang(ko) strong em,
-.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--light:lang(zh) em strong,
-.spectrum-Heading--light:lang(zh) strong em {
-    font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif {
-    font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family));
-    font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style));
-    font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight));
-}
-
-.spectrum-Heading--serif .spectrum-Heading-emphasized,
-.spectrum-Heading--serif em {
-    font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif .spectrum-Heading-strong,
-.spectrum-Heading--serif strong {
-    font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style));
-    font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight));
-}
-
-.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--serif em strong,
-.spectrum-Heading--serif strong em {
-    font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--heavy {
-    font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style));
-    font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong,
-.spectrum-Heading--serif.spectrum-Heading--heavy strong {
-    font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style));
-    font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized,
-.spectrum-Heading--serif.spectrum-Heading--heavy em {
-    font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--serif.spectrum-Heading--heavy em strong,
-.spectrum-Heading--serif.spectrum-Heading--heavy strong em {
-    font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--light {
-    font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style));
-    font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized,
-.spectrum-Heading--serif.spectrum-Heading--light em {
-    font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong,
-.spectrum-Heading--serif.spectrum-Heading--light strong {
-    font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style));
-    font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight));
-}
-
-.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized,
-.spectrum-Heading--serif.spectrum-Heading--light em strong,
-.spectrum-Heading--serif.spectrum-Heading--light strong em {
-    font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Body,
-.spectrum-Body--sizeM {
-    --spectrum-body-font-size: var(--spectrum-body-size-m);
-}
-
-.spectrum-Body--sizeXS {
-    --spectrum-body-font-size: var(--spectrum-body-size-xs);
-}
-
-.spectrum-Body--sizeS {
-    --spectrum-body-font-size: var(--spectrum-body-size-s);
-}
-
-.spectrum-Body--sizeL {
-    --spectrum-body-font-size: var(--spectrum-body-size-l);
-}
-
-.spectrum-Body--sizeXL {
-    --spectrum-body-font-size: var(--spectrum-body-size-xl);
-}
-
-.spectrum-Body--sizeXXL {
-    --spectrum-body-font-size: var(--spectrum-body-size-xxl);
-}
-
-.spectrum-Body--sizeXXXL {
-    --spectrum-body-font-size: var(--spectrum-body-size-xxxl);
-}
-
-.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)));
-    line-height: var(--mod-body-line-height, var(--spectrum-body-line-height));
-    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)));
-}
-
-.spectrum-Body .spectrum-Body-strong,
-.spectrum-Body strong {
-    font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style));
-    font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight));
-}
-
-.spectrum-Body .spectrum-Body-emphasized,
-.spectrum-Body em {
-    font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style));
-    font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight));
-}
-
-.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body em strong,
-.spectrum-Body strong em {
-    font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Body:lang(ja),
-.spectrum-Body:lang(ko),
-.spectrum-Body:lang(zh) {
-    font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family));
-    font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style));
-    font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight));
-    line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height));
-    letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing));
-}
-
-.spectrum-Body:lang(ja) .spectrum-Body-strong,
-.spectrum-Body:lang(ja) strong,
-.spectrum-Body:lang(ko) .spectrum-Body-strong,
-.spectrum-Body:lang(ko) strong,
-.spectrum-Body:lang(zh) .spectrum-Body-strong,
-.spectrum-Body:lang(zh) strong {
-    font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style));
-    font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight));
-}
-
-.spectrum-Body:lang(ja) .spectrum-Body-emphasized,
-.spectrum-Body:lang(ja) em,
-.spectrum-Body:lang(ko) .spectrum-Body-emphasized,
-.spectrum-Body:lang(ko) em,
-.spectrum-Body:lang(zh) .spectrum-Body-emphasized,
-.spectrum-Body:lang(zh) em {
-    font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style));
-    font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight));
-}
-
-.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body:lang(ja) em strong,
-.spectrum-Body:lang(ja) strong em,
-.spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body:lang(ko) em strong,
-.spectrum-Body:lang(ko) strong em,
-.spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body:lang(zh) em strong,
-.spectrum-Body:lang(zh) strong em {
-    font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight));
-}
-
-.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));
-    font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style));
-}
-
-.spectrum-Body--serif .spectrum-Body-strong,
-.spectrum-Body--serif strong {
-    font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style));
-    font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight));
-}
-
-.spectrum-Body--serif .spectrum-Body-emphasized,
-.spectrum-Body--serif em {
-    font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style));
-    font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight));
-}
-
-.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized,
-.spectrum-Body--serif em strong,
-.spectrum-Body--serif strong em {
-    font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail,
-.spectrum-Detail--sizeM {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-m);
-}
-
-.spectrum-Detail--sizeS {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-s);
-}
-
-.spectrum-Detail--sizeL {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-l);
-}
-
-.spectrum-Detail--sizeXL {
-    --spectrum-detail-font-size: var(--spectrum-detail-size-xl);
-}
-
-.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));
-    color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color)));
-    line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height));
-    letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing));
-    text-transform: uppercase;
-    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));
-}
-
-.spectrum-Detail .spectrum-Detail-strong,
-.spectrum-Detail strong {
-    font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style));
-    font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight));
-}
-
-.spectrum-Detail .spectrum-Detail-emphasized,
-.spectrum-Detail em {
-    font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight));
-}
-
-.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail em strong,
-.spectrum-Detail strong em {
-    font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail:lang(ja),
-.spectrum-Detail:lang(ko),
-.spectrum-Detail:lang(zh) {
-    font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family));
-    font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style));
-    font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight));
-    line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height));
-}
-
-.spectrum-Detail:lang(ja) .spectrum-Detail-strong,
-.spectrum-Detail:lang(ja) strong,
-.spectrum-Detail:lang(ko) .spectrum-Detail-strong,
-.spectrum-Detail:lang(ko) strong,
-.spectrum-Detail:lang(zh) .spectrum-Detail-strong,
-.spectrum-Detail:lang(zh) strong {
-    font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style));
-    font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight));
-}
-
-.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ja) em,
-.spectrum-Detail:lang(ko) .spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ko) em,
-.spectrum-Detail:lang(zh) .spectrum-Detail-emphasized,
-.spectrum-Detail:lang(zh) em {
-    font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight));
-}
-
-.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ja) em strong,
-.spectrum-Detail:lang(ja) strong em,
-.spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail:lang(ko) em strong,
-.spectrum-Detail:lang(ko) strong em,
-.spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail:lang(zh) em strong,
-.spectrum-Detail:lang(zh) strong em {
-    font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight));
-}
-
-.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));
-    font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight));
-}
-
-.spectrum-Detail--serif .spectrum-Detail-strong,
-.spectrum-Detail--serif strong {
-    font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style));
-    font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight));
-}
-
-.spectrum-Detail--serif .spectrum-Detail-emphasized,
-.spectrum-Detail--serif em {
-    font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight));
-}
-
-.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail--serif em strong,
-.spectrum-Detail--serif strong em {
-    font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight));
-}
-
-.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));
-}
-
-.spectrum-Detail--light .spectrum-Detail-strong,
-.spectrum-Detail--light strong {
-    font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight));
-}
-
-.spectrum-Detail--light .spectrum-Detail-emphasized,
-.spectrum-Detail--light em {
-    font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight));
-}
-
-.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized,
-.spectrum-Detail--light em strong,
-.spectrum-Detail--light strong em {
-    font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja),
-.spectrum-Detail--light:lang(ko),
-.spectrum-Detail--light:lang(zh) {
-    font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style));
-    font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong,
-.spectrum-Detail--light:lang(ja) strong,
-.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong,
-.spectrum-Detail--light:lang(ko) strong,
-.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong,
-.spectrum-Detail--light:lang(zh) strong {
-    font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style));
-    font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(ja) em,
-.spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(ko) em,
-.spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(zh) em {
-    font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight));
-}
-
-.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized,
-.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized {
-    font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight));
-}
-
-.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));
-}
-
-.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong,
-.spectrum-Detail--serif.spectrum-Detail--light strong {
-    font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style));
-    font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight));
-}
-
-.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized,
-.spectrum-Detail--serif.spectrum-Detail--light em {
-    font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight));
-}
-
-.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized,
-.spectrum-Detail--serif.spectrum-Detail--light em strong,
-.spectrum-Detail--serif.spectrum-Detail--light strong em {
-    font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style));
-    font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight));
-}
-
-.spectrum-Code,
-.spectrum-Code--sizeM {
-    --spectrum-code-font-size: var(--spectrum-code-size-m);
-}
-
-.spectrum-Code--sizeXS {
-    --spectrum-code-font-size: var(--spectrum-code-size-xs);
-}
-
-.spectrum-Code--sizeS {
-    --spectrum-code-font-size: var(--spectrum-code-size-s);
-}
-
-.spectrum-Code--sizeL {
-    --spectrum-code-font-size: var(--spectrum-code-size-l);
-}
-
-.spectrum-Code--sizeXL {
-    --spectrum-code-font-size: var(--spectrum-code-size-xl);
-}
-
-.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));
-    line-height: var(--mod-code-line-height, var(--spectrum-code-line-height));
-    color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color)));
-    margin-block-start: var(--mod-code-margin-start, 0);
-    margin-block-end: var(--mod-code-margin-end, 0);
-}
-
-.spectrum-Code .spectrum-Code-strong,
-.spectrum-Code strong {
-    font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style));
-    font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight));
-}
-
-.spectrum-Code .spectrum-Code-emphasized,
-.spectrum-Code em {
-    font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style));
-    font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight));
-}
-
-.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code em strong,
-.spectrum-Code strong em {
-    font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style));
-    font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight));
-}
-
-.spectrum-Code:lang(ja),
-.spectrum-Code:lang(ko),
-.spectrum-Code:lang(zh) {
-    font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family));
-    font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style));
-    font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight));
-    line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height));
-    letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing));
-}
-
-.spectrum-Code:lang(ja) .spectrum-Code-strong,
-.spectrum-Code:lang(ja) strong,
-.spectrum-Code:lang(ko) .spectrum-Code-strong,
-.spectrum-Code:lang(ko) strong,
-.spectrum-Code:lang(zh) .spectrum-Code-strong,
-.spectrum-Code:lang(zh) strong {
-    font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style));
-    font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight));
-}
-
-.spectrum-Code:lang(ja) .spectrum-Code-emphasized,
-.spectrum-Code:lang(ja) em,
-.spectrum-Code:lang(ko) .spectrum-Code-emphasized,
-.spectrum-Code:lang(ko) em,
-.spectrum-Code:lang(zh) .spectrum-Code-emphasized,
-.spectrum-Code:lang(zh) em {
-    font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style));
-    font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight));
-}
-
-.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code:lang(ja) em strong,
-.spectrum-Code:lang(ja) strong em,
-.spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code:lang(ko) em strong,
-.spectrum-Code:lang(ko) strong em,
-.spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized,
-.spectrum-Code:lang(zh) em strong,
-.spectrum-Code:lang(zh) strong em {
-    font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style));
-    font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight));
-}
diff --git a/tools/theme/README.md b/tools/theme/README.md
index c4d0ca9cbe8..bd7b9dfbdcd 100644
--- a/tools/theme/README.md
+++ b/tools/theme/README.md
@@ -18,42 +18,34 @@ import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/themes.js';
 ```
 
-The above import statements do two things: the first will get you started using the `<sp-theme>` wrapper element, and the second includes all four (4) color options (`lightest`, `light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`) for the Spectrum Classic theme. Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empowers you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See the "Advanced usage" section below for instructions on tuning the performance of an application that leverages this package.
+The above import statements do two things: the first will get you started using the `<sp-theme>` wrapper element, and the second includes all four (4) color options (`light` and `dark`) and both (2) scale options (`medium` and `large`). Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empowers you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See the "Advanced usage" section below for instructions on tuning the performance of an application that leverages this package.
 
 Below are more ways to import the different scale and color options individually, in case you didn't want to import all of them as we did above. You'll use these statements in combination with the side effectful registration import statement `import '@spectrum-web-components/theme/sp-theme.js'`.
 
-The various Classic themes can be imported en masse, as in the example above:
+The various themes can be imported en masse, as in the example above:
 
-```
+```ts
 import '@spectrum-web-components/theme/src/themes.js';
 ```
 
 The various Spectrum Express themes can also be imported en masse:
 
-```
+```ts
 import '@spectrum-web-components/theme/src/express/themes.js';
 ```
 
 Or you can import the themes and scales individually:
 
-```
-import '@spectrum-web-components/theme/theme-darkest.js';
+```ts
 import '@spectrum-web-components/theme/theme-dark.js';
 import '@spectrum-web-components/theme/theme-light.js';
-import '@spectrum-web-components/theme/theme-lightest.js';
 import '@spectrum-web-components/theme/scale-medium.js';
 import '@spectrum-web-components/theme/scale-large.js';
-import '@spectrum-web-components/theme/express/theme-darkest.js';
-import '@spectrum-web-components/theme/express/theme-dark.js';
-import '@spectrum-web-components/theme/express/theme-light.js';
-import '@spectrum-web-components/theme/express/theme-lightest.js';
-import '@spectrum-web-components/theme/express/scale-medium.js';
-import '@spectrum-web-components/theme/express/scale-large.js';
 ```
 
 When looking to leverage the `Theme` base class as a type and/or for extension purposes, do so via:
 
-```
+```ts
 import { Theme } from '@spectrum-web-components/theme';
 ```
 
@@ -104,7 +96,6 @@ An `<sp-theme>` element expects a value for each of its `color` and `scale` attr
 
 ```html
 <sp-theme
-    system="spectrum"
     color="light"
     scale="medium"
     style="background-color: var(--spectrum-gray-100)"
@@ -131,7 +122,7 @@ Once you've moved beyond the prototype phase of an application, it is likely tha
  *      scale="large"
  * >
  **/
-import '@spectrum-web-components/theme/theme-darkest.js';
+import '@spectrum-web-components/theme/theme-dark.js';
 import '@spectrum-web-components/theme/scale-large.js';
 
 import '@spectrum-web-components/theme/sp-theme.js';
@@ -144,13 +135,12 @@ import '@spectrum-web-components/theme/sp-theme.js';
  * Power a site using
  *
  * <sp-theme
- *      system="express"
  *      color="light"
  *      scale="medium"
  * >
  **/
-import '@spectrum-web-components/theme/express/theme-light.js';
-import '@spectrum-web-components/theme/express/scale-medium.js';
+import '@spectrum-web-components/theme/theme-light.js';
+import '@spectrum-web-components/theme/scale-medium.js';
 
 import '@spectrum-web-components/theme/sp-theme.js';
 ```
@@ -190,7 +180,7 @@ When bundling your application, be sure to consult the documentation of your bun
         margin-top: 2em;
     }
 </style>
-<sp-theme system="express" color="light" scale="medium">
+<sp-theme color="light" scale="medium">
     <hzn-app-stuff></hzn-app-stuff>
 </sp-theme>
 
@@ -214,7 +204,7 @@ When bundling your application, be sure to consult the documentation of your bun
         margin-top: 2em;
     }
 </style>
-<sp-theme system="express" color="dark" scale="large">
+<sp-theme color="dark" scale="large">
     <hzn-app-stuff></hzn-app-stuff>
 </sp-theme>
 
@@ -240,7 +230,7 @@ The large scale of `<sp-theme>` will switch to using Spectrum's larger mobile [P
         margin-top: 2em;
     }
 </style>
-<sp-theme color="darkest" scale="large">
+<sp-theme color="dark" scale="large">
     <div id="example">
         <div>
             <sp-slider
@@ -330,75 +320,3 @@ previewing or editing content that will be displayed in a light theme with a rig
 ## Language Context
 
 The `<sp-theme>` element provides a language context for its descendents in the DOM. Descendents can resolve this context by dispatching an `sp-language-context` DOM event and supplying a `callback(lang: string) => void` method in the `detail` entry of the Custom Event. These callbacks will be reactively envoked when the `lang` attribute on the `<sp-theme>` element is updated. This way, you can control the resolved language in [`<sp-number-field>`](../components/number-field), [`<sp-slider>`](./components/slider), and other elements in one centralized place.
-
-## System Context (private Beta API - subject to changes)
-
-The <sp-theme> element provides a "system" context to its descendants in the DOM. This context indicates the Spectrum design system variant currently in use (e.g., 'spectrum', 'express', or 'spectrum-two').
-
-#### Consuming the System Context in Components
-
-Components can consume the system context by using the `SystemResolutionController`. This controller encapsulates the logic for resolving the system context, allowing it to be integrated into any component in few steps.
-
-#### Steps to Consume the System Context:
-
-1. Import the `SystemResolutionController` and the necessary types:
-
-```ts
-import {
-    SystemResolutionController,
-    systemResolverUpdatedSymbol,
-} from './SystemResolutionController.js';
-import type { SystemVariant } from '@spectrum-web-components/theme';
-```
-
-2. Instantiate the `SystemResolutionController`:
-
-    In your component class, create an instance of SystemResolutionController, passing `this` as the host element.
-
-```ts
-export class MyComponent extends LitElement {
-    private systemResolver = new SystemResolutionController(this);
-
-    // Rest of your component code...
-}
-```
-
-3. Respond to system context changes:
-
-    Override the `update` lifecycle method to detect changes in the system context using the `systemResolverUpdatedSymbol`.
-
-```ts
-protected update(changes: Map<PropertyKey, unknown>): void {
-  super.update(changes);
-  if (changes.has(systemResolverUpdatedSymbol)) {
-    this.handleSystemChange();
-  }
-}
-```
-
-4. Implement the handler for system changes:
-
-    Create a method that will be called whenever the system context changes. Use `this.systemResolver.system` to access the current system variant.
-
-```ts
-private handleSystemChange(): void {
-  const currentSystem: SystemVariant = this.systemResolver.system;
-  // Implement logic based on the current system variant.
-  // For example, update styles, states or re-render parts of the component.
-}
-```
-
-5. Use the system context in other parts of your component logic and/or template:
-
-    You can now use `this.systemResolver.system` anywhere in your component to adjust behavior or rendering based on the system variant.
-
-```ts
-render() {
-  return html`
-    <div>
-      <!-- Use the system context in your rendering logic -->
-      Current system variant: ${this.systemResolver.system}
-    </div>
-  `;
-}
-```
diff --git a/tools/theme/core-tokens.md b/tools/theme/core-tokens.md
deleted file mode 100644
index 222923cdf05..00000000000
--- a/tools/theme/core-tokens.md
+++ /dev/null
@@ -1,108 +0,0 @@
-## Description
-
-By default, Spectrum Web Component themes support both the Spectrum Vars and Spectrum Core Tokens design token collections. This allowed for the conversion between the older Spectrum Vars ecosystem to the Core Tokens ecosystem over time. At this time, all non-deprecated SWC packages have been updated to the Core Tokens ecosystem and we are beginning the process of deprecating the Spectrum Vars values as well. The `*-core-tokens.js` files outlined below will allow you to begin migrating and building features with the eventual removal of these values in mind.
-
-### Usage
-
-[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/theme?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/theme)
-[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/theme?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/theme)
-
-```
-yarn add @spectrum-web-components/theme
-```
-
-Import the side effectful registration of `<sp-theme>` via:
-
-```js
-import '@spectrum-web-components/theme/sp-theme.js';
-```
-
-The various theme files within the Spectrum system can be imported as follows:
-
-```js
-import '@spectrum-web-components/theme/src/themes-core-tokens.js';
-```
-
-If you leverage the Express system, the same files in that context can be imported from:
-
-```js
-import '@spectrum-web-components/theme/src/express/themes-core-tokens.js';
-```
-
-### Targeted imports
-
-You can import specific color and scale data individually:
-
-```js
-import '@spectrum-web-components/theme/theme-darkest-core-tokens.js';
-import '@spectrum-web-components/theme/theme-dark-core-tokens.js';
-import '@spectrum-web-components/theme/theme-light-core-tokens.js';
-import '@spectrum-web-components/theme/theme-lightest-core-tokens.js';
-import '@spectrum-web-components/theme/scale-medium-core-tokens.js';
-import '@spectrum-web-components/theme/scale-large-core-tokens.js';
-import '@spectrum-web-components/theme/express/theme-darkest-core-tokens.js';
-import '@spectrum-web-components/theme/express/theme-dark-core-tokens.js';
-import '@spectrum-web-components/theme/express/theme-light-core-tokens.js';
-import '@spectrum-web-components/theme/express/theme-lightest-core-tokens.js';
-import '@spectrum-web-components/theme/express/scale-medium-core-tokens.js';
-import '@spectrum-web-components/theme/express/scale-large-core-tokens.js';
-```
-
-## Migrating from Spectrum Vars usage
-
-When moving to leverage Core Tokens in your application you will find that there is not always a direct descendent of the Spectrum Vars that you may have leveraged in the past. Color tokens, in particular, have a new system where their values can be converted to a rough approximation of what may have been available with Spectrum Vars. In other cases, like `--spectrum-global-dimension-size-*` values, there is no direct parallel and their migration is more complex.
-
-### Color tokens
-
-While using non-semantic colors is not a suggested pattern, in cases where you have already leveraged these, you can _generally_ convert `--spectrum-global-color-*` custom properties directly to `--spectrum-*` custom properties. Not all color families found in the Spectrum Vars are present in Core Tokens and in most cases, the scale of individual colors in a family will have changed. A conversion from a removed custom property to a Core Token might look as follows:
-
-```diff
-- border-color: var(--spectrum-global-color-seafoam-600);
-+ border-color: var(--spectrum-seafoam-900);
-```
-
-You can learn more about the available color values available as Core Tokens below:
-
-<custom-vars-viewer id="color-tokens"></custom-vars-viewer>
-
-<script type="module">
-    const varsViewer = document.querySelector('custom-vars-viewer');
-    const options = {
-        rootMargin: '20px'
-    }
-    const callback = async (entries, observer) => {
-        if (entries[0].intersectionRatio === 0) return;
-        import('@spectrum-web-components/custom-vars-viewer/custom-vars-viewer.js').then(() => {
-            const queryThemeEvent = new CustomEvent('sp-track-theme', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    callback: (color) => {
-                        varsViewer.themeColor = color.startsWith('light')
-                            ? 'light'
-                            : color;
-                    },
-                },
-                cancelable: true,
-            });
-            varsViewer.dispatchEvent(queryThemeEvent);
-        });
-        observer.disconnect();
-    }
-
-    const observer = new IntersectionObserver(callback, options);
-    observer.observe(varsViewer);
-</script>
-
-### Size tokens
-
-Values outlining size values (e.g. `--spectrum-global-dimension-size-*`) do not have direct corollaries in Core Tokens. This can specifically affect the way that content intended for delivery across both the `medium` and `large` "scale" are handled. To support migration in this area the `--swc-scale-factor` custom property has been added to support calculating the difference between delivery in these two contexts. In that way, migration of these values might look as follows:
-
-```diff
-- padding: var(--spectrum-global-dimension-size-175) var(--spectrum-global-dimension-size-250);
-+ padding: calc(var(--swc-scale-factor) * 14px) calc(var(--swc-scale-factor) * 20px);
-```
-
-In this case, the custom property `--spectrum-global-dimension-size-175` represented the value `14px` and `--spectrum-global-dimension-size-250` represented `20px` in the `medium` scale of Spectrum Var. In both cases, calculating a new value by multiplying those pixel values by the `--swc-scale-factor` custom property allows for each value to be delivered in a manner similar to how it had been previously.
-
-**NOTICE**: at the `large` scale, the `--swc-scale-factor` custom property has a fractional value. This means that depending on the value you are calculating from you may achieve a non-whole number. In these cases, the conversion will not be 100% the same as the value previously available with Spectrum Vars and can in some cases have unexpected effects on pixel precision delivery of text content.
diff --git a/tools/theme/core-tokens.ts b/tools/theme/core-tokens.ts
deleted file mode 100644
index fb57c76c91f..00000000000
--- a/tools/theme/core-tokens.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import { Theme } from './src/Theme.js';
-
-import coreStyles from './src/theme-core-tokens.css.js';
-Theme.registerThemeFragment('spectrum', 'system', coreStyles);
diff --git a/tools/theme/core.ts b/tools/theme/core.ts
index f18742586af..cc853af3002 100644
--- a/tools/theme/core.ts
+++ b/tools/theme/core.ts
@@ -14,4 +14,4 @@ import { Theme } from './src/Theme.js';
 
 import coreStyles from './src/theme.css.js';
 
-Theme.registerThemeFragment('spectrum', 'system', coreStyles);
+Theme.registerThemeFragment('core', 'core', coreStyles);
diff --git a/tools/theme/express/scale-large-core-tokens.ts b/tools/theme/express/scale-large-core-tokens.ts
deleted file mode 100644
index 28e5643bd3d..00000000000
--- a/tools/theme/express/scale-large-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import largeStyles from '../src/express/scale-large-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core-tokens.js';
-
-Theme.registerThemeFragment('large-express', 'scale', largeStyles);
diff --git a/tools/theme/express/scale-large.ts b/tools/theme/express/scale-large.ts
deleted file mode 100644
index 5b375e63385..00000000000
--- a/tools/theme/express/scale-large.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import largeStyles from '../src/express/scale-large.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core.js';
-
-Theme.registerThemeFragment('large-express', 'scale', largeStyles);
diff --git a/tools/theme/express/scale-medium-core-tokens.ts b/tools/theme/express/scale-medium-core-tokens.ts
deleted file mode 100644
index b2488a783e1..00000000000
--- a/tools/theme/express/scale-medium-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import mediumStyles from '../src/express/scale-medium-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core-tokens.js';
-
-Theme.registerThemeFragment('medium-express', 'scale', mediumStyles);
diff --git a/tools/theme/express/scale-medium.ts b/tools/theme/express/scale-medium.ts
deleted file mode 100644
index 5b451842bc9..00000000000
--- a/tools/theme/express/scale-medium.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import mediumStyles from '../src/express/scale-medium.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core.js';
-
-Theme.registerThemeFragment('medium-express', 'scale', mediumStyles);
diff --git a/tools/theme/express/theme-dark-core-tokens.ts b/tools/theme/express/theme-dark-core-tokens.ts
deleted file mode 100644
index a82cbe31559..00000000000
--- a/tools/theme/express/theme-dark-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from '../src/express/theme-dark-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core-tokens.js';
-
-Theme.registerThemeFragment('dark-express', 'color', darkStyles);
diff --git a/tools/theme/express/theme-dark.ts b/tools/theme/express/theme-dark.ts
deleted file mode 100644
index 28aa56e970c..00000000000
--- a/tools/theme/express/theme-dark.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from '../src/express/theme-dark.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core.js';
-
-Theme.registerThemeFragment('dark-express', 'color', darkStyles);
diff --git a/tools/theme/express/theme-darkest-core-tokens.ts b/tools/theme/express/theme-darkest-core-tokens.ts
deleted file mode 100644
index ee8fb084452..00000000000
--- a/tools/theme/express/theme-darkest-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from '../src/express/theme-dark-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core-tokens.js';
-
-Theme.registerThemeFragment('darkest-express', 'color', darkStyles);
diff --git a/tools/theme/express/theme-darkest.ts b/tools/theme/express/theme-darkest.ts
deleted file mode 100644
index 0a8952bb34b..00000000000
--- a/tools/theme/express/theme-darkest.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from '../src/express/theme-dark.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core.js';
-
-Theme.registerThemeFragment('darkest-express', 'color', darkStyles);
diff --git a/tools/theme/express/theme-light-core-tokens.ts b/tools/theme/express/theme-light-core-tokens.ts
deleted file mode 100644
index ac4de2c66eb..00000000000
--- a/tools/theme/express/theme-light-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from '../src/express/theme-light-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core-tokens.js';
-
-Theme.registerThemeFragment('light-express', 'color', lightStyles);
diff --git a/tools/theme/express/theme-light.ts b/tools/theme/express/theme-light.ts
deleted file mode 100644
index 1f62072c403..00000000000
--- a/tools/theme/express/theme-light.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from '../src/express/theme-light.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core.js';
-
-Theme.registerThemeFragment('light-express', 'color', lightStyles);
diff --git a/tools/theme/express/theme-lightest-core-tokens.ts b/tools/theme/express/theme-lightest-core-tokens.ts
deleted file mode 100644
index e3aca751a8d..00000000000
--- a/tools/theme/express/theme-lightest-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from '../src/express/theme-light-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core-tokens.js';
-
-Theme.registerThemeFragment('lightest-express', 'color', lightStyles);
diff --git a/tools/theme/express/theme-lightest.ts b/tools/theme/express/theme-lightest.ts
deleted file mode 100644
index ed2dbb423d6..00000000000
--- a/tools/theme/express/theme-lightest.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from '../src/express/theme-light.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/express/core.js';
-
-Theme.registerThemeFragment('lightest-express', 'color', lightStyles);
diff --git a/tools/theme/package.json b/tools/theme/package.json
index 20e85afefaf..ea355706b85 100755
--- a/tools/theme/package.json
+++ b/tools/theme/package.json
@@ -33,181 +33,17 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./src/scale-large-core-tokens.css.js": "./src/scale-large-core-tokens.css.js",
-        "./src/scale-large.css.js": "./src/scale-large.css.js",
-        "./src/scale-medium-core-tokens.css.js": "./src/scale-medium-core-tokens.css.js",
-        "./src/scale-medium.css.js": "./src/scale-medium.css.js",
-        "./src/theme-core-tokens.css.js": "./src/theme-core-tokens.css.js",
-        "./src/theme-dark-core-tokens.css.js": "./src/theme-dark-core-tokens.css.js",
-        "./src/theme-dark.css.js": "./src/theme-dark.css.js",
-        "./src/theme-darkest-core-tokens.css.js": "./src/theme-darkest-core-tokens.css.js",
-        "./src/theme-darkest.css.js": "./src/theme-darkest.css.js",
+        "./src/scale-large.css": "./src/scale-large.css",
         "./src/theme-interfaces.js": {
             "development": "./src/theme-interfaces.dev.js",
             "default": "./src/theme-interfaces.js"
         },
-        "./src/theme-light-core-tokens.css.js": "./src/theme-light-core-tokens.css.js",
-        "./src/theme-light.css.js": "./src/theme-light.css.js",
-        "./src/theme-lightest-core-tokens.css.js": "./src/theme-lightest-core-tokens.css.js",
-        "./src/theme-lightest.css.js": "./src/theme-lightest.css.js",
-        "./src/theme.css.js": "./src/theme.css.js",
-        "./src/themes-core-tokens.js": {
-            "development": "./src/themes-core-tokens.dev.js",
-            "default": "./src/themes-core-tokens.js"
-        },
+        "./src/theme.css": "./src/theme.css",
         "./src/themes.js": {
             "development": "./src/themes.dev.js",
             "default": "./src/themes.js"
         },
-        "./src/typography.css.js": "./src/typography.css.js",
-        "./express/scale-large-core-tokens.js": {
-            "development": "./express/scale-large-core-tokens.dev.js",
-            "default": "./express/scale-large-core-tokens.js"
-        },
-        "./express/scale-large.js": {
-            "development": "./express/scale-large.dev.js",
-            "default": "./express/scale-large.js"
-        },
-        "./express/scale-medium-core-tokens.js": {
-            "development": "./express/scale-medium-core-tokens.dev.js",
-            "default": "./express/scale-medium-core-tokens.js"
-        },
-        "./express/scale-medium.js": {
-            "development": "./express/scale-medium.dev.js",
-            "default": "./express/scale-medium.js"
-        },
-        "./express/theme-dark-core-tokens.js": {
-            "development": "./express/theme-dark-core-tokens.dev.js",
-            "default": "./express/theme-dark-core-tokens.js"
-        },
-        "./express/theme-dark.js": {
-            "development": "./express/theme-dark.dev.js",
-            "default": "./express/theme-dark.js"
-        },
-        "./express/theme-darkest-core-tokens.js": {
-            "development": "./express/theme-darkest-core-tokens.dev.js",
-            "default": "./express/theme-darkest-core-tokens.js"
-        },
-        "./express/theme-darkest.js": {
-            "development": "./express/theme-darkest.dev.js",
-            "default": "./express/theme-darkest.js"
-        },
-        "./express/theme-light-core-tokens.js": {
-            "development": "./express/theme-light-core-tokens.dev.js",
-            "default": "./express/theme-light-core-tokens.js"
-        },
-        "./express/theme-light.js": {
-            "development": "./express/theme-light.dev.js",
-            "default": "./express/theme-light.js"
-        },
-        "./express/theme-lightest-core-tokens.js": {
-            "development": "./express/theme-lightest-core-tokens.dev.js",
-            "default": "./express/theme-lightest-core-tokens.js"
-        },
-        "./express/theme-lightest.js": {
-            "development": "./express/theme-lightest.dev.js",
-            "default": "./express/theme-lightest.js"
-        },
-        "./spectrum-two/scale-large-core-tokens.js": {
-            "development": "./spectrum-two/scale-large-core-tokens.dev.js",
-            "default": "./spectrum-two/scale-large-core-tokens.js"
-        },
-        "./spectrum-two/scale-large.js": {
-            "development": "./spectrum-two/scale-large.dev.js",
-            "default": "./spectrum-two/scale-large.js"
-        },
-        "./spectrum-two/scale-medium-core-tokens.js": {
-            "development": "./spectrum-two/scale-medium-core-tokens.dev.js",
-            "default": "./spectrum-two/scale-medium-core-tokens.js"
-        },
-        "./spectrum-two/scale-medium.js": {
-            "development": "./spectrum-two/scale-medium.dev.js",
-            "default": "./spectrum-two/scale-medium.js"
-        },
-        "./spectrum-two/theme-dark-core-tokens.js": {
-            "development": "./spectrum-two/theme-dark-core-tokens.dev.js",
-            "default": "./spectrum-two/theme-dark-core-tokens.js"
-        },
-        "./spectrum-two/theme-dark.js": {
-            "development": "./spectrum-two/theme-dark.dev.js",
-            "default": "./spectrum-two/theme-dark.js"
-        },
-        "./spectrum-two/theme-darkest-core-tokens.js": {
-            "development": "./spectrum-two/theme-darkest-core-tokens.dev.js",
-            "default": "./spectrum-two/theme-darkest-core-tokens.js"
-        },
-        "./spectrum-two/theme-darkest.js": {
-            "development": "./spectrum-two/theme-darkest.dev.js",
-            "default": "./spectrum-two/theme-darkest.js"
-        },
-        "./spectrum-two/theme-light-core-tokens.js": {
-            "development": "./spectrum-two/theme-light-core-tokens.dev.js",
-            "default": "./spectrum-two/theme-light-core-tokens.js"
-        },
-        "./spectrum-two/theme-light.js": {
-            "development": "./spectrum-two/theme-light.dev.js",
-            "default": "./spectrum-two/theme-light.js"
-        },
-        "./spectrum-two/theme-lightest-core-tokens.js": {
-            "development": "./spectrum-two/theme-lightest-core-tokens.dev.js",
-            "default": "./spectrum-two/theme-lightest-core-tokens.js"
-        },
-        "./spectrum-two/theme-lightest.js": {
-            "development": "./spectrum-two/theme-lightest.dev.js",
-            "default": "./spectrum-two/theme-lightest.js"
-        },
-        "./src/express/core-tokens.js": {
-            "development": "./src/express/core-tokens.dev.js",
-            "default": "./src/express/core-tokens.js"
-        },
-        "./src/express/core.js": {
-            "development": "./src/express/core.dev.js",
-            "default": "./src/express/core.js"
-        },
-        "./src/express/scale-large-core-tokens.css.js": "./src/express/scale-large-core-tokens.css.js",
-        "./src/express/scale-large.css.js": "./src/express/scale-large.css.js",
-        "./src/express/scale-medium-core-tokens.css.js": "./src/express/scale-medium-core-tokens.css.js",
-        "./src/express/scale-medium.css.js": "./src/express/scale-medium.css.js",
-        "./src/express/theme-core-tokens.css.js": "./src/express/theme-core-tokens.css.js",
-        "./src/express/theme-dark-core-tokens.css.js": "./src/express/theme-dark-core-tokens.css.js",
-        "./src/express/theme-dark.css.js": "./src/express/theme-dark.css.js",
-        "./src/express/theme-light-core-tokens.css.js": "./src/express/theme-light-core-tokens.css.js",
-        "./src/express/theme-light.css.js": "./src/express/theme-light.css.js",
-        "./src/express/theme.css.js": "./src/express/theme.css.js",
-        "./src/express/themes-core-tokens.js": {
-            "development": "./src/express/themes-core-tokens.dev.js",
-            "default": "./src/express/themes-core-tokens.js"
-        },
-        "./src/express/themes.js": {
-            "development": "./src/express/themes.dev.js",
-            "default": "./src/express/themes.js"
-        },
-        "./src/spectrum-two/core-tokens.js": {
-            "development": "./src/spectrum-two/core-tokens.dev.js",
-            "default": "./src/spectrum-two/core-tokens.js"
-        },
-        "./src/spectrum-two/core.js": {
-            "development": "./src/spectrum-two/core.dev.js",
-            "default": "./src/spectrum-two/core.js"
-        },
-        "./src/spectrum-two/scale-large-core-tokens.css.js": "./src/spectrum-two/scale-large-core-tokens.css.js",
-        "./src/spectrum-two/scale-large.css.js": "./src/spectrum-two/scale-large.css.js",
-        "./src/spectrum-two/scale-medium-core-tokens.css.js": "./src/spectrum-two/scale-medium-core-tokens.css.js",
-        "./src/spectrum-two/scale-medium.css.js": "./src/spectrum-two/scale-medium.css.js",
-        "./src/spectrum-two/theme-core-tokens.css.js": "./src/spectrum-two/theme-core-tokens.css.js",
-        "./src/spectrum-two/theme-dark-core-tokens.css.js": "./src/spectrum-two/theme-dark-core-tokens.css.js",
-        "./src/spectrum-two/theme-dark.css.js": "./src/spectrum-two/theme-dark.css.js",
-        "./src/spectrum-two/theme-light-core-tokens.css.js": "./src/spectrum-two/theme-light-core-tokens.css.js",
-        "./src/spectrum-two/theme-light.css.js": "./src/spectrum-two/theme-light.css.js",
-        "./src/spectrum-two/theme.css.js": "./src/spectrum-two/theme.css.js",
-        "./src/spectrum-two/themes-core-tokens.js": {
-            "development": "./src/spectrum-two/themes-core-tokens.dev.js",
-            "default": "./src/spectrum-two/themes-core-tokens.js"
-        },
-        "./src/spectrum-two/themes.js": {
-            "development": "./src/spectrum-two/themes.dev.js",
-            "default": "./src/spectrum-two/themes.js"
-        },
+        "./src/typography.css": "./src/typography.css",
         "./core.js": {
             "development": "./core.dev.js",
             "default": "./core.js"
@@ -216,53 +52,9 @@
             "development": "./sp-theme.dev.js",
             "default": "./sp-theme.js"
         },
-        "./scale-medium.js": {
-            "development": "./scale-medium.dev.js",
-            "default": "./scale-medium.js"
-        },
-        "./scale-medium-core-tokens.js": {
-            "development": "./scale-medium-core-tokens.dev.js",
-            "default": "./scale-medium-core-tokens.js"
-        },
         "./scale-large.js": {
             "development": "./scale-large.dev.js",
             "default": "./scale-large.js"
-        },
-        "./scale-large-core-tokens.js": {
-            "development": "./scale-large-core-tokens.dev.js",
-            "default": "./scale-large-core-tokens.js"
-        },
-        "./theme-lightest.js": {
-            "development": "./theme-lightest.dev.js",
-            "default": "./theme-lightest.js"
-        },
-        "./theme-lightest-core-tokens.js": {
-            "development": "./theme-lightest-core-tokens.dev.js",
-            "default": "./theme-lightest-core-tokens.js"
-        },
-        "./theme-light.js": {
-            "development": "./theme-light.dev.js",
-            "default": "./theme-light.js"
-        },
-        "./theme-light-core-tokens.js": {
-            "development": "./theme-light-core-tokens.dev.js",
-            "default": "./theme-light-core-tokens.js"
-        },
-        "./theme-dark.js": {
-            "development": "./theme-dark.dev.js",
-            "default": "./theme-dark.js"
-        },
-        "./theme-dark-core-tokens.js": {
-            "development": "./theme-dark-core-tokens.dev.js",
-            "default": "./theme-dark-core-tokens.js"
-        },
-        "./theme-darkest.js": {
-            "development": "./theme-darkest.dev.js",
-            "default": "./theme-darkest.js"
-        },
-        "./theme-darkest-core-tokens.js": {
-            "development": "./theme-darkest-core-tokens.dev.js",
-            "default": "./theme-darkest-core-tokens.js"
         }
     },
     "scripts": {
@@ -294,7 +86,6 @@
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
-    "deprecationNotice": "Color 'lightest' and 'darkest' are deprecated. The 'theme' attribute has been deprecated in favor of 'system'. These deprecations will be removed in a future release.",
     "sideEffects": [
         "./sp-*.js",
         "./**/*.dev.js",
@@ -302,19 +93,9 @@
         "./core-*.js",
         "./theme-*.js",
         "./scale-*.js",
-        "./spectrum-two/theme-*.js",
-        "./spectrum-two/scale-*.js",
-        "./express/theme-*.js",
-        "./express/scale-*.js",
         "./src/themes.js",
         "./src/themes-*.js",
-        "./src/express/core.js",
-        "./src/express/core-*.js",
-        "./src/express/themes.js",
-        "./src/express/themes-*.js",
-        "./src/spectrum-two/core.js",
-        "./src/spectrum-two/core-*.js",
-        "./src/spectrum-two/themes.js",
-        "./src/spectrum-two/themes-*.js"
+        "./src/core.js",
+        "./src/core-*.js"
     ]
 }
diff --git a/tools/theme/scale-large-core-tokens.ts b/tools/theme/scale-large-core-tokens.ts
deleted file mode 100644
index beb367ee60e..00000000000
--- a/tools/theme/scale-large-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import largeStyles from './src/scale-large-core-tokens.css.js';
-import { Theme } from './src/Theme.js';
-import './core-tokens.js';
-
-Theme.registerThemeFragment('large', 'scale', largeStyles);
diff --git a/tools/theme/scale-medium-core-tokens.ts b/tools/theme/scale-medium-core-tokens.ts
deleted file mode 100644
index e03ea1b4190..00000000000
--- a/tools/theme/scale-medium-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import mediumStyles from './src/scale-medium-core-tokens.css.js';
-import { Theme } from './src/Theme.js';
-import './core-tokens.js';
-
-Theme.registerThemeFragment('medium', 'scale', mediumStyles);
diff --git a/tools/theme/scale-medium.ts b/tools/theme/scale-medium.ts
deleted file mode 100644
index 2eae53f9785..00000000000
--- a/tools/theme/scale-medium.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import mediumStyles from './src/scale-medium.css.js';
-import { Theme } from './src/Theme.js';
-import './core.js';
-
-Theme.registerThemeFragment('medium', 'scale', mediumStyles);
diff --git a/tools/theme/spectrum-two/scale-large-core-tokens.ts b/tools/theme/spectrum-two/scale-large-core-tokens.ts
deleted file mode 100755
index 22833d9512a..00000000000
--- a/tools/theme/spectrum-two/scale-large-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import largeStyles from '../src/spectrum-two/scale-large-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core-tokens.js';
-
-Theme.registerThemeFragment('large-spectrum-two', 'scale', largeStyles);
diff --git a/tools/theme/spectrum-two/scale-large.ts b/tools/theme/spectrum-two/scale-large.ts
deleted file mode 100644
index 6ed9d2c7108..00000000000
--- a/tools/theme/spectrum-two/scale-large.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import largeStyles from '../src/spectrum-two/scale-large.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core.js';
-
-Theme.registerThemeFragment('large-spectrum-two', 'scale', largeStyles);
diff --git a/tools/theme/spectrum-two/scale-medium-core-tokens.ts b/tools/theme/spectrum-two/scale-medium-core-tokens.ts
deleted file mode 100755
index c857686b086..00000000000
--- a/tools/theme/spectrum-two/scale-medium-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import mediumStyles from '../src/spectrum-two/scale-medium-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core-tokens.js';
-
-Theme.registerThemeFragment('medium-spectrum-two', 'scale', mediumStyles);
diff --git a/tools/theme/spectrum-two/scale-medium.ts b/tools/theme/spectrum-two/scale-medium.ts
deleted file mode 100644
index e074cd82296..00000000000
--- a/tools/theme/spectrum-two/scale-medium.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import mediumStyles from '../src/spectrum-two/scale-medium.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core.js';
-
-Theme.registerThemeFragment('medium-spectrum-two', 'scale', mediumStyles);
diff --git a/tools/theme/spectrum-two/theme-dark-core-tokens.ts b/tools/theme/spectrum-two/theme-dark-core-tokens.ts
deleted file mode 100755
index eb5821c101d..00000000000
--- a/tools/theme/spectrum-two/theme-dark-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from '../src/spectrum-two/theme-dark-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core-tokens.js';
-
-Theme.registerThemeFragment('dark-spectrum-two', 'color', darkStyles);
diff --git a/tools/theme/spectrum-two/theme-dark.ts b/tools/theme/spectrum-two/theme-dark.ts
deleted file mode 100644
index ba4f2ef642f..00000000000
--- a/tools/theme/spectrum-two/theme-dark.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from '../src/spectrum-two/theme-dark.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core.js';
-
-Theme.registerThemeFragment('dark-spectrum-two', 'color', darkStyles);
diff --git a/tools/theme/spectrum-two/theme-darkest-core-tokens.ts b/tools/theme/spectrum-two/theme-darkest-core-tokens.ts
deleted file mode 100644
index 629b77f0762..00000000000
--- a/tools/theme/spectrum-two/theme-darkest-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from '../src/spectrum-two/theme-dark-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core-tokens.js';
-
-Theme.registerThemeFragment('darkest-spectrum-two', 'color', darkStyles);
diff --git a/tools/theme/spectrum-two/theme-darkest.ts b/tools/theme/spectrum-two/theme-darkest.ts
deleted file mode 100644
index 6141a285a80..00000000000
--- a/tools/theme/spectrum-two/theme-darkest.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from '../src/spectrum-two/theme-dark.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core.js';
-
-Theme.registerThemeFragment('darkest-spectrum-two', 'color', darkStyles);
diff --git a/tools/theme/spectrum-two/theme-light-core-tokens.ts b/tools/theme/spectrum-two/theme-light-core-tokens.ts
deleted file mode 100755
index 0211ee1bd49..00000000000
--- a/tools/theme/spectrum-two/theme-light-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from '../src/spectrum-two/theme-light-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core-tokens.js';
-
-Theme.registerThemeFragment('light-spectrum-two', 'color', lightStyles);
diff --git a/tools/theme/spectrum-two/theme-light.ts b/tools/theme/spectrum-two/theme-light.ts
deleted file mode 100644
index 5f325402c5b..00000000000
--- a/tools/theme/spectrum-two/theme-light.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from '../src/spectrum-two/theme-light.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core.js';
-
-Theme.registerThemeFragment('light-spectrum-two', 'color', lightStyles);
diff --git a/tools/theme/spectrum-two/theme-lightest-core-tokens.ts b/tools/theme/spectrum-two/theme-lightest-core-tokens.ts
deleted file mode 100644
index e7a52de39c7..00000000000
--- a/tools/theme/spectrum-two/theme-lightest-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from '../src/spectrum-two/theme-light-core-tokens.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core-tokens.js';
-
-Theme.registerThemeFragment('lightest-spectrum-two', 'color', lightStyles);
diff --git a/tools/theme/spectrum-two/theme-lightest.ts b/tools/theme/spectrum-two/theme-lightest.ts
deleted file mode 100644
index cbf36ed4fa5..00000000000
--- a/tools/theme/spectrum-two/theme-lightest.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from '../src/spectrum-two/theme-light.css.js';
-import { Theme } from '../src/Theme.js';
-import '../src/spectrum-two/core.js';
-
-Theme.registerThemeFragment('lightest-spectrum-two', 'color', lightStyles);
diff --git a/tools/theme/src/Theme.ts b/tools/theme/src/Theme.ts
index 3eeac8a4ccb..ddf1d4d825d 100755
--- a/tools/theme/src/Theme.ts
+++ b/tools/theme/src/Theme.ts
@@ -23,13 +23,10 @@ import {
     SCALE_VALUES,
     SettableFragmentTypes,
     ShadowRootWithAdoptedStyleSheets,
-    SYSTEM_VARIANT_VALUES,
-    SystemContextCallback,
-    SystemVariant,
     ThemeFragmentMap,
     ThemeKindProvider,
 } from './theme-interfaces.js';
-export type { ProvideLang, ThemeFragmentMap, Color, Scale, SystemVariant };
+export type { ProvideLang, ThemeFragmentMap, Color, Scale };
 /**
  * @element sp-theme
  * @attr {string} [lang=""] - The language of the content scoped to this `sp-theme` element, see: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang" target="_blank">MDN reference</a>.
@@ -38,13 +35,13 @@ export type { ProvideLang, ThemeFragmentMap, Color, Scale, SystemVariant };
  */
 export class Theme extends HTMLElement implements ThemeKindProvider {
     private static themeFragmentsByKind: ThemeFragmentMap = new Map();
-    private static defaultFragments: Set<FragmentName> = new Set(['spectrum']);
+    private static defaultFragments: Set<FragmentName> = new Set([]);
     private static templateElement?: HTMLTemplateElement;
     private static instances: Set<Theme> = new Set();
     static VERSION = version;
 
     static get observedAttributes(): string[] {
-        return ['color', 'scale', 'lang', 'dir', 'system'];
+        return ['color', 'scale', 'lang', 'dir'];
     }
 
     _dir: 'ltr' | 'rtl' | '' = '';
@@ -84,9 +81,6 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
         } else if (attrName === 'lang' && !!value) {
             this.lang = value;
             this._provideContext();
-        } else if (attrName === 'system') {
-            this.system = value as SystemVariant;
-            this._provideSystemContext();
         } else if (attrName === 'dir') {
             this.dir = value as 'ltr' | 'rtl' | '';
         }
@@ -97,46 +91,13 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
 
     public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;
 
-    private _system: SystemVariant | '' = 'spectrum';
-    /**
-     * The Spectrum system that is applied to the content scoped to this `sp-theme` element.
-     *
-     * A value is requried.
-     * @type {"spectrum" | "express" }
-     * @attr
-     */
-    get system(): SystemVariant | '' {
-        const systemFragments = Theme.themeFragmentsByKind.get('system');
-        const { name } =
-            (systemFragments && systemFragments.get('default')) || {};
-        return this._system || (name as SystemVariant) || '';
-    }
-
-    set system(newValue: SystemVariant | '') {
-        if (newValue === this._system) return;
-        const system =
-            !!newValue && SYSTEM_VARIANT_VALUES.includes(newValue)
-                ? newValue
-                : this.system;
-        if (system !== this._system) {
-            this._system = system;
-            this.requestUpdate();
-        }
-        if (system) {
-            this.setAttribute('system', system);
-            /* c8 ignore next 3 */
-        } else {
-            this.removeAttribute('system');
-        }
-    }
-
     private _color: Color | '' = '';
 
     /**
      * The Spectrum color stops to apply to content scoped by this `sp-theme` element.
      *
      * A value is requried.
-     * @type {"lightest" | "light" | "dark" | "darkest" | ""}
+     * @type {"light" | "dark" | ""}
      * @attr
      */
     get color(): Color | '' {
@@ -206,13 +167,8 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
             name: FragmentName,
             kind?: FragmentType
         ): CSSResultGroup | undefined => {
-            const currentStyles =
-                kind && kind !== 'system' && this.system !== 'spectrum'
-                    ? fragments.get(`${name}-${this.system}`)
-                    : fragments.get(name);
-            // system="spectrum" is available by default and doesn't need to be applied.
-            const isAppliedFragment =
-                name === 'spectrum' || !kind || this.hasAttribute(kind);
+            const currentStyles = fragments.get(name);
+            const isAppliedFragment = !kind || this.hasAttribute(kind);
             if (currentStyles && isAppliedFragment) {
                 return currentStyles.styles;
             }
@@ -236,13 +192,7 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
         }, [] as CSSResultGroup[]);
         const themeFragmentsByKind = Theme.themeFragmentsByKind;
 
-        checkForIssues(
-            this,
-            this.system,
-            this.color,
-            this.scale,
-            themeFragmentsByKind
-        );
+        checkForIssues(this, this.color, this.scale, themeFragmentsByKind);
 
         return [...styles];
     }
@@ -265,48 +215,10 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
             'sp-language-context',
             this._handleContextPresence as EventListener
         );
-        this.addEventListener(
-            'sp-system-context',
-            this._handleSystemContext as EventListener
-        );
 
         this.updateComplete = this.__createDeferredPromise();
     }
 
-    private _systemContextConsumers = new Map<
-        HTMLElement,
-        [SystemContextCallback, () => void]
-    >();
-
-    private _handleSystemContext(
-        event: CustomEvent<{ callback: SystemContextCallback }>
-    ): void {
-        event.stopPropagation();
-
-        const target = event.composedPath()[0] as HTMLElement;
-
-        // Avoid duplicate registrations
-        if (this._systemContextConsumers.has(target)) {
-            return;
-        }
-
-        // Create an unsubscribe function
-        const unsubscribe: () => void = () =>
-            this._systemContextConsumers.delete(target);
-
-        // Store the callback and unsubscribe function
-        this._systemContextConsumers.set(target, [
-            event.detail.callback,
-            unsubscribe,
-        ]);
-
-        // Provide the context data
-        const [callback] = this._systemContextConsumers.get(target) || [];
-        if (callback) {
-            callback(this.system, unsubscribe);
-        }
-    }
-
     public updateComplete!: Promise<boolean>;
     private __resolve!: (compelted: boolean) => void;
 
@@ -405,12 +317,6 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
         );
     }
 
-    private _provideSystemContext(): void {
-        this._systemContextConsumers.forEach(([callback, unsubscribe]) =>
-            callback(this.system, unsubscribe)
-        );
-    }
-
     private _handleContextPresence(event: CustomEvent<ProvideLang>): void {
         event.stopPropagation();
         const target = event.composedPath()[0] as HTMLElement;
@@ -437,7 +343,6 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
 
 function checkForIssues(
     instance: Theme,
-    system: SystemVariant | '',
     color: Color | '',
     scale: Scale | '',
     themeFragmentsByKind: ThemeFragmentMap
@@ -445,12 +350,10 @@ function checkForIssues(
     if (window.__swc.DEBUG) {
         const issues: string[] = [];
         const checkForAttribute = (
-            name: 'system' | 'color' | 'scale',
+            name: 'color' | 'scale',
             resolvedValue: string,
             actualValue: string | null
         ): void => {
-            const systemModifier =
-                system && system !== 'spectrum' ? `-${system}` : '';
             if (!resolvedValue) {
                 issues.push(
                     `You have not explicitly set the "${name}" attribute and there is no default value on which to fallback.`
@@ -459,26 +362,13 @@ function checkForIssues(
                 issues.push(
                     `You have not explicitly set the "${name}" attribute, the default value ("${resolvedValue}") is being used as a fallback.`
                 );
-            } else if (
-                !themeFragmentsByKind
-                    .get(name)
-                    ?.get(
-                        resolvedValue +
-                            (name === 'system' ? '' : systemModifier)
-                    )
-            ) {
+            } else if (!themeFragmentsByKind.get(name)?.get(resolvedValue)) {
                 issues.push(
-                    `You have set "${name}='${resolvedValue}'" but the associated system fragment has not been loaded.`
+                    `You have set "${name}='${resolvedValue}'" but the associated fragment has not been loaded.`
                 );
             }
         };
 
-        if (['lightest', 'darkest'].includes(color || '')) {
-            issues.push(
-                `DEPRECATION NOTICE: Color "lightest" and "darkest" are deprecated. For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`
-            );
-        }
-        checkForAttribute('system', system, instance.getAttribute('system'));
         checkForAttribute('color', color, instance.getAttribute('color'));
         checkForAttribute('scale', scale, instance.getAttribute('scale'));
 
diff --git a/tools/theme/src/express/scale-large-core-tokens.css b/tools/theme/src/express/scale-large-core-tokens.css
deleted file mode 100644
index 6029c722fae..00000000000
--- a/tools/theme/src/express/scale-large-core-tokens.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/large-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/large-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/large-vars.css");
-
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 1px;
-    --swc-scale-factor: 1.25;
-}
diff --git a/tools/theme/src/express/scale-large.css b/tools/theme/src/express/scale-large.css
deleted file mode 100644
index 0557a221ba6..00000000000
--- a/tools/theme/src/express/scale-large.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/express/scale-large.css");
-@import url("@spectrum-web-components/styles/tokens/large-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/large-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/large-vars.css");
-
-:root,
-:host {
-    --swc-scale-factor: 1.25;
-}
diff --git a/tools/theme/src/express/scale-medium-core-tokens.css b/tools/theme/src/express/scale-medium-core-tokens.css
deleted file mode 100644
index 6dba6fee832..00000000000
--- a/tools/theme/src/express/scale-medium-core-tokens.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/medium-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/medium-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/medium-vars.css");
-
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 2px;
-    --swc-scale-factor: 1;
-}
diff --git a/tools/theme/src/express/scale-medium.css b/tools/theme/src/express/scale-medium.css
deleted file mode 100644
index f4892f535ca..00000000000
--- a/tools/theme/src/express/scale-medium.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/medium-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/medium-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/medium-vars.css");
-@import url("@spectrum-web-components/styles/express/scale-medium.css");
-
-:root,
-:host {
-    --swc-scale-factor: 1;
-}
diff --git a/tools/theme/src/express/theme-core-tokens.css b/tools/theme/src/express/theme-core-tokens.css
deleted file mode 100644
index 0e1dce12006..00000000000
--- a/tools/theme/src/express/theme-core-tokens.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/system-theme-bridge.css");
-@import url("@spectrum-web-components/styles/typography.css");
-
-:host {
-    display: block;
-
-    /* Workaround while https://github.com/adobe/spectrum-css/issues/2162 remains open */
-    --spectrum-picker-border-width: var(--spectrum-border-width-100);
-
-    /* end workaround */
-    --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);
-
-    font-family: var(--spectrum-font-family);
-    font-size: var(--spectrum-font-size);
-    font-style: var(--spectrum-font-style);
-
-    &:lang(ar) {
-        font-family: var(--spectrum-font-family-ar);
-    }
-
-    &:lang(he) {
-        font-family: var(--spectrum-font-family-he);
-    }
-}
-
-#scale,
-#theme {
-    width: 100%;
-    height: 100%;
-}
diff --git a/tools/theme/src/express/theme-dark-core-tokens.css b/tools/theme/src/express/theme-dark-core-tokens.css
deleted file mode 100644
index ff4eec8e5f7..00000000000
--- a/tools/theme/src/express/theme-dark-core-tokens.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/dark-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/dark-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/dark-vars.css");
-
-:host,
-:root {
-    color-scheme: dark;
-}
diff --git a/tools/theme/src/express/theme-dark.css b/tools/theme/src/express/theme-dark.css
deleted file mode 100644
index cbd33b90f80..00000000000
--- a/tools/theme/src/express/theme-dark.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/express/theme-dark.css");
-@import url("@spectrum-web-components/styles/tokens/dark-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/dark-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/dark-vars.css");
diff --git a/tools/theme/src/express/theme-light-core-tokens.css b/tools/theme/src/express/theme-light-core-tokens.css
deleted file mode 100644
index 2afbf200937..00000000000
--- a/tools/theme/src/express/theme-light-core-tokens.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/light-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/light-vars.css");
-
-:host,
-:root {
-    color-scheme: light;
-}
diff --git a/tools/theme/src/express/theme-light.css b/tools/theme/src/express/theme-light.css
deleted file mode 100644
index e019f71e6e6..00000000000
--- a/tools/theme/src/express/theme-light.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/express/theme-light.css");
-@import url("@spectrum-web-components/styles/tokens/light-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/light-vars.css");
diff --git a/tools/theme/src/express/theme.css b/tools/theme/src/express/theme.css
deleted file mode 100644
index 2a5906cc658..00000000000
--- a/tools/theme/src/express/theme.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens/express/global-vars.css");
-@import url("@spectrum-web-components/styles/express/core-global.css");
-@import url("@spectrum-web-components/styles/tokens/express/system-theme-bridge.css");
-@import url("@spectrum-web-components/styles/typography.css");
-
-:host {
-    display: block;
-
-    /* Workaround while https://github.com/adobe/spectrum-css/issues/2162 remains open */
-    --spectrum-picker-border-width: var(--spectrum-border-width-100);
-
-    /* end workaround */
-    --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);
-
-    font-family: var(--spectrum-font-family);
-    font-size: var(--spectrum-font-size);
-    font-style: var(--spectrum-font-style);
-
-    &:lang(ar) {
-        font-family: var(--spectrum-font-family-ar);
-    }
-
-    &:lang(he) {
-        font-family: var(--spectrum-font-family-he);
-    }
-}
-
-#scale,
-#theme {
-    width: 100%;
-    height: 100%;
-}
diff --git a/tools/theme/src/express/themes-core-tokens.ts b/tools/theme/src/express/themes-core-tokens.ts
deleted file mode 100644
index 0724193ca3b..00000000000
--- a/tools/theme/src/express/themes-core-tokens.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import '../../express/theme-light-core-tokens.js';
-import '../../express/theme-lightest-core-tokens.js';
-import '../../express/theme-dark-core-tokens.js';
-import '../../express/theme-darkest-core-tokens.js';
-import '../../express/scale-medium-core-tokens.js';
-import '../../express/scale-large-core-tokens.js';
diff --git a/tools/theme/src/express/themes.ts b/tools/theme/src/express/themes.ts
deleted file mode 100644
index e056c4ef677..00000000000
--- a/tools/theme/src/express/themes.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import '../../express/theme-light.js';
-import '../../express/theme-lightest.js';
-import '../../express/theme-dark.js';
-import '../../express/theme-darkest.js';
-import '../../express/scale-medium.js';
-import '../../express/scale-large.js';
diff --git a/tools/theme/src/scale-large-core-tokens.css b/tools/theme/src/scale-large-core-tokens.css
deleted file mode 100644
index 2bbe22470ee..00000000000
--- a/tools/theme/src/scale-large-core-tokens.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/large-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/large-vars.css");
-
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 1px;
-    --swc-scale-factor: 1.25;
-}
diff --git a/tools/theme/src/scale-large.css b/tools/theme/src/scale-large.css
index 01a4052d2b3..b2e9e0c0d0d 100644
--- a/tools/theme/src/scale-large.css
+++ b/tools/theme/src/scale-large.css
@@ -11,11 +11,3 @@
  */
 
 @import url("@spectrum-web-components/styles/scale-large.css");
-@import url("@spectrum-web-components/styles/tokens/large-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/large-vars.css");
-
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 1px;
-    --swc-scale-factor: 1.25;
-}
diff --git a/tools/theme/src/scale-medium-core-tokens.css b/tools/theme/src/scale-medium-core-tokens.css
deleted file mode 100644
index 93703ee6b0e..00000000000
--- a/tools/theme/src/scale-medium-core-tokens.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/medium-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/medium-vars.css");
-
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 2px;
-    --swc-scale-factor: 1;
-}
diff --git a/tools/theme/src/spectrum-two/core-tokens.ts b/tools/theme/src/spectrum-two/core-tokens.ts
deleted file mode 100755
index adfd171a89b..00000000000
--- a/tools/theme/src/spectrum-two/core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import { Theme } from '../Theme.js';
-
-import coreStyles from './theme-core-tokens.css.js';
-
-Theme.registerThemeFragment('spectrum-two', 'system', coreStyles);
diff --git a/tools/theme/src/spectrum-two/core.ts b/tools/theme/src/spectrum-two/core.ts
deleted file mode 100644
index b31ad042807..00000000000
--- a/tools/theme/src/spectrum-two/core.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import { Theme } from '../Theme.js';
-
-import coreStyles from './theme.css.js';
-
-Theme.registerThemeFragment('spectrum-two', 'system', coreStyles);
diff --git a/tools/theme/src/spectrum-two/scale-large-core-tokens.css b/tools/theme/src/spectrum-two/scale-large-core-tokens.css
deleted file mode 100755
index 28c3f8068ec..00000000000
--- a/tools/theme/src/spectrum-two/scale-large-core-tokens.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens-v2/large-vars.css");
-
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 1px;
-    --swc-scale-factor: 1.25;
-}
diff --git a/tools/theme/src/spectrum-two/scale-large.css b/tools/theme/src/spectrum-two/scale-large.css
deleted file mode 100644
index e65c7d6a4d9..00000000000
--- a/tools/theme/src/spectrum-two/scale-large.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/spectrum-two/scale-large.css");
-@import url("@spectrum-web-components/styles/tokens-v2/large-vars.css");
-
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 1px;
-    --swc-scale-factor: 1.25;
-}
diff --git a/tools/theme/src/spectrum-two/scale-medium-core-tokens.css b/tools/theme/src/spectrum-two/scale-medium-core-tokens.css
deleted file mode 100755
index ee4b39f5b3b..00000000000
--- a/tools/theme/src/spectrum-two/scale-medium-core-tokens.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens-v2/medium-vars.css");
-
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 2px;
-    --swc-scale-factor: 1;
-}
diff --git a/tools/theme/src/spectrum-two/scale-medium.css b/tools/theme/src/spectrum-two/scale-medium.css
deleted file mode 100644
index 27515f31c77..00000000000
--- a/tools/theme/src/spectrum-two/scale-medium.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/spectrum-two/scale-medium.css");
-@import url("@spectrum-web-components/styles/tokens-v2/medium-vars.css");
-
-:root,
-:host {
-    --spectrum-global-alias-appframe-border-size: 2px;
-    --swc-scale-factor: 1;
-}
diff --git a/tools/theme/src/spectrum-two/theme-core-tokens.css b/tools/theme/src/spectrum-two/theme-core-tokens.css
deleted file mode 100755
index 1b602094f65..00000000000
--- a/tools/theme/src/spectrum-two/theme-core-tokens.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens-v2/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens-v2/system-theme-bridge.css");
-@import url("@spectrum-web-components/styles/typography.css");
-
-:host {
-    display: block;
-
-    /* Workaround while https://github.com/adobe/spectrum-css/issues/2162 remains open */
-    --spectrum-picker-border-width: var(--spectrum-border-width-100);
-
-    /* end workaround */
-    font-family: var(--spectrum-font-family);
-    font-size: var(--spectrum-font-size);
-    font-style: var(--spectrum-font-style);
-
-    &:lang(ar) {
-        font-family: var(--spectrum-font-family-ar);
-    }
-
-    &:lang(he) {
-        font-family: var(--spectrum-font-family-he);
-    }
-}
-
-#scale,
-#theme {
-    width: 100%;
-    height: 100%;
-}
diff --git a/tools/theme/src/spectrum-two/theme-dark-core-tokens.css b/tools/theme/src/spectrum-two/theme-dark-core-tokens.css
deleted file mode 100755
index 59d63487157..00000000000
--- a/tools/theme/src/spectrum-two/theme-dark-core-tokens.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens-v2/dark-vars.css");
-
-:host,
-:root {
-    color-scheme: dark;
-}
diff --git a/tools/theme/src/spectrum-two/theme-dark.css b/tools/theme/src/spectrum-two/theme-dark.css
deleted file mode 100644
index 3f355cca4a5..00000000000
--- a/tools/theme/src/spectrum-two/theme-dark.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/spectrum-two/theme-dark.css");
-@import url("@spectrum-web-components/styles/tokens-v2/dark-vars.css");
diff --git a/tools/theme/src/spectrum-two/theme-light-core-tokens.css b/tools/theme/src/spectrum-two/theme-light-core-tokens.css
deleted file mode 100755
index 199c552e93f..00000000000
--- a/tools/theme/src/spectrum-two/theme-light-core-tokens.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens-v2/light-vars.css");
-
-:host,
-:root {
-    color-scheme: light;
-}
diff --git a/tools/theme/src/spectrum-two/theme-light.css b/tools/theme/src/spectrum-two/theme-light.css
deleted file mode 100644
index 3cb9a7707e5..00000000000
--- a/tools/theme/src/spectrum-two/theme-light.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/spectrum-two/theme-light.css");
-@import url("@spectrum-web-components/styles/tokens-v2/light-vars.css");
diff --git a/tools/theme/src/spectrum-two/theme.css b/tools/theme/src/spectrum-two/theme.css
deleted file mode 100755
index 0a8c9ec4271..00000000000
--- a/tools/theme/src/spectrum-two/theme.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/spectrum-two/core-global.css");
-@import url("@spectrum-web-components/styles/tokens-v2/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens-v2/system-theme-bridge.css");
-@import url("@spectrum-web-components/styles/typography.css");
-
-:host {
-    display: block;
-    font-family: var(--spectrum-font-family);
-    font-size: var(--spectrum-font-size);
-    font-style: var(--spectrum-font-style);
-
-    &:lang(ar) {
-        font-family: var(--spectrum-font-family-ar);
-    }
-
-    &:lang(he) {
-        font-family: var(--spectrum-font-family-he);
-    }
-}
-
-#scale,
-#theme {
-    width: 100%;
-    height: 100%;
-}
diff --git a/tools/theme/src/spectrum-two/themes-core-tokens.ts b/tools/theme/src/spectrum-two/themes-core-tokens.ts
deleted file mode 100755
index 439993ceaeb..00000000000
--- a/tools/theme/src/spectrum-two/themes-core-tokens.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import '../../spectrum-two/theme-light-core-tokens.js';
-import '../../spectrum-two/theme-lightest-core-tokens.js';
-import '../../spectrum-two/theme-dark-core-tokens.js';
-import '../../spectrum-two/theme-darkest-core-tokens.js';
-import '../../spectrum-two/scale-medium-core-tokens.js';
-import '../../spectrum-two/scale-large-core-tokens.js';
diff --git a/tools/theme/src/spectrum-two/themes.ts b/tools/theme/src/spectrum-two/themes.ts
deleted file mode 100644
index 8aac08dea82..00000000000
--- a/tools/theme/src/spectrum-two/themes.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import '../../spectrum-two/theme-light.js';
-import '../../spectrum-two/theme-lightest.js';
-import '../../spectrum-two/theme-dark.js';
-import '../../spectrum-two/theme-darkest.js';
-import '../../spectrum-two/scale-medium.js';
-import '../../spectrum-two/scale-large.js';
diff --git a/tools/theme/src/theme-core-tokens.css b/tools/theme/src/theme-core-tokens.css
deleted file mode 100644
index 844f3e339bc..00000000000
--- a/tools/theme/src/theme-core-tokens.css
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css");
-@import url("@spectrum-web-components/styles/typography.css");
-
-:host {
-    display: block;
-
-    --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);
-
-    font-family: var(--spectrum-font-family);
-    font-size: var(--spectrum-font-size);
-    font-style: var(--spectrum-font-style);
-
-    &:lang(ar) {
-        font-family: var(--spectrum-font-family-ar);
-    }
-
-    &:lang(he) {
-        font-family: var(--spectrum-font-family-he);
-    }
-}
-
-#scale,
-#theme {
-    width: 100%;
-    height: 100%;
-}
diff --git a/tools/theme/src/theme-dark-core-tokens.css b/tools/theme/src/theme-dark-core-tokens.css
deleted file mode 100644
index 8f47f94ebc5..00000000000
--- a/tools/theme/src/theme-dark-core-tokens.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/dark-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/dark-vars.css");
-
-:host,
-:root {
-    color-scheme: dark;
-}
diff --git a/tools/theme/src/theme-dark.css b/tools/theme/src/theme-dark.css
deleted file mode 100644
index 8e09096d9ae..00000000000
--- a/tools/theme/src/theme-dark.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/theme-dark.css");
-@import url("@spectrum-web-components/styles/tokens/dark-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/dark-vars.css");
diff --git a/tools/theme/src/theme-darkest-core-tokens.css b/tools/theme/src/theme-darkest-core-tokens.css
deleted file mode 100644
index c6d0981091e..00000000000
--- a/tools/theme/src/theme-darkest-core-tokens.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/darkest-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css");
-
-:host,
-:root {
-    color-scheme: dark;
-}
diff --git a/tools/theme/src/theme-darkest.css b/tools/theme/src/theme-darkest.css
deleted file mode 100644
index 83ef35e1e0d..00000000000
--- a/tools/theme/src/theme-darkest.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/theme-darkest.css");
-@import url("@spectrum-web-components/styles/tokens/darkest-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css");
diff --git a/tools/theme/src/theme-interfaces.ts b/tools/theme/src/theme-interfaces.ts
index f53d2e2b192..c6fba51879a 100644
--- a/tools/theme/src/theme-interfaces.ts
+++ b/tools/theme/src/theme-interfaces.ts
@@ -15,62 +15,27 @@ export type ShadowRootWithAdoptedStyleSheets = HTMLElement['shadowRoot'] & {
     adoptedStyleSheets?: CSSStyleSheet[];
 };
 
-export type FragmentType = 'color' | 'scale' | 'system' | 'core' | 'app';
-export type SettableFragmentTypes = 'color' | 'scale' | 'system';
+export type FragmentType = 'color' | 'scale' | 'core' | 'app';
+export type SettableFragmentTypes = 'color' | 'scale';
 export type FragmentMap = Map<string, { name: string; styles: CSSResultGroup }>;
 export type ThemeFragmentMap = Map<FragmentType, FragmentMap>;
 
-export const SYSTEM_VARIANT_VALUES = [
-    'spectrum',
-    'express',
-    'spectrum-two',
-] as const;
+export const SCALE_VALUES = ['medium', 'large'] as const;
 
-export const SCALE_VALUES = [
-    'medium',
-    'large',
-    'medium-express',
-    'large-express',
-    'medium-spectrum-two',
-    'large-spectrum-two',
-] as const;
+export const COLOR_VALUES = ['light', 'dark'] as const;
 
-export const COLOR_VALUES = [
-    'light',
-    'lightest',
-    'dark',
-    'darkest',
-    'light-express',
-    'lightest-express',
-    'dark-express',
-    'darkest-express',
-    'light-spectrum-two',
-    'lightest-spectrum-two',
-    'dark-spectrum-two',
-    'darkest-spectrum-two',
-] as const;
-
-export type SystemVariant = (typeof SYSTEM_VARIANT_VALUES)[number];
 export type Scale = (typeof SCALE_VALUES)[number];
 export type Color = (typeof COLOR_VALUES)[number];
 
-export type SystemContextCallback = (
-    system: SystemVariant | '',
-    unsubscribe: () => void
-) => void;
-
-export type FragmentName = Color | Scale | SystemVariant | 'core' | 'app';
-
+export type FragmentName = Color | Scale | 'core' | 'app';
 export interface ThemeData {
     color?: Color;
     scale?: Scale;
     lang?: string;
-    theme?: SystemVariant;
-    system?: SystemVariant;
 }
 
 export type ThemeKindProvider = {
-    [P in SettableFragmentTypes]: SystemVariant | Color | Scale | '';
+    [P in SettableFragmentTypes]: Color | Scale | '';
 };
 
 export interface ProvideLang {
diff --git a/tools/theme/src/theme-light-core-tokens.css b/tools/theme/src/theme-light-core-tokens.css
deleted file mode 100644
index bf42a7afd55..00000000000
--- a/tools/theme/src/theme-light-core-tokens.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/light-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css");
-
-:host,
-:root {
-    color-scheme: light;
-}
diff --git a/tools/theme/src/theme-light.css b/tools/theme/src/theme-light.css
deleted file mode 100644
index c17dd6c7370..00000000000
--- a/tools/theme/src/theme-light.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/theme-light.css");
-@import url("@spectrum-web-components/styles/tokens/light-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css");
diff --git a/tools/theme/src/theme-lightest-core-tokens.css b/tools/theme/src/theme-lightest-core-tokens.css
deleted file mode 100644
index bf42a7afd55..00000000000
--- a/tools/theme/src/theme-lightest-core-tokens.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/tokens/light-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css");
-
-:host,
-:root {
-    color-scheme: light;
-}
diff --git a/tools/theme/src/theme-lightest.css b/tools/theme/src/theme-lightest.css
deleted file mode 100644
index 25e8429d0c5..00000000000
--- a/tools/theme/src/theme-lightest.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-@import url("@spectrum-web-components/styles/theme-lightest.css");
-@import url("@spectrum-web-components/styles/tokens/light-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css");
diff --git a/tools/theme/src/theme.css b/tools/theme/src/theme.css
index f28a4b240c4..a0c25631b4e 100644
--- a/tools/theme/src/theme.css
+++ b/tools/theme/src/theme.css
@@ -11,33 +11,40 @@
  */
 
 @import url("@spectrum-web-components/styles/core-global.css");
-@import url("@spectrum-web-components/styles/tokens/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css");
-@import url("@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css");
-@import url("@spectrum-web-components/styles/typography.css");
+@import url("@spectrum-web-components/styles/src/spectrum-typography.css");
 
 :host {
     display: block;
+    font-family: var(--spectrum-sans-font-family-stack);
+    font-size: var(--spectrum-font-size-100);
+    font-style: var(--spectrum-default-font-style);
+}
 
-    --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);
-
-    font-family: var(--spectrum-font-family);
-    font-size: var(--spectrum-font-size);
-    font-style: var(--spectrum-font-style);
-
-    &:lang(ar) {
-        font-family: var(--spectrum-font-family-ar);
-    }
+:host(:lang(ar)) {
+    font-family: var(--spectrum-font-family-ar);
+}
 
-    &:lang(he) {
-        font-family: var(--spectrum-font-family-he);
-    }
+:host(:lang(he)) {
+    font-family: var(--spectrum-font-family-he);
 }
 
 #scale,
 #theme {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
+}
+
+/* default behavior is to honor the color-scheme preference of the user */
+:host(:not([color])) {
+    color-scheme: light dark;
+}
+
+/* @deprecated: customers should use the color-scheme style instead */
+:host([color="light"]) {
+    color-scheme: light;
+}
+
+/* @deprecated: customers should use the color-scheme style instead */
+:host([color="dark"]) {
+    color-scheme: dark;
 }
diff --git a/tools/theme/src/themes-core-tokens.ts b/tools/theme/src/themes-core-tokens.ts
deleted file mode 100644
index 51f46f0c9c5..00000000000
--- a/tools/theme/src/themes-core-tokens.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import '../theme-light-core-tokens.js';
-import '../theme-lightest-core-tokens.js';
-import '../theme-dark-core-tokens.js';
-import '../theme-darkest-core-tokens.js';
-import '../scale-medium-core-tokens.js';
-import '../scale-large-core-tokens.js';
diff --git a/tools/theme/src/themes.ts b/tools/theme/src/themes.ts
index 15acbbc586a..a048bba4511 100644
--- a/tools/theme/src/themes.ts
+++ b/tools/theme/src/themes.ts
@@ -10,9 +10,5 @@
  * governing permissions and limitations under the License.
  */
 
-import '../theme-light.js';
-import '../theme-lightest.js';
-import '../theme-dark.js';
-import '../theme-darkest.js';
-import '../scale-medium.js';
+import '../core.js';
 import '../scale-large.js';
diff --git a/tools/theme/src/typography.css b/tools/theme/src/typography.css
index 2c4780f4716..57c6be0ba50 100644
--- a/tools/theme/src/typography.css
+++ b/tools/theme/src/typography.css
@@ -10,4 +10,4 @@
  * governing permissions and limitations under the License.
  */
 
-@import url("@spectrum-web-components/styles/typography.css");
+@import url("@spectrum-web-components/styles/src/spectrum-typography.css");
diff --git a/tools/theme/stories/theme.stories.ts b/tools/theme/stories/theme.stories.ts
index 87ffc729661..b4fa5a9ce26 100644
--- a/tools/theme/stories/theme.stories.ts
+++ b/tools/theme/stories/theme.stories.ts
@@ -64,10 +64,7 @@ export const Default = ({
 }): TemplateResult => {
     return html`
         ${storyStyles}
-        <sp-theme
-            color="${color}"
-            system=${window.__swc_hack_knobs__.defaultSystemVariant}
-        >
+        <sp-theme color="${color}">
             <div id="example">
                 <div>
                     <sp-slider
@@ -96,20 +93,16 @@ export const displayFlex = (): TemplateResult => html`
         #flex-theme {
             display: flex;
             flex-direction: row;
-        }
-        #flex-theme sp-button {
-            flex: 0 0;
-        }
-        #flex-theme #middle-button {
-            flex: 1 0;
+
+            & sp-button {
+                flex: 0 0;
+            }
+            & #middle-button {
+                flex: 1 0;
+            }
         }
     </style>
-    <sp-theme
-        id="flex-theme"
-        color="dark"
-        theme=${window.__swc_hack_knobs__.defaultSystemVariant}
-        system=${window.__swc_hack_knobs__.defaultSystemVariant}
-    >
+    <sp-theme id="flex-theme" style="color-scheme: dark;">
         <sp-button>Start</sp-button>
         <sp-button id="middle-button">Middle</sp-button>
         <sp-button>End</sp-button>
@@ -146,11 +139,7 @@ export const nestedTheme = ({
     const inner = outer === 'light' ? 'dark' : 'light';
     return html`
         ${storyStyles}
-        <sp-theme
-            color="${outer}"
-            theme=${window.__swc_hack_knobs__.defaultSystemVariant}
-            system=${window.__swc_hack_knobs__.defaultSystemVariant}
-        >
+        <sp-theme color="${outer}">
             <div id="outer">
                 <div>
                     <sp-slider
@@ -169,12 +158,7 @@ export const nestedTheme = ({
                     </sp-button>
                     <sp-button variant="accent">Continue</sp-button>
                 </sp-button-group>
-                <sp-theme
-                    color="${inner}"
-                    dir="ltr"
-                    theme=${window.__swc_hack_knobs__.defaultSystemVariant}
-                    system=${window.__swc_hack_knobs__.defaultSystemVariant}
-                >
+                <sp-theme color="${inner}" dir="ltr">
                     <div id="inner">
                         <div>
                             <sp-slider
@@ -226,11 +210,7 @@ export const reverseColorNestedTheme = ({
                 margin-top: 2em;
             }
         </style>
-        <sp-theme
-            color="${inner}"
-            theme=${window.__swc_hack_knobs__.defaultSystemVariant}
-            system=${window.__swc_hack_knobs__.defaultSystemVariant}
-        >
+        <sp-theme color="${inner}">
             <div id="outer">
                 <div>
                     <sp-slider
@@ -249,12 +229,7 @@ export const reverseColorNestedTheme = ({
                     </sp-button>
                     <sp-button variant="accent">Continue</sp-button>
                 </sp-button-group>
-                <sp-theme
-                    color="${outer}"
-                    dir="rtl"
-                    theme=${window.__swc_hack_knobs__.defaultSystemVariant}
-                    system=${window.__swc_hack_knobs__.defaultSystemVariant}
-                >
+                <sp-theme color="${outer}" dir="rtl">
                     <div id="inner">
                         <div>
                             <sp-slider
diff --git a/tools/theme/test/theme-lazy.test.ts b/tools/theme/test/theme-lazy.test.ts
index 1e1b3460402..15e42924b79 100644
--- a/tools/theme/test/theme-lazy.test.ts
+++ b/tools/theme/test/theme-lazy.test.ts
@@ -13,12 +13,7 @@
 import '@spectrum-web-components/theme/sp-theme.js';
 import { Theme, ThemeFragmentMap } from '@spectrum-web-components/theme';
 import coreStyles from '@spectrum-web-components/theme/src/theme.css.js';
-import lightStyles from '@spectrum-web-components/theme/src/theme-light.css.js';
-import lightestStyles from '@spectrum-web-components/theme/src/theme-lightest.css.js';
-import darkStyles from '@spectrum-web-components/theme/src/theme-dark.css.js';
-import darkestStyles from '@spectrum-web-components/theme/src/theme-darkest.css.js';
 import largeStyles from '@spectrum-web-components/theme/src/scale-large.css.js';
-import mediumStyles from '@spectrum-web-components/theme/src/scale-medium.css.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 
 type TestableThemeConstructor = {
@@ -31,16 +26,10 @@ describe('Themes - lazy', () => {
         (
             Theme as unknown as TestableThemeConstructor
         ).themeFragmentsByKind.clear();
-        // Core is registered by default in `theme.ts`
-        Theme.registerThemeFragment('spectrum', 'system', coreStyles);
     });
     after(() => {
-        Theme.registerThemeFragment('light', 'color', lightStyles);
-        Theme.registerThemeFragment('lightest', 'color', lightestStyles);
-        Theme.registerThemeFragment('dark', 'color', darkStyles);
-        Theme.registerThemeFragment('darkest', 'color', darkestStyles);
+        Theme.registerThemeFragment('core', 'core', coreStyles);
         Theme.registerThemeFragment('large', 'scale', largeStyles);
-        Theme.registerThemeFragment('medium', 'scale', mediumStyles);
     });
     it('loads w/ no themes and none set', async () => {
         const el = await fixture<Theme>(html`
@@ -66,8 +55,7 @@ describe('Themes - lazy', () => {
 
         await elementUpdated(el);
 
-        Theme.registerThemeFragment('light', 'color', lightStyles);
-        Theme.registerThemeFragment('medium', 'scale', mediumStyles);
+        Theme.registerThemeFragment('core', 'core', coreStyles);
 
         await elementUpdated(el);
 
@@ -98,13 +86,12 @@ describe('Themes - lazy', () => {
     });
     it('loads w/ not enough themes', async () => {
         const el = await fixture<Theme>(html`
-            <sp-theme color="lightest" scale="large"></sp-theme>
+            <sp-theme color="light" scale="large"></sp-theme>
         `);
 
         await elementUpdated(el);
 
-        Theme.registerThemeFragment('light', 'color', lightStyles);
-        Theme.registerThemeFragment('medium', 'scale', mediumStyles);
+        Theme.registerThemeFragment('core', 'core', coreStyles);
 
         await elementUpdated(el);
 
@@ -118,13 +105,12 @@ describe('Themes - lazy', () => {
     });
     it('loads w/ lazy themes', async () => {
         const el = await fixture<Theme>(html`
-            <sp-theme color="lightest" scale="large"></sp-theme>
+            <sp-theme color="light" scale="large"></sp-theme>
         `);
 
         await elementUpdated(el);
 
-        Theme.registerThemeFragment('light', 'color', lightStyles);
-        Theme.registerThemeFragment('medium', 'scale', mediumStyles);
+        Theme.registerThemeFragment('core', 'core', coreStyles);
 
         await elementUpdated(el);
 
@@ -136,8 +122,7 @@ describe('Themes - lazy', () => {
             ).to.equal(1);
         }
 
-        Theme.registerThemeFragment('lightest', 'color', lightestStyles);
-        Theme.registerThemeFragment('large', 'scale', largeStyles);
+        Theme.registerThemeFragment('core', 'core', coreStyles);
 
         await elementUpdated(el);
 
diff --git a/tools/theme/test/themes.test.ts b/tools/theme/test/themes.test.ts
index 6236c5db71e..8c562986b84 100644
--- a/tools/theme/test/themes.test.ts
+++ b/tools/theme/test/themes.test.ts
@@ -21,10 +21,10 @@ type TestableThemeConstructor = {
     themeFragmentsByKind: ThemeFragmentMap;
 };
 
-describe('Systems', () => {
+describe('Contexts', () => {
     it('loads - light', async () => {
         const el = await fixture<Theme>(html`
-            <sp-theme system="spectrum" color="light"></sp-theme>
+            <sp-theme color="light"></sp-theme>
         `);
 
         await elementUpdated(el);
@@ -34,7 +34,7 @@ describe('Systems', () => {
     });
     it('loads - dark', async () => {
         const el = await fixture<Theme>(html`
-            <sp-theme color="dark"></sp-theme>
+            <sp-theme style="color-scheme: dark;"></sp-theme>
         `);
 
         await elementUpdated(el);
@@ -54,7 +54,7 @@ describe('Systems', () => {
     });
     it('adds an instance only once', async () => {
         const el = await fixture<Theme>(html`
-            <sp-theme system="express"></sp-theme>
+            <sp-theme></sp-theme>
         `);
 
         await elementUpdated(el);
@@ -72,19 +72,6 @@ describe('Systems', () => {
     });
 });
 
-describe('Lightest', () => {
-    it('loads', async () => {
-        const el = await fixture<Theme>(html`
-            <sp-theme color="lightest"></sp-theme>
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.exist;
-        expect(el).shadowDom.to.exist;
-    });
-});
-
 describe('Medium', () => {
     it('loads', async () => {
         const el = await fixture<Theme>(html`
@@ -199,33 +186,4 @@ describe('Setting attributes', () => {
             ).to.equal(3);
         }
     });
-
-    it('loads and handles system attribute', async () => {
-        const el = await fixture<Theme>(html`
-            <sp-theme system="spectrum"></sp-theme>
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.be.undefined;
-        expect(el.hasAttribute('system')).to.be.true;
-        expect(el.getAttribute('system')).to.equal('spectrum');
-
-        el.setAttribute('system', 'invalid');
-        await elementUpdated(el);
-        expect(el.getAttribute('system')).to.equal('spectrum'); // Should fallback to 'spectrum'
-
-        el.setAttribute('system', 'express');
-        await elementUpdated(el);
-        expect(el.getAttribute('system')).to.equal('express');
-
-        // Removing attribute should persist the last valid value
-        el.removeAttribute('system');
-        await elementUpdated(el);
-        expect(el.getAttribute('system')).to.equal('express');
-
-        el.system = 'spectrum';
-        await elementUpdated(el);
-        expect(el.getAttribute('system')).to.equal('spectrum');
-    });
 });
diff --git a/tools/theme/theme-dark-core-tokens.ts b/tools/theme/theme-dark-core-tokens.ts
deleted file mode 100644
index 6cdb8ff95d2..00000000000
--- a/tools/theme/theme-dark-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from './src/theme-dark-core-tokens.css.js';
-import { Theme } from './src/Theme.js';
-import './core-tokens.js';
-
-Theme.registerThemeFragment('dark', 'color', darkStyles);
diff --git a/tools/theme/theme-dark.ts b/tools/theme/theme-dark.ts
deleted file mode 100644
index 71ae47ef884..00000000000
--- a/tools/theme/theme-dark.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from './src/theme-dark.css.js';
-import { Theme } from './src/Theme.js';
-import './core.js';
-
-Theme.registerThemeFragment('dark', 'color', darkStyles);
diff --git a/tools/theme/theme-darkest-core-tokens.ts b/tools/theme/theme-darkest-core-tokens.ts
deleted file mode 100644
index 2188939b704..00000000000
--- a/tools/theme/theme-darkest-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from './src/theme-darkest-core-tokens.css.js';
-import { Theme } from './src/Theme.js';
-import './core-tokens.js';
-
-Theme.registerThemeFragment('darkest', 'color', darkStyles);
diff --git a/tools/theme/theme-darkest.ts b/tools/theme/theme-darkest.ts
deleted file mode 100644
index 1a2c3a02f98..00000000000
--- a/tools/theme/theme-darkest.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import darkStyles from './src/theme-darkest.css.js';
-import { Theme } from './src/Theme.js';
-import './core.js';
-
-Theme.registerThemeFragment('darkest', 'color', darkStyles);
diff --git a/tools/theme/theme-light-core-tokens.ts b/tools/theme/theme-light-core-tokens.ts
deleted file mode 100644
index 7cd60a97666..00000000000
--- a/tools/theme/theme-light-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from './src/theme-light-core-tokens.css.js';
-import { Theme } from './src/Theme.js';
-import './core-tokens.js';
-
-Theme.registerThemeFragment('light', 'color', lightStyles);
diff --git a/tools/theme/theme-light.ts b/tools/theme/theme-light.ts
deleted file mode 100644
index baf0e88a6e6..00000000000
--- a/tools/theme/theme-light.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightStyles from './src/theme-light.css.js';
-import { Theme } from './src/Theme.js';
-import './core.js';
-
-Theme.registerThemeFragment('light', 'color', lightStyles);
diff --git a/tools/theme/theme-lightest-core-tokens.ts b/tools/theme/theme-lightest-core-tokens.ts
deleted file mode 100644
index 4386a7f25f2..00000000000
--- a/tools/theme/theme-lightest-core-tokens.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightestStyles from './src/theme-lightest-core-tokens.css.js';
-import { Theme } from './src/Theme.js';
-import './core-tokens.js';
-
-Theme.registerThemeFragment('lightest', 'color', lightestStyles);
diff --git a/tools/theme/theme-lightest.ts b/tools/theme/theme-lightest.ts
deleted file mode 100644
index e34cfadfb74..00000000000
--- a/tools/theme/theme-lightest.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-import lightestStyles from './src/theme-lightest.css.js';
-import { Theme } from './src/Theme.js';
-import './core.js';
-
-Theme.registerThemeFragment('lightest', 'color', lightestStyles);
diff --git a/tools/theme/tsconfig.json b/tools/theme/tsconfig.json
index 59d36d0c0f3..d32c7656dc4 100755
--- a/tools/theme/tsconfig.json
+++ b/tools/theme/tsconfig.json
@@ -4,7 +4,7 @@
         "composite": true,
         "rootDir": "./"
     },
-    "include": ["*.ts", "src/**/*.ts", "express/*.ts", "spectrum-two/*.ts"],
+    "include": ["*.ts", "src/**/*.ts"],
     "exclude": ["test/*.ts", "stories/*.ts"],
     "references": [{ "path": "../base" }]
 }
diff --git a/tools/truncated/src/truncated.css b/tools/truncated/src/truncated.css
index 05cef1e5eb4..2bddfece4ab 100644
--- a/tools/truncated/src/truncated.css
+++ b/tools/truncated/src/truncated.css
@@ -12,8 +12,8 @@
 
 :host {
     display: inline-block;
-    min-width: 0;
-    max-width: 100%;
+    min-inline-size: 0;
+    max-inline-size: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js
index 8f41f451196..b2a39e52c67 100644
--- a/web-test-runner.utils.js
+++ b/web-test-runner.utils.js
@@ -143,7 +143,7 @@ export const packages = fs
     .concat(tools);
 
 const vrtHTML =
-    ({ systemVariant, color, scale, dir, reduceMotion, hcm }) =>
+    ({ color, scale, dir, reduceMotion, hcm }) =>
     (testFramework) =>
         `<!doctype html>
     <html dir=${dir}>
@@ -164,7 +164,6 @@ const vrtHTML =
         <body>
         <script>
             window.__swc_hack_knobs__ = {
-                defaultSystemVariant:  "${systemVariant || ''}",
                 defaultColor: "${color || ''}",
                 defaultScale: "${scale || ''}",
                 defaultDirection: "${dir || ''}",
@@ -177,28 +176,21 @@ const vrtHTML =
     </html>`;
 
 export let vrtGroups = [];
-const systemVariants = ['spectrum', 'express', 'spectrum-two'];
-const colors = ['light', 'dark'];
-const scales = ['medium', 'large'];
-const directions = ['ltr', 'rtl'];
-systemVariants.forEach((systemVariant) => {
-    colors.forEach((color) => {
-        scales.forEach((scale) => {
-            directions.forEach((dir) => {
-                const reduceMotion = true;
-                const testHTML = vrtHTML({
-                    systemVariant,
-                    color,
-                    scale,
-                    dir,
-                    reduceMotion,
-                });
-                vrtGroups.push({
-                    name: `vrt-${systemVariant}-${color}-${scale}-${dir}`,
-                    files: '(packages|tools)/*/test/*.test-vrt.js',
-                    testRunnerHtml: testHTML,
-                    browsers: [chromium],
-                });
+['light', 'dark'].forEach((color) => {
+    ['medium', 'large'].forEach((scale) => {
+        ['ltr', 'rtl'].forEach((dir) => {
+            const reduceMotion = true;
+            const testHTML = vrtHTML({
+                color,
+                scale,
+                dir,
+                reduceMotion,
+            });
+            vrtGroups.push({
+                name: `vrt-${color}-${scale}-${dir}`,
+                files: '(packages|tools)/*/test/*.test-vrt.js',
+                testRunnerHtml: testHTML,
+                browsers: [chromium],
             });
         });
     });
@@ -221,7 +213,6 @@ vrtGroups = [
                 name: `vrt-${pkg}-single`,
                 files: `(packages|tools)/${pkg}/test/*.test-vrt.js`,
                 testRunnerHtml: vrtHTML({
-                    systemVariant: 'spectrum',
                     color: 'light',
                     scale: 'medium',
                     dir: 'ltr',
@@ -236,7 +227,6 @@ vrtGroups = [
         name: `vrt-hcm`,
         files: '(packages|tools)/*/test/*.test-vrt.js',
         testRunnerHtml: vrtHTML({
-            systemVariant: 'spectrum',
             color: 'dark',
             scale: 'medium',
             dir: 'ltr',
diff --git a/yarn.lock b/yarn.lock
index 92692c92b67..9df2026ee9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -188,20 +188,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@adobe/spectrum-css-workflow-icons-s2@npm:@adobe/spectrum-css-workflow-icons@4.1.0":
+"@adobe/spectrum-css-workflow-icons@npm:^4.1.0":
   version: 4.1.0
   resolution: "@adobe/spectrum-css-workflow-icons@npm:4.1.0"
   checksum: 10c0/0547f86ce4a0ca2f477a72b80d70c071c79ddd10fb6f0fc6ad7f144e4928c29dfc8af44327f67b54d61d18fd88523701aa5d02bf1b52792ed2e17fceff7f08f0
   languageName: node
   linkType: hard
 
-"@adobe/spectrum-css-workflow-icons@npm:1.7.0":
-  version: 1.7.0
-  resolution: "@adobe/spectrum-css-workflow-icons@npm:1.7.0"
-  checksum: 10c0/75aba04e96664e6801522256e7ed2f9e18bdee07a49fa11806be06c04f82c735f34c8a9381e9ba934196bfb622a3253a1975550e839a98718ae6571e0bd19551
-  languageName: node
-  linkType: hard
-
 "@adobe/spectrum-web-components@workspace:.":
   version: 0.0.0-use.local
   resolution: "@adobe/spectrum-web-components@workspace:."
@@ -220,6 +213,9 @@ __metadata:
     "@rollup/plugin-json": "npm:^6.0.1"
     "@rollup/plugin-node-resolve": "npm:^15.2.3"
     "@sindresorhus/slugify": "npm:^2.2.1"
+    "@spectrum-tools/stylelint-no-missing-var": "npm:^2.0.2"
+    "@spectrum-tools/stylelint-no-unknown-custom-properties": "npm:^2.0.3"
+    "@spectrum-tools/stylelint-no-unused-custom-properties": "npm:^2.0.5"
     "@spectrum-web-components/eslint-plugin": "file:./linters/eslint"
     "@storybook/addon-a11y": "npm:^8.6.12"
     "@storybook/addon-designs": "npm:^8.2.1"
@@ -228,6 +224,7 @@ __metadata:
     "@storybook/addon-links": "npm:^8.6.12"
     "@storybook/blocks": "npm:^8.6.12"
     "@storybook/manager-api": "npm:^8.6.12"
+    "@storybook/preview-api": "npm:^8.6.14"
     "@storybook/theming": "npm:^8.6.12"
     "@storybook/types": "npm:^8.6.12"
     "@storybook/web-components-webpack5": "npm:^8.6.12"
@@ -235,6 +232,7 @@ __metadata:
     "@types/command-line-args": "npm:^5.0.0"
     "@types/command-line-usage": "npm:^5.0.1"
     "@types/common-tags": "npm:^1.4.0"
+    "@types/lodash-es": "npm:^4"
     "@types/mocha": "npm:^10.0.6"
     "@types/node": "npm:^20.11.11"
     "@types/react": "npm:^18.3.20"
@@ -256,7 +254,7 @@ __metadata:
     "@yarnpkg/types": "npm:^4.0.1"
     alex: "npm:^11.0.1"
     cem-plugin-module-file-extensions: "npm:^0.0.5"
-    chromatic: "npm:^11.20.0"
+    chromatic: "npm:^13.0.1"
     chromedriver: "npm:^136.0.0"
     colors: "npm:^1.4.0"
     common-tags: "npm:^1.8.2"
@@ -290,6 +288,7 @@ __metadata:
     lit: "npm:^2.5.0 || ^3.1.3"
     lit-analyzer: "npm:^2.0.3"
     lit-html: "npm:^2.4.0 || ^3.1.3"
+    lodash-es: "npm:^4.17.21"
     mocha-junit-reporter: "npm:^2.0.2"
     next: "npm:^14.2.26"
     node-fetch: "npm:^3.1.0"
@@ -307,6 +306,8 @@ __metadata:
     stylelint: "npm:^16.19.1"
     stylelint-config-standard: "npm:^38.0.0"
     stylelint-header: "npm:^3.0.0"
+    stylelint-order: "npm:^7.0.0"
+    stylelint-use-logical: "npm:^2.1.2"
     tachometer: "npm:^0.7.1"
     tar-stream: "npm:^3.0.0"
     terser: "npm:^4.8.1"
@@ -2404,13 +2405,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/aix-ppc64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/aix-ppc64@npm:0.19.12"
-  conditions: os=aix & cpu=ppc64
-  languageName: node
-  linkType: hard
-
 "@esbuild/aix-ppc64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/aix-ppc64@npm:0.21.4"
@@ -2432,6 +2426,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/aix-ppc64@npm:0.25.5"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/android-arm64@npm:0.17.19"
@@ -2446,13 +2447,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/android-arm64@npm:0.19.12"
-  conditions: os=android & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-arm64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/android-arm64@npm:0.21.4"
@@ -2474,6 +2468,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/android-arm64@npm:0.25.5"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/android-arm@npm:0.17.19"
@@ -2488,13 +2489,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/android-arm@npm:0.19.12"
-  conditions: os=android & cpu=arm
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-arm@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/android-arm@npm:0.21.4"
@@ -2516,6 +2510,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/android-arm@npm:0.25.5"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/android-x64@npm:0.17.19"
@@ -2530,13 +2531,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/android-x64@npm:0.19.12"
-  conditions: os=android & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-x64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/android-x64@npm:0.21.4"
@@ -2558,6 +2552,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/android-x64@npm:0.25.5"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/darwin-arm64@npm:0.17.19"
@@ -2572,13 +2573,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/darwin-arm64@npm:0.19.12"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/darwin-arm64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/darwin-arm64@npm:0.21.4"
@@ -2600,6 +2594,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/darwin-arm64@npm:0.25.5"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/darwin-x64@npm:0.17.19"
@@ -2614,13 +2615,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/darwin-x64@npm:0.19.12"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/darwin-x64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/darwin-x64@npm:0.21.4"
@@ -2642,6 +2636,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/darwin-x64@npm:0.25.5"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/freebsd-arm64@npm:0.17.19"
@@ -2656,13 +2657,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/freebsd-arm64@npm:0.19.12"
-  conditions: os=freebsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/freebsd-arm64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/freebsd-arm64@npm:0.21.4"
@@ -2684,6 +2678,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/freebsd-arm64@npm:0.25.5"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/freebsd-x64@npm:0.17.19"
@@ -2698,13 +2699,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/freebsd-x64@npm:0.19.12"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/freebsd-x64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/freebsd-x64@npm:0.21.4"
@@ -2726,6 +2720,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/freebsd-x64@npm:0.25.5"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/linux-arm64@npm:0.17.19"
@@ -2740,13 +2741,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-arm64@npm:0.19.12"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-arm64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/linux-arm64@npm:0.21.4"
@@ -2768,6 +2762,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/linux-arm64@npm:0.25.5"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/linux-arm@npm:0.17.19"
@@ -2782,13 +2783,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-arm@npm:0.19.12"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-arm@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/linux-arm@npm:0.21.4"
@@ -2810,6 +2804,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/linux-arm@npm:0.25.5"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/linux-ia32@npm:0.17.19"
@@ -2824,13 +2825,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-ia32@npm:0.19.12"
-  conditions: os=linux & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-ia32@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/linux-ia32@npm:0.21.4"
@@ -2852,6 +2846,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/linux-ia32@npm:0.25.5"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/linux-loong64@npm:0.17.19"
@@ -2866,13 +2867,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-loong64@npm:0.19.12"
-  conditions: os=linux & cpu=loong64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-loong64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/linux-loong64@npm:0.21.4"
@@ -2894,6 +2888,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/linux-loong64@npm:0.25.5"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/linux-mips64el@npm:0.17.19"
@@ -2908,13 +2909,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-mips64el@npm:0.19.12"
-  conditions: os=linux & cpu=mips64el
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-mips64el@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/linux-mips64el@npm:0.21.4"
@@ -2936,6 +2930,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/linux-mips64el@npm:0.25.5"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/linux-ppc64@npm:0.17.19"
@@ -2950,13 +2951,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-ppc64@npm:0.19.12"
-  conditions: os=linux & cpu=ppc64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-ppc64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/linux-ppc64@npm:0.21.4"
@@ -2978,6 +2972,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/linux-ppc64@npm:0.25.5"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/linux-riscv64@npm:0.17.19"
@@ -2992,13 +2993,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-riscv64@npm:0.19.12"
-  conditions: os=linux & cpu=riscv64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-riscv64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/linux-riscv64@npm:0.21.4"
@@ -3020,6 +3014,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/linux-riscv64@npm:0.25.5"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/linux-s390x@npm:0.17.19"
@@ -3034,13 +3035,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-s390x@npm:0.19.12"
-  conditions: os=linux & cpu=s390x
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-s390x@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/linux-s390x@npm:0.21.4"
@@ -3062,6 +3056,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/linux-s390x@npm:0.25.5"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/linux-x64@npm:0.17.19"
@@ -3076,13 +3077,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-x64@npm:0.19.12"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-x64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/linux-x64@npm:0.21.4"
@@ -3104,6 +3098,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/linux-x64@npm:0.25.5"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-arm64@npm:0.24.2":
   version: 0.24.2
   resolution: "@esbuild/netbsd-arm64@npm:0.24.2"
@@ -3118,6 +3119,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-arm64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/netbsd-arm64@npm:0.25.5"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/netbsd-x64@npm:0.17.19"
@@ -3132,13 +3140,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/netbsd-x64@npm:0.19.12"
-  conditions: os=netbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/netbsd-x64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/netbsd-x64@npm:0.21.4"
@@ -3160,6 +3161,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/netbsd-x64@npm:0.25.5"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-arm64@npm:0.24.2":
   version: 0.24.2
   resolution: "@esbuild/openbsd-arm64@npm:0.24.2"
@@ -3174,6 +3182,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-arm64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/openbsd-arm64@npm:0.25.5"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/openbsd-x64@npm:0.17.19"
@@ -3188,13 +3203,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/openbsd-x64@npm:0.19.12"
-  conditions: os=openbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/openbsd-x64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/openbsd-x64@npm:0.21.4"
@@ -3216,6 +3224,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/openbsd-x64@npm:0.25.5"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/sunos-x64@npm:0.17.19"
@@ -3230,13 +3245,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/sunos-x64@npm:0.19.12"
-  conditions: os=sunos & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/sunos-x64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/sunos-x64@npm:0.21.4"
@@ -3258,6 +3266,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/sunos-x64@npm:0.25.5"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/win32-arm64@npm:0.17.19"
@@ -3272,13 +3287,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/win32-arm64@npm:0.19.12"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/win32-arm64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/win32-arm64@npm:0.21.4"
@@ -3300,6 +3308,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/win32-arm64@npm:0.25.5"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/win32-ia32@npm:0.17.19"
@@ -3314,13 +3329,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/win32-ia32@npm:0.19.12"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@esbuild/win32-ia32@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/win32-ia32@npm:0.21.4"
@@ -3342,6 +3350,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/win32-ia32@npm:0.25.5"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.17.19":
   version: 0.17.19
   resolution: "@esbuild/win32-x64@npm:0.17.19"
@@ -3356,13 +3371,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/win32-x64@npm:0.19.12"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/win32-x64@npm:0.21.4":
   version: 0.21.4
   resolution: "@esbuild/win32-x64@npm:0.21.4"
@@ -3384,6 +3392,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.25.5":
+  version: 0.25.5
+  resolution: "@esbuild/win32-x64@npm:0.25.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@@ -4243,26 +4258,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pwrs/lit-css@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "@pwrs/lit-css@npm:3.0.0"
+"@pwrs/lit-css@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "@pwrs/lit-css@npm:3.0.1"
   dependencies:
-    cssnano: "npm:^6.1.2"
-  checksum: 10c0/fdffbbf9eba24a60106c0bfc2ae9afdbf6c0c8b3b3da2f998c88232a36bfeaee28b57595a52408e97a22e2612c5d28be992ea3890bc633e279709b97c1757223
+    cssnano: "npm:^7.0.6"
+  checksum: 10c0/f776e3c72821655b20e3783cbec89c2d87f324a72cbe19813d7e1374774af5fe9b96fdb2adc9ac35562452d814c23739a858931ede46cb4282ee03dd284f63b3
   languageName: node
   linkType: hard
 
 "@rollup/plugin-alias@npm:^5.0.1":
-  version: 5.1.0
-  resolution: "@rollup/plugin-alias@npm:5.1.0"
-  dependencies:
-    slash: "npm:^4.0.0"
+  version: 5.1.1
+  resolution: "@rollup/plugin-alias@npm:5.1.1"
   peerDependencies:
     rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: 10c0/fcae5d711b66c098cd237e09e3000e7dec27cf8b0fa82f5a9cd437c4d8d9428194f51d12822b8593b49f3d9e51c6df6a583037cab35763d92555f9c7fcb0db3d
+  checksum: 10c0/00592400563b65689631e820bd72ff440f5cd21021bbd2f21b8558582ab58fd109067da77000091e40fcb8c20cabcd3a09b239a30e012bb47f6bc1a15b68ca59
   languageName: node
   linkType: hard
 
@@ -4645,17 +4658,48 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@spectrum-css/ui-icons-s2@npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10":
+"@spectrum-css/ui-icons@npm:^2.0.0-next.1":
   version: 2.0.0-s2-foundations.10
   resolution: "@spectrum-css/ui-icons@npm:2.0.0-s2-foundations.10"
   checksum: 10c0/3b6dc704e7e4920f6a426aa7dc2baec08a12a8eeee1598d6375d3f79c4cf7c2909a99b309b8467b9ee6968897fe9ea4365da2339ea4e014e5219fa57e804a649
   languageName: node
   linkType: hard
 
-"@spectrum-css/ui-icons@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "@spectrum-css/ui-icons@npm:1.1.2"
-  checksum: 10c0/98fcf7f6a8a46412cc305d02a7c0d4eb4b733aa571143a8117805ac73c37e1df2c74c81d1cbe55a838d9ea027c44f54ec7b3e3b3d43ef0e56fe45ed483ffbeab
+"@spectrum-tools/stylelint-no-missing-var@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@spectrum-tools/stylelint-no-missing-var@npm:2.0.2"
+  dependencies:
+    colors: "npm:^1.4.0"
+  peerDependencies:
+    stylelint: ">=16"
+  checksum: 10c0/b7854a14641d9bf1c786c69ad8ba0c9463f59b3b5f27bc242ad0b62189bc5b22f11f4d03307d2d097a0c513d050c20c2343950c27a5d6094614cc7659f8a99c8
+  languageName: node
+  linkType: hard
+
+"@spectrum-tools/stylelint-no-unknown-custom-properties@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "@spectrum-tools/stylelint-no-unknown-custom-properties@npm:2.0.3"
+  dependencies:
+    colors: "npm:^1.4.0"
+    fast-glob: "npm:^3.3.3"
+    postcss: "npm:^8.5.3"
+    postcss-values-parser: "npm:^6.0.2"
+  peerDependencies:
+    stylelint: ">=16"
+  checksum: 10c0/941eeb3e78e2788d5d176b5a2b7542517e4c3d52e897d5854617b181a8cc781a2139fcd8204ace66018cb7c08244495293d81f29ea401642ba2acdc4cc1b330f
+  languageName: node
+  linkType: hard
+
+"@spectrum-tools/stylelint-no-unused-custom-properties@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "@spectrum-tools/stylelint-no-unused-custom-properties@npm:2.0.5"
+  dependencies:
+    colors: "npm:^1.4.0"
+    postcss: "npm:^8.5.3"
+    postcss-values-parser: "npm:^6.0.2"
+  peerDependencies:
+    stylelint: ">=16"
+  checksum: 10c0/a1287b8212d12def985d998d38e587b87aac69b2ac3c1c7447e3fb6b17f6a89c0765cc67ce1818fbf26ca8bcd9f88d2431060fb40bdaaa6b34b7f89f18d73ec8
   languageName: node
   linkType: hard
 
@@ -4947,8 +4991,19 @@ __metadata:
     "@spectrum-web-components/button-group": "npm:1.7.0"
     "@spectrum-web-components/icon": "npm:1.7.0"
     "@spectrum-web-components/icons-ui": "npm:1.7.0"
+    "@spectrum-web-components/popover": "npm:1.7.0"
     "@spectrum-web-components/reactive-controllers": "npm:1.7.0"
     "@spectrum-web-components/shared": "npm:1.7.0"
+  peerDependencies:
+    "@spectrum-web-components/asset": ">=1"
+    "@spectrum-web-components/base": ">=1"
+    "@spectrum-web-components/button": ">=1"
+    "@spectrum-web-components/button-group": ">=1"
+    "@spectrum-web-components/icon": ">=1"
+    "@spectrum-web-components/icons-ui": ">=1"
+    "@spectrum-web-components/popover": ">=1"
+    "@spectrum-web-components/reactive-controllers": ">=1"
+    "@spectrum-web-components/shared": ">=1"
   languageName: unknown
   linkType: soft
 
@@ -5108,6 +5163,7 @@ __metadata:
   resolution: "@spectrum-web-components/divider@workspace:packages/divider"
   dependencies:
     "@spectrum-web-components/base": "npm:1.7.0"
+    "@spectrum-web-components/styles": "npm:1.7.0"
   languageName: unknown
   linkType: soft
 
@@ -5189,17 +5245,16 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-web-components/icons-ui@workspace:packages/icons-ui"
   dependencies:
-    "@spectrum-css/ui-icons": "npm:^1.1.2"
-    "@spectrum-css/ui-icons-s2": "npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10"
+    "@spectrum-css/ui-icons": "npm:^2.0.0-next.1"
     "@spectrum-web-components/base": "npm:1.7.0"
     "@spectrum-web-components/icon": "npm:1.7.0"
     "@spectrum-web-components/iconset": "npm:1.7.0"
-    case: "npm:^1.6.1"
-    cheerio: "npm:^1.0.0-rc.2"
+    "@types/nunjucks": "npm:^3.2.6"
+    case: "npm:^1.6.3"
+    cheerio: "npm:^1.0.0"
+    colors: "npm:^1.4.0"
     fast-glob: "npm:^3.3.3"
-    fs: "npm:^0.0.1-security"
-    path: "npm:^0.12.7"
-    prettier: "npm:^3.5.3"
+    nunjucks: "npm:^3.2.4"
   languageName: unknown
   linkType: soft
 
@@ -5207,16 +5262,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-web-components/icons-workflow@workspace:packages/icons-workflow"
   dependencies:
-    "@adobe/spectrum-css-workflow-icons": "npm:1.7.0"
-    "@adobe/spectrum-css-workflow-icons-s2": "npm:@adobe/spectrum-css-workflow-icons@4.1.0"
+    "@adobe/spectrum-css-workflow-icons": "npm:^4.1.0"
     "@spectrum-web-components/base": "npm:1.7.0"
     "@spectrum-web-components/icon": "npm:1.7.0"
-    case: "npm:^1.6.1"
-    cheerio: "npm:^1.0.0-rc.2"
+    "@types/nunjucks": "npm:^3.2.6"
+    case: "npm:^1.6.3"
+    cheerio: "npm:^1.0.0"
+    colors: "npm:^1.4.0"
     fast-glob: "npm:^3.3.3"
-    fs: "npm:^0.0.1-security"
-    path: "npm:^0.12.7"
-    prettier: "npm:^3.5.3"
+    nunjucks: "npm:^3.2.4"
   languageName: unknown
   linkType: soft
 
@@ -6011,6 +6065,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-client@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/core-client@npm:7.6.20"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+  checksum: 10c0/cce90a3dfb89e088f1b97aa238a7a6dbfffbc27c8e5298276ccc08d87f931bca20406ad3bcbd56045f161d2493c11b7ee9754e2b86503825d25df61826bcda83
+  languageName: node
+  linkType: hard
+
 "@storybook/core-common@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/core-common@npm:7.6.19"
@@ -6042,7 +6106,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-common@npm:^7.0.0":
+"@storybook/core-common@npm:7.6.20, @storybook/core-common@npm:^7.0.0":
   version: 7.6.20
   resolution: "@storybook/core-common@npm:7.6.20"
   dependencies:
@@ -6170,6 +6234,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/docs-tools@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/docs-tools@npm:7.6.20"
+  dependencies:
+    "@storybook/core-common": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    "@types/doctrine": "npm:^0.0.3"
+    assert: "npm:^2.1.0"
+    doctrine: "npm:^3.0.0"
+    lodash: "npm:^4.17.21"
+  checksum: 10c0/4a20296f6ac8b426d6050addaa6cc5b4d20fe2a5a4895641e7bdbe82c1048e14add35f61e72c0fc4f20e67d84dfc420d4b0af38ad5688a51604bb8dddba4fa81
+  languageName: node
+  linkType: hard
+
 "@storybook/global@npm:^5.0.0":
   version: 5.0.0
   resolution: "@storybook/global@npm:5.0.0"
@@ -6221,6 +6300,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/manager-api@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/manager-api@npm:7.6.20"
+  dependencies:
+    "@storybook/channels": "npm:7.6.20"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/router": "npm:7.6.20"
+    "@storybook/theming": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    memoizerific: "npm:^1.11.3"
+    store2: "npm:^2.14.2"
+    telejson: "npm:^7.2.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10c0/3b773f203b7e95f6e55faca76875282a25ffb9f91061bbdac868976ae2d3e388b0a2306695e5472edbd74312d800eceb539f39c6d5a23f6be00260270eba5531
+  languageName: node
+  linkType: hard
+
 "@storybook/manager-api@npm:8.6.12, @storybook/manager-api@npm:^8.6.12":
   version: 8.6.12
   resolution: "@storybook/manager-api@npm:8.6.12"
@@ -6255,12 +6356,34 @@ __metadata:
   version: 7.6.19
   resolution: "@storybook/preview-api@npm:7.6.19"
   dependencies:
-    "@storybook/channels": "npm:7.6.19"
-    "@storybook/client-logger": "npm:7.6.19"
-    "@storybook/core-events": "npm:7.6.19"
+    "@storybook/channels": "npm:7.6.19"
+    "@storybook/client-logger": "npm:7.6.19"
+    "@storybook/core-events": "npm:7.6.19"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/types": "npm:7.6.19"
+    "@types/qs": "npm:^6.9.5"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    memoizerific: "npm:^1.11.3"
+    qs: "npm:^6.10.0"
+    synchronous-promise: "npm:^2.0.15"
+    ts-dedent: "npm:^2.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10c0/4c43ed02034e07070087308093899df809a14d1152bd1aff90e1f2a285e4f6e7fd5844d0c8de1be64c5883b040b6ae509ef9dae621acbca00ffb3f4eec4882b3
+  languageName: node
+  linkType: hard
+
+"@storybook/preview-api@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/preview-api@npm:7.6.20"
+  dependencies:
+    "@storybook/channels": "npm:7.6.20"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/core-events": "npm:7.6.20"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/types": "npm:7.6.19"
+    "@storybook/types": "npm:7.6.20"
     "@types/qs": "npm:^6.9.5"
     dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
@@ -6269,7 +6392,7 @@ __metadata:
     synchronous-promise: "npm:^2.0.15"
     ts-dedent: "npm:^2.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/4c43ed02034e07070087308093899df809a14d1152bd1aff90e1f2a285e4f6e7fd5844d0c8de1be64c5883b040b6ae509ef9dae621acbca00ffb3f4eec4882b3
+  checksum: 10c0/5c35a579b41f286ea93d4bab5a95641ca1676f2c2430198117962acde25137161d0a630dc79fe8d80460afb4b3946c6b46b9cebe1f2cb02e45ea17224771ab21
   languageName: node
   linkType: hard
 
@@ -6282,6 +6405,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/preview-api@npm:^8.6.14":
+  version: 8.6.14
+  resolution: "@storybook/preview-api@npm:8.6.14"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10c0/2e960ae54453d50d27f706dbfc685881534fbc8c5c7ebf4ebfba7d24f33b007f5814f8f9613cd36feb495e7f82cd746c1f88a04e9e107f5aba9972c886afc040
+  languageName: node
+  linkType: hard
+
 "@storybook/preview@npm:^7.0.0":
   version: 7.6.18
   resolution: "@storybook/preview@npm:7.6.18"
@@ -6311,6 +6443,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/router@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/router@npm:7.6.20"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.20"
+    memoizerific: "npm:^1.11.3"
+    qs: "npm:^6.10.0"
+  checksum: 10c0/0057c348acc84c0a733a9833d405fc20ccc1e434c8a9cf7c8011ed04450a71d05cfc6bbccae1cbff5594b6a4a1bdfeff43a36a8e645cc2643879d13f384ef58e
+  languageName: node
+  linkType: hard
+
 "@storybook/test@npm:8.6.12":
   version: 8.6.12
   resolution: "@storybook/test@npm:8.6.12"
@@ -6343,6 +6486,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/theming@npm:7.6.20"
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/global": "npm:^5.0.0"
+    memoizerific: "npm:^1.11.3"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/7ab97d6a93837900391212ac1638a247d2ccac55bd1261bb34739a11f226040c47da5fc5fde120d4829a3f068b55ce34a2d42c0b14bcfa71e97b18a4288161f3
+  languageName: node
+  linkType: hard
+
 "@storybook/theming@npm:8.6.12, @storybook/theming@npm:^8.6.12":
   version: 8.6.12
   resolution: "@storybook/theming@npm:8.6.12"
@@ -6416,7 +6574,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/web-components@npm:^7.0.0, @storybook/web-components@npm:^7.5.0":
+"@storybook/web-components@npm:^7.0.0":
   version: 7.6.19
   resolution: "@storybook/web-components@npm:7.6.19"
   dependencies:
@@ -6435,6 +6593,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/web-components@npm:^7.5.0":
+  version: 7.6.20
+  resolution: "@storybook/web-components@npm:7.6.20"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/core-client": "npm:7.6.20"
+    "@storybook/docs-tools": "npm:7.6.20"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/manager-api": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    tiny-invariant: "npm:^1.3.1"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    lit: ^2.0.0 || ^3.0.0
+  checksum: 10c0/9244a21d3b666c8919da764867c5dd73665501de7f0c258e34e55330e0eca8919a4674ac86a54d8b05bea55f721c4000c81ae589e3e49a6851a07efd15cc90c6
+  languageName: node
+  linkType: hard
+
 "@surma/rollup-plugin-off-main-thread@npm:^2.2.3":
   version: 2.2.3
   resolution: "@surma/rollup-plugin-off-main-thread@npm:2.2.3"
@@ -6900,6 +7077,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/express-serve-static-core@npm:^4.17.21":
+  version: 4.19.6
+  resolution: "@types/express-serve-static-core@npm:4.19.6"
+  dependencies:
+    "@types/node": "npm:*"
+    "@types/qs": "npm:*"
+    "@types/range-parser": "npm:*"
+    "@types/send": "npm:*"
+  checksum: 10c0/4281f4ead71723f376b3ddf64868ae26244d434d9906c101cf8d436d4b5c779d01bd046e4ea0ed1a394d3e402216fabfa22b1fa4dba501061cd7c81c54045983
+  languageName: node
+  linkType: hard
+
 "@types/express-serve-static-core@npm:^4.17.33":
   version: 4.19.0
   resolution: "@types/express-serve-static-core@npm:4.19.0"
@@ -7120,6 +7309,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash-es@npm:^4":
+  version: 4.17.12
+  resolution: "@types/lodash-es@npm:4.17.12"
+  dependencies:
+    "@types/lodash": "npm:*"
+  checksum: 10c0/5d12d2cede07f07ab067541371ed1b838a33edb3c35cb81b73284e93c6fd0c4bbeaefee984e69294bffb53f62d7272c5d679fdba8e595ff71e11d00f2601dde0
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.17.18
+  resolution: "@types/lodash@npm:4.17.18"
+  checksum: 10c0/d25f86941990403d59dcaae42b42fc9fef55a0a7f398790517e7189300183e425a94127594cbeaf9b5fcdc4f6c2b285e34f4301fb56c92f81ccd8505a41ab5f5
+  languageName: node
+  linkType: hard
+
 "@types/lunr@npm:^2.3.3":
   version: 2.3.7
   resolution: "@types/lunr@npm:2.3.7"
@@ -7279,6 +7484,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/nunjucks@npm:^3.2.6":
+  version: 3.2.6
+  resolution: "@types/nunjucks@npm:3.2.6"
+  checksum: 10c0/bc62c5c9305c0c63a49a55c3553393fdc84d123b4831668212380077ee6646c3ba52bc49e3c651257addf3a47d775707dcefeaf5e1b76cf7f680096939894142
+  languageName: node
+  linkType: hard
+
 "@types/parse-json@npm:^4.0.0":
   version: 4.0.0
   resolution: "@types/parse-json@npm:4.0.0"
@@ -7335,9 +7547,9 @@ __metadata:
   linkType: hard
 
 "@types/prismjs@npm:^1.16.6":
-  version: 1.26.4
-  resolution: "@types/prismjs@npm:1.26.4"
-  checksum: 10c0/996be7d119779c4cbe66e58342115a12d35a02226dae3aaa4a744c9652d5a3939c93c26182e18156965ac4f93575ebb309c3469c36f52e60ee5c0f8f27e874df
+  version: 1.26.5
+  resolution: "@types/prismjs@npm:1.26.5"
+  checksum: 10c0/5619cb449e0d8df098c8759d6f47bf8fdd510abf5dbdfa999e55c6a2545efbd1e209cc85a33d8d9f4ff2898089a1a6d9a70737c9baffaae635c46852c40d384a
   languageName: node
   linkType: hard
 
@@ -8149,39 +8361,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@web/storybook-builder@npm:^0.1.0":
-  version: 0.1.16
-  resolution: "@web/storybook-builder@npm:0.1.16"
-  dependencies:
-    "@rollup/plugin-node-resolve": "npm:^15.1.0"
-    "@rollup/pluginutils": "npm:^5.0.2"
-    "@storybook/core-common": "npm:^7.0.0"
-    "@storybook/mdx2-csf": "npm:^1.0.0"
-    "@storybook/node-logger": "npm:^7.0.0"
-    "@storybook/preview": "npm:^7.0.0"
-    "@web/dev-server": "npm:^0.4.0"
-    "@web/dev-server-core": "npm:^0.7.2"
-    "@web/dev-server-rollup": "npm:^0.6.1"
-    "@web/rollup-plugin-html": "npm:^2.3.0"
-    browser-assert: "npm:^1.2.1"
-    cjs-module-lexer: "npm:^1.2.3"
-    es-module-lexer: "npm:^1.2.1"
-    esbuild: "npm:^0.19.5"
-    express: "npm:^4.18.2"
-    fs-extra: "npm:^11.1.1"
-    glob-promise: "npm:^6.0.3"
-    lodash-es: "npm:^4.17.21"
-    path-browserify: "npm:^1.0.1"
-    remark-external-links: "npm:^8.0.0"
-    remark-slug: "npm:^6.0.0"
-    rollup: "npm:^4.4.1"
-    rollup-plugin-external-globals: "npm:^0.9.0"
-    slash: "npm:^5.1.0"
-  checksum: 10c0/7e1a7042d9425d619db2e88fefda3ca2f1f0ec4ac12601219668d1df00a34dee54ab88a0d547f56c39fed7dac90dd755e3813e12edb3b7b18579064154de6829
-  languageName: node
-  linkType: hard
-
-"@web/storybook-builder@npm:^0.1.7":
+"@web/storybook-builder@npm:^0.1.17, @web/storybook-builder@npm:^0.1.7":
   version: 0.1.21
   resolution: "@web/storybook-builder@npm:0.1.21"
   dependencies:
@@ -8215,12 +8395,12 @@ __metadata:
   linkType: hard
 
 "@web/storybook-framework-web-components@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "@web/storybook-framework-web-components@npm:0.1.2"
+  version: 0.1.3
+  resolution: "@web/storybook-framework-web-components@npm:0.1.3"
   dependencies:
     "@storybook/web-components": "npm:^7.0.0"
-    "@web/storybook-builder": "npm:^0.1.0"
-  checksum: 10c0/0292bc9a73b27a731c7d946a8207eaa6e8e873a7042127eeba7b7b9c75cf62fa11fc8bff8c3c9bca247adb86fe562e376732ebf7bbf1a1446fcd5ef5641c8787
+    "@web/storybook-builder": "npm:^0.1.17"
+  checksum: 10c0/2cedea8ec5261b8e0ee05d572fb7bd3c04d9e46e6f046f83b087ebcd3dbaca3f3b0b3eefb040c75f4edef120ff3a42dbfb61469f321d7835184f7b750a78b0e6
   languageName: node
   linkType: hard
 
@@ -9873,6 +10053,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.24.5":
+  version: 4.25.0
+  resolution: "browserslist@npm:4.25.0"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001718"
+    electron-to-chromium: "npm:^1.5.160"
+    node-releases: "npm:^2.0.19"
+    update-browserslist-db: "npm:^1.1.3"
+  bin:
+    browserslist: cli.js
+  checksum: 10c0/cc16c55b4468b18684a0e1ca303592b38635b1155d6724f172407192737a2f405b8030d87a05813729592793445b3d15e737b0055f901cdecccb29b1e580a1c5
+  languageName: node
+  linkType: hard
+
 "bubble-stream-error@npm:^1.0.0":
   version: 1.0.0
   resolution: "bubble-stream-error@npm:1.0.0"
@@ -10175,6 +10369,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001718":
+  version: 1.0.30001722
+  resolution: "caniuse-lite@npm:1.0.30001722"
+  checksum: 10c0/a1e344c392e0b138f0b215525108877d725665217a5e8e7504897e30379a5a9b858bc44799ccc0e19f4a64bf1e05c15b4a58eb1c9032293f894aa24e8d9f470f
+  languageName: node
+  linkType: hard
+
 "capital-case@npm:^1.0.4":
   version: 1.0.4
   resolution: "capital-case@npm:1.0.4"
@@ -10193,7 +10394,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"case@npm:^1.6.1":
+"case@npm:^1.6.3":
   version: 1.6.3
   resolution: "case@npm:1.6.3"
   checksum: 10c0/43fcbb1dff1c4add94dd2bc98bd923d6616f10bff6959adf686d192c3db7d7ced35410761e1ac94cc4a1f5c41c86406ad79d390805539e421e8a77e553f67223
@@ -10395,18 +10596,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cheerio@npm:^1.0.0-rc.2":
-  version: 1.0.0-rc.12
-  resolution: "cheerio@npm:1.0.0-rc.12"
+"cheerio@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "cheerio@npm:1.1.0"
   dependencies:
     cheerio-select: "npm:^2.1.0"
     dom-serializer: "npm:^2.0.0"
     domhandler: "npm:^5.0.3"
-    domutils: "npm:^3.0.1"
-    htmlparser2: "npm:^8.0.1"
-    parse5: "npm:^7.0.0"
-    parse5-htmlparser2-tree-adapter: "npm:^7.0.0"
-  checksum: 10c0/c85d2f2461e3f024345b78e0bb16ad8e41492356210470dd1e7d5a91391da9fcf6c0a7cb48a9ba8820330153f0cedb4d0a60c7af15d96ecdb3092299b9d9c0cc
+    domutils: "npm:^3.2.2"
+    encoding-sniffer: "npm:^0.2.0"
+    htmlparser2: "npm:^10.0.0"
+    parse5: "npm:^7.3.0"
+    parse5-htmlparser2-tree-adapter: "npm:^7.1.0"
+    parse5-parser-stream: "npm:^7.1.2"
+    undici: "npm:^7.10.0"
+    whatwg-mimetype: "npm:^4.0.0"
+  checksum: 10c0/f7b940a89e1fe77bf6b4fe3b993f17b02a358942cc0b9d3b55ea235a0bc322829dbc47151763ef9986fd237494c00380909af759e46582c72470a10643b85abd
   languageName: node
   linkType: hard
 
@@ -10464,9 +10669,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^11.20.0":
-  version: 11.29.0
-  resolution: "chromatic@npm:11.29.0"
+"chromatic@npm:^13.0.1":
+  version: 13.0.1
+  resolution: "chromatic@npm:13.0.1"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
@@ -10479,7 +10684,7 @@ __metadata:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10c0/4c26e00a170cb40b38f837358fbcab51ab0bdf3644a396b166074cd167696be6a34eeb5583e65425f4392845c8a3052f6d538ea9fb0d09a903100c52d858b4f9
+  checksum: 10c0/0f0a59964a5ec8b1550247e196ab3f85e84470e2275e44c2d4200e2c0a6f1734e4538d563fff788b126f44e868c16a6af6ebe1f5aefe781ff77b777b6bcb8b47
   languageName: node
   linkType: hard
 
@@ -10768,7 +10973,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.1.4, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: 10c0/a1a3f914156960902f46f7f56bc62effc6c94e84b2cae157a526b1c1f74b677a47ec602bf68a61abfa2b42d15b7c5651c6dbe72a43af720bc588dff885b10f95
@@ -11400,8 +11605,8 @@ __metadata:
   linkType: hard
 
 "css-loader@npm:^7.0.0":
-  version: 7.1.1
-  resolution: "css-loader@npm:7.1.1"
+  version: 7.1.2
+  resolution: "css-loader@npm:7.1.2"
   dependencies:
     icss-utils: "npm:^5.1.0"
     postcss: "npm:^8.4.33"
@@ -11419,7 +11624,7 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: 10c0/ebb4ffe68e9df0036fcce66ae182648d4d16b2fdfdc04a5bf7d7783776d389a23be161bb7139a3f842dc75466882544f46d2183bc9399d0bacf83b66a1802b41
+  checksum: 10c0/edec9ed71e3c416c9c6ad41c138834c94baf7629de3b97a3337ae8cec4a45e05c57bdb7c4b4d267229fc04b8970d0d1c0734ded8dcd0ac8c7c286b36facdbbf0
   languageName: node
   linkType: hard
 
@@ -11568,43 +11773,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssnano-preset-default@npm:^6.1.2":
-  version: 6.1.2
-  resolution: "cssnano-preset-default@npm:6.1.2"
+"cssnano-preset-default@npm:^7.0.7":
+  version: 7.0.7
+  resolution: "cssnano-preset-default@npm:7.0.7"
   dependencies:
-    browserslist: "npm:^4.23.0"
+    browserslist: "npm:^4.24.5"
     css-declaration-sorter: "npm:^7.2.0"
-    cssnano-utils: "npm:^4.0.2"
-    postcss-calc: "npm:^9.0.1"
-    postcss-colormin: "npm:^6.1.0"
-    postcss-convert-values: "npm:^6.1.0"
-    postcss-discard-comments: "npm:^6.0.2"
-    postcss-discard-duplicates: "npm:^6.0.3"
-    postcss-discard-empty: "npm:^6.0.3"
-    postcss-discard-overridden: "npm:^6.0.2"
-    postcss-merge-longhand: "npm:^6.0.5"
-    postcss-merge-rules: "npm:^6.1.1"
-    postcss-minify-font-values: "npm:^6.1.0"
-    postcss-minify-gradients: "npm:^6.0.3"
-    postcss-minify-params: "npm:^6.1.0"
-    postcss-minify-selectors: "npm:^6.0.4"
-    postcss-normalize-charset: "npm:^6.0.2"
-    postcss-normalize-display-values: "npm:^6.0.2"
-    postcss-normalize-positions: "npm:^6.0.2"
-    postcss-normalize-repeat-style: "npm:^6.0.2"
-    postcss-normalize-string: "npm:^6.0.2"
-    postcss-normalize-timing-functions: "npm:^6.0.2"
-    postcss-normalize-unicode: "npm:^6.1.0"
-    postcss-normalize-url: "npm:^6.0.2"
-    postcss-normalize-whitespace: "npm:^6.0.2"
-    postcss-ordered-values: "npm:^6.0.2"
-    postcss-reduce-initial: "npm:^6.1.0"
-    postcss-reduce-transforms: "npm:^6.0.2"
-    postcss-svgo: "npm:^6.0.3"
-    postcss-unique-selectors: "npm:^6.0.4"
-  peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/af99021f936763850f5f35dc9e6a9dfb0da30856dea36e0420b011da2a447099471db2a5f3d1f5f52c0489da186caf9a439d8f048a80f82617077efb018333fa
+    cssnano-utils: "npm:^5.0.1"
+    postcss-calc: "npm:^10.1.1"
+    postcss-colormin: "npm:^7.0.3"
+    postcss-convert-values: "npm:^7.0.5"
+    postcss-discard-comments: "npm:^7.0.4"
+    postcss-discard-duplicates: "npm:^7.0.2"
+    postcss-discard-empty: "npm:^7.0.1"
+    postcss-discard-overridden: "npm:^7.0.1"
+    postcss-merge-longhand: "npm:^7.0.5"
+    postcss-merge-rules: "npm:^7.0.5"
+    postcss-minify-font-values: "npm:^7.0.1"
+    postcss-minify-gradients: "npm:^7.0.1"
+    postcss-minify-params: "npm:^7.0.3"
+    postcss-minify-selectors: "npm:^7.0.5"
+    postcss-normalize-charset: "npm:^7.0.1"
+    postcss-normalize-display-values: "npm:^7.0.1"
+    postcss-normalize-positions: "npm:^7.0.1"
+    postcss-normalize-repeat-style: "npm:^7.0.1"
+    postcss-normalize-string: "npm:^7.0.1"
+    postcss-normalize-timing-functions: "npm:^7.0.1"
+    postcss-normalize-unicode: "npm:^7.0.3"
+    postcss-normalize-url: "npm:^7.0.1"
+    postcss-normalize-whitespace: "npm:^7.0.1"
+    postcss-ordered-values: "npm:^7.0.2"
+    postcss-reduce-initial: "npm:^7.0.3"
+    postcss-reduce-transforms: "npm:^7.0.1"
+    postcss-svgo: "npm:^7.0.2"
+    postcss-unique-selectors: "npm:^7.0.4"
+  peerDependencies:
+    postcss: ^8.4.32
+  checksum: 10c0/4c200f1a3a876242be6f6c9d93da1384d61f16ef0f5b36d474600a3dfa323aab7aa04877a96973947b80cfc0781bd6d949216cee6b790a1d71c5cc8fc2ad98a7
   languageName: node
   linkType: hard
 
@@ -11617,12 +11822,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssnano-utils@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "cssnano-utils@npm:4.0.2"
+"cssnano-utils@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "cssnano-utils@npm:5.0.1"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/260b8c8ffa48b908aa77ef129f9b8648ecd92aed405b20e7fe6b8370779dd603530344fc9d96683d53533246e48b36ac9d2aa5a476b4f81c547bbad86d187f35
+    postcss: ^8.4.32
+  checksum: 10c0/e416e58587ccec4d904093a2834c66c44651578a58960019884add376d4f151c5b809674108088140dd57b0787cb7132a083d40ae33a72bf986d03c4b7b7c5f4
   languageName: node
   linkType: hard
 
@@ -11639,15 +11844,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssnano@npm:^6.1.2":
-  version: 6.1.2
-  resolution: "cssnano@npm:6.1.2"
+"cssnano@npm:^7.0.6":
+  version: 7.0.7
+  resolution: "cssnano@npm:7.0.7"
   dependencies:
-    cssnano-preset-default: "npm:^6.1.2"
-    lilconfig: "npm:^3.1.1"
+    cssnano-preset-default: "npm:^7.0.7"
+    lilconfig: "npm:^3.1.3"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/4df0dc0389b34b38acb09b7cfb07267b0eda95349c6d5e9b7666acc7200bb33359650869a60168e9d878298b05f4ad2c7f070815c90551720a3f4e1037f79691
+    postcss: ^8.4.32
+  checksum: 10c0/4455a0a7a889eb129b8291788815b136dc0dc756b2dc9c1788bb3f5bfbc956e16f131220ea53e5ce824e5642f1843d937ae4ec6d3693259463c8e24a87f0b104
   languageName: node
   linkType: hard
 
@@ -11987,7 +12192,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"default-gateway@npm:^6.0.0, default-gateway@npm:^6.0.3":
+"default-gateway@npm:^6.0.0":
   version: 6.0.3
   resolution: "default-gateway@npm:6.0.3"
   dependencies:
@@ -12419,6 +12624,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domutils@npm:^3.2.1, domutils@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "domutils@npm:3.2.2"
+  dependencies:
+    dom-serializer: "npm:^2.0.0"
+    domelementtype: "npm:^2.3.0"
+    domhandler: "npm:^5.0.3"
+  checksum: 10c0/47938f473b987ea71cd59e59626eb8666d3aa8feba5266e45527f3b636c7883cca7e582d901531961f742c519d7514636b7973353b648762b2e3bedbf235fada
+  languageName: node
+  linkType: hard
+
 "dot-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "dot-case@npm:3.0.4"
@@ -12555,6 +12771,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.5.160":
+  version: 1.5.167
+  resolution: "electron-to-chromium@npm:1.5.167"
+  checksum: 10c0/eba07d2d8ae99e1e29f1af380d005c378f71608617ca904cbe4e2b5b72b102b46c5687bdbef855e2214876729655661b2c20248cce425d54c8d40f0785cb998a
+  languageName: node
+  linkType: hard
+
 "electron-to-chromium@npm:^1.5.73":
   version: 1.5.128
   resolution: "electron-to-chromium@npm:1.5.128"
@@ -12611,6 +12834,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"encoding-sniffer@npm:^0.2.0":
+  version: 0.2.1
+  resolution: "encoding-sniffer@npm:0.2.1"
+  dependencies:
+    iconv-lite: "npm:^0.6.3"
+    whatwg-encoding: "npm:^3.1.1"
+  checksum: 10c0/d6b591880788f3baf8dd1744636dd189d24a1ec93e6f9817267c60ac3458a5191ca70ab1a186fb67731beff1c3489c6527dfdc4718158ed8460ab2f400dd5e7d
+  languageName: node
+  linkType: hard
+
 "encoding@npm:^0.1.13":
   version: 0.1.13
   resolution: "encoding@npm:0.1.13"
@@ -12694,6 +12927,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "entities@npm:6.0.1"
+  checksum: 10c0/ed836ddac5acb34341094eb495185d527bd70e8632b6c0d59548cbfa23defdbae70b96f9a405c82904efa421230b5b3fd2283752447d737beffd3f3e6ee74414
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0, env-paths@npm:^2.2.1":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -12957,14 +13197,14 @@ __metadata:
   linkType: hard
 
 "esbuild-plugin-lit-css@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "esbuild-plugin-lit-css@npm:3.0.0"
+  version: 3.0.2
+  resolution: "esbuild-plugin-lit-css@npm:3.0.2"
   dependencies:
-    "@pwrs/lit-css": "npm:^3.0.0"
+    "@pwrs/lit-css": "npm:^3.0.1"
   peerDependencies:
-    esbuild: ^0.16.17 || ^0.17.16 || ^0.18.1 || ^0.19.5 || ^0.20.0
+    esbuild: ">=0.16.17 <0.24.0"
     lit: ^2.7.2 || ^3.0.0
-  checksum: 10c0/f4d446bbc8c15ae6fabe364858346c7b3fcf38c8f3c0a15642190a219198837f81cf10d512afb313f87d64f5c6f74848b1d82b8748bd74dcc6d0c2d672764c74
+  checksum: 10c0/2e4fc7c593bf0c7344e2b5f947bd60ddd7c2691f45817fc1bfac5c839f49aaaf502da743a70d57622525d3378d2c6b3a24a16c1dc5f3be903b30444447c264e5
   languageName: node
   linkType: hard
 
@@ -13219,86 +13459,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.19.5":
-  version: 0.19.12
-  resolution: "esbuild@npm:0.19.12"
-  dependencies:
-    "@esbuild/aix-ppc64": "npm:0.19.12"
-    "@esbuild/android-arm": "npm:0.19.12"
-    "@esbuild/android-arm64": "npm:0.19.12"
-    "@esbuild/android-x64": "npm:0.19.12"
-    "@esbuild/darwin-arm64": "npm:0.19.12"
-    "@esbuild/darwin-x64": "npm:0.19.12"
-    "@esbuild/freebsd-arm64": "npm:0.19.12"
-    "@esbuild/freebsd-x64": "npm:0.19.12"
-    "@esbuild/linux-arm": "npm:0.19.12"
-    "@esbuild/linux-arm64": "npm:0.19.12"
-    "@esbuild/linux-ia32": "npm:0.19.12"
-    "@esbuild/linux-loong64": "npm:0.19.12"
-    "@esbuild/linux-mips64el": "npm:0.19.12"
-    "@esbuild/linux-ppc64": "npm:0.19.12"
-    "@esbuild/linux-riscv64": "npm:0.19.12"
-    "@esbuild/linux-s390x": "npm:0.19.12"
-    "@esbuild/linux-x64": "npm:0.19.12"
-    "@esbuild/netbsd-x64": "npm:0.19.12"
-    "@esbuild/openbsd-x64": "npm:0.19.12"
-    "@esbuild/sunos-x64": "npm:0.19.12"
-    "@esbuild/win32-arm64": "npm:0.19.12"
-    "@esbuild/win32-ia32": "npm:0.19.12"
-    "@esbuild/win32-x64": "npm:0.19.12"
-  dependenciesMeta:
-    "@esbuild/aix-ppc64":
-      optional: true
-    "@esbuild/android-arm":
-      optional: true
-    "@esbuild/android-arm64":
-      optional: true
-    "@esbuild/android-x64":
-      optional: true
-    "@esbuild/darwin-arm64":
-      optional: true
-    "@esbuild/darwin-x64":
-      optional: true
-    "@esbuild/freebsd-arm64":
-      optional: true
-    "@esbuild/freebsd-x64":
-      optional: true
-    "@esbuild/linux-arm":
-      optional: true
-    "@esbuild/linux-arm64":
-      optional: true
-    "@esbuild/linux-ia32":
-      optional: true
-    "@esbuild/linux-loong64":
-      optional: true
-    "@esbuild/linux-mips64el":
-      optional: true
-    "@esbuild/linux-ppc64":
-      optional: true
-    "@esbuild/linux-riscv64":
-      optional: true
-    "@esbuild/linux-s390x":
-      optional: true
-    "@esbuild/linux-x64":
-      optional: true
-    "@esbuild/netbsd-x64":
-      optional: true
-    "@esbuild/openbsd-x64":
-      optional: true
-    "@esbuild/sunos-x64":
-      optional: true
-    "@esbuild/win32-arm64":
-      optional: true
-    "@esbuild/win32-ia32":
-      optional: true
-    "@esbuild/win32-x64":
-      optional: true
-  bin:
-    esbuild: bin/esbuild
-  checksum: 10c0/0f2d21ffe24ebead64843f87c3aebe2e703a5ed9feb086a0728b24907fac2eb9923e4a79857d3df9059c915739bd7a870dd667972eae325c67f478b592b8582d
-  languageName: node
-  linkType: hard
-
 "esbuild@npm:^0.21.0":
   version: 0.21.4
   resolution: "esbuild@npm:0.21.4"
@@ -13465,6 +13625,92 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.25.0":
+  version: 0.25.5
+  resolution: "esbuild@npm:0.25.5"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.25.5"
+    "@esbuild/android-arm": "npm:0.25.5"
+    "@esbuild/android-arm64": "npm:0.25.5"
+    "@esbuild/android-x64": "npm:0.25.5"
+    "@esbuild/darwin-arm64": "npm:0.25.5"
+    "@esbuild/darwin-x64": "npm:0.25.5"
+    "@esbuild/freebsd-arm64": "npm:0.25.5"
+    "@esbuild/freebsd-x64": "npm:0.25.5"
+    "@esbuild/linux-arm": "npm:0.25.5"
+    "@esbuild/linux-arm64": "npm:0.25.5"
+    "@esbuild/linux-ia32": "npm:0.25.5"
+    "@esbuild/linux-loong64": "npm:0.25.5"
+    "@esbuild/linux-mips64el": "npm:0.25.5"
+    "@esbuild/linux-ppc64": "npm:0.25.5"
+    "@esbuild/linux-riscv64": "npm:0.25.5"
+    "@esbuild/linux-s390x": "npm:0.25.5"
+    "@esbuild/linux-x64": "npm:0.25.5"
+    "@esbuild/netbsd-arm64": "npm:0.25.5"
+    "@esbuild/netbsd-x64": "npm:0.25.5"
+    "@esbuild/openbsd-arm64": "npm:0.25.5"
+    "@esbuild/openbsd-x64": "npm:0.25.5"
+    "@esbuild/sunos-x64": "npm:0.25.5"
+    "@esbuild/win32-arm64": "npm:0.25.5"
+    "@esbuild/win32-ia32": "npm:0.25.5"
+    "@esbuild/win32-x64": "npm:0.25.5"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-arm64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/aba8cbc11927fa77562722ed5e95541ce2853f67ad7bdc40382b558abc2e0ec57d92ffb820f082ba2047b4ef9f3bc3da068cdebe30dfd3850cfa3827a78d604e
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1, escalade@npm:^3.1.2":
   version: 3.1.2
   resolution: "escalade@npm:3.1.2"
@@ -14223,7 +14469,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"express@npm:^4.16.4, express@npm:^4.17.3, express@npm:^4.18.2":
+"express@npm:^4.16.4":
   version: 4.19.2
   resolution: "express@npm:4.19.2"
   dependencies:
@@ -14971,15 +15217,8 @@ __metadata:
 
 "fs.realpath@npm:^1.0.0":
   version: 1.0.0
-  resolution: "fs.realpath@npm:1.0.0"
-  checksum: 10c0/444cf1291d997165dfd4c0d58b69f0e4782bfd9149fd72faa4fe299e68e0e93d6db941660b37dd29153bf7186672ececa3b50b7e7249477b03fdf850f287c948
-  languageName: node
-  linkType: hard
-
-"fs@npm:^0.0.1-security":
-  version: 0.0.1-security
-  resolution: "fs@npm:0.0.1-security"
-  checksum: 10c0/e0c0b585ec6f7483d63d067215d9d6bb2e0dba5912060d32554c8e566a0e22ee65e4c2a2b0567476efbbfb47682554b4711d69cab49950d01f227a3dfa7d671a
+  resolution: "fs.realpath@npm:1.0.0"
+  checksum: 10c0/444cf1291d997165dfd4c0d58b69f0e4782bfd9149fd72faa4fe299e68e0e93d6db941660b37dd29153bf7186672ececa3b50b7e7249477b03fdf850f287c948
   languageName: node
   linkType: hard
 
@@ -16024,13 +16263,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-entities@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "html-entities@npm:2.4.0"
-  checksum: 10c0/42bbd5d91f451625d7e35aaed41c8cd110054c0d0970764cb58df467b3f27f20199e8cf7b4aebc8d4eeaf17a27c0d1fb165f2852db85de200995d0f009c9011d
-  languageName: node
-  linkType: hard
-
 "html-escaper@npm:^2.0.0, html-escaper@npm:^2.0.2":
   version: 2.0.2
   resolution: "html-escaper@npm:2.0.2"
@@ -16134,6 +16366,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"htmlparser2@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "htmlparser2@npm:10.0.0"
+  dependencies:
+    domelementtype: "npm:^2.3.0"
+    domhandler: "npm:^5.0.3"
+    domutils: "npm:^3.2.1"
+    entities: "npm:^6.0.0"
+  checksum: 10c0/47cfa37e529c86a7ba9a1e0e6f951ad26ef8ca5af898ab6e8916fa02c0264c1453b4a65f28b7b8a7f9d0d29b5a70abead8203bf8b3f07bc69407e85e7d9a68e4
+  languageName: node
+  linkType: hard
+
 "htmlparser2@npm:^6.1.0":
   version: 6.1.0
   resolution: "htmlparser2@npm:6.1.0"
@@ -16256,9 +16500,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-proxy-middleware@npm:^2.0.3":
-  version: 2.0.6
-  resolution: "http-proxy-middleware@npm:2.0.6"
+"http-proxy-middleware@npm:^2.0.9":
+  version: 2.0.9
+  resolution: "http-proxy-middleware@npm:2.0.9"
   dependencies:
     "@types/http-proxy": "npm:^1.17.8"
     http-proxy: "npm:^1.18.1"
@@ -16270,7 +16514,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/express":
       optional: true
-  checksum: 10c0/25a0e550dd1900ee5048a692e0e9b2b6339d06d487a705d90c47e359e9c6561d648cd7862d001d090e651c9efffa1b6e5160fcf1f299b5fa4935f76e9754eb11
+  checksum: 10c0/8e9032af625f7c9f2f0d318f6cdb14eb725cc16ffe7b4ccccea25cf591fa819bb7c3bb579e0b543e0ae9c73059b505a6d728290c757bff27bae526a6ed11c05e
   languageName: node
   linkType: hard
 
@@ -16379,7 +16623,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.6.3":
+"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.3":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
   dependencies:
@@ -17354,6 +17598,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-url-superb@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "is-url-superb@npm:4.0.0"
+  checksum: 10c0/354ea8246d5b5a828e41bb4ed66c539a7b74dc878ee4fa84b148df312b14b08118579d64f0893b56a0094e3b4b1e6082d2fbe2e3792998d7edffde1c0f3dfdd9
+  languageName: node
+  linkType: hard
+
 "is-url@npm:^1.2.4":
   version: 1.2.4
   resolution: "is-url@npm:1.2.4"
@@ -18421,13 +18672,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "lilconfig@npm:3.1.1"
-  checksum: 10c0/311b559794546894e3fe176663427326026c1c644145be9e8041c58e268aa9328799b8dfe7e4dd8c6a4ae305feae95a1c9e007db3569f35b42b6e1bc8274754c
-  languageName: node
-  linkType: hard
-
 "lilconfig@npm:^3.1.3":
   version: 3.1.3
   resolution: "lilconfig@npm:3.1.3"
@@ -20190,14 +20434,14 @@ __metadata:
   linkType: hard
 
 "mini-css-extract-plugin@npm:^2.4.4":
-  version: 2.9.0
-  resolution: "mini-css-extract-plugin@npm:2.9.0"
+  version: 2.9.2
+  resolution: "mini-css-extract-plugin@npm:2.9.2"
   dependencies:
     schema-utils: "npm:^4.0.0"
     tapable: "npm:^2.2.1"
   peerDependencies:
     webpack: ^5.0.0
-  checksum: 10c0/46e20747ea250420db8a82801b9779299ce3cd5ec4d6dd75e00904c39cc80f0f01decaa534b8cb9658d7d3b656b919cb2cc84b1ba7e2394d2d6548578a5c2901
+  checksum: 10c0/5d3218dbd7db48b572925ddac05162a7415bf81b321f1a0c07016ec643cb5720c8a836ae68d45f5de826097a3013b601706c9c5aacb7f610dc2041b271de2ce0
   languageName: node
   linkType: hard
 
@@ -21708,13 +21952,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5-htmlparser2-tree-adapter@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "parse5-htmlparser2-tree-adapter@npm:7.0.0"
+"parse5-htmlparser2-tree-adapter@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "parse5-htmlparser2-tree-adapter@npm:7.1.0"
+  dependencies:
+    domhandler: "npm:^5.0.3"
+    parse5: "npm:^7.0.0"
+  checksum: 10c0/e5a4e0b834c84c9e244b5749f8d007f4baaeafac7a1da2c54be3421ffd9ef8fdec4f198bf55cda22e88e6ba95e9943f6ed5aa3ae5900b39972ebf5dc8c3f4722
+  languageName: node
+  linkType: hard
+
+"parse5-parser-stream@npm:^7.1.2":
+  version: 7.1.2
+  resolution: "parse5-parser-stream@npm:7.1.2"
   dependencies:
-    domhandler: "npm:^5.0.2"
     parse5: "npm:^7.0.0"
-  checksum: 10c0/e820cacb8486e6f7ede403327d18480df086d70e32ede2f6654d8c3a8b4b8dc4a4d5c21c03c18a92ba2466c513b93ca63be4a138dd73cd0995f384eb3b9edf11
+  checksum: 10c0/e236c61000d38ecad369e725a48506b051cebad8abb00e6d4e8bff7aa85c183820fcb45db1559cc90955bdbbdbd665ea94c41259594e74566fff411478dc7fcb
   languageName: node
   linkType: hard
 
@@ -21755,6 +22008,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse5@npm:^7.3.0":
+  version: 7.3.0
+  resolution: "parse5@npm:7.3.0"
+  dependencies:
+    entities: "npm:^6.0.0"
+  checksum: 10c0/7fd2e4e247e85241d6f2a464d0085eed599a26d7b0a5233790c49f53473232eb85350e8133344d9b3fd58b89339e7ad7270fe1f89d28abe50674ec97b87f80b5
+  languageName: node
+  linkType: hard
+
 "parseurl@npm:^1.3.2, parseurl@npm:~1.3.2, parseurl@npm:~1.3.3":
   version: 1.3.3
   resolution: "parseurl@npm:1.3.3"
@@ -21968,16 +22230,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path@npm:^0.12.7":
-  version: 0.12.7
-  resolution: "path@npm:0.12.7"
-  dependencies:
-    process: "npm:^0.11.1"
-    util: "npm:^0.10.3"
-  checksum: 10c0/f795ce5438a988a590c7b6dfd450ec9baa1c391a8be4c2dea48baa6e0f5b199e56cd83b8c9ebf3991b81bea58236d2c32bdafe2c17a2e70c3a2e4c69891ade59
-  languageName: node
-  linkType: hard
-
 "pathval@npm:^2.0.0":
   version: 2.0.0
   resolution: "pathval@npm:2.0.0"
@@ -22040,6 +22292,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picomatch@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "picomatch@npm:4.0.2"
+  checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc
+  languageName: node
+  linkType: hard
+
 "pidtree@npm:^0.6.0":
   version: 0.6.0
   resolution: "pidtree@npm:0.6.0"
@@ -22269,27 +22528,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-calc@npm:^8.2.3":
-  version: 8.2.4
-  resolution: "postcss-calc@npm:8.2.4"
+"postcss-calc@npm:^10.1.1":
+  version: 10.1.1
+  resolution: "postcss-calc@npm:10.1.1"
   dependencies:
-    postcss-selector-parser: "npm:^6.0.9"
+    postcss-selector-parser: "npm:^7.0.0"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.2.2
-  checksum: 10c0/8518a429488c3283ff1560c83a511f6f772329bc61d88875eb7c83e13a8683b7ccbdccaa9946024cf1553da3eacd2f40fcbcebf1095f7fdeb432bf86bc6ba6ba
+    postcss: ^8.4.38
+  checksum: 10c0/616d3b7b15a524fa86ff1b2be7d9f2369c7794fd44c946f117380e519b064e9ac8d1414ea29de0238b130f2b2a5eb2fb59758cc5478af40b04a012992fb1075b
   languageName: node
   linkType: hard
 
-"postcss-calc@npm:^9.0.1":
-  version: 9.0.1
-  resolution: "postcss-calc@npm:9.0.1"
+"postcss-calc@npm:^8.2.3":
+  version: 8.2.4
+  resolution: "postcss-calc@npm:8.2.4"
   dependencies:
-    postcss-selector-parser: "npm:^6.0.11"
+    postcss-selector-parser: "npm:^6.0.9"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
     postcss: ^8.2.2
-  checksum: 10c0/e0df07337162dbcaac5d6e030c7fd289e21da8766a9daca5d6b2b3c8094bb524ae5d74c70048ea7fe5fe4960ce048c60ac97922d917c3bbff34f58e9d2b0eb0e
+  checksum: 10c0/8518a429488c3283ff1560c83a511f6f772329bc61d88875eb7c83e13a8683b7ccbdccaa9946024cf1553da3eacd2f40fcbcebf1095f7fdeb432bf86bc6ba6ba
   languageName: node
   linkType: hard
 
@@ -22307,17 +22566,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-colormin@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "postcss-colormin@npm:6.1.0"
+"postcss-colormin@npm:^7.0.3":
+  version: 7.0.3
+  resolution: "postcss-colormin@npm:7.0.3"
   dependencies:
-    browserslist: "npm:^4.23.0"
+    browserslist: "npm:^4.24.5"
     caniuse-api: "npm:^3.0.0"
     colord: "npm:^2.9.3"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/0802963fa0d8f2fe408b2e088117670f5303c69a58c135f0ecf0e5ceff69e95e87111b22c4e29c9adb2f69aa8d3bc175f4e8e8708eeb99c9ffc36c17064de427
+    postcss: ^8.4.32
+  checksum: 10c0/49d0a7d523f74b455b4e2680cb2e31974871354d9037d6e8dfac00e9ebdced6585533208f43d006946a705ca4e683ba007bcd23fb37df6005c5db37ead0c66a9
   languageName: node
   linkType: hard
 
@@ -22333,15 +22592,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-convert-values@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "postcss-convert-values@npm:6.1.0"
+"postcss-convert-values@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "postcss-convert-values@npm:7.0.5"
   dependencies:
-    browserslist: "npm:^4.23.0"
+    browserslist: "npm:^4.24.5"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/a80066965cb58fe8fcaf79f306b32c83fc678e1f0678e43f4db3e9fee06eed6db92cf30631ad348a17492769d44757400493c91a33ee865ee8dedea9234a11f5
+    postcss: ^8.4.32
+  checksum: 10c0/c9ba3ce8a1d3cae775187c57c9234c03135b4abb6d2eb7f094ca59d9ae7dbcb52ed3f8771d35040b60d522bff40caa72d329914bead63577b66e8d4be589a6a7
   languageName: node
   linkType: hard
 
@@ -22354,12 +22613,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-discard-comments@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-discard-comments@npm:6.0.2"
+"postcss-discard-comments@npm:^7.0.4":
+  version: 7.0.4
+  resolution: "postcss-discard-comments@npm:7.0.4"
+  dependencies:
+    postcss-selector-parser: "npm:^7.1.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/338a1fcba7e2314d956e5e5b9bd1e12e6541991bf85ac72aed6e229a029bf60edb31f11576b677623576169aa7d9c75e1be259ac7b50d0b735b841b5518f9da9
+    postcss: ^8.4.32
+  checksum: 10c0/30081465fec33baa8507782d25cd96559cb3487c023d331a517cf94027d065c26227962a40b1806885400d76d3d27d27f9e7b14807866c7d9bb63c3030b5312a
   languageName: node
   linkType: hard
 
@@ -22372,12 +22633,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-discard-duplicates@npm:^6.0.3":
-  version: 6.0.3
-  resolution: "postcss-discard-duplicates@npm:6.0.3"
+"postcss-discard-duplicates@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "postcss-discard-duplicates@npm:7.0.2"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/24d2f00e54668f2837eb38a64b1751d7a4a73b2752f9749e61eb728f1fae837984bc2b339f7f5207aff5f66f72551253489114b59b9ba21782072677a81d7d1b
+    postcss: ^8.4.32
+  checksum: 10c0/83035b1158ee0f0c8c6441c9f0fcd3c83027b19c4b1d19802d140ba02535623520edb4d52db40d06881ad2b31a9d859445cf56aeaf0de5183c3edd22eaf7e023
   languageName: node
   linkType: hard
 
@@ -22390,12 +22651,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-discard-empty@npm:^6.0.3":
-  version: 6.0.3
-  resolution: "postcss-discard-empty@npm:6.0.3"
+"postcss-discard-empty@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-discard-empty@npm:7.0.1"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/1af08bb29f18eda41edf3602b257d89a4cf0a16f79fc773cfebd4a37251f8dbd9b77ac18efe55d0677d000b43a8adf2ef9328d31961c810e9433a38494a1fa65
+    postcss: ^8.4.32
+  checksum: 10c0/c11c5571f573a147db911d2d82b4102eff2930fa1d5cc63c25c2cbd9f496a91a7364075f322b61e0eb9c217fc86f06680deb0fb858a32e29148abd7cb2617f8f
   languageName: node
   linkType: hard
 
@@ -22408,12 +22669,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-discard-overridden@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-discard-overridden@npm:6.0.2"
+"postcss-discard-overridden@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-discard-overridden@npm:7.0.1"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/fda70ef3cd4cb508369c5bbbae44d7760c40ec9f2e65df1cd1b6e0314317fb1d25ae7f64987ca84e66889c1e9d1862487a6ce391c159dfe04d536597bfc5030d
+    postcss: ^8.4.32
+  checksum: 10c0/413c68411f1f3b9ee2a862eca4599f54e6b35a5556af12518032b4f6b3f47c57a6db1cc4565692fb8633b7a1fd26e096f5cd86e50aaf702375d621efbd819d05
   languageName: node
   linkType: hard
 
@@ -22429,15 +22690,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-merge-longhand@npm:^6.0.5":
-  version: 6.0.5
-  resolution: "postcss-merge-longhand@npm:6.0.5"
+"postcss-merge-longhand@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "postcss-merge-longhand@npm:7.0.5"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
-    stylehacks: "npm:^6.1.1"
+    stylehacks: "npm:^7.0.5"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/5a223a7f698c05ab42e9997108a7ff27ea1e0c33a11a353d65a04fc89c3b5b750b9e749550d76b6406329117a055adfc79dde7fee48dca5c8e167a2854ae3fea
+    postcss: ^8.4.32
+  checksum: 10c0/148fe5fc33f967f6e579a184a4bb82c8e6ffb1d5f720a2c7aa85849a56ee8d23ce3f026d6f6b45a38f63f761fcfafe3b82ac54da7bf080fd58eb743be4c4ce46
   languageName: node
   linkType: hard
 
@@ -22455,17 +22716,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-merge-rules@npm:^6.1.1":
-  version: 6.1.1
-  resolution: "postcss-merge-rules@npm:6.1.1"
+"postcss-merge-rules@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "postcss-merge-rules@npm:7.0.5"
   dependencies:
-    browserslist: "npm:^4.23.0"
+    browserslist: "npm:^4.24.5"
     caniuse-api: "npm:^3.0.0"
-    cssnano-utils: "npm:^4.0.2"
-    postcss-selector-parser: "npm:^6.0.16"
+    cssnano-utils: "npm:^5.0.1"
+    postcss-selector-parser: "npm:^7.1.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/6d8952dbb19b1e59bf5affe0871fa1be6515103466857cff5af879d6cf619659f8642ec7a931cabb7cdbd393d8c1e91748bf70bee70fa3edea010d4e25786d04
+    postcss: ^8.4.32
+  checksum: 10c0/e7225a4606b7dcdabd895c4cafa5fdb97a6588c7a59d8b189725443ad2d3c45603eac8a66929c5470b0b99a56b4daca3e79f7e19d15f9cccfde2a69ba2b66137
   languageName: node
   linkType: hard
 
@@ -22480,14 +22741,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-minify-font-values@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "postcss-minify-font-values@npm:6.1.0"
+"postcss-minify-font-values@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-minify-font-values@npm:7.0.1"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/0d6567170c22a7db42096b5eac298f041614890fbe01759a9fa5ccda432f2bb09efd399d92c11bf6675ae13ccd259db4602fad3c358317dee421df5f7ab0a003
+    postcss: ^8.4.32
+  checksum: 10c0/2327863b0f4c025855ba9bb88951ce92985ce1c64bab24002b5d75f024268c396735af311db7342e8ca5ebc80c18c282d7cb63292c36a457348eda041c5fe197
   languageName: node
   linkType: hard
 
@@ -22504,16 +22765,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-minify-gradients@npm:^6.0.3":
-  version: 6.0.3
-  resolution: "postcss-minify-gradients@npm:6.0.3"
+"postcss-minify-gradients@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-minify-gradients@npm:7.0.1"
   dependencies:
     colord: "npm:^2.9.3"
-    cssnano-utils: "npm:^4.0.2"
+    cssnano-utils: "npm:^5.0.1"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/7fcbcec94fe5455b89fe1b424a451198e60e0407c894bbacdc062d9fdef2f8571b483b5c3bb17f22d2f1249431251b2de22e1e4e8b0614d10624f8ee6e71afd2
+    postcss: ^8.4.32
+  checksum: 10c0/19df86ff3d8767f86300ebeac06dba951e26e069590bfb52bc24b0e73fca27c411395870053ffda4272d738b344b478a43a0c92bd23b466e274dd95379c8dc97
   languageName: node
   linkType: hard
 
@@ -22530,16 +22791,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-minify-params@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "postcss-minify-params@npm:6.1.0"
+"postcss-minify-params@npm:^7.0.3":
+  version: 7.0.3
+  resolution: "postcss-minify-params@npm:7.0.3"
   dependencies:
-    browserslist: "npm:^4.23.0"
-    cssnano-utils: "npm:^4.0.2"
+    browserslist: "npm:^4.24.5"
+    cssnano-utils: "npm:^5.0.1"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/e5c38c3e5fb42e2ca165764f983716e57d854a63a477f7389ccc94cd2ab8123707006613bd7f29acc6eafd296fff513aa6d869c98ac52590f886d641cb21a59e
+    postcss: ^8.4.32
+  checksum: 10c0/e7e7b5faeb85e0fc0d0ebbc388ef3ad402e9d85b5d77da6b38e4b16d32c496e79072a6fc13318e4bcafe761616babec1075d9afbf0e9966451a71945ae058de9
   languageName: node
   linkType: hard
 
@@ -22554,14 +22815,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-minify-selectors@npm:^6.0.4":
-  version: 6.0.4
-  resolution: "postcss-minify-selectors@npm:6.0.4"
+"postcss-minify-selectors@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "postcss-minify-selectors@npm:7.0.5"
   dependencies:
-    postcss-selector-parser: "npm:^6.0.16"
+    cssesc: "npm:^3.0.0"
+    postcss-selector-parser: "npm:^7.1.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/695ec2e1e3a7812b0cabe1105d0ed491760be3d8e9433914fb5af1fc30a84e6dc24089cd31b7e300de620b8e7adf806526c1acf8dd14077a7d1d2820c60a327c
+    postcss: ^8.4.32
+  checksum: 10c0/ebc1b5bee2e7d5d57926d7b47c54845531929badd8f445505ab4add4614ce24453977a1cc9ca5667ddcfacfd3f735bf90a3fe6558de7aa4b85bc2e690915abd8
   languageName: node
   linkType: hard
 
@@ -22651,12 +22913,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-charset@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-normalize-charset@npm:6.0.2"
+"postcss-normalize-charset@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-normalize-charset@npm:7.0.1"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/af32a3b4cf94163d728b8aa935b2494c9f69fbc96a33b35f67ae15dbdef7fcc8732569df97cbaaf20ca6c0103c39adad0cfce2ba07ffed283796787f6c36f410
+    postcss: ^8.4.32
+  checksum: 10c0/e879ecbd8a2f40b427ac8800c34ad6670fa820838ad27950c34b628e9248ce763433045bb4254f65c02d74825f41377a9cf278f8cdcf7284acbd6a3b33af83fe
   languageName: node
   linkType: hard
 
@@ -22671,14 +22933,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-display-values@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-normalize-display-values@npm:6.0.2"
+"postcss-normalize-display-values@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-normalize-display-values@npm:7.0.1"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/782761850c7e697fdb6c3ff53076de716a71b60f9e835efb2f7ef238de347c88b5d55f0d43cf5c608e1ee58de65360e3d9fccd5f20774bba08ded7c87d8a5651
+    postcss: ^8.4.32
+  checksum: 10c0/00d77846972e5261aebb38594f8999cfb84fe745ec9d3c2a4d8a91a1b6e703f02b0ccc9342e8fd4fa1f3e5e1f85d4aac2446dae898690ef41bc06de95008b975
   languageName: node
   linkType: hard
 
@@ -22693,14 +22955,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-positions@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-normalize-positions@npm:6.0.2"
+"postcss-normalize-positions@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-normalize-positions@npm:7.0.1"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/9fdd42a47226bbda5f68774f3c4c3a90eb4fa708aef5a997c6a52fe6cac06585c9774038fe3bc1aa86a203c29223b8d8db6ebe7580c1aa293154f2b48db0b038
+    postcss: ^8.4.32
+  checksum: 10c0/00f43f9635905ae11ba04cec9272cfa783b7793058ea8e576cb3cf8ea59df6f7bbdc34fdcba82724aaf789ee1f0697266e7ce98818aeca640889d67906f87f9e
   languageName: node
   linkType: hard
 
@@ -22715,14 +22977,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-repeat-style@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-normalize-repeat-style@npm:6.0.2"
+"postcss-normalize-repeat-style@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-normalize-repeat-style@npm:7.0.1"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/9133ccbdf1286920c1cd0d01c1c5fa0bd3251b717f2f3e47d691dcc44978ac1dc419d20d9ae5428bd48ee542059e66b823ba699356f5968ccced5606c7c7ca34
+    postcss: ^8.4.32
+  checksum: 10c0/de4f1350ae979e34e29f7f9e1ade23dcdfdccb4c290889ab45d15935c3af8218858e9fe06fc4af3fe5dc0478d719c7ce7d0d995dd9f786c93d5d3eaa7187d6ed
   languageName: node
   linkType: hard
 
@@ -22737,14 +22999,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-string@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-normalize-string@npm:6.0.2"
+"postcss-normalize-string@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-normalize-string@npm:7.0.1"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/fecc2d52c4029b24fecf2ca2fb45df5dbdf9f35012194ad4ea80bc7be3252cdcb21a0976400902320595aa6178f2cc625cc804c6b6740aef6efa42105973a205
+    postcss: ^8.4.32
+  checksum: 10c0/da3bc2458529544abad32860cd835d27b010a7fb16b121f0b64f44775a332795de0cd1a0280a380f868e4958997bd13a0275aca8e404c835ce120cf8ab69f4db
   languageName: node
   linkType: hard
 
@@ -22759,14 +23021,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-timing-functions@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-normalize-timing-functions@npm:6.0.2"
+"postcss-normalize-timing-functions@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-normalize-timing-functions@npm:7.0.1"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/a22af0b3374704e59ae70bbbcc66b7029137e284f04e30a2ad548818d1540d6c1ed748dd8f689b9b6df5c1064085a00ad07b6f7e25ffaad49d4e661b616cdeae
+    postcss: ^8.4.32
+  checksum: 10c0/9389555176925bb31428220285b89b8cec2c2669f3ebb8f033463e7356cf1f54d0baaf71ddc097beb7adc418b9d2ea3cc628886fbf8e782c74ddaab4c2290749
   languageName: node
   linkType: hard
 
@@ -22782,15 +23044,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-unicode@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "postcss-normalize-unicode@npm:6.1.0"
+"postcss-normalize-unicode@npm:^7.0.3":
+  version: 7.0.3
+  resolution: "postcss-normalize-unicode@npm:7.0.3"
   dependencies:
-    browserslist: "npm:^4.23.0"
+    browserslist: "npm:^4.24.5"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/ff5746670d94dd97b49a0955c3c71ff516fb4f54bbae257f877d179bacc44a62e50a0fd6e7ddf959f2ca35c335de4266b0c275d880bb57ad7827189339ab1582
+    postcss: ^8.4.32
+  checksum: 10c0/6057b098b777ebe83060bde4278b258b50893d20761621931cbc93a50e3674ab634633e2539ef87c7a70348fc936bb2eeec87c470a296db15218b6bd16b33397
   languageName: node
   linkType: hard
 
@@ -22806,14 +23068,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-url@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-normalize-url@npm:6.0.2"
+"postcss-normalize-url@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-normalize-url@npm:7.0.1"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/4718f1c0657788d2c560b340ee8e0a4eb3eb053eba6fbbf489e9a6e739b4c5f9ce1957f54bd03497c50a1f39962bf6ab9ff6ba4976b69dd160f6afd1670d69b7
+    postcss: ^8.4.32
+  checksum: 10c0/d04ff170efcc77aef221f20f2a1a783c95564898321521a5940c17cf6cbdfd4f44b005efab77feebfae17873b17a30248c14c6f6166b4dfe382e524d6a3a935b
   languageName: node
   linkType: hard
 
@@ -22828,14 +23090,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-whitespace@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-normalize-whitespace@npm:6.0.2"
+"postcss-normalize-whitespace@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-normalize-whitespace@npm:7.0.1"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/d5275a88e29a894aeb83a2a833e816d2456dbf3f39961628df596ce205dcc4895186a023812ff691945e0804241ccc53e520d16591b5812288474b474bbaf652
+    postcss: ^8.4.32
+  checksum: 10c0/efbdbe1d0bc1dfed08168f417968f112996c6985efe0ba48137a4811052a65b46ac702b74afbb3110a51515aff67ffe1e139ce9a723e8d8543977e4cc6269911
   languageName: node
   linkType: hard
 
@@ -22851,15 +23113,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-ordered-values@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-ordered-values@npm:6.0.2"
+"postcss-ordered-values@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "postcss-ordered-values@npm:7.0.2"
   dependencies:
-    cssnano-utils: "npm:^4.0.2"
+    cssnano-utils: "npm:^5.0.1"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/aece23a289228aa804217a85f8da198d22b9123f02ca1310b81834af380d6fbe115e4300683599b4a2ab7f1c6a1dbd6789724c47c38e2b0a3774f2ea4b4f0963
+    postcss: ^8.4.32
+  checksum: 10c0/77e4daa70e120864aac5a0f5c71cc8b66408829eabe45203d4d86c93229425c26e030cf75d6f328432935c28a50c5294108aa2439fa8da256aa1852cc71c84f3
   languageName: node
   linkType: hard
 
@@ -22875,15 +23137,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-reduce-initial@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "postcss-reduce-initial@npm:6.1.0"
+"postcss-reduce-initial@npm:^7.0.3":
+  version: 7.0.3
+  resolution: "postcss-reduce-initial@npm:7.0.3"
   dependencies:
-    browserslist: "npm:^4.23.0"
+    browserslist: "npm:^4.24.5"
     caniuse-api: "npm:^3.0.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/a8f28cf51ce9a1b9423cce1a01c1d7cbee90125930ec36435a0073e73aef402d90affe2fd3600c964b679cf738869fda447b95a9acce74414e9d67d5c6ba8646
+    postcss: ^8.4.32
+  checksum: 10c0/a8321fe8187ae00e1ee15385a927772149ed7a4d3130b2ee1c55a31055e2e9de550164b5fb615fda9c9c03d3e01e4630c1457f1732ef21704cb3b25a9ade6291
   languageName: node
   linkType: hard
 
@@ -22898,14 +23160,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-reduce-transforms@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "postcss-reduce-transforms@npm:6.0.2"
+"postcss-reduce-transforms@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-reduce-transforms@npm:7.0.1"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/755ef27b3d083f586ac831f0c611a66e76f504d27e2100dc7674f6b86afad597901b4520cb889fe58ca70e852aa7fd0c0acb69a63d39dfe6a95860b472394e7c
+    postcss: ^8.4.32
+  checksum: 10c0/b379ea1d87ea27f331b472c8a21b4c6bb3c114ea573b66743f6fb4a52cab758c1930cd194df873d347901e347c47035e1353be6cf4250e469ec512f599385957
   languageName: node
   linkType: hard
 
@@ -22925,7 +23187,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9":
+"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9":
   version: 6.0.13
   resolution: "postcss-selector-parser@npm:6.0.13"
   dependencies:
@@ -22935,17 +23197,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.16":
-  version: 6.0.16
-  resolution: "postcss-selector-parser@npm:6.0.16"
-  dependencies:
-    cssesc: "npm:^3.0.0"
-    util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/0e11657cb3181aaf9ff67c2e59427c4df496b4a1b6a17063fae579813f80af79d444bf38f82eeb8b15b4679653fd3089e66ef0283f9aab01874d885e6cf1d2cf
-  languageName: node
-  linkType: hard
-
-"postcss-selector-parser@npm:^7.1.0":
+"postcss-selector-parser@npm:^7.0.0, postcss-selector-parser@npm:^7.1.0":
   version: 7.1.0
   resolution: "postcss-selector-parser@npm:7.1.0"
   dependencies:
@@ -22955,6 +23207,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-sorting@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "postcss-sorting@npm:9.1.0"
+  peerDependencies:
+    postcss: ^8.4.20
+  checksum: 10c0/1faea84bf00d85929228d297587798fa9c384a02966a28a942777b2de553a8186087cfdcd0aca3dd40e4b2793aee050792d807458db8cf4880867c98c7bf22fd
+  languageName: node
+  linkType: hard
+
 "postcss-svgo@npm:^5.1.0":
   version: 5.1.0
   resolution: "postcss-svgo@npm:5.1.0"
@@ -22967,15 +23228,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-svgo@npm:^6.0.3":
-  version: 6.0.3
-  resolution: "postcss-svgo@npm:6.0.3"
+"postcss-svgo@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "postcss-svgo@npm:7.0.2"
   dependencies:
     postcss-value-parser: "npm:^4.2.0"
-    svgo: "npm:^3.2.0"
+    svgo: "npm:^3.3.2"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/994b15a88cbb411f32cfa98957faa5623c76f2d75fede51f5f47238f06b367ebe59c204fecbdaf21ccb9e727239a4b290087e04c502392658a0c881ddfbd61f2
+    postcss: ^8.4.32
+  checksum: 10c0/03b97c6d572180fbacbae5d75f6ecab00a4185ea450bc2cb7ed4cbe1e6ffe87d49bf2502c5ddd3052deff3de80729b57df8a46e4ed8b78aa6a557d4b7f305a4a
   languageName: node
   linkType: hard
 
@@ -22990,14 +23251,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-unique-selectors@npm:^6.0.4":
-  version: 6.0.4
-  resolution: "postcss-unique-selectors@npm:6.0.4"
+"postcss-unique-selectors@npm:^7.0.4":
+  version: 7.0.4
+  resolution: "postcss-unique-selectors@npm:7.0.4"
   dependencies:
-    postcss-selector-parser: "npm:^6.0.16"
+    postcss-selector-parser: "npm:^7.1.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/bfb99d8a7c675c93f2e65c9d9d563477bfd46fdce9e2727d42d57982b31ccbaaf944e8034bfbefe48b3119e77fba7eb1b181c19b91cb3a5448058fa66a7c9ae9
+    postcss: ^8.4.32
+  checksum: 10c0/ae47c2abc2dab647e026674a1239c2531236177e39078ef7fb091df9cdeb60f8e453c65909e5dd91efe2f3bb76c67f31035f137a9c71cbc8732d631329c79261
   languageName: node
   linkType: hard
 
@@ -23008,6 +23269,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-values-parser@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "postcss-values-parser@npm:6.0.2"
+  dependencies:
+    color-name: "npm:^1.1.4"
+    is-url-superb: "npm:^4.0.0"
+    quote-unquote: "npm:^1.0.0"
+  peerDependencies:
+    postcss: ^8.2.9
+  checksum: 10c0/633b8bc7c46f7b6e2b1cb1f33aa0222a5cacb7f485eb41e6f902b5f37ab9884cd8e7e7b0706afb7e3c7766d85096b59e65f59a1eaefac55e2fc952a24f23bcb8
+  languageName: node
+  linkType: hard
+
 "postcss@npm:8.4.31, postcss@npm:^8, postcss@npm:^8.4.5":
   version: 8.4.31
   resolution: "postcss@npm:8.4.31"
@@ -23042,18 +23316,18 @@ __metadata:
   linkType: hard
 
 "posthtml-attrs-parser@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "posthtml-attrs-parser@npm:1.1.0"
-  checksum: 10c0/7bab93ac1931188d10a69c450c350959b80b1e7bb147ed9bb31964f4d2222dd750467a7039ae0528776adc268352ec04a56935cec148767e727f9dc167c4205b
+  version: 1.1.2
+  resolution: "posthtml-attrs-parser@npm:1.1.2"
+  checksum: 10c0/2aac87de69e6514771982cf8d84c4e146608dd7684b07dc1244650945a8cdedcbf4d169420993ee82fa3e5130b1fb7cbf4f80597b25e7fd926089f99f6000f08
   languageName: node
   linkType: hard
 
 "posthtml-match-helper@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "posthtml-match-helper@npm:2.0.0"
+  version: 2.0.3
+  resolution: "posthtml-match-helper@npm:2.0.3"
   peerDependencies:
     posthtml: ^0.16.6
-  checksum: 10c0/9082622f4bfc2f0046aa839eaee4cf1d764b50cb640f94036afdc172614b72370e74bb989e028817b5f646f48f44f3505325066970095cd2678e255fc75028dc
+  checksum: 10c0/845de578a32174ee7f045689391b2c9ddbf66cd0b8ed71745009d56da8a219ac97fe14c08dc38f4a5dfc7042c658c767253cb3521432c15829de8ff3208f5824
   languageName: node
   linkType: hard
 
@@ -23214,7 +23488,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"process@npm:^0.11.1, process@npm:^0.11.10":
+"process@npm:^0.11.10":
   version: 0.11.10
   resolution: "process@npm:0.11.10"
   checksum: 10c0/40c3ce4b7e6d4b8c3355479df77aeed46f81b279818ccdc500124e6a5ab882c0cc81ff7ea16384873a95a74c4570b01b120f287abbdd4c877931460eca6084b3
@@ -23536,6 +23810,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"quote-unquote@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "quote-unquote@npm:1.0.0"
+  checksum: 10c0/eba86bb7f68ada486f5608c5c71cc155235f0408b8a0a180436cdf2457ae86f56a17de6b0bc5a1b7ae5f27735b3b789662cdf7f3b8195ac816cd0289085129ec
+  languageName: node
+  linkType: hard
+
 "ramda@npm:0.29.0":
   version: 0.29.0
   resolution: "ramda@npm:0.29.0"
@@ -24440,12 +24721,12 @@ __metadata:
   linkType: hard
 
 "rollup-plugin-lit-css@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "rollup-plugin-lit-css@npm:5.0.0"
+  version: 5.0.2
+  resolution: "rollup-plugin-lit-css@npm:5.0.2"
   dependencies:
-    "@pwrs/lit-css": "npm:^3.0.0"
+    "@pwrs/lit-css": "npm:^3.0.1"
     "@rollup/pluginutils": "npm:^5.1.0"
-  checksum: 10c0/d120256619a7a5df06d14a911126a36458f46f32181e33740ce1372205b39ec8ac6f7827d736ae2431b0fae7a04cae568bdb8d8a891194e1a9708f900b831997
+  checksum: 10c0/0674185662371cc756d1e395f41891b7a2d81e59f5186383d58a4122571ef135bb4bb6d7a1d94f8b4ad0a3993ffa59da7d4420fc5aae650d219715c94c17084d
   languageName: node
   linkType: hard
 
@@ -24504,21 +24785,24 @@ __metadata:
   linkType: hard
 
 "rollup-plugin-visualizer@npm:^5.12.0":
-  version: 5.12.0
-  resolution: "rollup-plugin-visualizer@npm:5.12.0"
+  version: 5.14.0
+  resolution: "rollup-plugin-visualizer@npm:5.14.0"
   dependencies:
     open: "npm:^8.4.0"
-    picomatch: "npm:^2.3.1"
+    picomatch: "npm:^4.0.2"
     source-map: "npm:^0.7.4"
     yargs: "npm:^17.5.1"
   peerDependencies:
+    rolldown: 1.x
     rollup: 2.x || 3.x || 4.x
   peerDependenciesMeta:
+    rolldown:
+      optional: true
     rollup:
       optional: true
   bin:
     rollup-plugin-visualizer: dist/bin/cli.js
-  checksum: 10c0/0e44a641223377ebb472bb10f2b22efa773b5f6fbe8d54f197f07c68d7a432cbf00abad79a0aa1570f70c673c792f24700d926d663ed9a4d0ad8406ae5a0f4e4
+  checksum: 10c0/ec6ca9ed125bce9994ba49a340bda730661d8e8dc5c5dc014dc757185182e1eda49c6708f990cb059095e71a3741a5248f1e6ba0ced7056020692888e06b1ddf
   languageName: node
   linkType: hard
 
@@ -24534,13 +24818,13 @@ __metadata:
   linkType: hard
 
 "rollup-plugin-workbox@npm:^8.1.0":
-  version: 8.1.0
-  resolution: "rollup-plugin-workbox@npm:8.1.0"
+  version: 8.1.2
+  resolution: "rollup-plugin-workbox@npm:8.1.2"
   dependencies:
-    esbuild: "npm:^0.19.5"
+    esbuild: "npm:^0.25.0"
     pretty-bytes: "npm:^5.5.0"
     workbox-build: "npm:^7.0.0"
-  checksum: 10c0/007199794a9dbc613508a4cb8e6071a762c639e54b60c5cf695aa222ac6322bea25875d4efb6d03245997cc24a353f8b4d4732e4406c477986c32acf8ba0ec22
+  checksum: 10c0/ab34eac65469e1ad6f4c0ddbc05cb8a8870586a314cc3e0d3dd08d6ca18fc1873a227a729530e59182984aebb60ec62ddaabb322dfa8eb188886b7b4a6c85cbe
   languageName: node
   linkType: hard
 
@@ -24784,6 +25068,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"schema-utils@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "schema-utils@npm:4.3.2"
+  dependencies:
+    "@types/json-schema": "npm:^7.0.9"
+    ajv: "npm:^8.9.0"
+    ajv-formats: "npm:^2.1.1"
+    ajv-keywords: "npm:^5.1.0"
+  checksum: 10c0/981632f9bf59f35b15a9bcdac671dd183f4946fe4b055ae71a301e66a9797b95e5dd450de581eb6cca56fb6583ce8f24d67b2d9f8e1b2936612209697f6c277e
+  languageName: node
+  linkType: hard
+
 "section-matter@npm:^1.0.0":
   version: 1.0.0
   resolution: "section-matter@npm:1.0.0"
@@ -26083,15 +26379,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylehacks@npm:^6.1.1":
-  version: 6.1.1
-  resolution: "stylehacks@npm:6.1.1"
+"stylehacks@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "stylehacks@npm:7.0.5"
   dependencies:
-    browserslist: "npm:^4.23.0"
-    postcss-selector-parser: "npm:^6.0.16"
+    browserslist: "npm:^4.24.5"
+    postcss-selector-parser: "npm:^7.1.0"
   peerDependencies:
-    postcss: ^8.4.31
-  checksum: 10c0/2dd2bccfd8311ff71492e63a7b8b86c3d7b1fff55d4ba5a2357aff97743e633d351cdc2f5ae3c0057637d00dab4ef5fc5b218a1b370e4585a41df22b5a5128be
+    postcss: ^8.4.32
+  checksum: 10c0/66a15cbbac00b15ee68d01bdaf8b044c8e4e9e13fc27a6971d4ec39f09553769bf1e11245abe21393b8fead66255cf2e03d84265e3ee265bd6183eb499f8774a
   languageName: node
   linkType: hard
 
@@ -26127,6 +26423,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylelint-order@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "stylelint-order@npm:7.0.0"
+  dependencies:
+    postcss: "npm:^8.5.3"
+    postcss-sorting: "npm:^9.1.0"
+  peerDependencies:
+    stylelint: ^16.18.0
+  checksum: 10c0/202ea7f0ce44b272f0ee8745383e347520663ef3defb9478c2dae8f33378950e32138815d038228db49383cab7b111148b9b9521e409311a91047cfc4740d507
+  languageName: node
+  linkType: hard
+
+"stylelint-use-logical@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "stylelint-use-logical@npm:2.1.2"
+  peerDependencies:
+    stylelint: ">= 11 < 17"
+  checksum: 10c0/a9b178725e14b65c05c01f0fc8f979546bde0da87ff4314fb169a91a5b1f809448b89c0dbab7fc6d71c3cb2696fc89f54bb56bf373dce2a616335b301587b3e8
+  languageName: node
+  linkType: hard
+
 "stylelint@npm:^16.19.1":
   version: 16.19.1
   resolution: "stylelint@npm:16.19.1"
@@ -26267,9 +26584,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svgo@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "svgo@npm:3.2.0"
+"svgo@npm:^3.3.2":
+  version: 3.3.2
+  resolution: "svgo@npm:3.3.2"
   dependencies:
     "@trysound/sax": "npm:0.2.0"
     commander: "npm:^7.2.0"
@@ -26280,7 +26597,7 @@ __metadata:
     picocolors: "npm:^1.0.0"
   bin:
     svgo: ./bin/svgo
-  checksum: 10c0/28fa9061ccbcf2e3616d48d1feb613aaa05f8f290a329beb0e585914f1864385152934a7d4d683a4609fafbae3d51666633437c359c5c5ef74fb58ad09092a7c
+  checksum: 10c0/a6badbd3d1d6dbb177f872787699ab34320b990d12e20798ecae915f0008796a0f3c69164f1485c9def399e0ce0a5683eb4a8045e51a5e1c364bb13a0d9f79e1
   languageName: node
   linkType: hard
 
@@ -27285,6 +27602,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici@npm:^7.10.0":
+  version: 7.10.0
+  resolution: "undici@npm:7.10.0"
+  checksum: 10c0/756ac876a8df845bc89eb8348c35d33a0ff63c17eb45b664075c961a7fbd4a398f94f9dce438262f55fe66e4bbb0a46aa63a3fd58ce51361c616aff11a270450
+  languageName: node
+  linkType: hard
+
 "unherit@npm:^3.0.0":
   version: 3.0.0
   resolution: "unherit@npm:3.0.0"
@@ -27650,7 +27974,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.1.1":
+"update-browserslist-db@npm:^1.1.1, update-browserslist-db@npm:^1.1.3":
   version: 1.1.3
   resolution: "update-browserslist-db@npm:1.1.3"
   dependencies:
@@ -27767,15 +28091,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util@npm:^0.10.3":
-  version: 0.10.4
-  resolution: "util@npm:0.10.4"
-  dependencies:
-    inherits: "npm:2.0.3"
-  checksum: 10c0/d29f6893e406b63b088ce9924da03201df89b31490d4d011f1c07a386ea4b3dbe907464c274023c237da470258e1805d806c7e4009a5974cd6b1d474b675852a
-  languageName: node
-  linkType: hard
-
 "util@npm:^0.12.4, util@npm:^0.12.5":
   version: 0.12.5
   resolution: "util@npm:0.12.5"
@@ -28173,9 +28488,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-dev-middleware@npm:^7.1.0":
-  version: 7.2.1
-  resolution: "webpack-dev-middleware@npm:7.2.1"
+"webpack-dev-middleware@npm:^7.4.2":
+  version: 7.4.2
+  resolution: "webpack-dev-middleware@npm:7.4.2"
   dependencies:
     colorette: "npm:^2.0.10"
     memfs: "npm:^4.6.0"
@@ -28188,17 +28503,18 @@ __metadata:
   peerDependenciesMeta:
     webpack:
       optional: true
-  checksum: 10c0/e3a61098d5fe3325f698f8f97395f8625b96717e690170f3e4704c939dc96cbb57a871730d3ba4d19f06975b558d4f283bdcc801d823463a12da0dbc3844b531
+  checksum: 10c0/2aa873ef57a7095d7fba09400737b6066adc3ded229fd6eba89a666f463c2614c68e01ae58f662c9cdd74f0c8da088523d972329bf4a054e470bc94feb8bcad0
   languageName: node
   linkType: hard
 
 "webpack-dev-server@npm:^5.0.2":
-  version: 5.0.4
-  resolution: "webpack-dev-server@npm:5.0.4"
+  version: 5.2.2
+  resolution: "webpack-dev-server@npm:5.2.2"
   dependencies:
     "@types/bonjour": "npm:^3.5.13"
     "@types/connect-history-api-fallback": "npm:^1.5.4"
     "@types/express": "npm:^4.17.21"
+    "@types/express-serve-static-core": "npm:^4.17.21"
     "@types/serve-index": "npm:^1.9.4"
     "@types/serve-static": "npm:^1.15.5"
     "@types/sockjs": "npm:^0.3.36"
@@ -28209,23 +28525,20 @@ __metadata:
     colorette: "npm:^2.0.10"
     compression: "npm:^1.7.4"
     connect-history-api-fallback: "npm:^2.0.0"
-    default-gateway: "npm:^6.0.3"
-    express: "npm:^4.17.3"
+    express: "npm:^4.21.2"
     graceful-fs: "npm:^4.2.6"
-    html-entities: "npm:^2.4.0"
-    http-proxy-middleware: "npm:^2.0.3"
+    http-proxy-middleware: "npm:^2.0.9"
     ipaddr.js: "npm:^2.1.0"
     launch-editor: "npm:^2.6.1"
     open: "npm:^10.0.3"
     p-retry: "npm:^6.2.0"
-    rimraf: "npm:^5.0.5"
     schema-utils: "npm:^4.2.0"
     selfsigned: "npm:^2.4.1"
     serve-index: "npm:^1.9.1"
     sockjs: "npm:^0.3.24"
     spdy: "npm:^4.0.2"
-    webpack-dev-middleware: "npm:^7.1.0"
-    ws: "npm:^8.16.0"
+    webpack-dev-middleware: "npm:^7.4.2"
+    ws: "npm:^8.18.0"
   peerDependencies:
     webpack: ^5.0.0
   peerDependenciesMeta:
@@ -28235,7 +28548,7 @@ __metadata:
       optional: true
   bin:
     webpack-dev-server: bin/webpack-dev-server.js
-  checksum: 10c0/f3b5ffac798bdfdb7cc3d24000bde49816eab42fc6062641e6e61cd0057e8c268d495f8162fb97aeaee5e273c91457e90a99ba780526744ad2002e9e99e57036
+  checksum: 10c0/58d7ddb054cdbba22ddfa3d6644194abf6197c14530e1e64ccd7f0b670787245eea966ee72e95abd551c54313627bde0d227a0d2a1e2557102b1a3504ac0b7f1
   languageName: node
   linkType: hard
 
@@ -28328,7 +28641,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack@npm:^5, webpack@npm:^5.90.3":
+"webpack@npm:^5":
   version: 5.91.0
   resolution: "webpack@npm:5.91.0"
   dependencies:
@@ -28365,6 +28678,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack@npm:^5.90.3":
+  version: 5.99.9
+  resolution: "webpack@npm:5.99.9"
+  dependencies:
+    "@types/eslint-scope": "npm:^3.7.7"
+    "@types/estree": "npm:^1.0.6"
+    "@types/json-schema": "npm:^7.0.15"
+    "@webassemblyjs/ast": "npm:^1.14.1"
+    "@webassemblyjs/wasm-edit": "npm:^1.14.1"
+    "@webassemblyjs/wasm-parser": "npm:^1.14.1"
+    acorn: "npm:^8.14.0"
+    browserslist: "npm:^4.24.0"
+    chrome-trace-event: "npm:^1.0.2"
+    enhanced-resolve: "npm:^5.17.1"
+    es-module-lexer: "npm:^1.2.1"
+    eslint-scope: "npm:5.1.1"
+    events: "npm:^3.2.0"
+    glob-to-regexp: "npm:^0.4.1"
+    graceful-fs: "npm:^4.2.11"
+    json-parse-even-better-errors: "npm:^2.3.1"
+    loader-runner: "npm:^4.2.0"
+    mime-types: "npm:^2.1.27"
+    neo-async: "npm:^2.6.2"
+    schema-utils: "npm:^4.3.2"
+    tapable: "npm:^2.1.1"
+    terser-webpack-plugin: "npm:^5.3.11"
+    watchpack: "npm:^2.4.1"
+    webpack-sources: "npm:^3.2.3"
+  peerDependenciesMeta:
+    webpack-cli:
+      optional: true
+  bin:
+    webpack: bin/webpack.js
+  checksum: 10c0/34ec3f19b50bccaf27929e5e5b901b25047f2d414acba7d0967dc98eb4f404d107fb1a4b63095edbca2b006ff5815f1720b131e10b20664b074dfc86b7ffa717
+  languageName: node
+  linkType: hard
+
 "websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4":
   version: 0.7.4
   resolution: "websocket-driver@npm:0.7.4"
@@ -28392,6 +28742,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"whatwg-encoding@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "whatwg-encoding@npm:3.1.1"
+  dependencies:
+    iconv-lite: "npm:0.6.3"
+  checksum: 10c0/273b5f441c2f7fda3368a496c3009edbaa5e43b71b09728f90425e7f487e5cef9eb2b846a31bd760dd8077739c26faf6b5ca43a5f24033172b003b72cf61a93e
+  languageName: node
+  linkType: hard
+
 "whatwg-fetch@npm:^3.5.0":
   version: 3.6.2
   resolution: "whatwg-fetch@npm:3.6.2"
@@ -28399,6 +28758,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"whatwg-mimetype@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "whatwg-mimetype@npm:4.0.0"
+  checksum: 10c0/a773cdc8126b514d790bdae7052e8bf242970cebd84af62fb2f35a33411e78e981f6c0ab9ed1fe6ec5071b09d5340ac9178e05b52d35a9c4bcf558ba1b1551df
+  languageName: node
+  linkType: hard
+
 "whatwg-url@npm:^11.0.0":
   version: 11.0.0
   resolution: "whatwg-url@npm:11.0.0"
@@ -28868,7 +29234,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:8.16.0, ws@npm:>=7.4.6, ws@npm:^8.16.0":
+"ws@npm:8.16.0, ws@npm:>=7.4.6":
   version: 8.16.0
   resolution: "ws@npm:8.16.0"
   peerDependencies: