@spectrum-web-components/styles 1.3.0-beta.1 → 1.3.0-beta.2

package/tokens-v2/system-theme-bridge.css

@@ -1977,12 +1977,140 @@
     --system-infield-button-stacked-bottom-border-radius-end-start: var(
         --system-infield-button-border-radius-reset
     );
-    --system-infield-button-background-color: var(--spectrum-gray-100);
-    --system-infield-button-background-color-hover: var(--spectrum-gray-200);
+    --system-infield-button-background-color: var(--spectrum-gray-50);
+    --system-infield-button-background-color-hover: var(--spectrum-gray-100);
     --system-infield-button-background-color-down: var(--spectrum-gray-200);
     --system-infield-button-background-color-key-focus: var(
-        --spectrum-gray-200
+        --spectrum-gray-100
+    );
+    --system-infield-button-height: var(--spectrum-component-height-100);
+    --system-infield-button-width: var(--spectrum-component-height-100);
+    --system-infield-button-stacked-border-radius-reset: var(
+        --spectrum-in-field-button-fill-stacked-inner-border-rounding
+    );
+    --system-infield-button-edge-to-fill: var(
+        --spectrum-in-field-button-edge-to-fill
+    );
+    --system-infield-button-inner-edge-to-fill: var(
+        --spectrum-in-field-button-stacked-inner-edge-to-fill
+    );
+    --system-infield-button-fill-padding: 0px;
+    --system-infield-button-stacked-fill-padding-inline: var(
+        --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium
+    );
+    --system-infield-button-stacked-fill-padding-outer: var(
+        --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium
+    );
+    --system-infield-button-stacked-fill-padding-inner: var(
+        --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium
+    );
+    --system-infield-button-animation-duration: var(
+        --spectrum-animation-duration-100
+    );
+    --system-infield-button-icon-color: var(
+        --spectrum-neutral-content-color-default
+    );
+    --system-infield-button-icon-color-hover: var(
+        --spectrum-neutral-content-color-hover
+    );
+    --system-infield-button-icon-color-down: var(
+        --spectrum-neutral-content-color-down
+    );
+    --system-infield-button-icon-color-key-focus: var(
+        --spectrum-neutral-content-color-key-focus
+    );
+    --system-infield-button-fill-justify-content: center;
+    --system-infield-button-disabled-background-color: var(
+        --spectrum-disabled-background-color
+    );
+    --system-infield-button-disabled-background-color-hover: var(
+        --spectrum-disabled-background-color
+    );
+    --system-infield-button-disabled-background-color-down: var(
+        --spectrum-disabled-background-color
+    );
+    --system-infield-button-disabled-border-color: var(
+        --spectrum-disabled-background-color
+    );
+    --system-infield-button-disabled-icon-color: var(
+        --spectrum-disabled-content-color
+    );
+    --system-infield-button-disabled-icon-color-hover: var(
+        --spectrum-disabled-content-color
+    );
+    --system-infield-button-disabled-icon-color-down: var(
+        --spectrum-disabled-content-color
     );
