@spectrum-web-components/styles 1.1.0-beta.9 → 1.1.1

package/tokens-v2/{spectrum/global-vars.css → system-theme-bridge.css}

@@ -86,6 +86,25 @@
     --system-accordion-item-content-line-height-cjk: var(
         --spectrum-cjk-line-height-100
     );
+    --system-accordion-size-s-item-height: var(--spectrum-component-height-100);
+    --system-accordion-size-s-disclosure-indicator-height: var(
+        --spectrum-component-height-75
+    );
+    --system-accordion-size-s-component-edge-to-text: var(
+        --spectrum-component-edge-to-text-50
+    );
+    --system-accordion-size-s-item-header-font-size: var(
+        --spectrum-font-size-200
+    );
+    --system-accordion-size-s-item-content-font-size: var(
+        --spectrum-body-size-xs
+    );
+    --system-accordion-size-s-item-header-top-to-text-space: var(
+        --spectrum-accordion-top-to-text-regular-small
+    );
+    --system-accordion-size-s-item-header-bottom-to-text-space: var(
+        --spectrum-accordion-bottom-to-text-regular-small
+    );
     --system-accordion-item-height: var(--spectrum-component-height-200);
     --system-accordion-size-m-item-height: var(--spectrum-component-height-200);
     --system-accordion-disclosure-indicator-height: var(
@@ -120,25 +139,6 @@
     --system-accordion-size-m-item-header-bottom-to-text-space: var(
         --spectrum-accordion-bottom-to-text-regular-medium
     );
-    --system-accordion-size-s-item-height: var(--spectrum-component-height-100);
-    --system-accordion-size-s-disclosure-indicator-height: var(
-        --spectrum-component-height-75
-    );
-    --system-accordion-size-s-component-edge-to-text: var(
-        --spectrum-component-edge-to-text-50
-    );
-    --system-accordion-size-s-item-header-font-size: var(
-        --spectrum-font-size-200
-    );
-    --system-accordion-size-s-item-content-font-size: var(
-        --spectrum-body-size-xs
-    );
-    --system-accordion-size-s-item-header-top-to-text-space: var(
-        --spectrum-accordion-top-to-text-regular-small
-    );
-    --system-accordion-size-s-item-header-bottom-to-text-space: var(
-        --spectrum-accordion-bottom-to-text-regular-small
-    );
     --system-accordion-size-l-item-height: var(--spectrum-component-height-300);
     --system-accordion-size-l-disclosure-indicator-height: var(
         --spectrum-component-height-200
@@ -259,10 +259,6 @@
     --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var(
         --spectrum-accordion-bottom-to-text-spacious-extra-large
     );
-}
-
-:host,
-:root {
     --system-action-bar-height: var(--spectrum-action-bar-height);
     --system-action-bar-corner-radius: var(--spectrum-corner-radius-100);
     --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100);
@@ -295,10 +291,6 @@
     --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y);
     --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur);
     --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color);
-}
-
-:host,
-:root {
     --system-action-button-animation-duration: var(
         --spectrum-animation-duration-100
     );
@@ -743,16 +735,24 @@
     --system-action-button-size-xl-edge-to-text-size: var(
         --spectrum-component-edge-to-text-300
     );
-}
-
-:host,
-:root {
     --system-action-group-gap-size-compact: 0;
     --system-action-group-horizontal-spacing-compact: -1px;
     --system-action-group-vertical-spacing-compact: -1px;
     --system-action-group-button-spacing-reset: 0;
     --system-action-group-border-radius-reset: 0;
     --system-action-group-border-radius: var(--spectrum-corner-radius-100);
+    --system-action-group-size-xs-horizontal-spacing-regular: var(
+        --spectrum-spacing-75
+    );
+    --system-action-group-size-s-horizontal-spacing-regular: var(
+        --spectrum-spacing-75
+    );
+    --system-action-group-size-xs-vertical-spacing-regular: var(
+        --spectrum-spacing-75
+    );
+    --system-action-group-size-s-vertical-spacing-regular: var(
+        --spectrum-spacing-75
+    );
     --system-action-group-horizontal-spacing-regular: var(
         --spectrum-spacing-100
     );
@@ -775,22 +775,6 @@
     --system-action-group-size-xl-vertical-spacing-regular: var(
         --spectrum-spacing-100
     );
-    --system-action-group-size-xs-horizontal-spacing-regular: var(
-        --spectrum-spacing-75
-    );
-    --system-action-group-size-s-horizontal-spacing-regular: var(
-        --spectrum-spacing-75
-    );
-    --system-action-group-size-xs-vertical-spacing-regular: var(
-        --spectrum-spacing-75
-    );
-    --system-action-group-size-s-vertical-spacing-regular: var(
-        --spectrum-spacing-75
-    );
-}
-
-:host,
-:root {
     --system-alert-banner-neutral-background: var(
         --spectrum-neutral-subdued-background-color-default
     );
@@ -821,10 +805,6 @@
         --spectrum-negative-background-color-default
     );
     --system-alert-banner-font-color: var(--spectrum-white);
-}
-
-:host,
-:root {
     --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
     --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width);
     --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100);
@@ -867,18 +847,10 @@
     --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200);
     --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300);
     --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300);
-}
-
-:host,
-:root {
     --system-asset-transition-duration: var(--spectrum-animation-duration-100);
     --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);
-}
-
-:host,
-:root {
     --system-avatar-color-opacity: 1;
     --system-avatar-inline-size: var(--spectrum-avatar-size-100);
     --system-avatar-block-size: var(--spectrum-avatar-size-100);
@@ -910,10 +882,6 @@
     --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600);
     --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700);
     --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700);
-}
-
-:host,
-:root {
     --system-badge-corner-radius: var(--spectrum-corner-radius-100);
     --system-badge-line-height: var(--spectrum-line-height-100);
     --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
@@ -1108,11 +1076,8 @@
     --system-badge-size-xl-icon-only-spacing-horizontal: var(
         --spectrum-component-edge-to-visual-only-300
     );
-}
-
-:host,
-:root {
     --system-button-animation-duration: var(--spectrum-animation-duration-100);
+    --system-button-border-radius: var(--spectrum-corner-radius-100);
     --system-button-border-width: var(--spectrum-border-width-200);
     --system-button-line-height: 1.2;
     --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
@@ -1122,6 +1087,7 @@
     --system-button-focus-indicator-color: var(
         --spectrum-focus-indicator-color
     );
+    --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50);
     --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);
@@ -1817,105 +1783,76 @@
     --system-button-static-black-secondary-outline-content-color-disabled: var(
         --spectrum-disabled-static-black-content-color
     );
