feat(color-wheel): use core tokens

adobe · Mar 21, 2023 · 57159a2 · 57159a2
1 parent 0a71d2a
commit 57159a2
Show file tree

Hide file tree

Showing 9 changed files with 194 additions and 176 deletions.
diff --git 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
@@ -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
@@ -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;
 }