@spectrum-web-components/styles 0.41.1 → 0.41.2

package/express/spectrum-core-global.css

@@ -1,32 +1,25 @@
-:host,
-:root {
-    --spectrum-global-animation-linear: cubic-bezier(
-        0,
-        0,
-        1,
-        1
-    ); /* spectrum-animationGlobals.css */
-    --spectrum-global-animation-duration-0: 0ms;
-    --spectrum-global-animation-duration-100: 130ms;
-    --spectrum-global-animation-duration-200: 160ms;
-    --spectrum-global-animation-duration-300: 190ms;
-    --spectrum-global-animation-duration-400: 220ms;
-    --spectrum-global-animation-duration-500: 250ms;
-    --spectrum-global-animation-duration-600: 300ms;
-    --spectrum-global-animation-duration-700: 350ms;
-    --spectrum-global-animation-duration-800: 400ms;
-    --spectrum-global-animation-duration-900: 450ms;
-    --spectrum-global-animation-duration-1000: 500ms;
-    --spectrum-global-animation-duration-2000: 1000ms;
-    --spectrum-global-animation-duration-4000: 2000ms;
+:root,
+:host {
+    --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1);
+    --spectrum-global-animation-duration-0: 0s;
+    --spectrum-global-animation-duration-100: 0.13s;
+    --spectrum-global-animation-duration-200: 0.16s;
+    --spectrum-global-animation-duration-300: 0.19s;
+    --spectrum-global-animation-duration-400: 0.22s;
+    --spectrum-global-animation-duration-500: 0.25s;
+    --spectrum-global-animation-duration-600: 0.3s;
+    --spectrum-global-animation-duration-700: 0.35s;
+    --spectrum-global-animation-duration-800: 0.4s;
+    --spectrum-global-animation-duration-900: 0.45s;
+    --spectrum-global-animation-duration-1000: 0.5s;
+    --spectrum-global-animation-duration-2000: 1s;
+    --spectrum-global-animation-duration-4000: 2s;
     --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
     --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
     --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
     --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
-
-    /* spectrum-colorGlobals.css */
     --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1.0;
+    --spectrum-global-color-version: 5.1;
     --spectrum-global-color-static-black-rgb: 0, 0, 0;
     --spectrum-global-color-static-black: rgb(
         var(--spectrum-global-color-static-black-rgb)
@@ -375,59 +368,24 @@
     --spectrum-global-color-static-magenta-800: rgb(
         var(--spectrum-global-color-static-magenta-800-rgb)
     );
-    --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-200: #ffffff1a;
+    --spectrum-global-color-static-transparent-white-300: #ffffff40;
+    --spectrum-global-color-static-transparent-white-400: #fff6;
+    --spectrum-global-color-static-transparent-white-500: #ffffff8c;
+    --spectrum-global-color-static-transparent-white-600: #ffffffb3;
+    --spectrum-global-color-static-transparent-white-700: #fffc;
+    --spectrum-global-color-static-transparent-white-800: #ffffffe6;
     --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255;
     --spectrum-global-color-static-transparent-white-900: rgb(
         var(--spectrum-global-color-static-transparent-white-900-rgb)
     );
-    --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-200: #0000001a;
+    --spectrum-global-color-static-transparent-black-300: #00000040;
+    --spectrum-global-color-static-transparent-black-400: #0006;
+    --spectrum-global-color-static-transparent-black-500: #0000008c;
+    --spectrum-global-color-static-transparent-black-600: #000000b3;
+    --spectrum-global-color-static-transparent-black-700: #000c;
+    --spectrum-global-color-static-transparent-black-800: #000000e6;
     --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0;
     --spectrum-global-color-static-transparent-black-900: rgb(
         var(--spectrum-global-color-static-transparent-black-900-rgb)
@@ -450,8 +408,6 @@
     --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945,
         #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb,
         #2f74b3, #265191, #163670, #0b194c;
-
-    /* spectrum-colorSemantics.css */
     --spectrum-semantic-cta-background-color-default: var(
         --spectrum-global-color-static-indigo-600
     );
@@ -696,8 +652,6 @@
     --spectrum-semantic-presence-color-8: var(
         --spectrum-global-color-static-fuchsia-600
     );
-
-    /* spectrum-dimensionGlobals.css */
     --spectrum-global-dimension-static-percent-50: 50%;
     --spectrum-global-dimension-static-percent-70: 70%;
     --spectrum-global-dimension-static-percent-100: 100%;
@@ -769,8 +723,6 @@
     --spectrum-global-dimension-static-font-size-800: 32px;
     --spectrum-global-dimension-static-font-size-900: 36px;
     --spectrum-global-dimension-static-font-size-1000: 40px;
-
-    /* spectrum-fontGlobals.css */
     --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro',
         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
         'Trebuchet MS', 'Lucida Grande', sans-serif;
@@ -818,8 +770,87 @@
         source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean,
         'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
-
-    /* spectrum-staticAliases.css */
+    --spectrum-alias-border-size-thin: var(
+        --spectrum-global-dimension-static-size-10
+    );
+    --spectrum-alias-border-size-thick: var(
+        --spectrum-global-dimension-static-size-25
+    );
+    --spectrum-alias-border-size-thicker: var(
+        --spectrum-global-dimension-static-size-50
+    );
+    --spectrum-alias-border-size-thickest: var(
+        --spectrum-global-dimension-static-size-100
+    );
+    --spectrum-alias-border-offset-thin: var(
+        --spectrum-global-dimension-static-size-25
+    );
+    --spectrum-alias-border-offset-thick: var(
+        --spectrum-global-dimension-static-size-50
+    );
+    --spectrum-alias-border-offset-thicker: var(
+        --spectrum-global-dimension-static-size-100
+    );
+    --spectrum-alias-border-offset-thickest: var(
+        --spectrum-global-dimension-static-size-200
+    );
+    --spectrum-alias-grid-baseline: var(
+        --spectrum-global-dimension-static-size-100
+    );
+    --spectrum-alias-grid-gutter-xsmall: var(
+        --spectrum-global-dimension-static-size-200
+    );
+    --spectrum-alias-grid-gutter-small: var(
+        --spectrum-global-dimension-static-size-300
+    );
+    --spectrum-alias-grid-gutter-medium: var(
+        --spectrum-global-dimension-static-size-400
+    );
+    --spectrum-alias-grid-gutter-large: var(
+        --spectrum-global-dimension-static-size-500
+    );
+    --spectrum-alias-grid-gutter-xlarge: var(
+        --spectrum-global-dimension-static-size-600
+    );
+    --spectrum-alias-grid-margin-xsmall: var(
+        --spectrum-global-dimension-static-size-200
+    );
+    --spectrum-alias-grid-margin-small: var(
+        --spectrum-global-dimension-static-size-300
+    );
+    --spectrum-alias-grid-margin-medium: var(
+        --spectrum-global-dimension-static-size-400
+    );
+    --spectrum-alias-grid-margin-large: var(
+        --spectrum-global-dimension-static-size-500
+    );
+    --spectrum-alias-grid-margin-xlarge: var(
+        --spectrum-global-dimension-static-size-600
+    );
+    --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(
+        --spectrum-global-dimension-static-size-200
+    );
+    --spectrum-alias-grid-layout-region-margin-bottom-small: var(
+        --spectrum-global-dimension-static-size-300
+    );
+    --spectrum-alias-grid-layout-region-margin-bottom-medium: var(
+        --spectrum-global-dimension-static-size-400
+    );
+    --spectrum-alias-grid-layout-region-margin-bottom-large: var(
+        --spectrum-global-dimension-static-size-500
+    );
+    --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(
+        --spectrum-global-dimension-static-size-600
+    );
+    --spectrum-alias-radial-reaction-size-default: var(
+        --spectrum-global-dimension-static-size-550
+    );
+    --spectrum-alias-focus-ring-gap: var(
+        --spectrum-global-dimension-static-size-25
+    );
+    --spectrum-alias-focus-ring-size: var(
+        --spectrum-global-dimension-static-size-25
+    );
     --spectrum-alias-loupe-entry-animation-duration: var(
         --spectrum-global-animation-duration-300
     );
@@ -1023,10 +1054,6 @@
     --spectrum-alias-han-detail-text-font-weight-strong: var(
         --spectrum-global-font-weight-black
     );
-}
-:host,
-:root {
-    /* spectrum-dimensionAliases.css */
     --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
     --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
     --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
@@ -1553,87 +1580,6 @@
     --spectrum-alias-grid-columns: 12;
     --spectrum-alias-grid-fluid-width: 100%;
     --spectrum-alias-grid-fixed-max-width: 1280px;
-    --spectrum-alias-border-size-thin: var(
-        --spectrum-global-dimension-static-size-10
-    );
-    --spectrum-alias-border-size-thick: var(
-        --spectrum-global-dimension-static-size-25
-    );
-    --spectrum-alias-border-size-thicker: var(
-        --spectrum-global-dimension-static-size-50
-    );
-    --spectrum-alias-border-size-thickest: var(
-        --spectrum-global-dimension-static-size-100
-    );
-    --spectrum-alias-border-offset-thin: var(
-        --spectrum-global-dimension-static-size-25
-    );
-    --spectrum-alias-border-offset-thick: var(
-        --spectrum-global-dimension-static-size-50
-    );
-    --spectrum-alias-border-offset-thicker: var(
-        --spectrum-global-dimension-static-size-100
-    );
-    --spectrum-alias-border-offset-thickest: var(
-        --spectrum-global-dimension-static-size-200
-    );
-    --spectrum-alias-grid-baseline: var(
-        --spectrum-global-dimension-static-size-100
-    );
-    --spectrum-alias-grid-gutter-xsmall: var(
-        --spectrum-global-dimension-static-size-200
-    );
-    --spectrum-alias-grid-gutter-small: var(
-        --spectrum-global-dimension-static-size-300
-    );
-    --spectrum-alias-grid-gutter-medium: var(
-        --spectrum-global-dimension-static-size-400
-    );
-    --spectrum-alias-grid-gutter-large: var(
-        --spectrum-global-dimension-static-size-500
-    );
-    --spectrum-alias-grid-gutter-xlarge: var(
-        --spectrum-global-dimension-static-size-600
-    );
-    --spectrum-alias-grid-margin-xsmall: var(
-        --spectrum-global-dimension-static-size-200
-    );
-    --spectrum-alias-grid-margin-small: var(
-        --spectrum-global-dimension-static-size-300
-    );
-    --spectrum-alias-grid-margin-medium: var(
-        --spectrum-global-dimension-static-size-400
-    );
-    --spectrum-alias-grid-margin-large: var(
-        --spectrum-global-dimension-static-size-500
-    );
-    --spectrum-alias-grid-margin-xlarge: var(
-        --spectrum-global-dimension-static-size-600
-    );
-    --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(
-        --spectrum-global-dimension-static-size-200
-    );
-    --spectrum-alias-grid-layout-region-margin-bottom-small: var(
-        --spectrum-global-dimension-static-size-300
-    );
-    --spectrum-alias-grid-layout-region-margin-bottom-medium: var(
-        --spectrum-global-dimension-static-size-400
-    );
-    --spectrum-alias-grid-layout-region-margin-bottom-large: var(
-        --spectrum-global-dimension-static-size-500
-    );
-    --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(
-        --spectrum-global-dimension-static-size-600
-    );
-    --spectrum-alias-radial-reaction-size-default: var(
-        --spectrum-global-dimension-static-size-550
-    );
-    --spectrum-alias-focus-ring-gap: var(
-        --spectrum-global-dimension-static-size-25
-    );
-    --spectrum-alias-focus-ring-size: var(
-        --spectrum-global-dimension-static-size-25
-    );
     --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50);
     --spectrum-alias-dropshadow-offset-y: var(
         --spectrum-global-dimension-size-10
@@ -1698,10 +1644,6 @@
     --spectrum-alias-ui-icon-asterisk-size-100: var(
         --spectrum-global-dimension-size-100
     );
-}
-:host,
-:root {
-    /* spectrum-colorAliases.css */
     --spectrum-alias-component-text-color-selected-default: var(
         --spectrum-global-color-gray-50
     );
@@ -1946,12 +1888,7 @@
     --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var(
         --spectrum-global-color-indigo-500
     );
-    --spectrum-alias-assetcard-overlay-background-color: rgba(
-        109,
-        115,
-        246,
-        0.2
-    );
+    --spectrum-alias-assetcard-overlay-background-color: #6d73f633;
     --spectrum-alias-assetcard-border-color-selected: var(
         --spectrum-global-color-indigo-500
     );
@@ -1967,18 +1904,8 @@
     --spectrum-alias-transparent-blue-background-color: var(
         --spectrum-alias-component-text-color-default
     );
-    --spectrum-alias-transparent-red-background-color-hover: rgba(
-        154,
-        0,
-        0,
-        0.15
-    );
-    --spectrum-alias-transparent-red-background-color-down: rgba(
-        124,
-        0,
-        0,
-        0.3
-    );
+    --spectrum-alias-transparent-red-background-color-hover: #9a000026;
+    --spectrum-alias-transparent-red-background-color-down: #7c00004d;
     --spectrum-alias-transparent-red-background-color-key-focus: var(
         --spectrum-alias-transparent-red-background-color-hover
     );
@@ -2247,31 +2174,11 @@
         --spectrum-global-color-gray-200
     );
     --spectrum-alias-background-color-transparent: transparent;
-    --spectrum-alias-background-color-overbackground-down: hsla(
-        0,
-        0%,
-        100%,
-        0.2
-    );
-    --spectrum-alias-background-color-quiet-overbackground-hover: hsla(
-        0,
-        0%,
-        100%,
-        0.1
-    );
-    --spectrum-alias-background-color-quiet-overbackground-down: hsla(
-        0,
-        0%,
-        100%,
-        0.2
-    );
-    --spectrum-alias-background-color-overbackground-disabled: hsla(
-        0,
-        0%,
-        100%,
-        0.1
-    );
-    --spectrum-alias-background-color-quickactions-overlay: rgba(0, 0, 0, 0.2);
+    --spectrum-alias-background-color-overbackground-down: #fff3;
+    --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a;
+    --spectrum-alias-background-color-quiet-overbackground-down: #fff3;
+    --spectrum-alias-background-color-overbackground-disabled: #ffffff1a;
+    --spectrum-alias-background-color-quickactions-overlay: #0003;
     --spectrum-alias-placeholder-text-color: var(
         --spectrum-global-color-gray-800
     );
@@ -2303,13 +2210,8 @@
     --spectrum-alias-text-color-overbackground: var(
         --spectrum-global-color-static-white
     );
-    --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-text-color-overbackground-disabled: #fff3;
+    --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3;
     --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900);
     --spectrum-alias-border-color: var(--spectrum-global-color-gray-400);
     --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500);
