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

Author: castastrophe

.changeset/weak-colts-divide.md

@@ -5,9 +5,10 @@
 "@spectrum-css/assetlist": major
 "@spectrum-css/avatar": major
 "@spectrum-css/badge": major
+"@spectrum-css/colorarea": major
 "@spectrum-css/miller": major
-"@spectrum-css/well": major
 "@spectrum-css/page": major
+"@spectrum-css/well": major
 ---
 
 This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling. In addition, this update cleans up any component-level custom properties that did not rely on the CSS cascade to define the styles; this was done to reduce the number of custom properties that are defined at the component level and trim down the size of the CSS we are shipping to consumers.

components/colorarea/dist/metadata.json

@@ -11,42 +11,17 @@
     ".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"
-  ],
+  "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,14 +72,8 @@
 
 /* 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,

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/colorwheel/index.css

@@ -160,7 +160,5 @@
 	.spectrum-ColorWheel {
 		--highcontrast-colorwheel-border-color-disabled: GrayText;
 		--highcontrast-colorwheel-fill-color-disabled: Canvas;
-
-		forced-color-adjust: none;
 	}
 }

components/colorwheel/stories/colorwheel.stories.js

@@ -110,7 +110,7 @@ Disabled.parameters = {
 /**
  * The color wheel is often used together with the [color area component](/docs/components-color-area--docs) for color selection. When placing the color area inside the color wheel, make sure to leave enough of a margin between the two components to ensure there’s enough space for the both handles.
  *
- * To display a color area inside of the color wheel, add a color area component to `.spectrum-ColorWheel-colorarea-container` element and define the custom width and height styles with `--mod-colorarea-width` and `--mod-colorarea-height` variables.
+ * To display a color area inside of the color wheel, add a color area component to `.spectrum-ColorWheel-colorarea-container` element and define the custom width and height styles with `--spectrum-color-area-width` and `--spectrum-color-area-height` variables.
  *
  * The `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the color area within the color wheel using `.spectrum-color-wheel-color-area-margin`. Implementations using JS can calculate the container size with `Math.sqrt(2 * R * R)`, where `R` is the inner radius as calculated for the clip paths.
  *

components/colorwheel/stories/template.js

@@ -34,8 +34,8 @@ export const Template = ({
 					${ColorArea({
 						isDisabled,
 						customStyles: {
-							"--mod-colorarea-width": "80px",
-							"--mod-colorarea-height": "80px",
+							"--spectrum-color-area-width": "80px",
+							"--spectrum-color-area-height": "80px",
 						},
 						selectedColor,
 					}, context)}