feat: add js platform formats to calcite-design-tokens (#8044)

**Related Issue:** #7986

## Summary

Adds two new platforms and four formats to design-token exports.

### JS platform

The "js" platform creates a javascript object of the design-tokens and a
typescript types declaration file representing that object. This format
is necessary for documentation.

#### Examples

```js
export default {
  core: {
    breakpoint: {
      width: {
        xxs: {
          value: "320px",
          type: "sizing",
          description: "Small handheld devices and mini-windows",
          filePath: "src/core.json",
          isSource: true,
          original: {
            value: "320px",
            type: "sizing",
            description: "Small handheld devices and mini-windows",
          },
          name: "xxs",
          attributes: {},
          path: ["core", "breakpoint", "width", "xxs"],
        },
      xs: {
```

```typescript
declare const root: RootObject
export default root
interface RootObject {
  core: Core;
  semantic: Semantic;
}
interface Core {
  font: Font20;
  border: Border7;
  opacity: Opacity2;
  color: Color;
  sizing: Sizing;
  spacing: Sizing;
  breakpoint: Breakpoint;
  'z-index': Zindex;
}
```

### ES6 platform
The "es6" platform provides the design tokens as tree-shakable
javascript named exports.

#### Examples

```js
export const CoreSpacing27 = "256px";
export const CoreSpacing28 = "288px";
export const CoreSpacingNone = "0px";
export const CoreBreakpointWidthXxs = "320px";
export const CoreBreakpointWidthXs = "476px";
export const CoreBreakpointWidthSm = "768px";
export const CoreBreakpointWidthMd = "1152px";
export const CoreBreakpointWidthLg = "1440px";
```

```typescript
export const CoreSpacing27 : string;
export const CoreSpacing28 : string;
export const CoreSpacingNone : string;
export const CoreBreakpointWidthXxs : string;
export const CoreBreakpointWidthXs : string;
export const CoreBreakpointWidthSm : string;
export const CoreBreakpointWidthMd : string;
export const CoreBreakpointWidthLg : string;
```

package.json

@@ -79,6 +79,7 @@
     "jest-axe": "7.0.1",
     "jest-cli": "27.4.5",
     "jest": "27.4.5",
+    "json-to-ts": "1.7.0",
     "lerna": "7.1.5",
     "lint-staged": "13.2.3",
     "markdownlint-cli": "0.34.0",

packages/calcite-design-tokens/package.json

@@ -12,17 +12,21 @@
   "type": "module",
   "exports": {
     "./css": "./dist/css/calcite-headless.css",
-    "./css/brand/dark": "./dist/css/brand-dark.css",
-    "./css/brand/light": "./dist/css/brand-light.css",
     "./css/calcite/dark": "./dist/css/calcite-dark.css",
     "./css/calcite/light": "./dist/css/calcite-light.css",
     "./css/headless": "./dist/css/calcite-headless.css",
     "./scss": "./dist/scss/calcite-headless.scss",
-    "./scss/brand/dark": "./dist/scss/brand-dark.scss",
-    "./scss/brand/light": "./dist/scss/brand-light.scss",
     "./scss/calcite/dark": "./dist/scss/calcite-dark.scss",
     "./scss/calcite/light": "./dist/scss/calcite-light.scss",
-    "./scss/headless": "./dist/scss/calcite-headless.scss"
+    "./scss/headless": "./dist/scss/calcite-headless.scss",
+    "./js": "./dist/js/calcite-headless.js",
+    "./js/calcite/dark": "./dist/js/calcite-dark.js",
+    "./js/calcite/light": "./dist/js/calcite-light.js",
+    "./js/headless": "./dist/js/calcite-headless.js",
+    "./es6": "./dist/es6/calcite-headless.js",
+    "./es6/calcite/dark": "./dist/es6/calcite-dark.js",
+    "./es6/calcite/light": "./dist/es6/calcite-light.js",
+    "./es6/headless": "./dist/es6/calcite-headless.js"
   },
   "repository": {
     "type": "git",

packages/calcite-design-tokens/support/token-transformer/format/javascript.ts

@@ -0,0 +1,22 @@
+import StyleDictionary, { Dictionary, File } from "style-dictionary";
+import { default as JsonToTS } from "json-to-ts";
+
+type FormatOptions = { dictionary: Dictionary; file: File };
+
+export function formatJs({ dictionary, file }: FormatOptions): string {
+  return (
+    StyleDictionary.formatHelpers.fileHeader({ file }) +
+    "export default" +
+    JSON.stringify(dictionary.tokens, null, 2) +
+    ";\n"
+  );
+}
+
+export function formatTs({ dictionary, file }: FormatOptions): string {
+  return (
+    StyleDictionary.formatHelpers.fileHeader({ file }) +
+    "declare const root: RootObject\n" +
+    "export default root\n" +
+    JsonToTS(dictionary.properties).join("\n")
+  );
+}

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

@@ -8,6 +8,7 @@ import { nameCamelCase } from "./transform/nameCamelCase.js";
 import { nameKebabCase } from "./transform/nameKebabCase.js";
 import { parseName } from "./utils/parseName.js";
 import { Theme } from "./getThemes.js";
+import { formatJs, formatTs } from "./format/javascript.js";
 
 /**
  * Style Dictionary runner configuration overrides.
@@ -49,6 +50,16 @@ export const run = async (
     formatter: formatSCSS,
   });
 
+  StyleDictionary.registerFormat({
+    name: "calcite/js-module",
+    formatter: formatJs,
+  });
+
+  StyleDictionary.registerFormat({
+    name: "calcite/ts-module",
+    formatter: formatTs,
+  });
+
   // Registering Style Dictionary transformers https://amzn.github.io/style-dictionary/#/transforms?id=defining-custom-transforms
   StyleDictionary.registerTransform({
     name: "name/calcite/camel",
@@ -73,6 +84,39 @@ export const run = async (
     source,
     include,
     platforms: {
+      js: {
+        buildPath: `${buildPath}/js/`,
+        files: [
+          {
+            destination: `${fileName}.js`,
+            format: "calcite/js-module",
+            filter: "filterSource",
+          },
+          {
+            destination: `${fileName}.d.ts`,
+            format: "calcite/ts-module",
+            filter: "filterSource",
+          },
+        ],
+      },
+      es6: {
+        transformGroup: "js",
+        buildPath: `${buildPath}/es6/`,
+        files: [
+          {
+            format: "javascript/es6",
+            destination: `${fileName}.js`,
+            filter: "filterSource",
+            options: { ...options, outputReferences: true },
+          },
+          {
+            format: "typescript/es6-declarations",
+            destination: `${fileName}.d.ts`,
+            filter: "filterSource",
+            options: { ...options, outputReferences: true },
+          },
+        ],
+      },
       css: {
         prefix: "calcite",
         transforms: [