-    --system-button-min-width: calc(
-        var(--spectrum-component-height-100) *
+    --system-button-size-s-min-width: calc(
+        var(--spectrum-component-height-75) *
             var(--spectrum-button-minimum-width-multiplier)
     );
+    --system-button-size-s-border-radius: var(
+        --spectrum-component-pill-edge-to-text-75
+    );
+    --system-button-size-s-height: var(--spectrum-component-height-75);
+    --system-button-size-s-font-size: var(--spectrum-font-size-75);
+    --system-button-size-s-edge-to-visual: calc(
+        var(--spectrum-component-pill-edge-to-visual-75) -
+            var(--system-button-border-width)
+    );
+    --system-button-size-s-edge-to-visual-only: var(
+        --spectrum-component-pill-edge-to-visual-only-75
+    );
+    --system-button-size-s-edge-to-text: calc(
+        var(--spectrum-component-pill-edge-to-text-75) -
+            var(--system-button-border-width)
+    );
+    --system-button-size-s-padding-label-to-icon: var(
+        --spectrum-text-to-visual-75
+    );
+    --system-button-size-s-top-to-text: var(
+        --spectrum-button-top-to-text-small
+    );
+    --system-button-size-s-bottom-to-text: var(
+        --spectrum-button-bottom-to-text-small
+    );
+    --system-button-size-s-top-to-icon: var(
+        --spectrum-component-top-to-workflow-icon-75
+    );
+    --system-button-size-s-intended-icon-size: var(
+        --spectrum-workflow-icon-size-75
+    );
     --system-button-size-m-min-width: calc(
         var(--spectrum-component-height-100) *
             var(--spectrum-button-minimum-width-multiplier)
     );
-    --system-button-border-radius: var(
-        --spectrum-component-pill-edge-to-text-100
-    );
     --system-button-size-m-border-radius: var(
         --spectrum-component-pill-edge-to-text-100
     );
-    --system-button-height: var(--spectrum-component-height-100);
     --system-button-size-m-height: var(--spectrum-component-height-100);
-    --system-button-font-size: var(--spectrum-font-size-100);
     --system-button-size-m-font-size: var(--spectrum-font-size-100);
-    --system-button-edge-to-visual: calc(
-        var(--spectrum-component-pill-edge-to-visual-100) -
-            var(--system-button-border-width)
-    );
     --system-button-size-m-edge-to-visual: calc(
         var(--spectrum-component-pill-edge-to-visual-100) -
             var(--system-button-border-width)
     );
-    --system-button-edge-to-visual-only: var(
-        --spectrum-component-pill-edge-to-visual-only-100
-    );
     --system-button-size-m-edge-to-visual-only: var(
         --spectrum-component-pill-edge-to-visual-only-100
     );
-    --system-button-edge-to-text: calc(
-        var(--spectrum-component-pill-edge-to-text-100) -
-            var(--system-button-border-width)
-    );
     --system-button-size-m-edge-to-text: calc(
         var(--spectrum-component-pill-edge-to-text-100) -
             var(--system-button-border-width)
     );
-    --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100);
     --system-button-size-m-padding-label-to-icon: var(
         --spectrum-text-to-visual-100
     );
-    --system-button-top-to-text: var(--spectrum-button-top-to-text-medium);
     --system-button-size-m-top-to-text: var(
         --spectrum-button-top-to-text-medium
     );
-    --system-button-bottom-to-text: var(
-        --spectrum-button-bottom-to-text-medium
-    );
     --system-button-size-m-bottom-to-text: var(
         --spectrum-button-bottom-to-text-medium
     );
-    --system-button-top-to-icon: var(
-        --spectrum-component-top-to-workflow-icon-100
-    );
     --system-button-size-m-top-to-icon: var(
         --spectrum-component-top-to-workflow-icon-100
     );
-    --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100);
     --system-button-size-m-intended-icon-size: var(
         --spectrum-workflow-icon-size-100
     );
-    --system-button-size-s-min-width: calc(
-        var(--spectrum-component-height-75) *
-            var(--spectrum-button-minimum-width-multiplier)
-    );
-    --system-button-size-s-border-radius: var(
-        --spectrum-component-pill-edge-to-text-75
-    );
-    --system-button-size-s-height: var(--spectrum-component-height-75);
-    --system-button-size-s-font-size: var(--spectrum-font-size-75);
-    --system-button-size-s-edge-to-visual: calc(
-        var(--spectrum-component-pill-edge-to-visual-75) -
-            var(--system-button-border-width)
-    );
-    --system-button-size-s-edge-to-visual-only: var(
-        --spectrum-component-pill-edge-to-visual-only-75
-    );
-    --system-button-size-s-edge-to-text: calc(
-        var(--spectrum-component-pill-edge-to-text-75) -
-            var(--system-button-border-width)
-    );
-    --system-button-size-s-padding-label-to-icon: var(
-        --spectrum-text-to-visual-75
-    );
-    --system-button-size-s-top-to-text: var(
-        --spectrum-button-top-to-text-small
-    );
-    --system-button-size-s-bottom-to-text: var(
-        --spectrum-button-bottom-to-text-small
-    );
-    --system-button-size-s-top-to-icon: var(
-        --spectrum-component-top-to-workflow-icon-75
-    );
-    --system-button-size-s-intended-icon-size: var(
-        --spectrum-workflow-icon-size-75
-    );
     --system-button-size-l-min-width: calc(
         var(--spectrum-component-height-200) *
             var(--spectrum-button-minimum-width-multiplier)
@@ -1986,20 +1923,16 @@
     --system-button-size-xl-intended-icon-size: var(
         --spectrum-workflow-icon-size-300
     );
-}
-
-:host,
-:root {
     --system-button-group-spacing-horizontal: var(--spectrum-spacing-300);
-    --system-button-group-size-m-spacing-horizontal: var(
-        --spectrum-spacing-300
-    );
     --system-button-group-spacing-vertical: var(--spectrum-spacing-300);
-    --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300);
     --system-button-group-size-s-spacing-horizontal: var(
         --spectrum-spacing-200
     );
     --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200);
+    --system-button-group-size-m-spacing-horizontal: var(
+        --spectrum-spacing-300
+    );
+    --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300);
     --system-button-group-size-l-spacing-horizontal: var(
         --spectrum-spacing-300
     );
@@ -2008,10 +1941,6 @@
         --spectrum-spacing-300
     );
     --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-:host,
-:root {
     --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height);
     --system-breadcrumbs-block-size-compact: var(
         --spectrum-breadcrumbs-height-compact
@@ -2156,10 +2085,6 @@
     --system-breadcrumbs-focus-indicator-color: var(
         --spectrum-focus-indicator-color
     );
-}
-
-:host,
-:root {
     --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);
@@ -2210,7 +2135,7 @@
     );
     --system-checkbox-line-height: var(--spectrum-line-height-100);
     --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100);
