feat(cli): new way to run 🏃🏻‍♂️

.changeset/clear-buckets-shout.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": patch
+---
+
+**Deprecated:** Commands `token create` and `token build`. Use `designsystemet` with new `output` field in `designsystemet.config.json` to configure outputs.

.changeset/honest-pans-lose.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+**CLI:** New `output` field for defining outputs in config

.changeset/solid-turkeys-buy.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": patch
+---
+
+**Deprecated:** `outDir` and `clean` are deprecated in the Config schema, and replaced by `output[].dir` and `output[].cleanDir` for the respective output type.

.changeset/sour-turtles-begin.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+**CLI:** Each output in the new `output` field cleans its `dir` before generating files. Set `cleanDir` to `false` on an output to keep existing files.

apps/themebuilder/app/_components/token-modal/use-token-modal.ts

@@ -1,6 +1,7 @@
-import type {
-  CssColor,
-  ExternalConfigSchemaInput,
+import {
+  type CssColor,
+  defaultBorderRadius,
+  type ExternalConfigSchemaInput,
 } from '@digdir/designsystemet/internal';
 import pkg from '@digdir/designsystemet/package.json';
 import { useState } from 'react';
@@ -35,27 +36,25 @@ export const useTokenModal = () => {
     }
   });
 
-  const theme: ExternalConfigSchemaInput['themes'][string] = {
+  const theme: NonNullable<ExternalConfigSchemaInput['themes']>[string] = {
     colors: colors.reduce(
       (acc, color) => {
         acc[color.name] = color.colors.light['base-default']?.hex || '#';
         return acc;
       },
       {} as Record<string, CssColor>,
     ),
-    borderRadius: baseBorderRadius,
-    typography: {
-      fontFamily: 'Inter',
-    },
+    ...(baseBorderRadius !== defaultBorderRadius && {
+      borderRadius: baseBorderRadius,
+    }),
   };
 
   const packageWithTag = `@digdir/designsystemet${isProduction ? '@latest' : '@next'}`;
 
-  const configBuildSnippet = `npx ${packageWithTag} tokens create --config designsystemet.config.json\nnpx ${packageWithTag} tokens build --config designsystemet.config.json`;
+  const configBuildSnippet = `npx ${packageWithTag}`;
 
   const configSnippet = {
     $schema: `https://designsystemet.no/schemas/config/${pkg.version}.json`,
-    outDir: './design-tokens',
     themes: {
       [name]: {
         colors: theme.colors,
@@ -72,7 +71,9 @@ export const useTokenModal = () => {
               },
             }
           : {}),
-        borderRadius: theme.borderRadius,
+        ...(theme.borderRadius !== undefined && {
+          borderRadius: theme.borderRadius,
+        }),
       },
     },
   };

apps/themebuilder/app/_utils/config-to-url.ts

