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,61 @@
-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", "collection-core"];
 
-// 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: "generatedTokens/",
+  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/*.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),
+        },
+      ],
+    },
+  },
 });
 
-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();

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;
+}

generatedTokens/css/core.css

@@ -0,0 +1,140 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --wds-color-yellow-10: #fffde2;
+  --wds-color-yellow-20: #fff9a6;
+  --wds-color-yellow-30: #fff266;
+  --wds-color-yellow-40: #ffea00;
+  --wds-color-yellow-50: #b5a70d;
+  --wds-color-yellow-60: #817818;
+  --wds-color-yellow-70: #706601;
+  --wds-color-yellow-80: #574f00;
+  --wds-color-yellow-90: #3d3800;
+  --wds-color-yellow-05: #fffef0;
+  --wds-color-white: #ffffff;
+  --wds-color-black: #000000;
+  --wds-color-grey-10: #e6e6e6;
+  --wds-color-grey-20: #cccccc;
+  --wds-color-grey-30: #b3b3b3;
+  --wds-color-grey-40: #999999;
+  --wds-color-grey-50: #878787;
+  --wds-color-grey-60: #767676;
+  --wds-color-grey-70: #5c5c5c;
+  --wds-color-grey-80: #292929;
+  --wds-color-grey-90: #000000;
+  --wds-color-grey-05: #f2f2f2;
+  --wds-color-amber-10: #fff4d1;
+  --wds-color-amber-20: #ffe699;
+  --wds-color-amber-30: #fec200;
+  --wds-color-amber-40: #e7ae04;
+  --wds-color-amber-50: #c29207;
+  --wds-color-amber-60: #946f00;
+  --wds-color-amber-70: #705400;
+  --wds-color-amber-80: #4d3900;
+  --wds-color-amber-90: #382a00;
+  --wds-color-amber-05: #fffbf0;
+  --wds-color-blue-10: #dbeaff;
+  --wds-color-blue-20: #b3d2ff;
+  --wds-color-blue-30: #80b5ff;
+  --wds-color-blue-40: #4d97ff;
+  --wds-color-blue-50: #1672f3;
+  --wds-color-blue-60: #0055cc;
+  --wds-color-blue-70: #004099;
+  --wds-color-blue-80: #003170;
+  --wds-color-blue-90: #002e45;
+  --wds-color-blue-05: #f0f6ff;
+  --wds-color-cyan-10: #dcf4f9;
+  --wds-color-cyan-20: #beebf4;
+  --wds-color-cyan-30: #9dd8e7;
+  --wds-color-cyan-40: #71bdd0;
+  --wds-color-cyan-50: #009bb2;
+  --wds-color-cyan-60: #006272;
+  --wds-color-cyan-70: #005361;
+  --wds-color-cyan-80: #00424d;
+  --wds-color-cyan-90: #002c33;
+  --wds-color-cyan-05: #f1fcfd;
+  --wds-color-green-10: #f0f9e7;
+  --wds-color-green-20: #e6f1d3;
+  --wds-color-green-30: #b6d99c;
+  --wds-color-green-40: #8cc059;
+  --wds-color-green-50: #6ba136;
+  --wds-color-green-60: #4c8026;
+  --wds-color-green-70: #236126;
+  --wds-color-green-80: #2a512c;
+  --wds-color-green-90: #133800;
+  --wds-color-green-05: #f7fcf2;
+  --wds-color-orange-10: #ffeddb;
+  --wds-color-orange-20: #ffd9b2;
+  --wds-color-orange-30: #ffbf80;
+  --wds-color-orange-40: #ffa64d;
+  --wds-color-orange-50: #f07f0a;
+  --wds-color-orange-60: #b45c04;
+  --wds-color-orange-70: #8a471e;
+  --wds-color-orange-80: #572b00;
+  --wds-color-orange-90: #331e0f;
+  --wds-color-orange-05: #fff7f0;
+  --wds-color-red-10: #f9cdca;
+  --wds-color-red-20: #ed858e;
+  --wds-color-red-30: #f2637b;
+  --wds-color-red-40: #f04763;
+  --wds-color-red-50: #e72343;
+  --wds-color-red-60: #e10f2d;
+  --wds-color-red-70: #b3001e;
+  --wds-color-red-80: #6c131d;
+  --wds-color-red-90: #40120d;
+  --wds-color-red-05: #fff0f2;
+  --wds-color-modal-overlay: #00000040;
+  --wds-radiu-component-input: 0.125rem;
+  --wds-font-family-mono: 'Courier New';
+  --wds-font-family-brand: Wellcome;
+  --wds-font-family-sans-serif: 'Helvetica Neue';
+  --wds-font-weight-400: 400;
+  --wds-font-weight-500: 500;
+  --wds-font-weight-600: 600;
+  --wds-font-weight-700: 700;
+  --wds-font-letter-spacing-negative: -0.03125rem;
+  --wds-font-letter-spacing-spacious: 0.0125rem;
+  --wds-font-letter-spacing-extra-spacious: 0.025rem;
+  --wds-font-size-10: 0.625rem;
+  --wds-font-size-12: 0.75rem;
+  --wds-font-size-14: 0.875rem;
+  --wds-font-size-16: 1rem;
+  --wds-font-size-18: 1.125rem;
+  --wds-font-size-20: 1.25rem;
+  --wds-font-size-22: 1.375rem;
+  --wds-font-size-24: 1.5rem;
+  --wds-font-size-28: 1.75rem;
+  --wds-font-size-32: 2rem;
+  --wds-font-size-34: 2.125rem;
+  --wds-font-size-40: 2.5rem;
+  --wds-font-line-height-19: 19;
+  --wds-font-line-height-22: 22;
+  --wds-font-line-height-24: 24;
+  --wds-font-line-height-28: 28;
+  --wds-font-line-height-30: 30;
+  --wds-font-line-height-33: 33;
+  --wds-font-line-height-36: 36;
+  --wds-font-line-height-42: 42;
+  --wds-font-line-height-48: 48;
+  --wds-font-line-height-60: 60;
+  --wds-font-line-height-64: 64;
+  --wds-font-line-height-relaxed: 1.5;
+  --wds-font-text-case-uppercase: uppercase;
+  --wds-font-text-case-none: none;
+  --wds-artboard-desktop: 90rem;
+  --wds-artboard-tablet: 48rem;
+  --wds-artboard-mobile: 20rem;
+  --wds-space-base: 0.5rem;
+  --wds-space-scale-100: 0.5rem;
+  --wds-space-scale-150: 0.75rem;
+  --wds-space-scale-200: 1rem;
+  --wds-space-scale-300: 1.5rem;
+  --wds-space-scale-400: 2rem;
+  --wds-space-scale-600: 3rem;
+  --wds-space-scale-800: 4rem;
+  --wds-space-scale-900: 4.5rem;
+  --wds-space-scale-1200: 6rem;
+  --wds-space-scale-050: 0.25rem;
+}