@digdir/designsystemet 1.5.1 → 1.6.1

package/dist/src/index.js

@@ -253,6 +253,7 @@ var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.valu
 var getColorMetadataByNumber = (number) => {
   return colorMetadataByNumber[number];
 };
+var colorNames = Object.keys(colorMetadata);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -1471,18 +1472,51 @@ var getDefaultToken = (tokenPath) => {
 
 // src/tokens/create/generators/color.ts
 import * as R4 from "ramda";
-var generateColor = (colorArray) => {
+var generateColor = (colorArray, overrides) => {
   const obj = {};
   const $type = "color";
   for (const index in colorArray) {
-    obj[Number(index) + 1] = { $type, $value: colorArray[index].hex };
+    const position = Number(index) + 1;
+    const overrideValue = overrides?.[position];
+    obj[position] = {
+      $type,
+      $value: overrideValue || colorArray[index].hex
+    };
   }
   return obj;
 };
-var generateColorScheme = (themeName, colorScheme2, colors) => {
-  const main = R4.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors.main);
-  const support = R4.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors.support);
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2));
+var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
+  const createColorOverrides = (colorName) => {
+    if (!overrides?.colors || !(colorName in overrides.colors)) {
+      return void 0;
+    }
+    const colorOverrides = overrides.colors[colorName];
+    const positionOverrides = {};
+    Object.entries(colorOverrides).forEach(([semanticTokenName, modeOverrides]) => {
+      const position = colorMetadata[semanticTokenName].number;
+      if (position) {
+        let overrideValue;
+        if (colorScheme2 === "light" && modeOverrides.light) {
+          overrideValue = modeOverrides.light;
+        } else if (colorScheme2 === "dark" && modeOverrides.dark) {
+          overrideValue = modeOverrides.dark;
+        }
+        if (overrideValue) {
+          positionOverrides[position] = overrideValue;
+        }
+      }
+    });
+    return Object.keys(positionOverrides).length > 0 ? positionOverrides : void 0;
+  };
+  const main = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    colors.main
+  );
+  const support = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    colors.support
+  );
+  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2), createColorOverrides("neutral"));
   return {
     [themeName]: {
       ...main,
@@ -1947,8 +1981,8 @@ var generateSemantic = (colors) => {
     ["main-color", mainColorNames],
     ["support-color", supportColorNames]
   ];
-  for (const [colorCategory2, colorNames] of categories) {
-    for (const colorName of colorNames) {
+  for (const [colorCategory2, colorNames2] of categories) {
+    for (const colorName of colorNames2) {
       const category = colorCategory2.replace("-color", "");
       const customColorTokens = {
         color: {
@@ -2204,7 +2238,7 @@ var cliOptions = {
   }
 };
 var createTokens = async (opts) => {
-  const { colors, typography: typography2, name, borderRadius } = opts;
+  const { colors, typography: typography2, name, borderRadius, overrides } = opts;
   const colorSchemes = ["light", "dark"];
   const semantic2 = generateSemantic(colors);
   const tokenSets = new Map([
@@ -2222,7 +2256,7 @@ var createTokens = async (opts) => {
     [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
     ...colorSchemes.flatMap((scheme) => [
       [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
-      [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors)]
+      [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors, overrides)]
     ]),
     [`themes/${name}`, generateTheme(colors, name, borderRadius)],
     ["semantic/color", semantic2.color],
@@ -2576,11 +2610,11 @@ import * as R8 from "ramda";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.5.1",
+  version: "1.6.1",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
-    node: ">=22.19.0"
+    node: ">=20 <25"
   },
   repository: {
     type: "git",
@@ -2628,7 +2662,7 @@ var package_default = {
     "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
     "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
     "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
-    test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
+    test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
     "digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
     "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
     "update:template": "tsx ./src/scripts/update-template.ts",
@@ -2643,30 +2677,30 @@ var package_default = {
     "change-case": "^5.4.4",
     "chroma-js": "^3.1.2",
     "colorjs.io": "^0.6.0-alpha.1",
-    commander: "^14.0.0",
+    commander: "^14.0.1",
     "fast-glob": "^3.3.3",
     hsluv: "^1.0.1",
     "object-hash": "^3.0.0",
     picocolors: "^1.1.1",
     postcss: "^8.5.6",
     ramda: "^0.31.3",
-    "style-dictionary": "^5.0.4",
-    zod: "^4.1.5",
-    "zod-validation-error": "^4.0.1"
+    "style-dictionary": "^5.1.0",
+    zod: "^4.1.11",
+    "zod-validation-error": "^4.0.2"
   },
   devDependencies: {
     "@tokens-studio/types": "0.5.2",
     "@types/apca-w3": "^0.1.3",
     "@types/chroma-js": "^3.1.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.18.1",
+    "@types/node": "^22.18.8",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.31.1",
-    "fs-extra": "^11.3.1",
+    "fs-extra": "^11.3.2",
     tslib: "^2.8.1",
     tsup: "^8.5.0",
-    tsx: "^4.20.5",
-    typescript: "^5.9.2"
+    tsx: "^4.20.6",
+    typescript: "^5.9.3"
   }
 };
 
@@ -2725,11 +2759,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);
       }
     }
   }
@@ -3260,13 +3294,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 }) => {
@@ -3279,18 +3333,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}
@@ -3977,6 +4029,7 @@ export {
   canTextBeUsedOnColors,
   cliOptions,
   colorMetadata,
+  colorNames,
   convertColor,
   convertToHex,
   createTokens,

package/dist/src/scripts/createJsonSchema.js

@@ -254,6 +254,7 @@ var colorMetadata = {
   }
 };
 var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+var colorNames = Object.keys(colorMetadata);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -323,6 +324,15 @@ var colorCategorySchema = z.record(
 ).refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
   error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
 }).describe("An object with one or more color definitions. The property name is used as the color name.");
+var colorModeOverrideSchema = z.object({
+  light: colorSchema.optional(),
+  dark: colorSchema.optional()
+}).describe('Override values for semantic color tokens like "background-subtle", "border-default", etc.');
+var colorWeightOverrideSchema = z.partialRecord(z.enum(colorNames), colorModeOverrideSchema).describe('The name of the color to add overrides for, e.g. "accent"');
+var semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
+var overridesSchema = z.object({
+  colors: semanticColorOverrideSchema.optional()
+}).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({
     main: colorCategorySchema,
@@ -332,7 +342,8 @@ var themeSchema = z.object({
   typography: z.object({
     fontFamily: z.string().meta({ description: "Sets the font-family for this theme" })
   }).describe("Defines the typography for a given theme").optional(),
-  borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional()
+  borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional(),
+  overrides: overridesSchema
 }).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
 var commonConfig = z.object({
   clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional()

package/dist/src/scripts/update-preview-tokens.js

@@ -1648,6 +1648,7 @@ var colorMetadata = {
   }
 };
 var colorMetadataByNumber = R2.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+var colorNames = Object.keys(colorMetadata);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -1728,18 +1729,51 @@ var generateColorContrast = (color, type) => {
 };
 
 // src/tokens/create/generators/color.ts
-var generateColor = (colorArray) => {
+var generateColor = (colorArray, overrides) => {
   const obj = {};
   const $type = "color";
   for (const index in colorArray) {
-    obj[Number(index) + 1] = { $type, $value: colorArray[index].hex };
+    const position = Number(index) + 1;
+    const overrideValue = overrides?.[position];
+    obj[position] = {
+      $type,
+      $value: overrideValue || colorArray[index].hex
+    };
   }
   return obj;
 };
-var generateColorScheme = (themeName, colorScheme2, colors) => {
-  const main = R4.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors.main);
-  const support = R4.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors.support);
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2));
+var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
+  const createColorOverrides = (colorName) => {
+    if (!overrides?.colors || !(colorName in overrides.colors)) {
+      return void 0;
+    }
+    const colorOverrides = overrides.colors[colorName];
+    const positionOverrides = {};
+    Object.entries(colorOverrides).forEach(([semanticTokenName, modeOverrides]) => {
+      const position = colorMetadata[semanticTokenName].number;
+      if (position) {
+        let overrideValue;
+        if (colorScheme2 === "light" && modeOverrides.light) {
+          overrideValue = modeOverrides.light;
+        } else if (colorScheme2 === "dark" && modeOverrides.dark) {
+          overrideValue = modeOverrides.dark;
+        }
+        if (overrideValue) {
+          positionOverrides[position] = overrideValue;
+        }
+      }
+    });
+    return Object.keys(positionOverrides).length > 0 ? positionOverrides : void 0;
+  };
+  const main = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    colors.main
+  );
+  const support = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    colors.support
+  );
+  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2), createColorOverrides("neutral"));
   return {
     [themeName]: {
       ...main,
@@ -2204,8 +2238,8 @@ var generateSemantic = (colors) => {
     ["main-color", mainColorNames],
     ["support-color", supportColorNames]
   ];
-  for (const [colorCategory2, colorNames] of categories) {
-    for (const colorName of colorNames) {
+  for (const [colorCategory2, colorNames2] of categories) {
+    for (const colorName of colorNames2) {
       const category = colorCategory2.replace("-color", "");
       const customColorTokens = {
         color: {
@@ -2445,7 +2479,7 @@ var generateTypography = (themeName, { fontFamily }) => {
 
 // src/tokens/create.ts
 var createTokens = async (opts) => {
-  const { colors, typography: typography2, name, borderRadius } = opts;
+  const { colors, typography: typography2, name, borderRadius, overrides } = opts;
   const colorSchemes = ["light", "dark"];
   const semantic2 = generateSemantic(colors);
   const tokenSets = new Map([
@@ -2463,7 +2497,7 @@ var createTokens = async (opts) => {
     [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
     ...colorSchemes.flatMap((scheme) => [
       [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
-      [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors)]
+      [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors, overrides)]
     ]),
     [`themes/${name}`, generateTheme(colors, name, borderRadius)],
     ["semantic/color", semantic2.color],
@@ -2539,11 +2573,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);
       }
     }
   }
@@ -2982,13 +3016,33 @@ ${content}
 // src/tokens/process/formats/css/type-scale.ts
 import * as R14 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate2 = R14.allPass([
+var isTypographyFontFamilyToken = R14.allPass([
   R14.pathSatisfies(R14.includes("typography"), ["path"]),
   R14.pathSatisfies(R14.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 (R14.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) => R14.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 }) => {
@@ -3001,18 +3055,16 @@ var typeScale = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R14.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
-    const tokens = R14.map(formatTypographySizeToken, filteredTokens);
-    const formattedMap = tokens.map((token) => ({
-      token,
-      formatted: format(token)
+    const filteredTokens = R14.reject(R14.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(R14.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 = R14.isNotNil(layer) ? `@layer ${layer} {
 ${content}

package/dist/src/tokens/build.js

@@ -49,11 +49,11 @@ import pc4 from "picocolors";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.5.1",
+  version: "1.6.1",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
-    node: ">=22.19.0"
+    node: ">=20 <25"
   },
   repository: {
     type: "git",
@@ -101,7 +101,7 @@ var package_default = {
     "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
     "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
     "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
-    test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
+    test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
     "digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
     "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
     "update:template": "tsx ./src/scripts/update-template.ts",
@@ -116,30 +116,30 @@ var package_default = {
     "change-case": "^5.4.4",
     "chroma-js": "^3.1.2",
     "colorjs.io": "^0.6.0-alpha.1",
-    commander: "^14.0.0",
+    commander: "^14.0.1",
     "fast-glob": "^3.3.3",
     hsluv: "^1.0.1",
     "object-hash": "^3.0.0",
     picocolors: "^1.1.1",
     postcss: "^8.5.6",
     ramda: "^0.31.3",
-    "style-dictionary": "^5.0.4",
-    zod: "^4.1.5",
-    "zod-validation-error": "^4.0.1"
+    "style-dictionary": "^5.1.0",
+    zod: "^4.1.11",
+    "zod-validation-error": "^4.0.2"
   },
   devDependencies: {
     "@tokens-studio/types": "0.5.2",
     "@types/apca-w3": "^0.1.3",
     "@types/chroma-js": "^3.1.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.18.1",
+    "@types/node": "^22.18.8",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.31.1",
-    "fs-extra": "^11.3.1",
+    "fs-extra": "^11.3.2",
     tslib: "^2.8.1",
     tsup: "^8.5.0",
-    tsx: "^4.20.5",
-    typescript: "^5.9.2"
+    tsx: "^4.20.6",
+    typescript: "^5.9.3"
   }
 };
 
@@ -206,11 +206,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);
       }
     }
   }
@@ -649,13 +649,33 @@ ${content}
 // src/tokens/process/formats/css/type-scale.ts
 import * as R8 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate2 = R8.allPass([
+var isTypographyFontFamilyToken = R8.allPass([
   R8.pathSatisfies(R8.includes("typography"), ["path"]),
   R8.pathSatisfies(R8.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 (R8.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) => R8.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 }) => {
@@ -668,18 +688,16 @@ var typeScale = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R8.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
-    const tokens = R8.map(formatTypographySizeToken, filteredTokens);
-    const formattedMap = tokens.map((token) => ({
-      token,
-      formatted: format(token)
+    const filteredTokens = R8.reject(R8.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(R8.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 = R8.isNotNil(layer) ? `@layer ${layer} {
 ${content}

package/dist/src/tokens/create/generators/$designsystemet.js

@@ -1,11 +1,11 @@
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.5.1",
+  version: "1.6.1",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
-    node: ">=22.19.0"
+    node: ">=20 <25"
   },
   repository: {
     type: "git",
@@ -53,7 +53,7 @@ var package_default = {
     "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
     "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
     "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
-    test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
+    test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
     "digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
     "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
     "update:template": "tsx ./src/scripts/update-template.ts",
@@ -68,30 +68,30 @@ var package_default = {
     "change-case": "^5.4.4",
     "chroma-js": "^3.1.2",
     "colorjs.io": "^0.6.0-alpha.1",
-    commander: "^14.0.0",
+    commander: "^14.0.1",
     "fast-glob": "^3.3.3",
     hsluv: "^1.0.1",
     "object-hash": "^3.0.0",
     picocolors: "^1.1.1",
     postcss: "^8.5.6",
     ramda: "^0.31.3",
-    "style-dictionary": "^5.0.4",
-    zod: "^4.1.5",
-    "zod-validation-error": "^4.0.1"
+    "style-dictionary": "^5.1.0",
+    zod: "^4.1.11",
+    "zod-validation-error": "^4.0.2"
   },
   devDependencies: {
     "@tokens-studio/types": "0.5.2",
     "@types/apca-w3": "^0.1.3",
     "@types/chroma-js": "^3.1.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.18.1",
+    "@types/node": "^22.18.8",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.31.1",
-    "fs-extra": "^11.3.1",
+    "fs-extra": "^11.3.2",
     tslib: "^2.8.1",
     tsup: "^8.5.0",
-    tsx: "^4.20.5",
-    typescript: "^5.9.2"
+    tsx: "^4.20.6",
+    typescript: "^5.9.3"
   }
 };
 

package/dist/src/tokens/create/generators/color.d.ts

@@ -1,5 +1,6 @@
 import type { ColorScheme } from '../../../colors/types.js';
+import type { ColorOverrideSchema } from '../../../config.js';
 import type { Colors, TokenSet } from '../../types.js';
-export declare const generateColorScheme: (themeName: string, colorScheme: ColorScheme, colors: Colors) => TokenSet;
+export declare const generateColorScheme: (themeName: string, colorScheme: ColorScheme, colors: Colors, overrides?: ColorOverrideSchema) => TokenSet;
 export declare const generateColorGlobal: (colorScheme: ColorScheme) => TokenSet;
 //# sourceMappingURL=color.d.ts.map