feat(tokens)!: use spectrum-tokens 13.0.0-beta.16

Author: pfulton

tokens/dist/css/dark-vars.css

@@ -16,8 +16,6 @@
   --spectrum-drop-shadow-color-rgb:0, 0, 0;
   --spectrum-drop-shadow-color-opacity:0.8;
   --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
-  --spectrum-background-base-color:var(--spectrum-gray-25);
-  --spectrum-background-layer-1-color:var(--spectrum-gray-50);
   --spectrum-background-layer-2-color:var(--spectrum-gray-75);
   --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400);
   --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300);
@@ -40,7 +38,6 @@
   --spectrum-positive-background-color-down:var(--spectrum-positive-color-500);
   --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500);
   --spectrum-notice-background-color-default:var(--spectrum-notice-color-800);
-  --spectrum-gray-background-color-default:var(--spectrum-gray-700);
   --spectrum-red-background-color-default:var(--spectrum-red-700);
   --spectrum-orange-background-color-default:var(--spectrum-orange-800);
   --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000);

tokens/dist/css/global-vars.css

@@ -17,6 +17,8 @@
   --spectrum-static-black-focus-indicator-color:var(--spectrum-black);
   --spectrum-overlay-color:var(--spectrum-black);
   --spectrum-opacity-disabled:0.3;
+  --spectrum-background-base-color:var(--spectrum-gray-25);
+  --spectrum-background-layer-1-color:var(--spectrum-gray-50);
   --spectrum-neutral-background-color-default:var(--spectrum-gray-800);
   --spectrum-neutral-background-color-hover:var(--spectrum-gray-900);
   --spectrum-neutral-background-color-down:var(--spectrum-gray-900);
@@ -30,6 +32,7 @@
   --spectrum-disabled-background-color:var(--spectrum-gray-100);
   --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100);
   --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100);
+  --spectrum-gray-background-color-default:var(--spectrum-gray-700);
   --spectrum-background-opacity-default:0;
   --spectrum-background-opacity-hover:0.1;
   --spectrum-background-opacity-down:0.1;
@@ -187,8 +190,15 @@
   --spectrum-icon-color-inverse:var(--spectrum-gray-50);
   --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default);
   --spectrum-radio-button-selection-indicator:4px;
+  --spectrum-field-label-top-margin-small:0px;
+  --spectrum-field-label-top-margin-medium:0px;
+  --spectrum-field-label-top-margin-large:0px;
+  --spectrum-field-label-top-margin-extra-large:0px;
   --spectrum-field-label-to-component:0px;
   --spectrum-help-text-to-component:0px;
+  --spectrum-status-light-dot-size-small:8px;
+  --spectrum-action-button-edge-to-hold-icon-extra-small:3px;
+  --spectrum-action-button-edge-to-hold-icon-small:3px;
   --spectrum-button-minimum-width-multiplier:2.25;
   --spectrum-divider-thickness-small:1px;
   --spectrum-divider-thickness-medium:2px;
@@ -254,6 +264,12 @@
   --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size);
   --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size);
   --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size);
+  --spectrum-accordion-top-to-text-compact-small:2px;
+  --spectrum-accordion-top-to-text-compact-medium:4px;
+  --spectrum-accordion-disclosure-indicator-to-text:0px;
+  --spectrum-accordion-edge-to-disclosure-indicator:0px;
+  --spectrum-accordion-edge-to-text:0px;
+  --spectrum-accordion-focus-indicator-gap:0px;
   --spectrum-color-handle-border-width:var(--spectrum-border-width-200);
   --spectrum-color-handle-inner-border-width:1px;
   --spectrum-color-handle-outer-border-width:1px;
@@ -272,6 +288,7 @@
   --spectrum-table-row-bottom-to-text-medium-compact:var(--spectrum-component-bottom-to-text-100);
   --spectrum-table-row-bottom-to-text-large-compact:var(--spectrum-component-bottom-to-text-200);
   --spectrum-table-row-bottom-to-text-extra-large-compact:var(--spectrum-component-bottom-to-text-300);
+  --spectrum-table-edge-to-content:16px;
   --spectrum-table-border-divider-width:1px;
   --spectrum-tab-item-height-small:var(--spectrum-component-height-200);
   --spectrum-tab-item-height-medium:var(--spectrum-component-height-300);
@@ -301,9 +318,24 @@
   --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
   --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
   --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
+  --spectrum-asterisk-icon-size-75:8px;
   --spectrum-divider-vertical-minimum-height:200px;
   --spectrum-divider-horizontal-minimum-width:200px;
   --spectrum-tooltip-tip-corner-radius:1px;
