@digdir/designsystemet 1.6.1 → 1.7.1

package/README.md

@@ -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.

package/configs/test-tokens.config.json

@@ -32,7 +32,16 @@
               "light": "#f0ff00",
               "dark": "#ff00ff"
             }
+          },
+          "danger": {
+            "background-default": {
+              "light": "#0000ff",
+              "dark": "#0000ff"
+            }
           }
+        },
+        "severity": {
+          "danger": "#ff00ff"
         }
       }
     },

package/dist/bin/config.js

@@ -11,6 +11,12 @@ 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,
@@ -255,6 +261,7 @@ 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";
@@ -275,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";
@@ -394,10 +390,12 @@ var colorModeOverrideSchema = z.object({
   light: colorSchema.optional(),
   dark: colorSchema.optional()
 }).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 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 overridesSchema = z.object({
-  colors: semanticColorOverrideSchema.optional()
+  colors: semanticColorOverrideSchema.optional(),
+  severity: severityColorOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({

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":";AAcA,eAAO,MAAM,WAAW,4iBASvB,CAAC"}

package/dist/bin/designsystemet.js

@@ -8,12 +8,12 @@ import * as R29 from "ramda";
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
 var baseColors = {
-  blue: "#0A71C0",
-  green: "#068718",
-  orange: "#EA9B1B",
-  purple: "#663299",
-  red: "#C01B1B"
+  info: "#0A71C0",
+  success: "#068718",
+  warning: "#EA9B1B",
+  danger: "#C01B1B"
 };
+var dsLinkColor = "#663299";
 var colorMetadata = {
   "background-default": {
     number: 1,
@@ -258,6 +258,7 @@ 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";
@@ -290,18 +291,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"];
 var generateColorScale = (color, colorScheme2) => {
   let interpolationColor = color;
   if (colorScheme2 === "dark") {
@@ -871,7 +861,7 @@ import pc5 from "picocolors";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.6.1",
+  version: "1.7.1",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -944,9 +934,9 @@ var package_default = {
     "object-hash": "^3.0.0",
     picocolors: "^1.1.1",
     postcss: "^8.5.6",
-    ramda: "^0.31.3",
-    "style-dictionary": "^5.1.0",
-    zod: "^4.1.11",
+    ramda: "^0.32.0",
+    "style-dictionary": "^5.1.1",
+    zod: "^4.1.12",
     "zod-validation-error": "^4.0.2"
   },
   devDependencies: {
@@ -954,7 +944,7 @@ var package_default = {
     "@types/apca-w3": "^0.1.3",
     "@types/chroma-js": "^3.1.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.18.8",
+    "@types/node": "^22.18.11",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.31.1",
     "fs-extra": "^11.3.2",
@@ -2599,10 +2589,7 @@ function generate$Metadata(schemes, themes, colors2) {
       "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}`)
-      ]),
+      ...schemes.flatMap((scheme) => [...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}`),
@@ -2703,7 +2690,6 @@ function generateColorSchemesGroup(colorSchemes, themes) {
     (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"
@@ -3869,27 +3855,24 @@ var generateColorScheme = (themeName, colorScheme2, colors2, overrides) => {
     colors2.support
   );
   const neutral = generateColor(generateColorScale(colors2.neutral, colorScheme2), createColorOverrides("neutral"));
+  const baseColorsWithOverrides = {
+    ...baseColors,
+    ...overrides?.severity
+  };
+  const globalColors = R24.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    baseColorsWithOverrides
+  );
+  const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
   return {
     [themeName]: {
       ...main,
       ...support,
-      neutral
-    }
-  };
-};
-var generateColorGlobal = (colorScheme2) => {
-  const blueScale = generateColorScale(baseColors.blue, colorScheme2);
-  const greenScale = generateColorScale(baseColors.green, colorScheme2);
-  const orangeScale = generateColorScale(baseColors.orange, colorScheme2);
-  const purpleScale = generateColorScale(baseColors.purple, colorScheme2);
-  const redScale = generateColorScale(baseColors.red, colorScheme2);
-  return {
-    global: {
-      blue: generateColor(blueScale),
-      green: generateColor(greenScale),
-      orange: generateColor(orangeScale),
-      purple: generateColor(purpleScale),
-      red: generateColor(redScale)
+      neutral,
+      ...globalColors,
+      link: {
+        visited: linkColor[12]
+      }
     }
   };
 };
@@ -3900,270 +3883,6 @@ import * as R25 from "ramda";
 // src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
 var color_base_template_default = {
   color: {
-    success: {
-      "background-default": {
-        $type: "color",
-        $value: "{global.green.1}"
-      },
-      "background-tinted": {
-        $type: "color",
-        $value: "{global.green.2}"
-      },
-      "surface-default": {
-        $type: "color",
-        $value: "{global.green.3}"
-      },
-      "surface-tinted": {
-        $type: "color",
-        $value: "{global.green.4}"
-      },
-      "surface-hover": {
-        $type: "color",
-        $value: "{global.green.5}"
-      },
-      "surface-active": {
-        $type: "color",
-        $value: "{global.green.6}"
-      },
-      "border-subtle": {
-        $type: "color",
-        $value: "{global.green.7}"
-      },
-      "border-default": {
-        $type: "color",
-        $value: "{global.green.8}"
-      },
-      "border-strong": {
-        $type: "color",
-        $value: "{global.green.9}"
-      },
-      "text-subtle": {
-        $type: "color",
-        $value: "{global.green.10}"
-      },
-      "text-default": {
-        $type: "color",
-        $value: "{global.green.11}"
-      },
-      "base-default": {
-        $type: "color",
-        $value: "{global.green.12}"
-      },
-      "base-hover": {
-        $type: "color",
-        $value: "{global.green.13}"
-      },
-      "base-active": {
-        $type: "color",
-        $value: "{global.green.14}"
-      },
-      "base-contrast-subtle": {
-        $type: "color",
-        $value: "{global.green.15}"
-      },
-      "base-contrast-default": {
-        $type: "color",
-        $value: "{global.green.16}"
-      }
-    },
-    danger: {
-      "background-default": {
-        $type: "color",
-        $value: "{global.red.1}"
-      },
-      "background-tinted": {
-        $type: "color",
-        $value: "{global.red.2}"
-      },
-      "surface-default": {
-        $type: "color",
-        $value: "{global.red.3}"
-      },
-      "surface-tinted": {
-        $type: "color",
-        $value: "{global.red.4}"
-      },
-      "surface-hover": {
-        $type: "color",
-        $value: "{global.red.5}"
-      },
-      "surface-active": {
-        $type: "color",
-        $value: "{global.red.6}"
-      },
-      "border-subtle": {
-        $type: "color",
-        $value: "{global.red.7}"
-      },
-      "border-default": {
-        $type: "color",
-        $value: "{global.red.8}"
-      },
-      "border-strong": {
-        $type: "color",
-        $value: "{global.red.9}"
-      },
-      "text-subtle": {
-        $type: "color",
-        $value: "{global.red.10}"
-      },
-      "text-default": {
-        $type: "color",
-        $value: "{global.red.11}"
-      },
-      "base-default": {
-        $type: "color",
-        $value: "{global.red.12}"
-      },
-      "base-hover": {
-        $type: "color",
-        $value: "{global.red.13}"
-      },
-      "base-active": {
-        $type: "color",
-        $value: "{global.red.14}"
-      },
-      "base-contrast-subtle": {
-        $type: "color",
-        $value: "{global.red.15}"
-      },
-      "base-contrast-default": {
-        $type: "color",
-        $value: "{global.red.16}"
-      }
-    },
-    info: {
-      "background-default": {
-        $type: "color",
-        $value: "{global.blue.1}"
-      },
-      "background-tinted": {
-        $type: "color",
-        $value: "{global.blue.2}"
-      },
-      "surface-default": {
-        $type: "color",
-        $value: "{global.blue.3}"
-      },
-      "surface-tinted": {
-        $type: "color",
-        $value: "{global.blue.4}"
-      },
-      "surface-hover": {
-        $type: "color",
-        $value: "{global.blue.5}"
-      },
-      "surface-active": {
-        $type: "color",
-        $value: "{global.blue.6}"
-      },
-      "border-subtle": {
-        $type: "color",
-        $value: "{global.blue.7}"
-      },
-      "border-default": {
-        $type: "color",
-        $value: "{global.blue.8}"
-      },
-      "border-strong": {
-        $type: "color",
-        $value: "{global.blue.9}"
-      },
-      "text-subtle": {
-        $type: "color",
-        $value: "{global.blue.10}"
-      },
-      "text-default": {
-        $type: "color",
-        $value: "{global.blue.11}"
-      },
-      "base-default": {
-        $type: "color",
-        $value: "{global.blue.12}"
-      },
-      "base-hover": {
-        $type: "color",
-        $value: "{global.blue.13}"
-      },
-      "base-active": {
-        $type: "color",
-        $value: "{global.blue.14}"
-      },
-      "base-contrast-subtle": {
-        $type: "color",
-        $value: "{global.blue.15}"
-      },
-      "base-contrast-default": {
-        $type: "color",
-        $value: "{global.blue.16}"
-      }
-    },
-    warning: {
-      "background-default": {
-        $type: "color",
-        $value: "{global.orange.1}"
-      },
-      "background-tinted": {
-        $type: "color",
-        $value: "{global.orange.2}"
-      },
-      "surface-default": {
-        $type: "color",
-        $value: "{global.orange.3}"
-      },
-      "surface-tinted": {
-        $type: "color",
-        $value: "{global.orange.4}"
-      },
-      "surface-hover": {
-        $type: "color",
-        $value: "{global.orange.5}"
-      },
-      "surface-active": {
-        $type: "color",
-        $value: "{global.orange.6}"
-      },
-      "border-subtle": {
-        $type: "color",
-        $value: "{global.orange.7}"
-      },
-      "border-default": {
-        $type: "color",
-        $value: "{global.orange.8}"
-      },
-      "border-strong": {
-        $type: "color",
-        $value: "{global.orange.9}"
-      },
-      "text-subtle": {
-        $type: "color",
-        $value: "{global.orange.10}"
-      },
-      "text-default": {
-        $type: "color",
-        $value: "{global.orange.11}"
-      },
-      "base-default": {
-        $type: "color",
-        $value: "{global.orange.12}"
-      },
-      "base-hover": {
-        $type: "color",
-        $value: "{global.orange.13}"
-      },
-      "base-active": {
-        $type: "color",
-        $value: "{global.orange.14}"
-      },
-      "base-contrast-subtle": {
-        $type: "color",
-        $value: "{global.orange.15}"
-      },
-      "base-contrast-default": {
-        $type: "color",
-        $value: "{global.orange.16}"
-      }
-    },
     focus: {
       inner: {
         $type: "color",
@@ -4179,7 +3898,7 @@ var color_base_template_default = {
     color: {
       visited: {
         $type: "color",
-        $value: "{global.purple.12}"
+        $value: "{color.link.visited}"
       }
     }
   }
@@ -4322,7 +4041,7 @@ var color_template_default2 = {
 };
 
 // src/tokens/create/generators/semantic.ts
-var generateSemantic = (colors2) => {
+var generateSemantic = (colors2, _themeName) => {
   const mainColorNames = Object.keys(colors2.main);
   const supportColorNames = Object.keys(colors2.support);
   const modes = {
@@ -4356,7 +4075,8 @@ var generateSemantic = (colors2) => {
     }
   }
   const customColors = [...mainColorNames, "neutral", ...supportColorNames];
-  const semanticColorTokens = customColors.map(
+  const allColors = [...customColors, ...baseColorNames];
+  const semanticColorTokens = allColors.map(
     (colorName) => [
       colorName,
       R25.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
@@ -4507,7 +4227,7 @@ var theme_template_default = {
 var generateTheme = (colors2, themeName, borderRadius) => {
   const mainColorNames = Object.keys(colors2.main);
   const supportColorNames = Object.keys(colors2.support);
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
   const themeColorTokens = Object.fromEntries(
     customColors.map(
       (colorName) => [
@@ -4520,7 +4240,13 @@ var generateTheme = (colors2, themeName, borderRadius) => {
   const themeFile = {
     color: {
       ...themeColorTokens,
-      ...themeBaseFileColor
+      ...themeBaseFileColor,
+      link: {
+        visited: {
+          $type: "color",
+          $value: `{${themeName}.link.visited}`
+        }
+      }
     },
     ...remainingThemeFile
   };
@@ -4592,7 +4318,7 @@ var cliOptions = {
 var createTokens = async (opts) => {
   const { colors: colors2, typography: typography2, name, borderRadius, overrides } = opts;
   const colorSchemes = ["light", "dark"];
-  const semantic2 = generateSemantic(colors2);
+  const semantic2 = generateSemantic(colors2, name);
   const tokenSets = new Map([
     ...getDefaultTokens([
       "primitives/globals",
@@ -4607,7 +4333,6 @@ var createTokens = async (opts) => {
     [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
     [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
     ...colorSchemes.flatMap((scheme) => [
-      [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
       [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors2, overrides)]
     ]),
     [`themes/${name}`, generateTheme(colors2, name, borderRadius)],
@@ -4706,10 +4431,12 @@ var colorModeOverrideSchema = z.object({
   light: colorSchema.optional(),
   dark: colorSchema.optional()
 }).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 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 overridesSchema = z.object({
-  colors: semanticColorOverrideSchema.optional()
+  colors: semanticColorOverrideSchema.optional(),
+  severity: severityColorOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({
@@ -4816,6 +4543,16 @@ async function parseBuildConfig(configFile, { configPath }) {
 }
 
 // bin/designsystemet.ts
+var figletAscii = `
+ _____            _                           _                      _
+|  __ \\          (_)                         | |                    | |
+| |  | | ___  ___ _  __ _ _ __  ___ _   _ ___| |_ ___ _ __ ___   ___| |_
+| |  | |/ _ \\/ __| |/ _\` | '_ \\/ __| | | / __| __/ _ \\ '_ \` _ \\ / _ \\ __|
+| |__| |  __/\\__ \\ | (_| | | | \\__ \\ |_| \\__ \\ ||  __/ | | | | |  __/ |_
+|_____/ \\___||___/_|\\__, |_| |_|___/\\__, |___/\\__\\___|_| |_| |_|\\___|\\__|
+                     __/ |           __/ |
+                    |___/           |___/
+`;
 program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
 var DEFAULT_TOKENS_CREATE_DIR = "./design-tokens";
 var DEFAULT_TOKENS_BUILD_DIR = "./design-tokens-build";
@@ -4829,6 +4566,7 @@ function makeTokenCommands() {
     `Output directory for built ${pc11.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) => {
+    console.log(figletAscii);
     const { 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";
@@ -4853,6 +4591,7 @@ function makeTokenCommands() {
     (radiusAsString) => Number(radiusAsString),
     4
   ).option("--theme <string>", "Theme name (ignored when using JSON config file)", DEFAULT_THEME_NAME).option("--config <string>", `Path to config file (default: "${DEFAULT_CONFIG_FILE}")`).action(async (opts, cmd) => {
+    console.log(figletAscii);
     if (opts.dry) {
       console.log(`Performing dry run, no files will be written`);
     }
@@ -4877,6 +4616,7 @@ function makeTokenCommands() {
 }
 program.addCommand(makeTokenCommands());
 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;
   if (list) {
     for (const key of Object.keys(migrations_default)) {
@@ -4909,3 +4649,6 @@ async function getConfigFile(config) {
   const configFile = await readConfigFile(configPath, allowFileNotFound);
   return { configFile, configPath };
 }
+export {
+  figletAscii
+};

package/dist/color.base.template-QGZJKXMN.json

@@ -0,0 +1,22 @@
+{
+  "color": {
+    "focus": {
+      "inner": {
+        "$type": "color",
+        "$value": "{color.neutral.background-default}"
+      },
+      "outer": {
+        "$type": "color",
+        "$value": "{color.neutral.text-default}"
+      }
+    }
+  },
+  "link": {
+    "color": {
+      "visited": {
+        "$type": "color",
+        "$value": "{color.link.visited}"
+      }
+    }
+  }
+}