@digdir/designsystemet 1.0.0-next.44 → 1.0.0-next.46

package/dist/bin/config.d.ts

@@ -0,0 +1,156 @@
+import { z } from 'zod';
+export declare function mapPathToOptionName(path: (string | number)[]): string | undefined;
+export declare const colorRegex: RegExp;
+/**
+ * This defines the structure of the JSON config file
+ */
+export declare const configFileSchema: z.ZodObject<{
+    outDir: z.ZodOptional<z.ZodString>;
+    themes: z.ZodRecord<z.ZodString, z.ZodObject<{
+        colors: z.ZodObject<{
+            main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>;
+            support: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>;
+            neutral: z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>;
+        }, "strip", z.ZodTypeAny, {
+            main: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+            neutral: `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`;
+            support: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+        }, {
+            main: Record<string, string>;
+            neutral: string;
+            support: Record<string, string>;
+        }>;
+        typography: z.ZodObject<{
+            fontFamily: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            fontFamily: string;
+        }, {
+            fontFamily: string;
+        }>;
+        borderRadius: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        colors: {
+            main: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+            neutral: `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`;
+            support: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+        };
+        typography: {
+            fontFamily: string;
+        };
+        borderRadius: number;
+    }, {
+        colors: {
+            main: Record<string, string>;
+            neutral: string;
+            support: Record<string, string>;
+        };
+        typography: {
+            fontFamily: string;
+        };
+        borderRadius: number;
+    }>>;
+}, "strip", z.ZodTypeAny, {
+    themes: Record<string, {
+        colors: {
+            main: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+            neutral: `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`;
+            support: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+        };
+        typography: {
+            fontFamily: string;
+        };
+        borderRadius: number;
+    }>;
+    outDir?: string | undefined;
+}, {
+    themes: Record<string, {
+        colors: {
+            main: Record<string, string>;
+            neutral: string;
+            support: Record<string, string>;
+        };
+        typography: {
+            fontFamily: string;
+        };
+        borderRadius: number;
+    }>;
+    outDir?: string | undefined;
+}>;
+/**
+ * This defines the structure of the final configuration after combining the config file,
+ * command-line options and default values.
+ */
+export declare const combinedConfigSchema: z.ZodObject<{
+    outDir: z.ZodString;
+    themes: z.ZodRecord<z.ZodString, z.ZodObject<{
+        colors: z.ZodObject<{
+            main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>;
+            support: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>;
+            neutral: z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>;
+        }, "strip", z.ZodTypeAny, {
+            main: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+            neutral: `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`;
+            support: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+        }, {
+            main: Record<string, string>;
+            neutral: string;
+            support: Record<string, string>;
+        }>;
+        typography: z.ZodObject<{
+            fontFamily: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            fontFamily: string;
+        }, {
+            fontFamily: string;
+        }>;
+        borderRadius: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        colors: {
+            main: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+            neutral: `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`;
+            support: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+        };
+        typography: {
+            fontFamily: string;
+        };
+        borderRadius: number;
+    }, {
+        colors: {
+            main: Record<string, string>;
+            neutral: string;
+            support: Record<string, string>;
+        };
+        typography: {
+            fontFamily: string;
+        };
+        borderRadius: number;
+    }>>;
+}, "strip", z.ZodTypeAny, {
+    themes: Record<string, {
+        colors: {
+            main: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+            neutral: `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`;
+            support: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
+        };
+        typography: {
+            fontFamily: string;
+        };
+        borderRadius: number;
+    }>;
+    outDir: string;
+}, {
+    themes: Record<string, {
+        colors: {
+            main: Record<string, string>;
+            neutral: string;
+            support: Record<string, string>;
+        };
+        typography: {
+            fontFamily: string;
+        };
+        borderRadius: number;
+    }>;
+    outDir: string;
+}>;
+export type CombinedConfigSchema = z.infer<typeof combinedConfigSchema>;
+//# sourceMappingURL=config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../bin/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,sBAQ5D;AAUD,eAAO,MAAM,UAAU,QAA2C,CAAC;AA6BnE;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAM3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/bin/designsystemet.js

@@ -1,16 +1,25 @@
 #!/usr/bin/env node
+import fs from "node:fs/promises";
+import path from "node:path";
 import { Argument, createCommand, program } from "@commander-js/extra-typings";
 import chalk from "chalk";
+import * as R from "ramda";
+import { fromError } from "zod-validation-error";
 import { convertToHex } from "../src/colors/index.js";
 import migrations from "../src/migrations/index.js";
 import { buildTokens } from "../src/tokens/build.js";