+  --spectrum-tag-minimum-width-multiplier:1;
+  --spectrum-tag-maximum-width-multiplier:7;
+  --spectrum-corner-radius-0:0px;
+  --spectrum-corner-radius-75:3px;
+  --spectrum-corner-radius-100:4px;
+  --spectrum-corner-radius-200:5px;
+  --spectrum-corner-radius-300:6px;
+  --spectrum-corner-radius-400:7px;
+  --spectrum-corner-radius-500:8px;
+  --spectrum-corner-radius-600:9px;
+  --spectrum-corner-radius-700:10px;
+  --spectrum-corner-radius-800:16px;
+  --spectrum-corner-radius-1000:0.5;
+  --spectrum-drop-shadow-x:0px;
   --spectrum-android-elevation:2dp;
   --spectrum-spacing-50:2px;
   --spectrum-spacing-75:4px;
@@ -332,6 +364,21 @@
   --spectrum-component-size-width-ratio-down:0.3333;
   --spectrum-component-size-minimum-perspective-down:24px;
   --spectrum-component-size-difference-down:-2px;
+  --spectrum-corner-radius-none:var(--spectrum-corner-radius-0);
+  --spectrum-corner-radius-small-default:var(--spectrum-corner-radius-100);
+  --spectrum-corner-radius-medium-default:var(--spectrum-corner-radius-500);
+  --spectrum-corner-radius-large-default:var(--spectrum-corner-radius-700);
+  --spectrum-corner-radius-extra-large-default:var(--spectrum-corner-radius-800);
+  --spectrum-corner-radius-full:var(--spectrum-corner-radius-1000);
+  --spectrum-corner-radius-small-size-small:var(--spectrum-corner-radius-75);
+  --spectrum-corner-radius-small-size-medium:var(--spectrum-corner-radius-100);
+  --spectrum-corner-radius-small-size-large:var(--spectrum-corner-radius-200);
+  --spectrum-corner-radius-small-size-extra-large:var(--spectrum-corner-radius-300);
+  --spectrum-corner-radius-medium-size-extra-small:var(--spectrum-corner-radius-300);
+  --spectrum-corner-radius-medium-size-small:var(--spectrum-corner-radius-400);
+  --spectrum-corner-radius-medium-size-medium:var(--spectrum-corner-radius-500);
+  --spectrum-corner-radius-medium-size-large:var(--spectrum-corner-radius-600);
+  --spectrum-corner-radius-medium-size-extra-large:var(--spectrum-corner-radius-700);
   --spectrum-accent-color-100:var(--spectrum-blue-100);
   --spectrum-accent-color-200:var(--spectrum-blue-200);
   --spectrum-accent-color-300:var(--spectrum-blue-300);
@@ -412,6 +459,10 @@
   --spectrum-positive-color-1400:var(--spectrum-green-1400);
   --spectrum-positive-color-1500:var(--spectrum-green-1500);
   --spectrum-positive-color-1600:var(--spectrum-green-1600);
+  --spectrum-negative-subdued-background-color-default:var(--spectrum-negative-color-200);
+  --spectrum-negative-subdued-background-color-hover:var(--spectrum-negative-color-300);
+  --spectrum-negative-subdued-background-color-down:var(--spectrum-negative-color-300);
+  --spectrum-negative-subdued-background-color-key-focus:var(--spectrum-negative-color-300);
   --spectrum-default-font-family:var(--spectrum-sans-serif-font-family);
   --spectrum-sans-serif-font-family:Adobe Clean;
   --spectrum-serif-font-family:Adobe Clean Serif;

tokens/dist/css/large-vars.css

@@ -20,14 +20,14 @@
   --spectrum-checkbox-top-to-control-medium:11px;
   --spectrum-checkbox-top-to-control-large:15px;
   --spectrum-checkbox-top-to-control-extra-large:19px;
-  --spectrum-switch-control-width-small:32px;
-  --spectrum-switch-control-width-medium:36px;
-  --spectrum-switch-control-width-large:41px;
+  --spectrum-switch-control-width-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:16px;
-  --spectrum-switch-control-height-medium:18px;
-  --spectrum-switch-control-height-large:20px;
-  --spectrum-switch-control-height-extra-large:22px;
+  --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;
@@ -48,10 +48,6 @@
   --spectrum-field-label-top-to-asterisk-medium:15px;
   --spectrum-field-label-top-to-asterisk-large:19px;
   --spectrum-field-label-top-to-asterisk-extra-large:24px;
-  --spectrum-field-label-top-margin-small:0px;
-  --spectrum-field-label-top-margin-medium:0px;
-  --spectrum-field-label-top-margin-large:0px;
-  --spectrum-field-label-top-margin-extra-large:0px;
   --spectrum-field-label-to-component-quiet-small:-10px;
   --spectrum-field-label-to-component-quiet-medium:-10px;
   --spectrum-field-label-to-component-quiet-large:-15px;
@@ -60,16 +56,13 @@
   --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-small:8px;
   --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-extra-small:3px;
-  --spectrum-action-button-edge-to-hold-icon-small:3px;
   --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;
@@ -218,10 +211,8 @@
   --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-compact-small:2px;
   --spectrum-accordion-top-to-text-regular-small:7px;
   --spectrum-accordion-small-top-to-text-spacious:12px;
