@digdir/designsystemet 1.1.3 → 1.1.4

package/dist/src/tokens/process/configs.d.ts

@@ -12,7 +12,6 @@ export declare const configs: {
     infoColorVariables: GetStyleDictionaryConfig;
     typographyVariables: GetStyleDictionaryConfig;
     semanticVariables: GetStyleDictionaryConfig;
-    typescriptTokens: GetStyleDictionaryConfig;
 };
 export declare const getConfigsForThemeDimensions: (getConfig: GetStyleDictionaryConfig, processed$themes: ProcessedThemeObject[], dimensions: ThemeDimension[], options: GetSDConfigOptions) => SDConfigForThemePermutation[];
 //# sourceMappingURL=configs.d.ts.map

package/dist/src/tokens/process/configs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/configs.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAInG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAOpE,OAAO,EAA6B,KAAK,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAc5G,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,WAAW,wBAAwB,EACnC,kBAAkB,oBAAoB,EAAE,EACxC,YAAY,cAAc,EAAE,EAC5B,SAAS,kBAAkB,KAC1B,2BAA2B,EAoD7B,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/configs.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAInG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAKpE,OAAO,EAA6B,KAAK,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAa5G,eAAO,MAAM,OAAO;;;;;;;;;;;CAWnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,WAAW,wBAAwB,EACnC,kBAAkB,oBAAoB,EAAE,EACxC,YAAY,cAAc,EAAE,EAC5B,SAAS,kBAAkB,KAC1B,2BAA2B,EAoD7B,CAAC"}

package/dist/src/tokens/process/configs.js

