feat(tokens): use spectrum-tokens at v13.0.0-beta.24 (#2650)

Author: Melissa Thompson

tokens/dist/css/dark-vars.css

@@ -1,8 +1,5 @@
 .spectrum--dark{
   --spectrum-overlay-opacity:0.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-layer-2-color:var(--spectrum-gray-75);
   --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-500);
   --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-400);
@@ -71,6 +68,12 @@
   --spectrum-pink-background-color-default:var(--spectrum-pink-700);
   --spectrum-silver-background-color-default:var(--spectrum-silver-700);
   --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-700);
+  --spectrum-drop-shadow-color-100-rgb:0, 0, 0;
+  --spectrum-drop-shadow-color-100-opacity:0.36;
+  --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+  --spectrum-drop-shadow-color-200-rgb:0, 0, 0;
+  --spectrum-drop-shadow-color-200-opacity:0.48;
+  --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
   --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800);
   --spectrum-gray-25-rgb:17, 17, 17;
   --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb));

tokens/dist/css/global-vars.css

@@ -3,6 +3,7 @@
   --spectrum-static-white-focus-indicator-color:var(--spectrum-white);
   --spectrum-static-black-focus-indicator-color:var(--spectrum-black);
   --spectrum-overlay-color:var(--spectrum-black);
+  --spectrum-drop-shadow-color:var(--spectrum-drop-shadow-color-100);
   --spectrum-opacity-disabled:0.3;
   --spectrum-background-base-color:var(--spectrum-gray-25);
   --spectrum-background-layer-1-color:var(--spectrum-gray-50);
@@ -53,6 +54,10 @@
   --spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down);
   --spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000);
   --spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000);
+  --spectrum-title-color:var(--spectrum-gray-900);
+  --spectrum-drop-shadow-emphasized-default-color:var(--spectrum-drop-shadow-color-100);
+  --spectrum-drop-shadow-emphasized-hover-color:var(--spectrum-drop-shadow-color-200);
+  --spectrum-drop-shadow-elevated-color:var(--spectrum-drop-shadow-color-200);
   --spectrum-swatch-border-color:var(--spectrum-gray-900);
   --spectrum-swatch-border-opacity:0.51;
   --spectrum-swatch-disabled-icon-border-color:var(--spectrum-black);
@@ -366,7 +371,9 @@
   --spectrum-corner-radius-700:10px;
   --spectrum-corner-radius-800:16px;
   --spectrum-corner-radius-1000:0.5;
-  --spectrum-drop-shadow-x:0px;
+  --spectrum-drop-shadow-x:var(--spectrum-drop-shadow-x-100);
+  --spectrum-drop-shadow-y:var(--spectrum-drop-shadow-y-100);
+  --spectrum-drop-shadow-blur:var(--spectrum-drop-shadow-blur-100);
   --spectrum-android-elevation:2dp;
   --spectrum-spacing-50:2px;
   --spectrum-spacing-75:4px;
@@ -390,6 +397,7 @@
   --spectrum-field-edge-to-border-quiet:0px;
   --spectrum-field-edge-to-alert-icon-quiet:0px;
   --spectrum-field-edge-to-validation-icon-quiet:0px;
+  --spectrum-field-width-small:var(--spectrum-field-default-width-small);
   --spectrum-side-label-character-count-top-margin-small:0px;
   --spectrum-side-label-character-count-top-margin-medium:0px;
   --spectrum-side-label-character-count-top-margin-large:0px;
@@ -414,6 +422,24 @@
   --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-field-width-medium:var(--spectrum-field-default-width-medium);
+  --spectrum-field-width-large:var(--spectrum-field-default-width-large);
+  --spectrum-field-width-extra-large:var(--spectrum-field-default-width-extra-large);
+  --spectrum-drop-shadow-x-100:0px;
+  --spectrum-drop-shadow-x-200:0px;
+  --spectrum-drop-shadow-y-100:1px;
+  --spectrum-drop-shadow-y-200:2px;
+  --spectrum-drop-shadow-blur-100:6px;
+  --spectrum-drop-shadow-blur-200:8px;
+  --spectrum-drop-shadow-emphasized-default-x:var(--spectrum-drop-shadow-x-100);
+  --spectrum-drop-shadow-emphasized-default-y:var(--spectrum-drop-shadow-y-100);
+  --spectrum-drop-shadow-emphasized-default-blur:var(--spectrum-drop-shadow-blur-100);
+  --spectrum-drop-shadow-emphasized-hover-x:var(--spectrum-drop-shadow-x-200);
+  --spectrum-drop-shadow-emphasized-hover-y:var(--spectrum-drop-shadow-y-200);
+  --spectrum-drop-shadow-emphasized-hover-blur:var(--spectrum-drop-shadow-blur-200);
+  --spectrum-drop-shadow-elevated-x:var(--spectrum-drop-shadow-x-200);
+  --spectrum-drop-shadow-elevated-y:var(--spectrum-drop-shadow-y-200);
+  --spectrum-drop-shadow-elevated-blur:var(--spectrum-drop-shadow-blur-200);
   --spectrum-accent-color-100:var(--spectrum-blue-100);
   --spectrum-accent-color-200:var(--spectrum-blue-200);
   --spectrum-accent-color-300:var(--spectrum-blue-300);

