From 57159a2443b776b78128bfd9a83b2aa3de1a8342 Mon Sep 17 00:00:00 2001
From: Jenn Diaz <jenn.diaz@heysparkbox.com>
Date: Wed, 22 Feb 2023 10:11:46 -0700
Subject: [PATCH] feat(color-wheel): use core tokens

---
 packages/color-wheel/package.json             |   2 +-
 packages/color-wheel/src/ColorWheel.ts        |  31 ++-
 packages/color-wheel/src/color-wheel.css      |  64 +----
 .../color-wheel/src/spectrum-color-wheel.css  | 243 ++++++++++--------
 .../color-wheel/src/spectrum-config.v2.js     |  14 +-
 .../stories/color-wheel.stories.ts            |   2 +-
 packages/color-wheel/test/color-wheel.test.ts |   5 +-
 scripts/spectrum-tokens.js                    |   1 +
 yarn.lock                                     |   8 +-
 9 files changed, 194 insertions(+), 176 deletions(-)

diff --git a/packages/color-wheel/package.json b/packages/color-wheel/package.json
index 7541fa8b26..3a6be9558d 100644
--- a/packages/color-wheel/package.json
+++ b/packages/color-wheel/package.json
@@ -68,7 +68,7 @@
         "@spectrum-web-components/shared": "^0.15.5"
     },
     "devDependencies": {
-        "@spectrum-css/colorwheel": "^1.0.27"
+        "@spectrum-css/colorwheel": "^2.0.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts
index 4783db5606..ae40fce3e8 100644
--- a/packages/color-wheel/src/ColorWheel.ts
+++ b/packages/color-wheel/src/ColorWheel.ts
@@ -291,16 +291,39 @@ export class ColorWheel extends Focusable {
         const trackWidth = 24;
         const innerRadius = radius - trackWidth;
         const innerDiameter = innerRadius * 2;
-        const clipPath = `path(evenodd, "M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${diameter} 0 a ${radius} ${radius} 0 1 0 -${diameter} 0 M ${radius} ${radius} m -${innerRadius} 0 a ${innerRadius} ${innerRadius} 0 1 0 ${innerDiameter} 0 a ${innerRadius} ${innerRadius} 0 1 0 -${innerDiameter} 0")`;
+        const clipPathBorders = `"M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${diameter} 0 a ${radius} ${radius} 0 1 0 -${diameter} 0 M ${radius} ${radius} m -${innerRadius} 0 a ${innerRadius} ${innerRadius} 0 1 0 ${innerDiameter} 0 a ${innerRadius} ${innerRadius} 0 1 0 -${innerDiameter} 0"`;
+        const clipPath = `"M ${radius - 1} ${radius - 1} m -${radius - 1} 0 a ${
+            radius - 1
+        } ${radius - 1} 0 1 0 ${diameter - 2} 0 a ${radius - 1} ${
+            radius - 1
+        } 0 1 0 -${diameter - 2} 0 M ${radius - 1} ${radius - 1} m -${
+            innerRadius + 1
+        } 0 a ${innerRadius + 1} ${innerRadius + 1} 0 1 0 ${
+            innerDiameter + 2
+        } 0 a ${innerRadius + 1} ${innerRadius + 1} 0 1 0 -${
+            innerDiameter + 2
+        } 0"`;
         const handleLocationStyles = `transform: translate(${
-            (radius - 12.5) * Math.cos((this.value * Math.PI) / 180)
-        }px, ${(radius - 12.5) * Math.sin((this.value * Math.PI) / 180)}px);`;
+            (radius - 12) * Math.cos((this.value * Math.PI) / 180)
+        }px, ${(radius - 12) * Math.sin((this.value * Math.PI) / 180)}px);`;
         return html`
             <slot
                 name="gradient"
                 @pointerdown=${this.handleGradientPointerdown}
+                style="
+                    --spectrum-colorwheel-colorarea-container-size: ${diameter}px;
+                    --spectrum-colorwheel-height: ${diameter}px;
+                    --spectrum-colorwheel-width: ${diameter}px;
+                    --spectrum-colorwheel-path-borders: ${clipPathBorders};
+                    --spectrum-colorwheel-path: ${clipPath};
+                "
             >
