feat(well): remove modifiers from the API [SWC-1264] (#4256)

Author: castastrophe

.changeset/big-glasses-check.md

@@ -2,6 +2,7 @@
 "@spectrum-css/accordion": major
 "@spectrum-css/actionbar": major
 "@spectrum-css/actiongroup": major
+"@spectrum-css/well": major
 ---
 
 This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.

components/well/dist/metadata.json

@@ -1,31 +1,18 @@
 {
   "sourceFile": "index.css",
   "selectors": [".spectrum-Well"],
-  "modifiers": [
-    "--mod-well-background-color",
-    "--mod-well-border-color",
-    "--mod-well-border-radius",
-    "--mod-well-border-width",
-    "--mod-well-content-color",
-    "--mod-well-margin-top",
-    "--mod-well-min-width",
-    "--mod-well-padding"
-  ],
+  "modifiers": [],
   "component": [
-    "--spectrum-well-background-color",
-    "--spectrum-well-border-color",
     "--spectrum-well-border-radius",
-    "--spectrum-well-border-width",
-    "--spectrum-well-content-color",
     "--spectrum-well-margin-top",
     "--spectrum-well-min-width",
     "--spectrum-well-padding"
   ],
   "global": [
     "--spectrum-body-color",
     "--spectrum-border-width-100",
-    "--spectrum-gray-1000-rgb",
-    "--spectrum-gray-800-rgb"
+    "--spectrum-gray-1000",
+    "--spectrum-gray-800"
   ],
   "passthroughs": [],
   "high-contrast": []

components/well/index.css

@@ -12,21 +12,15 @@
  */
 
 .spectrum-Well {
-	--spectrum-well-border-color: rgb(var(--spectrum-gray-1000-rgb), 0.05);
-
-	--spectrum-well-border-width: var(--spectrum-border-width-100);
-	--spectrum-well-content-color: var(--spectrum-body-color);
-	--spectrum-well-background-color: rgb(var(--spectrum-gray-800-rgb), 0.02);
-
 	text-align: start;
 	display: block;
-	min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width));
-	padding: var(--mod-well-padding, var(--spectrum-well-padding));
-	margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top));
-	border-width: var(--mod-well-border-width, var(--spectrum-well-border-width));
+	min-inline-size: var(--spectrum-well-min-width);
+	padding: var(--spectrum-well-padding);
+	margin-block-start: var(--spectrum-well-margin-top);
+	border-width: var(--spectrum-border-width-100);
 	border-style: solid;
-	border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius));
-	background-color: var(--mod-well-background-color, var(--spectrum-well-background-color));
-	border-color: var(--mod-well-border-color, var(--spectrum-well-border-color));
-	color: var(--mod-well-content-color, var(--spectrum-well-content-color));
+	border-radius: var(--spectrum-well-border-radius);
+	background-color: color-mix(in sRGB, var(--spectrum-gray-800) 2%, transparent);
+	border-color: color-mix(in sRGB, var(--spectrum-gray-1000) 5%, transparent);
+	color: var(--spectrum-body-color);
 }