tokens/dist/css/large-vars.css

@@ -141,8 +141,8 @@
   --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-alert-dialog-title-size:var(--spectrum-title-size-xl);
+  --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:10px;
   --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs);
@@ -399,8 +399,15 @@
   --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-alert-banner-top-to-alert-icon:29px;
+  --spectrum-accordion-top-to-text-spacious-small:12px;
+  --spectrum-field-default-width-small:240px;
+  --spectrum-field-default-width-medium:256px;
+  --spectrum-field-default-width-large:272px;
+  --spectrum-field-default-width-extra-large:288px;
+  --spectrum-tag-minimum-width-small:25px;
+  --spectrum-tag-minimum-width-medium:34px;
+  --spectrum-tag-minimum-width-large:42px;
   --spectrum-workflow-icon-size-50:16px;
   --spectrum-workflow-icon-size-75:18px;
   --spectrum-workflow-icon-size-100:24px;
@@ -488,10 +495,10 @@
   --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-top-to-progress-circle-small:6px;
+  --spectrum-field-top-to-progress-circle-medium:8px;
+  --spectrum-field-top-to-progress-circle-large:11px;
+  --spectrum-field-top-to-progress-circle-extra-large:15px;
   --spectrum-field-edge-to-alert-icon-small:11px;
   --spectrum-field-edge-to-alert-icon-medium:15px;
   --spectrum-field-edge-to-alert-icon-large:19px;
@@ -509,7 +516,6 @@
   --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;
@@ -528,9 +534,6 @@
   --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;

tokens/dist/css/light-vars.css

@@ -1,8 +1,5 @@
 .spectrum--light, .spectrum--lightest{
   --spectrum-overlay-opacity:0.4;
-  --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-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);
@@ -71,6 +68,12 @@
   --spectrum-pink-background-color-default:var(--spectrum-pink-900);
   --spectrum-silver-background-color-default:var(--spectrum-silver-900);
   --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-900);
+  --spectrum-drop-shadow-color-100-rgb:0, 0, 0;
+  --spectrum-drop-shadow-color-100-opacity:0.12;
+  --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+  --spectrum-drop-shadow-color-200-rgb:0, 0, 0;
+  --spectrum-drop-shadow-color-200-opacity:0.16;
+  --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
   --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200);
   --spectrum-gray-25-rgb:255, 255, 255;
   --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb));

tokens/dist/css/medium-vars.css

@@ -141,8 +141,8 @@
   --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-alert-dialog-title-size:var(--spectrum-title-size-xxl);
+  --spectrum-alert-dialog-description-size:var(--spectrum-body-size-m);
   --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);
@@ -399,8 +399,15 @@
   --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-alert-banner-top-to-alert-icon:37px;
+  --spectrum-accordion-top-to-text-spacious-small:9px;
+  --spectrum-field-default-width-small:192px;
+  --spectrum-field-default-width-medium:208px;
+  --spectrum-field-default-width-large:224px;
+  --spectrum-field-default-width-extra-large:240px;
+  --spectrum-tag-minimum-width-small:21px;
+  --spectrum-tag-minimum-width-medium:27px;
+  --spectrum-tag-minimum-width-large:33px;
   --spectrum-workflow-icon-size-50:14px;
   --spectrum-workflow-icon-size-75:16px;
   --spectrum-workflow-icon-size-100:20px;
@@ -489,9 +496,9 @@
   --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-top-to-progress-circle-medium:6px;
+  --spectrum-field-top-to-progress-circle-large:9px;
+  --spectrum-field-top-to-progress-circle-extra-large:11px;
   --spectrum-field-edge-to-alert-icon-small:9px;
   --spectrum-field-edge-to-alert-icon-medium:12px;
   --spectrum-field-edge-to-alert-icon-large:15px;
@@ -509,7 +516,6 @@
   --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;
@@ -528,9 +534,6 @@
   --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;