-import { colorCliOptions, createTokens } from "../src/tokens/create.js";
+import { cliOptions, createTokens } from "../src/tokens/create.js";
 import { writeTokens } from "../src/tokens/write.js";
+import { combinedConfigSchema, configFileSchema, mapPathToOptionName } from "./config.js";
+import { getDefaultOrExplicitOption, getExplicitOptionOnly } from "./options.js";
 program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
 function makeTokenCommands() {
   const tokenCmd = createCommand("tokens");
   const DEFAULT_TOKENS_DIR = "./design-tokens";
   const DEFAULT_BUILD_DIR = "./design-tokens-build";
+  const DEFAULT_FONT = "Inter";
+  const DEFAULT_THEME_NAME = "theme";
+  const DEFAULT_CONFIG_FILE = "designsystemet.config.json";
   tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENS_DIR).option("-o, --out-dir <string>", `Output directory for built ${chalk.blue("design-tokens")}`, DEFAULT_BUILD_DIR).option("--dry [boolean]", `Dry run for built ${chalk.blue("design-tokens")}`, false).option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action((opts) => {
     const { preview, verbose } = opts;
     const tokens = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENS_DIR;
@@ -22,27 +31,86 @@ function makeTokenCommands() {
     }
     return buildTokens({ tokens, outDir, preview, verbose, dry });
   });
