@digdir/designsystemet 1.5.0 → 1.6.0

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

@@ -372,7 +372,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
 };
 
 // src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme, size: size2 }) => {
+var typeScaleVariables = ({ theme }) => {
   const selector = ":root, [data-size]";
   const layer = `ds.theme.type-scale`;
   return {
@@ -971,13 +971,33 @@ ${content}
 // src/tokens/process/formats/css/type-scale.ts
 import * as R15 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate2 = R15.allPass([
+var isTypographyFontFamilyToken = R15.allPass([
   R15.pathSatisfies(R15.includes("typography"), ["path"]),
   R15.pathSatisfies(R15.includes("fontFamily"), ["path"])
 ]);
-function formatTypographySizeToken(token) {
-  return { ...token, $value: `calc(${token.$value} * var(--_ds-font-size-factor))` };
-}
+var formatTypographySizeToken = (format, token) => {
+  const [name, value] = format(token).replace(/;$/, "").split(": ");
+  let calc;
+  let round;
+  if (R15.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) => R15.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 }) => {
@@ -990,18 +1010,16 @@ var typeScale = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R15.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
-    const tokens = R15.map(formatTypographySizeToken, filteredTokens);
-    const formattedMap = tokens.map((token) => ({
-      token,
-      formatted: format(token)
+    const filteredTokens = R15.reject(R15.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 formattedTokens = formattedMap.map(R15.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}
+${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
     const body = R15.isNotNil(layer) ? `@layer ${layer} {
 ${content}

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

@@ -58,11 +58,11 @@ function isColorCategoryToken(token, category) {
 var isDigit = (s) => /^\d+$/.test(s);
 function traverseObj(obj, fn) {
   for (const key in obj) {
-    const prop4 = obj[key];
-    if (prop4 != null) {
-      fn.apply(null, [obj, key, prop4]);
-      if (typeof prop4 === "object") {
-        traverseObj(prop4, fn);
+    const prop3 = obj[key];
+    if (prop3 != null) {
+      fn.apply(null, [obj, key, prop3]);
+      if (typeof prop3 === "object") {
+        traverseObj(prop3, fn);
       }
     }
   }
@@ -807,13 +807,33 @@ ${content}
 // src/tokens/process/formats/css/type-scale.ts
 import * as R10 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate2 = R10.allPass([
+var isTypographyFontFamilyToken = R10.allPass([
   R10.pathSatisfies(R10.includes("typography"), ["path"]),
   R10.pathSatisfies(R10.includes("fontFamily"), ["path"])
 ]);
-function formatTypographySizeToken(token) {
-  return { ...token, $value: `calc(${token.$value} * var(--_ds-font-size-factor))` };
-}
+var formatTypographySizeToken = (format, token) => {
+  const [name, value] = format(token).replace(/;$/, "").split(": ");
+  let calc;
+  let round;
+  if (R10.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) => R10.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 }) => {
@@ -826,18 +846,16 @@ var typeScale = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R10.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
-    const tokens = R10.map(formatTypographySizeToken, filteredTokens);
-    const formattedMap = tokens.map((token) => ({
-      token,
-      formatted: format(token)
+    const filteredTokens = R10.reject(R10.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 formattedTokens = formattedMap.map(R10.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}
+${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
     const body = R10.isNotNil(layer) ? `@layer ${layer} {
 ${content}
@@ -1050,7 +1068,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
 };
 
 // src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme, size: size2 }) => {
+var typeScaleVariables = ({ theme }) => {
   const selector = ":root, [data-size]";
   const layer = `ds.theme.type-scale`;
   return {

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

@@ -401,13 +401,33 @@ ${content}
 // 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([
+var isTypographyFontFamilyToken = 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 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 }) => {
@@ -420,18 +440,16 @@ var typeScale = {
       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)
+    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 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}
+${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
     const body = R7.isNotNil(layer) ? `@layer ${layer} {
 ${content}
@@ -644,7 +662,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
 };
 
 // src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme, size: size2 }) => {
+var typeScaleVariables = ({ theme }) => {
   const selector = ":root, [data-size]";
   const layer = `ds.theme.type-scale`;
   return {

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

@@ -461,13 +461,33 @@ ${content}
 // 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([
+var isTypographyFontFamilyToken = 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 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 }) => {
@@ -480,18 +500,16 @@ var typeScale = {
       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)
+    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 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}
+${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
     const body = R7.isNotNil(layer) ? `@layer ${layer} {
 ${content}
@@ -704,7 +722,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
 };
 
 // src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme, size: size2 }) => {
+var typeScaleVariables = ({ theme }) => {
   const selector = ":root, [data-size]";
   const layer = `ds.theme.type-scale`;
   return {

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

@@ -435,13 +435,33 @@ ${content}
 // 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([
+var isTypographyFontFamilyToken = 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 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 }) => {
@@ -454,18 +474,16 @@ var typeScale = {
       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)
+    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 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}
+${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
     const body = R7.isNotNil(layer) ? `@layer ${layer} {
 ${content}
@@ -678,7 +696,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
 };
 
 // src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme, size: size2 }) => {
+var typeScaleVariables = ({ theme }) => {
   const selector = ":root, [data-size]";
   const layer = `ds.theme.type-scale`;
   return {

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

@@ -13,5 +13,9 @@ export declare const overrideSizingFormula: (format: (t: TransformedToken) => st
     round: string;
     calc: string;
 };
+export declare const sizingTemplate: ({ round, calc }: {
+    round: string[];
+    calc: string[];
+}) => string;
 export declare const size: Format;
 //# sourceMappingURL=size.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/size.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AASrD,eAAO,MAAM,cAAc,MAJY,gBAAgB,YAI+C,CAAC;AAEvG;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAQ,CAAC,CAAC,EAAE,gBAAgB,KAAK,MAAM,EAAE,OAAO,gBAAgB;;;;CAmBrG,CAAC;AAiCF,eAAO,MAAM,IAAI,EAAE,MAyClB,CAAC"}
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/size.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AASrD,eAAO,MAAM,cAAc,MAJY,gBAAgB,YAI+C,CAAC;AAEvG;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAQ,CAAC,CAAC,EAAE,gBAAgB,KAAK,MAAM,EAAE,OAAO,gBAAgB;;;;CAmBrG,CAAC;AAwBF,eAAO,MAAM,cAAc,GAAI,iBAAiB;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,WAOlF,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,MAyClB,CAAC"}

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

@@ -408,13 +408,33 @@ ${content}
 // 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([
+var isTypographyFontFamilyToken = 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 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 }) => {
@@ -427,18 +447,16 @@ var typeScale = {
       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)
+    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 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}
+${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
     const body = R7.isNotNil(layer) ? `@layer ${layer} {
 ${content}
@@ -651,7 +669,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
 };
 
 // src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme, size: size2 }) => {
+var typeScaleVariables = ({ theme }) => {
   const selector = ":root, [data-size]";
   const layer = `ds.theme.type-scale`;
   return {
@@ -1065,5 +1083,6 @@ ${content}
 export {
   isInlineTokens,
   overrideSizingFormula,
-  size
+  size,
+  sizingTemplate
 };

package/dist/src/tokens/process/formats/css/type-scale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type-scale.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/type-scale.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAevE,eAAO,MAAM,SAAS,EAAE,MAgCvB,CAAC"}
+{"version":3,"file":"type-scale.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/type-scale.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AA2CvE,eAAO,MAAM,SAAS,EAAE,MA8BvB,CAAC"}

package/dist/src/tokens/process/formats/css/type-scale.js

@@ -699,7 +699,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
 };
 
 // src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme, size: size2 }) => {
+var typeScaleVariables = ({ theme }) => {
   const selector = ":root, [data-size]";
   const layer = `ds.theme.type-scale`;
   return {
@@ -1026,13 +1026,33 @@ var buildConfigs = {
 };
 
 // src/tokens/process/formats/css/type-scale.ts
-var typographyFontFamilyPredicate2 = R15.allPass([
+var isTypographyFontFamilyToken = R15.allPass([
   R15.pathSatisfies(R15.includes("typography"), ["path"]),
   R15.pathSatisfies(R15.includes("fontFamily"), ["path"])
 ]);
-function formatTypographySizeToken(token) {
-  return { ...token, $value: `calc(${token.$value} * var(--_ds-font-size-factor))` };
-}
+var formatTypographySizeToken = (format, token) => {
+  const [name, value] = format(token).replace(/;$/, "").split(": ");
+  let calc;
+  let round;
+  if (R15.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) => R15.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 }) => {
@@ -1045,18 +1065,16 @@ var typeScale = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R15.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
-    const tokens = R15.map(formatTypographySizeToken, filteredTokens);
-    const formattedMap = tokens.map((token) => ({
-      token,
-      formatted: format(token)
+    const filteredTokens = R15.reject(R15.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 formattedTokens = formattedMap.map(R15.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}
+${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
     const body = R15.isNotNil(layer) ? `@layer ${layer} {
 ${content}

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

@@ -460,13 +460,33 @@ ${content}
 // src/tokens/process/formats/css/type-scale.ts
 import * as R7 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter5 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R7.allPass([
+var isTypographyFontFamilyToken = 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 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 }) => {
@@ -479,18 +499,16 @@ var typeScale = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R7.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const tokens = R7.map(formatTypographySizeToken, filteredTokens);
-    const formattedMap = tokens.map((token) => ({
-      token,
-      formatted: format(token)
+    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 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}
+${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
     const body = R7.isNotNil(layer) ? `@layer ${layer} {
 ${content}
@@ -703,7 +721,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
 };
 
 // src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme, size: size2 }) => {
+var typeScaleVariables = ({ theme }) => {
   const selector = ":root, [data-size]";
   const layer = `ds.theme.type-scale`;
   return {
@@ -1030,7 +1048,7 @@ var buildConfigs = {
 };
 
 // src/tokens/process/formats/css/typography.ts
-var typographyFontFamilyPredicate2 = R15.allPass([
+var typographyFontFamilyPredicate = R15.allPass([
   R15.pathSatisfies(R15.includes("typography"), ["path"]),
   R15.pathSatisfies(R15.includes("fontFamily"), ["path"])
 ]);
@@ -1046,7 +1064,7 @@ var typography = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R15.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
+    const filteredTokens = R15.reject(typographyFontFamilyPredicate, dictionary.allTokens);
     const formattedMap = filteredTokens.map((token) => ({
       token,
       formatted: format(token)