feat(colorarea): remove modifiers from the API [SWC-1264]

.changeset/weak-colts-divide.md

@@ -6,6 +6,7 @@
 "@spectrum-css/avatar": major
 "@spectrum-css/badge": major
 "@spectrum-css/breadcrumb": major
+"@spectrum-css/colorarea": major
 "@spectrum-css/divider": major
 "@spectrum-css/miller": major
 "@spectrum-css/page": major

components/colorarea/dist/metadata.json

@@ -8,45 +8,19 @@
     ".spectrum-ColorArea-slider",
     ".spectrum-ColorArea.is-disabled",
     ".spectrum-ColorArea.is-disabled .spectrum-ColorArea-gradient",
-    ".spectrum-ColorArea.is-focused",
-    ".spectrum-ColorHandle-color"
-  ],
-  "modifiers": [
-    "--mod-colorarea-border-color",
-    "--mod-colorarea-border-radius",
-    "--mod-colorarea-border-width",
-    "--mod-colorarea-disabled-background-color",
-    "--mod-colorarea-height",
-    "--mod-colorarea-min-height",
-    "--mod-colorarea-min-width",
-    "--mod-colorarea-width"
+    ".spectrum-ColorArea.is-focused"
   ],
+  "modifiers": [],
   "component": [
     "--spectrum-color-area-border-opacity",
     "--spectrum-color-area-border-rounding",
     "--spectrum-color-area-border-width",
     "--spectrum-color-area-height",
     "--spectrum-color-area-minimum-height",
     "--spectrum-color-area-minimum-width",
-    "--spectrum-color-area-width",
-    "--spectrum-colorarea-border-color",
-    "--spectrum-colorarea-border-color-rgb",
-    "--spectrum-colorarea-border-radius",
-    "--spectrum-colorarea-border-width",
-    "--spectrum-colorarea-disabled-background-color",
-    "--spectrum-colorarea-height",
-    "--spectrum-colorarea-min-height",
-    "--spectrum-colorarea-min-width",
-    "--spectrum-colorarea-width"
-  ],
-  "global": [
-    "--spectrum-disabled-background-color",
-    "--spectrum-gray-1000-rgb"
+    "--spectrum-color-area-width"
   ],
+  "global": ["--spectrum-disabled-background-color", "--spectrum-gray-1000"],
   "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-colorarea-border-color",
-    "--highcontrast-colorarea-border-color-disabled",
-    "--highcontrast-colorarea-fill-color-disabled"
-  ]
+  "high-contrast": []
 }

components/colorarea/index.css

