Merge pull request #17 from wellcometrust/task/include-core-semantic-…

…tokens

task: adds core and semantic tokens only

.github/workflows/create-tokens.yml

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      # Give the default GITHUB_TOKEN write permission to commit and push the
+      # added or changed files to the repository.
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Split tokens.json file
+        run: npm run split-json
+
+      # Convert tokens according to Style Dictionary config
+      - name: Run style-dictionary
+        run: npm run build
+
+      # Add files that were created during a run, e.g. created files from style dictionary or token-transformer.
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: Update Tokens

.nvmrc

@@ -0,0 +1 @@
+18.18.0

build.js

@@ -1,37 +1,62 @@
-import fs from "node:fs";
-import { createRequire } from "node:module";
-import { registerTransforms } from "@tokens-studio/sd-transforms";
 import StyleDictionary from "style-dictionary";
-import config from "./config.js";
+import { registerTransforms } from "@tokens-studio/sd-transforms";
+
+import filterExcludeTokens from "./utils/filters/filterExcludeTokens.js";
+import transformToRem from "./utils/transforms/transformToRem.js";
 
-const require = createRequire(import.meta.url);
-const tokens = require("./tokens.json");
+registerTransforms(StyleDictionary);
 
-function slugify(str) {
-  return str
-    .replace(/^\s+|\s+$/g, "")
-    .toLowerCase()
-    .replace(/[^a-z0-9 -]/g, "")
-    .replace(/\s+/g, "-")
-    .replace(/-+/g, "-");
-}
+const tokenGroups = ["core", "semantic"];
 
-// Split the tokens.json (from Tokens Studio) into its top-level keys -- useful
-// if we want to e.g. prefix variables by their type
-Object.entries(tokens).map(([key, value]) => {
-  if (key.startsWith("$")) return; // Tokens Studio meta info, not required for variables
+const common = {
+  buildPath: "tokens-generated/",
+  prefix: "wds",
+  transformGroup: "tokens-studio",
+};
 
-  try {
-    fs.writeFileSync(`./src/${slugify(key)}.json`, JSON.stringify(value), {
-      flag: "w",
-    });
-  } catch (err) {
-    console.log(err);
-  }
+const sd = new StyleDictionary({
+  source: ["tokens-figma/*.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-figma/${groupName}.json` &&
+            filterExcludeTokens(token),
+        };
+      }),
+    },
+    json: {
+      ...common,
+      files: [
+        {
+          destination: "wds-tokens.json",
+          format: "json/nested",
+          filter: (token) => filterExcludeTokens(token),
+        },
+      ],
+    },
+  },
 });
 
-registerTransforms(StyleDictionary);
-const sd = new StyleDictionary(config);
+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.cleanAllPlatforms();
-sd.buildAllPlatforms();
+sd.buildAllPlatforms();

package.json

@@ -4,13 +4,18 @@
   "description": "Design system for Wellcome and Wellcome Collection products",
   "main": "index.js",
   "type": "module",
+  "engines": {
+    "node": ">=18.18.0",
+    "npm": ">=9.8.1"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/wellcometrust/wellcome-design-system.git"
   },
   "scripts": {
     "build": "node build.js",
-    "lint": "eslint"
+    "lint": "eslint",
+    "split-json": "node split-json.js"
   },
   "author": "",
   "license": "MIT",
@@ -25,6 +30,6 @@
     "eslint-plugin-prettier": "^5.1.3",
     "globals": "^15.6.0",
     "prettier": "^3.3.2",
-    "style-dictionary": "^4.0.0-prerelease.27"
+    "style-dictionary": "^4.0.0-prerelease.34"
   }
-}
+}

split-json.js

@@ -0,0 +1,49 @@
+import fs from "node:fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+// Get the current directory of the script
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Read the JSON file
+const jsonFile = path.join(__dirname, "tokens.json");
+const rawData = fs.readFileSync(jsonFile);
+const jsonData = JSON.parse(rawData);
+
+// Define the base output directory
+const baseDir = path.join(__dirname, "tokens-figma");
+
+// Define keys to include
+const includeKeys = ["GLOBAL/core", "GLOBAL/semantic"];
+
+// Function to write data to file
+const writeFile = (filePath, data) => {
+  const dir = path.dirname(filePath);
+  fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(filePath, JSON.stringify(data, null, 2));
+};
+
+includeKeys.forEach((key) => {
+  if (Object.prototype.hasOwnProperty.call(jsonData, key)) {
+    // Split the key into parts
+    let keyParts = key.split("/");
+
+    // Remove the first part if there are multiple parts
+    if (keyParts.length > 1) {
+      keyParts.shift();
+    }
+
+    // Replace spaces in each part with hyphens
+    keyParts = keyParts.map((part) => part.replace(/\s+/g, "-"));
+
+    // Join the remaining parts with '-' and convert to lowercase
+    const cleanKey = keyParts.join("-").toLowerCase();
+
+    const filePath = path.join(baseDir, `${cleanKey}.json`);
+
+    writeFile(filePath, jsonData[key]);
+  }
+});
+
+console.log("JSON files have been created in the tokens directory.");