@digdir/designsystemet 1.0.7 → 1.1.0

package/dist/src/migrations/beta-to-v1.js

@@ -49,12 +49,19 @@ import postcss from "postcss";
 // src/utils.ts
 import fs from "fs/promises";
 import chalk2 from "chalk";
-var readFile = async (path, dry) => {
+var readFile = async (path, dry, allowFileNotFound) => {
   if (dry) {
     console.log(`${chalk2.blue("readFile")} ${path}`);
     return Promise.resolve("");
   }
-  return fs.readFile(path, "utf-8");
+  try {
+    return await fs.readFile(path, "utf-8");
+  } catch (error) {
+    if (allowFileNotFound && error.code === "ENOENT") {
+      return "";
+    }
+    throw error;
+  }
 };
 
 // src/migrations/codemods/css/run.ts

package/dist/src/migrations/codemods/css/run.js

@@ -6,12 +6,19 @@ import postcss from "postcss";
 // src/utils.ts
 import fs from "fs/promises";
 import chalk from "chalk";
-var readFile = async (path, dry) => {
+var readFile = async (path, dry, allowFileNotFound) => {
   if (dry) {
     console.log(`${chalk.blue("readFile")} ${path}`);
     return Promise.resolve("");
   }
-  return fs.readFile(path, "utf-8");
+  try {
+    return await fs.readFile(path, "utf-8");
+  } catch (error) {
+    if (allowFileNotFound && error.code === "ENOENT") {
+      return "";
+    }
+    throw error;
+  }
 };
 
 // src/migrations/codemods/css/run.ts

package/dist/src/migrations/color-rename-next49.js

@@ -40,12 +40,19 @@ import postcss from "postcss";
 // src/utils.ts
 import fs from "fs/promises";
 import chalk2 from "chalk";
-var readFile = async (path, dry) => {
+var readFile = async (path, dry, allowFileNotFound) => {
   if (dry) {
     console.log(`${chalk2.blue("readFile")} ${path}`);
     return Promise.resolve("");
   }
-  return fs.readFile(path, "utf-8");
+  try {
+    return await fs.readFile(path, "utf-8");
+  } catch (error) {
+    if (allowFileNotFound && error.code === "ENOENT") {
+      return "";
+    }
+    throw error;
+  }
 };
 
 // src/migrations/codemods/css/run.ts

package/dist/src/migrations/index.js

@@ -49,12 +49,19 @@ import postcss from "postcss";
 // src/utils.ts
 import fs from "fs/promises";
 import chalk2 from "chalk";
-var readFile = async (path, dry) => {
+var readFile = async (path, dry, allowFileNotFound) => {
   if (dry) {
     console.log(`${chalk2.blue("readFile")} ${path}`);
     return Promise.resolve("");
   }
-  return fs.readFile(path, "utf-8");
+  try {
+    return await fs.readFile(path, "utf-8");
+  } catch (error) {
+    if (allowFileNotFound && error.code === "ENOENT") {
+      return "";
+    }
+    throw error;
+  }
 };
 
 // src/migrations/codemods/css/run.ts

package/dist/src/scripts/createJsonSchema.js

@@ -4,26 +4,10 @@ import { resolve } from "path";
 import { z as z2 } from "zod/v4";
 
 // src/config.ts
+import chalk from "chalk";
 import * as R7 from "ramda";
 import { z } from "zod/v4";
-
-// src/colors/utils.ts
-import chroma from "chroma-js";
-import Colorjs from "colorjs.io";
-import { Hsluv } from "hsluv";
-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";
+import { fromError } from "zod-validation-error";
 
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
@@ -271,6 +255,24 @@ 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 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",
@@ -332,19 +334,22 @@ 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 configFileSchema = z.object({
-  outDir: z.string().meta({ description: "Path to the output directory for the created design tokens" }).optional(),
+var configFileBuildSchema = z.object({
+  clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional()
+});
+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."
   })
-});
-var combinedConfigSchema = configFileSchema.required();
+}).required();
+var combinedConfigSchema = configFileCreateSchema.extend(configFileBuildSchema.shape);
 
 // src/scripts/createJsonSchema.ts
 var schema = z2.object({
   $schema: z2.string().optional()
-}).extend(configFileSchema.shape);
+}).extend(combinedConfigSchema.shape);
 writeFile(
   resolve(import.meta.dirname, "../../dist/config.schema.json"),
   JSON.stringify(

package/dist/src/scripts/update-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update-template.d.ts","sourceRoot":"","sources":["../../../src/scripts/update-template.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,eAAe,qBA+E3B,CAAC"}
+{"version":3,"file":"update-template.d.ts","sourceRoot":"","sources":["../../../src/scripts/update-template.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,eAAe,qBA+E3B,CAAC"}

package/dist/src/scripts/update-template.js

@@ -1122,12 +1122,19 @@ var cleanDir = async (dir, dry) => {
 \u{1F525} Cleaning dir ${chalk.red(`${dir.trim()}`)} `);
   return fs.rm(dir, { recursive: true, force: true });
 };
-var readFile = async (path2, dry) => {
+var readFile = async (path2, dry, allowFileNotFound) => {
   if (dry) {
     console.log(`${chalk.blue("readFile")} ${path2}`);
     return Promise.resolve("");
   }
-  return fs.readFile(path2, "utf-8");
+  try {
+    return await fs.readFile(path2, "utf-8");
+  } catch (error) {
+    if (allowFileNotFound && error.code === "ENOENT") {
+      return "";
+    }
+    throw error;
+  }
 };
 
 // src/scripts/update-template.ts

package/dist/src/tokens/build.d.ts

@@ -1,3 +1,3 @@
 import { type BuildOptions } from './process/platform.js';
-export declare const buildTokens: (options: Omit<BuildOptions, "process" | "$themes">) => Promise<import("./process/platform.js").ProcessReturn>;
+export declare const buildTokens: (options: Omit<BuildOptions, "type" | "$themes">) => Promise<import("./process/platform.js").ProcessReturn>;
 //# sourceMappingURL=build.d.ts.map

package/dist/src/tokens/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/tokens/build.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,uBAAuB,CAAC;AAiB3E,eAAO,MAAM,WAAW,GAAU,SAAS,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,SAAS,CAAC,2DAiDnF,CAAC"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/tokens/build.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,uBAAuB,CAAC;AAiB3E,eAAO,MAAM,WAAW,GAAU,SAAS,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC,2DAqDhF,CAAC"}

package/dist/src/tokens/build.js

@@ -28,31 +28,86 @@ var writeFile = async (path2, data, dry) => {
     throw error;
   });
 };
-var cleanDir = async (dir, dry) => {
-  if (dry) {
-    console.log(`${chalk.blue("cleanDir")} ${dir}`);
-    return Promise.resolve();
-  }
-  console.log(`
-\u{1F525} Cleaning dir ${chalk.red(`${dir.trim()}`)} `);
-  return fs.rm(dir, { recursive: true, force: true });
-};
-var readFile = async (path2, dry) => {
+var readFile = async (path2, dry, allowFileNotFound) => {
   if (dry) {
     console.log(`${chalk.blue("readFile")} ${path2}`);
     return Promise.resolve("");
   }
-  return fs.readFile(path2, "utf-8");
+  try {
+    return await fs.readFile(path2, "utf-8");
+  } catch (error) {
+    if (allowFileNotFound && error.code === "ENOENT") {
+      return "";
+    }
+    throw error;
+  }
 };
 
-// src/tokens/process/theme.ts
-import * as R from "ramda";
+// 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 chalk2 from "chalk";
+import * as R from "ramda";
 
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.0.7",
+  version: "1.1.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -62,7 +117,7 @@ var package_default = {
     type: "git",
     url: "git+https://github.com/digdir/designsystemet.git"
   },
-  homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
+  homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
   license: "MIT",
   type: "module",
   main: "./dist/src/index.js",
@@ -87,8 +142,6 @@ var package_default = {
   },
   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",
@@ -96,17 +149,20 @@ var package_default = {
     "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:design-tokens": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
-    verify: "pnpm test && pnpm update:template && pnpm update:design-tokens"
+    "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": "^13.1.0",
+    "@commander-js/extra-typings": "^14.0.0",
     "@tokens-studio/sd-transforms": "1.3.0",
     "apca-w3": "^0.1.9",
     chalk: "^5.4.1",
@@ -117,11 +173,11 @@ var package_default = {
     "fast-glob": "^3.3.3",
     hsluv: "^1.0.1",
     "object-hash": "^3.0.0",
-    postcss: "^8.5.3",
+    postcss: "^8.5.5",
     ramda: "^0.30.1",
     "style-dictionary": "^4.4.0",
-    zod: "^3.25.30",
-    "zod-validation-error": "^3.4.1"
+    zod: "^3.25.64",
+    "zod-validation-error": "^3.5.0"
   },
   devDependencies: {
     "@tokens-studio/types": "0.5.2",
@@ -129,20 +185,18 @@ var package_default = {
     "@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/node": "^22.15.31",
     "@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",
+    tsx: "^4.20.3",
     typescript: "^5.8.3"
   }
 };
 
-// src/tokens/process/theme.ts
+// src/tokens/process/output/theme.ts
 var defaultFileHeader = `build: v${package_default.version}`;
 var createThemeCSSFiles = ({
   processedBuilds,
@@ -264,7 +318,9 @@ function isGlobalColorToken(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 R2.startsWith(["color", category], token.path);
 }
@@ -309,7 +365,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;
@@ -351,7 +407,7 @@ ${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 = R3.compose(
@@ -394,7 +450,7 @@ var isInlineTokens = R4.anyPass([isNumericBorderRadiusToken, isNumericSizeToken,
 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,
@@ -422,7 +478,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({
@@ -460,7 +516,7 @@ var typographyFontFamilyPredicate = R5.allPass([
 ]);
 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({
@@ -601,7 +657,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"],
@@ -1008,8 +1064,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];
@@ -1160,9 +1215,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"] },
@@ -1203,17 +1261,40 @@ 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(
+      chalk4.yellow(
+        `
+\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(
+      chalk4.yellow(
+        `
+\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) => R13.not(theme.group === "size" && theme.name !== "medium"));
-  const customColors = getCustomColors(processed$themes);
-  if (!buildOptions.rootColor) {
+  const customColors = getCustomColors(processed$themes, colorGroups);
+  if (!buildOptions.defaultColor) {
     const firstMainColor = R13.head(customColors);
-    buildOptions.rootColor = firstMainColor;
-    console.log(`Using first main color; ${chalk4.blue(firstMainColor)}, as ${chalk4.green(`":root"`)} color`);
+    buildOptions.defaultColor = firstMainColor;
+  }
+  if (buildOptions.defaultColor) {
+    console.log(`
+\u{1F3A8} Using ${chalk4.blue(buildOptions.defaultColor)} as default color`);
   }
   const buildAndSdConfigs = R13.map((buildConfig) => {
     const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
@@ -1324,7 +1405,7 @@ var buildTokens = async (options) => {
   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 ${chalk5.green(tokensDir)}`);
@@ -1332,23 +1413,25 @@ var buildTokens = async (options) => {
     ...options,
     outDir,
     tokensDir,
-    process: "build",
+    type: "build",
     $themes
   });
-  if (options.clean) {
-    await cleanDir(outDir, options.dry);
+  const fileHeader2 = R14.join("")([
+    defaultFileHeader,
+    $designsystemet ? `
+design-tokens: v${$designsystemet.version}` : ""
+  ]);
+  let cssFiles = createThemeCSSFiles({ processedBuilds, fileHeader: fileHeader2 });
+  if (options.tailwind) {
+    const tailwindFiles = createTailwindCSSFiles(cssFiles);
+    cssFiles = cssFiles.concat(tailwindFiles.filter(Boolean));
   }
   console.log(`
 \u{1F4BE} Writing build to ${chalk5.green(outDir)}`);
   for (const { formatted } of processedBuilds.types) {
     await write(formatted, outDir, options.dry);
   }
-  const fileHeader2 = R14.join("")([
-    defaultFileHeader,
-    $designsystemet ? `
-design-tokens: v${$designsystemet.version}` : ""
-  ]);
-  await write(createThemeCSSFiles({ processedBuilds, fileHeader: fileHeader2 }), outDir, options.dry);
+  await write(cssFiles, outDir, options.dry);
   console.log(`
 \u2705 Finished building tokens!`);
   return processedBuilds;

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

@@ -1,7 +1,7 @@
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.0.7",
+  version: "1.1.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -11,7 +11,7 @@ var package_default = {
     type: "git",
     url: "git+https://github.com/digdir/designsystemet.git"
   },
-  homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
+  homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
   license: "MIT",
   type: "module",
   main: "./dist/src/index.js",
@@ -36,8 +36,6 @@ var package_default = {
   },
   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",
@@ -45,17 +43,20 @@ var package_default = {
     "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:design-tokens": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
-    verify: "pnpm test && pnpm update:template && pnpm update:design-tokens"
+    "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": "^13.1.0",
+    "@commander-js/extra-typings": "^14.0.0",
     "@tokens-studio/sd-transforms": "1.3.0",
     "apca-w3": "^0.1.9",
     chalk: "^5.4.1",
@@ -66,11 +67,11 @@ var package_default = {
     "fast-glob": "^3.3.3",
     hsluv: "^1.0.1",
     "object-hash": "^3.0.0",
-    postcss: "^8.5.3",
+    postcss: "^8.5.5",
     ramda: "^0.30.1",
     "style-dictionary": "^4.4.0",
-    zod: "^3.25.30",
-    "zod-validation-error": "^3.4.1"
+    zod: "^3.25.64",
+    "zod-validation-error": "^3.5.0"
   },
   devDependencies: {
     "@tokens-studio/types": "0.5.2",
@@ -78,15 +79,13 @@ var package_default = {
     "@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/node": "^22.15.31",
     "@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",
+    tsx: "^4.20.3",
     typescript: "^5.8.3"
   }
 };