-                <div class="wheel" style="clip-path: ${clipPath}"></div>
+                <div class="inner">
+                    <div class="colorarea-container"></div>
+                </div>
+                <div class="border">
+                    <div class="wheel"></div>
+                </div>
             </slot>
 
             <sp-color-handle
diff --git a/packages/color-wheel/src/color-wheel.css b/packages/color-wheel/src/color-wheel.css
index 003c92c1d9..67551c097c 100644
--- a/packages/color-wheel/src/color-wheel.css
+++ b/packages/color-wheel/src/color-wheel.css
@@ -20,62 +20,20 @@ governing permissions and limitations under the License.
     outline: none;
 }
 
-.wheel {
-    width: 100%;
-    height: 100%;
-    background: conic-gradient(
-        from 90deg,
-        rgb(255 0 0),
-        rgb(255 128 0),
-        rgb(255 255 0),
-        rgb(128 255 0),
-        rgb(0 255 0),
-        rgb(0 255 128),
-        rgb(0 255 255),
-        rgb(0 128 255),
-        rgb(0 0 255),
-        rgb(128 0 255),
-        rgb(255 0 255),
-        rgb(255 0 128),
-        rgb(255 0 0)
+::slotted([slot='gradient']) {
+    border-color: var(
+        --spectrum-colorwheel-border-color,
+        var(--spectrum-alias-border-color-translucent)
     );
-}
-
-.wheel:before,
-.wheel:after {
-    content: '';
-    position: absolute;
-    border-color: var(--spectrum-colorwheel-border-color);
+    border-radius: 100%;
+    border-style: solid;
     border-width: var(
         --spectrum-colorwheel-border-size,
         var(--spectrum-alias-border-size-thin)
     );
-    border-radius: 50%;
-    border-style: solid;
-}
-
-.wheel:after {
-    inset: 0;
-}
-
-.wheel:before {
-    inset: 24px;
-}
-
-:host([disabled]) .wheel:before,
-:host([disabled]) .wheel:after {
-    /* .spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-innerCircle,
-   * .spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-outerCircle */
-    border-color: var(
-        --spectrum-colorwheel-border-color-disabled,
-        var(--spectrum-global-color-gray-300)
-    );
-}
-
-:host([disabled]) .wheel {
-    /* .spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-outerCircle */
-    background: var(
-        --spectrum-colorwheel-fill-color-disabled,
-        var(--spectrum-global-color-gray-300)
-    );
+    box-sizing: border-box;
+    block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height));
+    position: relative;
+    inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
+    z-index: 0;
 }
diff --git a/packages/color-wheel/src/spectrum-color-wheel.css b/packages/color-wheel/src/spectrum-color-wheel.css
index 58cdbbe1de..039e86862e 100644
--- a/packages/color-wheel/src/spectrum-color-wheel.css
+++ b/packages/color-wheel/src/spectrum-color-wheel.css
@@ -12,153 +12,174 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-colorwheel-border-radius: 100%;
-    --spectrum-colorwheel-width: calc(
-        var(--spectrum-global-dimension-size-125) * 16
+    --spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
+    --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
+    --spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
+    --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200);
+    --spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
+    --spectrum-colorwheel-fill-color-disabled: var(
+        --spectrum-disabled-background-color
     );
-    --spectrum-colorwheel-height: var(
-        --spectrum-colorwheel-width,
-        var(--spectrum-global-dimension-size-2400)
+    --spectrum-colorwheel-track-width: var(
+        --spectrum-color-control-track-width
     );
-}
-:host([focused]) .handle {
-    height: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * 2
-    );
-    margin-left: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * -1
-    );
-    margin-top: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * -1
+    --spectrum-colorwheel-colorarea-margin: var(
+        --spectrum-color-wheel-color-area-margin
     );
