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

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/asset": major
 "@spectrum-css/well": major
 ---
 

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({});