@@ -1,6 +1,6 @@
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R12 from "ramda";
+import * as R10 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/utils.ts
@@ -84,198 +84,12 @@ function inlineTokens(shouldInline, tokens) {
 import * as R8 from "ramda";
 
 // src/tokens/process/formats/css/color.ts
-import * as R2 from "ramda";
-import { createPropertyFormatter } from "style-dictionary/utils";
-var prefersColorScheme = (colorScheme2, content) => `
-@media (prefers-color-scheme: ${colorScheme2}) {
-  [data-color-scheme="auto"] ${content}
-}
-`;
-var colorScheme = {
-  name: "ds/css-colorscheme",
-  format: async ({ dictionary, options, platform }) => {
-    const { allTokens } = dictionary;
-    const { outputReferences, usesDtcg } = options;
-    const { selector, colorScheme: colorScheme2, layer } = platform;
-    const colorScheme_ = colorScheme2;
-    const format = createPropertyFormatter({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
-  color-scheme: ${colorScheme_};
-` : "";
-    const filteredAllTokens = allTokens.filter(
-      R2.allPass([
-        R2.anyPass([
-          // Include semantic tokens in the output
-          isSemanticToken,
-          // Include global color tokens
-          isGlobalColorToken
-        ]),
-        // Don't include color category tokens -- they are exported separately
-        (t) => !isColorCategoryToken(t)
-      ])
-    );
-    const formattedTokens = filteredAllTokens.map(format).join("\n");
-    const content = `{
-${formattedTokens}
-${colorSchemeProperty}}
-`;
-    const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
-    const body = R2.isNotNil(layer) ? `@layer ${layer} {
-${selector} ${content} ${autoSelectorContent}
-}
-` : `${selector} ${content} ${autoSelectorContent}
-`;
-    return body;
-  }
-};
-var colorCategory = {
-  name: "ds/css-colorcategory",
-  format: async ({ dictionary, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const format = R2.compose(
-      createPropertyFormatter({
-        outputReferences,
-        dictionary,
-        format: "css",
-        usesDtcg
-      }),
-      (token) => ({
-        ...token,
-        name: token.name.replace(/color-\w+-/, "color-"),
-        original: {
-          ...token.original,
-          $value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
-        }
-      })
-    );
-    const formattedTokens = dictionary.allTokens.map(format).join("\n");
-    const content = `{
-${formattedTokens}
-}
-`;
-    const body = R2.isNotNil(layer) ? `@layer ${layer} {
-${selector} ${content}
-}
-` : `${selector} ${content}
-`;
-    return body;
-  }
-};
-
-// src/tokens/process/formats/css/semantic.ts
-import * as R3 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
-var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
-var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
-var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
-var isInlineTokens = R3.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
-var overrideSizingFormula = (format, token) => {
-  const [name, value] = format(token).split(":");
-  const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
-  const round = `round(down, ${calc}, 1px)`;
-  return {
-    name,
-    round,
-    calc
-  };
-};
-var formatSizingTokens = (format, tokens) => {
-  const { round, calc } = R3.reduce(
-    (acc, token) => {
-      const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
-      return {
-        round: [...acc.round, `${name}: ${round2};`],
-        calc: [...acc.calc, `${name}: ${calc2};`]
-      };
-    },
-    { round: [], calc: [] },
-    tokens
-  );
-  return `
-${calc.join("\n")}
-
-  @supports (width: round(down, .1em, 1px)) {
-${round.join("\n")}
-  }`;
-};
-var semantic = {
-  name: "ds/css-semantic",
-  format: async ({ dictionary, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const format = createPropertyFormatter2({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R3.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
-    const [sizingTokens, restTokens] = R3.partition(
-      (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
-      filteredTokens
-    );
-    const formattedTokens = [R3.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
-    const content = `{
-${formattedTokens.join("\n")}
-}
-`;
-    const body = R3.isNotNil(layer) ? `@layer ${layer} {
-${selector} ${content}
-}
-` : `${selector} ${content}
-`;
-    return body;
-  }
-};
-
-// src/tokens/process/formats/css/typography.ts
 import * as R4 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R4.allPass([
-  R4.pathSatisfies(R4.includes("typography"), ["path"]),
-  R4.pathSatisfies(R4.includes("fontFamily"), ["path"])
-]);
-var typography = {
-  name: "ds/css-typography",
-  format: async ({ dictionary, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const format = createPropertyFormatter3({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const filteredTokens = R4.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const formattedTokens = R4.pipe(R4.map(format), R4.join("\n"))(filteredTokens);
-    const content = selector ? `${selector} {
-${formattedTokens}
-}` : formattedTokens;
-    const body = R4.isNotNil(layer) ? `@layer ${layer} {
-${content}
-}` : content;
-    return body;
-  }
-};
-
-// src/tokens/process/formats/css.ts
-var formats = {
-  colorScheme,
-  colorCategory,
-  semantic,
-  typography
-};
+import { createPropertyFormatter } from "style-dictionary/utils";
 
 // src/tokens/process/platform.ts
 import chalk2 from "chalk";
-import * as R6 from "ramda";
+import * as R3 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
@@ -444,13 +258,13 @@ var TypographyValues;
 // src/tokens/process/utils/getMultidimensionalThemes.ts
 import chalk from "chalk";
 import { kebabCase } from "change-case";
-import * as R5 from "ramda";
+import * as R2 from "ramda";
 var getMultidimensionalThemes = (processed$themes, dimensions) => {
   const verboseLogging = buildOptions?.verbose;
   const grouped$themes = groupThemes(processed$themes);
   const permutations = permutateThemes(grouped$themes);
   const ALL_DEPENDENT_ON = ["theme"];
-  const keys2 = R5.keys(grouped$themes);
+  const keys2 = R2.keys(grouped$themes);
   const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
   if (verboseLogging) {
     console.log(chalk.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
@@ -476,7 +290,7 @@ function groupThemes(themes) {
   }
   return groups;
 }
-var hasUnknownProps = R5.pipe(R5.values, R5.none(R5.equals("unknown")), R5.not);
+var hasUnknownProps = R2.pipe(R2.values, R2.none(R2.equals("unknown")), R2.not);
 function permutateThemes(groups) {
   const separator = "_";
   const permutations = cartesian(Object.values(groups));
@@ -486,8 +300,8 @@ function permutateThemes(groups) {
         const { group, name, selectedTokenSets } = theme;
         let updatedPermutation = acc.permutation;
         if (group) {
-          const groupProp = R5.lensProp(group);
-          updatedPermutation = R5.set(groupProp, name, updatedPermutation);
+          const groupProp = R2.lensProp(group);
+          updatedPermutation = R2.set(groupProp, name, updatedPermutation);
         }
         const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
         const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -535,7 +349,11 @@ function cartesian(a) {
 }
 
 // src/tokens/process/platform.ts
-var buildOptions;
+var buildOptions = {
+  verbose: false,
+  processed$themes: [],
+  buildTokenFormats: {}
+};
 var sd = new StyleDictionary();
 var buildConfigs = {
   typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
@@ -568,13 +386,221 @@ var buildConfigs = {
     log: ({ permutation: { theme } }) => `${theme} - info`
   },
   semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
-  // storefront: {
-  //   name: 'Storefront preview tokens',
-  //   getConfig: configs.typescriptTokens,
-  //   dimensions: ['color-scheme'],
-  //   options: { outPath: path.resolve('../../apps/storefront/tokens') },
-  //   enabled: () => buildOptions?.preview ?? false,
-  // },
+};
+
+// src/tokens/process/formats/css/color.ts
+var prefersColorScheme = (colorScheme2, content) => `
+@media (prefers-color-scheme: ${colorScheme2}) {
+  [data-color-scheme="auto"] ${content}
+}
+`;
+var colorScheme = {
+  name: "ds/css-colorscheme",
+  format: async ({ dictionary, options, platform }) => {
+    const { allTokens } = dictionary;
+    const { outputReferences, usesDtcg } = options;
+    const { selector, colorScheme: colorScheme2, layer } = platform;
+    const colorScheme_ = colorScheme2;
+    const format = createPropertyFormatter({
+      outputReferences,
+      dictionary,
+      format: "css",
+      usesDtcg
+    });
+    const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
+  color-scheme: ${colorScheme_};
+` : "";
+    const filteredAllTokens = allTokens.filter(
+      R4.allPass([
+        R4.anyPass([
+          // Include semantic tokens in the output
+          isSemanticToken,
+          // Include global color tokens
+          isGlobalColorToken
+        ]),
+        // Don't include color category tokens -- they are exported separately
+        (t) => !isColorCategoryToken(t)
+      ])
+    );
+    const formattedMap = filteredAllTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    const formattedTokens = formattedMap.map(R4.view(R4.lensProp("formatted"))).join("\n");
+    const content = `{
+${formattedTokens}
+${colorSchemeProperty}}
+`;
+    const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
+    const body = R4.isNotNil(layer) ? `@layer ${layer} {
+${selector} ${content} ${autoSelectorContent}
+}
+` : `${selector} ${content} ${autoSelectorContent}
+`;
+    return body;
+  }
+};
+var colorCategory = {
+  name: "ds/css-colorcategory",
+  format: async ({ dictionary, options, platform }) => {
+    const { outputReferences, usesDtcg } = options;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
+    const format = R4.compose(
+      createPropertyFormatter({
+        outputReferences,
+        dictionary,
+        format: "css",
+        usesDtcg
+      }),
+      (token) => ({
+        ...token,
+        name: token.name.replace(/color-\w+-/, "color-"),
+        original: {
+          ...token.original,
+          $value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
+        }
+      })
+    );
+    const formattedMap = dictionary.allTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R4.view(R4.lensProp("formatted"))).join("\n");
+    const content = `{
+${formattedTokens}
+}
+`;
+    const body = R4.isNotNil(layer) ? `@layer ${layer} {
+${selector} ${content}
+}
+` : `${selector} ${content}
+`;
+    return body;
+  }
+};
+
+// src/tokens/process/formats/css/semantic.ts
+import * as R5 from "ramda";
+import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
+var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
+var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
+var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
+var isInlineTokens = R5.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
+var overrideSizingFormula = (format, token) => {
+  const [name, value] = format(token).split(":");
+  const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
+  const round = `round(down, ${calc}, 1px)`;
+  return {
+    name,
+    round,
+    calc
+  };
+};
+var formatSizingTokens = (format, tokens) => R5.reduce(
+  (acc, token) => {
+    const { round, calc, name } = overrideSizingFormula(format, token);
+    return {
+      tokens: [...acc.tokens, token],
+      round: [...acc.round, `${name}: ${round};`],
+      calc: [...acc.calc, `${name}: ${calc};`]
+    };
+  },
+  { tokens: [], round: [], calc: [] },
+  tokens
+);
+var sizingTemplate = ({ round, calc }) => `
+${calc.join("\n")}
+
+  @supports (width: round(down, .1em, 1px)) {
+${round.join("\n")}
+  }`;
+var semantic = {
+  name: "ds/css-semantic",
+  format: async ({ dictionary, options, platform }) => {
+    const { outputReferences, usesDtcg } = options;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
+    const format = createPropertyFormatter2({
+      outputReferences,
+      dictionary,
+      format: "css",
+      usesDtcg
+    });
+    const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
+    const filteredTokens = R5.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
+    const [sizingTokens, restTokens] = R5.partition(
+      (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
+      filteredTokens
+    );
+    const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
+    const formattedMap = restTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
+      token: formattedSizingTokens.tokens[i],
+      formatted: t
+    }));
+    buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
+    const sizingSnippet = sizingTemplate(formattedSizingTokens);
+    const formattedTokens = formattedMap.map(R5.view(R5.lensProp("formatted"))).concat(sizingSnippet);
+    const content = `{
+${formattedTokens.join("\n")}
+}
+`;
+    const body = R5.isNotNil(layer) ? `@layer ${layer} {
+${selector} ${content}
+}
+` : `${selector} ${content}
+`;
+    return body;
+  }
+};
+
+// src/tokens/process/formats/css/typography.ts
+import * as R6 from "ramda";
+import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
+var typographyFontFamilyPredicate = R6.allPass([
+  R6.pathSatisfies(R6.includes("typography"), ["path"]),
+  R6.pathSatisfies(R6.includes("fontFamily"), ["path"])
+]);
+var typography = {
+  name: "ds/css-typography",
+  format: async ({ dictionary, options, platform }) => {
+    const { outputReferences, usesDtcg } = options;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
+    const format = createPropertyFormatter3({
+      outputReferences,
+      dictionary,
+      format: "css",
+      usesDtcg
+    });
+    const filteredTokens = R6.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const formattedMap = filteredTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R6.view(R6.lensProp("formatted"))).join("\n");
+    const content = selector ? `${selector} {
+${formattedTokens}
+}` : formattedTokens;
+    const body = R6.isNotNil(layer) ? `@layer ${layer} {
+${content}
+}` : content;
+    return body;
+  }
+};
+
+// src/tokens/process/formats/css.ts
+var formats = {
+  colorScheme,
+  colorCategory,
+  semantic,
+  typography
 };
 
 // src/tokens/process/transformers.ts
