@spectrum-web-components/styles 1.1.0 → 1.1.2

package/tokens-v2/system-theme-bridge.css

@@ -2089,112 +2089,8 @@
     --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-content-color-default: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-checkbox-content-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-checkbox-content-color-down: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-checkbox-content-color-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-checkbox-focus-indicator-color: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-checkbox-content-color-disabled: var(
-        --spectrum-disabled-content-color
-    );
-    --system-checkbox-control-color-disabled: var(
-        --spectrum-disabled-content-color
-    );
     --system-checkbox-checkmark-color: var(--spectrum-gray-50);
-    --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
-    --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);
-    --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100);
-    --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000);
-    --system-checkbox-emphasized-color-default: var(
-        --spectrum-accent-color-900
-    );
-    --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000);
-    --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100);
-    --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000);
-    --system-checkbox-control-selected-color-default: var(
-        --spectrum-neutral-background-color-selected-default
-    );
-    --system-checkbox-control-selected-color-hover: var(
-        --spectrum-neutral-background-color-selected-hover
-    );
-    --system-checkbox-control-selected-color-down: var(
-        --spectrum-neutral-background-color-selected-down
-    );
-    --system-checkbox-control-selected-color-focus: var(
-        --spectrum-neutral-background-color-selected-key-focus
-    );
-    --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: 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
-    );
-    --system-checkbox-border-width: var(--spectrum-border-width-200);
-    --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);
-    --system-checkbox-size-m-height: var(--spectrum-component-height-100);
-    --system-checkbox-control-size: var(
-        --spectrum-checkbox-control-size-medium
-    );
-    --system-checkbox-size-m-control-size: var(
-        --spectrum-checkbox-control-size-medium
-    );
-    --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
-    --system-checkbox-size-m-top-to-text: var(
-        --spectrum-component-top-to-text-100
-    );
-    --system-checkbox-text-to-control: var(--spectrum-text-to-control-100);
-    --system-checkbox-size-m-text-to-control: var(
-        --spectrum-text-to-control-100
-    );
-    --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(
-        --spectrum-checkbox-control-size-large
-    );
-    --system-checkbox-size-l-top-to-text: var(
-        --spectrum-component-top-to-text-200
-    );
-    --system-checkbox-size-l-text-to-control: var(
-        --spectrum-text-to-control-200
-    );
-    --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300);
-    --system-checkbox-size-xl-height: var(--spectrum-component-height-300);
-    --system-checkbox-size-xl-control-size: var(
-        --spectrum-checkbox-control-size-extra-large
-    );
-    --system-checkbox-size-xl-top-to-text: var(
-        --spectrum-component-top-to-text-300
-    );
-    --system-checkbox-size-xl-text-to-control: var(
-        --spectrum-text-to-control-300
-    );
+    --system-checkbox-control-corner-radius: 2px;
     --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);
@@ -3612,116 +3508,6 @@
     );
     --system-link-text-color-white: var(--spectrum-white);
     --system-link-text-color-black: var(--spectrum-black);
