feat(colorwheel): s2 migration

- chore(colorwheel): update property name - chore(colorwheel): wip inset borders - chore(colorwheel): fix lint violations - chore(colorwheel): move mod declarations - chore(colorwheel): drop unused property + update metadata - chore(colorwheel): remove underlying border node + class - chore(colorwheel): remove unused property - fix(colorwheel): add missing mod - fix(colorwheel): comments for updated before spacing/positioning - fix(colorwheel): adopt proper token for border opacity - fix(colorwheel): remove inset border on disabled state - fix(colorwheel): remove global token reference - chore(colorwheel): highlight removed/added mods - chore(colorwheel): update copyright year - chore(colorwheel): add color loupe to default story - fix(colorwheel): correct WHC disabled background color value - chore(colorwheel): update test heading - fix(colorwheel): typos - chore(colorwheel): update token usage - chore(colorwheel): add without loupe test - chore(colorwheel): restore WHC styles - chore(colorwheel): move isWithColorLoupe property - fix(colorwheel): whc disabled background
adobe · Feb 7, 2025 · 02a3f15 · 02a3f15
1 parent cf46c2b
commit 02a3f15
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 53 deletions.
diff --git a/.changeset/giant-windows-smoke.md b/.changeset/giant-windows-smoke.md
@@ -0,0 +1,20 @@
+---
+"@spectrum-css/colorwheel": major
+---
+
+# colorwheel S2 migration
+
+This change migrates the colorwheel component to S2. It adds the `--spectrum-colorwheel-border-color-rgb` and `--spectrum-colorwheel-border-opacity` custom properties. It updates `--spectrum-colorwheel-border-color` to leverage these tokens in an `rgba(...)` function.
+
+This removes the `spectrum-ColorWheel-border` and associated template DOM node as the outside/underlying border are no longer present in the S2 designs.
+
+The following mods have been removed:
+
+```css
+--mod-colorwheel-height
+--mod-colorwheel-path-borders
+--mod-colorwheel-track-width
+--mod-colorwheel-width
+```
+
+The mod `--mod-colorwheel-track-width` has been added.
diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json
@@ -4,17 +4,19 @@
     ".spectrum-ColorWheel",
     ".spectrum-ColorWheel-ColorArea-handle",
     ".spectrum-ColorWheel-ColorArea-handle:dir(rtl)",
-    ".spectrum-ColorWheel-border",
-    ".spectrum-ColorWheel-border.is-disabled",
     ".spectrum-ColorWheel-colorarea-container",
     ".spectrum-ColorWheel-handle",
     ".spectrum-ColorWheel-inner",
+    ".spectrum-ColorWheel-inner:before",
     ".spectrum-ColorWheel-slider",
     ".spectrum-ColorWheel-wheel",
     ".spectrum-ColorWheel-wheel.is-disabled",
     ".spectrum-ColorWheel.is-disabled",
+    ".spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before",
+    ".spectrum-ColorWheel.is-disabled:before",
     ".spectrum-ColorWheel.is-dragged",
     ".spectrum-ColorWheel.is-focused",
+    ".spectrum-ColorWheel:before",
     "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle"
   ],
   "modifiers": [
@@ -23,32 +25,33 @@
     "--mod-colorwheel-colorarea-container-size",
     "--mod-colorwheel-colorarea-margin",
     "--mod-colorwheel-fill-color-disabled",
-    "--mod-colorwheel-height",
-    "--mod-colorwheel-min-width",
+    "--mod-colorwheel-min-inline-size",
     "--mod-colorwheel-path",
-    "--mod-colorwheel-path-borders",
-    "--mod-colorwheel-track-width",
-    "--mod-colorwheel-width"
+    "--mod-colorwheel-track-width"
   ],
   "component": [
+    "--spectrum-color-wheel-border-opacity",
     "--spectrum-color-wheel-color-area-margin",
     "--spectrum-color-wheel-minimum-width",
     "--spectrum-color-wheel-width",
     "--spectrum-colorwheel-border-color",
+    "--spectrum-colorwheel-border-color-rgb",
+    "--spectrum-colorwheel-border-opacity",
     "--spectrum-colorwheel-border-width",
     "--spectrum-colorwheel-colorarea-container-size",
+    "--spectrum-colorwheel-colorarea-margin",
     "--spectrum-colorwheel-fill-color-disabled",
     "--spectrum-colorwheel-height",
+    "--spectrum-colorwheel-min-inline-size",
     "--spectrum-colorwheel-path",
-    "--spectrum-colorwheel-path-borders",
     "--spectrum-colorwheel-track-width",
     "--spectrum-colorwheel-width"
   ],
   "global": [
     "--spectrum-border-width-100",
     "--spectrum-color-control-track-width",
     "--spectrum-disabled-background-color",
-    "--spectrum-transparent-black-300"
+    "--spectrum-gray-1000-rgb"
   ],
   "passthroughs": [],
   "high-contrast": [

diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * Copyright 2025 Adobe. All rights reserved.
  *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
@@ -11,46 +11,64 @@
  * governing permissions and limitations under the License.
  */
 
-/* Windows High Contrast Mode */
-@media (forced-colors: active) {
-	.spectrum-ColorWheel {
-		--highcontrast-colorwheel-border-color-disabled: GrayText;
-		--highcontrast-colorwheel-fill-color-disabled: Canvas;
+.spectrum-ColorWheel {
+	--spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
+	--spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
 
-		forced-color-adjust: none;
-	}
-}
+	/* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */
+	--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);
 
-.spectrum-ColorWheel {
-	--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
+	--spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity);
+	--spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
+
+	--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
+	--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
+
+	--spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width);
 