-    --system-checkbox-control-corner-radius: 2px;
+    --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
     --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
     --system-checkbox-focus-indicator-thickness: var(
         --spectrum-focus-indicator-thickness
@@ -2219,6 +2144,17 @@
     --system-checkbox-animation-duration: var(
         --spectrum-animation-duration-100
     );
+    --system-checkbox-size-s-font-size: var(--spectrum-font-size-75);
+    --system-checkbox-size-s-height: var(--spectrum-component-height-75);
+    --system-checkbox-size-s-control-size: var(
+        --spectrum-checkbox-control-size-small
+    );
+    --system-checkbox-size-s-top-to-text: var(
+        --spectrum-component-top-to-text-75
+    );
+    --system-checkbox-size-s-text-to-control: var(
+        --spectrum-text-to-control-75
+    );
     --system-checkbox-font-size: var(--spectrum-font-size-100);
     --system-checkbox-size-m-font-size: var(--spectrum-font-size-100);
     --system-checkbox-height: var(--spectrum-component-height-100);
@@ -2237,17 +2173,6 @@
     --system-checkbox-size-m-text-to-control: var(
         --spectrum-text-to-control-100
     );
-    --system-checkbox-size-s-font-size: var(--spectrum-font-size-75);
-    --system-checkbox-size-s-height: var(--spectrum-component-height-75);
-    --system-checkbox-size-s-control-size: var(
-        --spectrum-checkbox-control-size-small
-    );
-    --system-checkbox-size-s-top-to-text: var(
-        --spectrum-component-top-to-text-75
-    );
-    --system-checkbox-size-s-text-to-control: var(
-        --spectrum-text-to-control-75
-    );
     --system-checkbox-size-l-font-size: var(--spectrum-font-size-200);
     --system-checkbox-size-l-height: var(--spectrum-component-height-200);
     --system-checkbox-size-l-control-size: var(
@@ -2270,10 +2195,6 @@
     --system-checkbox-size-xl-text-to-control: var(
         --spectrum-text-to-control-300
     );
-}
-
-:host,
-:root {
     --system-card-background-color: var(--spectrum-background-layer-2-color);
     --system-card-body-spacing: var(--spectrum-spacing-400);
     --system-card-title-padding-top: var(--spectrum-spacing-300);
@@ -2330,14 +2251,12 @@
     --system-card-content-margin-top-quiet: var(--spectrum-spacing-100);
     --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width);
     --system-card-background-color-quiet: var(--spectrum-background-base-color);
-}
-
-:host,
-:root {
     --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
@@ -2351,54 +2270,72 @@
     --system-clear-button-icon-color-key-focus: var(
         --spectrum-neutral-content-color-key-focus
     );
-    --system-clear-button-height: var(--spectrum-component-height-100);
-    --system-clear-button-size-m-height: var(--spectrum-component-height-100);
-    --system-clear-button-width: var(--spectrum-component-height-100);
-    --system-clear-button-size-m-width: var(--spectrum-component-height-100);
     --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: transparent;
-    --system-clear-button-quiet-background-color-hover: transparent;
-    --system-clear-button-quiet-background-color-down: transparent;
-    --system-clear-button-quiet-background-color-key-focus: transparent;
-    --system-clear-button-over-background-icon-color: var(--spectrum-white);
+    --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-white
+        --spectrum-clear-button-icon-color-hover-over-background,
+        var(--spectrum-white)
     );
     --system-clear-button-over-background-icon-color-down: var(
-        --spectrum-white
+        --spectrum-clear-button-icon-color-down-over-background,
+        var(--spectrum-white)
     );
     --system-clear-button-over-background-icon-color-key-focus: var(
-        --spectrum-white
+        --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: transparent;
     --system-clear-button-over-background-background-color-hover: var(
-        --spectrum-transparent-white-400
+        --spectrum-clear-button-background-color-hover-over-background,
+        var(--spectrum-transparent-white-400)
     );
     --system-clear-button-over-background-background-color-down: var(
-        --spectrum-transparent-white-500
+        --spectrum-clear-button-background-color-hover-over-background,
+        var(--spectrum-transparent-white-500)
     );
     --system-clear-button-over-background-background-color-key-focus: var(
-        --spectrum-transparent-white-400
+        --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-disabled-content-color
+        --spectrum-clear-button-icon-color-hover-disabled,
+        var(--spectrum-disabled-content-color)
     );
     --system-clear-button-disabled-icon-color-down: var(
-        --spectrum-disabled-content-color
+        --spectrum-clear-button-icon-color-down-disabled,
+        var(--spectrum-disabled-content-color)
     );
     --system-clear-button-disabled-background-color: transparent;
-}
-
-:host,
-:root {
     --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);
@@ -2468,15 +2405,11 @@
     --system-close-button-static-black-focus-indicator-color: var(
         --spectrum-static-black-focus-indicator-color
     );
+    --system-close-button-size-s-size: var(--spectrum-component-height-75);
     --system-close-button-size: var(--spectrum-component-height-100);
     --system-close-button-size-m-size: var(--spectrum-component-height-100);
-    --system-close-button-size-s-size: var(--spectrum-component-height-75);
     --system-close-button-size-l-size: var(--spectrum-component-height-200);
     --system-close-button-size-xl-size: var(--spectrum-component-height-300);
-}
-
-:host,
-:root {
     --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
@@ -2528,10 +2461,6 @@
         --spectrum-coach-indicator-quiet-ring-diameter
     );
     --system-coach-indicator-quiet-animation-name: pulse-quiet;
-}
-
-:host,
-:root {
     --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);
@@ -2567,7 +2496,7 @@
     --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-sans-serif-font-weight
+        --spectrum-body-medium-font-weight
     );
     --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font);
     --system-coach-mark-step-font-style: var(
@@ -2587,10 +2516,6 @@
     --system-coach-mark-buttongroup-spacing-horizontal: var(
         --spectrum-spacing-100
     );
-}
-
-:host,
-:root {
     --system-color-area-border-radius: var(
         --spectrum-color-area-border-rounding
     );
@@ -2608,10 +2533,6 @@
     --system-color-area-width: var(--spectrum-color-area-width);
     --system-color-area-min-width: var(--spectrum-color-area-minimum-width);
     --system-color-area-min-height: var(--spectrum-color-area-minimum-height);
-}
-
-:host,
-:root {
     --system-color-handle-size: var(--spectrum-color-handle-size);
     --system-color-handle-focused-size: var(
         --spectrum-color-handle-size-key-focus
@@ -2647,10 +2568,6 @@
     --system-color-handle-fill-color-disabled: var(
         --spectrum-disabled-background-color
     );
-}
-
-:host,
-:root {
     --system-color-loupe-width: var(--spectrum-color-loupe-width);
     --system-color-loupe-height: var(--spectrum-color-loupe-height);
     --system-color-loupe-offset: var(
@@ -2685,10 +2602,6 @@
     --system-color-loupe-checkerboard-light-color: var(
         --spectrum-opacity-checkerboard-square-light
     );
-}
-
-:host,
-:root {
     --system-color-slider-handle-margin-block: var(
         --spectrum-component-top-to-text-75
     );
@@ -2705,10 +2618,6 @@
     --system-color-slider-checkerboard-light-color: var(
         --spectrum-opacity-checkerboard-square-light
     );
-}
-
-:host,
-:root {
     --system-color-wheel-width: var(--spectrum-color-wheel-width);
     --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width);
     --system-color-wheel-height: var(--spectrum-color-wheel-width);
@@ -2725,10 +2634,6 @@
         var(--system-color-wheel-width) / 2 -
             var(--system-color-wheel-track-width) / 2
     );
-}
-
-:host,
-:root {
     --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);
@@ -2767,6 +2672,33 @@
     --system-combobox-border-color-invalid-key-focus: var(
         --spectrum-negative-border-color-key-focus
     );
+    --system-combobox-size-s-block-size: var(--spectrum-component-height-75);
+    --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75);
+    --system-combobox-size-s-font-size: var(--spectrum-font-size-75);
+    --system-combobox-size-s-spacing-inline-icon-to-button: var(
+        --spectrum-combo-box-visual-to-field-button-small
+    );
+    --system-combobox-size-s-block-spacing-edge-to-progress-circle: var(
+        --spectrum-field-top-to-progress-circle-small
+    );
+    --system-combobox-size-s-block-spacing-edge-to-alert: var(
+        --spectrum-field-top-to-alert-icon-small
+    );
+    --system-combobox-size-s-spacing-edge-to-menu: var(
+        --spectrum-component-to-menu-small
+    );
+    --system-combobox-size-s-spacing-block-start-edge-to-text: var(
+        --spectrum-component-top-to-text-75
+    );
+    --system-combobox-size-s-spacing-block-end-edge-to-text: var(
+        --spectrum-component-bottom-to-text-75
+    );
+    --system-combobox-size-s-spacing-inline-start-edge-to-text: var(
+        --spectrum-component-edge-to-text-75
+    );
+    --system-combobox-size-s-spacing-inline-end-edge-to-text: var(
+        --spectrum-component-edge-to-text-75
+    );
     --system-combobox-block-size: var(--spectrum-component-height-100);
     --system-combobox-size-m-block-size: var(--spectrum-component-height-100);
     --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
@@ -2821,33 +2753,6 @@
     --system-combobox-size-m-spacing-inline-end-edge-to-text: var(
         --spectrum-component-edge-to-text-100
     );
