@digdir/designsystemet 1.7.1 → 1.7.3

package/README.md

@@ -26,7 +26,7 @@ If a [config file](#using-a-config-file) you can also re-run with `"clean": true
 > ⚠️ **WARNING** ⚠️  
 > The design tokens created by this tool are considered an implementation detail, and is subject
 > to change at any time without being considered a breaking change. We **only** support customisations
-> done through the CLI options. Direct editing of the design tokens are **not** supported.
+> done through the CLI options and config. Direct editing of the design tokens are **not** supported.
 > 
 > Since tokens may be added or removed at any time, it is necessary to routinely re-run this
 > command when upgrading the libraries. This will remove any direct edits to the design tokens.
@@ -105,3 +105,11 @@ npx @digdir/designsystemet tokens build
 #### Complex config example
 
 Have a look at the `*.config.json` files under the `packages/cli` in the Github repo for more complex examples.
+
+#### Create config from existing tokens
+
+You can get a minimal config file, meaning without overrides, generated from existing design tokens using the following command:
+
+```sh
+npx @digdir/designsystemet generate-config-from-tokens --dir <path to design tokens>
+```

package/configs/test-tokens.config.json

@@ -42,6 +42,10 @@
         },
         "severity": {
           "danger": "#ff00ff"
+        },
+        "linkVisited": {
+          "light": "#ff1234",
+          "dark": "#1234ff"
         }
       }
     },

package/dist/bin/config.js

@@ -387,21 +387,26 @@ var colorCategorySchema = z.record(
   error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
 }).describe("An object with one or more color definitions. The property name is used as the color name.");
 var colorModeOverrideSchema = z.object({
-  light: colorSchema.optional(),
-  dark: colorSchema.optional()
+  light: colorSchema.optional().describe("A hex color that overrides light mode"),
+  dark: colorSchema.optional().describe("A hex color that overrides dark mode")
 }).describe('Override values for semantic color tokens like "background-subtle", "border-default", etc.');
 var colorWeightOverrideSchema = z.partialRecord(z.enum([...colorNames]), colorModeOverrideSchema).describe('The name of the color to add overrides for, e.g. "accent"');
 var semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
 var severityColorOverrideSchema = z.partialRecord(z.enum(baseColorNames), colorSchema.describe("A hex color, which is used for creating a color scale")).optional().describe("An object with severity color names as keys");
