@digdir/designsystemet 1.13.2 → 1.13.3

package/dist/src/tokens/process/formats/css/size-mode.js

@@ -1,1084 +1,50 @@
-// src/tokens/process/formats/css/size-mode.ts
-import * as R15 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
-
-// src/tokens/utils.ts
+import { orderBySize, shortSizeName } from "../../../utils.js";
+import "../../configs/shared.js";
+import { buildOptions } from "../../platform.js";
 import * as R from "ramda";
-
-// src/tokens/types.ts
-var colorCategories = {
-  main: "main",
-  support: "support"
-};
-
-// src/tokens/utils.ts
-var mapToLowerCase = R.map(R.toLower);
-var hasAnyTruth = R.any(R.equals(true));
-var getType = (token) => (token.$type ?? token.type) || "";
-var getValue = (token) => token.$value ?? token.value;
-var typeEquals = R.curry(
-  (types, token) => {
-    if (R.isNil(token)) {
-      return false;
-    }
-    return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
-  }
-);
-var pathStartsWithOneOf = R.curry(
-  (paths, token) => {
-    if (R.isNil(token)) {
-      return false;
-    }
-    const tokenPath = mapToLowerCase(token.path);
-    const matchPathsStartingWith = R.map((pathOrString) => {
-      const path = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
-      return R.startsWith(mapToLowerCase(path), tokenPath);
-    }, paths);
-    return hasAnyTruth(matchPathsStartingWith);
-  }
-);
-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);
-}
-function isColorCategoryToken(token, category) {
-  if (!category) {
-    return Object.keys(colorCategories).some(
-      (colorCategory2) => isColorCategoryToken(token, colorCategory2)
-    );
-  }
-  return R.startsWith(["color", category], token.path);
-}
-var isDigit = (s) => /^\d+$/.test(s);
-function inlineTokens(shouldInline, tokens) {
-  const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
-  return otherTokens.map((token) => {
-    let transformed = getValue(token.original);
-    for (const ref of inlineableTokens) {
-      const refName = ref.path.join(".");
-      if (typeof transformed === "string") {
-        transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
-      }
-    }
-    const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
-    return tokenWithInlinedRefs;
-  });
-}
-var sizeMap = {
-  xsmall: "xs",
-  small: "sm",
-  medium: "md",
-  large: "lg",
-  xlarge: "xl"
-};
-function shortSizeName(size2) {
-  return sizeMap[size2] ?? size2;
-}
-var sizeComparator = (size2) => {
-  const sortIndex = Object.entries(sizeMap).findIndex(([key, val]) => key === size2 || val === size2);
-  return sortIndex ?? 0;
-};
-function orderBySize(sizes) {
-  return R.sortBy(sizeComparator, sizes);
-}
-
-// 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([
-      "border-radius",
-      "font-size"
-      /*, ['_size', 'mode-font-size']*/
-    ], token);
-    return hasWantedType && hasWantedPath;
-  },
-  transform: (token, config) => {
-    const value = getValue(token);
-    if (isPx(value)) {
-      const baseFont = config.basePxFontSize || 16;
-      const size2 = parseInt(value, 10);
-      if (size2 === 0) {
-        return "0";
-      }
-      return `${size2 / 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), 10)
-};
-
-// 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/platform.ts
-import pc2 from "picocolors";
-import * as R14 from "ramda";
-import StyleDictionary2 from "style-dictionary";
-
-// src/tokens/process/configs.ts
-import { register } from "@tokens-studio/sd-transforms";
-import * as R13 from "ramda";
-import StyleDictionary from "style-dictionary";
-
-// src/tokens/process/configs/color.ts
-import * as R8 from "ramda";
-
-// src/tokens/process/formats/css/color.ts
-import * as R3 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(
-      R3.allPass([
-        R3.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(R3.view(R3.lensProp("formatted"))).join("\n");
-    const content = `{
-${formattedTokens}
-${colorSchemeProperty}}
-`;
-    const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
-    const body = R3.isNotNil(layer) ? `@layer ${layer} {
-${selector} ${content} ${autoSelectorContent}
-}
-` : `${selector} ${content} ${autoSelectorContent}
-`;
-    return body;
-  }
-};
-var colorCategory = {
-  name: "ds/css-colorcategory",
-  format: async ({ dictionary, file, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const destination = file.destination;
-    const format = R3.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(R3.view(R3.lensProp("formatted"))).join("\n");
-    const content = `{
-${formattedTokens}
-}
-`;
-    const body = R3.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 createPropertyFormatter3 } from "style-dictionary/utils";
-
-// src/tokens/process/formats/css/size.ts
-import * as R4 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 = R4.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
-var overrideSizingFormula = (format, token) => {
-  const [name, value] = format(token).replace(/;$/, "").split(": ");
-  let calc;
-  let round;
-  if (token.path[1] === "unit") {
-    calc = `calc(1rem * ${value})`;
-  } else if (value.startsWith("floor")) {
-    calc = value.replace(/^floor\((.*)\)$/, "calc($1)");
-    round = `round(down, ${calc}, 1px)`;
-  } else {
-    calc = value.includes("*") ? `calc(${value})` : value;
-  }
-  return {
-    name,
-    round: round ?? calc,
-    calc
-  };
-};
-var formatSizingTokens = (format, tokens) => R4.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 }) => {
-  const usesRounding = round.filter((val, i) => val !== calc[i]);
-  return `
-${calc.join("\n")}
-
-  @supports (width: round(down, .1em, 1px)) {
-  ${usesRounding.join("\n  ")}
-  }`;
-};
-var size = {
-  name: "ds/css-size",
-  format: async ({ dictionary, file, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const destination = file.destination;
-    const format = createPropertyFormatter2({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R4.reject((token) => R4.equals(["_size", "mode-font-size"], token.path), tokens);
-    const [sizingTokens, restTokens] = R4.partition(
-      (t) => pathStartsWithOneOf(["_size"], t) && (isDigit(t.path[1]) || t.path[1] === "unit"),
-      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 formattedTokens = [formattedMap.map(R4.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
-    const content = `${selector} {
-${formattedTokens.join("\n")}
-}
-`;
-    const body = R4.isNotNil(layer) ? `@layer ${layer} {
-${content}
-}
-` : `${content}
-`;
-    return body;
-  }
-};
-
-// src/tokens/process/formats/css/semantic.ts
-var semantic = {
-  name: "ds/css-semantic",
-  format: async ({ dictionary, file, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const destination = file.destination;
-    const format = createPropertyFormatter3({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const formattedMap = tokens.map((token) => ({
-      token,
-      formatted: format(token)
-    }));
-    buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R5.prop("formatted")).join("\n");
-    const content = `${selector} {
-${formattedTokens}
-}
-`;
-    const body = R5.isNotNil(layer) ? `@layer ${layer} {
-${content}
-}
-` : `${content}
-`;
-    return body;
-  }
-};
-
-// src/tokens/process/formats/css/typography.ts
-import * as R6 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter4 } 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, file, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const destination = file.destination;
-    const format = createPropertyFormatter4({
-      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/type-scale.ts
-import * as R7 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter5 } from "style-dictionary/utils";
-var isTypographyFontFamilyToken = R7.allPass([
-  R7.pathSatisfies(R7.includes("typography"), ["path"]),
-  R7.pathSatisfies(R7.includes("fontFamily"), ["path"])
-]);
-var formatTypographySizeToken = (format, token) => {
-  const [name, value] = format(token).replace(/;$/, "").split(": ");
-  let calc;
-  let round;
-  if (R7.startsWith(["font-size"], token.path)) {
-    calc = `calc(${value} * var(--_ds-font-size-factor))`;
-    round = `round(${calc}, 1px)`;
-  } else {
-    calc = value;
-  }
-  return { name, calc, round: round ?? calc };
-};
-var formatTypographySizeTokens = (format, tokens) => R7.reduce(
-  (acc, token) => {
-    const { name, calc, round } = formatTypographySizeToken(format, token);
-    acc.tokens.push(token);
-    acc.calc.push(`${name}: ${calc};`);
-    acc.round.push(`${name}: ${round};`);
-    return acc;
-  },
-  { tokens: [], calc: [], round: [] },
-  tokens
-);
-var typeScale = {
-  name: "ds/css-type-scale",
-  format: async ({ dictionary, file, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const destination = file.destination;
-    const format = createPropertyFormatter5({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const filteredTokens = R7.reject(R7.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
-    const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
-    const formattedMap = formattedTokens.round.map((t, i) => ({
-      token: formattedTokens.tokens[i],
-      formatted: t
-    }));
-    buildOptions.buildTokenFormats[destination] = formattedMap;
-    const sizeFactor = `  --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
-    const content = `${selector} {
-${sizeFactor}${sizingTemplate(formattedTokens)}
-}`;
-    const body = R7.isNotNil(layer) ? `@layer ${layer} {
-${content}
-}` : content;
-    return body;
-  }
-};
-
-// src/tokens/process/formats/css.ts
-var formats = {
-  colorScheme,
-  colorCategory,
-  semantic,
-  sizeMode,
-  size,
-  typography,
-  typeScale
-};
-
-// 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) && !R8.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 R9 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 = R9.anyPass([R9.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R9.includes("_", token.path);
-              const unwantedPaths = pathStartsWithOneOf(
-                ["size", "_size", "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);
-            return include && outputReferencesFilter(token, options);
-          }
-        }
-      }
-    }
-  };
-};
-
-// src/tokens/process/configs/size.ts
-import * as R10 from "ramda";
-import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
-var sizeVariables = ({ theme }) => {
-  const selector = `:root, [data-size]`;
-  const layer = `ds.theme.size`;
-  return {
-    preprocessors: ["tokens-studio"],
-    platforms: {
-      css: {
-        // custom
-        theme,
-        basePxFontSize,
-        selector,
-        layer,
-        //
-        prefix,
-        buildPath: `${theme}/`,
-        transforms: dsTransformers,
-        files: [
-          {
-            destination: `size.css`,
-            format: formats.size.name,
-            filter: (token) => {
-              const isUwantedToken = R10.anyPass([R10.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R10.includes("_", token.path);
-              return pathStartsWithOneOf(["size", "_size"], token) && !(isUwantedToken || isPrivateToken);
-            }
-          }
-        ],
-        options: {
-          outputReferences: (token, options) => {
-            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && (isDigit(token.path[1]) || token.path[1] === "unit");
-            return isWantedSize && outputReferencesFilter2(token, options);
-          }
-        }
-      }
-    }
-  };
-};
-
-// src/tokens/process/configs/size-mode.ts
-import * as R11 from "ramda";
-var sizeModeVariables = ({ theme, size: size2 }) => {
-  const selector = `:root`;
-  const layer = `ds.theme.size-mode`;
-  return {
-    preprocessors: ["tokens-studio"],
-    platforms: {
-      css: {
-        // custom
-        size: size2,
-        theme,
-        basePxFontSize,
-        selector,
-        layer,
-        //
-        prefix,
-        buildPath: `${theme}/`,
-        transforms: dsTransformers,
-        files: [
-          {
-            destination: `size-mode/${size2}.css`,
-            format: formats.sizeMode.name,
-            filter: (token) => {
-              return R11.equals(["_size", "mode-font-size"], token.path);
-            }
-          }
-        ]
-      }
-    }
-  };
-};
-
-// src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme }) => {
-  const selector = ":root, [data-size]";
-  const layer = `ds.theme.type-scale`;
-  return {
-    usesDtcg: true,
-    preprocessors: ["tokens-studio"],
-    expand: {
-      include: ["typography"]
-    },
-    platforms: {
-      css: {
-        prefix,
-        selector,
-        layer,
-        buildPath: `${theme}/`,
-        basePxFontSize,
-        transforms: [
-          "name/kebab",
-          "ts/size/px",
-          sizeRem.name,
-          "ts/size/lineheight",
-          "ts/typography/fontWeight",
-          typographyName.name
-        ],
-        files: [
-          {
-            destination: `type-scale.css`,
-            format: formats.typeScale.name,
-            filter: (token) => {
-              const included = typeEquals(["typography", "dimension", "fontsize"], token);
-              if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
-              return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "border-width", "border-radius"], token) && (pathStartsWithOneOf(["font-size"], token) || token.path.includes("fontSize"));
-            }
-          }
-        ],
-        options: {
-          outputReferences: (token) => pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize")
-        }
-      }
-    }
-  };
-};
-
-// src/tokens/process/configs/typography.ts
-import { expandTypesMap } from "@tokens-studio/sd-transforms";
-var typographyVariables = ({ theme, typography: typography2 }) => {
-  const selector = `${typography2 === "primary" ? ":root, " : ""}[data-typography="${typography2}"]`;
-  const layer = `ds.theme.typography.${typography2}`;
-  return {
-    usesDtcg: true,
-    preprocessors: ["tokens-studio"],
-    expand: {
-      include: ["typography"],
-      typesMap: { ...expandTypesMap, typography: { ...expandTypesMap.typography, letterSpacing: "dimension" } }
-    },
-    platforms: {
-      css: {
-        prefix,
-        typography: typography2,
-        selector,
-        layer,
-        buildPath: `${theme}/`,
-        basePxFontSize,
-        transforms: [
-          "name/kebab",
-          "ts/size/px",
-          sizeRem.name,
-          "ts/size/lineheight",
-          "ts/typography/fontWeight",
-          "ts/size/css/letterspacing",
-          typographyName.name
-        ],
-        files: [
-          {
-            destination: `typography/${typography2}.css`,
-            format: formats.typography.name,
-            filter: (token) => {
-              const included = typeEquals(["fontweight", "fontFamily", "lineHeight", "dimension"], token);
-              if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
-              return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token) && !(pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize"));
-            }
-          }
-        ]
-      }
-    }
-  };
-};
-
-// ../../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 pc from "picocolors";
-import * as R12 from "ramda";
-var hasUnknownProps = R12.pipe(R12.values, R12.none(R12.equals("unknown")), R12.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" }),
-  sizeModeVariables,
-  sizeVariables,
-  typographyVariables,
-  typeScaleVariables,
-  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"] },
-  sizeMode: { getConfig: configs.sizeModeVariables, dimensions: ["size"] },
-  size: { getConfig: configs.sizeVariables, dimensions: ["semantic"] },
-  typeScale: { getConfig: configs.typeScaleVariables, dimensions: ["semantic"] },
-  "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/size-mode.ts
-var formatBaseSizeToken = (size2) => (token) => ({
-  ...token,
-  originalName: token.name,
-  name: `${token.name}--${shortSizeName(size2)}`,
-  $value: token.$value / basePxFontSize
+//#region src/tokens/process/formats/css/size-mode.ts
+const formatBaseSizeToken = (size) => (token) => ({
+	...token,
+	originalName: token.name,
+	name: `${token.name}--${shortSizeName(size)}`,
+	$value: token.$value / 16
 });
-var sizeMode = {
-  name: "ds/css-size-mode",
-  format: async ({ dictionary, file, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer, size: size2 } = platform;
-    const destination = file.destination;
-    const format = createPropertyFormatter6({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const sizeSpecificTokens = dictionary.allTokens.map(formatBaseSizeToken(size2));
-    const sizeSpecificVariables = sizeSpecificTokens.map(format).join("\n");
-    const formattedMap = sizeSpecificTokens.map((token) => ({
-      token,
-      formatted: format({
-        ...token,
-        // Remove the `--<size>` suffix for the token listing, since that is the only token we actually use
-        name: token.originalName
-      })
-    }));
-    buildOptions.buildTokenFormats[destination] = formattedMap;
-    const content = `${selector} /* ${size2} */ {
-${sizeSpecificVariables}
-}`;
-    const body = wrapInLayer(content, layer);
-    const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName);
-    const defaultSize = shortSizeName(buildOptions?.defaultSize ?? "");
-    const sizingToggles = `:root, [data-size] {
-  --ds-size: var(--ds-size--${defaultSize});
-${sizes.map((size3) => `  --ds-size--${size3}: var(--ds-size,);`).join("\n")}
+const sizeMode = {
+	name: "ds/css-size-mode",
+	format: async ({ dictionary, file, options, platform }) => {
+		const { outputReferences, usesDtcg } = options;
+		const { selector, layer, size } = platform;
+		const destination = file.destination;
+		const format = createPropertyFormatter({
+			outputReferences,
+			dictionary,
+			format: "css",
+			usesDtcg
+		});
+		const sizeSpecificTokens = dictionary.allTokens.map(formatBaseSizeToken(size));
+		const sizeSpecificVariables = sizeSpecificTokens.map(format).join("\n");
+		const formattedMap = sizeSpecificTokens.map((token) => ({
+			token,
+			formatted: format({
+				...token,
+				name: token.originalName
+			})
+		}));
+		buildOptions.buildTokenFormats[destination] = formattedMap;
+		const body = wrapInLayer(`${selector} /* ${size} */ {\n${sizeSpecificVariables}\n}`, layer);
+		const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName);
+		const sharedContent = `${`:root, [data-size] {
+  --ds-size: var(--ds-size--${shortSizeName(buildOptions?.defaultSize ?? "")});
+${sizes.map((size) => `  --ds-size--${size}: var(--ds-size,);`).join("\n")}
   --ds-size-mode-font-size:
-${sizes.map((size3) => `    var(--ds-size--${size3}, var(--ds-size-mode-font-size--${size3}))`).join("\n")};
-}`;
-    const sizingHelpers = sizes.map((size3) => `[data-size='${size3}'] { --ds-size: var(--ds-size--${size3}); }`).join("\n");
-    const sharedContent = `${sizingToggles}
-
-${sizingHelpers}`;
-    const sharedBody = shortSizeName(size2) === R15.last(sizes) ? `
-${wrapInLayer(sharedContent, layer)}` : "";
-    return body + sharedBody;
-  }
+${sizes.map((size) => `    var(--ds-size--${size}, var(--ds-size-mode-font-size--${size}))`).join("\n")};
+}`}\n\n${sizes.map((size) => `[data-size='${size}'] { --ds-size: var(--ds-size--${size}); }`).join("\n")}`;
+		return body + (shortSizeName(size) === R.last(sizes) ? `\n${wrapInLayer(sharedContent, layer)}` : "");
+	}
 };
 function wrapInLayer(content, layer) {
-  return R15.isNotNil(layer) ? `@layer ${layer} {
-${content}
+	return R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}\n` : `${content}\n`;
 }
-` : `${content}
-`;
-}
-export {
-  sizeMode,
-  wrapInLayer
-};
+//#endregion
+export { sizeMode, wrapInLayer };