-    --system-combobox-size-s-block-size: var(--spectrum-component-height-75);
-    --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75);
-    --system-combobox-size-s-font-size: var(--spectrum-font-size-75);
-    --system-combobox-size-s-spacing-inline-icon-to-button: var(
-        --spectrum-combo-box-visual-to-field-button-small
-    );
-    --system-combobox-size-s-block-spacing-edge-to-progress-circle: var(
-        --spectrum-field-top-to-progress-circle-small
-    );
-    --system-combobox-size-s-block-spacing-edge-to-alert: var(
-        --spectrum-field-top-to-alert-icon-small
-    );
-    --system-combobox-size-s-spacing-edge-to-menu: var(
-        --spectrum-component-to-menu-small
-    );
-    --system-combobox-size-s-spacing-block-start-edge-to-text: var(
-        --spectrum-component-top-to-text-75
-    );
-    --system-combobox-size-s-spacing-block-end-edge-to-text: var(
-        --spectrum-component-bottom-to-text-75
-    );
-    --system-combobox-size-s-spacing-inline-start-edge-to-text: var(
-        --spectrum-component-edge-to-text-75
-    );
-    --system-combobox-size-s-spacing-inline-end-edge-to-text: var(
-        --spectrum-component-edge-to-text-75
-    );
     --system-combobox-size-l-block-size: var(--spectrum-component-height-200);
     --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200);
     --system-combobox-size-l-font-size: var(--spectrum-font-size-200);
@@ -2911,25 +2816,21 @@
     --system-combobox-quiet-spacing-inline-start-edge-to-text: var(
         --spectrum-field-edge-to-text-quiet
     );
+    --system-combobox-quiet-size-s-spacing-label-to: var(
+        --spectrum-field-label-to-component-quiet-small
+    );
     --system-combobox-quiet-spacing-label-to: var(
         --spectrum-field-label-to-component-quiet-medium
     );
     --system-combobox-quiet-size-m-spacing-label-to: var(
         --spectrum-field-label-to-component-quiet-medium
     );
-    --system-combobox-quiet-size-s-spacing-label-to: var(
-        --spectrum-field-label-to-component-quiet-small
-    );
     --system-combobox-quiet-size-l-spacing-label-to: var(
         --spectrum-field-label-to-component-quiet-large
     );
     --system-combobox-quiet-size-xl-spacing-label-to: var(
         --spectrum-field-label-to-component-quiet-extra-large
     );
-}
-
-:host,
-:root {
     --system-contextual-help-padding: var(--spectrum-spacing-400);
     --system-contextual-help-content-spacing: var(--spectrum-spacing-100);
     --system-contextual-help-link-spacing: var(--spectrum-spacing-300);
@@ -2938,10 +2839,6 @@
     );
     --system-contextual-help-heading-color: var(--spectrum-heading-color);
     --system-contextual-help-body-color: var(--spectrum-body-color);
-}
-
-:host,
-:root {
     --system-dialog-fullscreen-header-text-size: 28px;
     --system-dialog-min-inline-size: 288px;
     --system-dialog-confirm-small-width: 400px;
@@ -2982,10 +2879,6 @@
         26px - var(--spectrum-component-bottom-to-text-300)
     );
     --system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
-}
-
-:host,
-:root {
     --system-divider-background-color-small: var(--spectrum-gray-200);
     --system-divider-background-color-medium: var(--spectrum-gray-200);
     --system-divider-background-color-large: var(--spectrum-gray-800);
@@ -3007,10 +2900,6 @@
     --system-divider-background-color-large-static-black: var(
         --spectrum-transparent-black-900
     );
-}
-
-:host,
-:root {
     --system-drop-zone-padding: var(--spectrum-spacing-400);
     --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400);
     --system-drop-zone-heading-to-body: var(--spectrum-spacing-75);
@@ -3074,16 +2963,8 @@
     --system-drop-zone-heading-font-size-cjk: var(
         --spectrum-drop-zone-cjk-title-size
     );
-}
-
-:host,
-:root {
     --system-field-group-margin: var(--spectrum-spacing-300);
-    --system-field-group-readonly-delimiter: '\002c';
-}
-
-:host,
-:root {
+    --system-field-group-readonly-delimiter: ',';
     --system-field-label-color: var(
         --spectrum-neutral-subdued-content-color-default
     );
@@ -3172,10 +3053,6 @@
     --system-field-label-size-xl-text-to-asterisk: var(
         --spectrum-field-label-text-to-asterisk-extra-large
     );
-}
-
-:host,
-:root {
     --system-help-text-line-height: var(--spectrum-line-height-100);
     --system-help-text-content-color-default: var(
         --spectrum-neutral-subdued-content-color-default
@@ -3213,30 +3090,6 @@
     --system-help-text-lang-ko-line-height-cjk: var(
         --spectrum-cjk-line-height-100
     );
-    --system-help-text-min-height: var(--spectrum-component-height-75);
-    --system-help-text-size-m-min-height: var(--spectrum-component-height-75);
-    --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-help-text-font-size: var(--spectrum-font-size-75);
-    --system-help-text-size-m-font-size: var(--spectrum-font-size-75);
-    --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75);
-    --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75);
-    --system-help-text-top-to-workflow-icon: var(
-        --spectrum-help-text-top-to-workflow-icon-medium
-    );
-    --system-help-text-size-m-top-to-workflow-icon: var(
-        --spectrum-help-text-top-to-workflow-icon-medium
-    );
-    --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75);
-    --system-help-text-size-m-top-to-text: var(
-        --spectrum-component-top-to-text-75
-    );
-    --system-help-text-bottom-to-text: var(
-        --spectrum-component-bottom-to-text-75
-    );
-    --system-help-text-size-m-bottom-to-text: var(
-        --spectrum-component-bottom-to-text-75
-    );
     --system-help-text-size-s-min-height: var(--spectrum-component-height-75);
     --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75);
     --system-help-text-size-s-font-size: var(--spectrum-font-size-75);
@@ -3250,6 +3103,19 @@
     --system-help-text-size-s-bottom-to-text: var(
         --spectrum-component-bottom-to-text-75
     );
+    --system-help-text-size-m-min-height: var(--spectrum-component-height-75);
+    --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100);
+    --system-help-text-size-m-font-size: var(--spectrum-font-size-75);
+    --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75);
+    --system-help-text-size-m-top-to-workflow-icon: var(
+        --spectrum-help-text-top-to-workflow-icon-medium
+    );
+    --system-help-text-size-m-top-to-text: var(
+        --spectrum-component-top-to-text-75
+    );
+    --system-help-text-size-m-bottom-to-text: var(
+        --spectrum-component-bottom-to-text-75
+    );
     --system-help-text-size-l-min-height: var(--spectrum-component-height-100);
     --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200);
     --system-help-text-size-l-font-size: var(--spectrum-font-size-100);
@@ -3282,10 +3148,6 @@
     --system-help-text-size-xl-bottom-to-text: var(
         --spectrum-component-bottom-to-text-200
     );
-}
-
-:host,
-:root {
     --system-illustrated-message-description-max-inline-size: var(
         --spectrum-illustrated-message-maximum-width
     );
@@ -3343,10 +3205,6 @@
     --system-illustrated-message-lang-ko-title-font-size: var(
         --spectrum-illustrated-message-cjk-title-size
     );
-}
-
-:host,
-:root {
     --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs);
     --system-icon-size-xs: var(--spectrum-workflow-icon-size-50);
     --system-icon-size-s: var(--spectrum-workflow-icon-size-75);
@@ -3583,10 +3441,6 @@
     --system-ui-icon-asterisk-300-icon-size: var(
         --spectrum-asterisk-icon-size-300
     );
-}
-
-:host,
-:root {
     --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);
@@ -3624,6 +3478,9 @@
     --system-infield-button-stacked-fill-padding-inner: var(
         --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium
     );
+    --system-infield-button-animation-duration: var(
+        --spectrum-animation-duration-100
+    );
     --system-infield-button-icon-color: var(
         --spectrum-neutral-content-color-default
     );
@@ -3728,10 +3585,6 @@
     --system-infield-button-quiet-border-width: 0;
     --system-infield-button-quiet-disabled-background-color: transparent;
     --system-infield-button-quiet-disabled-border-color: transparent;
