@digdir/designsystemet 1.3.0 → 1.5.0

package/dist/src/tokens/process/formats/css/semantic.js

@@ -1,6 +1,6 @@
 // src/tokens/process/formats/css/semantic.ts
-import * as R10 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
+import * as R15 from "ramda";
+import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
 
 // src/tokens/utils.ts
 import * as R from "ramda";
@@ -30,7 +30,10 @@ var pathStartsWithOneOf = R.curry(
       return false;
     }
     const tokenPath = mapToLowerCase(token.path);
-    const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
+    const matchPathsStartingWith = R.map((pathOrString) => {
+      const path = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
+      return R.startsWith(mapToLowerCase(path), tokenPath);
+    }, paths);
     return hasAnyTruth(matchPathsStartingWith);
   }
 );
@@ -66,19 +69,36 @@ function inlineTokens(shouldInline, tokens) {
     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/platform.ts
 import pc2 from "picocolors";
-import * as R9 from "ramda";
+import * as R14 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R8 from "ramda";
+import * as R13 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // src/tokens/process/configs/color.ts
-import * as R5 from "ramda";
+import * as R8 from "ramda";
 
 // src/tokens/process/formats/css/color.ts
 import * as R2 from "ramda";
@@ -136,10 +156,10 @@ ${selector} ${content} ${autoSelectorContent}
 };
 var colorCategory = {
   name: "ds/css-colorcategory",
-  format: async ({ dictionary, options, platform }) => {
+  format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer, files } = platform;
-    const destination = files?.[0]?.destination;
+    const { selector, layer } = platform;
+    const destination = file.destination;
     const format = R2.compose(
       createPropertyFormatter({
         outputReferences,
@@ -175,49 +195,97 @@ ${selector} ${content}
   }
 };
 
-// src/tokens/process/formats/css/typography.ts
+// src/tokens/process/formats/css/size.ts
 import * as R3 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R3.allPass([
-  R3.pathSatisfies(R3.includes("typography"), ["path"]),
-  R3.pathSatisfies(R3.includes("fontFamily"), ["path"])
-]);
-var typography = {
-  name: "ds/css-typography",
-  format: async ({ dictionary, options, platform }) => {
+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).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) => R3.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, files } = platform;
-    const destination = files?.[0]?.destination;
+    const { selector, layer } = platform;
+    const destination = file.destination;
     const format = createPropertyFormatter2({
       outputReferences,
       dictionary,
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R3.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const formattedMap = filteredTokens.map((token) => ({
+    const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
+    const filteredTokens = R3.reject((token) => R3.equals(["_size", "mode-font-size"], token.path), tokens);
+    const [sizingTokens, restTokens] = R3.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)
     }));
-    buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R3.view(R3.lensProp("formatted"))).join("\n");
-    const content = selector ? `${selector} {
-${formattedTokens}
-}` : formattedTokens;
+    const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
+      token: formattedSizingTokens.tokens[i],
+      formatted: t
+    }));
+    buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
+    const formattedTokens = [formattedMap.map(R3.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
+    const content = `${selector} {
+${formattedTokens.join("\n")}
+}
+`;
     const body = R3.isNotNil(layer) ? `@layer ${layer} {
 ${content}
-}` : content;
+}
+` : `${content}
+`;
     return body;
   }
 };
 
-// src/tokens/process/formats/css.ts
-var formats = {
-  colorScheme,
-  colorCategory,
-  semantic,
-  typography
-};
+// src/tokens/process/formats/css/size-mode.ts
+import * as R5 from "ramda";
+import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
 
 // src/tokens/process/transformers.ts
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
@@ -229,18 +297,22 @@ var sizeRem = {
   transitive: true,
   filter: (token) => {
     const hasWantedType = typeEquals(["dimension", "fontsize"], token);
-    const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], 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 size = parseInt(value, 10);
-      if (size === 0) {
+      const size2 = parseInt(value, 10);
+      if (size2 === 0) {
         return "0";
       }
-      return `${size / baseFont}rem`;
+      return `${size2 / baseFont}rem`;
     }
     return value;
   }
@@ -291,6 +363,154 @@ var dsTransformers = [
   "shadow/css/shorthand"
 ];
 
+// 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
+});
+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 = createPropertyFormatter3({
+      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")}
+  --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) === R5.last(sizes) ? `
+${wrapInLayer(sharedContent, layer)}` : "";
+    return body + sharedBody;
+  }
+};
+function wrapInLayer(content, layer) {
+  return R5.isNotNil(layer) ? `@layer ${layer} {
+${content}
+}
+` : `${content}
+`;
+}
+
+// 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 typographyFontFamilyPredicate2 = R7.allPass([
+  R7.pathSatisfies(R7.includes("typography"), ["path"]),
+  R7.pathSatisfies(R7.includes("fontFamily"), ["path"])
+]);
+function formatTypographySizeToken(token) {
+  return { ...token, $value: `calc(${token.$value} * var(--_ds-font-size-factor))` };
+}
+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(typographyFontFamilyPredicate2, dictionary.allTokens);
+    const tokens = R7.map(formatTypographySizeToken, filteredTokens);
+    const formattedMap = tokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R7.prop("formatted")).join("\n");
+    const sizeFactor = `  --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
+    const content = `${selector} {
+${sizeFactor}
+${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}"]`;
@@ -312,7 +532,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
           {
             destination: `color-scheme/${colorScheme2}.css`,
             format: formats.colorScheme.name,
-            filter: (token) => typeEquals("color", token) && !R5.startsWith(["global"], token.path)
+            filter: (token) => typeEquals("color", token) && !R8.startsWith(["global"], token.path)
           }
         ],
         options: {
@@ -363,7 +583,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
 };
 
 // src/tokens/process/configs/semantic.ts
