feat(divider): remove modifiers from the API [SWC-1264] (#4285)

Author: castastrophe

.changeset/weak-colts-divide.md

@@ -6,9 +6,10 @@
 "@spectrum-css/avatar": major
 "@spectrum-css/badge": major
 "@spectrum-css/breadcrumb": major
+"@spectrum-css/divider": 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/combobox/dist/metadata.json

@@ -7,6 +7,7 @@
     ".spectrum-Combobox .spectrum-Combobox-content",
     ".spectrum-Combobox .spectrum-Combobox-label",
     ".spectrum-Combobox .spectrum-Combobox-popover",
+    ".spectrum-Combobox .spectrum-Divider",
     ".spectrum-Combobox--sideLabel .spectrum-Combobox-content",
     ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext",
     ".spectrum-Combobox--sideLabel .spectrum-Combobox-label",
@@ -230,6 +231,7 @@
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-divider-horizontal-minimum-width",
     "--spectrum-field-label-to-component",
     "--spectrum-field-top-to-progress-circle-extra-large",
     "--spectrum-field-top-to-progress-circle-large",
@@ -271,7 +273,6 @@
     "--spectrum-workflow-icon-size-75"
   ],
   "passthroughs": [
-    "--mod-divider-inline-minimum-size",
     "--mod-picker-button-background-color",
     "--mod-picker-button-background-color-disabled",
     "--mod-picker-button-border-color",

components/combobox/index.css

@@ -120,10 +120,6 @@
 	--spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color);
 	--spectrum-combobox-readonly-border-color-disabled: var(--spectrum-disabled-border-color);
 	--spectrum-combobox-readonly-input-border-color: var(--spectrum-combobox-border-color-default);
-
-	/* @passthroughs start -- settings for nested divider component */
-	--mod-divider-inline-minimum-size: auto;
-	/* @passthroughs end -- settings for nested divider component */
 }
 
 .spectrum-Combobox--sizeS {
@@ -189,6 +185,11 @@
 		--mod-popover-animation-distance: var(--mod-combobox-popover-animation-distance);
 	}
 