+    --system-infield-button-disabled-icon-color-key-focus: var(
+        --spectrum-disabled-content-color
+    );
+    --system-infield-button-size-s-height: var(--spectrum-component-height-75);
+    --system-infield-button-size-s-width: var(--spectrum-component-height-75);
+    --system-infield-button-size-s-stacked-fill-padding-inline: var(
+        --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small
+    );
+    --system-infield-button-size-s-stacked-fill-padding-outer: var(
+        --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small
+    );
+    --system-infield-button-size-s-stacked-fill-padding-inner: var(
+        --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small
+    );
+    --system-infield-button-size-l-height: var(--spectrum-component-height-200);
+    --system-infield-button-size-l-width: var(--spectrum-component-height-200);
+    --system-infield-button-size-l-stacked-fill-padding-inline: var(
+        --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large
+    );
+    --system-infield-button-size-l-stacked-fill-padding-outer: var(
+        --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large
+    );
+    --system-infield-button-size-l-stacked-fill-padding-inner: var(
+        --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large
+    );
+    --system-infield-button-size-xl-height: var(
+        --spectrum-component-height-300
+    );
+    --system-infield-button-size-xl-width: var(--spectrum-component-height-300);
+    --system-infield-button-size-xl-stacked-fill-padding-inline: var(
+        --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large
+    );
+    --system-infield-button-size-xl-stacked-fill-padding-outer: var(
+        --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
+    );
+    --system-infield-button-size-xl-stacked-fill-padding-inner: var(
+        --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large
+    );
+    --system-infield-button-top-width: var(
+        --spectrum-in-field-button-width-stacked-medium
+    );
+    --system-infield-button-bottom-width: var(
+        --spectrum-in-field-button-width-stacked-medium
+    );
+    --system-infield-button-top-size-s-width: var(
+        --spectrum-in-field-button-width-stacked-small
+    );
+    --system-infield-button-bottom-size-s-width: var(
+        --spectrum-in-field-button-width-stacked-small
+    );
+    --system-infield-button-top-size-l-width: var(
+        --spectrum-in-field-button-width-stacked-large
+    );
+    --system-infield-button-bottom-size-l-width: var(
+        --spectrum-in-field-button-width-stacked-large
+    );
+    --system-infield-button-top-size-xl-width: var(
+        --spectrum-in-field-button-width-stacked-extra-large
+    );
+    --system-infield-button-bottom-size-xl-width: var(
+        --spectrum-in-field-button-width-stacked-extra-large
+    );
+    --system-infield-button-quiet-background-color: transparent;
+    --system-infield-button-quiet-background-color-hover: transparent;
+    --system-infield-button-quiet-background-color-down: transparent;
+    --system-infield-button-quiet-background-color-key-focus: transparent;
+    --system-infield-button-quiet-infield-border-color: transparent;
+    --system-infield-button-quiet-border-width: 0;
+    --system-infield-button-quiet-disabled-background-color: transparent;
+    --system-infield-button-quiet-disabled-border-color: transparent;
     --system-link-animation-duration: var(--spectrum-animation-duration-100);
     --system-link-text-color-primary-default: var(
         --spectrum-accent-content-color-default
@@ -2022,11 +2150,6 @@
         var(--spectrum-gray-1000-rgb),
         var(--spectrum-transparent-black-200-opacity)
     );
-    --system-menu-item-corner-radius: var(--spectrum-corner-radius-100);
-    --system-menu-item-focus-indicator-shadow: none;
-    --system-menu-item-focus-indicator-offset: var(--spectrum-spacing-50);
-    --system-menu-item-spacing-multiplier: 1;
-    --system-menu-item-focus-indicator-outline-style: solid;
     --system-meter-min-width: var(--spectrum-meter-minimum-width);
     --system-meter-max-width: var(--spectrum-meter-maximum-width);
     --system-meter-inline-size: var(--spectrum-meter-width);
@@ -2074,7 +2197,7 @@
     --system-picker-background-color-hover-open: var(--spectrum-gray-200);
     --system-picker-background-color-active: var(--spectrum-gray-200);
     --system-picker-background-color-key-focus: var(--spectrum-gray-200);
-    --system-picker-border-color-default: var(--spectrum-gray-500);
+    --system-picker-border-color-default: var(--spectrum-gray-800);
     --system-picker-border-color-default-open: var(--spectrum-gray-500);
     --system-picker-border-color-hover: var(--spectrum-gray-600);
     --system-picker-border-color-hover-open: var(--spectrum-gray-900);
@@ -2839,24 +2962,40 @@
         --spectrum-component-bottom-to-text-300
     );
     --system-stepper-border-width: var(--spectrum-border-width-100);
-    --system-stepper-border-color-default: var(--spectrum-gray-500);
+    --system-stepper-border-color: var(--spectrum-gray-500);
     --system-stepper-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-border-color-focus: var(--spectrum-gray-800);
     --system-stepper-border-color-focus-hover: var(--spectrum-gray-800);
     --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+    --system-stepper-border-radius: var(--spectrum-corner-radius-100);
+    --system-stepper-min-width-multiplier: var(
+        --spectrum-text-field-minimum-width-multiplier
+    );
+    --system-stepper-animation-duration: var(--spectrum-animation-duration-100);
     --system-stepper-buttons-border-style: none;
     --system-stepper-buttons-border-width: 0;
     --system-stepper-buttons-border-color: var(--spectrum-gray-500);
-    --system-stepper-buttons-background-color: var(--spectrum-gray-100);
+    --system-stepper-buttons-background-color: var(--spectrum-gray-25);
     --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
     --system-stepper-buttons-border-color-keyboard-focus: var(
         --spectrum-gray-900
     );
+    --system-stepper-button-padding: var(
+        --spectrum-in-field-button-edge-to-fill
+    );
+    --system-stepper-button-border-radius-reset: 0px;
     --system-stepper-button-border-width: var(--spectrum-border-width-100);