-    --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);
-    --system-menu-item-label-line-height-cjk: var(
-        --spectrum-cjk-line-height-100
-    );
-    --system-menu-item-label-to-description-spacing: var(
-        --spectrum-menu-item-label-to-description
-    );
-    --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200);
-    --system-menu-item-focus-indicator-color: var(--spectrum-blue-800);
-    --system-menu-item-label-to-value-area-min-spacing: var(
-        --spectrum-spacing-100
-    );
-    --system-menu-item-label-content-color-default: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-menu-item-label-content-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-menu-item-label-content-color-down: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-menu-item-label-content-color-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-menu-item-label-icon-color-default: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-menu-item-label-icon-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-menu-item-label-icon-color-down: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-menu-item-label-icon-color-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-menu-item-label-content-color-disabled: var(
-        --spectrum-disabled-content-color
-    );
-    --system-menu-item-label-icon-color-disabled: var(
-        --spectrum-disabled-content-color
-    );
-    --system-menu-item-description-line-height: var(--spectrum-line-height-100);
-    --system-menu-item-description-line-height-cjk: var(
-        --spectrum-cjk-line-height-100
-    );
-    --system-menu-item-description-color-default: var(
-        --spectrum-neutral-subdued-content-color-default
-    );
-    --system-menu-item-description-color-hover: var(
-        --spectrum-neutral-subdued-content-color-hover
-    );
-    --system-menu-item-description-color-down: var(
-        --spectrum-neutral-subdued-content-color-down
-    );
-    --system-menu-item-description-color-focus: var(
-        --spectrum-neutral-subdued-content-color-key-focus
-    );
-    --system-menu-item-description-color-disabled: var(
-        --spectrum-disabled-content-color
-    );
-    --system-menu-section-header-line-height: var(--spectrum-line-height-100);
-    --system-menu-section-header-line-height-cjk: var(
-        --spectrum-cjk-line-height-100
-    );
-    --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight);
-    --system-menu-section-header-color: var(--spectrum-gray-900);
-    --system-menu-collapsible-icon-color: var(--spectrum-gray-900);
-    --system-menu-checkmark-icon-color-default: var(
-        --spectrum-accent-color-900
-    );
-    --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000);
-    --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100);
-    --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000);
-    --system-menu-drillin-icon-color-default: var(
-        --spectrum-neutral-subdued-content-color-default
-    );
-    --system-menu-drillin-icon-color-hover: var(
-        --spectrum-neutral-subdued-content-color-hover
-    );
-    --system-menu-drillin-icon-color-down: var(
-        --spectrum-neutral-subdued-content-color-down
-    );
-    --system-menu-drillin-icon-color-focus: var(
-        --spectrum-neutral-subdued-content-color-key-focus
-    );
-    --system-menu-item-value-color-default: var(
-        --spectrum-neutral-subdued-content-color-default
-    );
-    --system-menu-item-value-color-hover: var(
-        --spectrum-neutral-subdued-content-color-hover
-    );
-    --system-menu-item-value-color-down: var(
-        --spectrum-neutral-subdued-content-color-down
-    );
-    --system-menu-item-value-color-focus: var(
-        --spectrum-neutral-subdued-content-color-key-focus
-    );
-    --system-menu-checkmark-display-hidden: none;
-    --system-menu-checkmark-display-shown: block;
-    --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown);
-    --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc(
-        var(--system-menu-item-label-inline-edge-to-content) +
-            var(--system-menu-item-checkmark-width) +
-            var(--system-menu-item-label-text-to-visual) +
-            var(--system-menu-item-focus-indicator-width)
-    );
-    --system-menu-item-background-color-default: transparent;
     --system-menu-item-background-color-hover: rgba(
         var(--spectrum-gray-1000-rgb),
         var(--spectrum-transparent-black-200-opacity)
@@ -3734,225 +3520,6 @@
         var(--spectrum-gray-1000-rgb),
         var(--spectrum-transparent-black-200-opacity)
     );