@@ -765,90 +791,6 @@ var semanticVariables = ({ theme }) => {
   };
 };
 
-// src/tokens/process/configs/storefront.ts
-import * as R11 from "ramda";
-import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
-
-// src/tokens/process/formats/js-tokens.ts
-import * as R10 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
-var groupByType = R10.groupBy((token) => getType(token));
-var removeUnwatedTokens = R10.pipe(
-  R10.reject((token) => isColorCategoryToken(token)),
-  R10.reject((token) => R10.any((path) => path.startsWith("_"))(token.path))
-);
-var dissocExtensions = R10.pipe(R10.dissoc("$extensions"), R10.dissocPath(["original", "$extensions"]));
-var removeUnwatedProps = R10.map((token) => dissocExtensions(token));
-var toCssVarName = R10.pipe(R10.split(":"), R10.head, R10.trim);
-var jsTokens = {
-  name: "ds/js-tokens",
-  format: async ({ dictionary, file, options }) => {
-    const { usesDtcg, outputReferences } = options;
-    const format = createPropertyFormatter4({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const formatTokens = R10.map((token) => {
-      if (pathStartsWithOneOf(["size", "_size"], token)) {
-        const { calc, name } = overrideSizingFormula(format, token);
-        return {
-          ...token,
-          name: name.trim(),
-          $value: calc.trim()
-        };
-      }
-      return {
-        ...token,
-        name: toCssVarName(format(token))
-      };
-    });
-    const processTokens = R10.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
-    const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
-    const content = Object.entries(tokens).map(
-      ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")} 
-`
-    ).join("\n");
-    return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
-  }
-};
-
-// src/tokens/process/configs/storefront.ts
-var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
-  return {
-    preprocessors: ["tokens-studio"],
-    platforms: {
-      ts: {
-        prefix,
-        basePxFontSize,
-        transforms: dsTransformers,
-        buildPath: `${theme}/`,
-        files: [
-          {
-            destination: `${colorScheme2}.ts`,
-            format: jsTokens.name,
-            filter: (token) => {
-              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R11.includes("semantic", token.filePath))
-                return false;
-              const isSemanticColor = R11.includes("semantic", token.filePath) && typeEquals(["color"], token);
-              const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
-              return isSemanticColor || wantedTypes;
-            }
-          }
-        ],
-        options: {
-          outputReferences: (token, options) => {
-            const include = pathStartsWithOneOf(["border-radius"], token);
-            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
-            return (include || isWantedSize) && outputReferencesFilter2(token, options);
-          }
-        }
-      }
-    }
-  };
-};
-
 // src/tokens/process/configs/typography.ts
 import { expandTypesMap } from "@tokens-studio/sd-transforms";
 var typographyVariables = ({ theme, typography: typography2 }) => {
@@ -875,6 +817,7 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
           sizeRem.name,
           "ts/size/lineheight",
           "ts/typography/fontWeight",
+          "ts/size/css/letterspacing",
           typographyName.name
         ],
         files: [
@@ -902,7 +845,6 @@ StyleDictionary2.registerTransform(sizeRem);
 StyleDictionary2.registerTransform(typographyName);
 StyleDictionary2.registerTransform(resolveMath);
 StyleDictionary2.registerTransform(unitless);
-StyleDictionary2.registerFormat(jsTokens);
 for (const format of Object.values(formats)) {
   StyleDictionary2.registerFormat(format);
 }
@@ -916,8 +858,7 @@ var configs = {
   warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
   infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
   typographyVariables,
-  semanticVariables,
-  typescriptTokens
+  semanticVariables
 };
 var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
   const { tokensDir, tokenSets } = options;
@@ -933,7 +874,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
               obj.filePath = tokenSet;
             }
           });
-          tokenSource.tokens = R12.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
+          tokenSource.tokens = R10.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
         }
       }
     } else {

package/dist/src/tokens/process/formats/css/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/color.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAYrD,eAAO,MAAM,WAAW,EAAE,MA0CzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MA+B3B,CAAC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/color.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAarD,eAAO,MAAM,WAAW,EAAE,MAgDzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAwC3B,CAAC"}