@digdir/designsystemet 1.5.0 → 1.6.0

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

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

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/color.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAS,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAWvD,eAAO,MAAM,mBAAmB,GAAI,WAAW,MAAM,EAAE,aAAa,WAAW,EAAE,QAAQ,MAAM,KAAG,QAYjG,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,aAAa,WAAW,KAAG,QAgB9D,CAAC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAS,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,eAAO,MAAM,mBAAmB,GAC9B,WAAW,MAAM,EACjB,aAAa,WAAW,EACxB,QAAQ,MAAM,EACd,YAAY,mBAAmB,KAC9B,QAkDF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,aAAa,WAAW,KAAG,QAgB9D,CAAC"}

package/dist/src/tokens/create/generators/color.js

@@ -253,6 +253,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";
@@ -333,18 +334,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, colorScheme, colors) => {
-  const main = R3.map((color) => generateColor(generateColorScale(color, colorScheme)), colors.main);
-  const support = R3.map((color) => generateColor(generateColorScale(color, colorScheme)), colors.support);
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme));
+var generateColorScheme = (themeName, colorScheme, 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 (colorScheme === "light" && modeOverrides.light) {
+          overrideValue = modeOverrides.light;
+        } else if (colorScheme === "dark" && modeOverrides.dark) {
+          overrideValue = modeOverrides.dark;
+        }
+        if (overrideValue) {
+          positionOverrides[position] = overrideValue;
+        }
+      }
+    });
+    return Object.keys(positionOverrides).length > 0 ? positionOverrides : void 0;
+  };
+  const main = R3.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)),
+    colors.main
+  );
+  const support = R3.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)),
+    colors.support
+  );
+  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme), createColorOverrides("neutral"));
   return {
     [themeName]: {
       ...main,

package/dist/src/tokens/create/write.js

@@ -46,11 +46,11 @@ var readFile = async (path2, dry, allowFileNotFound) => {
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.5.0",
+  version: "1.6.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
-    node: ">=22.19.0"
+    node: ">=20 <25"
   },
   repository: {
     type: "git",
@@ -98,7 +98,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",
@@ -113,7 +113,7 @@ 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",
@@ -121,18 +121,18 @@ var package_default = {
     postcss: "^8.5.6",
     ramda: "^0.31.3",
     "style-dictionary": "^5.0.4",
-    zod: "^4.1.5",
-    "zod-validation-error": "^4.0.1"
+    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.6",
     "@types/object-hash": "^3.0.6",
-    "@types/ramda": "^0.31.0",
-    "fs-extra": "^11.3.1",
+    "@types/ramda": "^0.31.1",
+    "fs-extra": "^11.3.2",
     tslib: "^2.8.1",
     tsup: "^8.5.0",
     tsx: "^4.20.5",

package/dist/src/tokens/create.js

@@ -1248,6 +1248,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";
@@ -1328,18 +1329,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, colorScheme, colors) => {
-  const main = R4.map((color) => generateColor(generateColorScale(color, colorScheme)), colors.main);
-  const support = R4.map((color) => generateColor(generateColorScale(color, colorScheme)), colors.support);
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme));
+var generateColorScheme = (themeName, colorScheme, 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 (colorScheme === "light" && modeOverrides.light) {
+          overrideValue = modeOverrides.light;
+        } else if (colorScheme === "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, colorScheme), createColorOverrides(colorName)),
+    colors.main
+  );
+  const support = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)),
+    colors.support
+  );
+  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme), createColorOverrides("neutral"));
   return {
     [themeName]: {
       ...main,
@@ -1804,8 +1838,8 @@ var generateSemantic = (colors) => {
     ["main-color", mainColorNames],
     ["support-color", supportColorNames]
   ];
-  for (const [colorCategory, colorNames] of categories) {
-    for (const colorName of colorNames) {
+  for (const [colorCategory, colorNames2] of categories) {
+    for (const colorName of colorNames2) {
       const category = colorCategory.replace("-color", "");
       const customColorTokens = {
         color: {
@@ -2061,7 +2095,7 @@ var cliOptions = {
   }
 };
 var createTokens = async (opts) => {
-  const { colors, typography, name, borderRadius } = opts;
+  const { colors, typography, name, borderRadius, overrides } = opts;
   const colorSchemes = ["light", "dark"];
   const semantic = generateSemantic(colors);
   const tokenSets = new Map([
@@ -2079,7 +2113,7 @@ var createTokens = async (opts) => {
     [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography)],
     ...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", semantic.color],

package/dist/src/tokens/format.js

@@ -1582,6 +1582,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";
@@ -1662,18 +1663,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,
@@ -2138,8 +2172,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: {
@@ -2379,7 +2413,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([
@@ -2397,7 +2431,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],
@@ -2417,11 +2451,11 @@ import * as R8 from "ramda";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.5.0",
+  version: "1.6.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
-    node: ">=22.19.0"
+    node: ">=20 <25"
   },
   repository: {
     type: "git",
@@ -2469,7 +2503,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",
@@ -2484,7 +2518,7 @@ 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",
@@ -2492,18 +2526,18 @@ var package_default = {
     postcss: "^8.5.6",
     ramda: "^0.31.3",
     "style-dictionary": "^5.0.4",
-    zod: "^4.1.5",
-    "zod-validation-error": "^4.0.1"
+    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.6",
     "@types/object-hash": "^3.0.6",
-    "@types/ramda": "^0.31.0",
-    "fs-extra": "^11.3.1",
+    "@types/ramda": "^0.31.1",
+    "fs-extra": "^11.3.2",
     tslib: "^2.8.1",
     tsup: "^8.5.0",
     tsx: "^4.20.5",
@@ -2566,11 +2600,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);
       }
     }
   }
@@ -3101,13 +3135,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 }) => {
@@ -3120,18 +3174,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}
@@ -3344,7 +3396,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 {