-}
-
-:host,
-:root {
     --system-link-animation-duration: var(--spectrum-animation-duration-100);
     --system-link-text-color-primary-default: var(
         --spectrum-accent-content-color-default
@@ -3759,10 +3612,6 @@
     );
     --system-link-text-color-white: var(--spectrum-white);
     --system-link-text-color-black: var(--spectrum-black);
-}
-
-:host,
-:root {
     --system-menu-item-top-to-action: var(--spectrum-spacing-50);
     --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
     --system-menu-item-label-line-height: var(--spectrum-line-height-100);
@@ -4104,15 +3953,17 @@
     --system-menu-size-xl-back-icon-margin: var(
         --spectrum-navigational-indicator-top-to-back-icon-extra-large
     );
-}
-
-:host,
-:root {
     --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);
@@ -4123,20 +3974,9 @@
     --system-meter-size-l-top-to-text: var(
         --spectrum-component-top-to-text-200
     );
-    --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);
-}
-
-:host,
-:root {
     --system-modal-confirm-exit-animation-delay: var(
         --spectrum-animation-duration-0
     );
-    --system-modal-confirm-entry-animation-distance: var(
-        --spectrum-dialog-confirm-entry-animation-distance
-    );
     --system-modal-fullscreen-margin: 32px;
     --system-modal-max-height: 90vh;
     --system-modal-max-width: 90%;
@@ -4154,10 +3994,6 @@
     --system-modal-transition-animation-duration: var(
         --spectrum-animation-duration-100
     );
-}
-
-:host,
-:root {
     --system-picker-background-color-default: var(--spectrum-gray-50);
     --system-picker-background-color-default-open: var(--spectrum-gray-100);
     --system-picker-background-color-active: var(--spectrum-gray-200);
@@ -4401,10 +4237,6 @@
     --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var(
         --spectrum-component-to-menu-extra-large
     );
-}
-
-:host,
-:root {
     --system-picker-button-background-color: var(--spectrum-gray-50);
     --system-picker-button-background-color-hover: var(--spectrum-gray-100);
     --system-picker-button-background-color-down: var(--spectrum-gray-200);
@@ -4515,10 +4347,6 @@
     --system-picker-button-size-xl-fill-padding: var(
         --spectrum-field-edge-to-disclosure-icon-300
     );
-}
-
-:host,
-:root {
     --system-popover-border-width: var(--spectrum-border-width-100);
     --system-popover-animation-distance: var(--spectrum-spacing-100);
     --system-popover-background-color: var(--spectrum-background-layer-2-color);
@@ -4541,10 +4369,6 @@
         var(--system-popover-pointer-edge-offset) -
             var(--spectrum-popover-tip-width) / 2
     );
-}
-
-:host,
-:root {
     --system-progress-bar-animation-ease-in-out-indeterminate: var(
         --spectrum-animation-ease-in-out
     );
@@ -4620,10 +4444,6 @@
     --system-progress-bar-size-xl-spacing-top-to-text: var(
         --spectrum-component-top-to-text-300
     );
-}
-
-:host,
-:root {
     --system-progress-circle-track-border-color: var(--spectrum-gray-200);
     --system-progress-circle-fill-border-color: var(
         --spectrum-accent-content-color-default
@@ -4657,10 +4477,6 @@
     --system-progress-circle-large-thickness: var(
         --spectrum-progress-circle-thickness-large
     );
-}
-
-:host,
-:root {
     --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);
@@ -4802,10 +4618,6 @@
     --system-radio-emphasized-button-checked-border-color-focus: var(
         --spectrum-accent-color-1000
     );
-}
-
-:host,
-:root {
     --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);
@@ -4895,10 +4707,6 @@
     --system-search-quiet-edge-to-visual: var(
         --spectrum-field-edge-to-visual-quiet
     );
-}
-
-:host,
-:root {
     --system-side-nav-focus-ring-size: var(
         --spectrum-focus-indicator-thickness
     );
@@ -5025,10 +4833,6 @@
     --system-side-nav-lang-ko-header-line-height: var(
         --spectrum-cjk-line-height-100
     );
-}
-
-:host,
-:root {
     --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);
@@ -5181,10 +4985,6 @@
         --spectrum-spacing-200
     );
     --system-slider-size-xl-value-inline-size: 22px;
-}
-
-:host,
-:root {
     --system-split-view-vertical-width: 100%;
     --system-split-view-vertical-gripper-width: 50%;
     --system-split-view-vertical-gripper-outer-width: 100%;
@@ -5205,15 +5005,28 @@
     --system-split-view-gripper-border-width-vertical: var(
         --spectrum-border-width-400
     );
-}
-
-:host,
-:root {
     --system-status-light-corner-radius: 50%;
     --system-status-light-font-weight: 400;
     --system-status-light-border-width: var(--spectrum-border-width-100);
+    --system-status-light-height: var(--spectrum-component-height-100);
+    --system-status-light-dot-size: var(
+        --spectrum-status-light-dot-size-medium
+    );
     --system-status-light-line-height: var(--spectrum-line-height-100);
     --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100);
+    --system-status-light-font-size: var(--spectrum-font-size-100);
+    --system-status-light-spacing-dot-to-label: var(
+        --spectrum-text-to-visual-100
+    );
+    --system-status-light-spacing-top-to-dot: var(
+        --spectrum-status-light-top-to-dot-medium
+    );
+    --system-status-light-spacing-top-to-label: var(
+        --spectrum-component-top-to-text-100
+    );
+    --system-status-light-spacing-bottom-to-label: var(
+        --spectrum-component-bottom-to-text-100
+    );
     --system-status-light-content-color-default: var(
         --spectrum-neutral-content-color-default
     );
@@ -5280,40 +5093,6 @@
     --system-status-light-nonsemantic-magenta-color: var(
         --spectrum-magenta-visual-color
     );
