feat(asset): remove modifiers from the API [SWC-1264] (#4257)

Author: castastrophe

.changeset/big-glasses-check.md

@@ -2,7 +2,6 @@
 "@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.

.changeset/weak-colts-divide.md

@@ -0,0 +1,13 @@
+---
+"@spectrum-css/asset": major
+"@spectrum-css/assetcard": major
+"@spectrum-css/well": major
+---
+
+This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.
+
+- Remove all `--mod-*` custom property hooks.
+- Keep existing class selectors and variants unchanged.
+- Update stories to reflect the removal of the `--mod-*` override layer.
+
+Breaking change: the `--mod-*` override layer is removed. Consumers should set `--spectrum-*` variables directly where customization is needed.

components/asset/dist/metadata.json

@@ -10,26 +10,13 @@
     ".spectrum-Asset-folderOutline",
     ".spectrum-Asset-image"
   ],
-  "modifiers": [
-    "--mod-asset-file-background-color",
-    "--mod-asset-folder-background-color",
-    "--mod-asset-icon-margin",
-    "--mod-asset-icon-max-width",
-    "--mod-asset-icon-min-width",
-    "--mod-asset-icon-outline-color"
-  ],
-  "component": [
-    "--spectrum-asset-file-background",
-    "--spectrum-asset-file-outline",
-    "--spectrum-asset-folder-background",
-    "--spectrum-asset-folder-outline"
-  ],
+  "modifiers": [],
+  "component": [],
   "global": [
-    "--spectrum-animation-duration-100",
     "--spectrum-gray-200",
     "--spectrum-gray-25",
     "--spectrum-gray-500"
   ],
   "passthroughs": [],
-  "high-contrast": ["--highcontrast-asset-icon-background-color"]
+  "high-contrast": []
 }

components/asset/index.css

@@ -12,11 +12,6 @@
  */
 
 .spectrum-Asset {
-	--spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200)));
-	--spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25)));
-	--spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500));
-	--spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500));
-
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -29,34 +24,27 @@
 	max-inline-size: 100%;
 	max-block-size: 100%;
 	object-fit: contain;
-	transition: opacity var(--spectrum-animation-duration-100);
 }
 
 .spectrum-Asset-folder,
 .spectrum-Asset-file {
-	inline-size: clamp(var(--mod-asset-icon-min-width, 48px), 100%, var(--mod-asset-icon-max-width, 80px));
+	inline-size: clamp(48px, 100%, 80px);
 	block-size: 100%;
-	margin: var(--mod-asset-icon-margin, 20px);
+	margin: 20px;
 }
 
 .spectrum-Asset-folderBackground {
-	fill: var(--spectrum-asset-folder-background);
+	fill: var(--spectrum-gray-200);
 }
 
 .spectrum-Asset-fileBackground {
-	fill: var(--spectrum-asset-file-background);
+	fill: var(--spectrum-gray-25);
 }
 
 .spectrum-Asset-folderOutline {
-	fill: var(--spectrum-asset-folder-outline);
+	fill: var(--spectrum-gray-500);
 }
 
 .spectrum-Asset-fileOutline {
-	fill: var(--spectrum-asset-file-outline);
-}
-
-@media (forced-colors: active) {
-	.spectrum-Asset {
-		--highcontrast-asset-icon-background-color: currentColor;
-	}
+	fill: var(--spectrum-gray-500);
 }

components/asset/stories/asset.stories.js

@@ -39,10 +39,10 @@ export default {
 		packageJson,
 		metadata,
 		status: {
-			type: "unmigrated",
+			type: "migrated",
 		},
 	},
-	tags: ["unmigrated"],
+	tags: ["migrated"],
 };
 
 export const Default = AssetGroup.bind({});

components/assetcard/dist/metadata.json

@@ -2,13 +2,15 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-AssetCard",
+    ".spectrum-AssetCard .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard .spectrum-AssetCard-selectionOrder",
+    ".spectrum-AssetCard .spectrum-Checkbox-box:before",
     ".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-selectionOrder",
     ".spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--checkboxSelection:focus-visible .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--checkboxSelection:hover .spectrum-AssetCard-selectionIndicator",
-    ".spectrum-AssetCard--highlightSelection.is-selected .spectrum-AssetCard-asset",
+    ".spectrum-AssetCard--highlightSelection:where(.is-selected) .spectrum-AssetCard-asset",
     ".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-checkbox",
     ".spectrum-AssetCard--orderedSelection.is-selected .spectrum-AssetCard-selectionIndicator",
