@digdir/designsystemet 0.0.0-next-20250710132619 → 0.0.0-react-side-effects-20260113071010

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.
@@ -49,7 +49,7 @@ Whenever a new version of the CLI is released, or you have done changes, we reco
 ### Using a config file
 
 > ⚠️ **WARNING** ⚠️  
-> This feature is experimental. The config schema may change at any time.
+> The typography feature is experimental. The config schema may change at any time.
 
 
 The `tokens create` command supports a config file. It will auto-detect a `designsystemet.config.json` file in the current directory. You can also use the `--config <path>` option to supply a different config name and location.
@@ -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

@@ -20,7 +20,44 @@
       "typography": {
         "fontFamily": "Inter"
       },
-      "borderRadius": 8
+      "borderRadius": 8,
+      "overrides": {
+        "colors": {
+          "dominant": {
+            "background-default": {
+              "light": "#ff0000",
+              "dark": "#000fff"
+            },
+            "background-tinted": {
+              "light": "#f0ff00",
+              "dark": "#ff00ff"
+            }
+          },
+          "danger": {
+            "background-default": {
+              "light": "#0000ff",
+              "dark": "#0000ff"
+            }
+          }
+        },
+        "severity": {
+          "danger": "#ff00ff"
+        },
+        "linkVisited": {
+          "light": "#ff1234",
+          "dark": "#1234ff"
+        },
+        "focus": {
+          "inner": {
+            "light": "#00ff00",
+            "dark": "#00ffff"
+          },
+          "outer": {
+            "light": "#ffff00",
+            "dark": "#ff00aa"
+          }
+        }
+      }
     },
     "other-org": {
       "colors": {

package/dist/bin/config.js

@@ -1,16 +1,22 @@
 // bin/config.ts
 import path2 from "path";
-import chalk3 from "chalk";
+import pc3 from "picocolors";
 import * as R8 from "ramda";
 
 // src/config.ts
-import chalk from "chalk";
+import pc from "picocolors";
 import * as R7 from "ramda";
-import { z } from "zod/v4";
-import { fromError } from "zod-validation-error/v4";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
 
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
+var baseColors = {
+  info: "#0A71C0",
+  success: "#068718",
+  warning: "#EA9B1B",
+  danger: "#C01B1B"
+};
 var colorMetadata = {
   "background-default": {
     number: 1,
@@ -254,6 +260,8 @@ var colorMetadata = {
   }
 };
 var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+var colorNames = Object.keys(colorMetadata);
+var baseColorNames = Object.keys(baseColors);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -274,18 +282,7 @@ var convertToHex = (color) => {
 };
 
 // src/colors/theme.ts
-var RESERVED_COLORS = [
-  "neutral",
-  "success",
-  "warning",
-  "danger",
-  "info",
-  "blue",
-  "green",
-  "orange",
-  "purple",
-  "red"
-];
+var RESERVED_COLORS = ["neutral", "success", "warning", "danger", "info"];
 
 // src/tokens/create/defaults.ts
 import * as R3 from "ramda";
@@ -334,12 +331,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 ${chalk.red(issuePath)}${optionMessage}:
-      ${issue.message} ${chalk.dim(errorCode)}`;
+        return `  - Error in JSON value ${pc.red(issuePath)}${optionMessage}:
+      ${issue.message} ${pc.dim(errorCode)}`;
       }).join("\n")
     });
   } catch (_err2) {
-    console.error(chalk.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
+    console.error(pc.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
     console.error(err instanceof Error ? err.stack : "No stack trace available");
   }
 }
@@ -347,7 +344,7 @@ function validateConfig(schema, unvalidatedConfig, configPath) {
   try {
     return schema.parse(unvalidatedConfig);
   } catch (err) {
-    console.error(chalk.redBright(`Invalid config file at ${chalk.red(configPath)}`));
+    console.error(pc.redBright(`Invalid config file at ${pc.red(configPath)}`));
     const validationError = makeFriendlyError(err);
     console.error(validationError?.toString());
     process.exit(1);
@@ -360,7 +357,7 @@ function parseConfig(configFile, configPath) {
   try {
     return JSON.parse(configFile);
   } catch (err) {
-    console.error(chalk.redBright(`Failed parsing config file at ${chalk.red(configPath)}`));
+    console.error(pc.redBright(`Failed parsing config file at ${pc.red(configPath)}`));
     const validationError = makeFriendlyError(err);
     console.error(validationError?.toString());
     process.exit(1);
@@ -389,16 +386,44 @@ var colorCategorySchema = z.record(
 ).refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
   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().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 focusOverrideSchema = z.object({
+  inner: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-inner" color'),
+  outer: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-outer" color')
+}).describe("Overrides for the focus colors");
+var overridesSchema = z.object({
+  colors: semanticColorOverrideSchema.optional(),
+  severity: severityColorOverrideSchema.optional(),
+  linkVisited: linkVisitedOverrideSchema.optional(),
+  focus: focusOverrideSchema.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" })
   }).describe("Defines the typography for a given theme").optional(),
-  borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional()
+  borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional(),
+  overrides: overridesSchema
 }).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
 var commonConfig = z.object({
   clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional()
@@ -413,10 +438,10 @@ var configFileCreateSchema = _configFileCreateSchema.extend(commonConfig.shape);
 
 // src/utils.ts
 import fs from "fs/promises";
-import chalk2 from "chalk";
+import pc2 from "picocolors";
 var readFile = async (path3, dry, allowFileNotFound) => {
   if (dry) {
-    console.log(`${chalk2.blue("readFile")} ${path3}`);
+    console.log(`${pc2.blue("readFile")} ${path3}`);
     return Promise.resolve("");
   }
   try {
@@ -450,11 +475,11 @@ async function readConfigFile(configPath, allowFileNotFound = true) {
     if (allowFileNotFound) {
       return "";
     }
-    console.error(chalk3.redBright(`Could not read config file at ${chalk3.blue(resolvedPath)}`));
+    console.error(pc3.redBright(`Could not read config file at ${pc3.blue(resolvedPath)}`));
     throw err;
   }
   if (configFile) {
-    console.log(`Found config file: ${chalk3.green(resolvedPath)}`);
+    console.log(`Found config file: ${pc3.green(resolvedPath)}`);
   }
   return configFile;
 }
@@ -465,11 +490,11 @@ async function parseCreateConfig(configFile, options) {
     (x) => /* @__PURE__ */ new Set([...R8.keys(x.colors.main), ...R8.keys(x.colors.support)])
   );
   if (!R8.all(R8.equals(R8.__, themeColors[0]), themeColors)) {
-    console.error(chalk3.redBright(`In config, all themes must have the same custom color names, but we found:`));
+    console.error(pc3.redBright(`In config, all themes must have the same custom color names, but we found:`));
     const themeNames = R8.keys(configParsed.themes ?? {});
     themeColors.forEach((colors, index) => {
-      const colorNames = Array.from(colors);
-      console.log(`  - ${themeNames[index]}: ${colorNames.join(", ")}`);
+      const colorNames2 = Array.from(colors);
+      console.log(`  - ${themeNames[index]}: ${colorNames2.join(", ")}`);
     });
     console.log();
     process.exit(1);

package/dist/bin/designsystemet.d.ts

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-export {};
+export declare const figletAscii = "\n _____            _                           _                      _\n|  __ \\          (_)                         | |                    | |\n| |  | | ___  ___ _  __ _ _ __  ___ _   _ ___| |_ ___ _ __ ___   ___| |_\n| |  | |/ _ \\/ __| |/ _` | '_ \\/ __| | | / __| __/ _ \\ '_ ` _ \\ / _ \\ __|\n| |__| |  __/\\__ \\ | (_| | | | \\__ \\ |_| \\__ \\ ||  __/ | | | | |  __/ |_\n|_____/ \\___||___/_|\\__, |_| |_|___/\\__, |___/\\__\\___|_| |_| |_|\\___|\\__|\n                     __/ |           __/ |\n                    |___/           |___/\n";
 //# sourceMappingURL=designsystemet.d.ts.map

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

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