-    --system-status-light-height: var(--spectrum-component-height-100);
-    --system-status-light-size-m-height: var(--spectrum-component-height-100);
-    --system-status-light-dot-size: var(
-        --spectrum-status-light-dot-size-medium
-    );
-    --system-status-light-size-m-dot-size: var(
-        --spectrum-status-light-dot-size-medium
-    );
-    --system-status-light-font-size: var(--spectrum-font-size-100);
-    --system-status-light-size-m-font-size: var(--spectrum-font-size-100);
-    --system-status-light-spacing-dot-to-label: var(
-        --spectrum-text-to-visual-100
-    );
-    --system-status-light-size-m-spacing-dot-to-label: var(
-        --spectrum-text-to-visual-100
-    );
-    --system-status-light-spacing-top-to-dot: var(
-        --spectrum-status-light-top-to-dot-medium
-    );
-    --system-status-light-size-m-spacing-top-to-dot: var(
-        --spectrum-status-light-top-to-dot-medium
-    );
-    --system-status-light-spacing-top-to-label: var(
-        --spectrum-component-top-to-text-100
-    );
-    --system-status-light-size-m-spacing-top-to-label: var(
-        --spectrum-component-top-to-text-100
-    );
-    --system-status-light-spacing-bottom-to-label: var(
-        --spectrum-component-bottom-to-text-100
-    );
-    --system-status-light-size-m-spacing-bottom-to-label: var(
-        --spectrum-component-bottom-to-text-100
-    );
     --system-status-light-size-s-height: var(--spectrum-component-height-75);
     --system-status-light-size-s-dot-size: var(
         --spectrum-status-light-dot-size-small
@@ -5331,6 +5110,23 @@
     --system-status-light-size-s-spacing-bottom-to-label: var(
         --spectrum-component-bottom-to-text-75
     );
+    --system-status-light-size-m-height: var(--spectrum-component-height-100);
+    --system-status-light-size-m-dot-size: var(
+        --spectrum-status-light-dot-size-medium
+    );
+    --system-status-light-size-m-font-size: var(--spectrum-font-size-100);
+    --system-status-light-size-m-spacing-dot-to-label: var(
+        --spectrum-text-to-visual-100
+    );
+    --system-status-light-size-m-spacing-top-to-dot: var(
+        --spectrum-status-light-top-to-dot-medium
+    );
+    --system-status-light-size-m-spacing-top-to-label: var(
+        --spectrum-component-top-to-text-100
+    );
+    --system-status-light-size-m-spacing-bottom-to-label: var(
+        --spectrum-component-bottom-to-text-100
+    );
     --system-status-light-size-l-height: var(--spectrum-component-height-200);
     --system-status-light-size-l-dot-size: var(
         --spectrum-status-light-dot-size-large
@@ -5365,10 +5161,6 @@
     --system-status-light-size-xl-spacing-bottom-to-label: var(
         --spectrum-component-bottom-to-text-300
     );
-}
-
-:host,
-:root {
     --system-stepper-border-width: var(--spectrum-border-width-100);
     --system-stepper-border-color: var(--spectrum-gray-500);
     --system-stepper-border-color-hover: var(--spectrum-gray-600);
@@ -5382,8 +5174,8 @@
     --system-stepper-animation-duration: var(--spectrum-animation-duration-100);
     --system-stepper-buttons-border-style: none;
     --system-stepper-buttons-border-width: 0;
-    --system-stepper-buttons-background-color: var(--spectrum-gray-25);
     --system-stepper-buttons-border-color: var(--spectrum-gray-500);
+    --system-stepper-buttons-background-color: var(--spectrum-gray-25);
     --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(
@@ -5394,6 +5186,10 @@
     );
     --system-stepper-button-border-radius-reset: 0px;
     --system-stepper-button-border-width: var(--spectrum-border-width-100);
+    --system-stepper-button-background-color-focus: var(--spectrum-gray-300);
+    --system-stepper-button-background-color-keyboard-focus: var(
+        --spectrum-gray-100
+    );
     --system-stepper-border-color-invalid: var(
         --spectrum-negative-border-color-default
     );
@@ -5416,11 +5212,16 @@
     --system-stepper-focus-indicator-color: var(
         --spectrum-focus-indicator-color
     );
+    --system-stepper-button-border-color-quiet: transparent;
     --system-stepper-button-border-color-disabled: var(--spectrum-gray-100);
     --system-stepper-button-border-width-disabled: var(
         --spectrum-border-width-100
     );
     --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
+    --system-stepper-size-s-button-width: var(
+        --spectrum-in-field-button-width-stacked-small
+    );
+    --system-stepper-size-s-height: var(--spectrum-component-height-75);
     --system-stepper-button-width: var(
         --spectrum-in-field-button-width-stacked-medium
     );
@@ -5429,10 +5230,6 @@
     );
     --system-stepper-height: var(--spectrum-component-height-100);
     --system-stepper-size-m-height: var(--spectrum-component-height-100);
-    --system-stepper-size-s-button-width: var(
-        --spectrum-in-field-button-width-stacked-small
-    );
-    --system-stepper-size-s-height: var(--spectrum-component-height-75);
     --system-stepper-size-l-button-width: var(
         --spectrum-in-field-button-width-stacked-large
     );
@@ -5441,10 +5238,6 @@
         --spectrum-in-field-button-width-stacked-extra-large
     );
     --system-stepper-size-xl-height: var(--spectrum-component-height-300);
-}
-
-:host,
-:root {
     --system-swatch-border-radius: var(--spectrum-corner-radius-100);
     --system-swatch-focus-indicator-border-radius: var(
         --spectrum-corner-radius-200
@@ -5510,31 +5303,9 @@
     --system-swatch-size-l-slash-thickness: var(
         --spectrum-swatch-slash-thickness-large
     );
-}
-
-:host,
-:root {
     --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);
-}
-
-:host,
-:root {
-    --system-opacity-checkerboard-dark: var(
-        --spectrum-opacity-checkerboard-square-dark
-    );
-    --system-opacity-checkerboard-light: var(
-        --spectrum-opacity-checkerboard-square-light
-    );
-    --system-opacity-checkerboard-size: var(
-        --spectrum-opacity-checkerboard-square-size
-    );
-    --system-opacity-checkerboard-position: left top;
-}
-
-:host,
-:root {
     --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);
@@ -5618,36 +5389,6 @@
     --system-switch-emphasized-handle-border-color-selected-focus: var(
         --spectrum-accent-color-1000
     );
-    --system-switch-min-height: var(--spectrum-component-height-100);
-    --system-switch-size-m-min-height: var(--spectrum-component-height-100);
-    --system-switch-control-width: var(--spectrum-switch-control-width-medium);
-    --system-switch-size-m-control-width: var(
-        --spectrum-switch-control-width-medium
-    );
-    --system-switch-control-height: var(
-        --spectrum-switch-control-height-medium
-    );
-    --system-switch-size-m-control-height: var(
-        --spectrum-switch-control-height-medium
-    );
-    --system-switch-control-label-spacing: var(--spectrum-text-to-control-100);
-    --system-switch-size-m-control-label-spacing: var(
-        --spectrum-text-to-control-100
-    );
-    --system-switch-spacing-top-to-control: var(
-        --spectrum-switch-top-to-control-medium
-    );
-    --system-switch-size-m-spacing-top-to-control: var(
-        --spectrum-switch-top-to-control-medium
-    );
-    --system-switch-spacing-top-to-label: var(
-        --spectrum-component-top-to-text-100
-    );
-    --system-switch-size-m-spacing-top-to-label: var(
-        --spectrum-component-top-to-text-100
-    );
-    --system-switch-font-size: var(--spectrum-font-size-100);
-    --system-switch-size-m-font-size: var(--spectrum-font-size-100);
     --system-switch-size-s-min-height: var(--spectrum-component-height-75);
     --system-switch-size-s-control-width: var(
         --spectrum-switch-control-width-small
@@ -5665,6 +5406,23 @@
         --spectrum-component-top-to-text-75
     );
     --system-switch-size-s-font-size: var(--spectrum-font-size-75);
+    --system-switch-size-m-min-height: var(--spectrum-component-height-100);
+    --system-switch-size-m-control-width: var(
+        --spectrum-switch-control-width-medium
+    );
+    --system-switch-size-m-control-height: var(
+        --spectrum-switch-control-height-medium
+    );
+    --system-switch-size-m-control-label-spacing: var(
+        --spectrum-text-to-control-100
+    );
+    --system-switch-size-m-spacing-top-to-control: var(
+        --spectrum-switch-top-to-control-medium
+    );
+    --system-switch-size-m-spacing-top-to-label: var(
+        --spectrum-component-top-to-text-100
+    );
+    --system-switch-size-m-font-size: var(--spectrum-font-size-100);
     --system-switch-size-l-min-height: var(--spectrum-component-height-200);
     --system-switch-size-l-control-width: var(
         --spectrum-switch-control-width-large
@@ -5699,10 +5457,6 @@
         --spectrum-component-top-to-text-300
     );
     --system-switch-size-xl-font-size: var(--spectrum-font-size-300);
-}
-
-:host,
-:root {
     --system-table-header-top-to-text: var(
         --spectrum-table-column-header-row-top-to-text-medium
     );
@@ -5780,10 +5534,10 @@
         --spectrum-neutral-subdued-content-color-down
     );
     --system-table-icon-color-focus: var(
-        --spectrum-neutral-subdued-content-color-key-focus
+        --spectrum-neutral-subdued-content-color-focus
     );
     --system-table-icon-color-focus-hover: var(
-        --spectrum-neutral-subdued-content-color-hover
+        --spectrum-neutral-subdued-content-focus-hover
     );
     --system-table-icon-color-key-focus: var(
         --spectrum-neutral-subdued-content-color-key-focus
@@ -6122,11 +5876,7 @@
     --system-table-quiet-row-background-color: var(
         --spectrum-transparent-white-25
     );
-}
-
-:host,
-:root {
-    --system-tabs-font-weight: var(--spectrum-regular-font-weight);
+    --system-tabs-font-weight: var(--spectrum-default-font-weight);
     --system-tabs-item-height: var(--spectrum-tab-item-height-medium);
     --system-tabs-item-horizontal-spacing: var(
         --spectrum-tab-item-to-tab-item-horizontal-medium
@@ -6267,10 +6017,6 @@
     --system-tabs-emphasized-selection-indicator-color: var(
         --spectrum-accent-content-color-default
     );
-}
-
-:host,
-:root {
     --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);
@@ -6433,6 +6179,48 @@
     );
     --system-tag-content-color-emphasized: var(--spectrum-white);
     --system-tag-content-color-disabled: var(--spectrum-disabled-content-color);