+    --system-stepper-button-background-color-focus: var(--spectrum-gray-300);
+    --system-stepper-button-background-color-keyboard-focus: var(
+        --spectrum-gray-100
+    );
     --system-stepper-border-color-invalid: var(
         --spectrum-negative-border-color-default
     );
+    --system-stepper-border-color-hover-invalid: var(
+        --spectrum-negative-border-color-hover
+    );
     --system-stepper-border-color-focus-invalid: var(
         --spectrum-negative-border-color-focus
     );
@@ -2866,19 +3005,104 @@
     --system-stepper-border-color-keyboard-focus-invalid: var(
         --spectrum-negative-border-color-key-focus
     );
-    --system-stepper-border-color-disabled: var(--spectrum-gray-300);
+    --system-stepper-focus-indicator-width: var(
+        --spectrum-focus-indicator-thickness
+    );
+    --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --system-stepper-focus-indicator-color: var(
+        --spectrum-focus-indicator-color
+    );
+    --system-stepper-button-border-color-quiet: transparent;
+    --system-stepper-button-border-color-disabled: var(--spectrum-gray-100);
     --system-stepper-button-border-width-disabled: var(
-        --spectrum-border-width-200
+        --spectrum-border-width-100
     );
     --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
-    --system-stepper-quiet-buttons-border-style: none;
-    --system-stepper-quiet-button-edge-to-fill: 0;
+    --system-stepper-size-s-button-width: var(
+        --spectrum-in-field-button-width-stacked-small
+    );
+    --system-stepper-size-s-height: var(--spectrum-component-height-75);
+    --system-stepper-button-width: var(
+        --spectrum-in-field-button-width-stacked-medium
+    );
+    --system-stepper-size-m-button-width: var(
+        --spectrum-in-field-button-width-stacked-medium
+    );
+    --system-stepper-height: var(--spectrum-component-height-100);
+    --system-stepper-size-m-height: var(--spectrum-component-height-100);
+    --system-stepper-size-l-button-width: var(
+        --spectrum-in-field-button-width-stacked-large
+    );
+    --system-stepper-size-l-height: var(--spectrum-component-height-200);
+    --system-stepper-size-xl-button-width: var(
+        --spectrum-in-field-button-width-stacked-extra-large
+    );
+    --system-stepper-size-xl-height: var(--spectrum-component-height-300);
+    --system-swatch-border-radius: var(--spectrum-corner-radius-100);
+    --system-swatch-focus-indicator-border-radius: var(
+        --spectrum-corner-radius-200
+    );
+    --system-swatch-border-thickness: var(--spectrum-border-width-100);
+    --system-swatch-border-thickness-selected: var(--spectrum-border-width-200);
+    --system-swatch-focus-indicator-thickness: var(
+        --spectrum-focus-indicator-thickness
+    );
+    --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --system-swatch-border-color-opacity: 0.51;
+    --system-swatch-border-color-light-opacity: 0.2;
     --system-swatch-border-color: rgba(
         var(--spectrum-gray-1000-rgb),
-        var(--spectrum-swatch-border-color-opacity)
+        var(--system-swatch-border-color-opacity)
+    );
+    --system-swatch-icon-border-color: rgba(
+        var(--spectrum-black-rgb),
+        var(--system-swatch-border-color-opacity)
     );
+    --system-swatch-border-color-light: rgba(
+        var(--spectrum-black-rgb),
+        var(--system-swatch-border-color-light-opacity)
+    );
+    --system-swatch-border-color-selected: var(--spectrum-gray-900);
     --system-swatch-inner-border-color-selected: var(--spectrum-gray-25);