-    width: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * 2
+    --spectrum-colorwheel-colorhandle-position: calc(
+        var(--spectrum-colorwheel-width) / 2 -
+            var(--spectrum-colorwheel-track-width) / 2
     );
 }
-.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-colorwheel-border-color-disabled: GrayText;
+        --highcontrast-colorwheel-fill-color-disabled: Canvas;
+    }
+    :host {
+        forced-color-adjust: none;
+    }
 }
 :host {
-    border-radius: var(--spectrum-colorwheel-border-radius);
+    block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height));
     cursor: default;
     display: block;
-    height: var(
-        --spectrum-colorwheel-height,
-        var(--spectrum-global-dimension-size-2400)
+    inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
+    min-inline-size: var(
+        --mod-colorwheel-min-width,
+        var(--spectrum-colorwheel-min-width)
     );
     position: relative;
     -webkit-user-select: none;
     user-select: none;
-    width: var(
-        --spectrum-colorwheel-width,
-        var(--spectrum-global-dimension-size-2400)
-    );
 }
 :host([focused]) {
     z-index: 2;
 }
+:host([focused]) .handle {
+    block-size: calc(var(--spectrum-color-handle-size) * 2);
+    inline-size: calc(var(--spectrum-color-handle-size) * 2);
+    margin-block-start: calc(var(--spectrum-color-handle-size) * -1);
+    margin-inline-start: calc(var(--spectrum-color-handle-size) * -1);
+}
 :host([disabled]) {
     pointer-events: none;
 }
 :host([dragged]) {
     z-index: 2;
 }
