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

@@ -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": []
 }