-    --system-swatch-border-radius: var(--spectrum-corner-radius-75);
+    --system-swatch-disabled-icon-color: var(--spectrum-gray-25);
+    --system-swatch-dash-icon-color: var(--spectrum-gray-800);
+    --system-swatch-slash-icon-color: var(--spectrum-red-900);
+    --system-swatch-focus-indicator-color: var(
+        --spectrum-focus-indicator-color
+    );
+    --system-swatch-size: var(--spectrum-swatch-size-medium);
+    --system-swatch-size-m-size: var(--spectrum-swatch-size-medium);
+    --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
+    --system-swatch-size-m-disabled-icon-size: var(
+        --spectrum-workflow-icon-size-100
+    );
+    --system-swatch-slash-thickness: var(
+        --spectrum-swatch-slash-thickness-medium
+    );
+    --system-swatch-size-m-slash-thickness: var(
+        --spectrum-swatch-slash-thickness-medium
+    );
+    --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small);
+    --system-swatch-size-xs-disabled-icon-size: var(
+        --spectrum-workflow-icon-size-50
+    );
+    --system-swatch-size-xs-slash-thickness: var(
+        --spectrum-swatch-slash-thickness-extra-small
+    );
+    --system-swatch-size-s-size: var(--spectrum-swatch-size-small);
+    --system-swatch-size-s-disabled-icon-size: var(
+        --spectrum-workflow-icon-size-75
+    );
+    --system-swatch-size-s-slash-thickness: var(
+        --spectrum-swatch-slash-thickness-small
+    );
+    --system-swatch-size-l-size: var(--spectrum-swatch-size-large);
+    --system-swatch-size-l-disabled-icon-size: var(
+        --spectrum-workflow-icon-size-200
+    );
+    --system-swatch-size-l-slash-thickness: var(
+        --spectrum-swatch-slash-thickness-large
+    );
     --system-swatch-group-spacing-compact: var(--spectrum-spacing-50);
     --system-swatch-group-spacing-regular: var(--spectrum-spacing-75);
     --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100);
@@ -3917,28 +4141,378 @@
     );
     --system-tag-group-item-margin-block: var(--spectrum-spacing-75);
     --system-tag-group-item-margin-inline: var(--spectrum-spacing-75);
-    --system-textfield-background-color: var(--spectrum-gray-25);
-    --system-textfield-background-color-disabled: var(--spectrum-gray-25);
     --system-textfield-border-color: var(--spectrum-gray-500);
     --system-textfield-border-color-hover: var(--spectrum-gray-600);
     --system-textfield-border-color-focus: var(--spectrum-gray-800);
     --system-textfield-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-800);
-    --system-textfield-border-color-disabled: var(--spectrum-gray-300);
+    --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
     --system-textfield-border-width: var(--spectrum-border-width-100);
