CLI Config
Note that config is experimental. The config schema may change at any time, and will be communicated in the changelog.
Using a config file with the CLI gives you more control over your colours and makes it easier to update and maintain them.
Getting Started
The config file can be named whatever you want, but if you use designsystemet.config.json, we will find it automatically when you run commands in the same folder.
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.
Above, we have defined a theme called my-theme with some colours and border radius.
Note that neutral is defined as a string, while main and support are objects.
This is because neutral only has one colour, while main and support have multiple.
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. |
Themes
| Name | Type | Required | Description |
|---|---|---|---|
| "themeName" | Object | Yes | The theme you want to define. |
You can have multiple themes, and each theme can have its own colours, border radius, typography, and overrides.
Theme
| Name | Type | Required | Description |
|---|---|---|---|
| colors | Object | Yes | Contains all colours for the theme. |
| borderRadius | Number | No | Base border radius for the theme. |
| typography | Object | No | Contains typography settings for the theme. |
| overrides | Object | No | Contains overrides for colours and severity colours. |
Typography
| Name | Type | Required | Description |
|---|---|---|---|
| fontFamily | String | Yes | The font family for the theme. |
If you include typography in your theme, fontFamily must be defined.
Note that typography is experimental. The config schema may change at any time.
Colors
| Name | Type | Required | Description |
|---|---|---|---|
| main | Object | Yes | Main colours for the theme. |
| neutral | String | Yes | Neutral colour for the theme. |
| support | Object | No | Support colours for the theme. Defaults to empty object. |
The object for main and support contains colours, where the name is the colour's name and the value is a hex code.
Overrides
| Name | Type | Required | Description |
|---|---|---|---|
| colors | Object | No | Contains overrides for individual colour tokens |
| severity | Object | No | Contains overrides for severity colours |
overrides.colors
| Name | Type | Required | Description |
|---|---|---|---|
| "colorName" | Object | No | Overrides for a specific colour |
The colors override allows you to customise specific semantic colour tokens for any colour defined in your theme.
Each key in the colors object should match a colour name from your colours (both main and support colours), or one of the severity colours (success, warning, danger, info).
For each colour, you can override individual semantic tokens like background-default, border-subtle, text-default, etc.
Each token override has a light and/or dark value that points to a hex code.
Colour names
| Color name |
|---|
| background-default |
| background-tinted |
| surface-default |
| surface-tinted |
| surface-hover |
| surface-active |
| border-subtle |
| border-default |
| border-strong |
| text-subtle |
| text-default |
| base-default |
| base-hover |
| base-active |
| base-contrast-subtle |
| base-contrast-default |
overrides.severity
| Name | Type | Required | Description |
|---|---|---|---|
| "colorName" | String | No | Hex colour to set as base |
The severity override allows you to customise the colours used for severity, which are success, warning, danger, and info.