@spectrum-web-components/styles 0.20.0 → 0.21.0

package/src/spectrum-typography.css

@@ -21,6 +21,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-heading-xxxl-margin-top)
     ); /* .spectrum-Typography .spectrum-Heading--sizeXXXL */
 }
+
 .spectrum-Typography .spectrum-Heading--sizeXXL {
     margin-bottom: var(
         --spectrum-heading-xxl-margin-bottom,
@@ -31,6 +32,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-heading-xxl-margin-top)
     ); /* .spectrum-Typography .spectrum-Heading--sizeXXL */
 }
+
 .spectrum-Typography .spectrum-Heading--sizeXL {
     margin-bottom: var(
         --spectrum-heading-xl-margin-bottom,
@@ -41,6 +43,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-heading-xl-margin-top)
     ); /* .spectrum-Typography .spectrum-Heading--sizeXL */
 }
+
 .spectrum-Typography .spectrum-Heading--sizeL {
     margin-bottom: var(
         --spectrum-heading-l-margin-bottom,
@@ -51,6 +54,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-heading-l-margin-top)
     ); /* .spectrum-Typography .spectrum-Heading--sizeL */
 }
+
 .spectrum-Typography .spectrum-Heading--sizeM {
     margin-bottom: var(
         --spectrum-heading-m-margin-bottom,
@@ -61,6 +65,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-heading-m-margin-top)
     ); /* .spectrum-Typography .spectrum-Heading--sizeM */
 }
+
 .spectrum-Typography .spectrum-Heading--sizeS {
     margin-bottom: var(
         --spectrum-heading-s-margin-bottom,
@@ -71,6 +76,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-heading-s-margin-top)
     ); /* .spectrum-Typography .spectrum-Heading--sizeS */
 }
+
 .spectrum-Typography .spectrum-Heading--sizeXS {
     margin-bottom: var(
         --spectrum-heading-xs-margin-bottom,
@@ -81,6 +87,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-heading-xs-margin-top)
     ); /* .spectrum-Typography .spectrum-Heading--sizeXS */
 }
+
 .spectrum-Typography .spectrum-Heading--sizeXXS {
     margin-bottom: var(
         --spectrum-heading-xxs-margin-bottom,
@@ -91,6 +98,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-heading-xxs-margin-top)
     ); /* .spectrum-Typography .spectrum-Heading--sizeXXS */
 }
+
 .spectrum-Typography .spectrum-Body--sizeXXXL {
     margin-bottom: var(
         --spectrum-body-xxxl-margin-bottom,
@@ -101,6 +109,7 @@ governing permissions and limitations under the License.
         0
     ); /* .spectrum-Typography .spectrum-Body--sizeXXXL */
 }
+
 .spectrum-Typography .spectrum-Body--sizeXXL {
     margin-bottom: var(
         --spectrum-body-xxl-margin-bottom,
@@ -111,6 +120,7 @@ governing permissions and limitations under the License.
         0
     ); /* .spectrum-Typography .spectrum-Body--sizeXXL */
 }
+
 .spectrum-Typography .spectrum-Body--sizeXL {
     margin-bottom: var(
         --spectrum-body-xl-margin-bottom,
@@ -121,6 +131,7 @@ governing permissions and limitations under the License.
         0
     ); /* .spectrum-Typography .spectrum-Body--sizeXL */
 }
+
 .spectrum-Typography .spectrum-Body--sizeL {
     margin-bottom: var(
         --spectrum-body-l-margin-bottom,
@@ -131,6 +142,7 @@ governing permissions and limitations under the License.
         0
     ); /* .spectrum-Typography .spectrum-Body--sizeL */
 }
+
 .spectrum-Typography .spectrum-Body--sizeM {
     margin-bottom: var(
         --spectrum-body-m-margin-bottom,
@@ -141,6 +153,7 @@ governing permissions and limitations under the License.
         0
     ); /* .spectrum-Typography .spectrum-Body--sizeM */
 }
