@digdir/designsystemet 1.1.3 → 1.1.4

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

@@ -36,6 +36,9 @@ var pathStartsWithOneOf = R.curry(
 function isSemanticToken(token) {
   return token.filePath.includes("semantic/");
 }
+function isSemanticColorToken(token, color) {
+  return token.filePath.includes("semantic/") && R.startsWith(["color", color], token.path);
+}
 function isGlobalColorToken(token) {
   return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
 }
@@ -64,8 +67,443 @@ function inlineTokens(shouldInline, tokens) {
 }
 
 // src/tokens/process/formats/css/color.ts
-import * as R2 from "ramda";
+import * as R8 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
+
+// src/tokens/process/platform.ts
+import chalk2 from "chalk";
+import * as R7 from "ramda";
+import StyleDictionary2 from "style-dictionary";
+
+// src/tokens/process/configs.ts
+import { register } from "@tokens-studio/sd-transforms";
+import * as R6 from "ramda";
+import StyleDictionary from "style-dictionary";
+
+// src/tokens/process/configs/color.ts
+import * as R3 from "ramda";
+
+// src/tokens/process/transformers.ts
+import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
+import * as R2 from "ramda";
+var isPx = R2.test(/\b\d+px\b/g);
+var sizeRem = {
+  name: "ds/size/toRem",
+  type: "value",
+  transitive: true,
+  filter: (token) => {
+    const hasWantedType = typeEquals(["dimension", "fontsize"], token);
+    const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
+    return hasWantedType && hasWantedPath;
+  },
+  transform: (token, config) => {
+    const value = getValue(token);
+    if (isPx(value)) {
+      const baseFont = config.basePxFontSize || 16;
+      const size = parseInt(value);
+      if (size === 0) {
+        return "0";
+      }
+      return `${size / baseFont}rem`;
+    }
+    return value;
+  }
+};
+var typographyName = {
+  name: "name/typography",
+  type: "name",
+  transitive: true,
+  // expanded tokens have different type so we match on path instead
+  filter: (token) => pathStartsWithOneOf(["typography"], token),
+  transform: (token) => {
+    return token.name.replace("-typography", "");
+  }
+};
+var resolveMath = {
+  name: "ds/resolveMath",
+  type: "value",
+  transitive: true,
+  filter: (token) => {
+    const isValidValue = ["string", "object"].includes(typeof getValue(token));
+    const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
+    return isValidValue && isTokenOfInterest;
+  },
+  transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
+};
+var unitless = {
+  name: "ds/unitless",
+  type: "value",
+  transitive: true,
+  filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
+  transform: (token) => parseInt(getValue(token))
+};
+
+// src/tokens/process/configs/shared.ts
+var prefix = "ds";
+var basePxFontSize = 16;
+var dsTransformers = [
+  "name/kebab",
+  resolveMath.name,
+  "ts/size/px",
+  sizeRem.name,
+  unitless.name,
+  "ts/typography/fontWeight",
+  typographyName.name,
+  "ts/color/modifiers",
+  "ts/color/css/hexrgba",
+  "ts/size/lineheight",
+  "shadow/css/shorthand"
+];
+
+// src/tokens/process/configs/color.ts
+var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) => {
+  const selector = `${colorScheme2 === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme2}"]`;
+  const layer = `ds.theme.color-scheme.${colorScheme2}`;
+  return {
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        // custom
+        colorScheme: colorScheme2,
+        theme,
+        selector,
+        layer,
+        //
+        prefix,
+        buildPath: `${theme}/`,
+        transforms: dsTransformers,
+        files: [
+          {
+            destination: `color-scheme/${colorScheme2}.css`,
+            format: formats.colorScheme.name,
+            filter: (token) => typeEquals("color", token) && !R3.startsWith(["global"], token.path)
+          }
+        ],
+        options: {
+          outputReferences: false
+        }
+      }
+    }
+  };
+};
+var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, ...permutation }) => {
+  const category = opts.category;
+  const color = category === "builtin" ? opts.color : permutation[`${category}-color`];
+  if (!color) {
+    throw new Error(
+      category === "builtin" ? `Missing color for built-in color ${opts.color}` : `Missing color for category ${category}`
+    );
+  }
+  const layer = `ds.theme.color`;
+  const isRootColor = color === buildOptions?.defaultColor;
+  const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
+  const config = {
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        // custom
+        colorScheme: colorScheme2,
+        theme,
+        selector,
+        layer,
+        //
+        prefix,
+        buildPath: `${theme}/`,
+        transforms: dsTransformers,
+        files: [
+          {
+            destination: `color/${color}.css`,
+            format: formats.colorCategory.name,
+            filter: (token) => category === "builtin" ? isSemanticColorToken(token, color) : isColorCategoryToken(token, category)
+          }
+        ],
+        options: {
+          outputReferences: true
+        }
+      }
+    }
+  };
+  return config;
+};
+
+// src/tokens/process/configs/semantic.ts
+import * as R4 from "ramda";
+import { outputReferencesFilter } from "style-dictionary/utils";
+var semanticVariables = ({ theme }) => {
+  const selector = `:root`;
+  const layer = `ds.theme.semantic`;
+  return {
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        // custom
+        theme,
+        basePxFontSize,
+        selector,
+        layer,
+        //
+        prefix,
+        buildPath: `${theme}/`,
+        transforms: dsTransformers,
+        files: [
+          {
+            destination: `semantic.css`,
+            format: formats.semantic.name,
+            filter: (token) => {
+              const isUwantedToken = R4.anyPass([R4.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R4.includes("_", token.path);
+              const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
+              const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
+              const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
+              return unwantedTokens;
+            }
+          }
+        ],
+        options: {
+          outputReferences: (token, options) => {
+            const include = pathStartsWithOneOf(["border-radius"], token);
+            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
+            return (include || isWantedSize) && outputReferencesFilter(token, options);
+          }
+        }
+      }
+    }
+  };
+};
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
+var BoxShadowTypes;
+(function(BoxShadowTypes2) {
+  BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
+  BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
+})(BoxShadowTypes || (BoxShadowTypes = {}));
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
+var ColorModifierTypes;
+(function(ColorModifierTypes2) {
+  ColorModifierTypes2["LIGHTEN"] = "lighten";
+  ColorModifierTypes2["DARKEN"] = "darken";
+  ColorModifierTypes2["MIX"] = "mix";
+  ColorModifierTypes2["ALPHA"] = "alpha";
+})(ColorModifierTypes || (ColorModifierTypes = {}));
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
+var ColorSpaceTypes;
+(function(ColorSpaceTypes2) {
+  ColorSpaceTypes2["LCH"] = "lch";
+  ColorSpaceTypes2["SRGB"] = "srgb";
+  ColorSpaceTypes2["P3"] = "p3";
+  ColorSpaceTypes2["HSL"] = "hsl";
+})(ColorSpaceTypes || (ColorSpaceTypes = {}));
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
+var Properties;
+(function(Properties2) {
+  Properties2["sizing"] = "sizing";
+  Properties2["height"] = "height";
+  Properties2["width"] = "width";
+  Properties2["spacing"] = "spacing";
+  Properties2["verticalPadding"] = "verticalPadding";
+  Properties2["horizontalPadding"] = "horizontalPadding";
+  Properties2["paddingTop"] = "paddingTop";
+  Properties2["paddingRight"] = "paddingRight";
+  Properties2["paddingBottom"] = "paddingBottom";
+  Properties2["paddingLeft"] = "paddingLeft";
+  Properties2["itemSpacing"] = "itemSpacing";
+  Properties2["fill"] = "fill";
+  Properties2["backgroundBlur"] = "backgroundBlur";
+  Properties2["border"] = "border";
+  Properties2["borderTop"] = "borderTop";
+  Properties2["borderRight"] = "borderRight";
+  Properties2["borderBottom"] = "borderBottom";
+  Properties2["borderLeft"] = "borderLeft";
+  Properties2["borderColor"] = "borderColor";
+  Properties2["borderRadius"] = "borderRadius";
+  Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
+  Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
+  Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
+  Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
+  Properties2["borderWidth"] = "borderWidth";
+  Properties2["borderWidthTop"] = "borderWidthTop";
+  Properties2["borderWidthRight"] = "borderWidthRight";
+  Properties2["borderWidthBottom"] = "borderWidthBottom";
+  Properties2["borderWidthLeft"] = "borderWidthLeft";
+  Properties2["boxShadow"] = "boxShadow";
+  Properties2["opacity"] = "opacity";
+  Properties2["fontFamilies"] = "fontFamilies";
+  Properties2["fontWeights"] = "fontWeights";
+  Properties2["fontSizes"] = "fontSizes";
+  Properties2["lineHeights"] = "lineHeights";
+  Properties2["typography"] = "typography";
+  Properties2["composition"] = "composition";
+  Properties2["letterSpacing"] = "letterSpacing";
+  Properties2["paragraphSpacing"] = "paragraphSpacing";
+  Properties2["textCase"] = "textCase";
+  Properties2["dimension"] = "dimension";
+  Properties2["textDecoration"] = "textDecoration";
+  Properties2["asset"] = "asset";
+  Properties2["tokenValue"] = "tokenValue";
+  Properties2["value"] = "value";
+  Properties2["tokenName"] = "tokenName";
+  Properties2["description"] = "description";
+})(Properties || (Properties = {}));
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
+var TokenSetStatus;
+(function(TokenSetStatus2) {
+  TokenSetStatus2["DISABLED"] = "disabled";
+  TokenSetStatus2["SOURCE"] = "source";
+  TokenSetStatus2["ENABLED"] = "enabled";
+})(TokenSetStatus || (TokenSetStatus = {}));
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
+var TokenTypes;
+(function(TokenTypes2) {
+  TokenTypes2["OTHER"] = "other";
+  TokenTypes2["COLOR"] = "color";
+  TokenTypes2["BORDER_RADIUS"] = "borderRadius";
+  TokenTypes2["SIZING"] = "sizing";
+  TokenTypes2["SPACING"] = "spacing";
+  TokenTypes2["TEXT"] = "text";
+  TokenTypes2["TYPOGRAPHY"] = "typography";
+  TokenTypes2["OPACITY"] = "opacity";
+  TokenTypes2["BORDER_WIDTH"] = "borderWidth";
+  TokenTypes2["STROKE_STYLE"] = "strokeStyle";
+  TokenTypes2["BOX_SHADOW"] = "boxShadow";
+  TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
+  TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
+  TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
+  TokenTypes2["FONT_SIZES"] = "fontSizes";
+  TokenTypes2["LETTER_SPACING"] = "letterSpacing";
+  TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
+  TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
+  TokenTypes2["TEXT_DECORATION"] = "textDecoration";
+  TokenTypes2["TEXT_CASE"] = "textCase";
+  TokenTypes2["COMPOSITION"] = "composition";
+  TokenTypes2["DIMENSION"] = "dimension";
+  TokenTypes2["BORDER"] = "border";
+  TokenTypes2["ASSET"] = "asset";
+  TokenTypes2["BOOLEAN"] = "boolean";
+  TokenTypes2["NUMBER"] = "number";
+})(TokenTypes || (TokenTypes = {}));
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
+var BorderValues;
+(function(BorderValues2) {
+  BorderValues2["BORDER_COLOR"] = "color";
+  BorderValues2["BORDER_WIDTH"] = "width";
+  BorderValues2["BORDER_STYLE"] = "style";
+})(BorderValues || (BorderValues = {}));
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
+var StrokeStyleValues;
+(function(StrokeStyleValues2) {
+  StrokeStyleValues2["SOLID"] = "solid";
+  StrokeStyleValues2["DASHED"] = "dashed";
+  StrokeStyleValues2["DOTTED"] = "dotted";
+  StrokeStyleValues2["DOUBLE"] = "double";
+  StrokeStyleValues2["GROOVE"] = "groove";
+  StrokeStyleValues2["RIDGE"] = "ridge";
+  StrokeStyleValues2["OUTSET"] = "outset";
+  StrokeStyleValues2["INSET"] = "inset";
+})(StrokeStyleValues || (StrokeStyleValues = {}));
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
+var BoxShadowValues;
+(function(BoxShadowValues2) {
+  BoxShadowValues2["TYPE"] = "type";
+  BoxShadowValues2["COLOR"] = "color";
+  BoxShadowValues2["X"] = "x";
+  BoxShadowValues2["Y"] = "y";
+  BoxShadowValues2["BLUR"] = "blur";
+  BoxShadowValues2["SPREAD"] = "spread";
+  BoxShadowValues2["BLEND_MODE"] = "blendMode";
+})(BoxShadowValues || (BoxShadowValues = {}));
+
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
+var TypographyValues;
+(function(TypographyValues2) {
+  TypographyValues2["FONT_FAMILY"] = "fontFamily";
+  TypographyValues2["FONT_WEIGHT"] = "fontWeight";
+  TypographyValues2["LINE_HEIGHT"] = "lineHeight";
+  TypographyValues2["FONT_SIZE"] = "fontSize";
+  TypographyValues2["LETTER_SPACING"] = "letterSpacing";
+  TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
+  TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
+  TypographyValues2["TEXT_DECORATION"] = "textDecoration";
+  TypographyValues2["TEXT_CASE"] = "textCase";
+})(TypographyValues || (TypographyValues = {}));
+
+// src/tokens/process/utils/getMultidimensionalThemes.ts
+import chalk from "chalk";
+import { kebabCase } from "change-case";
+import * as R5 from "ramda";
+var processed = Symbol("Type brand for ProcessedThemeObject");
+var hasUnknownProps = R5.pipe(R5.values, R5.none(R5.equals("unknown")), R5.not);
+
+// src/tokens/process/configs.ts
+void register(StyleDictionary, { withSDBuiltins: false });
+StyleDictionary.registerTransform(sizeRem);
+StyleDictionary.registerTransform(typographyName);
+StyleDictionary.registerTransform(resolveMath);
+StyleDictionary.registerTransform(unitless);
+for (const format of Object.values(formats)) {
+  StyleDictionary.registerFormat(format);
+}
+var configs = {
+  colorSchemeVariables,
+  mainColorVariables: colorCategoryVariables({ category: "main" }),
+  supportColorVariables: colorCategoryVariables({ category: "support" }),
+  neutralColorVariables: colorCategoryVariables({ category: "builtin", color: "neutral" }),
+  successColorVariables: colorCategoryVariables({ category: "builtin", color: "success" }),
+  dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
+  warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
+  infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
+  typographyVariables,
+  semanticVariables
+};
+
+// src/tokens/process/platform.ts
+var buildOptions = {
+  verbose: false,
+  processed$themes: [],
+  buildTokenFormats: {}
+};
+var sd = new StyleDictionary2();
+var buildConfigs = {
+  typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
+  "color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
+  "main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
+  "support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
+  "neutral-color": {
+    getConfig: configs.neutralColorVariables,
+    dimensions: ["semantic"],
+    log: ({ permutation: { theme } }) => `${theme} - neutral`
+  },
+  "success-color": {
+    getConfig: configs.successColorVariables,
+    dimensions: ["semantic"],
+    log: ({ permutation: { theme } }) => `${theme} - success`
+  },
+  "danger-color": {
+    getConfig: configs.dangerColorVariables,
+    dimensions: ["semantic"],
+    log: ({ permutation: { theme } }) => `${theme} - danger`
+  },
+  "warning-color": {
+    getConfig: configs.warningColorVariables,
+    dimensions: ["semantic"],
+    log: ({ permutation: { theme } }) => `${theme} - warning`
+  },
+  "info-color": {
+    getConfig: configs.infoColorVariables,
+    dimensions: ["semantic"],
+    log: ({ permutation: { theme } }) => `${theme} - info`
+  },
+  semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
+};
+
+// src/tokens/process/formats/css/color.ts
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
   [data-color-scheme="auto"] ${content}
