refactor: bump style-dictionary and @tokens-studio/sd-transforms to latest

package.json

@@ -57,7 +57,7 @@
     "@storybook/preview-api": "8.4.7",
     "@storybook/storybook-deployer": "2.8.16",
     "@storybook/web-components-vite": "8.4.7",
-    "@tokens-studio/sd-transforms": "0.12.2",
+    "@tokens-studio/sd-transforms": "1.2.9",
     "@types/dedent": "0.7.2",
     "@types/eslint": "9.6.1",
     "@types/estree": "1.0.6",
@@ -118,7 +118,7 @@
     "shell-quote": "1.8.2",
     "storybook": "8.4.7",
     "storybook-addon-rtl": "1.0.1",
-    "style-dictionary": "3.9.2",
+    "style-dictionary": "4.3.0",
     "stylelint": "16.12.0",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-use-logical-spec": "5.0.1",

packages/calcite-design-tokens/package.json

@@ -27,7 +27,7 @@
   },
   "license": "SEE LICENSE.md",
   "scripts": {
-    "build": "tsx support/run.ts",
+    "build": "tsx src/buildTokens.ts",
     "clean": "rimraf dist",
     "lint:json": "prettier --write \"**/*.json\" >/dev/null",
     "lint:md": "prettier --write \"**/*.md\" >/dev/null && markdownlint \"**/*.md\" --fix --dot --ignore-path ../../.gitignore",
@@ -37,8 +37,7 @@
     "util:update-test-snapshots": "NODE_OPTIONS=\"--experimental-vm-modules\" jest --updateSnapshot"
   },
   "devDependencies": {
-    "ts-jest-resolver": "2.0.1",
-    "ts-node": "10.9.2"
+    "ts-jest-resolver": "2.0.1"
   },
   "volta": {
     "extends": "../../package.json"

packages/calcite-design-tokens/src/$metadata.json

@@ -0,0 +1,25 @@
+{
+  "tokenSetOrder": [
+    "core/color",
+    "core/container-size",
+    "core/font",
+    "core/opacity",
+    "core/shadow",
+    "core/size",
+    "core/z-index",
+    "core/$metadata",
+    "core/$themes",
+    "semantic/border",
+    "semantic/container-size",
+    "semantic/corner",
+    "semantic/font",
+    "semantic/opacity",
+    "semantic/shadow",
+    "semantic/size",
+    "semantic/space",
+    "semantic/z-index",
+    "semantic/calcite/dark",
+    "semantic/calcite/light",
+    "semantic/typography"
+  ]
+}

packages/calcite-design-tokens/src/buildTokens.ts

@@ -0,0 +1,19 @@
+import StyleDictionary from "style-dictionary";
+import { register as registerTokenStudioTransformers } from "@tokens-studio/sd-transforms";
+import { registerCalciteTokenTransformers } from "../support/index.js";
+
+import config from "../src/config/semantic.js";
+import calciteLightConfig from "../src/config/calcite/light.js";
+import calciteDarkConfig from "../src/config/calcite/dark.js";
+
+await registerTokenStudioTransformers(StyleDictionary);
+await registerCalciteTokenTransformers(StyleDictionary);
+
+const sd = new StyleDictionary(config);
+await sd.buildAllPlatforms();
+
+const calciteLight = new StyleDictionary(calciteLightConfig);
+await calciteLight.buildAllPlatforms();
+
+const calciteDark = new StyleDictionary(calciteDarkConfig);
+await calciteDark.buildAllPlatforms();

packages/calcite-design-tokens/src/config/calcite/dark.ts

@@ -0,0 +1,135 @@
+import {
+  formats as sdFormats,
+  logBrokenReferenceLevels,
+  logWarningLevels,
+  logVerbosityLevels,
+} from "style-dictionary/enums";
+import { Config } from "style-dictionary/types";
+import { expandTypesMap as sdTypes } from "@tokens-studio/sd-transforms";
+import { transformers, filters, headers, formats } from "../../../support/index.js";
+
+export default {
+  // configuration
+  source: ["src/semantic/calcite/dark.json"],
+  include: ["src/core/*.json"],
+  preprocessors: ["tokens-studio"],
+  platforms: {
+    scss: {
+      transformGroup: transformers.TransformCalciteGroup,
+      buildPath: "dist/scss/",
+      prefix: "calcite",
+      files: [
+        {
+          destination: "dark.scss",
+          format: sdFormats.scssVariables,
+          filter: filters.FilterSourceTokens,
+        },
+      ],
+      options: {
+        fileExtension: ".scss",
+        fileHeader: headers.HeaderCalciteDefault,
+      },
+    },
+    css: {
+      transformGroup: transformers.TransformCalciteGroup,
+      buildPath: "dist/css/",
+      prefix: "calcite",
+      files: [
+        {
+          destination: "dark.css",
+          format: sdFormats.cssVariables,
+          filter: filters.FilterSourceTokens,
+        },
+      ],
+      options: {
+        fileExtension: ".css",
+        fileHeader: headers.HeaderCalciteDefault,
+      },
+    },
+    es6: {
+      transformGroup: transformers.TransformCalciteGroup,
+      transforms: transformers.platformTransforms.es6,
+      buildPath: "dist/es6/",
+      prefix: "calcite",
+      options: {
+        fileExtension: ".js",
+        fileHeader: headers.HeaderCalciteDefault,
+      },
+      files: [
+        {
+          destination: "dark.js",
+          format: sdFormats.javascriptEs6,
+          filter: filters.FilterSourceTokens,
+        },
+        {
+          destination: "global.js",
+          format: formats.FormatESS6Merge,
+          filter: filters.FilterSourceTokens,
+          options: {
+            suffix: "Dark",
+          },
+        },
+      ],
+    },
+    // js: {
+    //   transformGroup: transformers.TransformCalciteGroup,
+    //   transforms: transformers.platformTransforms.es6,
+    //   buildPath: "dist/js/",
+    //   prefix: "calcite",
+    //   options: {
+    //     fileExtension: ".js",
+    //     fileHeader: headers.HeaderCalciteDefault,
+    //   },
+    //   files: [
+    //     {
+    //       destination: "dark.js",
+    //       format: formats.FormatCalciteDocs,
+    //       filter: filters.FilterSourceTokens,
+    //     },
+    //     {
+    //       destination: "global.js",
+    //       format: formats.FormatJSONMerge,
+    //       filter: filters.FilterSourceTokens,
+    //       options: {
+    //         suffix: "Dark",
+    //       },
+    //     },
+    //   ],
+    // },
+    docs: {
+      transformGroup: transformers.TransformCalciteGroup,
+      transforms: transformers.platformTransforms.es6,
+      buildPath: "dist/docs/",
+      prefix: "calcite",
+      options: {
+        fileExtension: ".json",
+        fileHeader: headers.HeaderCalciteDefault,
+      },
+      files: [
+        {
+          destination: "dark.json",
+          format: formats.FormatCalciteDocs,
+          filter: filters.FilterSourceTokens,
+        },
+        // {
+        //   destination: "global.json",
+        //   format: formats.FormatJSONMerge,
+        //   filter: filters.FilterSourceTokens,
+        //   options: {
+        //     suffix: "Dark",
+        //   },
+        // },
+      ],
+    },
+  },
+  log: {
+    warnings: logWarningLevels.warn,
+    verbosity: logVerbosityLevels.verbose,
+    errors: {
+      brokenReferences: logBrokenReferenceLevels.throw,
+    },
+  },
+  expand: {
+    typesMap: sdTypes,
+  },
+} as Config;