Task/core semantic tokens

.nvmrc

@@ -1 +1 @@
-18.17.0
+18.18.0

build.js

@@ -1,109 +1,61 @@
-import { promises } from "node:fs";
+import StyleDictionary from "style-dictionary";
+import { registerTransforms } from "@tokens-studio/sd-transforms";
 
-import StyleDictionary from 'style-dictionary';
-import { permutateThemes, registerTransforms } from '@tokens-studio/sd-transforms';
-
-import { generateSemanticFiles } from "./utils/generateSemanticFiles.js";
-
-import { transformAttributeThemeable } from "./utils/transforms/transformAttributeThemeable.js";
-import { transformRem } from "./utils/transforms/transformRem.js";
-
-const excludedFromSemantic = ["collection-core", "collection-theme"];
-
-// Define the array of excluded token paths
-const excludedPaths = [
-  'asset',
-  'annotations'
-];
+import filterExcludeTokens from "./utils/filters/filterExcludeTokens.js";
+import transformToRem from "./utils/transforms/transformToRem.js";
 
 registerTransforms(StyleDictionary);
 
-async function run() {
-  const $themes = JSON.parse(await promises.readFile("tokens/$themes.json"));
-
-  const themes = permutateThemes($themes);
-
-  // collect all tokensets for all themes
-  const tokensets = [
-    ...new Set(
-        Object.values(themes).reduce((acc, sets) => [...acc, ...sets], [])
-    ),
-  ];
-
-  // figure out which tokensets are theme-specific
-  // this is determined by checking if a certain tokenset is used for EVERY theme dimension variant
-  // if it is, then it is not theme-specific
-  const themeableSets = tokensets.filter((set) => {
-    return !Object.values(themes).every((sets) => sets.includes(set));
-  });
-
-  const configs = Object.entries(themes).map(([theme, sets]) => {
-    return {
-      source: sets.map((tokenset) => `tokens/${tokenset}.json`),
-      platforms: {
-        css: {
-          transformGroup: 'tokens-studio',
-          transforms: ["custom/attribute/themeable", "name/kebab", "custom/rem"],
-          buildPath: 'generatedTokens/css/',
-          files: [
-            {
-              destination: "core.css",
-              format: "css/variables",
-              filter: 'custom/coreFilter',
-            },
-            {
-              destination: "product/collection.css",
-              format: "css/variables",
-              filter: 'custom/collectionFilter',
-            },
-            ...generateSemanticFiles(excludedFromSemantic, theme),
-          ]
-        }
-      }
-    };
-  });
-
-
-  for (const cfg of configs) {
-    const sd = new StyleDictionary(cfg);
-
-    sd.registerTransform({
-      name: "custom/attribute/themeable",
-      type: "attribute",
-      transform: (token) => transformAttributeThemeable(token, themeableSets, sd.tokens),
-    });
-
-    sd.registerTransform({
-      name: 'custom/rem',
-      type: 'value',
-      transitive: true,
-      filter: token =>
-          ['sizing', 'spacing', 'borderRadius', 'fontSizes', 'lineHeights', 'letterSpacing'].includes(
-              token.type,
-          ),
-      transform: token => transformRem(token.value),
-    });
-
-    sd.registerFilter({
-      name: 'custom/coreFilter',
-      filter: (token) => {
-        return token.filePath.endsWith("core.json") && !token.filePath.includes("collection") && !token.path.some(part => excludedPaths.includes(part))
-      }
-    });
-
-    sd.registerFilter({
-      name: 'custom/collectionFilter',
-      filter: (token) => {
-        return token.filePath.includes("collection")
-      }
-    });
-
-    await sd.cleanAllPlatforms();
-    await sd.buildAllPlatforms();
-  }
-
-
-  console.log('CSS files have been generated.');
-}
-
-run();
+const tokenGroups = ["core", "semantic", "collection-core"];
+
+const common = {
+  buildPath: "generatedTokens/",
+  prefix: "wds",
+  transformGroup: "tokens-studio",
+};
+
+const sd = new StyleDictionary({
+  source: ["tokens/*.json"],
+  platforms: {
+    css: {
+      ...common,
+      transforms: ["name/kebab", "custom/rem"],
+      files: tokenGroups.map((groupName) => {
+        return {
+          destination: `css/${groupName}.css`,
+          format: "css/variables",
+          filter: (token) =>
+            token.filePath === `tokens/${groupName}.json` &&
+            filterExcludeTokens(token),
+        };
+      }),
+    },
+    json: {
+      ...common,
+      files: [
+        {
+          destination: "wds-tokens.json",
+          format: "json/nested",
+          filter: (token) => filterExcludeTokens(token),
+        },
+      ],
+    },
+  },
+});
+
+sd.registerTransform({
+  name: "custom/rem",
+  type: "value",
+  transitive: true,
+  filter: (token) =>
+    [
+      "sizing",
+      "spacing",
+      "borderRadius",
+      "fontSizes",
+      "letterSpacing",
+    ].includes(token.type),
+  transform: (token) => transformToRem(token.value),
+});
+
+sd.buildAllPlatforms();

eslint.config.js

@@ -0,0 +1,17 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import prettier from "eslint-plugin-prettier";
+import prettierConfig from "eslint-plugin-prettier/recommended";
+
+export default [
+  {
+    languageOptions: {
+      globals: globals.browser,
+    },
+    plugins: {
+      prettier,
+    },
+  },
+  pluginJs.configs.recommended,
+  prettierConfig,
+];

generatedTokens/css/collection-core.css

@@ -0,0 +1,34 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --wds-color-neutral-cool-100: #121212;
+  --wds-color-neutral-cool-200: #fbfaf4;
+  --wds-color-neutral-cool-300: #e8e8e8;
+  --wds-color-neutral-cool-400: #d9d9d9;
+  --wds-color-neutral-cool-500: #878787;
+  --wds-color-neutral-cool-600: #6a6a6a;
+  --wds-color-neutral-cool-700: #323232;
+  --wds-color-neutral-warm-200: #fff9e6;
+  --wds-color-neutral-warm-300: #edece4;
+  --wds-color-neutral-warm-400: #d9d8d0;
+  --wds-color-yellow-200: #ffebad;
+  --wds-color-yellow-500: #ffce3c;
+  --wds-color-yellow-700: #ddb029;
+  --wds-color-accent-green-200: #9bc0af;
+  --wds-color-accent-green-500: #4f7d68;
+  --wds-color-accent-green-700: #3a604f;
+  --wds-color-accent-blue-200: #a4bfdf;
+  --wds-color-accent-blue-700: #27476e;
+  --wds-color-accent-turquoise-200: #a2eeed;
+  --wds-color-accent-turquoise-700: #1dbebb;
+  --wds-color-accent-salmon-200: #ff9585;
+  --wds-color-accent-salmon-700: #ff6f59;
+  --wds-color-accent-purple-200: #baa4cd;
+  --wds-color-accent-purple-700: #724e91;
+  --wds-color-ui-validation-green: #0b7051;
+  --wds-color-ui-validation-red: #e01b2f;
+  --wds-color-ui-focus-yellow: #ffea00;
+  --wds-color-ui-annotation: #9747ff;
+}