@digdir/designsystemet 1.0.8 → 1.1.0

package/dist/bin/designsystemet.js

@@ -5,36 +5,6 @@ import { Argument, createCommand, program } from "@commander-js/extra-typings";
 import chalk10 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",
@@ -864,14 +864,71 @@ import path from "path";
 import chalk6 from "chalk";
 import * as R18 from "ramda";
 
-// src/tokens/process/theme.ts
-import * as R5 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 chalk3 from "chalk";
+import * as R5 from "ramda";
 
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.0.8",
+  version: "1.1.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -881,7 +938,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",
@@ -906,8 +963,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",
@@ -915,17 +970,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:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.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": "^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",
@@ -936,11 +994,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",
@@ -948,20 +1006,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,
@@ -1130,7 +1186,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;
@@ -1172,7 +1228,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 = R7.compose(
@@ -1215,7 +1271,7 @@ var isInlineTokens = R8.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,
@@ -1243,7 +1299,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({
@@ -1281,7 +1337,7 @@ var typographyFontFamilyPredicate = R9.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({
@@ -2170,7 +2226,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 ${chalk6.green(tokensDir)}`);
@@ -2181,57 +2237,319 @@ var buildTokens = async (options) => {
     type: "build",
     $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 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 ${chalk6.green(outDir)}`);
+  for (const { formatted } of processedBuilds.types) {
+    await write(formatted, outDir, options.dry);
+  }
+  await write(cssFiles, 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 chalk7 from "chalk";
 import * as R19 from "ramda";
 
-// src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
-var globals_default = {
-  "border-width": {
-    "1": {
-      $type: "borderWidth",
-      $value: "1px"
+// 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"
     },
-    "3": {
-      $type: "borderWidth",
-      $value: "3px"
+    {
+      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"
   },
-  shadow: {
-    "100": {
-      $type: "boxShadow",
-      $value: [
-        {
-          color: "rgba(0,0,0,0.16)",
-          x: "0",
-          y: "0",
-          blur: "1",
-          spread: "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
         },
-        {
-          x: "0",
-          y: "1",
-          blur: "2",
-          spread: "0",
-          color: "rgba(0,0,0,0.12)"
-        }
-      ]
-    },
+        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: ${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);
+  }
+  console.log(
+    `Finished creating Designsystem design tokens in ${chalk7.green(outDir)} for theme ${chalk7.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": {
+    "1": {
+      $type: "borderWidth",
+      $value: "1px"
+    },
+    "3": {
+      $type: "borderWidth",
+      $value: "3px"
+    }
+  },
+  shadow: {
+    "100": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.16)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
+        },
+        {
+          x: "0",
+          y: "1",
+          blur: "2",
+          spread: "0",
+          color: "rgba(0,0,0,0.12)"
+        }
+      ]
+    },
     "200": {
       $type: "boxShadow",
       $value: [
@@ -3183,13 +3501,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 +3517,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 +3546,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 +4010,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 +4027,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 = {
@@ -3845,7 +4163,7 @@ var generateTheme = (colors2, themeName, borderRadius) => {
     customColors.map(
       (colorName) => [
         colorName,
-        R22.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
+        R23.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
       ]
     )
   );
@@ -3857,8 +4175,8 @@ var generateTheme = (colors2, themeName, borderRadius) => {
     },
     ...remainingThemeFile
   };
-  const baseBorderRadius = R22.lensPath(["border-radius", "base", "$value"]);
-  const updatedThemeFile = R22.set(baseBorderRadius, String(borderRadius), themeFile);
+  const baseBorderRadius = R23.lensPath(["border-radius", "base", "$value"]);
+  const updatedThemeFile = R23.set(baseBorderRadius, String(borderRadius), themeFile);
   const token = JSON.parse(
     JSON.stringify(
       updatedThemeFile,
@@ -3909,6 +4227,7 @@ var generateTypography = (themeName, { fontFamily }) => {
 var cliOptions = {
   outDir: "out-dir",
   clean: "clean",
+  tailwind: "tailwind",
   theme: {
     colors: {
       main: "main-colors",
@@ -3953,263 +4272,6 @@ var createTokens = async (opts) => {
   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"
-  },
-  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 = 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
-  );
-  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);
-  }
-  console.log(
-    `Finished creating Designsystem design tokens in ${chalk7.green(outDir)} for theme ${chalk7.blue(themeName)}`
-  );
-};
-
 // bin/config.ts
 import path4 from "path";
 import chalk9 from "chalk";
@@ -4218,8 +4280,8 @@ import * as R25 from "ramda";
 // src/config.ts
 import chalk8 from "chalk";
 import * as R24 from "ramda";
-import { fromError } from "zod-validation-error";
 import { z } from "zod/v4";
+import { fromError } from "zod-validation-error";
 function mapPathToOptionName(path5) {
   const normalisedPath = path5[0] === "themes" ? ["theme", ...R24.drop(2, path5)] : path5;
   const option = R24.path(normalisedPath, cliOptions);
@@ -4408,8 +4470,8 @@ function makeTokenCommands() {
     "-o, --out-dir <string>",
     `Output directory for built ${chalk10.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 ${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}")`).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,7 +4482,7 @@ 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(
@@ -4480,7 +4542,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) {