@@ -23,166 +25,77 @@
     ".spectrum-AssetCard-selectionOrder",
     ".spectrum-AssetCard-selectionOverlay",
     ".spectrum-AssetCard-title",
-    ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after",
+    ".spectrum-AssetCard.is-drop-target",
     ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay",
-    ".spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after",
+    ".spectrum-AssetCard.is-drop-target:active",
+    ".spectrum-AssetCard.is-drop-target:hover",
+    ".spectrum-AssetCard.is-selected",
     ".spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay",
-    ".spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before",
-    ".spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after",
+    ".spectrum-AssetCard.is-selected:active",
+    ".spectrum-AssetCard.is-selected:hover",
+    ".spectrum-AssetCard:active",
+    ".spectrum-AssetCard:focus-visible",
     ".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:before",
-    ".spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before",
-    ".spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard:hover .spectrum-Checkbox-box:before",
+    ".spectrum-AssetCard:hover",
     ".spectrum-AssetCard:lang(ja)",
     ".spectrum-AssetCard:lang(ko)",
-    ".spectrum-AssetCard:lang(zh)"
-  ],
-  "modifiers": [
-    "--mod-assectcard-border-color-selected-down",
-    "--mod-assectcard-focus-indicator-color",
-    "--mod-assetcard-asset-animation-duration",
-    "--mod-assetcard-asset-container-border-size",
-    "--mod-assetcard-asset-size",
-    "--mod-assetcard-background-color",
-    "--mod-assetcard-border-color",
-    "--mod-assetcard-border-color-down",
-    "--mod-assetcard-border-color-hover",
-    "--mod-assetcard-border-color-selected",
-    "--mod-assetcard-border-color-selected-hover",
-    "--mod-assetcard-border-radius",
-    "--mod-assetcard-content-font-family",
-    "--mod-assetcard-content-font-size",
-    "--mod-assetcard-content-font-style",
-    "--mod-assetcard-content-font-weight",
-    "--mod-assetcard-content-letter-spacing",
-    "--mod-assetcard-content-line-height",
-    "--mod-assetcard-content-margin-block-start",
-    "--mod-assetcard-content-text-color",
-    "--mod-assetcard-focus-indicator-thickness",
-    "--mod-assetcard-focus-ring-border-radius",
-    "--mod-assetcard-focus-ring-gap",
-    "--mod-assetcard-header-content-font-family",
-    "--mod-assetcard-header-content-font-size",
-    "--mod-assetcard-header-content-font-stlye",
-    "--mod-assetcard-header-content-font-weight",
-    "--mod-assetcard-header-content-letter-spacing",
-    "--mod-assetcard-header-content-line-height",
-    "--mod-assetcard-header-content-text-color",
-    "--mod-assetcard-header-margin-block-start",
-    "--mod-assetcard-overlay-background-color",
-    "--mod-assetcard-selectionindicator-background-color-default",
-    "--mod-assetcard-selectionindicator-background-color-ordered",
-    "--mod-assetcard-selectionindicator-border-radius",
-    "--mod-assetcard-selectionindicator-color",
-    "--mod-assetcard-selectionindicator-font-size",
-    "--mod-assetcard-selectionindicator-font-weight",
-    "--mod-assetcard-selectionindicator-margin",
-    "--mod-assetcard-selectionindicator-size",
-    "--mod-assetcard-title-font-family",
-    "--mod-assetcard-title-font-size",
-    "--mod-assetcard-title-font-style",
-    "--mod-assetcard-title-font-weight",
-    "--mod-assetcard-title-letter-spacing",
-    "--mod-assetcard-title-line-height",
-    "--mod-assetcard-title-text-color"
+    ".spectrum-AssetCard:lang(zh)",
+    ".spectrum-AssetCard:where(.spectrum-AssetCard--orderedSelection) .spectrum-AssetCard-selectionIndicator"
   ],