+	.spectrum-Divider {
+		/* @passthroughs -- width for nested divider component */
+		--spectrum-divider-horizontal-minimum-width: auto;
+	}
+
 	&.is-readOnly {
 		.spectrum-Combobox-textfield {
 			&.is-keyboardFocused .spectrum-Combobox-input {

components/divider/dist/metadata.json

@@ -2,29 +2,19 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Divider",
-    ".spectrum-Divider--sizeL",
-    ".spectrum-Divider--sizeS",
     ".spectrum-Divider--staticBlack",
-    ".spectrum-Divider--staticBlack.spectrum-Divider--sizeL",
+    ".spectrum-Divider--staticBlack:where(.spectrum-Divider--sizeL)",
     ".spectrum-Divider--staticWhite",
-    ".spectrum-Divider--staticWhite.spectrum-Divider--sizeL",
-    ".spectrum-Divider--vertical",
-    ".spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)"
-  ],
-  "modifiers": [
-    "--mod-divider-background-color",
-    "--mod-divider-block-minimum-size",
-    "--mod-divider-inline-minimum-size",
-    "--mod-divider-thickness",
-    "--mod-divider-vertical-align",
-    "--mod-divider-vertical-height",
-    "--mod-divider-vertical-margin"
+    ".spectrum-Divider--staticWhite:where(.spectrum-Divider--sizeL)",
+    ".spectrum-Divider:where(.spectrum-Divider--sizeL)",
+    ".spectrum-Divider:where(.spectrum-Divider--sizeS)",
+    ".spectrum-Divider:where(.spectrum-Divider--vertical)",
+    ".spectrum-Divider:where(:not(.spectrum-Divider--vertical))"
   ],
+  "modifiers": [],
   "component": [
     "--spectrum-divider-background-color",
-    "--spectrum-divider-block-minimum-size",
     "--spectrum-divider-horizontal-minimum-width",
-    "--spectrum-divider-inline-minimum-size",
     "--spectrum-divider-thickness",
     "--spectrum-divider-thickness-large",
     "--spectrum-divider-thickness-medium",
@@ -40,5 +30,5 @@
     "--spectrum-transparent-white-800"
   ],
   "passthroughs": [],
-  "high-contrast": ["--highcontrast-divider-background-color"]
+  "high-contrast": []
 }

components/divider/index.css

@@ -13,27 +13,23 @@
 
 .spectrum-Divider {
 	--spectrum-divider-background-color: var(--spectrum-gray-200);
-
 	--spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
 
-	--spectrum-divider-inline-minimum-size: var(--spectrum-divider-horizontal-minimum-width);
-	--spectrum-divider-block-minimum-size: var(--spectrum-divider-vertical-minimum-height);
-}
-
-.spectrum-Divider--sizeS {
-	--spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
-}
+	&:where(.spectrum-Divider--sizeS) {
+		--spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
+	}
 
-.spectrum-Divider--sizeL {
-	--spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
-	--spectrum-divider-background-color: var(--spectrum-gray-800);
+	&:where(.spectrum-Divider--sizeL) {
+		--spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
+		--spectrum-divider-background-color: var(--spectrum-gray-800);
+	}
 }
 
 /* static white variant colors */
 .spectrum-Divider--staticWhite {
 	--spectrum-divider-background-color: var(--spectrum-transparent-white-200);
 
-	&.spectrum-Divider--sizeL {
+	&:where(.spectrum-Divider--sizeL) {
 		--spectrum-divider-background-color: var(--spectrum-transparent-white-800);
 	}
 }
@@ -42,41 +38,37 @@
 .spectrum-Divider--staticBlack {
 	--spectrum-divider-background-color: var(--spectrum-transparent-black-200);
 
-	&.spectrum-Divider--sizeL {
+	&:where(.spectrum-Divider--sizeL) {
 		--spectrum-divider-background-color: var(--spectrum-transparent-black-800);
 	}
 }
 
 .spectrum-Divider {
-	block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
+	block-size: var(--spectrum-divider-thickness);
 	inline-size: 100%;
 
 	/* Show the overflow for hr in Edge and IE. */
 	overflow: visible;
 
 	border: none;
-	border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
-	border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
+	border-width: var(--spectrum-divider-thickness);
+	border-radius: var(--spectrum-divider-thickness);
 
-	background-color: var(--highcontrast-divider-background-color, var(--mod-divider-background-color, var(--spectrum-divider-background-color)));
+	background-color: var(--spectrum-divider-background-color);
 
-	&:not(&.spectrum-Divider--vertical) {
-		min-inline-size: var(--mod-divider-inline-minimum-size, var(--spectrum-divider-inline-minimum-size));
+	@media (forced-colors: active) {
+		background-color: CanvasText;
 	}
-}
 
-/* vertical dividers */
-.spectrum-Divider--vertical {
-	inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
-	min-block-size: var(--mod-divider-block-minimum-size, var(--spectrum-divider-block-minimum-size));
-	margin-block: var(--mod-divider-vertical-margin, 0);
-	block-size: var(--mod-divider-vertical-height, 100%);
-	align-self: var(--mod-divider-vertical-align, flex-start);
-}
+	&:where(:not(.spectrum-Divider--vertical)) {
+		min-inline-size: var(--spectrum-divider-horizontal-minimum-width);
+	}
 
-/* windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-Divider {
-		--highcontrast-divider-background-color: CanvasText;
+	/* vertical dividers */
+	&:where(.spectrum-Divider--vertical) {
+		inline-size: var(--spectrum-divider-thickness);
+		min-block-size: var(--spectrum-divider-vertical-minimum-height);
+		margin-block: 0;
+		align-self: flex-start;
 	}
 }