-    --system-menu-item-min-height: var(--spectrum-component-height-100);
-    --system-menu-size-m-item-min-height: var(--spectrum-component-height-100);
-    --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100);
-    --system-menu-size-m-item-icon-height: var(
-        --spectrum-workflow-icon-size-100
-    );
-    --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
-    --system-menu-size-m-item-icon-width: var(
-        --spectrum-workflow-icon-size-100
-    );
-    --system-menu-item-label-font-size: var(--spectrum-font-size-100);
-    --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100);
-    --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);
-    --system-menu-size-m-item-label-text-to-visual: var(
-        --spectrum-text-to-visual-100
-    );
-    --system-menu-item-label-inline-edge-to-content: var(
-        --spectrum-component-edge-to-text-100
-    );
-    --system-menu-size-m-item-label-inline-edge-to-content: var(
-        --spectrum-component-edge-to-text-100
-    );
-    --system-menu-item-top-edge-to-text: var(
-        --spectrum-component-top-to-text-100
-    );
-    --system-menu-size-m-item-top-edge-to-text: var(
-        --spectrum-component-top-to-text-100
-    );
-    --system-menu-item-bottom-edge-to-text: var(
-        --spectrum-component-bottom-to-text-100
-    );
-    --system-menu-size-m-item-bottom-edge-to-text: var(
-        --spectrum-component-bottom-to-text-100
-    );
-    --system-menu-item-text-to-control: var(--spectrum-text-to-control-100);
-    --system-menu-size-m-item-text-to-control: var(
-        --spectrum-text-to-control-100
-    );
-    --system-menu-item-description-font-size: var(--spectrum-font-size-75);
-    --system-menu-size-m-item-description-font-size: var(
-        --spectrum-font-size-75
-    );
-    --system-menu-section-header-font-size: var(--spectrum-font-size-100);
-    --system-menu-size-m-section-header-font-size: var(
-        --spectrum-font-size-100
-    );
-    --system-menu-section-header-min-width: var(
-        --spectrum-component-height-100
-    );
-    --system-menu-size-m-section-header-min-width: var(
-        --spectrum-component-height-100
-    );
-    --system-menu-item-selectable-edge-to-text-not-selected: var(
-        --spectrum-menu-item-selectable-edge-to-text-not-selected-medium
-    );
-    --system-menu-size-m-item-selectable-edge-to-text-not-selected: var(
-        --spectrum-menu-item-selectable-edge-to-text-not-selected-medium
-    );
-    --system-menu-item-checkmark-height: var(
-        --spectrum-menu-item-checkmark-height-medium
-    );
-    --system-menu-size-m-item-checkmark-height: var(
-        --spectrum-menu-item-checkmark-height-medium
-    );
-    --system-menu-item-checkmark-width: var(
-        --spectrum-menu-item-checkmark-width-medium
-    );
-    --system-menu-size-m-item-checkmark-width: var(
-        --spectrum-menu-item-checkmark-width-medium
-    );
-    --system-menu-item-top-to-checkmark: var(
-        --spectrum-menu-item-top-to-selected-icon-medium
-    );
-    --system-menu-size-m-item-top-to-checkmark: var(
-        --spectrum-menu-item-top-to-selected-icon-medium
-    );
-    --system-menu-back-icon-margin: var(
-        --spectrum-navigational-indicator-top-to-back-icon-medium
-    );
-    --system-menu-size-m-back-icon-margin: var(
-        --spectrum-navigational-indicator-top-to-back-icon-medium
-    );
-    --system-menu-size-s-item-min-height: var(--spectrum-component-height-75);
-    --system-menu-size-s-item-icon-height: var(
-        --spectrum-workflow-icon-size-75
-    );
-    --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75);
-    --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75);
-    --system-menu-size-s-item-label-text-to-visual: var(
-        --spectrum-text-to-visual-75
-    );
-    --system-menu-size-s-item-label-inline-edge-to-content: var(
-        --spectrum-component-edge-to-text-75
-    );
-    --system-menu-size-s-item-top-edge-to-text: var(
-        --spectrum-component-top-to-text-75
-    );
-    --system-menu-size-s-item-bottom-edge-to-text: var(
-        --spectrum-component-bottom-to-text-75
-    );
-    --system-menu-size-s-item-text-to-control: var(
-        --spectrum-text-to-control-75
-    );
-    --system-menu-size-s-item-description-font-size: var(
-        --spectrum-font-size-50
-    );
-    --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75);
-    --system-menu-size-s-section-header-min-width: var(
-        --spectrum-component-height-75
-    );
-    --system-menu-size-s-item-selectable-edge-to-text-not-selected: var(
-        --spectrum-menu-item-selectable-edge-to-text-not-selected-small
-    );
-    --system-menu-size-s-item-checkmark-height: var(
-        --spectrum-menu-item-checkmark-height-small
-    );
-    --system-menu-size-s-item-checkmark-width: var(
-        --spectrum-menu-item-checkmark-width-small
-    );
-    --system-menu-size-s-item-top-to-checkmark: var(
-        --spectrum-menu-item-top-to-selected-icon-small
-    );
-    --system-menu-size-s-back-icon-margin: var(
-        --spectrum-navigational-indicator-top-to-back-icon-small
-    );
-    --system-menu-size-l-item-min-height: var(--spectrum-component-height-200);
-    --system-menu-size-l-item-icon-height: var(
-        --spectrum-workflow-icon-size-200
-    );
-    --system-menu-size-l-item-icon-width: var(
-        --spectrum-workflow-icon-size-200
-    );
-    --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200);
-    --system-menu-size-l-item-label-text-to-visual: var(
-        --spectrum-text-to-visual-200
-    );
-    --system-menu-size-l-item-label-inline-edge-to-content: var(
-        --spectrum-component-edge-to-text-200
-    );
-    --system-menu-size-l-item-top-edge-to-text: var(
-        --spectrum-component-top-to-text-200
-    );
-    --system-menu-size-l-item-bottom-edge-to-text: var(
-        --spectrum-component-bottom-to-text-200
-    );
-    --system-menu-size-l-item-text-to-control: var(
-        --spectrum-text-to-control-200
-    );
-    --system-menu-size-l-item-description-font-size: var(
-        --spectrum-font-size-100
-    );
-    --system-menu-size-l-section-header-font-size: var(
-        --spectrum-font-size-200
-    );
-    --system-menu-size-l-section-header-min-width: var(
-        --spectrum-component-height-200
-    );
-    --system-menu-size-l-item-selectable-edge-to-text-not-selected: var(
-        --spectrum-menu-item-selectable-edge-to-text-not-selected-large
-    );
-    --system-menu-size-l-item-checkmark-height: var(
-        --spectrum-menu-item-checkmark-height-large
-    );
-    --system-menu-size-l-item-checkmark-width: var(
-        --spectrum-menu-item-checkmark-width-large
-    );
-    --system-menu-size-l-item-top-to-checkmark: var(
-        --spectrum-menu-item-top-to-selected-icon-large
-    );
-    --system-menu-size-l-back-icon-margin: var(
-        --spectrum-navigational-indicator-top-to-back-icon-large
-    );
-    --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300);
-    --system-menu-size-xl-item-icon-height: var(
-        --spectrum-workflow-icon-size-300
-    );
-    --system-menu-size-xl-item-icon-width: var(
-        --spectrum-workflow-icon-size-300
-    );
-    --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300);
-    --system-menu-size-xl-item-label-text-to-visual: var(
-        --spectrum-text-to-visual-300
-    );
-    --system-menu-size-xl-item-label-inline-edge-to-content: var(
-        --spectrum-component-edge-to-text-300
-    );
-    --system-menu-size-xl-item-top-edge-to-text: var(
-        --spectrum-component-top-to-text-300
-    );
-    --system-menu-size-xl-item-bottom-edge-to-text: var(
-        --spectrum-component-bottom-to-text-300
-    );
-    --system-menu-size-xl-item-text-to-control: var(
-        --spectrum-text-to-control-300
-    );
-    --system-menu-size-xl-item-description-font-size: var(
-        --spectrum-font-size-200
-    );
-    --system-menu-size-xl-section-header-font-size: var(
-        --spectrum-font-size-300
-    );
-    --system-menu-size-xl-section-header-min-width: var(
-        --spectrum-component-height-300
-    );
-    --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var(
-        --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large
-    );
-    --system-menu-size-xl-item-checkmark-height: var(
-        --spectrum-menu-item-checkmark-height-extra-large
-    );
-    --system-menu-size-xl-item-checkmark-width: var(
-        --spectrum-menu-item-checkmark-width-extra-large
-    );
-    --system-menu-size-xl-item-top-to-checkmark: var(
-        --spectrum-menu-item-top-to-selected-icon-extra-large
-    );
-    --system-menu-size-xl-back-icon-margin: var(
-        --spectrum-navigational-indicator-top-to-back-icon-extra-large
-    );
     --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);