-    --system-textfield-icon-spacing-block-invalid: var(
-        --spectrum-component-top-to-workflow-icon-100
+    --system-textfield-texfield-animation-duration: var(
+        --spectrum-animation-duration-100
+    );
+    --system-textfield-width: 240px;
+    --system-textfield-min-width: var(
+        --spectrum-text-field-minimum-width-multiplier
+    );
+    --system-textfield-corner-radius: var(--spectrum-corner-radius-100);
+    --system-textfield-spacing-inline-quiet: var(
+        --spectrum-field-edge-to-text-quiet
+    );
+    --system-textfield-spacing-block-start: var(
+        --spectrum-component-top-to-text-100
+    );
+    --system-textfield-spacing-block-end: var(
+        --spectrum-component-bottom-to-text-100
+    );
+    --system-textfield-spacing-block-quiet: var(
+        --spectrum-field-edge-to-border-quiet
+    );
+    --system-textfield-label-spacing-block: var(
+        --spectrum-field-label-to-component
+    );
+    --system-textfield-helptext-spacing-block: var(
+        --spectrum-help-text-to-component
+    );
+    --system-textfield-icon-spacing-inline-end-quiet-invalid: var(
+        --spectrum-field-edge-to-alert-icon-quiet
+    );
+    --system-textfield-icon-spacing-inline-end-quiet-valid: var(
+        --spectrum-field-edge-to-validation-icon-quiet
+    );
+    --system-textfield-font-family: var(--spectrum-sans-font-family-stack);
+    --system-textfield-font-weight: var(--spectrum-regular-font-weight);
+    --system-textfield-character-count-font-family: var(
+        --spectrum-sans-font-family-stack
+    );
+    --system-textfield-character-count-font-weight: var(
+        --spectrum-regular-font-weight
+    );
+    --system-textfield-character-count-spacing-inline: var(
+        --spectrum-spacing-200
+    );
+    --system-textfield-character-count-spacing-inline-side: var(
+        --spectrum-side-label-character-count-to-field
+    );
+    --system-textfield-focus-indicator-width: var(
+        --spectrum-focus-indicator-thickness
+    );
+    --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --system-textfield-background-color: var(--spectrum-gray-25);
+    --system-textfield-text-color-default: var(
+        --spectrum-neutral-content-color-default
+    );
+    --system-textfield-text-color-hover: var(
+        --spectrum-neutral-content-color-hover
+    );
+    --system-textfield-text-color-focus: var(
+        --spectrum-neutral-content-color-focus
+    );
+    --system-textfield-text-color-focus-hover: var(
+        --spectrum-neutral-content-color-focus-hover
+    );
+    --system-textfield-text-color-keyboard-focus: var(
+        --spectrum-neutral-content-color-key-focus
+    );
+    --system-textfield-text-color-readonly: var(
+        --spectrum-neutral-content-color-default
+    );
+    --system-textfield-background-color-disabled: var(
+        --spectrum-disabled-background-color
+    );
+    --system-textfield-border-color-disabled: var(
+        --spectrum-disabled-border-color
+    );
+    --system-textfield-text-color-disabled: var(
+        --spectrum-disabled-content-color
+    );
+    --system-textfield-border-color-invalid-default: var(
+        --spectrum-negative-border-color-default
+    );
+    --system-textfield-border-color-invalid-hover: var(
+        --spectrum-negative-border-color-hover
+    );
+    --system-textfield-border-color-invalid-focus: var(
+        --spectrum-negative-border-color-focus
+    );
+    --system-textfield-border-color-invalid-focus-hover: var(
+        --spectrum-negative-border-color-focus-hover
+    );
+    --system-textfield-border-color-invalid-keyboard-focus: var(
+        --spectrum-negative-border-color-key-focus
+    );
+    --system-textfield-icon-color-invalid: var(
+        --spectrum-negative-visual-color
+    );
+    --system-textfield-text-color-invalid: var(
+        --spectrum-neutral-content-color-default
+    );
+    --system-textfield-text-color-valid: var(
+        --spectrum-neutral-content-color-default
+    );
+    --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color);
+    --system-textfield-focus-indicator-color: var(
+        --spectrum-focus-indicator-color
+    );
+    --system-textfield-text-area-min-inline-size: var(
+        --spectrum-text-area-minimum-width
+    );
+    --system-textfield-text-area-min-block-size: var(
+        --spectrum-text-area-minimum-height
+    );
+    --system-textfield-size-s-height: var(--spectrum-component-height-75);
+    --system-textfield-size-s-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-small
+    );
+    --system-textfield-size-s-label-spacing-inline-side-label: var(
+        --spectrum-spacing-100
+    );
+    --system-textfield-size-s-placeholder-font-size: var(
+        --spectrum-font-size-75
+    );
+    --system-textfield-size-s-spacing-inline: var(
+        --spectrum-component-edge-to-text-75
+    );
+    --system-textfield-size-s-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-75
+    );
+    --system-textfield-size-s-icon-size-valid: var(
+        --spectrum-checkmark-icon-size-75
+    );
+    --system-textfield-size-s-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-small
+    );
+    --system-textfield-size-s-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-small
     );
     --system-textfield-size-s-icon-spacing-block-invalid: var(
-        --spectrum-component-top-to-workflow-icon-75
+        --spectrum-field-top-to-alert-icon-small
+    );
+    --system-textfield-size-s-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-small
+    );
+    --system-textfield-size-s-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-small
+    );
+    --system-textfield-size-s-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-small
+    );
+    --system-textfield-size-s-character-count-font-size: var(
+        --spectrum-font-size-75
+    );
+    --system-textfield-size-s-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-75
+    );
+    --system-textfield-size-s-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-small
+    );
+    --system-textfield-size-s-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-small
+    );
+    --system-textfield-size-s-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-75
+    );
+    --system-textfield-height: var(--spectrum-component-height-100);
+    --system-textfield-size-m-height: var(--spectrum-component-height-100);
+    --system-textfield-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-medium
+    );
+    --system-textfield-size-m-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-medium
+    );
+    --system-textfield-label-spacing-inline-side-label: var(
+        --spectrum-spacing-200
+    );
+    --system-textfield-size-m-label-spacing-inline-side-label: var(
+        --spectrum-spacing-200
+    );
+    --system-textfield-placeholder-font-size: var(--spectrum-font-size-100);
+    --system-textfield-size-m-placeholder-font-size: var(
+        --spectrum-font-size-100
+    );
+    --system-textfield-spacing-inline: var(
+        --spectrum-component-edge-to-text-100
+    );
+    --system-textfield-size-m-spacing-inline: var(
+        --spectrum-component-edge-to-text-100
+    );
+    --system-textfield-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-100
+    );
+    --system-textfield-size-m-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-100
+    );
+    --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
+    --system-textfield-size-m-icon-size-valid: var(
+        --spectrum-checkmark-icon-size-100
+    );
+    --system-textfield-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-medium
+    );
+    --system-textfield-size-m-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-medium
+    );
+    --system-textfield-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-medium
+    );
+    --system-textfield-size-m-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-medium
+    );
+    --system-textfield-icon-spacing-block-invalid: var(
+        --spectrum-field-top-to-alert-icon-medium
+    );
+    --system-textfield-size-m-icon-spacing-block-invalid: var(
+        --spectrum-field-top-to-alert-icon-medium
+    );
+    --system-textfield-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-medium
+    );
+    --system-textfield-size-m-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-medium
+    );
+    --system-textfield-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-medium
+    );
+    --system-textfield-size-m-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-medium
+    );
+    --system-textfield-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-medium
+    );
+    --system-textfield-size-m-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-medium
+    );
+    --system-textfield-character-count-font-size: var(--spectrum-font-size-75);
+    --system-textfield-size-m-character-count-font-size: var(
+        --spectrum-font-size-75
+    );
+    --system-textfield-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-75
+    );
+    --system-textfield-size-m-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-75
+    );
+    --system-textfield-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-medium
+    );
+    --system-textfield-size-m-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-medium
+    );
+    --system-textfield-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-medium
+    );
+    --system-textfield-size-m-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-medium
+    );
+    --system-textfield-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-100
+    );
+    --system-textfield-size-m-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-100
+    );
+    --system-textfield-size-l-height: var(--spectrum-component-height-200);
+    --system-textfield-size-l-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-large
+    );
+    --system-textfield-size-l-label-spacing-inline-side-label: var(
+        --spectrum-spacing-200
+    );
+    --system-textfield-size-l-placeholder-font-size: var(
+        --spectrum-font-size-200
+    );
+    --system-textfield-size-l-spacing-inline: var(
+        --spectrum-component-edge-to-text-200
+    );
+    --system-textfield-size-l-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-200
+    );
+    --system-textfield-size-l-icon-size-valid: var(
+        --spectrum-checkmark-icon-size-200
+    );
+    --system-textfield-size-l-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-large
+    );
+    --system-textfield-size-l-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-large
     );
     --system-textfield-size-l-icon-spacing-block-invalid: var(
-        --spectrum-component-top-to-workflow-icon-200
+        --spectrum-field-top-to-alert-icon-large
+    );
+    --system-textfield-size-l-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-large
+    );
+    --system-textfield-size-l-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-large
+    );
+    --system-textfield-size-l-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-large
+    );
+    --system-textfield-size-l-character-count-font-size: var(
+        --spectrum-font-size-100
+    );
+    --system-textfield-size-l-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-100
+    );
+    --system-textfield-size-l-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-large
+    );
+    --system-textfield-size-l-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-large
+    );
+    --system-textfield-size-l-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-200
+    );
+    --system-textfield-size-xl-height: var(--spectrum-component-height-300);
+    --system-textfield-size-xl-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-extra-large
+    );
+    --system-textfield-size-xl-label-spacing-inline-side-label: var(
+        --spectrum-spacing-200
+    );
+    --system-textfield-size-xl-placeholder-font-size: var(
+        --spectrum-font-size-300
+    );
+    --system-textfield-size-xl-spacing-inline: var(
+        --spectrum-component-edge-to-text-200
+    );
+    --system-textfield-size-xl-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-300
+    );
+    --system-textfield-size-xl-icon-size-valid: var(
+        --spectrum-checkmark-icon-size-300
+    );
+    --system-textfield-size-xl-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-extra-large
+    );
+    --system-textfield-size-xl-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-extra-large
     );
     --system-textfield-size-xl-icon-spacing-block-invalid: var(
-        --spectrum-component-top-to-workflow-icon-300
+        --spectrum-field-top-to-alert-icon-extra-large
+    );
+    --system-textfield-size-xl-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-extra-large
+    );
+    --system-textfield-size-xl-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-extra-large
+    );
+    --system-textfield-size-xl-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-extra-large
+    );
+    --system-textfield-size-xl-character-count-font-size: var(
+        --spectrum-font-size-200
+    );
+    --system-textfield-size-xl-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-200
+    );
+    --system-textfield-size-xl-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-extra-large
+    );
+    --system-textfield-size-xl-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-extra-large
+    );
+    --system-textfield-size-xl-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-300
     );
-    --system-textfield-quiet-border-color-disabled: var(--spectrum-gray-300);
     --system-thumbnail-border-radius: 2px;
     --system-toast-background-color-default: var(
         --spectrum-neutral-subdued-background-color-default