@spectrum-web-components/styles 0.11.0 → 0.11.3-express.0

package/README.md

@@ -121,4 +121,4 @@ This file provides only the variables needed to power the "Large" scale system s
 @import '@spectrum-web-components/styles/typography.css';
 ```
 
-This file provides a `lit-html` compliant version of the [Spectrum Typography classes](https://opensource.adobe.com/spectrum-css/components/typography/).
+This file provides a `lit-html` compliant version of the [Spectrum Typography classes](https://opensource.adobe.com/spectrum-css/typography.html).

package/core-global.css

@@ -127,6 +127,57 @@ governing permissions and limitations under the License.
     --spectrum-global-color-static-seafoam-600: #16878c;
     --spectrum-global-color-static-seafoam-700: #0f797d;
     --spectrum-global-color-static-seafoam-800: #096c6f;
+    --spectrum-global-color-static-transparent-white-200: hsla(
+        0,
+        0%,
+        100%,
+        0.1
+    );
+    --spectrum-global-color-static-transparent-white-300: hsla(
+        0,
+        0%,
+        100%,
+        0.25
+    );
+    --spectrum-global-color-static-transparent-white-400: hsla(
+        0,
+        0%,
+        100%,
+        0.4
+    );
+    --spectrum-global-color-static-transparent-white-500: hsla(
+        0,
+        0%,
+        100%,
+        0.55
+    );
+    --spectrum-global-color-static-transparent-white-600: hsla(
+        0,
+        0%,
+        100%,
+        0.7
+    );
+    --spectrum-global-color-static-transparent-white-700: hsla(
+        0,
+        0%,
+        100%,
+        0.8
+    );
+    --spectrum-global-color-static-transparent-white-800: hsla(
+        0,
+        0%,
+        100%,
+        0.9
+    );
+    --spectrum-global-color-static-transparent-white-900: #fff;
+    --spectrum-global-color-static-transparent-black-200: rgba(0, 0, 0, 0.1);
+    --spectrum-global-color-static-transparent-black-300: rgba(0, 0, 0, 0.25);
+    --spectrum-global-color-static-transparent-black-400: rgba(0, 0, 0, 0.4);
+    --spectrum-global-color-static-transparent-black-500: rgba(0, 0, 0, 0.55);
+    --spectrum-global-color-static-transparent-black-600: rgba(0, 0, 0, 0.7);
+    --spectrum-global-color-static-transparent-black-700: rgba(0, 0, 0, 0.8);
+    --spectrum-global-color-static-transparent-black-800: rgba(0, 0, 0, 0.9);
+    --spectrum-global-color-static-transparent-black-900: #000;
     --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7,
         #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d,
         #1a4b83, #1a3979, #1a266f, #191264, #180057;
@@ -1084,9 +1135,30 @@ governing permissions and limitations under the License.
     --spectrum-alias-component-border-radius-quiet: var(
         --spectrum-global-dimension-static-size-0
     );
+    --spectrum-alias-component-focusring-gap: var(
+        --spectrum-global-dimension-static-size-0
+    );
+    --spectrum-alias-component-focusring-gap-emphasized: var(
+        --spectrum-global-dimension-static-size-25
+    );
+    --spectrum-alias-component-focusring-size: var(
+        --spectrum-global-dimension-static-size-10
+    );
+    --spectrum-alias-component-focusring-size-emphasized: var(
+        --spectrum-global-dimension-static-size-25
+    );
+    --spectrum-alias-component-focusring-border-radius: var(
+        --spectrum-global-dimension-size-75
+    );
     --spectrum-alias-input-border-size: var(
         --spectrum-global-dimension-static-size-10
     );
+    --spectrum-alias-input-focusring-gap: var(
+        --spectrum-global-dimension-static-size-0
+    );
+    --spectrum-alias-input-quiet-focusline-gap: var(
+        --spectrum-global-dimension-static-size-10
+    );
     --spectrum-alias-control-two-size-m: var(
         --spectrum-global-dimension-size-175
     );
@@ -1123,6 +1195,188 @@ governing permissions and limitations under the License.
     --spectrum-alias-control-three-height-xl: var(
         --spectrum-global-dimension-size-225
     );
+    --spectrum-alias-infieldbutton-icon-margin-y-s: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-infieldbutton-icon-margin-y-m: var(
+        --spectrum-global-dimension-size-85
+    );
+    --spectrum-alias-infieldbutton-icon-margin-y-l: var(
+        --spectrum-global-dimension-size-125
+    );
+    --spectrum-alias-infieldbutton-icon-margin-y-xl: var(
+        --spectrum-global-dimension-size-160
+    );
+    --spectrum-alias-infieldbutton-border-radius: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-infieldbutton-border-radius-sided: 0;
+    --spectrum-alias-infieldbutton-border-size: var(
+        --spectrum-global-dimension-static-size-10
+    );
+    --spectrum-alias-infieldbutton-fill-padding-s: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-infieldbutton-fill-padding-m: var(
+        --spectrum-global-dimension-size-85
+    );
+    --spectrum-alias-infieldbutton-fill-padding-l: var(
+        --spectrum-global-dimension-size-125
+    );
+    --spectrum-alias-infieldbutton-fill-padding-xl: var(
+        --spectrum-global-dimension-size-160
+    );
+    --spectrum-alias-infieldbutton-padding-s: 0;
+    --spectrum-alias-infieldbutton-padding-m: 0;
+    --spectrum-alias-infieldbutton-padding-l: 0;
+    --spectrum-alias-infieldbutton-padding-xl: 0;
+    --spectrum-alias-infieldbutton-full-height-s: var(
+        --spectrum-global-dimension-size-300
+    );
+    --spectrum-alias-infieldbutton-full-height-m: var(
+        --spectrum-global-dimension-size-400
+    );
+    --spectrum-alias-infieldbutton-full-height-l: var(
+        --spectrum-global-dimension-size-500
+    );
+    --spectrum-alias-infieldbutton-full-height-xl: var(
+        --spectrum-global-dimension-size-600
+    );
+    --spectrum-alias-infieldbutton-half-height-s: var(
+        --spectrum-global-dimension-size-150
+    );
+    --spectrum-alias-infieldbutton-half-height-m: var(
+        --spectrum-global-dimension-size-200
+    );
+    --spectrum-alias-infieldbutton-half-height-l: var(
+        --spectrum-global-dimension-size-250
+    );
+    --spectrum-alias-infieldbutton-half-height-xl: var(
+        --spectrum-global-dimension-size-300
+    );
+    --spectrum-alias-stepperbutton-gap: 0;
+    --spectrum-alias-stepperbutton-width-s: var(
+        --spectrum-global-dimension-size-225
+    );
+    --spectrum-alias-stepperbutton-width-m: var(
+        --spectrum-global-dimension-size-300
+    );
+    --spectrum-alias-stepperbutton-width-l: var(
+        --spectrum-global-dimension-size-400
+    );
+    --spectrum-alias-stepperbutton-width-xl: var(
+        --spectrum-global-dimension-size-450
+    );
+    --spectrum-alias-stepperbutton-icon-x-offset-s: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-stepperbutton-icon-x-offset-m: var(
+        --spectrum-global-dimension-size-85
+    );
+    --spectrum-alias-stepperbutton-icon-x-offset-l: var(
+        --spectrum-global-dimension-size-125
+    );
+    --spectrum-alias-stepperbutton-icon-x-offset-xl: var(
+        --spectrum-global-dimension-size-130
+    );
+    --spectrum-alias-stepperbutton-icon-y-offset-top-s: var(
+        --spectrum-global-dimension-size-25
+    );
+    --spectrum-alias-stepperbutton-icon-y-offset-top-m: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-stepperbutton-icon-y-offset-top-l: var(
+        --spectrum-global-dimension-size-65
+    );
+    --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var(
+        --spectrum-global-dimension-size-75
+    );
+    --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var(
+        --spectrum-global-dimension-size-10
+    );
+    --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var(
+        --spectrum-global-dimension-size-25
+    );
+    --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var(
+        --spectrum-global-dimension-size-40
+    );
+    --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-stepperbutton-radius-touching: 0;
+    --spectrum-alias-clearbutton-icon-margin-s: var(
+        --spectrum-global-dimension-size-100
+    );
+    --spectrum-alias-clearbutton-icon-margin-m: var(
+        --spectrum-global-dimension-size-150
+    );
+    --spectrum-alias-clearbutton-icon-margin-l: var(
+        --spectrum-global-dimension-size-185
+    );
+    --spectrum-alias-clearbutton-icon-margin-xl: var(
+        --spectrum-global-dimension-size-225
+    );
+    --spectrum-alias-clearbutton-border-radius: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-pickerbutton-icononly-padding-x-s: var(
+        --spectrum-global-dimension-size-85
+    );
+    --spectrum-alias-pickerbutton-icononly-padding-x-m: var(
+        --spectrum-global-dimension-size-125
+    );
+    --spectrum-alias-pickerbutton-icononly-padding-x-l: var(
+        --spectrum-global-dimension-size-160
+    );
+    --spectrum-alias-pickerbutton-icononly-padding-x-xl: var(
+        --spectrum-global-dimension-size-200
+    );
+    --spectrum-alias-pickerbutton-icon-margin-y-s: var(
+        --spectrum-global-dimension-size-85
+    );
+    --spectrum-alias-pickerbutton-icon-margin-y-m: var(
+        --spectrum-global-dimension-size-125
+    );
+    --spectrum-alias-pickerbutton-icon-margin-y-l: var(
+        --spectrum-global-dimension-size-160
+    );
+    --spectrum-alias-pickerbutton-icon-margin-y-xl: var(
+        --spectrum-global-dimension-size-200
+    );
+    --spectrum-alias-pickerbutton-label-padding-y-s: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-pickerbutton-label-padding-y-m: var(
+        --spectrum-global-dimension-size-75
+    );
+    --spectrum-alias-pickerbutton-label-padding-y-l: var(
+        --spectrum-global-dimension-size-115
+    );
+    --spectrum-alias-pickerbutton-label-padding-y-xl: var(
+        --spectrum-global-dimension-size-150
+    );
+    --spectrum-alias-pickerbutton-border-radius-rounded: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-search-border-radius: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-search-border-radius-quiet: 0;
+    --spectrum-alias-combobox-quiet-button-offset-x: var(
+        --spectrum-global-dimension-size-100
+    );
+    --spectrum-alias-thumbnail-border-radius-small: var(
+        --spectrum-global-dimension-size-25
+    );
+    --spectrum-alias-search-padding-left-s: var(
+        --spectrum-global-dimension-size-85
+    );
+    --spectrum-alias-search-padding-left-l: var(
+        --spectrum-global-dimension-size-160
+    );
+    --spectrum-alias-search-padding-left-xl: var(
+        --spectrum-global-dimension-size-185
+    );
     --spectrum-alias-percent-50: 50%;
     --spectrum-alias-percent-70: 70%;
     --spectrum-alias-percent-100: 100%;
@@ -1252,6 +1506,9 @@ governing permissions and limitations under the License.
     --spectrum-alias-border-radius-large: var(
         --spectrum-global-dimension-size-200
     );
+    --spectrum-alias-border-radius-xlarge: var(
+        --spectrum-global-dimension-size-300
+    );
     --spectrum-alias-single-line-height: var(
         --spectrum-global-dimension-size-400
     );
@@ -1314,6 +1571,48 @@ governing permissions and limitations under the License.
 :root {
     /* spectrum-colorAliases.css */
     --spectrum-alias-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42);
+    --spectrum-alias-transparent-blue-background-color-hover: rgba(
+        13,
+        102,
+        208,
+        0.15
+    );
+    --spectrum-alias-transparent-blue-background-color-down: rgba(
+        9,
+        90,
+        186,
+        0.15
+    );
+    --spectrum-alias-transparent-blue-background-color-key-focus: var(
+        --spectrum-alias-transparent-blue-background-color-hover
+    );
+    --spectrum-alias-transparent-blue-background-color-mouse-focus: var(
+        --spectrum-alias-transparent-blue-background-color-hover
+    );
+    --spectrum-alias-transparent-blue-background-color: var(
+        --spectrum-alias-component-text-color-default
+    );
+    --spectrum-alias-transparent-red-background-color-hover: rgba(
+        201,
+        37,
+        45,
+        0.15
+    );
+    --spectrum-alias-transparent-red-background-color-down: rgba(
+        187,
+        18,
+        26,
+        0.15
+    );
+    --spectrum-alias-transparent-red-background-color-key-focus: var(
+        --spectrum-alias-transparent-red-background-color-hover
+    );
+    --spectrum-alias-transparent-red-background-color-mouse-focus: var(
+        --spectrum-alias-transparent-red-background-color-hover
+    );
+    --spectrum-alias-transparent-red-background-color: var(
+        --spectrum-alias-component-text-color-default
+    );
     --spectrum-alias-component-text-color-disabled: var(
         --spectrum-global-color-gray-500
     );
@@ -1434,6 +1733,9 @@ governing permissions and limitations under the License.
     --spectrum-alias-component-background-color-quiet-disabled: var(
         --spectrum-alias-background-color-transparent
     );
+    --spectrum-alias-component-background-color-quiet-selected-disabled: var(
+        --spectrum-alias-component-background-color-disabled
+    );
     --spectrum-alias-component-background-color-default: var(
         --spectrum-global-color-gray-75
     );
@@ -1914,6 +2216,176 @@ governing permissions and limitations under the License.
     --spectrum-alias-background-color-yellow: var(
         --spectrum-alias-background-color-yellow-default
     );
+    --spectrum-alias-infieldbutton-background-color: var(
+        --spectrum-global-color-gray-200
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent;
+    --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent;
+    --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var(
+        --spectrum-alias-component-background-color-disabled
+    );
+    --spectrum-alias-infieldbutton-fill-border-color-default: var(
+        --spectrum-alias-input-border-color-default
+    );
+    --spectrum-alias-infieldbutton-fill-border-color-hover: var(
+        --spectrum-alias-input-border-color-hover
+    );
+    --spectrum-alias-infieldbutton-fill-border-color-down: var(
+        --spectrum-alias-input-border-color-down
+    );
+    --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var(
+        --spectrum-alias-input-border-color-mouse-focus
+    );
+    --spectrum-alias-infieldbutton-fill-border-color-key-focus: var(
+        --spectrum-alias-input-border-color-key-focus
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent;
+    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent;
+    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent;
+    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent;
+    --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent;
+    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var(
+        --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var(
+        --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var(
+        --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var(
+        --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent;
+    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var(
+        --spectrum-alias-component-background-color-default
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var(
+        --spectrum-alias-component-background-color-hover
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var(
+        --spectrum-alias-component-background-color-down
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var(
+        --spectrum-alias-component-background-color-key-focus
+    );
+    --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(
+        --spectrum-alias-component-background-color-disabled
+    );
+    --spectrum-alias-actionbutton-staticBlack-border-color-default: rgba(
+        0,
+        0,
+        0,
+        0.4
+    );
+    --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent;
+    --spectrum-alias-actionbutton-staticBlack-border-color-hover: rgba(
+        0,
+        0,
+        0,
+        0.55
+    );
+    --spectrum-alias-actionbutton-staticBlack-background-color-hover: rgba(
+        0,
+        0,
+        0,
+        0.25
+    );
+    --spectrum-alias-actionbutton-staticBlack-border-color-down: rgba(
+        0,
+        0,
+        0,
+        0.7
+    );
+    --spectrum-alias-actionbutton-staticBlack-background-color-down: rgba(
+        0,
+        0,
+        0,
+        0.4
+    );
+    --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: rgba(
+        0,
+        0,
+        0,
+        0.55
+    );
+    --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: rgba(
+        0,
+        0,
+        0,
+        0.25
+    );
+    --spectrum-alias-actionbutton-staticBlack-border-color-disabled: rgba(
+        0,
+        0,
+        0,
+        0.25
+    );
+    --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent;
+    --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent;
+    --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: rgba(
+        0,
+        0,
+        0,
+        0.1
+    );
+    --spectrum-alias-actionbutton-staticWhite-border-color-default: hsla(
+        0,
+        0%,
+        100%,
+        0.4
+    );
+    --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent;
+    --spectrum-alias-actionbutton-staticWhite-border-color-hover: hsla(
+        0,
+        0%,
+        100%,
+        0.55
+    );
+    --spectrum-alias-actionbutton-staticWhite-background-color-hover: hsla(
+        0,
+        0%,
+        100%,
+        0.25
+    );
+    --spectrum-alias-actionbutton-staticWhite-border-color-down: hsla(
+        0,
+        0%,
+        100%,
+        0.7
+    );
+    --spectrum-alias-actionbutton-staticWhite-background-color-down: hsla(
+        0,
+        0%,
+        100%,
+        0.4
+    );
+    --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: hsla(
+        0,
+        0%,
+        100%,
+        0.55
+    );
+    --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: hsla(
+        0,
+        0%,
+        100%,
+        0.25
+    );
+    --spectrum-alias-actionbutton-staticWhite-border-color-disabled: hsla(
+        0,
+        0%,
+        100%,
+        0.25
+    );
+    --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent;
+    --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent;
+    --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: hsla(
+        0,
+        0%,
+        100%,
+        0.1
+    );
     --spectrum-alias-background-color-default: var(
         --spectrum-global-color-gray-100
     );
@@ -1921,28 +2393,28 @@ governing permissions and limitations under the License.
         --spectrum-global-color-gray-200
     );
     --spectrum-alias-background-color-transparent: transparent;
-    --spectrum-alias-background-color-overbackground-down: rgba(
-        255,
-        255,
-        255,
+    --spectrum-alias-background-color-overbackground-down: hsla(
+        0,
+        0%,
+        100%,
         0.2
     );
-    --spectrum-alias-background-color-quiet-overbackground-hover: rgba(
-        255,
-        255,
-        255,
+    --spectrum-alias-background-color-quiet-overbackground-hover: hsla(
+        0,
+        0%,
+        100%,
         0.1
     );
-    --spectrum-alias-background-color-quiet-overbackground-down: rgba(
-        255,
-        255,
-        255,
+    --spectrum-alias-background-color-quiet-overbackground-down: hsla(
+        0,
+        0%,
+        100%,
         0.2
     );
-    --spectrum-alias-background-color-overbackground-disabled: rgba(
-        255,
-        255,
-        255,
+    --spectrum-alias-background-color-overbackground-disabled: hsla(
+        0,
+        0%,
+        100%,
         0.1
     );
     --spectrum-alias-background-color-quickactions-overlay: rgba(0, 0, 0, 0.2);
@@ -1977,19 +2449,44 @@ governing permissions and limitations under the License.
     --spectrum-alias-text-color-overbackground: var(
         --spectrum-global-color-static-white
     );
-    --spectrum-alias-text-color-overbackground-disabled: rgba(
-        255,
-        255,
-        255,
-        0.2
-    );
-    --spectrum-alias-text-color-quiet-overbackground-disabled: rgba(
-        255,
-        255,
-        255,
+    --spectrum-alias-text-color-overbackground-disabled: hsla(0, 0%, 100%, 0.2);
+    --spectrum-alias-text-color-quiet-overbackground-disabled: hsla(
+        0,
+        0%,
+        100%,
         0.2
     );
     --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900);
+    --spectrum-alias-link-primary-text-color-default: var(
+        --spectrum-global-color-blue-600
+    );
+    --spectrum-alias-link-primary-text-color-hover: var(
+        --spectrum-global-color-blue-600
+    );
+    --spectrum-alias-link-primary-text-color-down: var(
+        --spectrum-global-color-blue-700
+    );
+    --spectrum-alias-link-primary-text-color-key-focus: var(
+        --spectrum-alias-text-color-key-focus
+    );
+    --spectrum-alias-link-primary-text-color: var(
+        --spectrum-alias-link-primary-text-color-default
+    );
+    --spectrum-alias-link-secondary-text-color-default: var(
+        --spectrum-alias-link-primary-text-color-default
+    );
+    --spectrum-alias-link-secondary-text-color-hover: var(
+        --spectrum-alias-link-primary-text-color-hover
+    );
+    --spectrum-alias-link-secondary-text-color-down: var(
+        --spectrum-alias-link-primary-text-color-down
+    );
+    --spectrum-alias-link-secondary-text-color-key-focus: var(
+        --spectrum-alias-link-primary-text-color-key-focus
+    );
+    --spectrum-alias-link-secondary-text-color: var(
+        --spectrum-alias-link-secondary-text-color-default
+    );
     --spectrum-alias-border-color: var(--spectrum-global-color-gray-400);
     --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500);
     --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500);
@@ -2029,7 +2526,13 @@ governing permissions and limitations under the License.
     --spectrum-alias-track-color-disabled: var(
         --spectrum-global-color-gray-300
     );
-    --spectrum-alias-track-color-overbackground: rgba(255, 255, 255, 0.2);
+    --spectrum-alias-thumbnail-darksquare-background-color: var(
+        --spectrum-global-color-gray-300
+    );
+    --spectrum-alias-thumbnail-lightsquare-background-color: var(
+        --spectrum-global-color-static-white
+    );
+    --spectrum-alias-track-color-overbackground: hsla(0, 0%, 100%, 0.2);
     --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700);
     --spectrum-alias-icon-color-overbackground: var(
         --spectrum-global-color-static-white
@@ -2040,16 +2543,11 @@ governing permissions and limitations under the License.
         --spectrum-global-color-gray-900
     );
     --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400);
-    --spectrum-alias-icon-color-overbackground-disabled: rgba(
-        255,
-        255,
-        255,
-        0.2
-    );
-    --spectrum-alias-icon-color-quiet-overbackground-disabled: rgba(
-        255,
-        255,
-        255,
+    --spectrum-alias-icon-color-overbackground-disabled: hsla(0, 0%, 100%, 0.2);
+    --spectrum-alias-icon-color-quiet-overbackground-disabled: hsla(
+        0,
+        0%,
+        100%,
         0.15
     );
     --spectrum-alias-icon-color-selected-neutral: var(