+var linkVisitedOverrideSchema = z.object({
+  light: colorSchema.optional().describe("A hex color that overrides light mode"),
+  dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+}).describe('Overrides for the "link-visited" color');
 var overridesSchema = z.object({
   colors: semanticColorOverrideSchema.optional(),
-  severity: severityColorOverrideSchema.optional()
+  severity: severityColorOverrideSchema.optional(),
+  linkVisited: linkVisitedOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({
     main: colorCategorySchema,
     support: colorCategorySchema.optional().default({}),
-    neutral: colorSchema
+    neutral: colorSchema.describe("A hex color, which is used for creating a color scale.")
   }).meta({ description: "Defines the colors for this theme" }),
   typography: z.object({
     fontFamily: z.string().meta({ description: "Sets the font-family for this theme" })

package/dist/bin/designsystemet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"designsystemet.d.ts","sourceRoot":"","sources":["../../bin/designsystemet.ts"],"names":[],"mappings":";AAcA,eAAO,MAAM,WAAW,4iBASvB,CAAC"}
+{"version":3,"file":"designsystemet.d.ts","sourceRoot":"","sources":["../../bin/designsystemet.ts"],"names":[],"mappings":";AAeA,eAAO,MAAM,WAAW,4iBASvB,CAAC"}

package/dist/bin/designsystemet.js

@@ -2,7 +2,7 @@
 
 // bin/designsystemet.ts
 import { Argument, createCommand, program } from "@commander-js/extra-typings";
-import pc11 from "picocolors";
+import pc12 from "picocolors";
 import * as R29 from "ramda";
 
 // src/colors/colorMetadata.ts
@@ -410,13 +410,13 @@ var mkdir = async (dir, dry) => {
   }
   return fs.mkdir(dir, { recursive: true });
 };
-var writeFile = async (path5, data, dry) => {
+var writeFile = async (path6, data, dry) => {
   if (dry) {
-    console.log(`${pc2.blue("writeFile")} ${path5}`);
+    console.log(`${pc2.blue("writeFile")} ${path6}`);
     return Promise.resolve();
   }
-  return fs.writeFile(path5, data, { encoding: "utf-8" }).catch((error) => {
-    console.error(pc2.red(`Error writing file: ${path5}`));
+  return fs.writeFile(path6, data, { encoding: "utf-8" }).catch((error) => {
+    console.error(pc2.red(`Error writing file: ${path6}`));
     console.error(pc2.red(error));
     throw error;
   });
@@ -430,13 +430,13 @@ var cleanDir = async (dir, dry) => {
 \u{1F525} Cleaning dir ${pc2.red(`${dir.trim()}`)} `);
   return fs.rm(dir, { recursive: true, force: true });
 };
-var readFile = async (path5, dry, allowFileNotFound) => {
+var readFile = async (path6, dry, allowFileNotFound) => {
   if (dry) {
-    console.log(`${pc2.blue("readFile")} ${path5}`);
+    console.log(`${pc2.blue("readFile")} ${path6}`);
     return Promise.resolve("");
   }
   try {
-    return await fs.readFile(path5, "utf-8");
+    return await fs.readFile(path6, "utf-8");
   } catch (error) {
     if (allowFileNotFound && error.code === "ENOENT") {
       return "";
@@ -861,7 +861,7 @@ import pc5 from "picocolors";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.7.1",
+  version: "1.7.3",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -913,7 +913,8 @@ var package_default = {
     "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
     "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
     "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
-    test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
+    "test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/design-tokens --dry",
+    test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && 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",
@@ -928,7 +929,7 @@ var package_default = {
     "change-case": "^5.4.4",
     "chroma-js": "^3.1.2",
     "colorjs.io": "^0.6.0-alpha.1",
-    commander: "^14.0.1",
+    commander: "^14.0.2",
     "fast-glob": "^3.3.3",
     hsluv: "^1.0.1",
     "object-hash": "^3.0.0",
@@ -942,9 +943,9 @@ var package_default = {
   devDependencies: {
     "@tokens-studio/types": "0.5.2",
     "@types/apca-w3": "^0.1.3",
-    "@types/chroma-js": "^3.1.1",
+    "@types/chroma-js": "^3.1.2",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.18.11",
+    "@types/node": "^22.19.0",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.31.1",
     "fs-extra": "^11.3.2",
@@ -992,8 +993,8 @@ var pathStartsWithOneOf = R5.curry(
     }
     const tokenPath = mapToLowerCase(token.path);
     const matchPathsStartingWith = R5.map((pathOrString) => {
-      const path5 = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
-      return R5.startsWith(mapToLowerCase(path5), tokenPath);
+      const path6 = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
+      return R5.startsWith(mapToLowerCase(path6), tokenPath);
     }, paths);
     return hasAnyTruth(matchPathsStartingWith);
   }
@@ -2428,8 +2429,8 @@ ${dynamicColors}`;
 import pc6 from "picocolors";
 import * as R20 from "ramda";
 var defaultFileHeader2 = `build: v${package_default.version}`;
-var getFileNameWithoutExtension = (path5) => {
-  const pathSegments = path5.split("/");
+var getFileNameWithoutExtension = (path6) => {
+  const pathSegments = path6.split("/");
   return pathSegments[pathSegments.length - 1].split(".").slice(0, -1).join(".");
 };
 var createThemeCSSFiles = ({
@@ -3864,6 +3865,7 @@ var generateColorScheme = (themeName, colorScheme2, colors2, overrides) => {
     baseColorsWithOverrides
   );
   const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
+  const linkOverride = overrides?.linkVisited?.[colorScheme2] ? { $type: "color", $value: overrides.linkVisited[colorScheme2] } : void 0;
   return {
     [themeName]: {
       ...main,
@@ -3871,7 +3873,7 @@ var generateColorScheme = (themeName, colorScheme2, colors2, overrides) => {
       neutral,
       ...globalColors,
       link: {
-        visited: linkColor[12]
+        visited: linkOverride || linkColor[12]
       }
     }
   };
@@ -4346,18 +4348,218 @@ var createTokens = async (opts) => {
   return { tokenSets };
 };
 
+// src/tokens/generate-config.ts
+import fs3 from "fs/promises";
+import path3 from "path";
+import pc9 from "picocolors";
+async function readJsonFile(filePath) {
+  try {
+    const content = await fs3.readFile(filePath, "utf-8");
+    return JSON.parse(content);
+  } catch (err) {
+    throw new Error(`Failed to read token file at ${filePath}: ${err instanceof Error ? err.message : String(err)}`);
+  }
+}
+function extractBaseColor(colorScale) {
+  if ("12" in colorScale && typeof colorScale["12"] === "object" && "$value" in colorScale["12"]) {
+    const token = colorScale["12"];
+    if (token.$type === "color") {
+      return token.$value;
+    }
+  }
+  return null;
+}
+async function discoverThemes(tokensDir) {
+  const lightModePath = path3.join(tokensDir, "themes");
+  try {
+    const files = await fs3.readdir(lightModePath);
+    const themes = files.filter((file) => file.endsWith(".json")).map((file) => file.replace(".json", ""));
+    return themes;
+  } catch {
+    throw new Error(`Could not find themes. Make sure ${pc9.blue(lightModePath)} exists and contains theme JSON files.`);
+  }
+}
+async function readThemeTokens(tokensDir, themeName) {
+  const themePath = path3.join(tokensDir, "primitives", "modes", "color-scheme", "light", `${themeName}.json`);
+  return readJsonFile(themePath);
+}
+async function readThemeConfig(tokensDir, themeName) {
+  const themeConfigPath = path3.join(tokensDir, "themes", `${themeName}.json`);
+  try {
+    return await readJsonFile(themeConfigPath);
+  } catch {
+    return null;
+  }
+}
+function extractBorderRadius(themeConfig) {
+  if (!themeConfig || !("border-radius" in themeConfig)) {
+    return void 0;
+  }
+  const borderRadius = themeConfig["border-radius"];
+  if ("base" in borderRadius && typeof borderRadius.base === "object" && "$value" in borderRadius.base) {
+    const token = borderRadius.base;
+    return Number(token.$value);
+  }
+  return void 0;
+}
+function extractFontFamily(themeConfig) {
+  if (!themeConfig || !("font-family" in themeConfig)) {
+    return void 0;
+  }
+  const fontFamily = themeConfig["font-family"];
+  if (typeof fontFamily === "object" && "$value" in fontFamily) {
+    const token = fontFamily;
+    const value = token.$value;
+    if (value.startsWith("{") && value.endsWith("}")) {
+      return void 0;
+    }
+    return value;
+  }
+  return void 0;
+}
+async function readTypographyConfig(tokensDir, themeName) {
+  const typographyConfigPath = path3.join(
+    tokensDir,
+    "primitives",
+    "modes",
+    "typography",
+    "primary",
+    `${themeName}.json`
+  );
+  try {
+    return await readJsonFile(typographyConfigPath);
+  } catch {
+    return null;
+  }
+}
+function extractFontFamilyFromPrimitives(typographyConfig, themeName) {
+  if (!typographyConfig) {
+    return void 0;
+  }
+  const themeTypography = typographyConfig[themeName];
+  if (!themeTypography || !("font-family" in themeTypography)) {
+    return void 0;
+  }
+  const fontFamily = themeTypography["font-family"];
+  if (typeof fontFamily === "object" && "$value" in fontFamily) {
+    const token = fontFamily;
+    return token.$value;
+  }
+  return void 0;
+}
+function categorizeColors(themeTokens, themeName) {
+  const main = {};
+  const support = {};
+  let neutral = null;
+  const builtInColors = ["neutral", "info", "success", "warning", "danger"];
+  const specialKeys = ["link"];
+  const themeColors = themeTokens[themeName];
+  if (!themeColors) {
+    return { main, support, neutral };
+  }
+  for (const [colorName, colorValue] of Object.entries(themeColors)) {
+    if (specialKeys.includes(colorName)) {
+      continue;
+    }
+    if (typeof colorValue === "object" && !("$value" in colorValue)) {
+      const baseColor = extractBaseColor(colorValue);
+      if (baseColor) {
+        if (colorName === "neutral") {
+          neutral = baseColor;
+        } else if (builtInColors.includes(colorName)) {
+        } else if (colorName === "accent") {
+          main[colorName] = baseColor;
+        } else {
+          support[colorName] = baseColor;
+        }
+      }
+    }
+  }
+  return { main, support, neutral };
+}
+async function generateConfigFromTokens(options) {
+  const { tokensDir, dry = false } = options;
+  console.log(`
+Reading tokens from ${pc9.blue(tokensDir)}`);
+  const themes = await discoverThemes(tokensDir);
+  if (themes.length === 0) {
+    throw new Error(`
+No themes found in ${pc9.blue(tokensDir)}`);
+  }
+  console.log(`
+Found ${pc9.green(String(themes.length))} theme(s): ${themes.map((t) => pc9.cyan(t)).join(", ")}`);
+  const config = {
+    outDir: tokensDir,
+    themes: {}
+  };
+  for (const themeName of themes) {
+    console.log(`
+Processing theme ${pc9.cyan(themeName)}...`);
+    const themeTokens = await readThemeTokens(tokensDir, themeName);
+    const themeConfig = await readThemeConfig(tokensDir, themeName);
+    const typographyConfig = await readTypographyConfig(tokensDir, themeName);
+    const { main, support, neutral } = categorizeColors(themeTokens, themeName);
+    if (Object.keys(main).length === 0) {
+      console.warn(pc9.yellow(`
+Warning: No main colors found for theme ${themeName}`));
+    }
+    if (!neutral) {
+      console.warn(pc9.yellow(`
+Warning: No neutral color found for theme ${themeName}`));
+      continue;
+    }
+    const borderRadius = extractBorderRadius(themeConfig);
+    const fontFamily = extractFontFamily(themeConfig) ?? extractFontFamilyFromPrimitives(typographyConfig, themeName);
+    config.themes[themeName] = {
+      colors: {
+        main,
+        support,
+        neutral
+      },
+      borderRadius,
+      typography: fontFamily ? { fontFamily } : void 0
+    };
+    console.log(
+      `
+\u2705 Main colors: ${Object.keys(main).map((c) => pc9.cyan(c)).join(", ") || pc9.dim("none")}`
+    );
+    console.log(
+      `
+\u2705 Support colors: ${Object.keys(support).map((c) => pc9.cyan(c)).join(", ") || pc9.dim("none")}`
+    );
+    console.log(`
+\u2705 Neutral: ${pc9.cyan(neutral)}`);
+    if (borderRadius !== void 0) {
+      console.log(`
+\u2705 Border radius: ${pc9.cyan(String(borderRadius))}`);
+    }
+    if (fontFamily) {
+      console.log(`
+\u2705 Font family: ${pc9.cyan(fontFamily)}`);
+    }
+  }
+  if (!dry && options.outFile) {
+    const configJson = JSON.stringify(config, null, 2);
+    await fs3.writeFile(options.outFile, configJson, "utf-8");
+    console.log();
+    console.log(`
+\u2705 Config file written to ${pc9.blue(options.outFile)}`);
+  }
+  return config;
+}
+
 // bin/config.ts
-import path4 from "path";
-import pc10 from "picocolors";
+import path5 from "path";
+import pc11 from "picocolors";
 import * as R28 from "ramda";
 
 // src/config.ts
-import pc9 from "picocolors";
+import pc10 from "picocolors";
 import * as R27 from "ramda";
 import { z } from "zod";
 import { fromError } from "zod-validation-error";
-function mapPathToOptionName(path5) {
-  const normalisedPath = path5[0] === "themes" ? ["theme", ...R27.drop(2, path5)] : path5;
+function mapPathToOptionName(path6) {
+  const normalisedPath = path6[0] === "themes" ? ["theme", ...R27.drop(2, path6)] : path6;
   const option = R27.path(normalisedPath, cliOptions);
   if (typeof option !== "string") {
     return;
@@ -4372,12 +4574,12 @@ function makeFriendlyError(err) {
         const optionName = mapPathToOptionName(issue.path);
         const errorCode = `(error code: ${issue.code})`;
         const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
-        return `  - Error in JSON value ${pc9.red(issuePath)}${optionMessage}:
-      ${issue.message} ${pc9.dim(errorCode)}`;
+        return `  - Error in JSON value ${pc10.red(issuePath)}${optionMessage}:
+      ${issue.message} ${pc10.dim(errorCode)}`;
       }).join("\n")
     });
   } catch (_err2) {
-    console.error(pc9.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
+    console.error(pc10.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
     console.error(err instanceof Error ? err.stack : "No stack trace available");
   }
 }
@@ -4385,7 +4587,7 @@ function validateConfig(schema, unvalidatedConfig, configPath) {
   try {
     return schema.parse(unvalidatedConfig);
   } catch (err) {
-    console.error(pc9.redBright(`Invalid config file at ${pc9.red(configPath)}`));
+    console.error(pc10.redBright(`Invalid config file at ${pc10.red(configPath)}`));
     const validationError = makeFriendlyError(err);
     console.error(validationError?.toString());
     process.exit(1);
@@ -4398,7 +4600,7 @@ function parseConfig(configFile, configPath) {
   try {
     return JSON.parse(configFile);
   } catch (err) {
-    console.error(pc9.redBright(`Failed parsing config file at ${pc9.red(configPath)}`));
+    console.error(pc10.redBright(`Failed parsing config file at ${pc10.red(configPath)}`));
     const validationError = makeFriendlyError(err);
     console.error(validationError?.toString());
     process.exit(1);
@@ -4428,21 +4630,26 @@ var colorCategorySchema = z.record(
   error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
 }).describe("An object with one or more color definitions. The property name is used as the color name.");
 var colorModeOverrideSchema = z.object({
-  light: colorSchema.optional(),
-  dark: colorSchema.optional()
+  light: colorSchema.optional().describe("A hex color that overrides light mode"),
+  dark: colorSchema.optional().describe("A hex color that overrides dark mode")
 }).describe('Override values for semantic color tokens like "background-subtle", "border-default", etc.');
 var colorWeightOverrideSchema = z.partialRecord(z.enum([...colorNames]), colorModeOverrideSchema).describe('The name of the color to add overrides for, e.g. "accent"');
 var semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
 var severityColorOverrideSchema = z.partialRecord(z.enum(baseColorNames), colorSchema.describe("A hex color, which is used for creating a color scale")).optional().describe("An object with severity color names as keys");
+var linkVisitedOverrideSchema = z.object({
+  light: colorSchema.optional().describe("A hex color that overrides light mode"),
+  dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+}).describe('Overrides for the "link-visited" color');
 var overridesSchema = z.object({
   colors: semanticColorOverrideSchema.optional(),
-  severity: severityColorOverrideSchema.optional()
+  severity: severityColorOverrideSchema.optional(),
+  linkVisited: linkVisitedOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({
     main: colorCategorySchema,
     support: colorCategorySchema.optional().default({}),
-    neutral: colorSchema
+    neutral: colorSchema.describe("A hex color, which is used for creating a color scale.")
   }).meta({ description: "Defines the colors for this theme" }),
   typography: z.object({
     fontFamily: z.string().meta({ description: "Sets the font-family for this theme" })
@@ -4474,7 +4681,7 @@ var getCliOption = getOptionIfMatchingSource("cli", "default");
 
 // bin/config.ts
 async function readConfigFile(configPath, allowFileNotFound = true) {
-  const resolvedPath = path4.resolve(process.cwd(), configPath);
+  const resolvedPath = path5.resolve(process.cwd(), configPath);
   let configFile;
   try {
     configFile = await readFile(resolvedPath, false, allowFileNotFound);
@@ -4482,11 +4689,11 @@ async function readConfigFile(configPath, allowFileNotFound = true) {
     if (allowFileNotFound) {
       return "";
     }
-    console.error(pc10.redBright(`Could not read config file at ${pc10.blue(resolvedPath)}`));
+    console.error(pc11.redBright(`Could not read config file at ${pc11.blue(resolvedPath)}`));
     throw err;
   }
   if (configFile) {
-    console.log(`Found config file: ${pc10.green(resolvedPath)}`);
+    console.log(`Found config file: ${pc11.green(resolvedPath)}`);
   }
   return configFile;
 }
@@ -4497,7 +4704,7 @@ async function parseCreateConfig(configFile, options) {
     (x) => /* @__PURE__ */ new Set([...R28.keys(x.colors.main), ...R28.keys(x.colors.support)])
   );
   if (!R28.all(R28.equals(R28.__, themeColors[0]), themeColors)) {
-    console.error(pc10.redBright(`In config, all themes must have the same custom color names, but we found:`));
+    console.error(pc11.redBright(`In config, all themes must have the same custom color names, but we found:`));
     const themeNames = R28.keys(configParsed.themes ?? {});
     themeColors.forEach((colors2, index) => {
       const colorNames2 = Array.from(colors2);
@@ -4561,11 +4768,11 @@ 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 ${pc11.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option(
+  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${pc12.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option(
     "-o, --out-dir <string>",
-    `Output directory for built ${pc11.blue("design-tokens")}`,
+    `Output directory for built ${pc12.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 ${pc11.blue("design-tokens")}`, parseBoolean, 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) => {
+  ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${pc12.blue("design-tokens")}`, parseBoolean, 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) => {
     console.log(figletAscii);
     const { verbose, clean, dry, experimentalTailwind } = opts;
     const tokensDir = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENS_CREATE_DIR;
@@ -4583,9 +4790,9 @@ function makeTokenCommands() {
   });
   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 ${pc11.blue("design-tokens")}`,
+    `Output directory for created ${pc12.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 ${pc11.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 ${pc12.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),
@@ -4615,6 +4822,28 @@ function makeTokenCommands() {
   return tokenCmd;
 }
 program.addCommand(makeTokenCommands());
+program.command("generate-config-from-tokens").description("Generate a config file from existing design tokens. Will not include overrides.").option("-d, --dir <string>", "Path to design tokens directory", DEFAULT_TOKENS_CREATE_DIR).option("-o, --out <string>", "Output path for config file", DEFAULT_CONFIG_FILE).option("--dry [boolean]", "Dry run - show config without writing file", parseBoolean, false).action(async (opts) => {
+  console.log(figletAscii);
+  const { dry } = opts;
+  const tokensDir = typeof opts.dir === "string" ? opts.dir : DEFAULT_TOKENS_CREATE_DIR;
+  const outFile = typeof opts.out === "string" ? opts.out : DEFAULT_CONFIG_FILE;
+  try {
+    const config = await generateConfigFromTokens({
+      tokensDir,
+      outFile: dry ? void 0 : outFile,
+      dry
+    });
+    if (dry) {
+      console.log();
+      console.log("Generated config (dry run):");
+      console.log(JSON.stringify(config, null, 2));
+    }
+  } catch (error) {
+    console.error(pc12.redBright("Error generating config:"));
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
+  }
+});
 program.command("migrate").description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations_default))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
   console.log(figletAscii);
   const { glob: glob2, list } = opts;
@@ -4628,8 +4857,8 @@ program.command("migrate").description("run a Designsystemet migration").addArgu
       console.error("Migration not found!");
       throw "Aborting";
     }
-    console.log(`Applying migration ${pc11.blue(migrationKey)} with glob: ${pc11.green(glob2)}`);
-    migration?.(glob2).then(() => console.log(`Migration ${pc11.blue(migrationKey)} finished`)).catch((error) => console.log(error));
+    console.log(`Applying migration ${pc12.blue(migrationKey)} with glob: ${pc12.green(glob2)}`);
+    migration?.(glob2).then(() => console.log(`Migration ${pc12.blue(migrationKey)} finished`)).catch((error) => console.log(error));
   } else {
     console.log("Migrate: please specify a migration name or --list");
   }

package/dist/config.schema.json

@@ -47,7 +47,7 @@
                 }
               },
               "neutral": {
-                "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info"
+                "description": "A hex color, which is used for creating a color scale."
               }
             },
             "required": [
@@ -114,10 +114,10 @@
                     "type": "object",
                     "properties": {
                       "light": {
-                        "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info"
+                        "description": "A hex color that overrides light mode"
                       },
                       "dark": {
-                        "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info"
+                        "description": "A hex color that overrides dark mode"
                       }
                     },
                     "additionalProperties": false
@@ -139,6 +139,19 @@
                 "additionalProperties": {
                   "description": "A hex color, which is used for creating a color scale"
                 }
+              },
+              "linkVisited": {
+                "description": "Overrides for the \"link-visited\" color",
+                "type": "object",
+                "properties": {
+                  "light": {
+                    "description": "A hex color that overrides light mode"
+                  },
+                  "dark": {
+                    "description": "A hex color that overrides dark mode"
+                  }
+                },
+                "additionalProperties": false
               }
             },
             "additionalProperties": false

package/dist/src/config.d.ts

@@ -39,6 +39,10 @@ declare const overridesSchema: z.ZodOptional<z.ZodObject<{
         success: "success";
         warning: "warning";
     }> & z.core.$partial, z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>>>;
+    linkVisited: z.ZodOptional<z.ZodObject<{
+        light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+    }, z.core.$strip>>;
 }, z.core.$strip>>;
 declare const themeSchema: z.ZodObject<{
     colors: z.ZodObject<{
@@ -78,6 +82,10 @@ declare const themeSchema: z.ZodObject<{
             success: "success";
             warning: "warning";
         }> & z.core.$partial, z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>>>;
+        linkVisited: z.ZodOptional<z.ZodObject<{
+            light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>;
 }, z.core.$strip>;
 export declare const commonConfig: z.ZodObject<{
@@ -126,6 +134,10 @@ export declare const configFileCreateSchema: z.ZodObject<{
                 success: "success";
                 warning: "warning";
             }> & z.core.$partial, z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>>>;
+            linkVisited: z.ZodOptional<z.ZodObject<{
+                light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            }, z.core.$strip>>;
         }, z.core.$strip>>;
     }, z.core.$strip>>>;
     clean: z.ZodOptional<z.ZodBoolean>;

package/dist/src/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAuCxB;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EACpB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1C,UAAU,EAAE,MAAM,GACjB,CAAC,CAUH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAexE;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AA6CnE,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAMR,CAAC;AAEd,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBmG,CAAC;AAErH,eAAO,MAAM,YAAY;;iBAEvB,CAAC;AAYH;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAqD,CAAC;AACzF,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAuCxB;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EACpB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1C,UAAU,EAAE,MAAM,GACjB,CAAC,CAUH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAexE;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AAoDnE,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAOR,CAAC;AAEd,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBmG,CAAC;AAErH,eAAO,MAAM,YAAY;;iBAEvB,CAAC;AAYH;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAqD,CAAC;AACzF,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC"}