@@ -88,8 +526,8 @@ var colorScheme = {
   color-scheme: ${colorScheme_};
 ` : "";
     const filteredAllTokens = allTokens.filter(
-      R2.allPass([
-        R2.anyPass([
+      R8.allPass([
+        R8.anyPass([
           // Include semantic tokens in the output
           isSemanticToken,
           // Include global color tokens
@@ -99,13 +537,17 @@ var colorScheme = {
         (t) => !isColorCategoryToken(t)
       ])
     );
-    const formattedTokens = filteredAllTokens.map(format).join("\n");
+    const formattedMap = filteredAllTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    const formattedTokens = formattedMap.map(R8.view(R8.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 ${colorSchemeProperty}}
 `;
     const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
-    const body = R2.isNotNil(layer) ? `@layer ${layer} {
+    const body = R8.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content} ${autoSelectorContent}
 }
 ` : `${selector} ${content} ${autoSelectorContent}
@@ -117,8 +559,9 @@ var colorCategory = {
   name: "ds/css-colorcategory",
   format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const format = R2.compose(
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
+    const format = R8.compose(
       createPropertyFormatter({
         outputReferences,
         dictionary,
@@ -134,12 +577,17 @@ var colorCategory = {
         }
       })
     );
-    const formattedTokens = dictionary.allTokens.map(format).join("\n");
+    const formattedMap = dictionary.allTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R8.view(R8.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 }
 `;
-    const body = R2.isNotNil(layer) ? `@layer ${layer} {
+    const body = R8.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -149,12 +597,12 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/semantic.ts
-import * as R3 from "ramda";
+import * as R9 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 isInlineTokens = R9.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)");
@@ -165,30 +613,30 @@ var overrideSizingFormula = (format, token) => {
     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 `
+var formatSizingTokens = (format, tokens) => R9.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 } = platform;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
     const format = createPropertyFormatter2({
       outputReferences,
       dictionary,
@@ -196,17 +644,28 @@ var semantic = {
       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(
+    const filteredTokens = R9.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
+    const [sizingTokens, restTokens] = R9.partition(
       (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
       filteredTokens
     );
-    const formattedTokens = [R3.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
+    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(R9.view(R9.lensProp("formatted"))).concat(sizingSnippet);
     const content = `{
 ${formattedTokens.join("\n")}
 }
 `;
-    const body = R3.isNotNil(layer) ? `@layer ${layer} {
+    const body = R9.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -216,29 +675,35 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/typography.ts
-import * as R4 from "ramda";
+import * as R10 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 typographyFontFamilyPredicate = R10.allPass([
+  R10.pathSatisfies(R10.includes("typography"), ["path"]),
+  R10.pathSatisfies(R10.includes("fontFamily"), ["path"])
 ]);
 var typography = {
   name: "ds/css-typography",
   format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
     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 filteredTokens = R10.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const formattedMap = filteredTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R10.view(R10.lensProp("formatted"))).join("\n");
     const content = selector ? `${selector} {
 ${formattedTokens}
 }` : formattedTokens;
-    const body = R4.isNotNil(layer) ? `@layer ${layer} {
+    const body = R10.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;
     return body;
@@ -253,78 +718,6 @@ var formats = {
   typography
 };
 
-// src/tokens/process/transformers.ts
-import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
-import * as R5 from "ramda";
-var isPx = R5.test(/\b\d+px\b/g);
-var sizeRem = {
-  name: "ds/size/toRem",
-  type: "value",
-  transitive: true,
-  filter: (token) => {
-    const hasWantedType = typeEquals(["dimension", "fontsize"], token);
-    const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
-    return hasWantedType && hasWantedPath;
-  },
-  transform: (token, config) => {
-    const value = getValue(token);
-    if (isPx(value)) {
-      const baseFont = config.basePxFontSize || 16;
-      const size = parseInt(value);
-      if (size === 0) {
-        return "0";
-      }
-      return `${size / baseFont}rem`;
-    }
-    return value;
-  }
-};
-var typographyName = {
-  name: "name/typography",
-  type: "name",
-  transitive: true,
-  // expanded tokens have different type so we match on path instead
-  filter: (token) => pathStartsWithOneOf(["typography"], token),
-  transform: (token) => {
-    return token.name.replace("-typography", "");
-  }
-};
-var resolveMath = {
-  name: "ds/resolveMath",
-  type: "value",
-  transitive: true,
-  filter: (token) => {
-    const isValidValue = ["string", "object"].includes(typeof getValue(token));
-    const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
-    return isValidValue && isTokenOfInterest;
-  },
-  transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
-};
-var unitless = {
-  name: "ds/unitless",
-  type: "value",
-  transitive: true,
-  filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
-  transform: (token) => parseInt(getValue(token))
-};
-
-// src/tokens/process/configs/shared.ts
-var prefix = "ds";
-var basePxFontSize = 16;
-var dsTransformers = [
-  "name/kebab",
-  resolveMath.name,
-  "ts/size/px",
-  sizeRem.name,
-  unitless.name,
-  "ts/typography/fontWeight",
-  typographyName.name,
-  "ts/color/modifiers",
-  "ts/color/css/hexrgba",
-  "ts/size/lineheight",
-  "shadow/css/shorthand"
-];
-
 // src/tokens/process/configs/typography.ts
 var typographyVariables = ({ theme, typography: typography2 }) => {
   const selector = `${typography2 === "primary" ? ":root, " : ""}[data-typography="${typography2}"]`;
@@ -350,6 +743,7 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
           sizeRem.name,
           "ts/size/lineheight",
           "ts/typography/fontWeight",
+          "ts/size/css/letterspacing",
           typographyName.name
         ],
         files: [