feat(color-slider): migrate to core tokens (#3507)

* build(color-slider): use beta of 5.0 spectrum css component

New version of Spectrum CSS colorslider that has migrated to using core
tokens.

* fix(color-slider): remove css that is now a duplicate

Remove recently added CSS for reversing the gradient in RTL mode that is
now included in the new spectrum CSS colorslider (same rule now exists
in generated spectrum-color-slider.css).

* build(color-slider): update beta version of CSS

* feat(color-slider): use opacity-checkerboard

Use the new opacity checkerboard tools class.

* build(color-slider): update to 5.0 spectrum css release

Update version of spectrum CSS color slider to the latest 5.0 release,
just out of beta.

* test: correct tests for layout updates

* ci: update golden images cache

---------

Co-authored-by: Westbrook Johnson <westbrook.johnson@gmail.com>

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 0cebb3fccf2241ffa7850ab5368ab3d8aef9f0e4
+        default: 6872683e2c47918e89c8c73a15367ca97b15b38e
     wireit_cache_name:
         type: string
         default: wireit

packages/color-handle/package.json

@@ -61,7 +61,7 @@
         "@spectrum-web-components/color-loupe": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/colorhandle": "^7.0.6"
+        "@spectrum-css/colorhandle": "^7.0.7"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/color-handle/src/color-handle.css

@@ -14,6 +14,51 @@ governing permissions and limitations under the License.
 
 :host {
     touch-action: none;
+    transition: inline-size
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            ),
+        block-size
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            ),
+        border-width
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            ),
+        margin-inline
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            ),
+        margin-block
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            );
 }
 
 :host(:focus) {

packages/color-slider/package.json

@@ -68,7 +68,7 @@
         "@spectrum-web-components/shared": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/colorslider": "^3.0.23"
+        "@spectrum-css/colorslider": "^5.0.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/color-slider/src/ColorSlider.ts

@@ -32,6 +32,7 @@ import {
 } from '@spectrum-web-components/reactive-controllers/src/Color.js';
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 
+import opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
 import styles from './color-slider.css.js';
 
 /**
@@ -42,7 +43,7 @@ import styles from './color-slider.css.js';
  */
 export class ColorSlider extends Focusable {
     public static override get styles(): CSSResultArray {
-        return [styles];
+        return [opacityCheckerBoardStyles, styles];
     }
 
     @property({ type: String, reflect: true })
@@ -303,7 +304,7 @@ export class ColorSlider extends Focusable {
     protected override render(): TemplateResult {
         return html`
             <div
-                class="checkerboard"
+                class="opacity-checkerboard checkerboard"
                 role="presentation"
                 @pointerdown=${this.handleGradientPointerdown}
             >

packages/color-slider/src/color-slider.css

@@ -37,10 +37,6 @@ governing permissions and limitations under the License.
     overflow: hidden;
 }
 
-:host([dir='rtl']) .gradient {
-    transform: scaleX(-1);
-}
-
 ::slotted(*) {
     width: 100%;
     height: 100%;

packages/color-slider/src/spectrum-color-slider.css

@@ -12,149 +12,154 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-colorslider-handle-hitarea-border-radius: 0%;
-    --spectrum-colorslider-handle-hitarea-width: var(
-        --spectrum-global-dimension-size-300
+    --spectrum-color-slider-handle-margin-block: var(
+        --spectrum-component-top-to-text-75
     );
-    --spectrum-colorslider-handle-hitarea-height: var(
-        --spectrum-global-dimension-size-300
+    --spectrum-color-slider-border-color-rgba: rgba(
+        var(--spectrum-gray-900-rgb),
+        var(--spectrum-color-slider-border-opacity)
     );
-    --spectrum-colorslider-checkerboard-size: var(
+    --spectrum-color-slider-checkerboard-size: var(
         --spectrum-opacity-checkerboard-square-size
     );
-    --spectrum-colorslider-checkerboard-dark-color: var(
+    --spectrum-color-slider-checkerboard-dark-color: var(
         --spectrum-opacity-checkerboard-square-dark
     );
-    --spectrum-colorslider-checkerboard-light-color: var(
+    --spectrum-color-slider-checkerboard-light-color: var(
         --spectrum-opacity-checkerboard-square-light
     );
+    --mod-colorhandle-hitarea-border-radius: var(
+        --mod-color-slider-handle-hitarea-border-radius,
+        0px
+    );
 }
-.slider {
-    height: 100%;
-    left: 0;
-    margin: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 0;
+@media (forced-colors: active) {
+    :host {
+        --highcontrast-color-slider-border-color: CanvasText;
+        --highcontrast-color-slider-border-color-disabled: GrayText;
+        --highcontrast-color-slider-background-color-disabled: Canvas;
+        forced-color-adjust: none;
+    }
 }
 :host {
+    block-size: var(
+        --mod-color-slider-control-track-width,
+        var(--spectrum-color-control-track-width)
+    );
     cursor: default;
     display: block;
-    height: var(
-        --spectrum-colorslider-height,
-        var(--spectrum-global-dimension-size-300)
+    inline-size: var(
+        --mod-color-slider-length,
+        var(--spectrum-color-slider-length)
+    );
+    min-inline-size: var(
+        --mod-color-slider-minimum-length,
+        var(--spectrum-color-slider-minimum-length)
     );
     position: relative;
     -webkit-user-select: none;
     user-select: none;
-    width: var(
-        --spectrum-colorslider-default-length,
-        var(--spectrum-global-dimension-size-2400)
-    );
 }
 :host([focused]) {
     z-index: 2;
 }
 :host([disabled]) {
     pointer-events: none;
 }
+:host([disabled]) .gradient {
+    display: none;
+}
 :host([vertical]) {
+    block-size: var(
+        --mod-color-slider-vertical-height,
+        var(--mod-color-slider-length, var(--spectrum-color-slider-length))
+    );
     display: inline-block;
-    height: var(
-        --spectrum-colorslider-vertical-default-length,
-        var(--spectrum-global-dimension-size-2400)
+    inline-size: var(
+        --mod-color-slider-vertical-control-track-width,
+        var(
+            --mod-color-slider-control-track-height,
+            var(--spectrum-color-control-track-width)
+        )
     );
-    width: var(
-        --spectrum-colorslider-vertical-width,
-        var(--spectrum-global-dimension-size-300)
+    min-block-size: var(
+        --mod-color-slider-vertical-minimum-height,
+        var(
+            --mod-color-slider-minimum-length,
+            var(--spectrum-color-slider-minimum-length)
+        )
     );
+    min-inline-size: 0;
 }
 :host([vertical]) .handle {
-    left: 50%;
-    top: 0;
+    inset-block-start: 0;
+    inset-inline-start: 50%;
 }
 .handle {
-    left: 0;
-    top: 50%;
-}
-.handle:after {
-    border-radius: var(--spectrum-colorslider-handle-hitarea-border-radius);
-    height: var(--spectrum-colorslider-handle-hitarea-height);
-    width: var(--spectrum-colorslider-handle-hitarea-width);
+    inset-block-start: 50%;
+    inset-inline-start: 0;
 }
 .checkerboard {
-    background: repeating-conic-gradient(
-            var(--spectrum-colorslider-checkerboard-light-color) 0 25%,
-            var(--spectrum-colorslider-checkerboard-dark-color) 0 50%
+    --spectrum-color-slider-border-color-local: var(
+        --highcontrast-color-slider-border-color,
+        var(
+            --mod-color-slider-border-color,
+            var(--spectrum-color-slider-border-color-rgba)
         )
-        0 0 / calc(var(--spectrum-colorslider-checkerboard-size) * 2)
-        calc(var(--spectrum-colorslider-checkerboard-size) * 2);
+    );
 }
 .checkerboard:before {
     border-radius: var(
-        --spectrum-colorslider-border-radius,
-        var(--spectrum-alias-border-radius-regular)
+        --mod-color-slider-border-rounding,
+        var(--spectrum-color-slider-border-rounding)
     );
+    box-shadow: inset 0 0 0
+        var(
+            --mod-color-slider-border-width,
+            var(--spectrum-color-slider-border-width)
+        )
+        var(--spectrum-color-slider-border-color-local);
     content: '';
     inset: 0;
     position: absolute;
     z-index: 1;
 }
-.checkerboard,
-.gradient {
-    border-radius: var(
-        --spectrum-colorslider-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-    );
-    height: 100%;
-    width: 100%;
-}
-:host {
-    --spectrum-colorslider-border-color: var(
-        --spectrum-colorarea-border-color,
-        var(--spectrum-alias-border-color-translucent)
-    );
-}
-.checkerboard:before {
-    box-shadow: inset 0 0 0
+:host([disabled]) .checkerboard {
+    --spectrum-color-slider-border-color-local: var(
+        --highcontrast-color-slider-border-color-disabled,
         var(
-            --spectrum-colorslider-border-size,
-            var(--spectrum-alias-border-size-thin)
+            --mod-color-slider-border-color-disabled,
+            var(--spectrum-disabled-background-color)
         )
-        var(
-            --spectrum-colorslider-border-color,
-            var(--spectrum-alias-border-color-translucent)
-        );
-}
-:host([disabled]) .checkerboard {
-    background: var(
-        --spectrum-colorslider-fill-color-disabled,
-        var(--spectrum-alias-track-color-disabled)
     );
-}
-:host([disabled]) .checkerboard:before {
-    box-shadow: 0 0 0
+    background: var(
+        --highcontrast-color-slider-background-color-disabled,
         var(
-            --spectrum-colorslider-border-size,
-            var(--spectrum-alias-border-size-thin)
+            --mod-color-slider-background-color-disabled,
+            var(--spectrum-disabled-background-color)
         )
-        var(
-            --spectrum-colorslider-border-color-disabled,
-            var(--spectrum-alias-track-color-disabled)
-        );
+    );
 }
-:host([disabled]) .gradient {
-    display: none;
+.checkerboard,
+.gradient {
+    block-size: 100%;
+    border-radius: var(
+        --mod-color-slider-border-rounding,
+        var(--spectrum-color-slider-border-rounding)
+    );
+    inline-size: 100%;
 }
-@media (forced-colors: active) {
-    :host {
-        --spectrum-colorslider-border-color-disabled: GrayText;
-        --spectrum-colorslider-fill-color-disabled: Canvas;
-    }
-    :host {
-        forced-color-adjust: none;
-    }
+:host([dir='rtl']) .gradient {
+    transform: scaleX(-1);
+}
+.slider {
+    block-size: 100%;
+    inline-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    margin: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: 0;
 }

packages/color-slider/test/color-slider.test.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, html } from '@open-wc/testing';
 import {
     arrowDownEvent,
     arrowDownKeyupEvent,
@@ -20,6 +20,7 @@ import {
     arrowRightKeyupEvent,
     arrowUpEvent,
     arrowUpKeyupEvent,
+    fixture,
     testForLitDevWarnings,
 } from '../../../test/testing-helpers.js';
 
@@ -229,7 +230,6 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-
         expect(el.sliderHandlePosition).to.be.approximately(
             (2 * 100) / 360,
             0.000001
@@ -543,7 +543,7 @@ describe('ColorSlider', () => {
             boundingClientRect.top + boundingClientRect.height / 2,
         ];
         const targetLocation: [number, number] = [
-            handleLocation[0] + 100,
+            handleLocation[0] + 105,
             handleLocation[1],
         ];