@digdir/designsystemet 1.0.8 → 1.1.1

package/dist/bin/designsystemet.js

@@ -2,39 +2,9 @@
 
 // bin/designsystemet.ts
 import { Argument, createCommand, program } from "@commander-js/extra-typings";
-import chalk10 from "chalk";
+import chalk11 from "chalk";
 import * as R26 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;
-};
-var convertToHex = (color) => {
-  if (!color) {
-    return "#000000";
-  }
-  if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
-    return color;
-  }
-  return chroma(color).hex();
-};
-
-// src/colors/theme.ts
-import chroma2 from "chroma-js";
-import * as R2 from "ramda";
-
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
 var baseColors = {
@@ -288,6 +258,36 @@ var colorMetadata = {
 };
 var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
 
+// src/colors/theme.ts
+import chroma2 from "chroma-js";
+import * as R2 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;
+};
+var convertToHex = (color) => {
+  if (!color) {
+    return "#000000";
+  }
+  if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+    return color;
+  }
+  return chroma(color).hex();
+};
+
 // src/colors/theme.ts
 var RESERVED_COLORS = [
   "neutral",
@@ -861,180 +861,15 @@ var migrations_default = {
 
 // src/tokens/build.ts
 import path from "path";
-import chalk6 from "chalk";
+import chalk7 from "chalk";
 import * as R18 from "ramda";
 
-// src/tokens/process/theme.ts
-import * as R5 from "ramda";
-import chalk3 from "chalk";
-
-// package.json
-var package_default = {
-  name: "@digdir/designsystemet",
-  version: "1.0.8",
-  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:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
-    verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build: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(R5.dissoc("types", processedBuilds))) {
-    for (const buildResult of buildResults) {
-      const themeName = buildResult.permutation.theme;
-      const newOutputs = buildResult.formatted;
-      if (R5.isNotEmpty(newOutputs)) {
-        const currentOutputs = groupedByTheme[themeName] ?? [];
-        groupedByTheme[themeName] = R5.concat(currentOutputs, newOutputs);
-      }
-    }
-  }
-  const sortOrder = [
-    "color-scheme/light",
-    "typography/secondary",
-    "semantic",
-    "color-scheme/dark",
-    "color-scheme/contrast",
-    "typography/primary",
-    "color/"
-  ];
-  const sortByDefinedOrder = R5.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 = R5.sort(R5.ascend((x) => x.destination || ""));
-  const pickOutputs = R5.map(R5.view(R5.lensProp("output")));
-  const themeCSSFile = R5.pipe(
-    sortAlphabetically,
-    sortByDefinedOrder,
-    pickOutputs,
-    R5.join("\n"),
-    (content) => header + content
-  );
-  const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
-    destination: `${theme}.css`,
-    output: themeCSSFile(files)
-  }));
-  return themeCSSFiles;
-};
+// src/tokens/process/output/declarations.ts
+import chalk5 from "chalk";
 
 // src/tokens/process/platform.ts
