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

Author: castastrophe

.changeset/weak-colts-divide.md

@@ -7,6 +7,7 @@
 "@spectrum-css/badge": major
 "@spectrum-css/breadcrumb": major
 "@spectrum-css/divider": major
+"@spectrum-css/icon": major
 "@spectrum-css/miller": major
 "@spectrum-css/page": major
 "@spectrum-css/well": major

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