@@ -2339,8 +2241,8 @@
         --spectrum-global-color-gray-900
     );
     --spectrum-alias-border-color-transparent: transparent;
-    --spectrum-alias-border-color-translucent-dark: rgba(0, 0, 0, 0.05);
-    --spectrum-alias-border-color-translucent-darker: rgba(0, 0, 0, 0.1);
+    --spectrum-alias-border-color-translucent-dark: #0000000d;
+    --spectrum-alias-border-color-translucent-darker: #0000001a;
     --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400);
     --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color);
     --spectrum-alias-track-fill-color-overbackground: var(
@@ -2349,7 +2251,7 @@
     --spectrum-alias-track-color-disabled: var(
         --spectrum-global-color-gray-300
     );
-    --spectrum-alias-track-color-overbackground: hsla(0, 0%, 100%, 0.2);
+    --spectrum-alias-track-color-overbackground: #fff3;
     --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700);
     --spectrum-alias-icon-color-overbackground: var(
         --spectrum-global-color-static-white
@@ -2360,13 +2262,8 @@
         --spectrum-global-color-gray-900
     );
     --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400);
-    --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-overbackground-disabled: #fff3;
+    --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26;
     --spectrum-alias-icon-color-selected-neutral: var(
         --spectrum-global-color-gray-900
     );