-::slotted([slot='gradient']) {
-    border-radius: 100%;
-    border-style: solid;
-    border-width: var(
-        --spectrum-colorwheel-border-size,
-        var(--spectrum-alias-border-size-thin)
+.inner {
+    block-size: var(
+        --mod-colorwheel-colorarea-container-size,
+        var(--spectrum-colorwheel-colorarea-container-size)
     );
-    box-sizing: border-box;
-    height: var(
-        --spectrum-colorwheel-height,
-        var(--spectrum-global-dimension-size-2400)
+    display: flex;
+    inline-size: var(
+        --mod-colorwheel-colorarea-container-size,
+        var(--spectrum-colorwheel-colorarea-container-size)
     );
-    position: relative;
-    width: var(
-        --spectrum-colorwheel-width,
-        var(--spectrum-global-dimension-size-2400)
+    inset-block: 0;
+    inset-inline: 0;
+    margin: auto;
+    position: absolute;
+}
+.colorarea-container {
+    align-items: center;
+    block-size: auto;
+    display: flex;
+    inline-size: 100%;
+    justify-content: center;
+    margin: var(
+        --mod-colorwheel-colorarea-margin,
+        var(--spectrum-colorwheel-colorarea-margin)
     );
+}
+.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;
 }
-.wheel {
-    position: relative;
-    z-index: 1;
+.handle {
+    inset-block-start: 50%;
+    transform: translate(var(--spectrum-colorwheel-colorhandle-position));
 }
-.innerCircle,
-.outerCircle {
-    fill: #0000;
-    stroke-width: var(
-        --spectrum-colorwheel-border-size,
-        var(--spectrum-alias-border-size-thin)
-    );
+:host([dir='ltr']) .handle {
+    inset-inline-start: 50%;
 }
-.handle {
-    left: 50%;
-    top: 50%;
+:host([dir='rtl']) .handle {
+    inset-inline-end: 50%;
 }
-:host {
-    --spectrum-colorwheel-border-color: var(
-        --spectrum-colorarea-border-color,
-        var(--spectrum-alias-border-color-translucent)
+.border {
+    background-color: var(
+        --mod-colorwheel-border-color,
+        var(--spectrum-colorwheel-border-color)
     );
-}
-:host([disabled]) .innerCircle,
-:host([disabled]) .outerCircle {
-    stroke: var(
-        --spectrum-colorwheel-border-color-disabled,
-        var(--spectrum-alias-track-color-disabled)
+    block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height));
+    clip-path: path(
+        evenodd,
+        var(
+            --mod-colorwheel-path-borders,
+            var(--spectrum-colorwheel-path-borders)
+        )
     );
+    inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
+    position: relative;
 }
-:host([disabled]) .outerCircle {
-    fill: var(
-        --spectrum-colorwheel-fill-color-disabled,
-        var(--spectrum-alias-track-color-disabled)
+:host([disabled]) .border {
+    background-color: var(
+        --highcontrast-colorwheel-border-color-disabled,
+        var(
+            --mod-colorwheel-fill-color-disabled,
+            var(--spectrum-colorwheel-fill-color-disabled)
+        )
     );
 }
-:host([disabled]) .segment {
-    display: none;
-}
-::slotted([slot='gradient']) {
-    border-color: var(
-        --spectrum-colorwheel-border-color,
-        var(--spectrum-alias-border-color-translucent)
-    );
+.wheel {
+    --track-width: var(
+        --mod-colorwheel-track-width,
+        var(--spectrum-colorwheel-track-width)
+    );
+    --border-width: var(
+        --mod-colorwheel-border-width,
+        var(--spectrum-colorwheel-border-width)
+    );
+    background: conic-gradient(
+        from 90deg,
+        red,
+        #ff8000,
+        #ff0,
+        #80ff00,
+        #0f0,
+        #00ff80,
+        #0ff,
+        #0080ff,
+        #00f,
+        #8000ff,
+        #f0f,
+        #ff0080,
+        red
+    );
+    clip-path: path(
+        evenodd,
+        var(--mod-colorwheel-path, var(--spectrum-colorwheel-path))
+    );
+    inset-block: var(--spectrum-colorwheel-border-width);
+    inset-inline: var(--spectrum-colorwheel-border-width);
+    position: absolute;
 }
-.innerCircle,
-.outerCircle {
-    stroke: var(
-        --spectrum-colorwheel-border-color,
-        var(--spectrum-alias-border-color-translucent)
+:host([disabled]) .wheel {
+    background: var(
+        --highcontrast-colorwheel-fill-color-disabled,
+        var(
+            --mod-colorwheel-fill-color-disabled,
+            var(--spectrum-colorwheel-fill-color-disabled)
+        )
     );
-}
-@media (forced-colors: active) {
-    :host {
-        --spectrum-colorwheel-border-color-disabled: GrayText;
-        --spectrum-colorwheel-fill-color-disabled: Canvas;
-    }
-    :host {
-        forced-color-adjust: none;
-    }
+    pointer-events: none;
 }
diff --git a/packages/color-wheel/src/spectrum-config.v2.js b/packages/color-wheel/src/spectrum-config.v2.js
index 7b646eb234..234c01f54e 100644
--- a/packages/color-wheel/src/spectrum-config.v2.js
+++ b/packages/color-wheel/src/spectrum-config.v2.js
@@ -11,7 +11,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { converterFor } from '../../../tasks/process-spectrum-utils.js';
+import {
+    builder,
+    converterFor,
+} from '../../../tasks/process-spectrum-utils.js';
 
 const converter = converterFor('spectrum-ColorWheel');
 
@@ -24,6 +27,10 @@ const config = {
             inPackage: '@spectrum-css/colorwheel',
             outPackage: 'color-wheel',
             fileName: 'color-wheel',
+            excludeByComponents: [
+                builder.class('🤫'),
+                builder.class('spectrum-ColorWheel-ColorArea-handle'),
+            ],
             components: [
                 converter.classToHost(),
                 converter.classToAttribute('is-focused', 'focused'),
@@ -35,6 +42,11 @@ const config = {
                 converter.classToClass('spectrum-ColorWheel-innerCircle'),
                 converter.classToClass('spectrum-ColorWheel-outerCircle'),
                 converter.classToClass('spectrum-ColorWheel-segment'),
+                converter.classToClass('spectrum-ColorWheel-border'),
+                converter.classToClass(
+                    'spectrum-ColorWheel-colorarea-container'
+                ),
+                converter.classToClass('spectrum-ColorWheel-inner'),
                 converter.classToSlotted(
                     'spectrum-ColorWheel-gradient',
                     'gradient'
diff --git a/packages/color-wheel/stories/color-wheel.stories.ts b/packages/color-wheel/stories/color-wheel.stories.ts
index 2403b72548..4afb07441c 100644
--- a/packages/color-wheel/stories/color-wheel.stories.ts
+++ b/packages/color-wheel/stories/color-wheel.stories.ts
@@ -64,7 +64,7 @@ class CanvasWriter extends HTMLElement {
                     const height = canvas.height;
                     const centerX = width / 2;
                     const centerY = height / 2;
-                    const ringSize = 57;
+                    const ringSize = centerX - 18;
 
                     for (let i = 0; i < 360; i += Math.PI / 8) {
                         const rad = (i * (2 * Math.PI)) / 360;
diff --git a/packages/color-wheel/test/color-wheel.test.ts b/packages/color-wheel/test/color-wheel.test.ts
index c1ce20eb29..eecc5eabd5 100644
--- a/packages/color-wheel/test/color-wheel.test.ts
+++ b/packages/color-wheel/test/color-wheel.test.ts
@@ -20,6 +20,7 @@ import {
     arrowRightKeyupEvent,
     arrowUpEvent,
     arrowUpKeyupEvent,
+    ignoreResizeObserverLoopError,
     testForLitDevWarnings,
 } from '../../../test/testing-helpers.js';
 
@@ -30,6 +31,8 @@ import { sendKeys } from '@web/test-runner-commands';
 import { sendMouse } from '../../../test/plugins/browser.js';
 import { spy } from 'sinon';
 
+ignoreResizeObserverLoopError(before, after);
+
 describe('ColorWheel', () => {
     testForLitDevWarnings(
         async () =>
@@ -359,7 +362,7 @@ describe('ColorWheel', () => {
             html`
                 <sp-color-wheel
                     .color=${color}
-                    style="--spectrum-global-dimension-size-125: 10px;"
+                    style="--mod-colorwheel-width: 160px; --mod-colorwheel-height: 160px;"
                 ></sp-color-wheel>
             `
         );
diff --git a/scripts/spectrum-tokens.js b/scripts/spectrum-tokens.js
index df021a855c..490377c052 100644
--- a/scripts/spectrum-tokens.js
+++ b/scripts/spectrum-tokens.js
@@ -56,6 +56,7 @@ const tokenPackages = [
     'progressbar',
     'picker',
     'colorarea',
+    'colorwheel',
 ];
 
 const packagePaths = tokenPackages.map((packageName) => {
diff --git a/yarn.lock b/yarn.lock
index f0724b2253..947469c7c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4334,10 +4334,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/colorslider/-/colorslider-2.0.13.tgz#c5cb6aeb6e26c61e775e06e40c23e33742f8cbad"
   integrity sha512-o3hHzO4LHDS/QRe42PJecgO7YLhK0buxBt9Ky1XZWXrhTzSTJezyF0PKaSOyPJa6OaS9YprWt+nnv1NIBzfg4Q==
 
-"@spectrum-css/colorwheel@^1.0.27":
-  version "1.0.27"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/colorwheel/-/colorwheel-1.0.27.tgz#42742d932123962aa2cd236ab0bddcfc4e7726f0"
-  integrity sha512-bsvMeVMTzscpNP1WswOTBVHTSVQMS0zwhl0fkjm1Rgvc/l4TFpftssMC7QS6dQjqF+ijhItno1O7bKDiJ/N4xQ==
+"@spectrum-css/colorwheel@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/colorwheel/-/colorwheel-2.0.0.tgz#a50ece1cd010a20bb5aece8bf824b05ddb8a2622"
+  integrity sha512-V62K5pbCJrypMIO4LSg8osHopTdU54qhaAQ4tRd7kmbQObfQ9aL8VXOoen5U88OAilhnjtULaHW8SUlr2aG9pg==
 
 "@spectrum-css/commons@^4.0.2":
   version "4.0.2"