@digdir/designsystemet 0.0.0-next-20250227103607 → 0.0.0-next-20250228195802

package/README.md

@@ -10,7 +10,98 @@ Read the Designsystemet [README](https://github.com/digdir/designsystemet) to ge
 ## Usage
 
 ### Create tokens
-We recommend using the [Designsystemet theme-builder](https://theme.designsystemet.no/) for generating options and commandline snippet. 
 
-### Build tokens
-Use `npx @digdir/designsystemet tokens build` to build CSS from design-tokens generated in the step above.
+Use `npx @digdir/designsystemet tokens create <options>` to create design tokens for use with Designsystemet.
+
+This allows you to define themes including custom colors, font-family, and border-radius.
+We recommend using the [Designsystemet theme builder](https://theme.designsystemet.no/) for generating a valid command with correct options.
+
+#### Update tokens
+
+Whenever a new version of the CLI is released, or you have done changes, we recommend to update design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
+
+To update design tokens, re-run `npx @digdir/designsystemet tokens create <options> --clean`. 
+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.
+> 
+> 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.
+
+### Build CSS from tokens
+
+Use `npx @digdir/designsystemet tokens build <options>` to build CSS from design tokens generated in the previous step.
+
+> ⚠️ **WARNING** ⚠️  
+> The CSS files from created by this tool are considered build artifacts. They should **not** be
+> edited directly. While the CSS will not change unexpectedly, new variables may be added at any
+> time. Therefore, it is necessary to routinely re-run this command when upgrading the libraries.
+> This will remove any direct edits to the CSS.
+
+#### Update built CSS
+
+Whenever a new version of the CLI is released, or you have done changes, we recommend to build a new set of CSS from design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
+
+
+### Using a config file
+
+> ⚠️ **WARNING** ⚠️  
+> This 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.
+
+The main advantage of using a config file is for automation in scenarios with multiple themes.
+
+To get started, use this template for a `designsystemet.config.json` file:
+
+```jsonc
+{
+  "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
+}
+```
+
+In editors which support JSON Schema, the `$schema` will then  give you editor hints for the structure of the file.
+
+#### Minimal config example
+As a minimal example, the following CLI snippet from the theme builder
+
+```
+npx @digdir/designsystemet tokens create \
+--main-colors "primary:#0062BA" "accent:#1E98F5" \
+--neutral-color "#1E2B3C" \
+--support-colors "extra1:#F45F63" "extra2:#E5AA20" \
+--border-radius 4 \
+--theme "theme"
+```
+
+...is equivalent to this `designsystemet.config.json` file
+```jsonc
+{
+  "$schema": "./node_modules/@digdir/designsystemet/dist/config.schema.json",
+  "outDir": "../path/to/design-tokens",
+  "themes": {
+    "theme": {
+      "colors": {
+        "main": { "primary": "#0062BA", "accent": "#1E98F5" },
+        "neutral": "#1E2B3C",
+        "support": { "extra1": "#F45F63", "extra2": "#E5AA20" }
+      },
+      "borderRadius": 4
+    }
+  }
+}
+```
+To generate new design tokens and CSS files, you would then run.
+
+```
+npx @digdir/designsystemet tokens create
+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.

package/dist/bin/designsystemet.js

@@ -12,7 +12,7 @@ import { cliOptions, createTokens } from "../src/tokens/create.js";
 import { cleanDir } from "../src/tokens/utils.js";
 import { writeTokens } from "../src/tokens/write.js";
 import { combinedConfigSchema, configFileSchema, mapPathToOptionName } from "./config.js";
-import { getDefaultOrExplicitOption } from "./options.js";
+import { getCliOption, getDefaultCliOption, getSuppliedCliOption } from "./options.js";
 program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
 function makeTokenCommands() {
   const tokenCmd = createCommand("tokens");
@@ -39,7 +39,7 @@ function makeTokenCommands() {
     `-o, --${cliOptions.outDir} <string>`,
     `Output directory for created ${chalk.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 ${chalk.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family`, DEFAULT_FONT).option(
+  ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk.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),
@@ -86,17 +86,17 @@ function makeTokenCommands() {
       borderRadius: optionGetter(cmd, "borderRadius")
     });
     const unvalidatedConfig = noUndefined({
-      outDir: propsFromJson?.outDir ?? getDefaultOrExplicitOption(cmd, "outDir"),
-      clean: propsFromJson?.clean ?? getDefaultOrExplicitOption(cmd, "clean"),
-      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(getDefaultOrExplicitOption)), propsFromJson.themes)
-      ) : (
+      outDir: propsFromJson?.outDir ?? getCliOption(cmd, "outDir"),
+      clean: propsFromJson?.clean ?? getCliOption(cmd, "clean"),
+      themes: propsFromJson?.themes ? R.map((jsonThemeValues) => {
+        const defaultThemeValues = getThemeOptions(getDefaultCliOption);
+        const cliThemeValues = getThemeOptions(getSuppliedCliOption);
+        return R.mergeDeepRight(defaultThemeValues, R.mergeDeepRight(jsonThemeValues, cliThemeValues));
+      }, 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)
+          [opts.theme]: getThemeOptions(getCliOption)
         }
       )
     });

package/dist/bin/options.d.ts

@@ -6,11 +6,16 @@ export type OptionGetter = ReturnType<typeof getOptionIfMatchingSource>;
  * 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;
+export declare const getSuppliedCliOption: <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.
+ * Get the default value specified for a CLI command option.
+ * Mostly useful for getting values which may later be overridden.
  */
-export declare const getDefaultOrExplicitOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
+export declare const getDefaultCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
+/**
+ * Try to get the explicitly supplied CLI option, and fall back to the default value
+ * for the option as defined in the {@link Command}
+ */
+export declare const getCliOption: <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

@@ -1 +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"}
+{"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,oBAAoB,GAjB9B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAeuD,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAvB7B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAqB0D,CAAC;AAExE;;;GAGG;AACH,eAAO,MAAM,YAAY,GA7BtB,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBA2B0D,CAAC"}

package/dist/bin/options.js

@@ -4,9 +4,11 @@ const getOptionIfMatchingSource = (...sources) => (command, option) => {
     return command.getOptionValue(option);
   }
 };
-const getExplicitOptionOnly = getOptionIfMatchingSource("cli");
-const getDefaultOrExplicitOption = getOptionIfMatchingSource("cli", "default");
+const getSuppliedCliOption = getOptionIfMatchingSource("cli");
+const getDefaultCliOption = getOptionIfMatchingSource("default");
+const getCliOption = getOptionIfMatchingSource("cli", "default");
 export {
-  getDefaultOrExplicitOption,
-  getExplicitOptionOnly
+  getCliOption,
+  getDefaultCliOption,
+  getSuppliedCliOption
 };

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

@@ -276,7 +276,7 @@ var beta_to_v1_default = (glob) => runCssCodemod({
       "--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-opacity-disabled": "--ds-opacity-disabled",
       "--fds-colors-blue-100": "--ds-global-blue-1",
       "--fds-colors-blue-200": "--ds-global-blue-2",
       "--fds-colors-blue-700": "--ds-global-blue-7",

package/dist/src/tokens/build/configs.js

@@ -57,7 +57,7 @@ const colorSchemeVariables = ({ "color-scheme": colorScheme = "light", theme },
           {
             destination: `color-scheme/${colorScheme}.css`,
             format: formats.colorScheme.name,
-            filter: (token) => !token.isSource && typeEquals("color", token)
+            filter: (token) => !token.isSource && typeEquals("color", token) && !R.startsWith(["global"], token.path)
           }
         ],
         options: {

package/dist/src/tokens/design-tokens/default/primitives/globals.json

@@ -140,4 +140,4 @@
       "$value": "30%"
     }
   }
-}
+}

package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/large.json

@@ -93,4 +93,4 @@
       "$value": "1.5%"
     }
   }
-}
+}

package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/medium.json

@@ -93,4 +93,4 @@
       "$value": "1.5%"
     }
   }
-}
+}

package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/small.json

@@ -93,4 +93,4 @@
       "$value": "1.5%"
     }
   }
-}
+}

package/dist/src/tokens/design-tokens/default/semantic/style.json

@@ -229,8 +229,8 @@
       }
     }
   },
-  "disabled": {
-    "opacity": {
+  "opacity": {
+    "disabled": {
       "$type": "opacity",
       "$value": "{opacity.30}"
     }
@@ -375,4 +375,4 @@
       "$value": "{_size.30}"
     }
   }
-}
+}

package/dist/src/tokens/design-tokens/template/$themes.json

@@ -1347,7 +1347,6 @@
       "color.warning.base-contrast-default": "3d38f3079fb9fd155567ec24c7fde25f68c40f42",
       "color.focus.inner": "1ec8f76f658042889b1eb4b08f3ce9bca1b7e603",
       "color.focus.outer": "09e04f0bfff8fdc309db58a0131b5d07dae6b4f8",
-      "disabled.opacity": "d94940d06b80e1cb6184ae12c5793a1ef95420ba",
       "border-width.default": "ac5b6181d17de3d25249c91674dce4fef8711216",
       "border-width.highlight": "dd40bb1cb729138762c0bfa29d26adb58b726354",
       "border-radius.sm": "7b2af5d22e01253d20184bf5c3f872a18d41a315",
@@ -1375,7 +1374,8 @@
       "size.18": "803716e7a1ab4f0ed08180713a5ddc53f5a80a13",
       "size.22": "f0e62cce260051ffae97ed9709e77fb22e2dac2e",
       "size.26": "a42e9a42d13ce2453de8005b58147b9a9b9b5dde",
-      "size.30": "600d545445deae2077866ba3953a64000a123606"
+      "size.30": "600d545445deae2077866ba3953a64000a123606",
+      "opacity.disabled": "d94940d06b80e1cb6184ae12c5793a1ef95420ba"
     },
     "group": "Semantic"
   },

package/dist/src/tokens/design-tokens/template/semantic/color-base-file.json

@@ -274,5 +274,13 @@
         "$value": "{color.neutral.text-default}"
       }
     }
+  },
+  "link": {
+    "color": {
+      "visited": {
+        "$type": "color",
+        "$value": "{global.purple.12}"
+      }
+    }
   }
 }

package/dist/src/tokens/template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qBAwG3B,CAAC"}
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qBAyG3B,CAAC"}

package/dist/src/tokens/template.js

@@ -28,6 +28,7 @@ const updateTemplates = async () => {
     JSON.stringify(categoryColorTemplate, null, 2).replaceAll("color.accent", "color.<color>")
   );
   const colorBaseFile = {
+    ...originalColorJson,
     color: R.omit(["accent", "neutral", "brand1", "brand2", "brand3"], originalColorJson.color)
   };
   await fs.writeFile(

package/dist/src/tokens/write.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"write.d.ts","sourceRoot":"","sources":["../../../src/tokens/write.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAoB,KAAK,EAAE,MAAM,EAA8B,MAAM,YAAY,CAAC;AAS9F,eAAO,MAAM,SAAS,SAAU,OAAO,WAAkC,CAAC;AAyB1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,WAAW,YAAmB,kBAAkB,kBA4K5D,CAAC"}
+{"version":3,"file":"write.d.ts","sourceRoot":"","sources":["../../../src/tokens/write.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAoB,KAAK,EAAE,MAAM,EAA8B,MAAM,YAAY,CAAC;AAS9F,eAAO,MAAM,SAAS,SAAU,OAAO,WAAkC,CAAC;AAyB1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,WAAW,YAAmB,kBAAkB,kBA6K5D,CAAC"}

package/dist/src/tokens/write.js

@@ -98,6 +98,7 @@ const writeTokens = async (options) => {
     ]
   );
   const semanticColors = {
+    ...semanticColorBaseFile,
     color: {
       ...Object.fromEntries(semanticColorTokens),
       ...semanticColorBaseFile.color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "0.0.0-next-20250227103607",
+  "version": "0.0.0-next-20250228195802",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "engines": {