feat(colorwheel): s2 migration

adobe · Jan 22, 2025 · 83ad0bd · 83ad0bd
1 parent e3585cd
commit 83ad0bd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/.changeset/giant-windows-smoke.md b/.changeset/giant-windows-smoke.md
@@ -0,0 +1,7 @@
+---
+"@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.
diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json
@@ -19,26 +19,27 @@
   ],
   "modifiers": [
     "--mod-colorwheel-border-color",
-    "--mod-colorwheel-border-width",
     "--mod-colorwheel-colorarea-container-size",
     "--mod-colorwheel-colorarea-margin",
     "--mod-colorwheel-fill-color-disabled",
-    "--mod-colorwheel-height",
     "--mod-colorwheel-min-width",
     "--mod-colorwheel-path",
     "--mod-colorwheel-path-borders",
-    "--mod-colorwheel-track-width",
-    "--mod-colorwheel-width"
+    "--mod-colorwheel-track-width"
   ],
   "component": [
     "--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-width",
     "--spectrum-colorwheel-path",
     "--spectrum-colorwheel-path-borders",
     "--spectrum-colorwheel-track-width",
@@ -48,7 +49,7 @@
     "--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
@@ -11,33 +11,33 @@
  * 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-min-width: var(--spectrum-color-wheel-minimum-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);
+
+	/* @TODO: using explicit value as `color-wheel-border-opacity` is undefined. */
+	--spectrum-colorwheel-border-opacity: 0.1;
+	--spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
 
-.spectrum-ColorWheel {
-	--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-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100));
+	--spectrum-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-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
+
 	/* 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);
 	/* 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);
 
 	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-width, var(--spectrum-colorwheel-min-width));
 	inline-size: var(--spectrum-colorwheel-width);
 	block-size: var(--spectrum-colorwheel-height);
 	user-select: none;
@@ -75,7 +75,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 {
@@ -130,3 +130,13 @@
 		background: var(--highcontrast-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;
+	}
+}