@digdir/designsystemet 1.0.7 → 1.1.0

package/dist/src/tokens/index.js

@@ -992,27 +992,6 @@ var getDefaultToken = (tokenPath) => {
 // src/tokens/create/generators/color.ts
 import * as R4 from "ramda";
 
-// src/colors/utils.ts
-import chroma from "chroma-js";
-import Colorjs from "colorjs.io";
-import { Hsluv } from "hsluv";
-var getLuminanceFromLightness = (lightness) => {
-  const conv = new Hsluv();
-  conv.hsluv_l = lightness;
-  conv.hsluvToHex();
-  return chroma(conv.hex).luminance();
-};
-var getLightnessFromHex = (hex) => {
-  const conv = new Hsluv();
-  conv.hex = hex;
-  conv.hexToHsluv();
-  return conv.hsluv_l;
-};
-
-// src/colors/theme.ts
-import chroma2 from "chroma-js";
-import * as R3 from "ramda";
-
 // src/colors/colorMetadata.ts
 import * as R2 from "ramda";
 var baseColors = {
@@ -1266,6 +1245,27 @@ var colorMetadata = {
 };
 var colorMetadataByNumber = R2.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
 
+// src/colors/theme.ts
+import chroma2 from "chroma-js";
+import * as R3 from "ramda";
+
+// src/colors/utils.ts
+import chroma from "chroma-js";
+import Colorjs from "colorjs.io";
+import { Hsluv } from "hsluv";
+var getLuminanceFromLightness = (lightness) => {
+  const conv = new Hsluv();
+  conv.hsluv_l = lightness;
+  conv.hsluvToHex();
+  return chroma(conv.hex).luminance();
+};
+var getLightnessFromHex = (hex) => {
+  const conv = new Hsluv();
+  conv.hex = hex;
+  conv.hexToHsluv();
+  return conv.hsluv_l;
+};
+
 // src/colors/theme.ts
 var generateColorScale = (color, colorScheme2) => {
   let interpolationColor = color;
@@ -2043,6 +2043,7 @@ var generateTypography = (themeName, { fontFamily }) => {
 var cliOptions = {
   outDir: "out-dir",
   clean: "clean",
+  tailwind: "tailwind",
   theme: {
     colors: {
       main: "main-colors",
@@ -2421,9 +2422,176 @@ function generateTypographyGroup(themes) {
   ];
 }
 
+// src/tokens/process/output/theme.ts
+import chalk from "chalk";
+import * as R7 from "ramda";
+
+// package.json
+var package_default = {
+  name: "@digdir/designsystemet",
+  version: "1.1.0",
+  description: "CLI for Designsystemet",
+  author: "Designsystemet team",
+  engines: {
+    node: ">=22.16.0"
+  },
+  repository: {
+    type: "git",
+    url: "git+https://github.com/digdir/designsystemet.git"
+  },
+  homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
+  license: "MIT",
+  type: "module",
+  main: "./dist/src/index.js",
+  files: [
+    "./dist/**",
+    "./configs/**"
+  ],
+  bin: "dist/bin/designsystemet.js",
+  exports: {
+    ".": {
+      import: "./dist/src/index.js"
+    },
+    "./color": {
+      import: "./dist/src/colors/index.js"
+    },
+    "./tokens": {
+      import: "./dist/src/tokens/index.js"
+    }
+  },
+  publishConfig: {
+    access: "public"
+  },
+  scripts: {
+    designsystemet: "tsx ./bin/designsystemet.ts",
+    build: "tsup && pnpm build:types && pnpm build:json-schema",
+    "build:types": "tsc --emitDeclarationOnly --declaration",
+    "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
+    types: "tsc --noEmit",
+    "test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
+    "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
+    "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
+    "test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
+    "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
+    "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",
+    "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",
+    "update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
+    verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
+  },
+  dependencies: {
+    "@commander-js/extra-typings": "^14.0.0",
+    "@tokens-studio/sd-transforms": "1.3.0",
+    "apca-w3": "^0.1.9",
+    chalk: "^5.4.1",
+    "change-case": "^5.4.4",
+    "chroma-js": "^3.1.2",
+    "colorjs.io": "^0.6.0-alpha.1",
+    commander: "^13.1.0",
+    "fast-glob": "^3.3.3",
+    hsluv: "^1.0.1",
+    "object-hash": "^3.0.0",
+    postcss: "^8.5.5",
+    ramda: "^0.30.1",
+    "style-dictionary": "^4.4.0",
+    zod: "^3.25.64",
+    "zod-validation-error": "^3.5.0"
+  },
+  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/glob": "^8.1.0",
+    "@types/node": "^22.15.31",
+    "@types/object-hash": "^3.0.6",
+    "@types/ramda": "^0.30.2",
+    "fs-extra": "^11.3.0",
+    tslib: "^2.8.1",
+    tsup: "^8.5.0",
+    tsx: "^4.20.3",
+    typescript: "^5.8.3"
+  }
+};
+
+// src/tokens/process/output/theme.ts
+var defaultFileHeader = `build: v${package_default.version}`;
+var createThemeCSSFiles = ({
+  processedBuilds,
+  fileHeader: fileHeader2 = defaultFileHeader
+}) => {
+  const groupedByTheme = {};
+  for (const [_, buildResults] of Object.entries(R7.dissoc("types", processedBuilds))) {
+    for (const buildResult of buildResults) {
+      const themeName = buildResult.permutation.theme;
+      const newOutputs = buildResult.formatted;
+      if (R7.isNotEmpty(newOutputs)) {
+        const currentOutputs = groupedByTheme[themeName] ?? [];
+        groupedByTheme[themeName] = R7.concat(currentOutputs, newOutputs);
+      }
+    }
+  }
+  const sortOrder = [
+    "color-scheme/light",
+    "typography/secondary",
+    "semantic",
+    "color-scheme/dark",
+    "color-scheme/contrast",
+    "typography/primary",
+    "color/"
+  ];
+  const sortByDefinedOrder = R7.sortBy((file) => {
+    const filePath = file.destination || "";
+    const sortIndex = sortOrder.findIndex((sortElement) => {
+      if (sortElement.endsWith("/")) {
+        return filePath.includes(sortElement);
+      }
+      return filePath.includes(`${sortElement}.css`);
+    });
+    if (sortIndex === -1) {
+      console.error(
+        chalk.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
+      );
+      console.log(
+        chalk.dim(
+          `
+The section will currently be added to the end of the entry file, but the exact
+order may change due to nondeterminism.`.trim()
+        )
+      );
+      return Infinity;
+    }
+    return sortIndex;
+  });
+  const header = `@charset "UTF-8";
+/*
+${fileHeader2}
+*/
+
+`;
+  const sortAlphabetically = R7.sort(R7.ascend((x) => x.destination || ""));
+  const pickOutputs = R7.map(R7.view(R7.lensProp("output")));
+  const themeCSSFile = R7.pipe(
+    sortAlphabetically,
+    sortByDefinedOrder,
+    pickOutputs,
+    R7.join("\n"),
+    (content) => header + content
+  );
+  const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
+    destination: `${theme}.css`,
+    output: themeCSSFile(files)
+  }));
+  return themeCSSFiles;
+};
+
 // src/tokens/process/platform.ts
-import chalk2 from "chalk";
-import * as R18 from "ramda";
+import chalk3 from "chalk";
+import * as R19 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/types.ts
@@ -2434,30 +2602,30 @@ var colorCategories = {
 
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R17 from "ramda";
+import * as R18 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // src/tokens/utils.ts
-import * as R7 from "ramda";
-var mapToLowerCase = R7.map(R7.toLower);
-var hasAnyTruth = R7.any(R7.equals(true));
+import * as R8 from "ramda";
+var mapToLowerCase = R8.map(R8.toLower);
+var hasAnyTruth = R8.any(R8.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
 var getValue = (token) => token.$value ?? token.value;
-var typeEquals = R7.curry(
+var typeEquals = R8.curry(
   (types, token) => {
-    if (R7.isNil(token)) {
+    if (R8.isNil(token)) {
       return false;
     }
-    return R7.includes(R7.toLower(getType(token)), R7.map(R7.toLower, Array.isArray(types) ? types : [types]));
+    return R8.includes(R8.toLower(getType(token)), R8.map(R8.toLower, Array.isArray(types) ? types : [types]));
   }
 );
-var pathStartsWithOneOf = R7.curry(
+var pathStartsWithOneOf = R8.curry(
   (paths, token) => {
-    if (R7.isNil(token)) {
+    if (R8.isNil(token)) {
       return false;
     }
     const tokenPath = mapToLowerCase(token.path);
-    const matchPathsStartingWith = R7.map((path) => R7.startsWith([path], tokenPath), mapToLowerCase(paths));
+    const matchPathsStartingWith = R8.map((path) => R8.startsWith([path], tokenPath), mapToLowerCase(paths));
     return hasAnyTruth(matchPathsStartingWith);
   }
 );
@@ -2465,16 +2633,18 @@ function isSemanticToken(token) {
   return token.filePath.includes("semantic/");
 }
 function isSemanticColorToken(token, color) {
-  return token.filePath.includes("semantic/") && R7.startsWith(["color", color], token.path);
+  return token.filePath.includes("semantic/") && R8.startsWith(["color", color], token.path);
 }
 function isGlobalColorToken(token) {
   return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
 }
 function isColorCategoryToken(token, category) {
   if (!category) {
-    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+    return Object.keys(colorCategories).some(
+      (colorCategory2) => isColorCategoryToken(token, colorCategory2)
+    );
   }
-  return R7.startsWith(["color", category], token.path);
+  return R8.startsWith(["color", category], token.path);
 }
 var isDigit = (s) => /^\d+$/.test(s);
 function traverseObj(obj, fn) {
@@ -2490,7 +2660,7 @@ function traverseObj(obj, fn) {
   return obj;
 }
 function inlineTokens(shouldInline, tokens) {
-  const [inlineableTokens, otherTokens] = R7.partition(shouldInline, tokens);
+  const [inlineableTokens, otherTokens] = R8.partition(shouldInline, tokens);
   return otherTokens.map((token) => {
     let transformed = getValue(token.original);
     for (const ref of inlineableTokens) {
@@ -2499,16 +2669,16 @@ function inlineTokens(shouldInline, tokens) {
         transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
       }
     }
-    const tokenWithInlinedRefs = R7.set(R7.lensPath(["original", "$value"]), transformed, token);
+    const tokenWithInlinedRefs = R8.set(R8.lensPath(["original", "$value"]), transformed, token);
     return tokenWithInlinedRefs;
   });
 }
 
 // src/tokens/process/configs/color.ts
-import * as R12 from "ramda";
+import * as R13 from "ramda";
 
 // src/tokens/process/formats/css/color.ts
-import * as R8 from "ramda";
+import * as R9 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
@@ -2517,7 +2687,7 @@ var prefersColorScheme = (colorScheme2, content) => `
 `;
 var colorScheme = {
   name: "ds/css-colorscheme",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
     const { selector, colorScheme: colorScheme2, layer } = platform;
@@ -2532,8 +2702,8 @@ var colorScheme = {
   color-scheme: ${colorScheme_};
 ` : "";
     const filteredAllTokens = allTokens.filter(
-      R8.allPass([
-        R8.anyPass([
+      R9.allPass([
+        R9.anyPass([
           // Include semantic tokens in the output
           isSemanticToken,
           // Include global color tokens
@@ -2549,7 +2719,7 @@ ${formattedTokens}
 ${colorSchemeProperty}}
 `;
     const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
-    const body = R8.isNotNil(layer) ? `@layer ${layer} {
+    const body = R9.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content} ${autoSelectorContent}
 }
 ` : `${selector} ${content} ${autoSelectorContent}
@@ -2559,10 +2729,10 @@ ${selector} ${content} ${autoSelectorContent}
 };
 var colorCategory = {
   name: "ds/css-colorcategory",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
-    const format = R8.compose(
+    const format = R9.compose(
       createPropertyFormatter({
         outputReferences,
         dictionary,
@@ -2583,7 +2753,7 @@ var colorCategory = {
 ${formattedTokens}
 }
 `;
-    const body = R8.isNotNil(layer) ? `@layer ${layer} {
+    const body = R9.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -2593,16 +2763,16 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/semantic.ts
-import * as R9 from "ramda";
+import * as R10 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
 var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
 var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
 var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
-var isInlineTokens = R9.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
+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}, 0.0625rem)`;
+  const round = `round(down, ${calc}, 1px)`;
   return {
     name,
     round,
@@ -2610,7 +2780,7 @@ var overrideSizingFormula = (format, token) => {
   };
 };
 var formatSizingTokens = (format, tokens) => {
-  const { round, calc } = R9.reduce(
+  const { round, calc } = R10.reduce(
     (acc, token) => {
       const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
       return {
@@ -2630,7 +2800,7 @@ ${round.join("\n")}
 };
 var semantic = {
   name: "ds/css-semantic",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter2({
@@ -2640,17 +2810,17 @@ var semantic = {
       usesDtcg
     });
     const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R9.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
-    const [sizingTokens, restTokens] = R9.partition(
+    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 formattedTokens = [R9.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
+    const formattedTokens = [R10.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
     const content = `{
 ${formattedTokens.join("\n")}
 }
 `;
-    const body = R9.isNotNil(layer) ? `@layer ${layer} {
+    const body = R10.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -2660,15 +2830,15 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/typography.ts
-import * as R10 from "ramda";
+import * as R11 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R10.allPass([
-  R10.pathSatisfies(R10.includes("typography"), ["path"]),
-  R10.pathSatisfies(R10.includes("fontFamily"), ["path"])
+var typographyFontFamilyPredicate = R11.allPass([
+  R11.pathSatisfies(R11.includes("typography"), ["path"]),
+  R11.pathSatisfies(R11.includes("fontFamily"), ["path"])
 ]);
 var typography = {
   name: "ds/css-typography",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter3({
@@ -2677,12 +2847,12 @@ var typography = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R10.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const formattedTokens = R10.pipe(R10.map(format), R10.join("\n"))(filteredTokens);
+    const filteredTokens = R11.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const formattedTokens = R11.pipe(R11.map(format), R11.join("\n"))(filteredTokens);
     const content = selector ? `${selector} {
 ${formattedTokens}
 }` : formattedTokens;
-    const body = R10.isNotNil(layer) ? `@layer ${layer} {
+    const body = R11.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;
     return body;
@@ -2699,8 +2869,8 @@ var formats = {
 
 // src/tokens/process/transformers.ts
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
-import * as R11 from "ramda";
-var isPx = R11.test(/\b\d+px\b/g);
+import * as R12 from "ramda";
+var isPx = R12.test(/\b\d+px\b/g);
 var sizeRem = {
   name: "ds/size/toRem",
   type: "value",
@@ -2790,7 +2960,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
           {
             destination: `color-scheme/${colorScheme2}.css`,
             format: formats.colorScheme.name,
-            filter: (token) => typeEquals("color", token) && !R12.startsWith(["global"], token.path)
+            filter: (token) => typeEquals("color", token) && !R13.startsWith(["global"], token.path)
           }
         ],
         options: {
@@ -2809,7 +2979,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
     );
   }
   const layer = `ds.theme.color`;
-  const isRootColor = color === buildOptions?.rootColor;
+  const isRootColor = color === buildOptions?.defaultColor;
   const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
   const config = {
     preprocessors: ["tokens-studio"],
@@ -2841,7 +3011,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
 };
 
 // src/tokens/process/configs/semantic.ts
-import * as R13 from "ramda";
+import * as R14 from "ramda";
 import { outputReferencesFilter } from "style-dictionary/utils";
 var semanticVariables = ({ theme }) => {
   const selector = `:root`;
@@ -2864,8 +3034,8 @@ var semanticVariables = ({ theme }) => {
             destination: `semantic.css`,
             format: formats.semantic.name,
             filter: (token) => {
-              const isUwantedToken = R13.anyPass([R13.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R13.includes("_", token.path);
+              const isUwantedToken = R14.anyPass([R14.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R14.includes("_", token.path);
               const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
               const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
               const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
@@ -2886,20 +3056,20 @@ var semanticVariables = ({ theme }) => {
 };
 
 // src/tokens/process/configs/storefront.ts
-import * as R15 from "ramda";
+import * as R16 from "ramda";
 import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
 
 // src/tokens/process/formats/js-tokens.ts
-import * as R14 from "ramda";
+import * as R15 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
-var groupByType = R14.groupBy((token) => getType(token));
-var removeUnwatedTokens = R14.pipe(
-  R14.reject((token) => isColorCategoryToken(token)),
-  R14.reject((token) => R14.any((path) => path.startsWith("_"))(token.path))
+var groupByType = R15.groupBy((token) => getType(token));
+var removeUnwatedTokens = R15.pipe(
+  R15.reject((token) => isColorCategoryToken(token)),
+  R15.reject((token) => R15.any((path) => path.startsWith("_"))(token.path))
 );
-var dissocExtensions = R14.pipe(R14.dissoc("$extensions"), R14.dissocPath(["original", "$extensions"]));
-var removeUnwatedProps = R14.map((token) => dissocExtensions(token));
-var toCssVarName = R14.pipe(R14.split(":"), R14.head, R14.trim);
+var dissocExtensions = R15.pipe(R15.dissoc("$extensions"), R15.dissocPath(["original", "$extensions"]));
+var removeUnwatedProps = R15.map((token) => dissocExtensions(token));
+var toCssVarName = R15.pipe(R15.split(":"), R15.head, R15.trim);
 var jsTokens = {
   name: "ds/js-tokens",
   format: async ({ dictionary, file, options }) => {
@@ -2910,7 +3080,7 @@ var jsTokens = {
       format: "css",
       usesDtcg
     });
-    const formatTokens2 = R14.map((token) => {
+    const formatTokens2 = R15.map((token) => {
       if (pathStartsWithOneOf(["size", "_size"], token)) {
         const { calc, name } = overrideSizingFormula(format, token);
         return {
@@ -2924,7 +3094,7 @@ var jsTokens = {
         name: toCssVarName(format(token))
       };
     });
-    const processTokens = R14.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
+    const processTokens = R15.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
     const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
     const content = Object.entries(tokens).map(
       ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")} 
@@ -2949,9 +3119,9 @@ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
             destination: `${colorScheme2}.ts`,
             format: jsTokens.name,
             filter: (token) => {
-              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R15.includes("semantic", token.filePath))
+              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R16.includes("semantic", token.filePath))
                 return false;
-              const isSemanticColor = R15.includes("semantic", token.filePath) && typeEquals(["color"], token);
+              const isSemanticColor = R16.includes("semantic", token.filePath) && typeEquals(["color"], token);
               const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
               return isSemanticColor || wantedTypes;
             }
@@ -3017,19 +3187,19 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
 };
 
 // src/tokens/process/utils/getMultidimensionalThemes.ts
-import chalk from "chalk";
+import chalk2 from "chalk";
 import { kebabCase } from "change-case";
-import * as R16 from "ramda";
+import * as R17 from "ramda";
 var getMultidimensionalThemes = (processed$themes, dimensions) => {
   const verboseLogging = buildOptions?.verbose;
   const grouped$themes = groupThemes(processed$themes);
   const permutations = permutateThemes(grouped$themes);
   const ALL_DEPENDENT_ON = ["theme"];
-  const keys2 = R16.keys(grouped$themes);
+  const keys2 = R17.keys(grouped$themes);
   const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
   if (verboseLogging) {
-    console.log(chalk.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
-    console.log(chalk.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
+    console.log(chalk2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
+    console.log(chalk2.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
   }
   return permutations.filter((val) => {
     const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
@@ -3053,8 +3223,7 @@ function processThemeObject(theme) {
 }
 function groupThemes(themes) {
   const groups = {};
-  for (const rawTheme of themes) {
-    const theme = processThemeObject(rawTheme);
+  for (const theme of themes) {
     if (theme.group) {
       const groupKey = theme.group;
       groups[groupKey] = [...groups[groupKey] ?? [], theme];
@@ -3066,7 +3235,7 @@ function groupThemes(themes) {
   }
   return groups;
 }
-var hasUnknownProps = R16.pipe(R16.values, R16.none(R16.equals("unknown")), R16.not);
+var hasUnknownProps = R17.pipe(R17.values, R17.none(R17.equals("unknown")), R17.not);
 function permutateThemes(groups) {
   const separator = "_";
   const permutations = cartesian(Object.values(groups));
@@ -3076,8 +3245,8 @@ function permutateThemes(groups) {
         const { group, name, selectedTokenSets } = theme;
         let updatedPermutation = acc.permutation;
         if (group) {
-          const groupProp = R16.lensProp(group);
-          updatedPermutation = R16.set(groupProp, name, updatedPermutation);
+          const groupProp = R17.lensProp(group);
+          updatedPermutation = R17.set(groupProp, name, updatedPermutation);
         }
         const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
         const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -3161,7 +3330,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
               obj.filePath = tokenSet;
             }
           });
-          tokenSource.tokens = R17.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
+          tokenSource.tokens = R18.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
         }
       }
     } else {
@@ -3205,9 +3374,12 @@ var initResult = {
 };
 var buildOptions;
 var sd = new StyleDictionary2();
-var getCustomColors = (processed$themes) => processed$themes.filter(
-  (x) => x.group && [colorCategories.main, colorCategories.support].map((c) => `${c}-color`).includes(x.group)
-).map((x) => x.name);
+var getCustomColors = (processed$themes, colorGroups) => processed$themes.filter((x) => {
+  if (!x.group) {
+    return false;
+  }
+  return colorGroups.includes(x.group);
+}).map((x) => x.name);
 var buildConfigs = {
   typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
   "color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
@@ -3248,19 +3420,42 @@ var buildConfigs = {
   // },
 };
 async function processPlatform(options) {
-  const { process, $themes } = options;
+  const { type, $themes } = options;
   const platform = "css";
-  const tokenSets = process === "format" ? options.tokenSets : void 0;
-  const tokensDir = process === "build" ? options.tokensDir : void 0;
+  const tokenSets = type === "format" ? options.tokenSets : void 0;
+  const tokensDir = type === "build" ? options.tokensDir : void 0;
+  const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
+  if (UNSAFE_DEFAULT_COLOR) {
+    console.warn(
+      chalk3.yellow(
+        `
+\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk3.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
+      )
+    );
+  }
+  const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
+  if (UNSAFE_COLOR_GROUPS.length > 0) {
+    console.warn(
+      chalk3.yellow(
+        `
+\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk3.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
+      )
+    );
+  }
+  const colorGroups = UNSAFE_COLOR_GROUPS.length > 0 ? UNSAFE_COLOR_GROUPS : [colorCategories.main, colorCategories.support].map((c) => `${c}-color`);
   buildOptions = options;
-  const processed$themes = $themes.map(processThemeObject).filter((theme) => R18.not(theme.group === "size" && theme.name !== "medium"));
-  const customColors = getCustomColors(processed$themes);
-  if (!buildOptions.rootColor) {
-    const firstMainColor = R18.head(customColors);
-    buildOptions.rootColor = firstMainColor;
-    console.log(`Using first main color; ${chalk2.blue(firstMainColor)}, as ${chalk2.green(`":root"`)} color`);
+  buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
+  const processed$themes = $themes.map(processThemeObject).filter((theme) => R19.not(theme.group === "size" && theme.name !== "medium"));
+  const customColors = getCustomColors(processed$themes, colorGroups);
+  if (!buildOptions.defaultColor) {
+    const firstMainColor = R19.head(customColors);
+    buildOptions.defaultColor = firstMainColor;
+  }
+  if (buildOptions.defaultColor) {
+    console.log(`
+\u{1F3A8} Using ${chalk3.blue(buildOptions.defaultColor)} as default color`);
   }
-  const buildAndSdConfigs = R18.map((buildConfig) => {
+  const buildAndSdConfigs = R19.map((buildConfig) => {
     const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
       tokensDir,
       tokenSets
@@ -3292,19 +3487,19 @@ async function processPlatform(options) {
     types: [initResult]
   };
   try {
-    for (const [buildName, { buildConfig, sdConfigs }] of R18.toPairs(buildAndSdConfigs)) {
+    for (const [buildName, { buildConfig, sdConfigs }] of R19.toPairs(buildAndSdConfigs)) {
       if (!(buildConfig.enabled?.() ?? true)) {
         continue;
       }
       if (sdConfigs.length > 0) {
         console.log(`
-\u{1F371} Building ${chalk2.green(buildConfig.name ?? buildName)}`);
+\u{1F371} Building ${chalk3.green(buildConfig.name ?? buildName)}`);
         const results = await Promise.all(
           sdConfigs.map(async (sdConfig) => {
             const { config, permutation } = sdConfig;
             const modes = ["theme", ...buildConfig.dimensions];
             const modeMessage = modes.map((x) => permutation[x]).join(" - ");
-            const logMessage = R18.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
+            const logMessage = R19.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
             console.log(logMessage);
             const sdOptions = { cache: true };
             const sdExtended = await sd.extend(config);
@@ -3336,7 +3531,7 @@ async function processPlatform(options) {
 }
 async function createColorTypeDeclaration(colors) {
   console.log(`
-\u{1F371} Building ${chalk2.green("type declarations")}`);
+\u{1F371} Building ${chalk3.green("type declarations")}`);
   const typeDeclaration = `
 import type {} from '@digdir/designsystemet-react/colors';
 
@@ -3349,178 +3544,10 @@ ${colors.map((color) => `    ${color}: never;`).join("\n")}
   return typeDeclaration;
 }
 
-// src/tokens/process/theme.ts
-import * as R19 from "ramda";
-import chalk3 from "chalk";
-
-// package.json
-var package_default = {
-  name: "@digdir/designsystemet",
-  version: "1.0.7",
-  description: "CLI for Designsystemet",
-  author: "Designsystemet team",
-  engines: {
-    node: ">=22.16.0"
-  },
-  repository: {
-    type: "git",
-    url: "git+https://github.com/digdir/designsystemet.git"
-  },
-  homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
-  license: "MIT",
-  type: "module",
-  main: "./dist/src/index.js",
-  files: [
-    "./dist/**",
-    "./configs/**"
-  ],
-  bin: "dist/bin/designsystemet.js",
-  exports: {
-    ".": {
-      import: "./dist/src/index.js"
-    },
-    "./color": {
-      import: "./dist/src/colors/index.js"
-    },
-    "./tokens": {
-      import: "./dist/src/tokens/index.js"
-    }
-  },
-  publishConfig: {
-    access: "public"
-  },
-  scripts: {
-    designsystemet: "tsx ./bin/designsystemet.ts",
-    "build:tokens": "pnpm run designsystemet tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
-    "build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
-    build: "tsup && pnpm build:types && pnpm build:json-schema",
-    "build:types": "tsc --emitDeclarationOnly --declaration",
-    "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
-    types: "tsc --noEmit",
-    "test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
-    "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
-    "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
-    "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
-    "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",
-    "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
-    "update:template": "tsx ./src/scripts/update-template.ts",
-    "update:design-tokens": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
-    verify: "pnpm test && pnpm update:template && pnpm update:design-tokens"
-  },
-  dependencies: {
-    "@commander-js/extra-typings": "^13.1.0",
-    "@tokens-studio/sd-transforms": "1.3.0",
-    "apca-w3": "^0.1.9",
-    chalk: "^5.4.1",
-    "change-case": "^5.4.4",
-    "chroma-js": "^3.1.2",
-    "colorjs.io": "^0.6.0-alpha.1",
-    commander: "^13.1.0",
-    "fast-glob": "^3.3.3",
-    hsluv: "^1.0.1",
-    "object-hash": "^3.0.0",
-    postcss: "^8.5.3",
-    ramda: "^0.30.1",
-    "style-dictionary": "^4.4.0",
-    zod: "^3.25.30",
-    "zod-validation-error": "^3.4.1"
-  },
-  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/glob": "^8.1.0",
-    "@types/jscodeshift": "^0.12.0",
-    "@types/node": "^22.15.21",
-    "@types/object-hash": "^3.0.6",
-    "@types/ramda": "^0.30.2",
-    "fs-extra": "^11.3.0",
-    "ts-toolbelt": "^9.6.0",
-    tslib: "^2.8.1",
-    tsup: "^8.5.0",
-    tsx: "^4.19.4",
-    typescript: "^5.8.3"
-  }
-};
-
-// src/tokens/process/theme.ts
-var defaultFileHeader = `build: v${package_default.version}`;
-var createThemeCSSFiles = ({
-  processedBuilds,
-  fileHeader: fileHeader2 = defaultFileHeader
-}) => {
-  const groupedByTheme = {};
-  for (const [_, buildResults] of Object.entries(R19.dissoc("types", processedBuilds))) {
-    for (const buildResult of buildResults) {
-      const themeName = buildResult.permutation.theme;
-      const newOutputs = buildResult.formatted;
-      if (R19.isNotEmpty(newOutputs)) {
-        const currentOutputs = groupedByTheme[themeName] ?? [];
-        groupedByTheme[themeName] = R19.concat(currentOutputs, newOutputs);
-      }
-    }
-  }
-  const sortOrder = [
-    "color-scheme/light",
-    "typography/secondary",
-    "semantic",
-    "color-scheme/dark",
-    "color-scheme/contrast",
-    "typography/primary",
-    "color/"
-  ];
-  const sortByDefinedOrder = R19.sortBy((file) => {
-    const filePath = file.destination || "";
-    const sortIndex = sortOrder.findIndex((sortElement) => {
-      if (sortElement.endsWith("/")) {
-        return filePath.includes(sortElement);
-      }
-      return filePath.includes(`${sortElement}.css`);
-    });
-    if (sortIndex === -1) {
-      console.error(
-        chalk3.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
-      );
-      console.log(
-        chalk3.dim(
-          `
-The section will currently be added to the end of the entry file, but the exact
-order may change due to nondeterminism.`.trim()
-        )
-      );
-      return Infinity;
-    }
-    return sortIndex;
-  });
-  const header = `@charset "UTF-8";
-/*
-${fileHeader2}
-*/
-
-`;
-  const sortAlphabetically = R19.sort(R19.ascend((x) => x.destination || ""));
-  const pickOutputs = R19.map(R19.view(R19.lensProp("output")));
-  const themeCSSFile = R19.pipe(
-    sortAlphabetically,
-    sortByDefinedOrder,
-    pickOutputs,
-    R19.join("\n"),
-    (content) => header + content
-  );
-  const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
-    destination: `${theme}.css`,
-    output: themeCSSFile(files)
-  }));
-  return themeCSSFiles;
-};
-
 // src/tokens/format.ts
 var formatTokens = async (options) => {
   const processedBuilds = await processPlatform({
-    process: "format",
+    type: "format",
     ...options
   });
   return processedBuilds;