@@ -3994,249 +3561,20 @@
     --system-modal-transition-animation-duration: var(
         --spectrum-animation-duration-100
     );
-    --system-picker-background-color-default: var(--spectrum-gray-50);
+    --system-picker-background-color-default: var(--spectrum-gray-100);
     --system-picker-background-color-default-open: var(--spectrum-gray-100);
+    --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-hover: var(--spectrum-gray-100);
-    --system-picker-background-color-hover-open: var(--spectrum-gray-100);
-    --system-picker-background-color-key-focus: var(--spectrum-gray-100);
-    --system-picker-border-color-default: var(--spectrum-gray-500);
+    --system-picker-background-color-key-focus: var(--spectrum-gray-200);
+    --system-picker-border-color-default: var(--spectrum-gray-800);
     --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-hover-open: var(--spectrum-gray-900);
     --system-picker-border-color-active: var(--spectrum-gray-700);
-    --system-picker-border-color-key-focus: var(--spectrum-gray-600);
+    --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-font-size: var(--spectrum-font-size-100);
-    --system-picker-font-weight: var(--spectrum-regular-font-weight);
-    --system-picker-placeholder-font-style: var(--spectrum-default-font-style);
-    --system-picker-line-height: var(--spectrum-line-height-100);
-    --system-picker-block-size: var(--spectrum-component-height-100);
-    --system-picker-inline-size: var(--spectrum-field-width);
-    --system-picker-border-radius: var(--spectrum-corner-radius-100);
-    --system-picker-spacing-top-to-text: var(
-        --spectrum-component-top-to-text-100
-    );
-    --system-picker-spacing-bottom-to-text: var(
-        --spectrum-component-bottom-to-text-100
-    );
-    --system-picker-spacing-edge-to-text: var(
-        --spectrum-component-edge-to-text-100
-    );
-    --system-picker-spacing-edge-to-text-quiet: var(
-        --spectrum-field-edge-to-text-quiet
-    );
-    --system-picker-spacing-label-to: var(--spectrum-field-label-to-component);
-    --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100);
-    --system-picker-spacing-text-to-icon-inline-end: var(
-        --spectrum-field-text-to-alert-icon-medium
-    );
-    --system-picker-spacing-icon-to-disclosure-icon: var(
-        --spectrum-picker-visual-to-disclosure-icon-medium
-    );
-    --system-picker-spacing-label-to-quiet: var(
-        --spectrum-field-label-to-component-quiet-medium
-    );
-    --system-picker-spacing-top-to-alert-icon: var(
-        --spectrum-field-top-to-alert-icon-medium
-    );
-    --system-picker-spacing-top-to-progress-circle: var(
-        --spectrum-field-top-to-progress-circle-medium
-    );
-    --system-picker-spacing-top-to-disclosure-icon: var(
-        --spectrum-field-top-to-disclosure-icon-100
-    );
-    --system-picker-spacing-edge-to-disclosure-icon: var(
-        --spectrum-field-end-edge-to-disclosure-icon-100
-    );
-    --system-picker-spacing-edge-to-disclosure-icon-quiet: var(
-        --spectrum-picker-end-edge-to-disclousure-icon-quiet
-    );
-    --system-picker-animation-duration: var(--spectrum-animation-duration-100);
-    --system-picker-font-color-default: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-picker-font-color-default-open: var(
-        --spectrum-neutral-content-color-focus
-    );
-    --system-picker-font-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-picker-font-color-hover-open: var(
-        --spectrum-neutral-content-color-focus-hover
-    );
-    --system-picker-font-color-active: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-picker-font-color-key-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-picker-icon-color-default: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-picker-icon-color-default-open: var(
-        --spectrum-neutral-content-color-focus
-    );
-    --system-picker-icon-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-picker-icon-color-hover-open: var(
-        --spectrum-neutral-content-color-focus-hover
-    );
-    --system-picker-icon-color-active: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-picker-icon-color-key-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-picker-border-color-error-default: var(
-        --spectrum-negative-border-color-default
-    );
-    --system-picker-border-color-error-default-open: var(
-        --spectrum-negative-border-color-focus
-    );
-    --system-picker-border-color-error-hover: var(
-        --spectrum-negative-border-color-hover
-    );
-    --system-picker-border-color-error-hover-open: var(
-        --spectrum-negative-border-color-focus-hover
-    );
-    --system-picker-border-color-error-active: var(
-        --spectrum-negative-border-color-down
-    );
-    --system-picker-border-color-error-key-focus: var(
-        --spectrum-negative-border-color-key-focus
-    );
-    --system-picker-icon-color-error: var(--spectrum-negative-visual-color);
-    --system-picker-background-color-disabled: var(
-        --spectrum-disabled-background-color
-    );
-    --system-picker-font-color-disabled: var(--spectrum-disabled-content-color);
-    --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color);
-    --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-picker-focus-indicator-thickness: var(
-        --spectrum-focus-indicator-thickness
-    );
-    --system-picker-focus-indicator-color: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-picker-next-to-popover-bottom-open-spacing-to-popover: var(
-        --spectrum-component-to-menu-medium
-    );
-    --system-picker-size-s-font-size: var(--spectrum-font-size-75);
-    --system-picker-size-s-block-size: var(--spectrum-component-height-75);
-    --system-picker-size-s-spacing-top-to-text: var(
-        --spectrum-component-top-to-text-75
-    );
-    --system-picker-size-s-spacing-bottom-to-text: var(
-        --spectrum-component-bottom-to-text-75
-    );
-    --system-picker-size-s-spacing-edge-to-text: var(
-        --spectrum-component-edge-to-text-75
-    );
-    --system-picker-size-s-spacing-text-to-icon: var(
-        --spectrum-text-to-visual-75
-    );
-    --system-picker-size-s-spacing-text-to-icon-inline-end: var(
-        --spectrum-field-text-to-alert-icon-small
-    );
-    --system-picker-size-s-spacing-icon-to-disclosure-icon: var(
-        --spectrum-picker-visual-to-disclosure-icon-small
-    );
-    --system-picker-size-s-spacing-label-to-quiet: var(
-        --spectrum-field-label-to-component-quiet-small
-    );
-    --system-picker-size-s-spacing-top-to-alert-icon: var(
-        --spectrum-field-top-to-alert-icon-small
-    );
-    --system-picker-size-s-spacing-top-to-progress-circle: var(
-        --spectrum-field-top-to-progress-circle-small
-    );
-    --system-picker-size-s-spacing-top-to-disclosure-icon: var(
-        --spectrum-field-top-to-disclosure-icon-75
-    );
-    --system-picker-size-s-spacing-edge-to-disclosure-icon: var(
-        --spectrum-field-end-edge-to-disclosure-icon-75
-    );
-    --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var(
-        --spectrum-component-to-menu-small
-    );
-    --system-picker-size-l-font-size: var(--spectrum-font-size-200);
-    --system-picker-size-l-block-size: var(--spectrum-component-height-200);
-    --system-picker-size-l-spacing-top-to-text: var(
-        --spectrum-component-top-to-text-200
-    );
-    --system-picker-size-l-spacing-bottom-to-text: var(
-        --spectrum-component-bottom-to-text-200
-    );
-    --system-picker-size-l-spacing-edge-to-text: var(
-        --spectrum-component-edge-to-text-200
-    );
-    --system-picker-size-l-spacing-text-to-icon: var(
-        --spectrum-text-to-visual-200
-    );
-    --system-picker-size-l-spacing-text-to-icon-inline-end: var(
-        --spectrum-field-text-to-alert-icon-large
-    );
-    --system-picker-size-l-spacing-icon-to-disclosure-icon: var(
-        --spectrum-picker-visual-to-disclosure-icon-large
-    );
-    --system-picker-size-l-spacing-label-to-quiet: var(
-        --spectrum-field-label-to-component-quiet-large
-    );
-    --system-picker-size-l-spacing-top-to-alert-icon: var(
-        --spectrum-field-top-to-alert-icon-large
-    );
-    --system-picker-size-l-spacing-top-to-progress-circle: var(
-        --spectrum-field-top-to-progress-circle-large
-    );
-    --system-picker-size-l-spacing-top-to-disclosure-icon: var(
-        --spectrum-field-top-to-disclosure-icon-200
-    );
-    --system-picker-size-l-spacing-edge-to-disclosure-icon: var(
-        --spectrum-field-end-edge-to-disclosure-icon-200
-    );
-    --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var(
-        --spectrum-component-to-menu-large
-    );
-    --system-picker-size-xl-font-size: var(--spectrum-font-size-300);
-    --system-picker-size-xl-block-size: var(--spectrum-component-height-300);
-    --system-picker-size-xl-spacing-top-to-text: var(
-        --spectrum-component-top-to-text-300
-    );
-    --system-picker-size-xl-spacing-bottom-to-text: var(
-        --spectrum-component-bottom-to-text-300
-    );
-    --system-picker-size-xl-spacing-edge-to-text: var(
-        --spectrum-component-edge-to-text-300
-    );
-    --system-picker-size-xl-spacing-text-to-icon: var(
-        --spectrum-text-to-visual-300
-    );
-    --system-picker-size-xl-spacing-text-to-icon-inline-end: var(
-        --spectrum-field-text-to-alert-icon-extra-large
-    );
-    --system-picker-size-xl-spacing-icon-to-disclosure-icon: var(
-        --spectrum-picker-visual-to-disclosure-icon-extra-large
-    );
-    --system-picker-size-xl-spacing-label-to-quiet: var(
-        --spectrum-field-label-to-component-quiet-extra-large
-    );
-    --system-picker-size-xl-spacing-top-to-alert-icon: var(
-        --spectrum-field-top-to-alert-icon-extra-large
-    );
-    --system-picker-size-xl-spacing-top-to-progress-circle: var(
-        --spectrum-field-top-to-progress-circle-extra-large
-    );
-    --system-picker-size-xl-spacing-top-to-disclosure-icon: var(
-        --spectrum-field-top-to-disclosure-icon-300
-    );
-    --system-picker-size-xl-spacing-edge-to-disclosure-icon: var(
-        --spectrum-field-end-edge-to-disclosure-icon-300
-    );
-    --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var(
-        --spectrum-component-to-menu-extra-large
-    );
     --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);