+    --system-tag-size-s-height: var(--spectrum-component-height-75);
+    --system-tag-size-s-font-size: var(--spectrum-font-size-75);
+    --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75);
+    --system-tag-size-s-clear-button-spacing-inline-start: var(
+        --spectrum-text-to-visual-75
+    );
+    --system-tag-size-s-clear-button-spacing-block: var(
+        --spectrum-tag-top-to-cross-icon-small
+    );
+    --system-tag-size-s-icon-spacing-block-start: var(
+        --spectrum-component-top-to-workflow-icon-75
+    );
+    --system-tag-size-s-icon-spacing-block-end: var(
+        --spectrum-component-top-to-workflow-icon-75
+    );
+    --system-tag-size-s-icon-spacing-inline-end: var(
+        --spectrum-text-to-visual-75
+    );
+    --system-tag-size-s-avatar-spacing-block-start: var(
+        --spectrum-tag-top-to-avatar-small
+    );
+    --system-tag-size-s-avatar-spacing-block-end: var(
+        --spectrum-tag-top-to-avatar-small
+    );
+    --system-tag-size-s-avatar-spacing-inline-end: var(
+        --spectrum-text-to-visual-75
+    );
+    --system-tag-size-s-label-spacing-block: var(
+        --spectrum-component-top-to-text-75
+    );
+    --system-tag-size-s-corner-radius: var(
+        --system-tag-size-small-corner-radius
+    );
+    --system-tag-size-s-spacing-inline-start: var(
+        --system-tag-size-small-spacing-inline-start
+    );
+    --system-tag-size-s-label-spacing-inline-end: var(
+        --system-tag-size-small-label-spacing-inline-end
+    );
+    --system-tag-size-s-clear-button-spacing-inline-end: var(
+        --system-tag-size-small-clear-button-spacing-inline-end
+    );
     --system-tag-height: var(--spectrum-component-height-100);
     --system-tag-size-m-height: var(--spectrum-component-height-100);
     --system-tag-font-size: var(--spectrum-font-size-100);
@@ -6509,48 +6297,6 @@
     --system-tag-size-m-clear-button-spacing-inline-end: var(
         --system-tag-size-medium-clear-button-spacing-inline-end
     );
-    --system-tag-size-s-height: var(--spectrum-component-height-75);
-    --system-tag-size-s-font-size: var(--spectrum-font-size-75);
-    --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75);
-    --system-tag-size-s-clear-button-spacing-inline-start: var(
-        --spectrum-text-to-visual-75
-    );
-    --system-tag-size-s-clear-button-spacing-block: var(
-        --spectrum-tag-top-to-cross-icon-small
-    );
-    --system-tag-size-s-icon-spacing-block-start: var(
-        --spectrum-component-top-to-workflow-icon-75
-    );
-    --system-tag-size-s-icon-spacing-block-end: var(
-        --spectrum-component-top-to-workflow-icon-75
-    );
-    --system-tag-size-s-icon-spacing-inline-end: var(
-        --spectrum-text-to-visual-75
-    );
-    --system-tag-size-s-avatar-spacing-block-start: var(
-        --spectrum-tag-top-to-avatar-small
-    );
-    --system-tag-size-s-avatar-spacing-block-end: var(
-        --spectrum-tag-top-to-avatar-small
-    );
-    --system-tag-size-s-avatar-spacing-inline-end: var(
-        --spectrum-text-to-visual-75
-    );
-    --system-tag-size-s-label-spacing-block: var(
-        --spectrum-component-top-to-text-75
-    );
-    --system-tag-size-s-corner-radius: var(
-        --system-tag-size-small-corner-radius
-    );
-    --system-tag-size-s-spacing-inline-start: var(
-        --system-tag-size-small-spacing-inline-start
-    );
-    --system-tag-size-s-label-spacing-inline-end: var(
-        --system-tag-size-small-label-spacing-inline-end
-    );
-    --system-tag-size-s-clear-button-spacing-inline-end: var(
-        --system-tag-size-small-clear-button-spacing-inline-end
-    );
     --system-tag-size-l-height: var(--spectrum-component-height-200);
     --system-tag-size-l-font-size: var(--spectrum-font-size-200);
     --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200);
@@ -6593,16 +6339,8 @@
     --system-tag-size-l-clear-button-spacing-inline-end: var(
         --system-tag-size-large-clear-button-spacing-inline-end
     );
-}
-
-:host,
-:root {
     --system-tag-group-item-margin-block: var(--spectrum-spacing-75);
     --system-tag-group-item-margin-inline: var(--spectrum-spacing-75);
-}
-
-:host,
-:root {
     --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);
@@ -6721,6 +6459,58 @@
     --system-textfield-text-area-min-block-size: var(
         --spectrum-text-area-minimum-height
     );