-  tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption(`-m, --${colorCliOptions.main} <name:hex...>`, `Main colors`, parseColorValues).requiredOption(`-s, --${colorCliOptions.support} <name:hex...>`, `Support colors`, parseColorValues).requiredOption(`-n, --${colorCliOptions.neutral} <hex>`, `Neutral hex color`, convertToHex).option("-o, --out-dir <string>", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENS_DIR).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, false).option("-f, --font-family <string>", `Font family`, "Inter").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
-    const { theme, fontFamily, outDir } = opts;
+  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 ${chalk.blue("design-tokens")}`,
+    DEFAULT_TOKENS_DIR
+  ).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family`, DEFAULT_FONT).option(
+    `-b, --${cliOptions.theme.borderRadius} <number>`,
+    `Unitless base border-radius in px`,
+    (radiusAsString) => Number(radiusAsString),
+    4
+  ).option("--theme <string>", "Theme name (ignored when using JSON config file)", DEFAULT_THEME_NAME).option(
+    "--json <string>",
+    `Path to JSON config file (default: "${DEFAULT_CONFIG_FILE}")`,
+    (value) => parseJsonConfig(value, { allowFileNotFound: false })
+  ).action(async (opts, cmd) => {
     const dry = Boolean(opts.dry);
-    console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts, null, 2))}`);
-    const props = {
-      themeName: theme,
-      colors: {
-        main: opts.mainColors,
-        support: opts.supportColors,
-        neutral: opts.neutralColor
-      },
-      typography: {
-        fontFamily
-      }
-    };
     if (dry) {
       console.log(`Performing dry run, no files will be written`);
     }
-    const tokens = createTokens(props);
-    await writeTokens({ outDir, tokens, themeName: theme, colors: props.colors, dry });
-    return Promise.resolve();
+    const configFile = await (opts.json ? opts.json : parseJsonConfig(DEFAULT_CONFIG_FILE, { allowFileNotFound: true }));
+    const propsFromJson = configFile?.config;
+    if (propsFromJson) {
+      const themeColors = Object.values(propsFromJson?.themes ?? {}).map(
+        (x) => /* @__PURE__ */ new Set([...R.keys(x.colors.main), ...R.keys(x.colors.support)])
+      );
+      if (!R.all(R.equals(R.__, themeColors[0]), themeColors)) {
+        console.error(
+          chalk.redBright(
+            `In JSON config ${configFile.path}, all themes must have the same custom color names, but we found:`
+          )
+        );
+        const themeNames = R.keys(propsFromJson.themes ?? {});
+        themeColors.forEach((colors, index) => {
+          const colorNames = Array.from(colors);
+          console.log(`  - ${themeNames[index]}: ${colorNames.join(", ")}`);
+        });
+        console.log();
+        process.exit(1);
+      }
+    }
+    const noUndefined = R.reject(R.isNil);
+    const getThemeOptions = (optionGetter) => noUndefined({
+      colors: noUndefined({
+        main: optionGetter(cmd, "mainColors"),
+        support: optionGetter(cmd, "supportColors"),
+        neutral: optionGetter(cmd, "neutralColor")
+      }),
+      typography: noUndefined({
+        fontFamily: optionGetter(cmd, "fontFamily")
+      }),
+      borderRadius: optionGetter(cmd, "borderRadius")
+    });
+    const unvalidatedConfig = noUndefined({
+      outDir: propsFromJson?.outDir ?? getDefaultOrExplicitOption(cmd, "outDir"),
+      themes: propsFromJson?.themes ? (
+        // For each theme specified in the JSON config, we override the config values
+        // with the explicitly set options from the CLI.
+        R.map((theme) => R.mergeDeepRight(theme, getThemeOptions(getExplicitOptionOnly)), propsFromJson.themes)
+      ) : (
+        // If there are no themes specified in the JSON config, we use both explicit
+        // and default theme options from the CLI.
+        {
+          [opts.theme]: getThemeOptions(getDefaultOrExplicitOption)
+        }
+      )
+    });
+    let config;
+    try {
+      config = combinedConfigSchema.parse(unvalidatedConfig);
+    } catch (err) {
+      console.error(chalk.redBright("Invalid config after combining JSON file and CLI options"));
+      const validationError = makeFriendlyError(err);
+      console.error(validationError.toString());
+      process.exit(1);
+    }
+    console.log(`Creating tokens with configuration ${chalk.green(JSON.stringify(config, null, 2))}`);
+    for (const [name, themeWithoutName] of Object.entries(config.themes)) {
+      const theme = { name, ...themeWithoutName };
+      const tokens = createTokens(theme);
+      await writeTokens({ outDir: config.outDir, tokens, theme, dry });
+    }
   });
   return tokenCmd;
 }
@@ -66,6 +134,44 @@ program.command("migrate").description("run a Designsystemet migration").addArgu
   }
 });
 await program.parseAsync(process.argv);
+async function parseJsonConfig(jsonPath, options) {
+  const resolvedPath = path.resolve(process.cwd(), jsonPath);
+  let jsonFile;
+  try {
+    jsonFile = await fs.readFile(resolvedPath, { encoding: "utf-8" });
+  } catch (err) {
+    if (err instanceof Error) {
+      const nodeErr = err;
+      if (nodeErr.code === "ENOENT" && options.allowFileNotFound) {
+        return;
+      }
+    }
+    throw err;
+  }
+  try {
+    return {
+      path: jsonPath,
+      config: await configFileSchema.parseAsync(JSON.parse(jsonFile))
+    };
+  } catch (err) {
+    console.error(chalk.redBright(`Invalid JSON config in ${jsonPath}`));
+    const validationError = makeFriendlyError(err);
+    console.error(validationError.toString());
+    process.exit(1);
+  }
+}
+function makeFriendlyError(err) {
+  return fromError(err, {
+    messageBuilder: (issues) => issues.map((issue) => {
+      const issuePath = issue.path.join(".");
+      const optionName = mapPathToOptionName(issue.path);
+      const errorCode = `(error code: ${issue.code})`;
+      const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
+      return `  - Error in JSON value ${chalk.red(issuePath)}${optionMessage}:
+    ${issue.message} ${chalk.dim(errorCode)}`;
+    }).join("\n")
+  });
+}
 function parseColorValues(value, previous = {}) {
   const [name, hex] = value.split(":");
   previous[name] = convertToHex(hex);

package/dist/bin/options.d.ts

@@ -0,0 +1,16 @@
+import type { Command, OptionValueSource, OptionValues } from '@commander-js/extra-typings';
+declare const getOptionIfMatchingSource: (...sources: OptionValueSource[]) => <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
+export type OptionGetter = ReturnType<typeof getOptionIfMatchingSource>;
+/**
+ * Get an option value if it is explicitly supplied to the CLI command.
+ * The difference between this and using the option directly is that we return undefined
+ * instead of the default value if the option was not explicitly set.
+ */
+export declare const getExplicitOptionOnly: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
+/**
+ * This function is basically the default behaviour, unlike {@link getExplicitOptionOnly}.
+ * It is provided so that the program can choose its behaviour as needed.
+ */
+export declare const getDefaultOrExplicitOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
+export {};
+//# sourceMappingURL=options.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../bin/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE5F,QAAA,MAAM,yBAAyB,eAChB,iBAAiB,EAAE,MAC/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAMV,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAjB/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAewD,CAAC;AAEtE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAvBpC,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAqBwE,CAAC"}

package/dist/config.schema.json

@@ -0,0 +1,78 @@
+{
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "outDir": {
+      "type": "string",
+      "description": "Path to the output directory for the created design tokens"
+    },
+    "themes": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "properties": {
+          "colors": {
+            "type": "object",
+            "properties": {
+              "main": {
+                "type": "object",
+                "additionalProperties": {
+                  "type": "string",
+                  "pattern": "^#[0-9a-fA-F]{3}|#[0-9a-fA-F]{4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}$",
+                  "description": "A hex color, which is used for creating a color scale"
+                },
+                "description": "One or more color definitions"
+              },
+              "support": {
+                "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main"
+              },
+              "neutral": {
+                "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main/additionalProperties"
+              }
+            },
+            "required": [
+              "main",
+              "support",
+              "neutral"
+            ],
+            "additionalProperties": false,
+            "description": "Defines the colors for this theme"
+          },
+          "typography": {
+            "type": "object",
+            "properties": {
+              "fontFamily": {
+                "type": "string",
+                "description": "Sets the font-family for this theme"
+              }
+            },
+            "required": [
+              "fontFamily"
+            ],
+            "additionalProperties": false,
+            "description": "Defines the typography for a given theme"
+          },
+          "borderRadius": {
+            "type": "number",
+            "description": "Defines the border-radius for this theme"
+          }
+        },
+        "required": [
+          "colors",
+          "typography",
+          "borderRadius"
+        ],
+        "additionalProperties": false,
+        "description": "An object defining a theme. The property name holding the object becomes the theme name."
+      },
+      "description": "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name."
+    }
+  },
+  "required": [
+    "themes"
+  ],
+  "additionalProperties": false,
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

package/dist/src/build-scripts/createJsonSchema.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=createJsonSchema.d.ts.map

package/dist/src/build-scripts/createJsonSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createJsonSchema.d.ts","sourceRoot":"","sources":["../../../src/build-scripts/createJsonSchema.ts"],"names":[],"mappings":""}

package/dist/src/build-scripts/createJsonSchema.js

@@ -0,0 +1,15 @@
+import { writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { z } from "zod";
+import { zodToJsonSchema } from "zod-to-json-schema";
+import { configFileSchema } from "../../bin/config.js";
+const schema = z.object({
+  $schema: z.string().optional()
+}).extend(configFileSchema.shape);
+writeFile(
+  resolve(import.meta.dirname, "../../dist/config.schema.json"),
+  JSON.stringify(zodToJsonSchema(schema), void 0, 2),
+  {
+    encoding: "utf-8"
+  }
+);

package/dist/src/colors/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG/F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,eAAe,WAAW,KAAG,SAAS,EA8BvF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,UAAW,QAAQ,KAAG,SAIrD,CAAC;AA6BH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,KAAG,QAC2C,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UAAW,QAAQ,KAAG,QAQnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG/F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,eAAe,WAAW,KAAG,SAAS,EA8BvF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,UAAW,QAAQ,KAAG,SAIrD,CAAC;AAgCH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,KAAG,QAC2C,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UAAW,QAAQ,KAAG,QAQnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}

package/dist/src/colors/theme.js

@@ -46,7 +46,7 @@ const getBaseColors = (color, colorScheme) => {
   const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
   const calculateLightness = (base, mod) => base - mod;
   return {
-    baseDefault: chroma(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
+    baseDefault: colorScheme === "light" ? color : chroma(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
     baseHover: chroma(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
     baseActive: chroma(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
   };

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

@@ -236,46 +236,46 @@ var beta_to_v1_default = (glob) => runCssCodemod({
       "--fds-shadow-medium": "--ds-shadow-md",
       "--fds-shadow-large": "--ds-shadow-lg",
       "--fds-shadow-xlarge": "--ds-shadow-xl",
-      "--fds-spacing-0": "--ds-spacing-0",
-      "--fds-spacing-1": "--ds-spacing-1",
-      "--fds-spacing-2": "--ds-spacing-2",
-      "--fds-spacing-3": "--ds-spacing-3",
-      "--fds-spacing-4": "--ds-spacing-4",
-      "--fds-spacing-5": "--ds-spacing-5",
-      "--fds-spacing-6": "--ds-spacing-6",
-      "--fds-spacing-7": "--ds-spacing-7",
-      "--fds-spacing-8": "--ds-spacing-8",
-      "--fds-spacing-9": "--ds-spacing-9",
-      "--fds-spacing-10": "--ds-spacing-10",
-      "--fds-spacing-11": "--ds-spacing-11",
-      "--fds-spacing-12": "--ds-spacing-12",
-      "--fds-spacing-13": "--ds-spacing-13",
-      "--fds-spacing-14": "--ds-spacing-14",
-      "--fds-spacing-15": "--ds-spacing-15",
-      "--fds-spacing-18": "--ds-spacing-18",
-      "--fds-spacing-22": "--ds-spacing-22",
-      "--fds-spacing-26": "--ds-spacing-26",
-      "--fds-spacing-30": "--ds-spacing-30",
-      "--fds-sizing-0": "--ds-sizing-0",
-      "--fds-sizing-1": "--ds-sizing-1",
-      "--fds-sizing-2": "--ds-sizing-2",
-      "--fds-sizing-3": "--ds-sizing-3",
-      "--fds-sizing-4": "--ds-sizing-4",
-      "--fds-sizing-5": "--ds-sizing-5",
-      "--fds-sizing-6": "--ds-sizing-6",
-      "--fds-sizing-7": "--ds-sizing-7",
-      "--fds-sizing-8": "--ds-sizing-8",
-      "--fds-sizing-9": "--ds-sizing-9",
-      "--fds-sizing-10": "--ds-sizing-10",
-      "--fds-sizing-11": "--ds-sizing-11",
-      "--fds-sizing-12": "--ds-sizing-12",
-      "--fds-sizing-13": "--ds-sizing-13",
-      "--fds-sizing-14": "--ds-sizing-14",
-      "--fds-sizing-15": "--ds-sizing-15",
-      "--fds-sizing-18": "--ds-sizing-18",
-      "--fds-sizing-22": "--ds-sizing-22",
-      "--fds-sizing-26": "--ds-sizing-26",
-      "--fds-sizing-30": "--ds-sizing-30",
+      "--fds-spacing-0": "--ds-size-0",
+      "--fds-spacing-1": "--ds-size-1",
+      "--fds-spacing-2": "--ds-size-2",
+      "--fds-spacing-3": "--ds-size-3",
+      "--fds-spacing-4": "--ds-size-4",
+      "--fds-spacing-5": "--ds-size-5",
+      "--fds-spacing-6": "--ds-size-6",
+      "--fds-spacing-7": "--ds-size-7",
+      "--fds-spacing-8": "--ds-size-8",
+      "--fds-spacing-9": "--ds-size-9",
+      "--fds-spacing-10": "--ds-size-10",
+      "--fds-spacing-11": "--ds-size-11",
+      "--fds-spacing-12": "--ds-size-12",
+      "--fds-spacing-13": "--ds-size-13",
+      "--fds-spacing-14": "--ds-size-14",
+      "--fds-spacing-15": "--ds-size-15",
+      "--fds-spacing-18": "--ds-size-18",
+      "--fds-spacing-22": "--ds-size-22",
+      "--fds-spacing-26": "--ds-size-26",
+      "--fds-spacing-30": "--ds-size-30",
+      "--fds-sizing-0": "--ds-size-0",
+      "--fds-sizing-1": "--ds-size-1",
+      "--fds-sizing-2": "--ds-size-2",
+      "--fds-sizing-3": "--ds-size-3",
+      "--fds-sizing-4": "--ds-size-4",
+      "--fds-sizing-5": "--ds-size-5",
+      "--fds-sizing-6": "--ds-size-6",
+      "--fds-sizing-7": "--ds-size-7",
+      "--fds-sizing-8": "--ds-size-8",
+      "--fds-sizing-9": "--ds-size-9",
+      "--fds-sizing-10": "--ds-size-10",
+      "--fds-sizing-11": "--ds-size-11",
+      "--fds-sizing-12": "--ds-size-12",
+      "--fds-sizing-13": "--ds-size-13",
+      "--fds-sizing-14": "--ds-size-14",
+      "--fds-sizing-15": "--ds-size-15",
+      "--fds-sizing-18": "--ds-size-18",
+      "--fds-sizing-22": "--ds-size-22",
+      "--fds-sizing-26": "--ds-size-26",
+      "--fds-sizing-30": "--ds-size-30",
       "--fds-opacity-disabled": "--ds-disabled-opacity",
       "--fds-colors-blue-100": "--ds-global-blue-1",
       "--fds-colors-blue-200": "--ds-global-blue-2",

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

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAQhG,OAAO,KAAK,EAEV,kBAAkB,EAElB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAO5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AAwCjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AAuPnH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,cAC5B,wBAAwB,UAC3B,oBAAoB,EAAE,cAClB,cAAc,EAAE,WACnB,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAQhG,OAAO,KAAK,EAEV,kBAAkB,EAClB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAO5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AA8BjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AA+PnH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,cAC5B,wBAAwB,UAC3B,oBAAoB,EAAE,cAClB,cAAc,EAAE,WACnB,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}