-import chalk5 from "chalk";
-import * as R17 from "ramda";
+import chalk4 from "chalk";
+import * as R16 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/types.ts
@@ -1045,30 +880,30 @@ var colorCategories = {
 
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R16 from "ramda";
+import * as R15 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // src/tokens/utils.ts
-import * as R6 from "ramda";
-var mapToLowerCase = R6.map(R6.toLower);
-var hasAnyTruth = R6.any(R6.equals(true));
+import * as R5 from "ramda";
+var mapToLowerCase = R5.map(R5.toLower);
+var hasAnyTruth = R5.any(R5.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
 var getValue = (token) => token.$value ?? token.value;
-var typeEquals = R6.curry(
+var typeEquals = R5.curry(
   (types, token) => {
-    if (R6.isNil(token)) {
+    if (R5.isNil(token)) {
       return false;
     }
-    return R6.includes(R6.toLower(getType(token)), R6.map(R6.toLower, Array.isArray(types) ? types : [types]));
+    return R5.includes(R5.toLower(getType(token)), R5.map(R5.toLower, Array.isArray(types) ? types : [types]));
   }
 );
-var pathStartsWithOneOf = R6.curry(
+var pathStartsWithOneOf = R5.curry(
   (paths, token) => {
-    if (R6.isNil(token)) {
+    if (R5.isNil(token)) {
       return false;
     }
     const tokenPath = mapToLowerCase(token.path);
-    const matchPathsStartingWith = R6.map((path5) => R6.startsWith([path5], tokenPath), mapToLowerCase(paths));
+    const matchPathsStartingWith = R5.map((path5) => R5.startsWith([path5], tokenPath), mapToLowerCase(paths));
     return hasAnyTruth(matchPathsStartingWith);
   }
 );
@@ -1076,7 +911,7 @@ function isSemanticToken(token) {
   return token.filePath.includes("semantic/");
 }
 function isSemanticColorToken(token, color) {
-  return token.filePath.includes("semantic/") && R6.startsWith(["color", color], token.path);
+  return token.filePath.includes("semantic/") && R5.startsWith(["color", color], token.path);
 }
 function isGlobalColorToken(token) {
   return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
@@ -1087,7 +922,7 @@ function isColorCategoryToken(token, category) {
       (colorCategory2) => isColorCategoryToken(token, colorCategory2)
     );
   }
-  return R6.startsWith(["color", category], token.path);
+  return R5.startsWith(["color", category], token.path);
 }
 var isDigit = (s) => /^\d+$/.test(s);
 function traverseObj(obj, fn) {
@@ -1103,7 +938,7 @@ function traverseObj(obj, fn) {
   return obj;
 }
 function inlineTokens(shouldInline, tokens) {
-  const [inlineableTokens, otherTokens] = R6.partition(shouldInline, tokens);
+  const [inlineableTokens, otherTokens] = R5.partition(shouldInline, tokens);
   return otherTokens.map((token) => {
     let transformed = getValue(token.original);
     for (const ref of inlineableTokens) {
@@ -1112,16 +947,16 @@ function inlineTokens(shouldInline, tokens) {
         transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
       }
     }
-    const tokenWithInlinedRefs = R6.set(R6.lensPath(["original", "$value"]), transformed, token);
+    const tokenWithInlinedRefs = R5.set(R5.lensPath(["original", "$value"]), transformed, token);
     return tokenWithInlinedRefs;
   });
 }
 
 // src/tokens/process/configs/color.ts
-import * as R11 from "ramda";
+import * as R10 from "ramda";
 
 // src/tokens/process/formats/css/color.ts
-import * as R7 from "ramda";
+import * as R6 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
@@ -1130,7 +965,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;
@@ -1145,8 +980,8 @@ var colorScheme = {
   color-scheme: ${colorScheme_};
 ` : "";
     const filteredAllTokens = allTokens.filter(
-      R7.allPass([
-        R7.anyPass([
+      R6.allPass([
+        R6.anyPass([
           // Include semantic tokens in the output
           isSemanticToken,
           // Include global color tokens
@@ -1162,7 +997,7 @@ ${formattedTokens}
 ${colorSchemeProperty}}
 `;
     const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
-    const body = R7.isNotNil(layer) ? `@layer ${layer} {
+    const body = R6.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content} ${autoSelectorContent}
 }
 ` : `${selector} ${content} ${autoSelectorContent}
@@ -1172,10 +1007,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 = R7.compose(
+    const format = R6.compose(
       createPropertyFormatter({
         outputReferences,
         dictionary,
@@ -1196,7 +1031,7 @@ var colorCategory = {
 ${formattedTokens}
 }
 `;
-    const body = R7.isNotNil(layer) ? `@layer ${layer} {
+    const body = R6.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -1206,16 +1041,16 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/semantic.ts
-import * as R8 from "ramda";
+import * as R7 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 = R8.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
+var isInlineTokens = R7.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,
@@ -1223,7 +1058,7 @@ var overrideSizingFormula = (format, token) => {
   };
 };
 var formatSizingTokens = (format, tokens) => {
-  const { round, calc } = R8.reduce(
+  const { round, calc } = R7.reduce(
     (acc, token) => {
       const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
       return {
@@ -1243,7 +1078,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({
@@ -1253,17 +1088,17 @@ var semantic = {
       usesDtcg
     });
     const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R8.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
-    const [sizingTokens, restTokens] = R8.partition(
+    const filteredTokens = R7.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
+    const [sizingTokens, restTokens] = R7.partition(
       (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
       filteredTokens
     );
-    const formattedTokens = [R8.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
+    const formattedTokens = [R7.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
     const content = `{
 ${formattedTokens.join("\n")}
 }
 `;
-    const body = R8.isNotNil(layer) ? `@layer ${layer} {
+    const body = R7.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -1273,15 +1108,15 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/typography.ts
-import * as R9 from "ramda";
+import * as R8 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R9.allPass([
-  R9.pathSatisfies(R9.includes("typography"), ["path"]),
-  R9.pathSatisfies(R9.includes("fontFamily"), ["path"])
+var typographyFontFamilyPredicate = R8.allPass([
+  R8.pathSatisfies(R8.includes("typography"), ["path"]),
+  R8.pathSatisfies(R8.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({
@@ -1290,12 +1125,12 @@ var typography = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R9.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const formattedTokens = R9.pipe(R9.map(format), R9.join("\n"))(filteredTokens);
+    const filteredTokens = R8.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const formattedTokens = R8.pipe(R8.map(format), R8.join("\n"))(filteredTokens);
     const content = selector ? `${selector} {
 ${formattedTokens}
 }` : formattedTokens;
-    const body = R9.isNotNil(layer) ? `@layer ${layer} {
+    const body = R8.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;
     return body;
@@ -1312,8 +1147,8 @@ var formats = {
 
 // src/tokens/process/transformers.ts
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
-import * as R10 from "ramda";
-var isPx = R10.test(/\b\d+px\b/g);
+import * as R9 from "ramda";
+var isPx = R9.test(/\b\d+px\b/g);
 var sizeRem = {
   name: "ds/size/toRem",
   type: "value",
@@ -1403,7 +1238,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
           {
             destination: `color-scheme/${colorScheme2}.css`,
             format: formats.colorScheme.name,
-            filter: (token) => typeEquals("color", token) && !R11.startsWith(["global"], token.path)
+            filter: (token) => typeEquals("color", token) && !R10.startsWith(["global"], token.path)
           }
         ],
         options: {
@@ -1454,7 +1289,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
 };
 
 // src/tokens/process/configs/semantic.ts
-import * as R12 from "ramda";
+import * as R11 from "ramda";
 import { outputReferencesFilter } from "style-dictionary/utils";
 var semanticVariables = ({ theme }) => {
   const selector = `:root`;
@@ -1477,8 +1312,8 @@ var semanticVariables = ({ theme }) => {
             destination: `semantic.css`,
             format: formats.semantic.name,
             filter: (token) => {
-              const isUwantedToken = R12.anyPass([R12.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R12.includes("_", token.path);
+              const isUwantedToken = R11.anyPass([R11.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R11.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);
@@ -1499,20 +1334,20 @@ var semanticVariables = ({ theme }) => {
 };
 
 // src/tokens/process/configs/storefront.ts
-import * as R14 from "ramda";
+import * as R13 from "ramda";
 import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
 
 // src/tokens/process/formats/js-tokens.ts
-import * as R13 from "ramda";
+import * as R12 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
-var groupByType = R13.groupBy((token) => getType(token));
-var removeUnwatedTokens = R13.pipe(
-  R13.reject((token) => isColorCategoryToken(token)),
-  R13.reject((token) => R13.any((path5) => path5.startsWith("_"))(token.path))
+var groupByType = R12.groupBy((token) => getType(token));
+var removeUnwatedTokens = R12.pipe(
+  R12.reject((token) => isColorCategoryToken(token)),
+  R12.reject((token) => R12.any((path5) => path5.startsWith("_"))(token.path))
 );
-var dissocExtensions = R13.pipe(R13.dissoc("$extensions"), R13.dissocPath(["original", "$extensions"]));
-var removeUnwatedProps = R13.map((token) => dissocExtensions(token));
-var toCssVarName = R13.pipe(R13.split(":"), R13.head, R13.trim);
+var dissocExtensions = R12.pipe(R12.dissoc("$extensions"), R12.dissocPath(["original", "$extensions"]));
+var removeUnwatedProps = R12.map((token) => dissocExtensions(token));
+var toCssVarName = R12.pipe(R12.split(":"), R12.head, R12.trim);
 var jsTokens = {
   name: "ds/js-tokens",
   format: async ({ dictionary, file, options }) => {
@@ -1523,7 +1358,7 @@ var jsTokens = {
       format: "css",
       usesDtcg
     });
-    const formatTokens = R13.map((token) => {
+    const formatTokens = R12.map((token) => {
       if (pathStartsWithOneOf(["size", "_size"], token)) {
         const { calc, name } = overrideSizingFormula(format, token);
         return {
@@ -1537,7 +1372,7 @@ var jsTokens = {
         name: toCssVarName(format(token))
       };
     });
-    const processTokens = R13.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
+    const processTokens = R12.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, 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:")} 
@@ -1562,9 +1397,9 @@ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
             destination: `${colorScheme2}.ts`,
             format: jsTokens.name,
             filter: (token) => {
-              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R14.includes("semantic", token.filePath))
+              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R13.includes("semantic", token.filePath))
                 return false;
-              const isSemanticColor = R14.includes("semantic", token.filePath) && typeEquals(["color"], token);
+              const isSemanticColor = R13.includes("semantic", token.filePath) && typeEquals(["color"], token);
               const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
               return isSemanticColor || wantedTypes;
             }
@@ -1793,19 +1628,19 @@ var TypographyValues;
 })(TypographyValues || (TypographyValues = {}));
 
 // src/tokens/process/utils/getMultidimensionalThemes.ts
-import chalk4 from "chalk";
+import chalk3 from "chalk";
 import { kebabCase } from "change-case";
-import * as R15 from "ramda";
+import * as R14 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 keys3 = R15.keys(grouped$themes);
+  const keys3 = R14.keys(grouped$themes);
   const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
   if (verboseLogging) {
-    console.log(chalk4.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
-    console.log(chalk4.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
+    console.log(chalk3.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
+    console.log(chalk3.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
   }
   return permutations.filter((val) => {
     const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
@@ -1841,7 +1676,7 @@ function groupThemes(themes) {
   }
   return groups;
 }
-var hasUnknownProps = R15.pipe(R15.values, R15.none(R15.equals("unknown")), R15.not);
+var hasUnknownProps = R14.pipe(R14.values, R14.none(R14.equals("unknown")), R14.not);
 function permutateThemes(groups) {
   const separator = "_";
   const permutations = cartesian(Object.values(groups));
@@ -1851,8 +1686,8 @@ function permutateThemes(groups) {
         const { group, name, selectedTokenSets } = theme;
         let updatedPermutation = acc.permutation;
         if (group) {
-          const groupProp = R15.lensProp(group);
-          updatedPermutation = R15.set(groupProp, name, updatedPermutation);
+          const groupProp = R14.lensProp(group);
+          updatedPermutation = R14.set(groupProp, name, updatedPermutation);
         }
         const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
         const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -1898,6 +1733,12 @@ function filterTokenSets(tokensets) {
 function cartesian(a) {
   return a.reduce((a2, b) => a2.flatMap((d) => b.map((e) => [d, e].flat())));
 }
+var getCustomColors = (processed$themes, colorGroups) => processed$themes.filter((x) => {
+  if (!x.group) {
+    return false;
+  }
+  return colorGroups.includes(x.group);
+}).map((x) => x.name);
 
 // src/tokens/process/configs.ts
 void register(StyleDictionary, { withSDBuiltins: false });
@@ -1936,7 +1777,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
               obj.filePath = tokenSet;
             }
           });
-          tokenSource.tokens = R16.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
+          tokenSource.tokens = R15.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
         }
       }
     } else {
@@ -1980,12 +1821,6 @@ var initResult = {
 };
 var buildOptions;
 var sd = new StyleDictionary2();
-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"] },
@@ -2026,46 +1861,54 @@ var buildConfigs = {
   // },
 };
 async function processPlatform(options) {
-  const { type, $themes } = options;
+  const { type, processed$themes } = options;
   const platform = "css";
   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(
-      chalk5.yellow(
+      chalk4.yellow(
         `
-\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk5.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
+\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk4.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(
-      chalk5.yellow(
+      chalk4.yellow(
         `
-\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk5.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
+\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk4.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;
   buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
-  const processed$themes = $themes.map(processThemeObject).filter((theme) => R17.not(theme.group === "size" && theme.name !== "medium"));
-  const customColors = getCustomColors(processed$themes, colorGroups);
+  buildOptions.colorGroups = colorGroups;
+  const filteredProcessed$themes = processed$themes.filter(
+    (theme) => R16.not(theme.group === "size" && theme.name !== "medium")
+  );
+  const customColors = getCustomColors(filteredProcessed$themes, colorGroups);
   if (!buildOptions.defaultColor) {
-    const firstMainColor = R17.head(customColors);
+    const firstMainColor = R16.head(customColors);
     buildOptions.defaultColor = firstMainColor;
   }
   if (buildOptions.defaultColor) {
     console.log(`
-\u{1F3A8} Using ${chalk5.blue(buildOptions.defaultColor)} as default color`);
+\u{1F3A8} Using ${chalk4.blue(buildOptions.defaultColor)} as default color`);
   }
-  const buildAndSdConfigs = R17.map((buildConfig) => {
-    const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
-      tokensDir,
-      tokenSets
-    });
+  const buildAndSdConfigs = R16.map((buildConfig) => {
+    const sdConfigs = getConfigsForThemeDimensions(
+      buildConfig.getConfig,
+      filteredProcessed$themes,
+      buildConfig.dimensions,
+      {
+        tokensDir,
+        tokenSets
+      }
+    );
     const unknownConfigs = buildConfig.dimensions.map(
       (dimension) => sdConfigs.filter((x) => x.permutation[dimension] === "unknown")
     );
@@ -2089,23 +1932,22 @@ async function processPlatform(options) {
     "warning-color": [initResult],
     "info-color": [initResult],
     semantic: [initResult],
-    typography: [initResult],
-    types: [initResult]
+    typography: [initResult]
   };
   try {
-    for (const [buildName, { buildConfig, sdConfigs }] of R17.toPairs(buildAndSdConfigs)) {
+    for (const [buildName, { buildConfig, sdConfigs }] of R16.toPairs(buildAndSdConfigs)) {
       if (!(buildConfig.enabled?.() ?? true)) {
         continue;
       }
       if (sdConfigs.length > 0) {
         console.log(`
-\u{1F371} Building ${chalk5.green(buildConfig.name ?? buildName)}`);
+\u{1F371} Building ${chalk4.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 = R17.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
+            const logMessage = R16.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
             console.log(logMessage);
             const sdOptions = { cache: true };
             const sdExtended = await sd.extend(config);
@@ -2125,17 +1967,22 @@ async function processPlatform(options) {
     }
     throw err;
   }
-  const colorsFileName = "colors.d.ts";
-  const reactColorTypes = await createColorTypeDeclaration(customColors);
-  processedBuilds.types = [
-    {
-      ...initResult,
-      formatted: [{ output: reactColorTypes, destination: colorsFileName }]
-    }
-  ];
   return processedBuilds;
 }
-async function createColorTypeDeclaration(colors2) {
+
+// src/tokens/process/output/declarations.ts
+var createTypeDeclarationFiles = (processed$themes) => {
+  const colorGroups = buildOptions?.colorGroups || [];
+  const customColors = getCustomColors(processed$themes, colorGroups);
+  const typeDeclaration = createColorTypeDeclaration(customColors);
+  return [
+    {
+      output: typeDeclaration,
+      destination: "colors.d.ts"
+    }
+  ];
+};
+function createColorTypeDeclaration(colors2) {
   console.log(`
 \u{1F371} Building ${chalk5.green("type declarations")}`);
   const typeDeclaration = `
@@ -2150,6 +1997,232 @@ ${colors2.map((color) => `    ${color}: never;`).join("\n")}
   return typeDeclaration;
 }
 
+// src/tokens/process/output/tailwind.ts
+var createTailwindCSSFiles = (cssFiles) => {
+  console.log("\n\u{1F371} Creating Tailwind Config");
+  return cssFiles.map((file) => {
+    if (file.destination) {
+      const tailwindConfig = generateTailwind(file.output);
+      const tailwindFile = {
+        destination: file.destination.replace(".css", ".tailwind.css"),
+        output: tailwindConfig
+      };
+      return tailwindFile;
+    }
+    return void 0;
+  }).filter((item) => item !== void 0);
+};
+var generateTailwind = (css) => {
+  const tailwind = ["--font-sans: var(--ds-font-family)"];
+  const tokens = Array.from(new Set(css.match(/--ds-[^:)]+/g)), (m) => m).sort(
+    (a, b) => a.localeCompare(b, void 0, { numeric: true, sensitivity: "base" })
+  );
+  for (const token of tokens) {
+    if (token.startsWith("--ds-color-") && !token.startsWith("--ds-color-focus")) {
+      tailwind.push(`--color-${token.replace("--ds-color-", "")}: var(${token})`);
+    } else if (token.startsWith("--ds-font-weight-")) {
+      tailwind.push(`--font-weight-${token.replace("--ds-font-weight-", "")}: var(${token})`);
+    } else if (token.match(/--ds-border-radius-(sm|md|lg|xl)/)) {
+      tailwind.push(`--radius-${token.replace("--ds-border-radius-", "")}: var(${token})`);
+    } else if (token.match(/--ds-body-(sm|mg|lg)-body-font-size/)) {
+      tailwind.push(`--text-${token.replace("--ds-body-", "").replace("-font-size", "")}: var(${token})`);
+    } else if (token.match(/^--ds-size-\d+$/)) {
+      tailwind.push(`--spacing-${token.replace("--ds-size-", "")}: var(${token})`);
+    }
+  }
+  const dynamicColors = `[data-color] {
+      --color-background-default: var(--ds-color-background-default);
+      --color-background-tinted: var(--ds-color-background-tinted);
+      --color-surface-default: var(--ds-color-surface-default);
+      --color-surface-tinted: var(--ds-color-surface-tinted);
+      --color-surface-hover: var(--ds-color-surface-hover);
+      --color-surface-active: var(--ds-color-surface-active);
+      --color-border-subtle: var(--ds-color-border-subtle);
+      --color-border-default: var(--ds-color-border-default);
+      --color-border-strong: var(--ds-color-border-strong);
+      --color-text-subtle: var(--ds-color-text-subtle);
+      --color-text-default: var(--ds-color-text-default);
+      --color-base-default: var(--ds-color-base-default);
+      --color-base-hover: var(--ds-color-base-hover);
+      --color-base-active: var(--ds-color-base-active);
+      --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle);
+      --color-base-contrast-default: var(--ds-color-base-contrast-default);
+    }`;
+  return `@theme {${tailwind.map((str) => `
+  ${str};`).join("")}
+}
+${dynamicColors}`;
+};
+
+// src/tokens/process/output/theme.ts
+import chalk6 from "chalk";
+import * as R17 from "ramda";
+
+// package.json
+var package_default = {
+  name: "@digdir/designsystemet",
+  version: "1.1.1",
+  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",
+    "designsystemet:inspect": "tsx --inspect-brk ./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:inspect": "pnpm run designsystemet:inspect 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: "^14.0.0",
+    "fast-glob": "^3.3.3",
+    hsluv: "^1.0.1",
+    "object-hash": "^3.0.0",
+    postcss: "^8.5.6",
+    ramda: "^0.30.1",
+    "style-dictionary": "^5.0.0",
+    zod: "^3.25.67",
+    "zod-validation-error": "^3.5.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/glob": "^8.1.0",
+    "@types/node": "^22.15.32",
+    "@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(processedBuilds)) {
+    for (const buildResult of buildResults) {
+      const themeName = buildResult.permutation.theme;
+      const newOutputs = buildResult.formatted;
+      if (R17.isNotEmpty(newOutputs)) {
+        const currentOutputs = groupedByTheme[themeName] ?? [];
+        groupedByTheme[themeName] = R17.concat(currentOutputs, newOutputs);
+      }
+    }
+  }
+  const sortOrder = [
+    "color-scheme/light",
+    "typography/secondary",
+    "semantic",
+    "color-scheme/dark",
+    "color-scheme/contrast",
+    "typography/primary",
+    "color/"
+  ];
+  const sortByDefinedOrder = R17.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(
+        chalk6.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
+      );
+      console.log(
+        chalk6.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 = R17.sort(R17.ascend((x) => x.destination || ""));
+  const pickOutputs = R17.map(R17.view(R17.lensProp("output")));
+  const themeCSSFile = R17.pipe(
+    sortAlphabetically,
+    sortByDefinedOrder,
+    pickOutputs,
+    R17.join("\n"),
+    (content) => header + content
+  );
+  const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
+    destination: `${theme}.css`,
+    output: themeCSSFile(files)
+  }));
+  return themeCSSFiles;
+};
+
 // src/tokens/build.ts
 async function write(files, outDir, dry) {
   for (const { destination, output } of files) {
@@ -2166,40 +2239,303 @@ var buildTokens = async (options) => {
   const outDir = path.resolve(options.outDir);
   const tokensDir = path.resolve(options.tokensDir);
   const $themes = JSON.parse(await readFile(`${tokensDir}/$themes.json`));
+  const processed$themes = $themes.map(processThemeObject);
   let $designsystemet;
   try {
     const $designsystemetContent = await readFile(`${tokensDir}/$designsystemet.json`);
     $designsystemet = JSON.parse($designsystemetContent);
-  } catch (error) {
+  } catch (_error) {
   }
   console.log(`
-\u{1F3D7}\uFE0F Start building tokens in ${chalk6.green(tokensDir)}`);
+\u{1F3D7}\uFE0F Start building tokens in ${chalk7.green(tokensDir)}`);
   const processedBuilds = await processPlatform({
     ...options,
     outDir,
     tokensDir,
     type: "build",
-    $themes
+    processed$themes
   });
-  console.log(`
-\u{1F4BE} Writing build to ${chalk6.green(outDir)}`);
-  for (const { formatted } of processedBuilds.types) {
-    await write(formatted, outDir, options.dry);
-  }
   const fileHeader2 = R18.join("")([
     defaultFileHeader,
     $designsystemet ? `
 design-tokens: v${$designsystemet.version}` : ""
   ]);
-  await write(createThemeCSSFiles({ processedBuilds, fileHeader: fileHeader2 }), outDir, options.dry);
+  let files = [];
+  const declarationFiles = createTypeDeclarationFiles(processed$themes);
+  const cssFiles = createThemeCSSFiles({ processedBuilds, fileHeader: fileHeader2 });
+  files = [...declarationFiles, ...cssFiles];
+  if (options.tailwind) {
+    const tailwindFiles = createTailwindCSSFiles(cssFiles);
+    files = files.concat(tailwindFiles.filter(Boolean));
+  }
+  console.log(`
+\u{1F4BE} Writing build to ${chalk7.green(outDir)}`);
+  await write(files, outDir, options.dry);
   console.log(`
 \u2705 Finished building tokens!`);
   return processedBuilds;
 };
 
-// src/tokens/create/defaults.ts
+// src/tokens/create/write.ts
+import path2 from "path";
+import chalk8 from "chalk";
 import * as R19 from "ramda";
 
+// src/tokens/create/generators/$designsystemet.ts
+function generate$Designsystemet() {
+  return {
+    name: package_default.name,
+    version: package_default.version
+  };
+}
+
+// src/tokens/create/generators/$metadata.ts
+function generate$Metadata(schemes, themes, colors2) {
+  return {
+    tokenSetOrder: [
+      "primitives/globals",
+      "primitives/modes/size/small",
+      "primitives/modes/size/medium",
+      "primitives/modes/size/large",
+      "primitives/modes/size/global",
+      "primitives/modes/typography/size/small",
+      "primitives/modes/typography/size/medium",
+      "primitives/modes/typography/size/large",
+      ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
+      ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
+      ...schemes.flatMap((scheme) => [
+        `primitives/modes/color-scheme/${scheme}/global`,
+        ...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)
+      ]),
+      ...themes.map((theme) => `themes/${theme}`),
+      "semantic/color",
+      ...Object.entries(colors2.main).map(([color]) => `semantic/modes/main-color/${color}`),
+      ...Object.entries(colors2.support).map(([color]) => `semantic/modes/support-color/${color}`),
+      "semantic/style"
+    ]
+  };
+}
+
+// src/tokens/create/generators/$themes.ts
+var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
+async function createHash(text, algo = "SHA-1") {
+  const crypto = globalThis.crypto;
+  return Array.from(
+    new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
+    (byte) => byte.toString(16).padStart(2, "0")
+  ).join("");
+}
+async function generate$Themes(colorSchemes, themes, colors2) {
+  return [
+    ...generateSizeGroup(),
+    ...await generateThemesGroup(themes),
+    ...generateTypographyGroup(themes),
+    ...generateColorSchemesGroup(colorSchemes, themes),
+    generateSemanticGroup(),
+    ...await generateColorGroup("main", colors2),
+    ...await generateColorGroup("support", colors2)
+  ];
+}
+function generateSizeGroup() {
+  return [
+    {
+      id: "8b2c8cc86611a34b135cb22948666779361fd729",
+      name: "medium",
+      $figmaStyleReferences: {},
+      selectedTokenSets: {
+        "primitives/modes/size/medium": TokenSetStatus.SOURCE,
+        "primitives/modes/size/global": TokenSetStatus.ENABLED,
+        "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
+      },
+      $figmaCollectionId: "VariableCollectionId:36248:20757",
+      $figmaModeId: "41630:1",
+      group: "Size"
+    },
+    {
+      id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
+      name: "large",
+      $figmaStyleReferences: {},
+      selectedTokenSets: {
+        "primitives/modes/size/large": TokenSetStatus.SOURCE,
+        "primitives/modes/size/global": TokenSetStatus.ENABLED,
+        "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
+      },
+      $figmaCollectionId: "VariableCollectionId:36248:20757",
+      $figmaModeId: "41630:2",
+      group: "Size"
+    },
+    {
+      id: "fb11567729c298ca37c9da4e3a27716a23480824",
+      name: "small",
+      $figmaStyleReferences: {},
+      selectedTokenSets: {
+        "primitives/modes/size/small": TokenSetStatus.SOURCE,
+        "primitives/modes/size/global": TokenSetStatus.ENABLED,
+        "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
+      },
+      $figmaCollectionId: "VariableCollectionId:36248:20757",
+      $figmaModeId: "41630:3",
+      group: "Size"
+    }
+  ];
+}
+var colorSchemeDefaults = {
+  light: {
+    name: "Light",
+    selectedTokenSets: {},
+    id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
+    $figmaCollectionId: "VariableCollectionId:34811:5472",
+    $figmaModeId: "34811:0"
+  },
+  dark: {
+    name: "Dark",
+    selectedTokenSets: {},
+    id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
+    $figmaCollectionId: "VariableCollectionId:34811:5472",
+    $figmaModeId: "34811:1"
+  },
+  contrast: {
+    name: "Contrast",
+    selectedTokenSets: {},
+    id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
+    $figmaCollectionId: "VariableCollectionId:34811:5472",
+    $figmaModeId: "34811:2"
+  }
+};
+function generateColorSchemesGroup(colorSchemes, themes) {
+  return colorSchemes.map(
+    (scheme) => ({
+      ...colorSchemeDefaults[scheme],
+      selectedTokenSets: Object.fromEntries([
+        [`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
+        ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
+      ]),
+      group: "Color scheme"
+    })
+  );
+}
+async function generateThemesGroup(themes) {
+  return Promise.all(
+    themes.map(
+      async (theme, index) => ({
+        id: await createHash(theme),
+        $figmaCollectionId: "VariableCollectionId:36528:61712",
+        $figmaModeId: `40960:${index + 6}`,
+        // Start on 6 in Token Studio and Community file for some reason
+        name: theme,
+        selectedTokenSets: {
+          [`themes/${theme}`]: TokenSetStatus.ENABLED
+        },
+        group: "Theme"
+      })
+    )
+  );
+}
+function generateSemanticGroup() {
+  return {
+    id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
+    name: "Semantic",
+    selectedTokenSets: {
+      "semantic/style": TokenSetStatus.ENABLED,
+      "semantic/color": TokenSetStatus.ENABLED,
+      "primitives/globals": TokenSetStatus.SOURCE
+    },
+    $figmaCollectionId: "VariableCollectionId:34811:5976",
+    $figmaModeId: "34811:5",
+    group: "Semantic"
+  };
+}
+async function generateColorGroup(group, colors2) {
+  return Promise.all(
+    Object.entries(colors2[group]).map(
+      async ([color]) => ({
+        id: await createHash(`${group}-${color}`),
+        name: color,
+        selectedTokenSets: {
+          [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
+        },
+        group: `${capitalize(group)} color`
+      })
+    )
+  );
+}
+function generateTypographyGroup(themes) {
+  return [
+    {
+      id: "368d753fcac4455f289500eaa42e70dc0a03522f",
+      $figmaCollectionId: "VariableCollectionId:36248:20769",
+      $figmaModeId: "36248:2",
+      name: "Primary",
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
+      ),
+      group: "Typography"
+    },
+    {
+      id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
+      $figmaCollectionId: "VariableCollectionId:36248:20769",
+      $figmaModeId: "36248:3",
+      name: "Secondary",
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
+      ),
+      group: "Typography"
+    }
+  ];
+}
+
+// src/tokens/create/write.ts
+var stringify = (data) => JSON.stringify(data, null, 2);
+var writeTokens = async (options) => {
+  const {
+    outDir,
+    tokenSets,
+    theme: { name: themeName, colors: colors2 },
+    dry
+  } = options;
+  const targetDir = path2.resolve(process.cwd(), String(outDir));
+  const $themesPath = path2.join(targetDir, "$themes.json");
+  const $metadataPath = path2.join(targetDir, "$metadata.json");
+  const $designsystemetPath = path2.join(targetDir, "$designsystemet.json");
+  let themeObjects = [];
+  await mkdir(targetDir, dry);
+  try {
+    const $themes2 = await readFile($themesPath);
+    if ($themes2) {
+      themeObjects = JSON.parse($themes2);
+    }
+  } catch (_error) {
+  }
+  const concatThemeNames = R19.pipe(
+    R19.filter((obj) => R19.toLower(obj.group || "") === "theme"),
+    R19.map(R19.prop("name")),
+    // New theme is added to the end of the list so we keep the same order from config and Token Studio
+    R19.append(themeName),
+    R19.uniq
+  );
+  const themes = concatThemeNames(themeObjects);
+  console.log(`
+Themes: ${chalk8.blue(themes.join(", "))}`);
+  const $themes = await generate$Themes(["dark", "light"], themes, colors2);
+  const $metadata = generate$Metadata(["dark", "light"], themes, colors2);
+  const $designsystemet = generate$Designsystemet();
+  await writeFile($themesPath, stringify($themes), dry);
+  await writeFile($metadataPath, stringify($metadata), dry);
+  await writeFile($designsystemetPath, stringify($designsystemet), dry);
+  for (const [set4, tokens] of tokenSets) {
+    const fileDir = path2.join(targetDir, path2.dirname(set4));
+    await mkdir(fileDir, dry);
+    const filePath = path2.join(targetDir, `${set4}.json`);
+    await writeFile(filePath, stringify(tokens), dry);
+  }
+  console.log(
+    `Finished creating Designsystem design tokens in ${chalk8.green(outDir)} for theme ${chalk8.blue(themeName)}`
+  );
+};
+
+// src/tokens/create/defaults.ts
+import * as R20 from "ramda";
+
 // src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
 var globals_default = {
   "border-width": {
@@ -3183,13 +3519,13 @@ var defaultTokens = {
   "primitives/modes/typography/size/large": large_default2,
   "semantic/style": style_default
 };
-var getDefaultTokens = (tokenSets) => Object.entries(R19.pick(tokenSets, defaultTokens));
+var getDefaultTokens = (tokenSets) => Object.entries(R20.pick(tokenSets, defaultTokens));
 var getDefaultToken = (tokenPath) => {
   return [tokenPath, defaultTokens[tokenPath]];
 };
 
 // src/tokens/create/generators/color.ts
-import * as R20 from "ramda";
+import * as R21 from "ramda";
 var generateColor = (colorArray) => {
   const obj = {};
   const $type = "color";
@@ -3199,8 +3535,8 @@ var generateColor = (colorArray) => {
   return obj;
 };
 var generateColorScheme = (themeName, colorScheme2, colors2) => {
-  const main = R20.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.main);
-  const support = R20.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.support);
+  const main = R21.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.main);
+  const support = R21.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.support);
   const neutral = generateColor(generateColorScale(colors2.neutral, colorScheme2));
   return {
     [themeName]: {
@@ -3228,7 +3564,7 @@ var generateColorGlobal = (colorScheme2) => {
 };
 
 // src/tokens/create/generators/semantic.ts
-import * as R21 from "ramda";
+import * as R22 from "ramda";
 
 // src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
 var color_base_template_default = {
@@ -3692,7 +4028,7 @@ var generateSemantic = (colors2) => {
   const semanticColorTokens = customColors.map(
     (colorName) => [
       colorName,
-      R21.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
+      R22.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
     ]
   );
   const color = {
@@ -3709,7 +4045,7 @@ var generateSemantic = (colors2) => {
 };
 
 // src/tokens/create/generators/theme.ts
-import * as R22 from "ramda";
+import * as R23 from "ramda";
 
 // src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
 var theme_base_template_default = {
@@ -3810,416 +4146,160 @@ var theme_template_default = {
     $type: "color",
     $value: "{<theme>.<color>.10}"
   },
-  "11": {
-    $type: "color",
-    $value: "{<theme>.<color>.11}"
-  },
-  "12": {
-    $type: "color",
-    $value: "{<theme>.<color>.12}"
-  },
-  "13": {
-    $type: "color",
-    $value: "{<theme>.<color>.13}"
-  },
-  "14": {
-    $type: "color",
-    $value: "{<theme>.<color>.14}"
-  },
-  "15": {
-    $type: "color",
-    $value: "{<theme>.<color>.15}"
-  },
-  "16": {
-    $type: "color",
-    $value: "{<theme>.<color>.16}"
-  }
-};
-
-// src/tokens/create/generators/theme.ts
-var generateTheme = (colors2, themeName, borderRadius) => {
-  const mainColorNames = Object.keys(colors2.main);
-  const supportColorNames = Object.keys(colors2.support);
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
-  const themeColorTokens = Object.fromEntries(
-    customColors.map(
-      (colorName) => [
-        colorName,
-        R22.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
-      ]
-    )
-  );
-  const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
-  const themeFile = {
-    color: {
-      ...themeColorTokens,
-      ...themeBaseFileColor
-    },
-    ...remainingThemeFile
-  };
-  const baseBorderRadius = R22.lensPath(["border-radius", "base", "$value"]);
-  const updatedThemeFile = R22.set(baseBorderRadius, String(borderRadius), themeFile);
-  const token = JSON.parse(
-    JSON.stringify(
-      updatedThemeFile,
-      (key, value) => {
-        if (key === "$value") {
-          return value.replace("<theme>", themeName);
-        }
-        return value;
-      },
-      2
-    )
-  );
-  return token;
-};
-
-// src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
-var typography_template_default = {
-  "<theme>": {
-    "font-family": {
-      $type: "fontFamilies",
-      $value: "<font-family>"
-    },
-    "font-weight": {
-      medium: {
-        $type: "fontWeights",
-        $value: "Medium"
-      },
-      semibold: {
-        $type: "fontWeights",
-        $value: "Semi bold"
-      },
-      regular: {
-        $type: "fontWeights",
-        $value: "Regular"
-      }
-    }
-  }
-};
-
-// src/tokens/create/generators/typography.ts
-var generateTypography = (themeName, { fontFamily }) => {
-  return JSON.parse(
-    JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
-  );
-};
-
-// src/tokens/create.ts
-var cliOptions = {
-  outDir: "out-dir",
-  clean: "clean",
-  theme: {
-    colors: {
-      main: "main-colors",
-      support: "support-colors",
-      neutral: "neutral-color"
-    },
-    typography: {
-      fontFamily: "font-family"
-    },
-    borderRadius: "border-radius"
-  }
-};
-var createTokens = async (opts) => {
-  const { colors: colors2, typography: typography2, name, borderRadius } = opts;
-  const colorSchemes = ["light", "dark"];
-  const semantic2 = generateSemantic(colors2);
-  const tokenSets = new Map([
-    ...getDefaultTokens([
-      "primitives/globals",
-      "primitives/modes/size/small",
-      "primitives/modes/size/medium",
-      "primitives/modes/size/large",
-      "primitives/modes/size/global",
-      "primitives/modes/typography/size/small",
-      "primitives/modes/typography/size/medium",
-      "primitives/modes/typography/size/large"
-    ]),
-    [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
-    [`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, colors2)]
-    ]),
-    [`themes/${name}`, generateTheme(colors2, name, borderRadius)],
-    ["semantic/color", semantic2.color],
-    // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
-    ...Object.entries(semantic2.modes).flatMap(
-      ([mode, colors3]) => Object.entries(colors3).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
-    ),
-    getDefaultToken("semantic/style")
-  ]);
-  return { tokenSets };
-};
-
-// src/tokens/create/write.ts
-import path2 from "path";
-import chalk7 from "chalk";
-import * as R23 from "ramda";
-
-// src/tokens/create/generators/$designsystemet.ts
-function generate$Designsystemet() {
-  return {
-    name: package_default.name,
-    version: package_default.version
-  };
-}
-
-// src/tokens/create/generators/$metadata.ts
-function generate$Metadata(schemes, themes, colors2) {
-  return {
-    tokenSetOrder: [
-      "primitives/globals",
-      "primitives/modes/size/small",
-      "primitives/modes/size/medium",
-      "primitives/modes/size/large",
-      "primitives/modes/size/global",
-      "primitives/modes/typography/size/small",
-      "primitives/modes/typography/size/medium",
-      "primitives/modes/typography/size/large",
-      ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
-      ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
-      ...schemes.flatMap((scheme) => [
-        `primitives/modes/color-scheme/${scheme}/global`,
-        ...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)
-      ]),
-      ...themes.map((theme) => `themes/${theme}`),
-      "semantic/color",
-      ...Object.entries(colors2.main).map(([color]) => `semantic/modes/main-color/${color}`),
-      ...Object.entries(colors2.support).map(([color]) => `semantic/modes/support-color/${color}`),
-      "semantic/style"
-    ]
-  };
-}
-
-// src/tokens/create/generators/$themes.ts
-var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
-async function createHash(text, algo = "SHA-1") {
-  const crypto = globalThis.crypto;
-  return Array.from(
-    new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
-    (byte) => byte.toString(16).padStart(2, "0")
-  ).join("");
-}
-async function generate$Themes(colorSchemes, themes, colors2) {
-  return [
-    ...generateSizeGroup(),
-    ...await generateThemesGroup(themes),
-    ...generateTypographyGroup(themes),
-    ...generateColorSchemesGroup(colorSchemes, themes),
-    generateSemanticGroup(),
-    ...await generateColorGroup("main", colors2),
-    ...await generateColorGroup("support", colors2)
-  ];
-}
-function generateSizeGroup() {
-  return [
-    {
-      id: "8b2c8cc86611a34b135cb22948666779361fd729",
-      name: "medium",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/medium": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:1",
-      group: "Size"
-    },
-    {
-      id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
-      name: "large",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/large": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:2",
-      group: "Size"
-    },
-    {
-      id: "fb11567729c298ca37c9da4e3a27716a23480824",
-      name: "small",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/small": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:3",
-      group: "Size"
-    }
-  ];
-}
-var colorSchemeDefaults = {
-  light: {
-    name: "Light",
-    selectedTokenSets: {},
-    id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:0"
-  },
-  dark: {
-    name: "Dark",
-    selectedTokenSets: {},
-    id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:1"
+  "11": {
+    $type: "color",
+    $value: "{<theme>.<color>.11}"
   },
-  contrast: {
-    name: "Contrast",
-    selectedTokenSets: {},
-    id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:2"
+  "12": {
+    $type: "color",
+    $value: "{<theme>.<color>.12}"
+  },
+  "13": {
+    $type: "color",
+    $value: "{<theme>.<color>.13}"
+  },
+  "14": {
+    $type: "color",
+    $value: "{<theme>.<color>.14}"
+  },
+  "15": {
+    $type: "color",
+    $value: "{<theme>.<color>.15}"
+  },
+  "16": {
+    $type: "color",
+    $value: "{<theme>.<color>.16}"
   }
 };
-function generateColorSchemesGroup(colorSchemes, themes) {
-  return colorSchemes.map(
-    (scheme) => ({
-      ...colorSchemeDefaults[scheme],
-      selectedTokenSets: Object.fromEntries([
-        [`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
-        ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
-      ]),
-      group: "Color scheme"
-    })
-  );
-}
-async function generateThemesGroup(themes) {
-  return Promise.all(
-    themes.map(
-      async (theme, index) => ({
-        id: await createHash(theme),
-        $figmaCollectionId: "VariableCollectionId:36528:61712",
-        $figmaModeId: `40960:${index + 6}`,
-        // Start on 6 in Token Studio and Community file for some reason
-        name: theme,
-        selectedTokenSets: {
-          [`themes/${theme}`]: TokenSetStatus.ENABLED
-        },
-        group: "Theme"
-      })
+
+// src/tokens/create/generators/theme.ts
+var generateTheme = (colors2, themeName, borderRadius) => {
+  const mainColorNames = Object.keys(colors2.main);
+  const supportColorNames = Object.keys(colors2.support);
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const themeColorTokens = Object.fromEntries(
+    customColors.map(
+      (colorName) => [
+        colorName,
+        R23.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
+      ]
     )
   );
-}
-function generateSemanticGroup() {
-  return {
-    id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
-    name: "Semantic",
-    selectedTokenSets: {
-      "semantic/style": TokenSetStatus.ENABLED,
-      "semantic/color": TokenSetStatus.ENABLED,
-      "primitives/globals": TokenSetStatus.SOURCE
+  const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
+  const themeFile = {
+    color: {
+      ...themeColorTokens,
+      ...themeBaseFileColor
     },
-    $figmaCollectionId: "VariableCollectionId:34811:5976",
-    $figmaModeId: "34811:5",
-    group: "Semantic"
+    ...remainingThemeFile
   };
-}
-async function generateColorGroup(group, colors2) {
-  return Promise.all(
-    Object.entries(colors2[group]).map(
-      async ([color]) => ({
-        id: await createHash(`${group}-${color}`),
-        name: color,
-        selectedTokenSets: {
-          [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
-        },
-        group: `${capitalize(group)} color`
-      })
+  const baseBorderRadius = R23.lensPath(["border-radius", "base", "$value"]);
+  const updatedThemeFile = R23.set(baseBorderRadius, String(borderRadius), themeFile);
+  const token = JSON.parse(
+    JSON.stringify(
+      updatedThemeFile,
+      (key, value) => {
+        if (key === "$value") {
+          return value.replace("<theme>", themeName);
+        }
+        return value;
+      },
+      2
     )
   );
-}
-function generateTypographyGroup(themes) {
-  return [
-    {
-      id: "368d753fcac4455f289500eaa42e70dc0a03522f",
-      $figmaCollectionId: "VariableCollectionId:36248:20769",
-      $figmaModeId: "36248:2",
-      name: "Primary",
-      selectedTokenSets: Object.fromEntries(
-        themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
-      ),
-      group: "Typography"
-    },
-    {
-      id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
-      $figmaCollectionId: "VariableCollectionId:36248:20769",
-      $figmaModeId: "36248:3",
-      name: "Secondary",
-      selectedTokenSets: Object.fromEntries(
-        themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
-      ),
-      group: "Typography"
-    }
-  ];
-}
+  return token;
+};
 
-// src/tokens/create/write.ts
-var stringify = (data) => JSON.stringify(data, null, 2);
-var writeTokens = async (options) => {
-  const {
-    outDir,
-    tokenSets,
-    theme: { name: themeName, colors: colors2 },
-    dry
-  } = options;
-  const targetDir = path2.resolve(process.cwd(), String(outDir));
-  const $themesPath = path2.join(targetDir, "$themes.json");
-  const $metadataPath = path2.join(targetDir, "$metadata.json");
-  const $designsystemetPath = path2.join(targetDir, "$designsystemet.json");
-  let themeObjects = [];
-  await mkdir(targetDir, dry);
-  try {
-    const $themes2 = await readFile($themesPath);
-    if ($themes2) {
-      themeObjects = JSON.parse($themes2);
+// src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
+var typography_template_default = {
+  "<theme>": {
+    "font-family": {
+      $type: "fontFamilies",
+      $value: "<font-family>"
+    },
+    "font-weight": {
+      medium: {
+        $type: "fontWeights",
+        $value: "Medium"
+      },
+      semibold: {
+        $type: "fontWeights",
+        $value: "Semi bold"
+      },
+      regular: {
+        $type: "fontWeights",
+        $value: "Regular"
+      }
     }
-  } catch (error) {
   }
-  const concatThemeNames = R23.pipe(
-    R23.filter((obj) => R23.toLower(obj.group || "") === "theme"),
-    R23.map(R23.prop("name")),
-    // New theme is added to the end of the list so we keep the same order from config and Token Studio
-    R23.append(themeName),
-    R23.uniq
+};
+
+// src/tokens/create/generators/typography.ts
+var generateTypography = (themeName, { fontFamily }) => {
+  return JSON.parse(
+    JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
   );
-  const themes = concatThemeNames(themeObjects);
-  console.log(`
-Themes: ${chalk7.blue(themes.join(", "))}`);
-  const $themes = await generate$Themes(["dark", "light"], themes, colors2);
-  const $metadata = generate$Metadata(["dark", "light"], themes, colors2);
-  const $designsystemet = generate$Designsystemet();
-  await writeFile($themesPath, stringify($themes), dry);
-  await writeFile($metadataPath, stringify($metadata), dry);
-  await writeFile($designsystemetPath, stringify($designsystemet), dry);
-  for (const [set4, tokens] of tokenSets) {
-    const fileDir = path2.join(targetDir, path2.dirname(set4));
-    await mkdir(fileDir, dry);
-    const filePath = path2.join(targetDir, `${set4}.json`);
-    await writeFile(filePath, stringify(tokens), dry);
+};
+
+// src/tokens/create.ts
+var cliOptions = {
+  outDir: "out-dir",
+  clean: "clean",
+  tailwind: "tailwind",
+  theme: {
+    colors: {
+      main: "main-colors",
+      support: "support-colors",
+      neutral: "neutral-color"
+    },
+    typography: {
+      fontFamily: "font-family"
+    },
+    borderRadius: "border-radius"
   }
-  console.log(
-    `Finished creating Designsystem design tokens in ${chalk7.green(outDir)} for theme ${chalk7.blue(themeName)}`
-  );
+};
+var createTokens = async (opts) => {
+  const { colors: colors2, typography: typography2, name, borderRadius } = opts;
+  const colorSchemes = ["light", "dark"];
+  const semantic2 = generateSemantic(colors2);
+  const tokenSets = new Map([
+    ...getDefaultTokens([
+      "primitives/globals",
+      "primitives/modes/size/small",
+      "primitives/modes/size/medium",
+      "primitives/modes/size/large",
+      "primitives/modes/size/global",
+      "primitives/modes/typography/size/small",
+      "primitives/modes/typography/size/medium",
+      "primitives/modes/typography/size/large"
+    ]),
+    [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
+    [`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, colors2)]
+    ]),
+    [`themes/${name}`, generateTheme(colors2, name, borderRadius)],
+    ["semantic/color", semantic2.color],
+    // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
+    ...Object.entries(semantic2.modes).flatMap(
+      ([mode, colors3]) => Object.entries(colors3).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
+    ),
+    getDefaultToken("semantic/style")
+  ]);
+  return { tokenSets };
 };
 
 // bin/config.ts
 import path4 from "path";
-import chalk9 from "chalk";
+import chalk10 from "chalk";
 import * as R25 from "ramda";
 
 // src/config.ts
-import chalk8 from "chalk";
+import chalk9 from "chalk";
 import * as R24 from "ramda";
-import { fromError } from "zod-validation-error";
 import { z } from "zod/v4";
+import { fromError } from "zod-validation-error/v4";
 function mapPathToOptionName(path5) {
   const normalisedPath = path5[0] === "themes" ? ["theme", ...R24.drop(2, path5)] : path5;
   const option = R24.path(normalisedPath, cliOptions);
@@ -4229,38 +4309,42 @@ function mapPathToOptionName(path5) {
   return option;
 }
 function makeFriendlyError(err) {
-  return fromError(err, {
-    messageBuilder: (issues) => issues.map((issue) => {
-      const issuePath = issue.path.join(".");
-      const optionName = mapPathToOptionName(issue.path);
-      const errorCode = `(error code: ${issue.code})`;
-      const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
-      return `  - Error in JSON value ${chalk8.red(issuePath)}${optionMessage}:
-    ${issue.message} ${chalk8.dim(errorCode)}`;
-    }).join("\n")
-  });
+  try {
+    return fromError(err, {
+      messageBuilder: (issues) => issues.map((issue) => {
+        const issuePath = issue.path.join(".");
+        const optionName = mapPathToOptionName(issue.path);
+        const errorCode = `(error code: ${issue.code})`;
+        const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
+        return `  - Error in JSON value ${chalk9.red(issuePath)}${optionMessage}:
+      ${issue.message} ${chalk9.dim(errorCode)}`;
+      }).join("\n")
+    });
+  } catch (_err2) {
+    console.error(chalk9.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
+    console.error(err instanceof Error ? err.stack : "No stack trace available");
+  }
 }
 function validateConfig(schema, unvalidatedConfig, configPath) {
   try {
     return schema.parse(unvalidatedConfig);
   } catch (err) {
-    console.error(chalk8.redBright(`Invalid config file at ${chalk8.red(configPath)}`));
+    console.error(chalk9.redBright(`Invalid config file at ${chalk9.red(configPath)}`));
     const validationError = makeFriendlyError(err);
-    console.error(validationError.toString());
+    console.error(validationError?.toString());
     process.exit(1);
   }
 }
-function parseConfig(schema, configFile, configPath) {
+function parseConfig(configFile, configPath) {
   if (!configFile) {
     return {};
   }
   try {
-    const parsedConfig = JSON.parse(configFile);
-    return schema.parse(parsedConfig);
+    return JSON.parse(configFile);
   } catch (err) {
-    console.error(chalk8.redBright(`Failed parsing config file at ${chalk8.red(configPath)}`));
+    console.error(chalk9.redBright(`Failed parsing config file at ${chalk9.red(configPath)}`));
     const validationError = makeFriendlyError(err);
-    console.error(validationError.toString());
+    console.error(validationError?.toString());
     process.exit(1);
   }
 }
@@ -4298,17 +4382,16 @@ var themeSchema = z.object({
   }).describe("Defines the typography for a given theme").optional(),
   borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional()
 }).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
-var configFileBuildSchema = z.object({
+var commonConfig = z.object({
   clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional()
 });
-var configFileCreateSchema = z.object({
+var _configFileCreateSchema = z.object({
   outDir: z.string().meta({ description: "Path to the output directory for the created design tokens" }),
-  clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional(),
   themes: z.record(z.string(), themeSchema).meta({
     description: "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name."
   })
 }).required();
-var combinedConfigSchema = configFileCreateSchema.extend(configFileBuildSchema.shape);
+var configFileCreateSchema = _configFileCreateSchema.extend(commonConfig.shape);
 
 // bin/options.ts
 var getOptionIfMatchingSource = (...sources) => (command, option) => {
@@ -4331,26 +4414,22 @@ async function readConfigFile(configPath, allowFileNotFound = true) {
     if (allowFileNotFound) {
       return "";
     }
-    console.error(chalk9.redBright(`Could not read config file at ${chalk9.blue(resolvedPath)}`));
+    console.error(chalk10.redBright(`Could not read config file at ${chalk10.blue(resolvedPath)}`));
     throw err;
   }
   if (configFile) {
-    console.log(`Found config file: ${chalk9.green(resolvedPath)}`);
+    console.log(`Found config file: ${chalk10.green(resolvedPath)}`);
   }
   return configFile;
 }
 async function parseCreateConfig(configFile, options) {
   const { cmd, theme = "theme", configPath } = options;
-  const configParsed = parseConfig(
-    configFileCreateSchema,
-    configFile,
-    configPath
-  );
+  const configParsed = parseConfig(configFile, configPath);
   const themeColors = Object.values(configParsed?.themes ?? {}).map(
     (x) => /* @__PURE__ */ new Set([...R25.keys(x.colors.main), ...R25.keys(x.colors.support)])
   );
   if (!R25.all(R25.equals(R25.__, themeColors[0]), themeColors)) {
-    console.error(chalk9.redBright(`In config, all themes must have the same custom color names, but we found:`));
+    console.error(chalk10.redBright(`In config, all themes must have the same custom color names, but we found:`));
     const themeNames = R25.keys(configParsed.themes ?? {});
     themeColors.forEach((colors2, index) => {
       const colorNames = Array.from(colors2);
@@ -4391,8 +4470,8 @@ async function parseCreateConfig(configFile, options) {
   return validateConfig(configFileCreateSchema, unvalidatedConfig, configPath);
 }
 async function parseBuildConfig(configFile, { configPath }) {
-  const configParsed = parseConfig(configFileBuildSchema, configFile, configPath);
-  return validateConfig(configFileBuildSchema, configParsed, configPath);
+  const configParsed = parseConfig(configFile, configPath);
+  return validateConfig(commonConfig, configParsed, configPath);
 }
 
 // bin/designsystemet.ts
@@ -4404,12 +4483,12 @@ var DEFAULT_THEME_NAME = "theme";
 var DEFAULT_CONFIG_FILE = "designsystemet.config.json";
 function makeTokenCommands() {
   const tokenCmd = createCommand("tokens");
-  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk10.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option(
+  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk11.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option(
     "-o, --out-dir <string>",
-    `Output directory for built ${chalk10.blue("design-tokens")}`,
+    `Output directory for built ${chalk11.blue("design-tokens")}`,
     DEFAULT_TOKENS_BUILD_DIR
-  ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${chalk10.blue("design-tokens")}`, parseBoolean, false).option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).option("--config <string>", `Path to config file (default: "${DEFAULT_CONFIG_FILE}")`).action(async (opts) => {
-    const { preview, verbose, clean, dry } = opts;
+  ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${chalk11.blue("design-tokens")}`, parseBoolean, false).option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).option("--config <string>", `Path to config file (default: "${DEFAULT_CONFIG_FILE}")`).option("--experimental-tailwind", "Generate Tailwind CSS classes for tokens", false).action(async (opts) => {
+    const { preview, verbose, clean, dry, experimentalTailwind } = opts;
     const tokensDir = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENS_CREATE_DIR;
     const outDir = typeof opts.outDir === "string" ? opts.outDir : "./dist/tokens";
     const { configFile, configPath } = await getConfigFile(opts.config);
@@ -4420,14 +4499,14 @@ function makeTokenCommands() {
     if (clean) {
       await cleanDir(outDir, dry);
     }
-    await buildTokens({ tokensDir, outDir, preview, verbose, dry, ...config });
+    await buildTokens({ tokensDir, outDir, preview, verbose, dry, tailwind: experimentalTailwind, ...config });
     return Promise.resolve();
   });
   tokenCmd.command("create").description("Create Designsystemet tokens").option(`-m, --${cliOptions.theme.colors.main} <name:hex...>`, `Main colors`, parseColorValues).option(`-s, --${cliOptions.theme.colors.support} <name:hex...>`, `Support colors`, parseColorValues).option(`-n, --${cliOptions.theme.colors.neutral} <hex>`, `Neutral hex color`, convertToHex).option(
     `-o, --${cliOptions.outDir} <string>`,
-    `Output directory for created ${chalk10.blue("design-tokens")}`,
+    `Output directory for created ${chalk11.blue("design-tokens")}`,
     DEFAULT_TOKENS_CREATE_DIR
-  ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk10.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family (experimental)`, DEFAULT_FONT).option(
+  ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk11.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family (experimental)`, DEFAULT_FONT).option(
     `-b, --${cliOptions.theme.borderRadius} <number>`,
     `Unitless base border-radius in px`,
     (radiusAsString) => Number(radiusAsString),
@@ -4468,8 +4547,8 @@ program.command("migrate").description("run a Designsystemet migration").addArgu
       console.error("Migration not found!");
       throw "Aborting";
     }
-    console.log(`Applying migration ${chalk10.blue(migrationKey)} with glob: ${chalk10.green(glob2)}`);
-    migration?.(glob2).then(() => console.log(`Migration ${chalk10.blue(migrationKey)} finished`)).catch((error) => console.log(error));
+    console.log(`Applying migration ${chalk11.blue(migrationKey)} with glob: ${chalk11.green(glob2)}`);
+    migration?.(glob2).then(() => console.log(`Migration ${chalk11.blue(migrationKey)} finished`)).catch((error) => console.log(error));
   } else {
     console.log("Migrate: please specify a migration name or --list");
   }
@@ -4480,7 +4559,7 @@ function parseColorValues(value, previous = {}) {
   previous[name] = convertToHex(hex);
   return previous;
 }
-function parseBoolean(value, previous) {
+function parseBoolean(value) {
   return value === "true" || value === true;
 }
 async function getConfigFile(config) {