refactor(asset)!: migrate to tokens package (#2553)

BREAKING CHANGE: migrates to use spectrum-tokens

* refactor(asset): migrate to tokens package
* chore: add mods values for customization
---------

Co-authored-by: Patrick Fulton <[email protected]>

Author: castastrophe

components/asset/gulpfile.js

@@ -1 +1 @@
-module.exports = require("@spectrum-css/component-builder");
+module.exports = require("@spectrum-css/component-builder-simple");

components/asset/index.css

@@ -11,45 +11,63 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-Asset {
-  inline-size: 100%;
-  block-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .spectrum-Asset-image {
   max-inline-size: 100%;
   max-block-size: 100%;
   object-fit: contain;
-  transition: opacity var(--spectrum-global-animation-duration-100);
+  transition: opacity var(--spectrum-animation-duration-100);
 }
 
 .spectrum-Asset-folder,
 .spectrum-Asset-file {
-  inline-size: 100%;
+  inline-size: clamp(
+    var(--mod-asset-icon-min-width, 48px),
+    100%,
+    var(--mod-asset-icon-max-width, 80px)
+  );
   block-size: 100%;
-  min-inline-size: var(--spectrum-asset-icon-min-width);
-  max-inline-size: var(--spectrum-asset-icon-max-width);
-  margin: var(--spectrum-asset-icon-margin);
+  margin: var(--mod-asset-icon-margin, 20px);
 }
 
 .spectrum-Asset-folderBackground {
-  fill: var(--highcontrast-asset-folder-background-color, var(--spectrum-asset-folder-background-color));
+  fill: var(
+    --highcontrast-asset-folder-background-color,
+    var(
+      --mod-asset-folder-background-color,
+      var(--spectrum-gray-300)
+    )
+  );
 }
 
 .spectrum-Asset-fileBackground {
-  fill: var(--highcontrast-asset-file-background-color, var(--spectrum-asset-file-background-color));
+  fill: var(
+    --highcontrast-asset-file-background-color,
+    var(
+      --mod-asset-file-background-color,
+      var(--spectrum-gray-50)
+    )
+  );
 }
 
 .spectrum-Asset-folderOutline,
 .spectrum-Asset-fileOutline {
-  fill: var(--spectrum-asset-icon-outline-color);
+  fill: var(
+    --mod-asset-icon-outline-color,
+    var(--spectrum-gray-500)
+  );
 }
 
 @media (forced-colors: active) {
-	.spectrum-Asset {
+  .spectrum-Asset {
     --highcontrast-asset-folder-background-color: currentColor;
     --highcontrast-asset-file-background-color: currentColor;
-  	}
+  }
 }

components/asset/metadata/mods.md

@@ -0,0 +1,8 @@
+| Modifiable custom properties          |
+| ------------------------------------- |
+| `--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`      |

components/asset/package.json

@@ -15,7 +15,7 @@
   },
   "main": "dist/index-vars.css",
   "peerDependencies": {
-    "@spectrum-css/vars": ">=9"
+    "@spectrum-css/tokens": ">=13"
   },
   "publishConfig": {
     "access": "public"

components/asset/stories/asset.stories.js

@@ -1,21 +1,28 @@
-// Import the component markup template
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+
 import { Template } from "./template";
 
+/**
+ * Use an asset element to visually represent a file, folder or image. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element, growing to the element's full height while centering itself within the width provided.
+*/
 export default {
 	title: "Components/Asset",
-	description:
-		"Use an asset element to visually represent a file, folder or image. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element, growing to the element's full height while centering itself within the width provided.",
 	component: "Asset",
 	argTypes: {
 		reducedMotion: { table: { disable: true } },
+		scale: {
+			name: "Platform scale",
+			if: { arg: "preset", neq: "image" }
+		},
 		preset: {
 			name: "Preset asset types",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
 				category: "Component",
 			},
-			options: ["folder", "file"],
+			options: ["folder", "file", "image"],
 			control: "select",
 		},
 		image: {
@@ -26,33 +33,41 @@ export default {
 				category: "Component",
 			},
 			control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" },
+			if: { arg: "preset", eq: "image" }
 		},
 	},
 	args: {
 		rootClass: "spectrum-Asset",
+		preset: "image",
+		image: "example-ava.png",
 	},
 	parameters: {
 		status: {
 			type: process.env.MIGRATED_PACKAGES.includes("asset")
 				? "migrated"
-				: undefined,
+				: "legacy",
 		},
 	},
 };
 
-export const SymbolicAsset = Template.bind({});
-SymbolicAsset.argTypes = {
-	image: { table: { disable: true } },
-};
-SymbolicAsset.args = {
-	preset: "folder",
-};
+const AssetGroup = (args) => html`
+	${window.isChromatic() ? html`
+		<div style=${styleMap({
+			display: "grid",
+			gridTemplateColumns: "repeat(3, 200px)",
+			gap: "8px"
+		})}>
+			${Template(args)}
+			${Template({
+				...args,
+				preset: "file",
+			})}
+			${Template({
+				...args,
+				preset: "folder",
+			})}
+		</div>
+	` : Template(args)}
+`;
 
-export const ImageAsset = Template.bind({});
-ImageAsset.argTypes = {
-	preset: { table: { disable: true } },
-	scale: { table: { disable: true } },
-};
-ImageAsset.args = {
-	image: "example-ava.png",
-};
+export const Default = AssetGroup.bind({});