-  --spectrum-accordion-top-to-text-compact-medium:4px;
   --spectrum-accordion-top-to-text-regular-medium:9px;
   --spectrum-accordion-top-to-text-spacious-medium:14px;
   --spectrum-accordion-top-to-text-compact-large:7px;
@@ -243,10 +234,6 @@
   --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-disclosure-indicator-to-text:0px;
-  --spectrum-accordion-edge-to-disclosure-indicator:0px;
-  --spectrum-accordion-edge-to-text:0px;
-  --spectrum-accordion-focus-indicator-gap:0px;
   --spectrum-accordion-content-area-top-to-content:10px;
   --spectrum-accordion-content-area-bottom-to-content:20px;
   --spectrum-color-handle-size:20px;
@@ -283,7 +270,6 @@
   --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-edge-to-content:16px;
   --spectrum-table-checkbox-to-text:30px;
   --spectrum-table-header-row-checkbox-to-top-small:14px;
   --spectrum-table-header-row-checkbox-to-top-medium:13px;
@@ -375,7 +361,6 @@
   --spectrum-arrow-icon-size-400:18px;
   --spectrum-arrow-icon-size-500:22px;
   --spectrum-arrow-icon-size-600:24px;
-  --spectrum-asterisk-icon-size-75:8px;
   --spectrum-asterisk-icon-size-100:10px;
   --spectrum-asterisk-icon-size-200:12px;
   --spectrum-asterisk-icon-size-300:12px;
@@ -411,18 +396,20 @@
   --spectrum-dash-icon-size-500:20px;
   --spectrum-dash-icon-size-600:22px;
   --spectrum-side-navigation-header-to-item:10px;
-  --spectrum-corner-radius-0:0px;
-  --spectrum-corner-radius-75:3px;
-  --spectrum-corner-radius-100:4px;
-  --spectrum-corner-radius-200:5px;
-  --spectrum-corner-radius-300:6px;
-  --spectrum-corner-radius-400:7px;
-  --spectrum-corner-radius-500:8px;
-  --spectrum-corner-radius-600:9px;
-  --spectrum-corner-radius-700:10px;
-  --spectrum-corner-radius-800:16px;
-  --spectrum-corner-radius-1000:0.5;
-  --spectrum-drop-shadow-x:0px;
+  --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-drop-shadow-y:2px;
   --spectrum-drop-shadow-blur:6px;
   --spectrum-workflow-icon-size-50:16px;
@@ -555,21 +542,6 @@
   --spectrum-corner-triangle-icon-size-100:7px;
   --spectrum-corner-triangle-icon-size-200:8px;
   --spectrum-corner-triangle-icon-size-300:8px;
-  --spectrum-corner-radius-none:var(--spectrum-corner-radius-0);
-  --spectrum-corner-radius-small-default:var(--spectrum-corner-radius-100);
-  --spectrum-corner-radius-medium-default:var(--spectrum-corner-radius-500);
-  --spectrum-corner-radius-large-default:var(--spectrum-corner-radius-700);
-  --spectrum-corner-radius-extra-large-default:var(--spectrum-corner-radius-800);
-  --spectrum-corner-radius-full:var(--spectrum-corner-radius-1000);
-  --spectrum-corner-radius-small-size-small:var(--spectrum-corner-radius-75);
-  --spectrum-corner-radius-small-size-medium:var(--spectrum-corner-radius-100);
-  --spectrum-corner-radius-small-size-large:var(--spectrum-corner-radius-200);
-  --spectrum-corner-radius-small-size-extra-large:var(--spectrum-corner-radius-300);
-  --spectrum-corner-radius-medium-size-extra-small:var(--spectrum-corner-radius-300);
-  --spectrum-corner-radius-medium-size-small:var(--spectrum-corner-radius-400);
-  --spectrum-corner-radius-medium-size-medium:var(--spectrum-corner-radius-500);
-  --spectrum-corner-radius-medium-size-large:var(--spectrum-corner-radius-600);
-  --spectrum-corner-radius-medium-size-extra-large:var(--spectrum-corner-radius-700);
   --spectrum-font-size-50:13px;
   --spectrum-font-size-75:15px;
   --spectrum-font-size-100:17px;

tokens/dist/css/light-vars.css

@@ -16,8 +16,6 @@
   --spectrum-drop-shadow-color-rgb:0, 0, 0;
   --spectrum-drop-shadow-color-opacity:0.15;
   --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
-  --spectrum-background-base-color:var(--spectrum-gray-25);
-  --spectrum-background-layer-1-color:var(--spectrum-gray-50);
   --spectrum-background-layer-2-color:var(--spectrum-gray-25);
   --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700);
   --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800);
@@ -40,7 +38,6 @@
   --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000);
   --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000);
   --spectrum-notice-background-color-default:var(--spectrum-notice-color-600);
-  --spectrum-gray-background-color-default:var(--spectrum-gray-700);
   --spectrum-red-background-color-default:var(--spectrum-red-900);
   --spectrum-orange-background-color-default:var(--spectrum-orange-600);
   --spectrum-yellow-background-color-default:var(--spectrum-yellow-400);