+
 .spectrum-Typography .spectrum-Body--sizeS {
     margin-bottom: var(
         --spectrum-body-s-margin-bottom,
@@ -151,6 +164,7 @@ governing permissions and limitations under the License.
         0
     ); /* .spectrum-Typography .spectrum-Body--sizeS */
 }
+
 .spectrum-Typography .spectrum-Body--sizeXS {
     margin-bottom: var(
         --spectrum-body-xs-margin-bottom,

package/tokens/express/custom-large-vars.css

@@ -12,7 +12,6 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host,
-:root {
-    /*  */
+:host, :root {
+  /*  */
 }

package/tokens/express/custom-medium-vars.css

@@ -12,7 +12,6 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host,
-:root {
-    /*  */
+:host, :root {
+  /*  */
 }

package/tokens/express/custom-vars.css

@@ -12,7 +12,6 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host,
-:root {
-    --system: express;
+:host, :root {
+  --system: express;
 }

package/tokens/express/global-vars.css

@@ -29,6 +29,8 @@ governing permissions and limitations under the License.
     --spectrum-heading: var(--spectrum-font-black-default);
     --spectrum-heading-emphasized: var(--spectrum-font-black-italic-default);
     --spectrum-cjk-heading: var(--spectrum-font-black-cjk);
+    --spectrum-slider-track-thickness: 4px;
+    --spectrum-slider-handle-gap: 0px;
     --spectrum-border-width-100: 2px;
 }
 :host,
@@ -166,8 +168,8 @@ governing permissions and limitations under the License.
     --system-spectrum-actionbutton-staticblack-content-color-focus: var(
         --spectrum-black
     );
-    --system-spectrum-actionbutton-staticblack-focus-ring-color: var(
-        --spectrum-static-black-focus-ring-color
+    --system-spectrum-actionbutton-staticblack-focus-indicator-color: var(
+        --spectrum-static-black-focus-indicator-color
     );
     --system-spectrum-actionbutton-staticblack-background-color-disabled: transparent;
     --system-spectrum-actionbutton-staticblack-border-color-disabled: var(
@@ -232,8 +234,8 @@ governing permissions and limitations under the License.
     --system-spectrum-actionbutton-staticwhite-content-color-focus: var(
         --spectrum-white
     );
-    --system-spectrum-actionbutton-staticwhite-focus-ring-color: var(
-        --spectrum-static-white-focus-ring-color
+    --system-spectrum-actionbutton-staticwhite-focus-indicator-color: var(
+        --spectrum-static-white-focus-indicator-color
     );
     --system-spectrum-actionbutton-staticwhite-background-color-disabled: transparent;
     --system-spectrum-actionbutton-staticwhite-border-color-disabled: var(

package/tokens/express/large-vars.css

@@ -40,6 +40,30 @@ governing permissions and limitations under the License.
     --spectrum-switch-top-to-control-medium: 10px;
     --spectrum-switch-top-to-control-large: 14px;
     --spectrum-switch-top-to-control-extra-large: 17px;
+    --spectrum-slider-control-height-small: 22px;
+    --spectrum-slider-control-height-medium: 24px;
+    --spectrum-slider-control-height-large: 28px;
+    --spectrum-slider-control-height-extra-large: 30px;
+    --spectrum-slider-handle-size-small: 22px;
+    --spectrum-slider-handle-size-medium: 24px;
+    --spectrum-slider-handle-size-large: 28px;
+    --spectrum-slider-handle-size-extra-large: 30px;
+    --spectrum-slider-handle-border-width-down-small: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-medium: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-large: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-extra-large: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-bottom-to-handle-small: 4px;
+    --spectrum-slider-bottom-to-handle-medium: 8px;
+    --spectrum-slider-bottom-to-handle-large: 12px;
+    --spectrum-slider-bottom-to-handle-extra-large: 15px;
     --spectrum-corner-radius-75: 4px;
     --spectrum-corner-radius-100: 8px;
     --spectrum-corner-radius-200: 16px;

package/tokens/express/medium-vars.css

@@ -40,6 +40,30 @@ governing permissions and limitations under the License.
     --spectrum-switch-top-to-control-medium: 8px;
     --spectrum-switch-top-to-control-large: 11px;
     --spectrum-switch-top-to-control-extra-large: 14px;
+    --spectrum-slider-control-height-small: 18px;
+    --spectrum-slider-control-height-medium: 20px;
+    --spectrum-slider-control-height-large: 22px;
+    --spectrum-slider-control-height-extra-large: 24px;
+    --spectrum-slider-handle-size-small: 18px;
+    --spectrum-slider-handle-size-medium: 20px;
+    --spectrum-slider-handle-size-large: 22px;
+    --spectrum-slider-handle-size-extra-large: 24px;
+    --spectrum-slider-handle-border-width-down-small: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-medium: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-large: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-extra-large: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-bottom-to-handle-small: 3px;
+    --spectrum-slider-bottom-to-handle-medium: 6px;
+    --spectrum-slider-bottom-to-handle-large: 9px;
+    --spectrum-slider-bottom-to-handle-extra-large: 12px;
     --spectrum-corner-radius-75: 3px;
     --spectrum-corner-radius-100: 6px;
     --spectrum-corner-radius-200: 12px;

package/tokens/global-vars.css

@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 
 :host,
 :root {
+    --spectrum-transparent-white-100: rgba(255, 255, 255, 0);
     --spectrum-transparent-white-200: rgba(255, 255, 255, 0.1);
     --spectrum-transparent-white-300: rgba(255, 255, 255, 0.25);
     --spectrum-transparent-white-400: rgba(255, 255, 255, 0.4);
@@ -20,6 +21,7 @@ governing permissions and limitations under the License.
     --spectrum-transparent-white-700: rgba(255, 255, 255, 0.8);
     --spectrum-transparent-white-800: rgba(255, 255, 255, 0.9);
     --spectrum-transparent-white-900: rgb(255, 255, 255);
+    --spectrum-transparent-black-100: rgba(0, 0, 0, 0);
     --spectrum-transparent-black-200: rgba(0, 0, 0, 0.1);
     --spectrum-transparent-black-300: rgba(0, 0, 0, 0.25);
     --spectrum-transparent-black-400: rgba(0, 0, 0, 0.4);
@@ -29,9 +31,8 @@ governing permissions and limitations under the License.
     --spectrum-transparent-black-800: rgba(0, 0, 0, 0.9);
     --spectrum-transparent-black-900: rgb(0, 0, 0);
     --spectrum-focus-indicator-color: var(--spectrum-blue-800);
-    --spectrum-focus-ring-color: var(--spectrum-focus-indicator-color);
-    --spectrum-static-white-focus-ring-color: var(--spectrum-white);
-    --spectrum-static-black-focus-ring-color: var(--spectrum-black);
+    --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-neutral-content-color-default: var(--spectrum-gray-800);
     --spectrum-neutral-content-color-hover: var(--spectrum-gray-900);
@@ -43,13 +44,15 @@ governing permissions and limitations under the License.
     --spectrum-neutral-subdued-content-color-key-focus: var(
         --spectrum-gray-800
     );
-    --spectrum-accent-content-color: var(--spectrum-accent-color-900);
+    --spectrum-accent-content-color-default: var(--spectrum-accent-color-900);
     --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000);
     --spectrum-accent-content-color-down: var(--spectrum-accent-color-1100);
     --spectrum-accent-content-color-key-focus: var(
         --spectrum-accent-color-1000
     );
-    --spectrum-negative-content-color: var(--spectrum-negative-color-900);
+    --spectrum-negative-content-color-default: var(
+        --spectrum-negative-color-900
+    );
     --spectrum-negative-content-color-hover: var(
         --spectrum-negative-color-1000
     );
@@ -78,10 +81,19 @@ governing permissions and limitations under the License.
     --spectrum-disabled-static-black-border-color: var(
         --spectrum-transparent-black-300
     );
+    --spectrum-opacity-disabled: 0.3;
     --spectrum-background-opacity-default: 0;
     --spectrum-background-opacity-hover: 0.1;
     --spectrum-background-opacity-down: 0.1;
     --spectrum-background-opacity-key-focus: 0.1;
+    --spectrum-negative-border-color-default: var(
+        --spectrum-negative-color-900
+    );
+    --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000);
+    --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100);
+    --spectrum-negative-border-color-key-focus: var(
+        --spectrum-negative-color-1000
+    );
     --spectrum-informative-color-100: var(--spectrum-blue-100);
     --spectrum-informative-color-200: var(--spectrum-blue-200);
     --spectrum-informative-color-300: var(--spectrum-blue-300);
@@ -140,10 +152,17 @@ governing permissions and limitations under the License.
     --spectrum-positive-color-1400: var(--spectrum-green-1400);
     --spectrum-black: rgb(0, 0, 0);
     --spectrum-white: rgb(255, 255, 255);
+    --spectrum-swatch-border-color: var(--spectrum-gray-900);
+    --spectrum-swatch-border-opacity: 0.51;
+    --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black);
+    --spectrum-swatch-disabled-icon-border-opacity: 0.51;
+    --spectrum-alert-dialog-minimum-width: 288px;
+    --spectrum-alert-dialog-maximum-width: 480px;
     --spectrum-button-minimum-width-multiplier: 2.25;
     --spectrum-divider-thickness-small: 1px;
     --spectrum-divider-thickness-medium: 2px;
     --spectrum-divider-thickness-large: 4px;
+    --spectrum-field-label-to-component: 0px;
     --spectrum-menu-item-label-to-description: 1px;
     --spectrum-meter-minimum-width: 48px;
     --spectrum-meter-maximum-width: 768px;
@@ -152,7 +171,10 @@ governing permissions and limitations under the License.
     --spectrum-swatch-slash-thickness-small: 3px;
     --spectrum-swatch-slash-thickness-medium: 4px;
     --spectrum-swatch-slash-thickness-large: 5px;
+    --spectrum-progress-bar-minimum-width: 48px;
+    --spectrum-progress-bar-maximum-width: 768px;
     --spectrum-radio-button-selection-indicator: 4px;
+    --spectrum-help-text-to-component: 0px;
     --spectrum-popover-tip-width: 16px;
     --spectrum-popover-tip-height: 8px;
     --spectrum-sans-serif-heading-light: var(--spectrum-font-light-default);
@@ -270,6 +292,11 @@ governing permissions and limitations under the License.
     --spectrum-code-size-xs: var(--spectrum-font-size-75);
     --spectrum-code-line-height: var(--spectrum-line-height-200);
     --spectrum-cjk-code-line-height: var(--spectrum-cjk-line-height-200);
+    --spectrum-picker-minimum-width-multiplier: 2;
+    --spectrum-text-field-minimum-width-multiplier: 1.5;
+    --spectrum-combo-box-minimum-width-multiplier: 2.5;
+    --spectrum-combo-box-quiet-minimum-width-multiplier: 2;
+    --spectrum-combo-box-visual-to-field-button-quiet: 0;
     --spectrum-android-elevation: 2dp;
     --spectrum-spacing-50: 2px;
     --spectrum-spacing-75: 4px;
@@ -283,9 +310,10 @@ governing permissions and limitations under the License.
     --spectrum-spacing-800: 64px;
     --spectrum-spacing-900: 80px;
     --spectrum-spacing-1000: 96px;
-    --spectrum-focus-ring-thickness: 2px;
-    --spectrum-focus-ring-gap: 2px;
+    --spectrum-focus-indicator-thickness: 2px;
+    --spectrum-focus-indicator-gap: 2px;
     --spectrum-border-width-200: 2px;
+    --spectrum-border-width-400: 4px;
     --spectrum-line-height-100: 1.3;
     --spectrum-line-height-200: 1.5;
     --spectrum-font-family-default: var(--spectrum-font-family-sans-serif);
@@ -326,4 +354,8 @@ governing permissions and limitations under the License.
     --spectrum-cjk-letter-spacing: 0.05em;
     --spectrum-cjk-line-height-100: 1.5;
     --spectrum-cjk-line-height-200: 1.7;
+    --spectrum-field-edge-to-text-quiet: 0px;
+    --spectrum-field-edge-to-border-quiet: 0px;
+    --spectrum-field-edge-to-alert-icon-quiet: 0px;
+    --spectrum-field-edge-to-validation-icon-quiet: 0px;
 }

package/tokens/large-vars.css

@@ -59,6 +59,10 @@ governing permissions and limitations under the License.
     --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-action-bar-height: 56px;
     --spectrum-action-bar-top-to-item-counter: 16px;
     --spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
@@ -78,6 +82,10 @@ governing permissions and limitations under the License.
     --spectrum-field-label-top-margin-medium: 5px;
     --spectrum-field-label-top-margin-large: 5px;
     --spectrum-field-label-top-margin-extra-large: 5px;
+    --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: 5px;
     --spectrum-help-text-top-to-workflow-icon-medium: 4px;
     --spectrum-help-text-top-to-workflow-icon-large: 8px;
@@ -87,10 +95,10 @@ governing permissions and limitations under the License.
     --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-chevron-small: 9px;
-    --spectrum-menu-item-top-to-chevron-medium: 13px;
-    --spectrum-menu-item-top-to-chevron-large: 17px;
-    --spectrum-menu-item-top-to-chevron-extra-large: 22px;
+    --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-meter-default-width: 240px;
     --spectrum-meter-thickness-small: 5px;
     --spectrum-meter-thickness-medium: 8px;
@@ -98,8 +106,6 @@ governing permissions and limitations under the License.
     --spectrum-swatch-size-small: 30px;
     --spectrum-swatch-size-medium: 40px;
     --spectrum-swatch-size-large: 50px;
-    --spectrum-progress-bar-minimum-width: 48px;
-    --spectrum-progress-bar-maximum-width: 768px;
     --spectrum-progress-bar-thickness-small: 5px;
     --spectrum-progress-bar-thickness-medium: 8px;
     --spectrum-progress-bar-thickness-large: 10px;
@@ -131,7 +137,21 @@ governing permissions and limitations under the License.
     --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-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-popover-top-to-content-area: 5px;
+    --spectrum-text-area-minimum-width: 140px;
+    --spectrum-text-area-minimum-height: 70px;
     --spectrum-font-size-50: 13px;
     --spectrum-font-size-75: 15px;
     --spectrum-font-size-100: 17px;
@@ -161,4 +181,49 @@ governing permissions and limitations under the License.
     --spectrum-text-to-control-100: 13px;
     --spectrum-text-to-control-200: 14px;
     --spectrum-text-to-control-300: 16px;
+    --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-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-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-side-label-character-count-top-margin-small: 5px;
+    --spectrum-side-label-character-count-top-margin-medium: 10px;
+    --spectrum-side-label-character-count-top-margin-large: 13px;
+    --spectrum-side-label-character-count-top-margin-extra-large: 17px;
+    --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;
 }

package/tokens/light-vars.css

@@ -89,11 +89,11 @@ governing permissions and limitations under the License.
     --spectrum-accent-visual-color: var(--spectrum-accent-color-800);
     --spectrum-informative-visual-color: var(--spectrum-informative-color-800);
     --spectrum-negative-visual-color: var(--spectrum-negative-color-800);
-    --spectrum-notice-visual-color: var(--spectrum-notice-color-600);
+    --spectrum-notice-visual-color: var(--spectrum-notice-color-700);
     --spectrum-positive-visual-color: var(--spectrum-positive-color-700);
     --spectrum-gray-visual-color: var(--spectrum-gray-500);
     --spectrum-red-visual-color: var(--spectrum-red-800);
-    --spectrum-orange-visual-color: var(--spectrum-orange-600);
+    --spectrum-orange-visual-color: var(--spectrum-orange-700);
     --spectrum-yellow-visual-color: var(--spectrum-yellow-600);
     --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600);
     --spectrum-celery-visual-color: var(--spectrum-celery-700);

package/tokens/medium-vars.css

@@ -59,6 +59,10 @@ governing permissions and limitations under the License.
     --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-action-bar-height: 48px;
     --spectrum-action-bar-top-to-item-counter: 14px;
     --spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
@@ -78,6 +82,10 @@ governing permissions and limitations under the License.
     --spectrum-field-label-top-margin-medium: 4px;
     --spectrum-field-label-top-margin-large: 4px;
     --spectrum-field-label-top-margin-extra-large: 4px;
+    --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: 4px;
     --spectrum-help-text-top-to-workflow-icon-medium: 3px;
     --spectrum-help-text-top-to-workflow-icon-large: 6px;
@@ -87,10 +95,10 @@ governing permissions and limitations under the License.
     --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-chevron-small: 7px;
-    --spectrum-menu-item-top-to-chevron-medium: 11px;
-    --spectrum-menu-item-top-to-chevron-large: 14px;
-    --spectrum-menu-item-top-to-chevron-extra-large: 17px;
+    --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-meter-default-width: 192px;
     --spectrum-meter-thickness-small: 4px;
     --spectrum-meter-thickness-medium: 6px;
@@ -98,8 +106,6 @@ governing permissions and limitations under the License.
     --spectrum-swatch-size-small: 24px;
     --spectrum-swatch-size-medium: 32px;
     --spectrum-swatch-size-large: 40px;
-    --spectrum-progress-bar-minimum-width: 48px;
-    --spectrum-progress-bar-maximum-width: 768px;
     --spectrum-progress-bar-thickness-small: 4px;
     --spectrum-progress-bar-thickness-medium: 6px;
     --spectrum-progress-bar-thickness-large: 8px;
@@ -131,7 +137,21 @@ governing permissions and limitations under the License.
     --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-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-popover-top-to-content-area: 4px;
+    --spectrum-text-area-minimum-width: 112px;
+    --spectrum-text-area-minimum-height: 56px;
     --spectrum-font-size-50: 11px;
     --spectrum-font-size-75: 12px;
     --spectrum-font-size-100: 14px;
@@ -161,4 +181,49 @@ governing permissions and limitations under the License.
     --spectrum-text-to-control-100: 10px;
     --spectrum-text-to-control-200: 11px;
     --spectrum-text-to-control-300: 13px;
+    --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-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-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-side-label-character-count-top-margin-small: 4px;
+    --spectrum-side-label-character-count-top-margin-medium: 8px;
+    --spectrum-side-label-character-count-top-margin-large: 10px;
+    --spectrum-side-label-character-count-top-margin-extra-large: 13px;
+    --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;
 }

package/tokens/spectrum/custom-large-vars.css

@@ -12,11 +12,10 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host,
-:root {
-    /* edge-to-visual-only is used for icon-only buttons */
-    --spectrum-edge-to-visual-only-75: 5px;
-    --spectrum-edge-to-visual-only-100: 9px;
-    --spectrum-edge-to-visual-only-200: 13px;
-    --spectrum-edge-to-visual-only-300: 16px;
+:host, :root {
+  /* edge-to-visual-only is used for icon-only buttons */
+  --spectrum-edge-to-visual-only-75: 5px;
+  --spectrum-edge-to-visual-only-100: 9px;
+  --spectrum-edge-to-visual-only-200: 13px;
+  --spectrum-edge-to-visual-only-300: 16px;
 }

package/tokens/spectrum/custom-medium-vars.css

@@ -12,11 +12,10 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host,
-:root {
-    /* edge-to-visual-only is used for icon-only buttons */
-    --spectrum-edge-to-visual-only-75: 4px;
-    --spectrum-edge-to-visual-only-100: 7px;
-    --spectrum-edge-to-visual-only-200: 10px;
-    --spectrum-edge-to-visual-only-300: 13px;
+:host, :root {
+  /* edge-to-visual-only is used for icon-only buttons */
+  --spectrum-edge-to-visual-only-75: 4px;
+  --spectrum-edge-to-visual-only-100: 7px;
+  --spectrum-edge-to-visual-only-200: 10px;
+  --spectrum-edge-to-visual-only-300: 13px;
 }