@spectrum-web-components/styles 0.41.1 → 0.41.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/styles",
-    "version": "0.41.1",
+    "version": "0.41.2",
     "publishConfig": {
         "access": "public"
     },
@@ -104,13 +104,13 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.41.1"
+        "@spectrum-web-components/base": "^0.41.2"
     },
     "devDependencies": {
-        "@spectrum-css/commons": "^9.1.1",
+        "@spectrum-css/commons": "^9.1.2",
         "@spectrum-css/expressvars": "^3.0.9",
-        "@spectrum-css/tokens": "^13.1.2",
-        "@spectrum-css/typography": "^5.1.1",
+        "@spectrum-css/tokens": "^13.2.0",
+        "@spectrum-css/typography": "^5.1.3",
         "@spectrum-css/vars": "^9.0.8"
     },
     "customElements": "custom-elements.json",
@@ -118,5 +118,5 @@
         "./**/*.css"
     ],
     "style": "all-medium-lightest.css",
-    "gitHead": "1eded35d98d01973b40990486b86840ba464a2da"
+    "gitHead": "78c3f16b08c9133c9e5ca88d0c9fef5ea7d2ab87"
 }

package/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-negative-background-color: var(
         --spectrum-global-color-static-red-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);
@@ -1508,87 +1535,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-focus-ring-gap-small: var(
         --spectrum-global-dimension-static-size-0
     );
@@ -1692,22 +1638,8 @@
     --spectrum-alias-ui-icon-asterisk-size-100: var(
         --spectrum-global-dimension-size-100
     );
-}
-:host,
-:root {
-    /* spectrum-colorAliases.css */
-    --spectrum-alias-transparent-blue-background-color-hover: rgba(
-        0,
-        87,
-        190,
-        0.15
-    );
-    --spectrum-alias-transparent-blue-background-color-down: rgba(
-        0,
-        72,
-        153,
-        0.3
-    );
+    --spectrum-alias-transparent-blue-background-color-hover: #0057be26;
+    --spectrum-alias-transparent-blue-background-color-down: #0048994d;
     --spectrum-alias-transparent-blue-background-color-key-focus: var(
         --spectrum-alias-transparent-blue-background-color-hover
     );
@@ -1717,18 +1649,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
     );
@@ -2221,12 +2143,7 @@
     --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var(
         --spectrum-global-color-blue-500
     );
-    --spectrum-alias-assetcard-overlay-background-color: rgba(
-        27,
-        127,
-        245,
-        0.1
-    );
+    --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a;
     --spectrum-alias-assetcard-border-color-selected: var(
         --spectrum-global-color-blue-500
     );
@@ -2243,31 +2160,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
     );
@@ -2299,13 +2196,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);
@@ -2335,8 +2227,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-color-default: var(--spectrum-global-color-gray-300);
@@ -2346,7 +2238,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
@@ -2357,13 +2249,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
     );
@@ -2471,12 +2358,3 @@
         --spectrum-global-color-static-yellow-200
     );
 }
-:host,
-:root {
-    --spectrum-colorcontrol-checkerboard-light-color: var(
-        --spectrum-global-color-static-white
-    );
-    --spectrum-colorcontrol-checkerboard-dark-color: var(
-        --spectrum-global-color-static-gray-300
-    );
-}

package/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/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/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;
@@ -267,20 +267,20 @@
     --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-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-selected: var(
         --spectrum-global-color-blue-600
     );
-    --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-border-color-translucent: #ffffff1a;
+    --spectrum-alias-radial-reaction-color-default: #ebebeb99;
     --spectrum-alias-pasteboard-background-color: var(
         --spectrum-global-color-gray-50
     );
@@ -290,15 +290,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/spectrum-theme-darkest.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;
@@ -267,20 +267,20 @@
     --spectrum-alias-background-color-tertiary: var(
         --spectrum-global-color-gray-50
     );
-    --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.6);
-    --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.8);
-    --spectrum-alias-background-color-hover-overlay: hsla(0, 0%, 100%, 0.08);
-    --spectrum-alias-highlight-hover: hsla(0, 0%, 100%, 0.08);
-    --spectrum-alias-highlight-down: hsla(0, 0%, 100%, 0.15);
-    --spectrum-alias-highlight-selected: rgba(64, 150, 243, 0.2);
-    --spectrum-alias-highlight-selected-hover: rgba(64, 150, 243, 0.3);
-    --spectrum-alias-text-highlight-color: rgba(64, 150, 243, 0.3);
-    --spectrum-alias-background-color-quickactions: rgba(29, 29, 29, 0.9);
+    --spectrum-alias-background-color-modal-overlay: #0009;
+    --spectrum-alias-dropshadow-color: #000c;
+    --spectrum-alias-background-color-hover-overlay: #ffffff14;
+    --spectrum-alias-highlight-hover: #ffffff14;
+    --spectrum-alias-highlight-down: #ffffff26;
+    --spectrum-alias-highlight-selected: #4096f333;
+    --spectrum-alias-highlight-selected-hover: #4096f34d;
+    --spectrum-alias-text-highlight-color: #4096f34d;
+    --spectrum-alias-background-color-quickactions: #1d1d1de6;
     --spectrum-alias-border-color-selected: var(
         --spectrum-global-color-blue-600
     );
-    --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-border-color-translucent: #ffffff1a;
+    --spectrum-alias-radial-reaction-color-default: #ebebeb99;
     --spectrum-alias-pasteboard-background-color: var(
         --spectrum-global-color-gray-50
     );
@@ -290,14 +290,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);
 }