+    --system-textfield-size-s-height: var(--spectrum-component-height-75);
+    --system-textfield-size-s-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-small
+    );
+    --system-textfield-size-s-label-spacing-inline-side-label: var(
+        --spectrum-spacing-100
+    );
+    --system-textfield-size-s-placeholder-font-size: var(
+        --spectrum-font-size-75
+    );
+    --system-textfield-size-s-spacing-inline: var(
+        --spectrum-component-edge-to-text-75
+    );
+    --system-textfield-size-s-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-75
+    );
+    --system-textfield-size-s-icon-size-valid: var(
+        --spectrum-checkmark-icon-size-75
+    );
+    --system-textfield-size-s-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-small
+    );
+    --system-textfield-size-s-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-small
+    );
+    --system-textfield-size-s-icon-spacing-block-invalid: var(
+        --spectrum-field-top-to-alert-icon-small
+    );
+    --system-textfield-size-s-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-small
+    );
+    --system-textfield-size-s-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-small
+    );
+    --system-textfield-size-s-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-small
+    );
+    --system-textfield-size-s-character-count-font-size: var(
+        --spectrum-font-size-75
+    );
+    --system-textfield-size-s-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-75
+    );
+    --system-textfield-size-s-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-small
+    );
+    --system-textfield-size-s-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-small
+    );
+    --system-textfield-size-s-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-75
+    );
     --system-textfield-height: var(--spectrum-component-height-100);
     --system-textfield-size-m-height: var(--spectrum-component-height-100);
     --system-textfield-label-spacing-block-quiet: var(
@@ -6819,58 +6609,6 @@
     --system-textfield-size-m-text-area-min-block-size-quiet: var(
         --spectrum-component-height-100
     );
-    --system-textfield-size-s-height: var(--spectrum-component-height-75);
-    --system-textfield-size-s-label-spacing-block-quiet: var(
-        --spectrum-field-label-to-component-quiet-small
-    );
-    --system-textfield-size-s-label-spacing-inline-side-label: var(
-        --spectrum-spacing-100
-    );
-    --system-textfield-size-s-placeholder-font-size: var(
-        --spectrum-font-size-75
-    );
-    --system-textfield-size-s-spacing-inline: var(
-        --spectrum-component-edge-to-text-75
-    );
-    --system-textfield-size-s-icon-size-invalid: var(
-        --spectrum-workflow-icon-size-75
-    );
-    --system-textfield-size-s-icon-size-valid: var(
-        --spectrum-checkmark-icon-size-75
-    );
-    --system-textfield-size-s-icon-spacing-inline-end-invalid: var(
-        --spectrum-field-edge-to-alert-icon-small
-    );
-    --system-textfield-size-s-icon-spacing-inline-end-valid: var(
-        --spectrum-field-edge-to-validation-icon-small
-    );
-    --system-textfield-size-s-icon-spacing-block-invalid: var(
-        --spectrum-field-top-to-alert-icon-small
-    );
-    --system-textfield-size-s-icon-spacing-block-valid: var(
-        --spectrum-field-top-to-validation-icon-small
-    );
-    --system-textfield-size-s-icon-spacing-inline-start-invalid: var(
-        --spectrum-field-text-to-alert-icon-small
-    );
-    --system-textfield-size-s-icon-spacing-inline-start-valid: var(
-        --spectrum-field-text-to-validation-icon-small
-    );
-    --system-textfield-size-s-character-count-font-size: var(
-        --spectrum-font-size-75
-    );
-    --system-textfield-size-s-character-count-spacing-block: var(
-        --spectrum-component-bottom-to-text-75
-    );
-    --system-textfield-size-s-character-count-spacing-block-quiet: var(
-        --spectrum-character-count-to-field-quiet-small
-    );
-    --system-textfield-size-s-character-count-spacing-block-side: var(
-        --spectrum-side-label-character-count-top-margin-small
-    );
-    --system-textfield-size-s-text-area-min-block-size-quiet: var(
-        --spectrum-component-height-75
-    );
     --system-textfield-size-l-height: var(--spectrum-component-height-200);
     --system-textfield-size-l-label-spacing-block-quiet: var(
         --spectrum-field-label-to-component-quiet-large
@@ -6975,53 +6713,7 @@
     --system-textfield-size-xl-text-area-min-block-size-quiet: var(
         --spectrum-component-height-300
     );
-}
-
-:host,
-:root {
-    --system-thumbnail-size: var(--spectrum-thumbnail-size-500);
     --system-thumbnail-border-radius: 2px;
-    --system-thumbnail-border-width: var(--spectrum-border-width-100);
-    --system-thumbnail-border-color-rgba: rgba(
-        var(--spectrum-gray-800-rgb),
-        var(--spectrum-thumbnail-border-opacity)
-    );
-    --system-thumbnail-layer-border-width-inner: var(
-        --spectrum-border-width-400
-    );
-    --system-thumbnail-layer-border-color-inner: var(--spectrum-white);
-    --system-thumbnail-layer-border-width-outer: var(
-        --spectrum-border-width-100
-    );
-    --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500);
-    --system-thumbnail-border-width-selected: var(--spectrum-border-width-200);
-    --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800);
-    --system-thumbnail-focus-indicator-thickness: var(
-        --spectrum-focus-indicator-thickness
-    );
-    --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-thumbnail-focus-indicator-color: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-thumbnail-color-opacity-disabled: var(
-        --spectrum-thumbnail-opacity-disabled
-    );
-    --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50);
-    --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75);
-    --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100);
-    --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200);
-    --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300);
-    --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400);
-    --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500);
-    --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600);
-    --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700);
-    --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800);
-    --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900);
-    --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000);
-}
-
-:host,
-:root {
     --system-toast-background-color-default: var(
         --spectrum-neutral-subdued-background-color-default
     );
@@ -7066,10 +6758,6 @@
     );
     --system-toast-text-and-icon-color: var(--spectrum-white);
     --system-toast-divider-color: var(--spectrum-transparent-white-400);
-}
-
-:host,
-:root {
     --system-tooltip-backgound-color-default-neutral: var(
         --spectrum-neutral-subdued-background-color-default
     );
@@ -7117,12 +6805,8 @@
     --system-tooltip-background-color-default: var(
         --system-tooltip-backgound-color-default-neutral
     );
-}
-
-:host,
-:root {
-    --system-tray-exit-animation-delay: 0ms;
-    --system-tray-entry-animation-delay: 160ms;
+    --system-tray-exit-animation-delay: 0s;
+    --system-tray-entry-animation-delay: 0.16s;
     --system-tray-max-inline-size: 375px;
     --system-tray-spacing-edge-to-safe-zone: 64px;
     --system-tray-entry-animation-duration: var(
@@ -7133,10 +6817,6 @@
     );
     --system-tray-corner-radius: var(--spectrum-corner-radius-100);
     --system-tray-background-color: var(--spectrum-background-layer-2-color);
-}
-
-:host,
-:root {
     --system-underlay-background-entry-animation-delay: var(
         --spectrum-animation-duration-0
     );
@@ -7159,10 +6839,6 @@
         var(--spectrum-black-rgb),
         var(--spectrum-overlay-opacity)
     );
-}
-
-:host,
-:root {
     --system-heading-sans-serif-font-family: var(
         --spectrum-sans-font-family-stack
     );
@@ -7170,10 +6846,6 @@
     --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack);
     --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
     --system-heading-font-color: var(--spectrum-heading-color);
-    --system-heading-font-size: var(--spectrum-heading-size-m);
-    --system-heading-size-m-font-size: var(--spectrum-heading-size-m);
-    --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m);
-    --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m);
     --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs);
     --system-heading-size-xxs-cjk-font-size: var(
         --spectrum-heading-cjk-size-xxs
@@ -7182,6 +6854,10 @@
     --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs);
     --system-heading-size-s-font-size: var(--spectrum-heading-size-s);
     --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s);
+    --system-heading-font-size: var(--spectrum-heading-size-m);
+    --system-heading-size-m-font-size: var(--spectrum-heading-size-m);
+    --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m);
+    --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m);
     --system-heading-size-l-font-size: var(--spectrum-heading-size-l);
     --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l);
     --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl);
@@ -7201,10 +6877,10 @@
     --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack);
     --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
     --system-body-font-color: var(--spectrum-body-color);
-    --system-body-font-size: var(--spectrum-body-size-m);
-    --system-body-size-m-font-size: var(--spectrum-body-size-m);
     --system-body-size-xs-font-size: var(--spectrum-body-size-xs);
     --system-body-size-s-font-size: var(--spectrum-body-size-s);
+    --system-body-font-size: var(--spectrum-body-size-m);
+    --system-body-size-m-font-size: var(--spectrum-body-size-m);
     --system-body-size-l-font-size: var(--spectrum-body-size-l);
     --system-body-size-xl-font-size: var(--spectrum-body-size-xl);
     --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl);
@@ -7215,18 +6891,18 @@
     --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack);
     --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack);
     --system-detail-font-color: var(--spectrum-detail-color);
+    --system-detail-size-s-font-size: var(--spectrum-detail-size-s);
     --system-detail-font-size: var(--spectrum-detail-size-m);
     --system-detail-size-m-font-size: var(--spectrum-detail-size-m);
-    --system-detail-size-s-font-size: var(--spectrum-detail-size-s);
     --system-detail-size-l-font-size: var(--spectrum-detail-size-l);
     --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl);
     --system-code-font-family: var(--spectrum-code-font-family-stack);
     --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
     --system-code-font-color: var(--spectrum-code-color);
-    --system-code-font-size: var(--spectrum-code-size-m);
-    --system-code-size-m-font-size: var(--spectrum-code-size-m);
     --system-code-size-xs-font-size: var(--spectrum-code-size-xs);
     --system-code-size-s-font-size: var(--spectrum-code-size-s);
+    --system-code-font-size: var(--spectrum-code-size-m);
+    --system-code-size-m-font-size: var(--spectrum-code-size-m);
     --system-code-size-l-font-size: var(--spectrum-code-size-l);
     --system-code-size-xl-font-size: var(--spectrum-code-size-xl);
 }