feat: add json to design token output

packages/calcite-design-tokens/package.json

@@ -12,28 +12,7 @@
   "main": "./dist/js/global.js",
   "types": "./dist/js/global.d.ts",
   "files": [
-    "./dist/css/global.css",
-    "./dist/css/breakpoint.css",
-    "./dist/css/classes.css",
-    "./dist/css/core.css",
-    "./dist/css/light.css",
-    "./dist/css/dark.css",
-    "./dist/css/index.css",
-    "./dist/css/global.css",
-    "./dist/scss/breakpoints.scss",
-    "./dist/scss/mixins.scss",
-    "./dist/scss/core.scss",
-    "./dist/scss/light.scss",
-    "./dist/scss/dark.scss",
-    "./dist/scss/index.scss",
-    "./dist/es6/core.js",
-    "./dist/es6/core.d.ts",
-    "./dist/es6/global.js",
-    "./dist/es6/global.d.ts",
-    "./dist/js/core.d.ts",
-    "./dist/js/core.js",
-    "./dist/js/global.d.ts",
-    "./dist/js/global.js"
+    "./dist/**/*"
   ],
   "repository": {
     "type": "git",

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

@@ -15,7 +15,7 @@ export const config: CalciteTokenTransformConfig = {
   },
   output: {
     dir: resolve(__dirname, "../dist"),
-    platforms: [Platform.SCSS, Platform.CSS, Platform.JS, Platform.ES6],
+    platforms: [Platform.SCSS, Platform.CSS, Platform.JS, Platform.JSON, Platform.ES6],
     expandFiles: {
       css: {
         typography: "classes.css",

packages/calcite-design-tokens/support/tests/index.spec.ts

@@ -69,6 +69,17 @@ describe.skip("generated tokens", () => {
     });
   });
 
+  describe("JSON", () => {
+    it("global should match", () => {
+      const global = readFileSync(resolve(__dirname, "../../dist/js/global.json"), "utf-8");
+      expect(global).toMatchSnapshot();
+    });
+    it("core should match", () => {
+      const core = readFileSync(resolve(__dirname, "../../dist/js/core.json"), "utf-8");
+      expect(core).toMatchSnapshot();
+    });
+  });
+
   describe("ES6", () => {
     it("global should match", () => {
       let global = readFileSync(resolve(__dirname, "../../dist/es6/calcite-headless.js"), "utf-8");

packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts

@@ -15,6 +15,7 @@ import { registerValueAssetToken } from "./styleDictionary/transformer/value/val
 import { registerValueStringWrapper } from "./styleDictionary/transformer/value/valueStringWrapper.js";
 import { registerValueEvaluateMath } from "./styleDictionary/transformer/value/valueCheckEvaluateMath.js";
 import { registerValueRGBA } from "./styleDictionary/transformer/value/valueRGBA.js";
+import { registerNameSpacePath } from "./styleDictionary/transformer/name/nameSpacePath.js";
 
 export async function registerCalciteTransformers(sd: StyleDictionary): Promise<void> {
   // Here we are registering the Transforms provided by Token Studio however,
@@ -39,4 +40,5 @@ export async function registerCalciteTransformers(sd: StyleDictionary): Promise<
   registerValueAlignFontWeightAndStyles(sd);
   registerValueAssetToken(sd);
   registerValueStringWrapper(sd);
+  registerNameSpacePath(sd);
 }

packages/calcite-design-tokens/support/token-transformer/sd-run.ts

@@ -3,7 +3,7 @@ import { default as StyleDictionary } from "style-dictionary";
 import { registerCalciteTransformers } from "./registerCalciteTransformers.js";
 import { filterSource } from "./styleDictionary/filter/filterSource.js";
 import { fileExtension } from "../types/fileExtensions.js";
-import { PlatformFormats, PlatformUnion, TypescriptPlatform } from "../types/platform.js";
+import { Platform, PlatformFormats, PlatformUnion, TypescriptPlatform } from "../types/platform.js";
 
 import { CalciteConfigStyleDictionaryRunner } from "../types/config.js";
 import { Options } from "../types/styleDictionary/options.js";
@@ -25,10 +25,10 @@ const files = (platform: PlatformUnion, name: string, options?: Options): File[]
   });
 
   switch (platform) {
-    case "js":
-    case "es6":
+    case Platform.JS:
+    case Platform.ES6:
       f.push({
-        format: format(platform === "js" ? TypescriptPlatform.TS : TypescriptPlatform.ES6TS),
+        format: format(platform === Platform.JS ? TypescriptPlatform.TS : TypescriptPlatform.ES6TS),
         destination: destination(name, TypescriptPlatform.TS),
         filter: filterSource,
         options: { ...options, platform },

packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts

@@ -8,6 +8,7 @@ const formatters: Partial<Record<PlatformFormats, string>> = {
   css: CalciteCss,
   scss: CalciteScss,
   sass: CalciteScss,
+  json: "json",
   js: CalciteJs,
   es6: "javascript/es6",
   ts: "typescript/module-declarations",

packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts

@@ -59,6 +59,7 @@ export function formatExtraOutput(
             ...(mixins || []),
           ].filter((t) => t);
           break;
+        case "json":
         case "js":
         case "es6":
           const exports = index.export?.map((exp) =>
@@ -94,6 +95,9 @@ export function formatExtraOutput(
         case Platform.JS:
           writeFileSync(absoluteFilePath, args.header + "export default " + outputList[0] + "\n");
           break;
+        case Platform.JSON:
+          writeFileSync(absoluteFilePath, outputList[0]);
+          break;
         default:
           break;
       }

packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts

@@ -1,25 +1,18 @@
 import { Core as StyleDictionary } from "style-dictionary";
 
-import { PlatformUnion } from "../../../../types/platform.js";
+import { Platform, PlatformUnion } from "../../../../types/platform.js";
 import { CalledTransformerFunction, TransformerConfig } from "../utils.js";
 import { transformNamesSet } from "../name/nameSet.js";
 
 export const transformAttributesNamesPerPlatform: CalledTransformerFunction<{ [key: string]: any }> = (token, args) => {
   const tokenNameOutputByPlatform = args.options.platforms.reduce((acc, platform) => {
-    let file;
-    let platformArgs;
-
-    if ("platform" in args) {
-      file = args.file;
-      platformArgs = args.platform;
-    } else {
-      file = args.files[0];
-      platformArgs = args;
-    }
-
     acc[platform] = transformNamesSet(token, {
-      ...platformArgs,
-      files: [{ ...file, format: platform }],
+      ...args,
+      options: {
+        ...args.options,
+        platform,
+        prefix: platform === Platform.JSON || platform === Platform.JS ? undefined : args.options.prefix,
+      },
     });
 
     return acc;

packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.spec.ts

@@ -51,6 +51,20 @@ describe("Set transformed name to token reference based on current platform", ()
       });
     });
 
+    describe("handle json format", () => {
+      it("should transform a token name to a token reference", () => {
+        const token = {
+          name: "some fake name",
+          path: ["tier", "group", "element", "property", "state"],
+        } as TransformedToken;
+        const args = {
+          options: { platform: "json" },
+        } as TransformerArgs;
+        const transformedName = transformNamesSet(token, args);
+        expect(transformedName).toBe("tier.group.element.property.state");
+      });
+    });
+
     describe("handle es6 format", () => {
       it("should transform a token name to a token reference", () => {
         const token = {

packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts

@@ -17,7 +17,9 @@ export const transformNamesSet: CalledTransformerFunction<string> = (token, args
       ? transformNamesKebabCase(token, args)
       : transformNamesCamelCase(token, args),
   };
-  return platform === Platform.JS ? transformNamesJoinPath(token, args) : createTokenReference(t, args);
+  return platform === Platform.JSON || platform === Platform.JS
+    ? transformNamesJoinPath(token, args)
+    : createTokenReference(t, args);
 };
 
 export const registerNameSet = (sd: StyleDictionary): void => {

packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.spec.ts

@@ -0,0 +1,21 @@
+import { registerStyleDictionaryTransform } from "../../../../test/utils/registerStyleDictionaryFunction";
+import { TransformedToken } from "../../../../types/styleDictionary/transformedToken";
+import { registerNameSpacePath, transformNamesSpacePath } from "./nameSpacePath";
+
+describe("StyleDictionary Transform Name to a spaced path", () => {
+  describe("register", () => {
+    it("should call StyleDictionary registerTransform", () => registerStyleDictionaryTransform(registerNameSpacePath));
+  });
+
+  describe("transformer", () => {
+    it("should transform a token name to a spaced path", () => {
+      const token = {
+        name: "some fake name",
+        path: ["tier", "group", "element", "property", "state"],
+      } as TransformedToken;
+      const args = {};
+      const transformedName = transformNamesSpacePath(token, args);
+      expect(transformedName).toBe("Tier Group Element Property State");
+    });
+  });
+});

packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts

@@ -0,0 +1,31 @@
+import { Core as StyleDictionary } from "style-dictionary";
+import { CalledTransformerFunction, TransformerConfig } from "../utils.js";
+import { parseTokenPath } from "../utils/parseTokenPath.js";
+import { capitalCase } from "change-case";
+
+export const transformNamesSpacePath: CalledTransformerFunction<string> = (token, args) => {
+  const [tokenPath, negNameRef] = parseTokenPath(
+    [].concat(args.options?.prefix, token.path).filter((p) => p && p !== args?.options?.prefix)
+  );
+  let name = capitalCase(tokenPath.join(" "));
+
+  for (let i = 0; i < negNameRef.length; i++) {
+    const negName = negNameRef[i];
+    const n = negName.slice(1);
+    name = name.replace(n, negName);
+  }
+
+  return name;
+};
+
+export const registerNameSpacePath = (sd: StyleDictionary): void => {
+  const transformerConfig: TransformerConfig = {
+    name: nameSpacePath,
+    transformer: transformNamesSpacePath,
+    type: "name",
+  };
+
+  sd.registerTransform(transformerConfig);
+};
+
+export const nameSpacePath = "name/calcite/space-path";

packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts

@@ -9,11 +9,11 @@ import { valueAlignFontWeightAndStyles } from "./value/valueAlignFontWeightAndSt
 import { valueStringWrapper } from "./value/valueStringWrapper.js";
 import { nameKebabCase } from "./name/nameKebabCase.js";
 import { attributePlatformNames } from "./attributes/attributePlatformName.js";
-import { nameJoinPath } from "./name/nameJoinPath.js";
 import { nameCamelCase } from "./name/nameCamelCase.js";
 import { PlatformUnion } from "../../../types/platform.js";
 import { valueEvaluateMath } from "./value/valueCheckEvaluateMath.js";
 import { CalciteValueRGBA } from "./value/valueRGBA.js";
+import { nameSpacePath } from "./name/nameSpacePath.js";
 
 export type TransformerTypeUnion = `${TransformerTypeEnum}`;
 
@@ -52,13 +52,14 @@ export const styles = [
   nameKebabCase,
 ];
 
-export const js = [...globalTransformations, attributePlatformNames, nameJoinPath];
+export const js = [...globalTransformations, attributePlatformNames, nameSpacePath];
 export const es6 = [...globalTransformations, "ts/descriptionToComment", "attribute/cti", "color/hex", nameCamelCase];
 
 export const transformations: Record<PlatformUnion, string[]> = {
   css: styles,
   sass: styles,
   scss: styles,
+  json: js,
   js,
   es6,
 };

packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/setTokenNameByPlatform.ts

@@ -14,5 +14,7 @@ export function setTokenNameByPlatform(token: TransformedToken, args: PlatformOp
     ...token,
     name: ["css", "scss", "sass"].includes(format) ? kebabCaseName : camelCaseName,
   };
-  return format === Platform.JS ? transformNamesJoinPath(token, args) : createTokenReference(t, args);
+  return format === Platform.JSON || format === Platform.JS
+    ? transformNamesJoinPath(token, args)
+    : createTokenReference(t, args);
 }

packages/calcite-design-tokens/support/types/fileExtensions.ts

@@ -4,6 +4,7 @@ export const fileExtension: PlatformObject<string> = {
   css: ".css",
   sass: ".scss",
   scss: ".scss",
+  json: ".json",
   js: ".js",
   es6: ".js",
   ts: ".d.ts",

packages/calcite-design-tokens/support/types/platform.ts

@@ -2,6 +2,7 @@ export const enum Platform {
   CSS = "css",
   SCSS = "scss",
   SASS = "sass",
+  JSON = "json",
   JS = "js",
   ES6 = "es6",
 }