@spectrum-web-components/styles 0.42.2 → 0.42.4

package/tokens-v2/medium-vars.css

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

package/tokens-v2/spectrum/custom-dark-vars.css

@@ -0,0 +1,108 @@
+:host,
+:root {
+    --spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
+    --spectrum-menu-item-background-color-default-opacity: 0;
+    --spectrum-menu-item-background-color-default: rgba(
+        var(--spectrum-menu-item-background-color-default-rgb),
+        var(--spectrum-menu-item-background-color-default-opacity)
+    ); /* --spectrum-gray-900 */
+    --spectrum-menu-item-background-color-hover: var(
+        --spectrum-transparent-white-200
+    );
+    --spectrum-menu-item-background-color-down: var(
+        --spectrum-transparent-white-200
+    );
+    --spectrum-menu-item-background-color-key-focus: var(
+        --spectrum-transparent-white-200
+    );
+
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-blue-900-rgb
+    ); /* var(--spectrum-accent-color-900);*/
+
+    /* Drop Indicator color rgb */
+    --spectrum-dropindicator-color: var(--spectrum-blue-700);
+
+    --spectrum-calendar-day-background-color-selected: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.15
+    );
+    --spectrum-calendar-day-background-color-hover: rgba(
+        var(--spectrum-white-rgb),
+        0.07
+    );
+    --spectrum-calendar-day-today-background-color-selected-hover: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.25
+    );
+    --spectrum-calendar-day-background-color-selected-hover: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.25
+    );
+    --spectrum-calendar-day-background-color-down: var(
+        --spectrum-transparent-white-200
+    );
+    --spectrum-calendar-day-background-color-cap-selected: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.25
+    );
+    --spectrum-calendar-day-background-color-key-focus: rgba(
+        var(--spectrum-white-rgb),
+        0.07
+    );
+    --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
+
+    --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
+
+    --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
+    --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
+    --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
+
+    --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
+
+    --spectrum-steplist-current-marker-color-key-focus: var(
+        --spectrum-blue-700
+    );
+
+    --spectrum-treeview-item-background-color-quiet-selected: rgba(
+        var(--spectrum-gray-900-rgb),
+        0.07
+    );
+    --spectrum-treeview-item-background-color-selected: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.15
+    );
+
+    --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
+    --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
+    --spectrum-logic-button-and-background-color-hover: var(
+        --spectrum-blue-1000
+    );
+    --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
+
+    --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
+    --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
+    --spectrum-logic-button-or-background-color-hover: var(
+        --spectrum-magenta-900
+    );
+    --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
+
+    --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
+    --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
+    --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
+    --spectrum-assetcard-selectionindicator-background-color-ordered: var(
+        --spectrum-blue-800
+    );
+    --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
+
+    --spectrum-assetlist-item-background-color-selected-hover: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.25
+    );
+    --spectrum-assetlist-item-background-color-selected: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.15
+    );
+    --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
+}