@@ -12,28 +12,16 @@
  */
 
 .spectrum-ColorArea {
-	--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
-
-	/* @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-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb);
-	--spectrum-colorarea-border-color: rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity));
-	--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
-	--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
-	--spectrum-colorarea-height: var(--spectrum-color-area-height);
-	--spectrum-colorarea-width: var(--spectrum-color-area-width);
-	--spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
-	--spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
-
 	position: relative;
 	display: inline-block;
 	cursor: default;
-	min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width));
-	min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height));
-	inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width));
-	block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height));
+	min-inline-size: var(--spectrum-color-area-minimum-width);
+	min-block-size: var(--spectrum-color-area-minimum-height);
+	inline-size: var(--spectrum-color-area-width);
+	block-size: var(--spectrum-color-area-height);
 	box-sizing: border-box;
-	border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
-	border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));
+	border-radius: var(--spectrum-color-area-border-rounding);
+	border: var(--spectrum-color-area-border-width) solid color-mix(in sRGB, var(--spectrum-gray-1000) calc(var(--spectrum-color-area-border-opacity) * 100%), transparent);
 
 	touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
 	user-select: none;
@@ -44,8 +32,8 @@
 
 	&.is-disabled {
 		pointer-events: none;
-		background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color)));
-		border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);
+		background: var(--spectrum-disabled-background-color);
+		border-color: transparent;
 
 		.spectrum-ColorArea-gradient {
 			display: none;
@@ -54,7 +42,7 @@
 }
 
 .spectrum-ColorArea-handle {
-	transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0);
+	transform: translate(calc(var(--spectrum-color-area-width) - var(--spectrum-color-area-border-width)), 0);
 	inset-block-start: 0;
 
 	&:dir(rtl) {
@@ -67,7 +55,7 @@
 	block-size: 100%;
 
 	/* calc used here to properly calculate the `border-radius` for the gradient such that it aligns with the `border-radius` of the enclosing border */
-	border-radius: calc(var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)) - var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)));
+	border-radius: calc(var(--spectrum-color-area-border-rounding) - var(--spectrum-color-area-border-width));
 }
 
 .spectrum-ColorArea-slider {
@@ -84,18 +72,11 @@
 
 /* Windows High Contrast Mode */
 @media (forced-colors: active) {
-	.spectrum-ColorArea {
-		--highcontrast-colorarea-border-color-disabled: GrayText;
-		--highcontrast-colorarea-border-color: Canvas;
-		--highcontrast-colorarea-fill-color-disabled: Canvas;
-
-		&.is-disabled {
-			forced-color-adjust: none;
-		}
+	.spectrum-ColorArea.is-disabled {
+		background: Canvas;
 	}
 
-	.spectrum-ColorArea-gradient,
-	.spectrum-ColorHandle-color {
+	.spectrum-ColorArea-gradient {
 		forced-color-adjust: none;
 	}
 }

components/colorarea/stories/template.js

@@ -26,8 +26,8 @@ export const Template = ({
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap({
-				"--mod-colorarea-height": customHeight,
-				"--mod-colorarea-width": customWidth,
+				"--spectrum-color-area-height": customHeight,
+				"--spectrum-color-area-width": customWidth,
 				...customStyles,
 			})}
 			@focusin=${function() {
@@ -49,7 +49,7 @@ export const Template = ({
 				customClasses: [`${rootClass}-handle`],
 				customStyles: {
 					"--spectrum-picked-color": selectedColor,
-					"transform": customWidth ? "translate(var(--mod-colorarea-width), 0)" : undefined,
+					"transform": customWidth ? "translate(var(--spectrum-color-area-width), 0)" : undefined,
 				},
 			}, context)}
 			<input

components/colorhandle/dist/metadata.json

@@ -47,8 +47,5 @@
     "--spectrum-white"
   ],
   "passthroughs": ["--mod-opacity-checkerboard-position"],
-  "high-contrast": [
-    "--highcontrast-colorhandle-border-color-disabled",
-    "--highcontrast-colorhandle-fill-color-disabled"
-  ]
+  "high-contrast": []
 }

components/colorhandle/index.css

@@ -11,17 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-@media (forced-colors: active) {
-	.spectrum-ColorHandle {
-		forced-color-adjust: none;
-
-		&.is-disabled {
-			--highcontrast-colorhandle-border-color-disabled: GrayText;
-			--highcontrast-colorhandle-fill-color-disabled: Canvas;
-		}
-	}
-}
-
 .spectrum-ColorHandle {
 	/* outer border as box shadow on the colorhandle */
 	/* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
@@ -82,8 +71,8 @@
 
 	&.is-disabled {
 		pointer-events: none;
-		border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color)));
-		background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color)));
+		border-color: var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color));
+		background: var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color));
 		box-shadow: none;
 
 		.spectrum-ColorHandle-inner {
@@ -99,3 +88,14 @@
 	box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-color-handle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color));
 	background-color: var(--spectrum-picked-color);
 }
+
+@media (forced-colors: active) {
+	.spectrum-ColorHandle {
+		forced-color-adjust: none;
+
+		&.is-disabled {
+			border-color: GrayText;
+			background: Canvas;
+		}
+	}
+}

components/colorwheel/dist/metadata.json

@@ -19,31 +19,16 @@
     ".spectrum-ColorWheel:after",
     ".spectrum-ColorWheel:before"
   ],
-  "modifiers": [
-    "--mod-colorwheel-block-size",
-    "--mod-colorwheel-border-color",
-    "--mod-colorwheel-colorarea-container-size",
-    "--mod-colorwheel-fill-color-disabled",
-    "--mod-colorwheel-inline-size",
-    "--mod-colorwheel-min-inline-size",
-    "--mod-colorwheel-path",
-    "--mod-colorwheel-track-width"
-  ],
+  "modifiers": ["--mod-colorwheel-track-width"],
   "component": [
     "--spectrum-color-wheel-border-opacity",
     "--spectrum-color-wheel-minimum-width",
     "--spectrum-color-wheel-width",
-    "--spectrum-colorwheel-block-size",
     "--spectrum-colorwheel-border-color",
     "--spectrum-colorwheel-border-color-rgb",
     "--spectrum-colorwheel-border-opacity",
-    "--spectrum-colorwheel-border-width",
     "--spectrum-colorwheel-colorarea-container-size",
-    "--spectrum-colorwheel-fill-color-disabled",
-    "--spectrum-colorwheel-inline-size",
-    "--spectrum-colorwheel-min-inline-size",
-    "--spectrum-colorwheel-path",
-    "--spectrum-colorwheel-track-width"
+    "--spectrum-colorwheel-path"
   ],
   "global": [
     "--spectrum-border-width-100",
@@ -52,8 +37,5 @@
     "--spectrum-gray-1000-rgb"
   ],
   "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-colorwheel-border-color-disabled",
-    "--highcontrast-colorwheel-fill-color-disabled"
-  ]
+  "high-contrast": []
 }

components/colorwheel/index.css

@@ -12,31 +12,22 @@
  */
 
 .spectrum-ColorWheel {
-	--spectrum-colorwheel-inline-size: var(--spectrum-color-wheel-width);
-	--spectrum-colorwheel-block-size: var(--spectrum-color-wheel-width);
-	--spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width);
-
 	/* @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-border-opacity: var(--spectrum-color-wheel-border-opacity);
 	--spectrum-colorwheel-border-color: rgb(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-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(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
+	--_track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-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(--spectrum-border-width-100);
 
 	position: relative;
 	display: block;
-	min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size));
-	inline-size: var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size));
-	block-size: var(--mod-colorwheel-block-size, var(--spectrum-colorwheel-block-size));
+	min-inline-size: var(--spectrum-color-wheel-minimum-width);
+	inline-size: var(--spectrum-color-wheel-width);
+	block-size: var(--spectrum-color-wheel-width);
 	touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
 	user-select: none;
 	cursor: default;
@@ -47,14 +38,14 @@
 	 * (to account for the inset width of the exterior border) from the component's width.
 	 */
 	&::before {
-		inline-size: calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) - calc(4 * var(--spectrum-colorwheel-border-width)));
-		block-size: calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) - calc(4 * var(--spectrum-colorwheel-border-width)));
-		inset: var(--spectrum-colorwheel-border-width);
+		inline-size: calc(var(--spectrum-color-wheel-width) - calc(4 * var(--spectrum-border-width-100)));
+		block-size: calc(var(--spectrum-color-wheel-width) - calc(4 * var(--spectrum-border-width-100)));
+		inset: var(--spectrum-border-width-100);
 		content: "";
 		position: absolute;
-		border-width: var(--spectrum-colorwheel-border-width);
+		border-width: var(--spectrum-border-width-100);
 		border-style: solid;
-		border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
+		border-color: var(--spectrum-colorwheel-border-color);
 		border-radius: 100%;
 		z-index: 1;
 	}
