feat(storybook,tokens): remove @adobe/spectrum-token dep, export json

.changeset/dry-falcons-exist.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/preview": patch
+---
+
+Update fetchToken to use the exported JSON from @spectrum-css/tokens instead of @adobe/spectrum-tokens

.storybook/blocks/utilities.js

@@ -1,4 +1,5 @@
-import spectrum from "@adobe/spectrum-tokens/dist/json/variables.json";
+import spectrum from "@spectrum-css/tokens/dist/json/tokens.json";
+
 import { useTheme } from "@storybook/theming";
 
 /**
@@ -23,18 +24,18 @@ function parseData(data, { key, color, platform }) {
 	// Check if the key has a value
 	if (data.value) return data.value;
 
-	if (Object.keys(data.sets).length === 0) {
+	if (Object.keys(data).length === 0) {
 		console.log(`⚠️ Token ${key} has no value or sets`);
 		return;
 	}
 
 	// Check if one of the contexts is a key in the sets
-	if (color in data.sets) {
-		return parseData(data.sets[color], { key, color, platform });
+	if (color in data) {
+		return parseData(data[color], { key, color, platform });
 	}
 
-	if (platform in data.sets) {
-		return parseData(data.sets[platform], { key, color, platform });
+	if (platform in data) {
+		return parseData(data[platform], { key, color, platform });
 	}
 
 	return;
@@ -46,6 +47,7 @@ function parseData(data, { key, color, platform }) {
  * @param {Object} context - An object containing important contextual information
  * @param {string} context.color - The color context set globally for the page
  * @param {string} context.scale - The platform context set globally for the page
+ * @param {string} context.context - The theme context set globally for the page
  * @returns {string|undefined} - The value of the token or a fallback value
  */
 export function fetchToken(key, fallback = undefined, { color, scale } = {}) {

.storybook/package.json

@@ -40,7 +40,6 @@
 	},
 	"dependencies": {
 		"@adobe/spectrum-css-workflow-icons": "^1.5.4",
-		"@adobe/spectrum-tokens": "0.0.0-s2-foundations-20241021172855",
 		"@spectrum-css/table": "workspace:^",
 		"@spectrum-css/tokens": "workspace:^",
 		"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.6.0",

yarn.config.cjs

@@ -103,7 +103,7 @@ module.exports = defineConfig({
 				workspace.set("homepage", "https://opensource.adobe.com/spectrum-css");
 				workspace.set("publishConfig.access", "public");
 				workspace.set("keywords", keywords(["tokens", "css"]));
-				workspace.set("main", "dist/index.css");
+				workspace.set("main", "dist/css/index.css");
 
 				validateLocalPackages(workspace);
 			}

yarn.lock

@@ -120,13 +120,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241021172855":
-  version: 0.0.0-s2-foundations-20241021172855
-  resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241021172855"
-  checksum: 10c0/0604c571afa0416f7802e45d7cbb1d003f14bdf3f90771c274723fa504de6d96f8e16b82f7facbbdb5ee5e66f29c37bd7e3e63a42a05f983d65ede2668b9b0a4
-  languageName: node
-  linkType: hard
-
 "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506":
   version: 0.0.0-s2-foundations-20241121221506
   resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506"
@@ -4881,7 +4874,6 @@ __metadata:
   resolution: "@spectrum-css/preview@workspace:.storybook"
   dependencies:
     "@adobe/spectrum-css-workflow-icons": "npm:^1.5.4"
-    "@adobe/spectrum-tokens": "npm:0.0.0-s2-foundations-20241021172855"
     "@babel/core": "npm:^7.26.0"
     "@chromatic-com/storybook": "npm:^3.2.3"
     "@etchteam/storybook-addon-status": "npm:^5.0.0"