-import * as R6 from "ramda";
+import * as R9 from "ramda";
 import { outputReferencesFilter } from "style-dictionary/utils";
 var semanticVariables = ({ theme }) => {
   const selector = `:root`;
@@ -386,9 +606,12 @@ var semanticVariables = ({ theme }) => {
             destination: `semantic.css`,
             format: formats.semantic.name,
             filter: (token) => {
-              const isUwantedToken = R6.anyPass([R6.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R6.includes("_", token.path);
-              const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], 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;
@@ -398,9 +621,126 @@ var semanticVariables = ({ theme }) => {
         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);
+            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, size: size2 }) => {
+  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")
         }
       }
     }
@@ -441,12 +781,9 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
             destination: `typography/${typography2}.css`,
             format: formats.typography.name,
             filter: (token) => {
-              const included = typeEquals(
-                ["typography", "fontweight", "fontFamily", "lineHeight", "dimension", "font", "fontsize"],
-                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);
+              return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token) && !(pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize"));
             }
           }
         ]
@@ -621,9 +958,9 @@ var TypographyValues;
 // src/tokens/process/utils/getMultidimensionalThemes.ts
 import { kebabCase } from "change-case";
 import pc from "picocolors";
-import * as R7 from "ramda";
+import * as R12 from "ramda";
 var processed = Symbol("Type brand for ProcessedThemeObject");
-var hasUnknownProps = R7.pipe(R7.values, R7.none(R7.equals("unknown")), R7.not);
+var hasUnknownProps = R12.pipe(R12.values, R12.none(R12.equals("unknown")), R12.not);
 
 // src/tokens/process/configs.ts
 void register(StyleDictionary, { withSDBuiltins: false });
@@ -643,7 +980,10 @@ var configs = {
   dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
   warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
   infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
+  sizeModeVariables,
+  sizeVariables,
   typographyVariables,
+  typeScaleVariables,
   semanticVariables
 };
 
@@ -656,6 +996,9 @@ var buildOptions = {
 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"] },
@@ -688,82 +1031,37 @@ var buildConfigs = {
 };
 
 // src/tokens/process/formats/css/semantic.ts
-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 = R10.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) => R10.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 }) => {
+  format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer, files } = platform;
-    const destination = files?.[0]?.destination;
-    const format = createPropertyFormatter3({
+    const { selector, layer } = platform;
+    const destination = file.destination;
+    const format = createPropertyFormatter6({
       outputReferences,
       dictionary,
       format: "css",
       usesDtcg
     });
     const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R10.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
-    const [sizingTokens, restTokens] = R10.partition(
-      (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
-      filteredTokens
-    );
-    const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
-    const formattedMap = restTokens.map((token) => ({
+    const formattedMap = tokens.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(R10.view(R10.lensProp("formatted"))).concat(sizingSnippet);
-    const content = `{
-${formattedTokens.join("\n")}
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R15.prop("formatted")).join("\n");
+    const content = `${selector} {
+${formattedTokens}
 }
 `;
-    const body = R10.isNotNil(layer) ? `@layer ${layer} {
-${selector} ${content}
+    const body = R15.isNotNil(layer) ? `@layer ${layer} {
+${content}
 }
-` : `${selector} ${content}
+` : `${content}
 `;
     return body;
   }
 };
 export {
-  isInlineTokens,
-  overrideSizingFormula,
   semantic
 };

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

@@ -0,0 +1,4 @@
+import type { Format } from 'style-dictionary/types';
+export declare const sizeMode: Format;
+export declare function wrapInLayer(content: string, layer?: string): string;
+//# sourceMappingURL=size-mode.d.ts.map

package/dist/src/tokens/process/formats/css/size-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size-mode.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/size-mode.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAerD,eAAO,MAAM,QAAQ,EAAE,MAsDtB,CAAC;AAEF,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAE1D"}