-	--spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width));
-	--spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width));
-	--spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color));
-	--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
+	--spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
 
-	--spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100));
-	--spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width));
+	--spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
 
 	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
-	--_track-width: var(--spectrum-colorwheel-track-width);
+	--_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
 	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
-	--_border-width: var(--spectrum-colorwheel-border-width);
+	--_border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));
 
 	position: relative;
 	display: block;
-	min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width));
+	min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size));
 	inline-size: var(--spectrum-colorwheel-width);
 	block-size: var(--spectrum-colorwheel-height);
 	user-select: none;
 	cursor: default;
 
+	/* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the exterior edge of the colorwheel. The size is reduced and positioning adjusted to create the border effect. */
+	&::before {
+		inline-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
+		block-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
+		inset-block-start: var(--spectrum-colorwheel-border-width);
+		inset-inline-start: var(--spectrum-colorwheel-border-width);
+		content: "";
+		position: absolute;
+		border-width: var(--spectrum-colorwheel-border-width);
+		border-style: solid;
+		border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
+		border-radius: 100%;
+		z-index: 1;
+	}
+
 	&.is-focused {
 		z-index: 2;
 	}
 
 	&.is-disabled {
 		pointer-events: none;
+
+		&::before,
+		.spectrum-ColorWheel-inner::before {
+			border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent);
+		}
 	}
 
 	&.is-dragged {
@@ -69,6 +87,21 @@
 	inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
 	block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
 	margin: auto;
+
+	/* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the interior edge of the colorwheel. The size is increased and positioning adjusted to create the border effect. */
+	&::before {
+		inline-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width)));
+		block-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width)));
+		inset-block-start: calc(-2 * var(--spectrum-colorwheel-border-width));
+		inset-inline-start: calc(-2 * var(--spectrum-colorwheel-border-width));
+		content: "";
+		position: absolute;
+		border-width: var(--spectrum-colorwheel-border-width);
+		border-style: solid;
+		border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
+		border-radius: 100%;
+		z-index: 1;
+	}
 }
 
 .spectrum-ColorWheel-colorarea-container {
@@ -77,7 +110,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin));
+	margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin));
 }
 
 .spectrum-ColorWheel-slider {
@@ -93,7 +126,7 @@
 }
 
 .spectrum-ColorWheel-handle {
-	transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0);
+	transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) / 2), 0);
 	inset-block-start: 50%;
 	inset-inline: 50%;
 }
@@ -107,19 +140,6 @@
 	}
 }
 
-/* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */
-.spectrum-ColorWheel-border {
-	position: relative;
-	background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
-	inline-size: var(--spectrum-colorwheel-width);
-	block-size: var(--spectrum-colorwheel-height);
-	clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders)));
-
-	&.is-disabled {
-		background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
-	}
-}
-
 .spectrum-ColorWheel-wheel {
 	position: absolute;
 	background: conic-gradient(from 90deg, red, 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), red);
@@ -129,6 +149,16 @@
 
 	&.is-disabled {
 		pointer-events: none;
-		background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
+		background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
+	}
+}
+
+/* Windows High Contrast Mode */
+@media (forced-colors: active) {
+	.spectrum-ColorWheel {
+		--highcontrast-colorwheel-border-color-disabled: GrayText;
+		--highcontrast-colorwheel-fill-color-disabled: Canvas;
+
+		forced-color-adjust: none;
 	}
 }
diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js
@@ -23,7 +23,16 @@ export default {
 			if: { arg: "isDisabled", truthy: false },
 		},
 		isWithColorArea: {
-			name: "With Color Area",
+			name: "With color area",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		isWithColorLoupe: {
+			name: "With color loupe",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
@@ -44,6 +53,7 @@ export default {
 		isDisabled: false,
 		isFocused: false,
 		isWithColorArea: false,
+		isWithColorLoupe: true,
 		selectedColor: "rgba(255, 0, 0, 50%)",
 	},
 	parameters: {

diff --git a/components/colorwheel/stories/colorwheel.test.js b/components/colorwheel/stories/colorwheel.test.js
@@ -11,6 +11,10 @@ export const ColorWheelGroup = Variants({
 			testHeading: "With color area",
 			isWithColorArea: true,
 		},
+		{
+			testHeading: "Without color loupe",
+			isWithColorLoupe: false,
+		},
 	],
 	stateData: [
 		{

diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js
@@ -12,6 +12,7 @@ export const Template = ({
 	isDisabled = false,
 	isFocused = false,
 	isWithColorArea = false,
+	isWithColorLoupe = true,
 	colorHandleStyle = {},
 	selectedColor = "rgba(255, 0, 0, 50%)",
 } = {}, context = {}) => {
@@ -37,20 +38,16 @@ export const Template = ({
 				</div>
 			</div>
 			<div class=${classMap({
-				[`${rootClass}-border`]: true,
+				[`${rootClass}-wheel`]: true,
 				"is-disabled": isDisabled,
-			})}>
-				<div class=${classMap({
-					[`${rootClass}-wheel`]: true,
-					"is-disabled": isDisabled,
-				})}></div>
-			</div>
+			})}></div>
 			${ColorHandle({
 				isDisabled,
 				isFocused,
 				customClasses: [`${rootClass}-handle`],
 				selectedColor,
 				customStyles: colorHandleStyle,
+				isWithColorLoupe,
 			}, context)}
 			<input type="range" class="${rootClass}-slider" aria-label="hue" min="0" max="360" step="">
 		</div>