@@ -6,7 +6,7 @@ const QUERY_SEPARATOR = ' ';
  * Converts a theme config object to a themebuilder URL with query parameters
  */
 export function configThemeToUrl(
-  theme: ConfigSchema['themes']['default'],
+  theme: NonNullable<ConfigSchema['themes']>[string],
   lang = 'no',
 ): string {
   const params = new URLSearchParams();

apps/www/app/content/fundamentals/en/code/cli-config.mdx

@@ -21,6 +21,7 @@ The config file can be named whatever you want, but if you use `designsystemet.c
 You can place it anywhere in your project.
 
 If you've placed your file in a different location or with a different name, you can use `--config <path>` in CLI commands.
+Both `designsystemet.config.json` and `designsystemet.config.jsonc` are detected automatically, and both may contain comments and trailing commas.
 
 ```json
 {
@@ -41,14 +42,104 @@ If you've placed your file in a different location or with a different name, you
 Above, we have defined a theme called `my-theme` with some colours and border radius.
 Each colour is defined directly under `colors`, where the key is the colour's name and the value is a hex code.
 
+## Running the CLI
+
+Run the CLI in the same folder as your config file:
+
+```bash
+npx @digdir/designsystemet@latest
+```
+
+This creates design tokens and CSS for all themes, based on the [`output`](#output) field in the config file.
+
+| Option | Description |
+| ------ | ----------- |
+| `-c, --config <path>` | Path to the config file. |
+| `--dry` | Dry run, no files will be written. |
+| `--verbose` | Enable verbose output. |
+| `--skip-check` | Skip the automatic migration check of the config file. |
+| `-y, --yes` | Skip prompts, for example when migrating the config file. |
+
+<Alert data-color="info">
+The `tokens create` and `tokens build` commands are deprecated and will be removed in a future release. Use `designsystemet` with a config file instead.
+</Alert>
+
 ## Structure
 
 | Name | Type | Required | Description |
 | ---- | ---- | ------- | ----------- |
 | $schema | String | No | Path to JSON schema for validation. Recommended: `node_modules/@digdir/designsystemet/dist/config.schema.json`. |
-| themes | Object | Yes | Contains all themes you want to define. Each key is the name of the theme. |
-| outDir | String | Yes | The folder where design tokens should be saved. |
-| clean | Boolean | No | Delete the output directory before creating tokens. Useful for removing deprecated files. |
+| output | Array | No | What the CLI should create, and where. Defaults to `["design-tokens", "css"]`. See [Output](#output). |
+| themes | Object | No | Contains all themes you want to define. Each key is the name of the theme. Required by outputs that are created from themes, see [Building without themes](#building-without-themes). |
+| outDir | String | No | **Deprecated:** use `output[].dir` instead. |
+| clean | Boolean | No | **Deprecated:** use `output[].cleanDir` instead. |
+
+### Output
+
+`output` is a list of what the CLI should create. Each item is either the name of an output type, which uses its default settings, or an object with custom settings.
+Outputs are always created in the order `design-tokens`, `css`, whatever order they are listed in. When CSS is built from design tokens (with `tokensDir`), the design tokens must be created first.
+
+All paths are relative to the config file.
+
+```json
+{
+  "output": [
+    { "type": "design-tokens", "dir": "./design-tokens" },
+    { "type": "css", "dir": "./css", "tokensDir": "./design-tokens" }
+  ]
+}
+```
+
+#### design-tokens
+
+| Name | Type | Required | Default | Description |
+| ---- | ---- | ------- | ------- | ----------- |
+| type | `"design-tokens"` | Yes | | The output type. |
+| dir | String | No | `design-tokens` | The folder where design tokens should be saved. |
+| cleanDir | Boolean | No | `true` | Delete the folder before creating design tokens. Removes files that are no longer in use. |
+
+#### css
+
+| Name | Type | Required | Default | Description |
+| ---- | ---- | ------- | ------- | ----------- |
+| type | `"css"` | Yes | | The output type. |
+| dir | String | No | `design-tokens-build` | The folder where CSS should be saved. |
+| cleanDir | Boolean | No | `true` | Delete the folder before creating CSS. |
+| tokensDir | String | No | `dir` of the `design-tokens` output | The folder containing the design tokens to build CSS from. If neither is set, CSS is created directly from the themes. |
+
+#### Without design tokens
+
+If you only need CSS, you can use for example `"output": ["css"]` without `tokensDir`. It is then created directly from the themes, without saving any design tokens.
+
+#### Building without themes
+
+`themes` is only needed by outputs that are created from themes. If you already have design tokens, you can leave out `themes` and build from them by setting `tokensDir`:
+
+```json
+{
+  "output": [
+    { "type": "css", "tokensDir": "./design-tokens" }
+  ]
+}
+```
+
+If an output needs themes and there are none, the CLI stops with an error.
+
+### Migrating from outDir and clean
+
+`outDir` and `clean` are replaced by `output`. When you run the CLI with a config file that uses them, it offers to migrate the file for you.
+If you'd rather do it manually, replace `"outDir": "<path>"` with:
+
+```json
+{
+  "output": [
+    { "type": "design-tokens", "dir": "<path>" },
+    { "type": "css", "tokensDir": "<path>" }
+  ]
+}
+```
+
+`clean` can be removed, since `cleanDir` is `true` by default. If you had `"clean": false`, add `"cleanDir": false` to each output instead, so the folders are not deleted.
 
 ### Themes
 
@@ -170,7 +261,10 @@ The `severity` override allows you to customise the colours used for severity, w
 ```json
 {
   "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
-  "outDir": "./design-tokens",
+  "output": [
+    { "type": "design-tokens", "dir": "./design-tokens" },
+    { "type": "css", "dir": "./design-tokens-build", "tokensDir": "./design-tokens" }
+  ],
   "themes": {
     "my-theme": {
       "colors": {

apps/www/app/content/fundamentals/en/start-here/own-theme.mdx

@@ -23,8 +23,6 @@ We recommend that both a developer and a designer take part in the process when
 
 ```json
 {
-  "outDir": "./design-tokens",
-  "clean": true,
   "themes": {
     "theme": {
       "colors": {
@@ -45,9 +43,9 @@ We recommend that both a developer and a designer take part in the process when
 
 5. Run the following command in the terminal:
 ```bash
-npx @digdir/designsystemet@latest tokens create --config designsystemet.config.json
+npx @digdir/designsystemet@latest
 ```
-This will generate Design Tokens based on the configuration file and save them in a folder called `design-tokens`. Push the changes to your repository.
+This will generate Design Tokens based on the configuration file and save them in a folder called `design-tokens`, and CSS in a folder called `design-tokens-build`. You can change the folders with the [`output`](/en/fundamentals/code/cli-config#output) field in the configuration file. Push the changes to your repository.
 
 6. Fetch the component library from [Figma Community (figma.com)](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) (Click “Open in Figma”) into your organisation that has at least a Pro licence. Note that this will be a copy of the component library without any connection to the main file.
 
@@ -70,7 +68,7 @@ We recommend *not* pushing changes to Design Tokens from Tokens Studio, as this
 
 
 ```bash
-npx @digdir/designsystemet@latest tokens create --config designsystemet.config.json
+npx @digdir/designsystemet@latest --config designsystemet.config.json
 ```
 
 **Remember to run this command every time you make changes to the configuration file.**
@@ -116,8 +114,6 @@ If you want additional themes, you can generate a new theme in the Theme Builder
 
 ```json
 {
-  "outDir": "./design-tokens",
-  "clean": true,
   "themes": {
     "theme-one": {
       "colors": {
@@ -144,13 +140,7 @@ When the Design Tokens are updated in code, you can easily fetch the new values
 </Alert>
 
 
-10. To generate CSS from your theme, run the following command:
-
-```bash
-npx @digdir/designsystemet@latest tokens build --config designsystemet.config.json
-```
-
-Remember that this must also be done whenever the tokens are updated.
+10. The same command also generates CSS from your theme, in the `design-tokens-build` folder. This CSS is what you use in code.
 
 ### Icons in Figma
 To get icons working in Figma, they need to be connected to a library stored in your organisation. See the guide ["Get icons working in Figma"](/en/fundamentals/theme/icons#get-icons-working-in-figma).

apps/www/app/content/fundamentals/en/theme/multiple-themes.mdx

@@ -57,7 +57,10 @@ It is common to have to do it this way if you have a repository that collects al
 
 ```json
 {
-  "outDir": "./some-org-dt",
+  "output": [
+    { "type": "design-tokens", "dir": "./some-org-dt" },
+    { "type": "css", "dir": "./some-org-css", "tokensDir": "./some-org-dt" }
+  ],
   "themes": {
     "some-org": {
       "colors": {
@@ -73,7 +76,10 @@ It is common to have to do it this way if you have a repository that collects al
 
 ```json
 {
-  "outDir": "./other-org-dt",
+  "output": [
+    { "type": "design-tokens", "dir": "./other-org-dt" },
+    { "type": "css", "dir": "./other-org-css", "tokensDir": "./other-org-dt" }
+  ],
   "themes": {
     "other-org": {
       "colors": {
@@ -88,5 +94,5 @@ It is common to have to do it this way if you have a repository that collects al
 ```
 
 <Alert data-color="info">
-Note that we have different `outDir`s in these two config files, so that the design tokens for each theme are placed in their own folder.
+Note that we have different `output` folders in these two config files, so that the design tokens and CSS for each theme are placed in their own folders.
 </Alert>