feat(icon): 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/icon": 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/alertbanner/dist/metadata.json

@@ -73,6 +73,7 @@
     "--spectrum-border-width-100",
     "--spectrum-cjk-line-height-100",
     "--spectrum-font-size-100",
+    "--spectrum-icon-size",
     "--spectrum-informative-background-color-default",
     "--spectrum-line-height-100",
     "--spectrum-negative-background-color-default",
@@ -87,8 +88,7 @@
   "passthroughs": [
     "--mod-closebutton-align-self",
     "--mod-closebutton-margin-inline",
-    "--mod-closebutton-margin-top",
-    "--mod-icon-size"
+    "--mod-closebutton-margin-top"
   ],
   "high-contrast": [
     "--highcontrast-alert-banner-border-color",

components/alertbanner/index.css

@@ -108,7 +108,7 @@
 
 .spectrum-AlertBanner-icon {
 	/* @passthrough -- icon-size */
-	--mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
+	--spectrum-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
 
 	margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
 	margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));

components/datepicker/stories/template.js

@@ -90,7 +90,7 @@ export const DatePicker = ({
 				iconName: "Calendar",
 				iconSet: "workflow",
 				isQuiet,
-				customStyles: isReadOnly ? { "display": "none" } : { "--mod-icon-size": "var(--spectrum-workflow-icon-size-50)" },
+				customStyles: isReadOnly ? { "display": "none" } : {},
 				// @todo this is not added to the button on the website; need to make sure it's not a bug
 				// isOpen,
 				isInvalid,

components/icon/dist/metadata.json

@@ -4,13 +4,10 @@
     ".spectrum-Icon",
     ".spectrum-Icon img",
     ".spectrum-Icon svg",
-    ".spectrum-Icon--sizeL",
-    ".spectrum-Icon--sizeS",
-    ".spectrum-Icon--sizeXL",
-    ".spectrum-Icon--sizeXS",
-    ".spectrum-Icon--sizeXXL",
-    ".spectrum-Icon--sizeXXS",
-    ".spectrum-UIIcon",
+    ".spectrum-Icon:where(.spectrum-Icon--sizeL)",
+    ".spectrum-Icon:where(.spectrum-Icon--sizeS)",
+    ".spectrum-Icon:where(.spectrum-Icon--sizeXL)",
+    ".spectrum-Icon:where(.spectrum-Icon--sizeXS)",
     ".spectrum-UIIcon-Add100",
     ".spectrum-UIIcon-Add200",
     ".spectrum-UIIcon-Add300",
@@ -114,17 +111,8 @@
     ".spectrum-UIIcon-LinkOut400",
     ".spectrum-UIIcon-LinkOut75"
   ],
-  "modifiers": [
-    "--mod-icon-block-size",
-    "--mod-icon-color",
-    "--mod-icon-inline-size",
-    "--mod-icon-size"
-  ],
-  "component": [
-    "--spectrum-icon-block-size",
-    "--spectrum-icon-inline-size",
-    "--spectrum-icon-size"
-  ],
+  "modifiers": [],
+  "component": ["--spectrum-icon-size"],
   "global": [
     "--spectrum-add-icon-size-100",
     "--spectrum-add-icon-size-200",
@@ -190,9 +178,7 @@
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",
     "--spectrum-workflow-icon-size-50",
-    "--spectrum-workflow-icon-size-75",
-    "--spectrum-workflow-icon-size-xxl",
-    "--spectrum-workflow-icon-size-xxs"
+    "--spectrum-workflow-icon-size-75"
   ],
   "passthroughs": [],
   "high-contrast": []