+  "modifiers": [],
   "component": [
-    "--spectrum-assetcard-asset-animation-duration",
-    "--spectrum-assetcard-asset-container-border-size",
     "--spectrum-assetcard-asset-size",
-    "--spectrum-assetcard-background-color",
     "--spectrum-assetcard-border-color",
-    "--spectrum-assetcard-border-color-down",
-    "--spectrum-assetcard-border-color-hover",
     "--spectrum-assetcard-border-color-selected",
     "--spectrum-assetcard-border-color-selected-down",
     "--spectrum-assetcard-border-color-selected-hover",
-    "--spectrum-assetcard-border-radius",
-    "--spectrum-assetcard-content-font-family",
-    "--spectrum-assetcard-content-font-size",
-    "--spectrum-assetcard-content-font-style",
-    "--spectrum-assetcard-content-font-weight",
-    "--spectrum-assetcard-content-letter-spacing",
-    "--spectrum-assetcard-content-line-height",
-    "--spectrum-assetcard-content-margin-block-start",
-    "--spectrum-assetcard-content-text-color",
-    "--spectrum-assetcard-focus-indicator-thickness",
     "--spectrum-assetcard-focus-ring-border-radius",
-    "--spectrum-assetcard-focus-ring-gap",
-    "--spectrum-assetcard-header-content-font-family",
     "--spectrum-assetcard-header-content-font-size",
-    "--spectrum-assetcard-header-content-font-style",
-    "--spectrum-assetcard-header-content-font-weight",
-    "--spectrum-assetcard-header-content-letter-spacing",
-    "--spectrum-assetcard-header-content-line-height",
-    "--spectrum-assetcard-header-content-text-color",
-    "--spectrum-assetcard-header-margin-block-start",
-    "--spectrum-assetcard-overlay-background-color",
-    "--spectrum-assetcard-selectionindicator-background-color-default",
     "--spectrum-assetcard-selectionindicator-background-color-ordered",
-    "--spectrum-assetcard-selectionindicator-blur",
-    "--spectrum-assetcard-selectionindicator-border-radius",
-    "--spectrum-assetcard-selectionindicator-box-shadow-color",
-    "--spectrum-assetcard-selectionindicator-color",
-    "--spectrum-assetcard-selectionindicator-font-size",
-    "--spectrum-assetcard-selectionindicator-font-weight",
     "--spectrum-assetcard-selectionindicator-margin",
-    "--spectrum-assetcard-selectionindicator-offset-y",
-    "--spectrum-assetcard-selectionindicator-size",
-    "--spectrum-assetcard-title-font-family",
-    "--spectrum-assetcard-title-font-size",
-    "--spectrum-assetcard-title-font-style",
-    "--spectrum-assetcard-title-font-weight",
-    "--spectrum-assetcard-title-letter-spacing",
-    "--spectrum-assetcard-title-line-height",
-    "--spectrum-assetcard-title-text-color"
+    "--spectrum-assetcard-title-font-size"
   ],
   "global": [
     "--spectrum-animation-duration-100",
     "--spectrum-assestcard-focus-indicator-color",
+    "--spectrum-blue-1000",
+    "--spectrum-blue-900",
     "--spectrum-body-cjk-font-style",
     "--spectrum-body-cjk-font-weight",
     "--spectrum-body-cjk-line-height",
+    "--spectrum-body-line-height",
     "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-bold-font-weight",
+    "--spectrum-border-width-100",
     "--spectrum-card-selection-background-size",
     "--spectrum-cjk-font-family-stack",
     "--spectrum-cjk-letter-spacing",
     "--spectrum-corner-radius-100",
     "--spectrum-default-font-style",
+    "--spectrum-drop-shadow-blur",
+    "--spectrum-drop-shadow-color-200",
+    "--spectrum-drop-shadow-y-200",
+    "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-400",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
     "--spectrum-gray-75",
-    "--spectrum-gray-75-rgb",
     "--spectrum-gray-900",
-    "--spectrum-heading-cjk-font-style",
     "--spectrum-heading-cjk-font-weight",
     "--spectrum-heading-cjk-line-height",
     "--spectrum-heading-cjk-size-xs",
+    "--spectrum-heading-line-height",
     "--spectrum-heading-sans-serif-font-weight",
-    "--spectrum-line-height-100",
-    "--spectrum-line-height-200",
+    "--spectrum-heading-size-s",
+    "--spectrum-heading-size-xs",
+    "--spectrum-heading-size-xxs",
     "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-300",
     "--spectrum-spacing-75",
-    "--spectrum-transparent-black-300",
+    "--spectrum-stack-item-selected-background-color-emphasized",
+    "--spectrum-transparent-black-25",
     "--spectrum-white"
   ],
   "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-assectcard-border-color-selected-down",
-    "--highcontrast-assetcard-border-color-hover",
-    "--highcontrast-assetcard-border-color-selected",
-    "--highcontrast-assetcard-border-color-selected-hover",
-    "--highcontrast-assetcard-selectionindicator-background-color-ordered",
-    "--highcontrast-assetcard-selectionindicator-color"
-  ]
+  "high-contrast": []
 }