@spectrum-web-components/styles 0.42.2 → 0.42.4

package/tokens-v2/large-vars.css

@@ -0,0 +1,562 @@
+:host,
+:root {
+    --spectrum-checkbox-control-size-small: 16px;
+    --spectrum-checkbox-control-size-medium: 18px;
+    --spectrum-checkbox-control-size-large: 20px;
+    --spectrum-checkbox-control-size-extra-large: 22px;
+    --spectrum-checkbox-top-to-control-small: 7px;
+    --spectrum-checkbox-top-to-control-medium: 11px;
+    --spectrum-checkbox-top-to-control-large: 15px;
+    --spectrum-checkbox-top-to-control-extra-large: 19px;
+    --spectrum-switch-control-width-small: 30px;
+    --spectrum-switch-control-width-medium: 34px;
+    --spectrum-switch-control-width-large: 38px;
+    --spectrum-switch-control-width-extra-large: 46px;
+    --spectrum-switch-control-height-small: 18px;
+    --spectrum-switch-control-height-medium: 20px;
+    --spectrum-switch-control-height-large: 22px;
+    --spectrum-switch-control-height-extra-large: 26px;
+    --spectrum-switch-top-to-control-small: 7px;
+    --spectrum-switch-top-to-control-medium: 11px;
+    --spectrum-switch-top-to-control-large: 15px;
+    --spectrum-switch-top-to-control-extra-large: 19px;
+    --spectrum-radio-button-control-size-small: 16px;
+    --spectrum-radio-button-control-size-medium: 18px;
+    --spectrum-radio-button-control-size-large: 20px;
+    --spectrum-radio-button-control-size-extra-large: 22px;
+    --spectrum-radio-button-top-to-control-small: 7px;
+    --spectrum-radio-button-top-to-control-medium: 11px;
+    --spectrum-radio-button-top-to-control-large: 15px;
+    --spectrum-radio-button-top-to-control-extra-large: 19px;
+    --spectrum-field-label-text-to-asterisk-small: 5px;
+    --spectrum-field-label-text-to-asterisk-medium: 5px;
+    --spectrum-field-label-text-to-asterisk-large: 6px;
+    --spectrum-field-label-text-to-asterisk-extra-large: 6px;
+    --spectrum-field-label-top-to-asterisk-small: 11px;
+    --spectrum-field-label-top-to-asterisk-medium: 15px;
+    --spectrum-field-label-top-to-asterisk-large: 19px;
+    --spectrum-field-label-top-to-asterisk-extra-large: 24px;
+    --spectrum-field-label-to-component-quiet-small: -10px;
+    --spectrum-field-label-to-component-quiet-medium: -10px;
+    --spectrum-field-label-to-component-quiet-large: -15px;
+    --spectrum-field-label-to-component-quiet-extra-large: -19px;
+    --spectrum-help-text-top-to-workflow-icon-small: var(
+        --spectrum-component-top-to-workflow-icon-75
+    );
+    --spectrum-help-text-top-to-workflow-icon-medium: var(
+        --spectrum-component-top-to-workflow-icon-100
+    );
+    --spectrum-help-text-top-to-workflow-icon-large: var(
+        --spectrum-component-top-to-workflow-icon-200
+    );
+    --spectrum-help-text-top-to-workflow-icon-extra-large: var(
+        --spectrum-component-top-to-workflow-icon-300
+    );
+    --spectrum-status-light-dot-size-medium: 10px;
+    --spectrum-status-light-dot-size-large: 12px;
+    --spectrum-status-light-dot-size-extra-large: 12px;
+    --spectrum-status-light-top-to-dot-small: 11px;
+    --spectrum-status-light-top-to-dot-medium: 15px;
+    --spectrum-status-light-top-to-dot-large: 19px;
+    --spectrum-status-light-top-to-dot-extra-large: 24px;
+    --spectrum-action-button-edge-to-hold-icon-medium: 5px;
+    --spectrum-action-button-edge-to-hold-icon-large: 6px;
+    --spectrum-action-button-edge-to-hold-icon-extra-large: 7px;
+    --spectrum-tooltip-tip-width: 12px;
+    --spectrum-tooltip-tip-height: 6px;
+    --spectrum-tooltip-maximum-width: 200px;
+    --spectrum-progress-circle-size-small: 20px;
+    --spectrum-progress-circle-size-medium: 40px;
+    --spectrum-progress-circle-size-large: 80px;
+    --spectrum-progress-circle-thickness-small: 3px;
+    --spectrum-progress-circle-thickness-medium: 4px;
+    --spectrum-progress-circle-thickness-large: 5px;
+    --spectrum-toast-height: 60px;
+    --spectrum-toast-maximum-width: 420px;
+    --spectrum-toast-top-to-workflow-icon: 20px;
+    --spectrum-toast-top-to-text: 20px;
+    --spectrum-toast-bottom-to-text: 22px;
+    --spectrum-action-bar-height: 56px;
+    --spectrum-action-bar-top-to-item-counter: 16px;
+    --spectrum-swatch-size-extra-small: 20px;
+    --spectrum-swatch-size-small: 30px;
+    --spectrum-swatch-size-medium: 40px;
+    --spectrum-swatch-size-large: 50px;
+    --spectrum-progress-bar-thickness-small: 5px;
+    --spectrum-progress-bar-thickness-medium: 8px;
+    --spectrum-progress-bar-thickness-large: 10px;
+    --spectrum-progress-bar-thickness-extra-large: 13px;
+    --spectrum-meter-width: 240px;
+    --spectrum-meter-thickness-small: 5px;
+    --spectrum-meter-thickness-large: 8px;
+    --spectrum-tag-top-to-avatar-small: 5px;
+    --spectrum-tag-top-to-avatar-medium: 7px;
+    --spectrum-tag-top-to-avatar-large: 11px;
+    --spectrum-tag-top-to-cross-icon-small: 10px;
+    --spectrum-tag-top-to-cross-icon-medium: 15px;
+    --spectrum-tag-top-to-cross-icon-large: 19px;
+    --spectrum-popover-top-to-content-area: 5px;
+    --spectrum-menu-item-edge-to-content-not-selected-small: 24px;
+    --spectrum-menu-item-edge-to-content-not-selected-medium: 42px;
+    --spectrum-menu-item-edge-to-content-not-selected-large: 47px;
+    --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px;
+    --spectrum-menu-item-top-to-disclosure-icon-small: 9px;
+    --spectrum-menu-item-top-to-disclosure-icon-medium: 13px;
+    --spectrum-menu-item-top-to-disclosure-icon-large: 17px;
+    --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px;
+    --spectrum-menu-item-top-to-selected-icon-small: 9px;
+    --spectrum-menu-item-top-to-selected-icon-medium: 13px;
+    --spectrum-menu-item-top-to-selected-icon-large: 17px;
+    --spectrum-menu-item-top-to-selected-icon-extra-large: 22px;
+    --spectrum-slider-control-height-small: 18px;
+    --spectrum-slider-control-height-medium: 20px;
+    --spectrum-slider-control-height-large: 22px;
+    --spectrum-slider-control-height-extra-large: 26px;
+    --spectrum-slider-handle-size-small: 18px;
+    --spectrum-slider-handle-size-medium: 20px;
+    --spectrum-slider-handle-size-large: 22px;
+    --spectrum-slider-handle-size-extra-large: 26px;
+    --spectrum-slider-handle-border-width-down-small: 7px;
+    --spectrum-slider-handle-border-width-down-medium: 8px;
+    --spectrum-slider-handle-border-width-down-large: 9px;
+    --spectrum-slider-handle-border-width-down-extra-large: 11px;
+    --spectrum-slider-bottom-to-handle-small: 6px;
+    --spectrum-slider-bottom-to-handle-medium: 10px;
+    --spectrum-slider-bottom-to-handle-large: 14px;
+    --spectrum-slider-bottom-to-handle-extra-large: 17px;
+    --spectrum-slider-control-to-field-label-small: 6px;
+    --spectrum-slider-control-to-field-label-medium: 10px;
+    --spectrum-slider-control-to-field-label-large: 14px;
+    --spectrum-slider-control-to-field-label-extra-large: 17px;
+    --spectrum-picker-visual-to-disclosure-icon-small: 9px;
+    --spectrum-picker-visual-to-disclosure-icon-medium: 10px;
+    --spectrum-picker-visual-to-disclosure-icon-large: 11px;
+    --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px;
+    --spectrum-text-area-minimum-width: 140px;
+    --spectrum-text-area-minimum-height: 70px;
+    --spectrum-combo-box-visual-to-field-button-small: 9px;
+    --spectrum-combo-box-visual-to-field-button-medium: 10px;
+    --spectrum-combo-box-visual-to-field-button-large: 11px;
+    --spectrum-combo-box-visual-to-field-button-extra-large: 13px;
+    --spectrum-thumbnail-size-50: 20px;
+    --spectrum-thumbnail-size-75: 22px;
+    --spectrum-thumbnail-size-100: 26px;
+    --spectrum-thumbnail-size-200: 28px;
+    --spectrum-thumbnail-size-300: 32px;
+    --spectrum-thumbnail-size-400: 36px;
+    --spectrum-thumbnail-size-500: 40px;
+    --spectrum-thumbnail-size-600: 46px;
+    --spectrum-thumbnail-size-700: 50px;
+    --spectrum-thumbnail-size-800: 55px;
+    --spectrum-thumbnail-size-900: 62px;
+    --spectrum-thumbnail-size-1000: 70px;
+    --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs);
+    --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs);
+    --spectrum-opacity-checkerboard-square-size: var(
+        --spectrum-opacity-checkerboard-square-size-medium
+    );
+    --spectrum-opacity-checkerboard-square-size-medium: 10px;
+    --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs);
+    --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs);
+    --spectrum-breadcrumbs-height-multiline: 84px;
+    --spectrum-breadcrumbs-top-to-text: 17px;
+    --spectrum-breadcrumbs-top-to-text-compact: 16px;
+    --spectrum-breadcrumbs-top-to-text-multiline: 15px;
+    --spectrum-breadcrumbs-bottom-to-text: 19px;
+    --spectrum-breadcrumbs-bottom-to-text-compact: 19px;
+    --spectrum-breadcrumbs-bottom-to-text-multiline: 10px;
+    --spectrum-breadcrumbs-start-edge-to-text: 9px;
+    --spectrum-breadcrumbs-top-text-to-bottom-text: 11px;
+    --spectrum-breadcrumbs-top-to-separator-icon: 25px;
+    --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px;
+    --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px;
+    --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px;
+    --spectrum-breadcrumbs-top-to-truncated-menu: 10px;
+    --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px;
+    --spectrum-avatar-size-50: 20px;
+    --spectrum-avatar-size-75: 22px;
+    --spectrum-avatar-size-100: 26px;
+    --spectrum-avatar-size-200: 28px;
+    --spectrum-avatar-size-300: 32px;
+    --spectrum-avatar-size-400: 36px;
+    --spectrum-avatar-size-500: 40px;
+    --spectrum-avatar-size-600: 46px;
+    --spectrum-avatar-size-700: 50px;
+    --spectrum-alert-banner-minimum-height: 64px;
+    --spectrum-alert-banner-width: 680px;
+    --spectrum-alert-banner-top-to-workflow-icon: 21px;
+    --spectrum-alert-banner-top-to-text: 21px;
+    --spectrum-alert-banner-bottom-to-text: 22px;
+    --spectrum-rating-indicator-width: 22px;
+    --spectrum-rating-indicator-to-icon: 5px;
+    --spectrum-color-area-width: 240px;
+    --spectrum-color-area-minimum-width: 80px;
+    --spectrum-color-area-height: 240px;
+    --spectrum-color-area-minimum-height: 80px;
+    --spectrum-color-wheel-width: 240px;
+    --spectrum-color-wheel-minimum-width: 219px;
+    --spectrum-color-slider-length: 240px;
+    --spectrum-color-slider-minimum-length: 100px;
+    --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s);
+    --spectrum-illustrated-message-cjk-title-size: var(
+        --spectrum-heading-cjk-size-s
+    );
+    --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs);
+    --spectrum-coach-mark-width: 216px;
+    --spectrum-coach-mark-minimum-width: 216px;
+    --spectrum-coach-mark-maximum-width: 248px;
+    --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300);
+    --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px;
+    --spectrum-coach-mark-media-height: 162px;
+    --spectrum-coach-mark-media-minimum-height: 121px;
+    --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs);
+    --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs);
+    --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs);
+    --spectrum-accordion-top-to-text-regular-small: 7px;
+    --spectrum-accordion-small-top-to-text-spacious: 12px;
+    --spectrum-accordion-top-to-text-regular-medium: 9px;
+    --spectrum-accordion-top-to-text-spacious-medium: 14px;
+    --spectrum-accordion-top-to-text-compact-large: 7px;
+    --spectrum-accordion-top-to-text-regular-large: 12px;
+    --spectrum-accordion-top-to-text-spacious-large: 14px;
+    --spectrum-accordion-top-to-text-compact-extra-large: 7px;
+    --spectrum-accordion-top-to-text-regular-extra-large: 12px;
+    --spectrum-accordion-top-to-text-spacious-extra-large: 14px;
+    --spectrum-accordion-bottom-to-text-compact-small: 4px;
+    --spectrum-accordion-bottom-to-text-regular-small: 9px;
+    --spectrum-accordion-bottom-to-text-spacious-small: 14px;
+    --spectrum-accordion-bottom-to-text-compact-medium: 8px;
+    --spectrum-accordion-bottom-to-text-regular-medium: 13px;
+    --spectrum-accordion-bottom-to-text-spacious-medium: 18px;
+    --spectrum-accordion-bottom-to-text-compact-large: 9px;
+    --spectrum-accordion-bottom-to-text-regular-large: 14px;
+    --spectrum-accordion-bottom-to-text-spacious-large: 19px;
+    --spectrum-accordion-bottom-to-text-compact-extra-large: 10px;
+    --spectrum-accordion-bottom-to-text-regular-extra-large: 15px;
+    --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px;
+    --spectrum-accordion-minimum-width: 250px;
+    --spectrum-accordion-content-area-top-to-content: 10px;
+    --spectrum-accordion-content-area-bottom-to-content: 20px;
+    --spectrum-color-handle-size: 20px;
+    --spectrum-color-handle-size-key-focus: 40px;
+    --spectrum-table-column-header-row-top-to-text-small: 10px;
+    --spectrum-table-column-header-row-top-to-text-medium: 9px;
+    --spectrum-table-column-header-row-top-to-text-large: 13px;
+    --spectrum-table-column-header-row-top-to-text-extra-large: 16px;
+    --spectrum-table-column-header-row-bottom-to-text-small: 11px;
+    --spectrum-table-column-header-row-bottom-to-text-medium: 10px;
+    --spectrum-table-column-header-row-bottom-to-text-large: 13px;
+    --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px;
+    --spectrum-table-row-height-small-regular: 40px;
+    --spectrum-table-row-height-medium-regular: 50px;
+    --spectrum-table-row-height-large-regular: 60px;
+    --spectrum-table-row-height-extra-large-regular: 70px;
+    --spectrum-table-row-height-small-spacious: 50px;
+    --spectrum-table-row-height-medium-spacious: 60px;
+    --spectrum-table-row-height-large-spacious: 70px;
+    --spectrum-table-row-height-extra-large-spacious: 80px;
+    --spectrum-table-row-top-to-text-small-regular: 10px;
+    --spectrum-table-row-top-to-text-medium-regular: 14px;
+    --spectrum-table-row-top-to-text-large-regular: 18px;
+    --spectrum-table-row-top-to-text-extra-large-regular: 21px;
+    --spectrum-table-row-bottom-to-text-small-regular: 11px;
+    --spectrum-table-row-bottom-to-text-medium-regular: 15px;
+    --spectrum-table-row-bottom-to-text-large-regular: 18px;
+    --spectrum-table-row-bottom-to-text-extra-large-regular: 22px;
+    --spectrum-table-row-top-to-text-small-spacious: 15px;
+    --spectrum-table-row-top-to-text-medium-spacious: 18px;
+    --spectrum-table-row-top-to-text-large-spacious: 23px;
+    --spectrum-table-row-top-to-text-extra-large-spacious: 26px;
+    --spectrum-table-row-bottom-to-text-small-spacious: 16px;
+    --spectrum-table-row-bottom-to-text-medium-spacious: 18px;
+    --spectrum-table-row-bottom-to-text-large-spacious: 23px;
+    --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px;
+    --spectrum-table-checkbox-to-text: 30px;
+    --spectrum-table-header-row-checkbox-to-top-small: 14px;
+    --spectrum-table-header-row-checkbox-to-top-medium: 13px;
+    --spectrum-table-header-row-checkbox-to-top-large: 17px;
+    --spectrum-table-header-row-checkbox-to-top-extra-large: 21px;
+    --spectrum-table-row-checkbox-to-top-small-compact: 9px;
+    --spectrum-table-row-checkbox-to-top-small-regular: 14px;
+    --spectrum-table-row-checkbox-to-top-small-spacious: 19px;
+    --spectrum-table-row-checkbox-to-top-medium-compact: 13px;
+    --spectrum-table-row-checkbox-to-top-medium-regular: 18px;
+    --spectrum-table-row-checkbox-to-top-medium-spacious: 23px;
+    --spectrum-table-row-checkbox-to-top-large-compact: 17px;
+    --spectrum-table-row-checkbox-to-top-large-regular: 22px;
+    --spectrum-table-row-checkbox-to-top-large-spacious: 27px;
+    --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px;
+    --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px;
+    --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px;
+    --spectrum-table-section-header-row-height-small: 30px;
+    --spectrum-table-section-header-row-height-medium: 40px;
+    --spectrum-table-section-header-row-height-large: 50px;
+    --spectrum-table-section-header-row-height-extra-large: 60px;
+    --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px;
+    --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px;
+    --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px;
+    --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px;
+    --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px;
+    --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px;
+    --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px;
+    --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px;
+    --spectrum-tab-item-to-tab-item-horizontal-small: 27px;
+    --spectrum-tab-item-to-tab-item-horizontal-medium: 30px;
+    --spectrum-tab-item-to-tab-item-horizontal-large: 33px;
+    --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px;
+    --spectrum-tab-item-to-tab-item-vertical-small: 5px;
+    --spectrum-tab-item-to-tab-item-vertical-medium: 5px;
+    --spectrum-tab-item-to-tab-item-vertical-large: 6px;
+    --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px;
+    --spectrum-tab-item-start-to-edge-small: 13px;
+    --spectrum-tab-item-start-to-edge-medium: 15px;
+    --spectrum-tab-item-start-to-edge-large: 17px;
+    --spectrum-tab-item-start-to-edge-extra-large: 19px;
+    --spectrum-tab-item-top-to-text-small: 14px;
+    --spectrum-tab-item-bottom-to-text-small: 15px;
+    --spectrum-tab-item-top-to-text-medium: 18px;
+    --spectrum-tab-item-bottom-to-text-medium: 19px;
+    --spectrum-tab-item-top-to-text-large: 22px;
+    --spectrum-tab-item-bottom-to-text-large: 22px;
+    --spectrum-tab-item-top-to-text-extra-large: 25px;
+    --spectrum-tab-item-bottom-to-text-extra-large: 25px;
+    --spectrum-tab-item-top-to-text-compact-small: 5px;
+    --spectrum-tab-item-bottom-to-text-compact-small: 6px;
+    --spectrum-tab-item-top-to-text-compact-medium: 9px;
+    --spectrum-tab-item-bottom-to-text-compact-medium: 10px;
+    --spectrum-tab-item-top-to-text-compact-large: 12px;
+    --spectrum-tab-item-bottom-to-text-compact-large: 14px;
+    --spectrum-tab-item-top-to-text-compact-extra-large: 15px;
+    --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px;
+    --spectrum-tab-item-top-to-workflow-icon-small: 15px;
+    --spectrum-tab-item-top-to-workflow-icon-medium: 19px;
+    --spectrum-tab-item-top-to-workflow-icon-large: 23px;
+    --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px;
+    --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px;
+    --spectrum-tab-item-focus-indicator-gap-small: 9px;
+    --spectrum-tab-item-focus-indicator-gap-medium: 10px;
+    --spectrum-tab-item-focus-indicator-gap-large: 11px;
+    --spectrum-tab-item-focus-indicator-gap-extra-large: 12px;
+    --spectrum-side-navigation-width: 240px;
+    --spectrum-side-navigation-minimum-width: 200px;
+    --spectrum-side-navigation-maximum-width: 300px;
+    --spectrum-side-navigation-second-level-edge-to-text: 30px;
+    --spectrum-side-navigation-third-level-edge-to-text: 45px;
+    --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px;
+    --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px;
+    --spectrum-side-navigation-item-to-item: 5px;
+    --spectrum-side-navigation-item-to-header: 30px;
+    --spectrum-side-navigation-bottom-to-text: 10px;
+    --spectrum-tray-top-to-content-area: 5px;
+    --spectrum-arrow-icon-size-75: 12px;
+    --spectrum-arrow-icon-size-100: 14px;
+    --spectrum-arrow-icon-size-200: 16px;
+    --spectrum-arrow-icon-size-300: 16px;
+    --spectrum-arrow-icon-size-400: 18px;
+    --spectrum-arrow-icon-size-500: 22px;
+    --spectrum-arrow-icon-size-600: 24px;
+    --spectrum-asterisk-icon-size-100: 10px;
+    --spectrum-asterisk-icon-size-200: 12px;
+    --spectrum-asterisk-icon-size-300: 12px;
+    --spectrum-checkmark-icon-size-50: 12px;
+    --spectrum-checkmark-icon-size-75: 12px;
+    --spectrum-checkmark-icon-size-100: 14px;
+    --spectrum-checkmark-icon-size-200: 14px;
+    --spectrum-checkmark-icon-size-300: 16px;
+    --spectrum-checkmark-icon-size-400: 18px;
+    --spectrum-checkmark-icon-size-500: 20px;
+    --spectrum-checkmark-icon-size-600: 24px;
+    --spectrum-chevron-icon-size-50: 8px;
+    --spectrum-chevron-icon-size-75: 12px;
+    --spectrum-chevron-icon-size-100: 14px;
+    --spectrum-chevron-icon-size-200: 14px;
+    --spectrum-chevron-icon-size-300: 16px;
+    --spectrum-chevron-icon-size-400: 18px;
+    --spectrum-chevron-icon-size-500: 20px;
+    --spectrum-chevron-icon-size-600: 24px;
+    --spectrum-cross-icon-size-75: 10px;
+    --spectrum-cross-icon-size-100: 10px;
+    --spectrum-cross-icon-size-200: 12px;
+    --spectrum-cross-icon-size-300: 14px;
+    --spectrum-cross-icon-size-400: 16px;
+    --spectrum-cross-icon-size-500: 16px;
+    --spectrum-cross-icon-size-600: 18px;
+    --spectrum-dash-icon-size-50: 10px;
+    --spectrum-dash-icon-size-75: 10px;
+    --spectrum-dash-icon-size-100: 12px;
+    --spectrum-dash-icon-size-200: 14px;
+    --spectrum-dash-icon-size-300: 16px;
+    --spectrum-dash-icon-size-400: 18px;
+    --spectrum-dash-icon-size-500: 20px;
+    --spectrum-dash-icon-size-600: 22px;
+    --spectrum-side-navigation-header-to-item: 10px;
+    --spectrum-switch-handle-size-small: 10px;
+    --spectrum-switch-handle-selected-size-small: 12px;
+    --spectrum-switch-handle-selected-size-medium: 14px;
+    --spectrum-switch-handle-selected-size-large: 16px;
+    --spectrum-switch-handle-selected-size-extra-large: 20px;
+    --spectrum-switch-handle-size-medium: 12px;
+    --spectrum-switch-handle-size-large: 14px;
+    --spectrum-switch-handle-size-extra-large: 18px;
+    --spectrum-tag-label-to-clear-icon-small: 10px;
+    --spectrum-tag-label-to-clear-icon-medium: 15px;
+    --spectrum-tag-label-to-clear-icon-large: 19px;
+    --spectrum-tag-edge-to-clear-icon-small: 10px;
+    --spectrum-tag-edge-to-clear-icon-medium: 15px;
+    --spectrum-tag-edge-to-clear-icon-large: 19px;
+    --spectrum-opacity-checkerboard-square-size-small: 5px;
+    --spectrum-drop-shadow-y: 2px;
+    --spectrum-drop-shadow-blur: 6px;
+    --spectrum-workflow-icon-size-50: 16px;
+    --spectrum-workflow-icon-size-75: 18px;
+    --spectrum-workflow-icon-size-100: 24px;
+    --spectrum-workflow-icon-size-200: 28px;
+    --spectrum-workflow-icon-size-300: 30px;
+    --spectrum-text-to-visual-50: 7px;
+    --spectrum-text-to-visual-75: 7px;
+    --spectrum-text-to-visual-100: 8px;
+    --spectrum-text-to-visual-200: 9px;
+    --spectrum-text-to-visual-300: 10px;
+    --spectrum-text-to-control-75: 11px;
+    --spectrum-text-to-control-100: 13px;
+    --spectrum-text-to-control-200: 14px;
+    --spectrum-text-to-control-300: 16px;
+    --spectrum-component-height-50: 26px;
+    --spectrum-component-height-75: 30px;
+    --spectrum-component-height-100: 40px;
+    --spectrum-component-height-200: 50px;
+    --spectrum-component-height-300: 60px;
+    --spectrum-component-height-400: 70px;
+    --spectrum-component-height-500: 80px;
+    --spectrum-component-pill-edge-to-visual-75: 13px;
+    --spectrum-component-pill-edge-to-visual-100: 17px;
+    --spectrum-component-pill-edge-to-visual-200: 22px;
+    --spectrum-component-pill-edge-to-visual-300: 27px;
+    --spectrum-component-pill-edge-to-visual-only-75: 5px;
+    --spectrum-component-pill-edge-to-visual-only-100: 9px;
+    --spectrum-component-pill-edge-to-visual-only-200: 13px;
+    --spectrum-component-pill-edge-to-visual-only-300: 16px;
+    --spectrum-component-pill-edge-to-text-75: 15px;
+    --spectrum-component-pill-edge-to-text-100: 20px;
+    --spectrum-component-pill-edge-to-text-200: 25px;
+    --spectrum-component-pill-edge-to-text-300: 30px;
+    --spectrum-component-edge-to-visual-50: 7px;
+    --spectrum-component-edge-to-visual-75: 9px;
+    --spectrum-component-edge-to-visual-100: 12px;
+    --spectrum-component-edge-to-visual-200: 16px;
+    --spectrum-component-edge-to-visual-300: 19px;
+    --spectrum-component-edge-to-visual-only-50: 5px;
+    --spectrum-component-edge-to-visual-only-75: 6px;
+    --spectrum-component-edge-to-visual-only-100: 8px;
+    --spectrum-component-edge-to-visual-only-200: 11px;
+    --spectrum-component-edge-to-visual-only-300: 15px;
+    --spectrum-component-edge-to-text-50: 10px;
+    --spectrum-component-edge-to-text-75: 11px;
+    --spectrum-component-edge-to-text-100: 15px;
+    --spectrum-component-edge-to-text-200: 19px;
+    --spectrum-component-edge-to-text-300: 22px;
+    --spectrum-component-top-to-workflow-icon-50: 5px;
+    --spectrum-component-top-to-workflow-icon-75: 6px;
+    --spectrum-component-top-to-workflow-icon-100: 8px;
+    --spectrum-component-top-to-workflow-icon-200: 11px;
+    --spectrum-component-top-to-workflow-icon-300: 15px;
+    --spectrum-component-top-to-text-50: 4px;
+    --spectrum-component-top-to-text-75: 5px;
+    --spectrum-component-top-to-text-100: 8px;
+    --spectrum-component-top-to-text-200: 12px;
+    --spectrum-component-top-to-text-300: 15px;
+    --spectrum-component-bottom-to-text-50: 6px;
+    --spectrum-component-bottom-to-text-75: 6px;
+    --spectrum-component-bottom-to-text-100: 11px;
+    --spectrum-component-bottom-to-text-200: 14px;
+    --spectrum-component-bottom-to-text-300: 18px;
+    --spectrum-component-to-menu-small: 7px;
+    --spectrum-component-to-menu-medium: 8px;
+    --spectrum-component-to-menu-large: 9px;
+    --spectrum-component-to-menu-extra-large: 10px;
+    --spectrum-field-edge-to-disclosure-icon-75: 9px;
+    --spectrum-field-edge-to-disclosure-icon-100: 13px;
+    --spectrum-field-edge-to-disclosure-icon-200: 17px;
+    --spectrum-field-edge-to-disclosure-icon-300: 22px;
+    --spectrum-field-end-edge-to-disclosure-icon-75: 9px;
+    --spectrum-field-end-edge-to-disclosure-icon-100: 13px;
+    --spectrum-field-end-edge-to-disclosure-icon-200: 17px;
+    --spectrum-field-end-edge-to-disclosure-icon-300: 22px;
+    --spectrum-field-top-to-disclosure-icon-75: 9px;
+    --spectrum-field-top-to-disclosure-icon-100: 13px;
+    --spectrum-field-top-to-disclosure-icon-200: 17px;
+    --spectrum-field-top-to-disclosure-icon-300: 22px;
+    --spectrum-field-top-to-alert-icon-small: 5px;
+    --spectrum-field-top-to-alert-icon-medium: 9px;
+    --spectrum-field-top-to-alert-icon-large: 13px;
+    --spectrum-field-top-to-alert-icon-extra-large: 16px;
+    --spectrum-field-top-to-validation-icon-small: 9px;
+    --spectrum-field-top-to-validation-icon-medium: 13px;
+    --spectrum-field-top-to-validation-icon-large: 17px;
+    --spectrum-field-top-to-validation-icon-extra-large: 22px;
+    --spectrum-field-top-to-progress-circle-small: 7px;
+    --spectrum-field-top-to-progress-circle-medium: 12px;
+    --spectrum-field-top-to-progress-circle-large: 17px;
+    --spectrum-field-top-to-progress-circle-extra-large: 22px;
+    --spectrum-field-edge-to-alert-icon-small: 11px;
+    --spectrum-field-edge-to-alert-icon-medium: 15px;
+    --spectrum-field-edge-to-alert-icon-large: 19px;
+    --spectrum-field-edge-to-alert-icon-extra-large: 22px;
+    --spectrum-field-edge-to-validation-icon-small: 11px;
+    --spectrum-field-edge-to-validation-icon-medium: 15px;
+    --spectrum-field-edge-to-validation-icon-large: 19px;
+    --spectrum-field-edge-to-validation-icon-extra-large: 22px;
+    --spectrum-field-text-to-alert-icon-small: 10px;
+    --spectrum-field-text-to-alert-icon-medium: 15px;
+    --spectrum-field-text-to-alert-icon-large: 19px;
+    --spectrum-field-text-to-alert-icon-extra-large: 22px;
+    --spectrum-field-text-to-validation-icon-small: 10px;
+    --spectrum-field-text-to-validation-icon-medium: 15px;
+    --spectrum-field-text-to-validation-icon-large: 19px;
+    --spectrum-field-text-to-validation-icon-extra-large: 22px;
+    --spectrum-field-width: var(--spectrum-field-width-small);
+    --spectrum-field-width-small: 240px;
+    --spectrum-character-count-to-field-quiet-small: -4px;
+    --spectrum-character-count-to-field-quiet-medium: -4px;
+    --spectrum-character-count-to-field-quiet-large: -4px;
+    --spectrum-character-count-to-field-quiet-extra-large: -5px;
+    --spectrum-side-label-character-count-to-field: 15px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px;
+    --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px;
+    --spectrum-navigational-indicator-top-to-back-icon-small: 7px;
+    --spectrum-navigational-indicator-top-to-back-icon-medium: 12px;
+    --spectrum-navigational-indicator-top-to-back-icon-large: 16px;
+    --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px;
+    --spectrum-color-control-track-width: 30px;
+    --spectrum-corner-triangle-icon-size-75: 6px;
+    --spectrum-corner-triangle-icon-size-100: 7px;
+    --spectrum-corner-triangle-icon-size-200: 8px;
+    --spectrum-corner-triangle-icon-size-300: 8px;
+    --spectrum-field-width-medium: 256px;
+    --spectrum-field-width-large: 272px;
+    --spectrum-field-width-extra-large: 288px;
+    --spectrum-font-size-50: 13px;
+    --spectrum-font-size-75: 15px;
+    --spectrum-font-size-100: 17px;
+    --spectrum-font-size-200: 19px;
+    --spectrum-font-size-300: 22px;
+    --spectrum-font-size-400: 24px;
+    --spectrum-font-size-500: 27px;
+    --spectrum-font-size-600: 31px;
+    --spectrum-font-size-700: 34px;
+    --spectrum-font-size-800: 39px;
+    --spectrum-font-size-900: 44px;
+    --spectrum-font-size-1000: 49px;
+    --spectrum-font-size-1100: 55px;
+    --spectrum-font-size-1200: 62px;
+    --spectrum-font-size-1300: 70px;
+}