@@ -65,12 +56,12 @@
 	 * track width (to account for the inset width of the interior border)
 	 */
 	&::after {
-		inset: calc(var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) - (calc(2 * var(--spectrum-colorwheel-border-width))));
+		inset: calc(var(--spectrum-color-control-track-width) - (calc(2 * var(--spectrum-border-width-100))));
 		content: "";
 		position: absolute;
-		border-width: var(--spectrum-colorwheel-border-width);
+		border-width: var(--spectrum-border-width-100);
 		border-style: solid;
-		border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
+		border-color: var(--spectrum-colorwheel-border-color);
 		border-radius: 100%;
 		z-index: 1;
 	}
@@ -85,7 +76,7 @@
 		&::before,
 		&::after,
 		.spectrum-ColorWheel-inner::before {
-			border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent);
+			border-color: transparent;
 		}
 	}
 
@@ -102,8 +93,8 @@
 	inset-inline-end: 0;
 	inset-block-start: 0;
 	inset-block-end: 0;
-	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));
+	inline-size: var(--spectrum-colorwheel-colorarea-container-size);
+	block-size: var(--spectrum-colorwheel-colorarea-container-size);
 	margin: auto;
 }
 
@@ -128,7 +119,7 @@
 }
 
 .spectrum-ColorWheel-handle {
-	transform: translate(calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) / 2 - var(--mod-colorwheel-track-width, var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width))) / 2), 0);
+	transform: translate(calc(var(--spectrum-color-wheel-width) / 2 - var(--spectrum-color-control-track-width) / 2), 0);
 	inset-block-start: 50%;
 	inset-inline: 50%;
 }
@@ -145,22 +136,23 @@
 .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);
-	inset-block: var(--spectrum-colorwheel-border-width);
-	inset-inline: var(--spectrum-colorwheel-border-width);
-	clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)));
+	inset-block: var(--spectrum-border-width-100);
+	inset-inline: var(--spectrum-border-width-100);
+	clip-path: path(evenodd, var(--spectrum-colorwheel-path));
 
 	&.is-disabled {
 		pointer-events: none;
-		background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
+		background: var(--spectrum-disabled-background-color);
 	}
 }
 
 /* Windows High Contrast Mode */
 @media (forced-colors: active) {
-	.spectrum-ColorWheel {
-		--highcontrast-colorwheel-border-color-disabled: GrayText;
-		--highcontrast-colorwheel-fill-color-disabled: Canvas;
-
+	.spectrum-ColorWheel-wheel {
 		forced-color-adjust: none;
+
+		&.is-disabled {
+			background: Canvas;
+		}
 	}
 }