@@ -2474,17 +2371,3 @@
         --spectrum-global-color-static-yellow-200
     );
 }
-:host,
-:root {
-    --spectrum-colorslider-height: var(--spectrum-global-dimension-size-200);
-    --spectrum-colorslider-vertical-width: var(--spectrum-colorslider-height);
-    --spectrum-colorslider-border-radius: var(
-        --spectrum-alias-border-radius-small
-    );
-    --spectrum-colorcontrol-checkerboard-light-color: var(
-        --spectrum-global-color-static-white
-    );
-    --spectrum-colorcontrol-checkerboard-dark-color: var(
-        --spectrum-global-color-static-gray-200
-    );
-}

package/express/spectrum-scale-large.css

@@ -1,5 +1,5 @@
-:host,
-:root {
+:root,
+:host {
     --spectrum-global-dimension-scale-factor: 1.25;
     --spectrum-global-dimension-size-0: 0px;
     --spectrum-global-dimension-size-10: 1px;

package/express/spectrum-scale-medium.css

@@ -1,5 +1,5 @@
-:host,
-:root {
+:root,
+:host {
     --spectrum-global-dimension-scale-factor: 1;
     --spectrum-global-dimension-size-0: 0px;
     --spectrum-global-dimension-size-10: 1px;

package/express/spectrum-theme-dark.css

@@ -1,7 +1,7 @@
-:host,
-:root {
+:root,
+:host {
     --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1.0;
+    --spectrum-global-color-version: 5.1;
     --spectrum-global-color-opacity-100: 1;
     --spectrum-global-color-opacity-90: 0.9;
     --spectrum-global-color-opacity-80: 0.8;
@@ -258,31 +258,11 @@
     --spectrum-global-color-gray-900: rgb(
         var(--spectrum-global-color-gray-900-rgb)
     );
-    --spectrum-alias-transparent-blue-background-color-default: rgba(
-        124,
-        129,
-        251,
-        0.15
-    );
-    --spectrum-alias-transparent-blue-background-color-hover: rgba(
-        145,
-        149,
-        255,
-        0.15
-    );
-    --spectrum-alias-transparent-blue-background-color-down: rgba(
-        167,
-        170,
-        255,
-        0.15
-    );
-    --spectrum-alias-transparent-blue-background-color-key-focus: rgba(
-        145,
-        149,
-        255,
-        0.15
-    );
-    --spectrum-alias-border-color-selected: hsla(0, 0%, 100%, 0.9);
+    --spectrum-alias-transparent-blue-background-color-default: #7c81fb26;
+    --spectrum-alias-transparent-blue-background-color-hover: #9195ff26;
+    --spectrum-alias-transparent-blue-background-color-down: #a7aaff26;
+    --spectrum-alias-transparent-blue-background-color-key-focus: #9195ff26;
+    --spectrum-alias-border-color-selected: #ffffffe6;
     --spectrum-alias-background-color-primary: var(
         --spectrum-global-color-gray-100
     );
@@ -292,17 +272,17 @@
     --spectrum-alias-background-color-tertiary: var(
         --spectrum-global-color-gray-50
     );
-    --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.5);
-    --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.5);
-    --spectrum-alias-background-color-hover-overlay: hsla(0, 0%, 100%, 0.06);
-    --spectrum-alias-highlight-hover: hsla(0, 0%, 100%, 0.07);
-    --spectrum-alias-highlight-down: hsla(0, 0%, 100%, 0.1);
-    --spectrum-alias-highlight-selected: rgba(84, 163, 246, 0.15);
-    --spectrum-alias-highlight-selected-hover: rgba(84, 163, 246, 0.25);
-    --spectrum-alias-text-highlight-color: rgba(84, 163, 246, 0.25);
-    --spectrum-alias-background-color-quickactions: rgba(50, 50, 50, 0.9);
-    --spectrum-alias-border-color-translucent: hsla(0, 0%, 100%, 0.1);
-    --spectrum-alias-radial-reaction-color-default: hsla(0, 0%, 92%, 0.6);
+    --spectrum-alias-background-color-modal-overlay: #00000080;
+    --spectrum-alias-dropshadow-color: #00000080;
+    --spectrum-alias-background-color-hover-overlay: #ffffff0f;
+    --spectrum-alias-highlight-hover: #ffffff12;
+    --spectrum-alias-highlight-down: #ffffff1a;
+    --spectrum-alias-highlight-selected: #54a3f626;
+    --spectrum-alias-highlight-selected-hover: #54a3f640;
+    --spectrum-alias-text-highlight-color: #54a3f640;
+    --spectrum-alias-background-color-quickactions: #323232e6;
+    --spectrum-alias-border-color-translucent: #ffffff1a;
+    --spectrum-alias-radial-reaction-color-default: #ebebeb99;
     --spectrum-alias-pasteboard-background-color: var(
         --spectrum-global-color-gray-50
     );
@@ -312,15 +292,4 @@
     --spectrum-alias-appframe-separator-color: var(
         --spectrum-global-color-gray-50
     );
-    --spectrum-scrollbar-mac-s-track-background-color: var(
-        --spectrum-global-color-gray-100
-    );
-    --spectrum-scrollbar-mac-m-track-background-color: var(
-        --spectrum-global-color-gray-100
-    );
-    --spectrum-scrollbar-mac-l-track-background-color: var(
-        --spectrum-global-color-gray-100
-    );
-    --spectrum-well-background-color: hsla(0, 0%, 92%, 0.02);
-    --spectrum-well-border-color: hsla(0, 0%, 100%, 0.05);
 }

package/express/spectrum-theme-light.css

@@ -1,7 +1,7 @@
-:host,
-:root {
+:root,
+:host {
     --spectrum-global-color-status: Verified;
-    --spectrum-global-color-version: 5.1.0;
+    --spectrum-global-color-version: 5.1;
     --spectrum-global-color-opacity-100: 1;
     --spectrum-global-color-opacity-90: 0.9;
     --spectrum-global-color-opacity-80: 0.8;
@@ -258,31 +258,11 @@
     --spectrum-global-color-gray-900: rgb(
         var(--spectrum-global-color-gray-900-rgb)
     );
-    --spectrum-alias-transparent-blue-background-color-default: rgba(
-        82,
-        88,
-        228,
-        0.15
-    );
-    --spectrum-alias-transparent-blue-background-color-hover: rgba(
-        64,
-        70,
-        202,
-        0.15
-    );
-    --spectrum-alias-transparent-blue-background-color-down: rgba(
-        50,
-        54,
-        168,
-        0.15
-    );
-    --spectrum-alias-transparent-blue-background-color-key-focus: rgba(
-        64,
-        70,
-        202,
-        0.15
-    );
-    --spectrum-alias-border-color-selected: rgba(0, 0, 0, 0.9);
+    --spectrum-alias-transparent-blue-background-color-default: #5258e426;
+    --spectrum-alias-transparent-blue-background-color-hover: #4046ca26;
+    --spectrum-alias-transparent-blue-background-color-down: #3236a826;
+    --spectrum-alias-transparent-blue-background-color-key-focus: #4046ca26;
+    --spectrum-alias-border-color-selected: #000000e6;
     --spectrum-alias-background-color-primary: var(
         --spectrum-global-color-gray-50
     );
@@ -292,17 +272,17 @@
     --spectrum-alias-background-color-tertiary: var(
         --spectrum-global-color-gray-300
     );
-    --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.4);
-    --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.15);
-    --spectrum-alias-background-color-hover-overlay: rgba(0, 0, 0, 0.04);
-    --spectrum-alias-highlight-hover: rgba(0, 0, 0, 0.06);
-    --spectrum-alias-highlight-down: rgba(0, 0, 0, 0.1);
-    --spectrum-alias-highlight-selected: rgba(2, 101, 220, 0.1);
-    --spectrum-alias-highlight-selected-hover: rgba(2, 101, 220, 0.2);
-    --spectrum-alias-text-highlight-color: rgba(2, 101, 220, 0.2);
-    --spectrum-alias-background-color-quickactions: hsla(0, 0%, 97%, 0.9);
-    --spectrum-alias-border-color-translucent: rgba(0, 0, 0, 0.1);
-    --spectrum-alias-radial-reaction-color-default: rgba(34, 34, 34, 0.6);
+    --spectrum-alias-background-color-modal-overlay: #0006;
+    --spectrum-alias-dropshadow-color: #00000026;
+    --spectrum-alias-background-color-hover-overlay: #0000000a;
+    --spectrum-alias-highlight-hover: #0000000f;
+    --spectrum-alias-highlight-down: #0000001a;
+    --spectrum-alias-highlight-selected: #0265dc1a;
+    --spectrum-alias-highlight-selected-hover: #0265dc33;
+    --spectrum-alias-text-highlight-color: #0265dc33;
+    --spectrum-alias-background-color-quickactions: #f8f8f8e6;
+    --spectrum-alias-border-color-translucent: #0000001a;
+    --spectrum-alias-radial-reaction-color-default: #2229;
     --spectrum-alias-pasteboard-background-color: var(
         --spectrum-global-color-gray-300
     );
@@ -312,15 +292,4 @@
     --spectrum-alias-appframe-separator-color: var(
         --spectrum-global-color-gray-300
     );
-    --spectrum-scrollbar-mac-s-track-background-color: var(
-        --spectrum-global-color-gray-75
-    );
-    --spectrum-scrollbar-mac-m-track-background-color: var(
-        --spectrum-global-color-gray-75
-    );
-    --spectrum-scrollbar-mac-l-track-background-color: var(
-        --spectrum-global-color-gray-75
-    );
-    --spectrum-well-background-color: rgba(34, 34, 34, 0.02);
-    --spectrum-well-border-color: rgba(0, 0, 0, 0.05);
 }