Kom i gang

CLI Config

Informasjon om korleis du bruker CLI config fil.

Oppdatert 29. oktober 2025

Merk at config er eksperimentelt. Config skjema kan endre seg når som helst, og vil bli kommunisert i changelog.

Å bruke config fil med CLI gjer at du kan ha meir kontroll over fargane dine, og kan lettare oppdatere og vedlikehalde dei.

Kom i gang

Config fila kan heite det du vil, men bruker du designsystemet.config.json vil me finne den automatisk om du køyrer kommando i samme mappe. Du kan legge den kor du vil i prosjektet ditt.

Har du plassert fila di ein anna plass, eller med eit anna navn, kan du bruke --config <path> i CLI-kommandoar.

{  "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",  "themes": {    "my-theme": {      "colors": {        "primary": "#0062BA",        "neutral": "#1E2B3C",        "extra1": "#F45F63"      },      "borderRadius": 4    }  }}

Over har me definert eit tema som heiter my-theme med nokre fargar og border radius. Kvar farge er definert direkte under colors, der nøkkelen er namnet på fargen og verdien er ein hexkode.

Struktur

Namn	Type	Påkrevd	Forklaring
$schema	Streng	Nei	Sti til JSON schema for validering. Anbefalt: `node_modules/@digdir/designsystemet/dist/config.schema.json`.
themes	Objekt	Ja	Inneheld alle tema du vil definere. Ny nøkkel er namnet på temaet.
outDir	Streng	Ja	Mappa der design tokens skal lagrast.
clean	Boolean	Nei	Slett utdata-mappa før du lagar tokens. Nyttig for å fjerne utdaterte filer.

Themes

Navn	Type	Påkrevd	Forklaring
"temaNavn"	Objekt	Ja	Temaet du vil definere.

Du kan ha fleire tema, og kvart tema kan ha sine eigne fargar, border radius, typografi og overrides.

Theme

Namn	Type	Påkrevd	Forklaring
colors	Objekt	Ja	Inneheld alle fargar for temaet.
borderRadius	Tal	Nei	Base border radius for temaet.
typography	Objekt	Nei	Inneheld typografi innstillingar for temaet.
overrides	Objekt	Nei	Inneheld overskrivingar for fargar og severity-fargar.

Typography

Namn	Type	Påkrevd	Forklaring
fontFamily	Streng	Ja	Font-familien for temaet.

Viss du inkluderer typography i temaet ditt, må fontFamily vere definert.

Colors

Namn	Type	Påkrevd	Forklaring
"fargeNavn"	Streng	Nei	Ein farge for temaet.
neutral	Streng	Ja	Nøytral farge for temaet.

Fargane blir definert direkte under colors, der nøkkelen er fargen sitt namn og verdien er ein hexkode.

{  "primary": "#0062BA",  "accent": "#1E98F5",  "neutral": "#1E2B3C"}

Overrides

Namn	Type	Påkrevd	Forklaring
colors	Objekt	Nei	Inneheld overskrivingar for individuelle fargesteg
severity	Objekt	Nei	Inneheld overskrivingar for severity-fargar
linkVisited	Objekt	Nei	Inneheld overskrivingar for farge på besøkte lenker
focus	Objekt	Nei	Inneheld overskrivingar for fokus fargar

overrides.colors

Namn	Type	Påkrevd	Forklaring
"fargeNavn"	Objekt	Nei	Overskrivingar for ein spesifikk farge

Overstyringen av colors lar deg tilpasse spesifikke semantiske fargetokens for kvar farge som er definert i temaets.

Kvar nøkkel i colors-objektet skal samsvare med eit fargenavn frå fargane dine, eller ein av severity-fargane (success, warning, danger, info).

For kvar farge kan du overstyre individuelle semantiske tokener som background-default, border-subtle, text-default osv. Kvar tokenoverstyring har ein light og/eller dark verdi som peikar til ein heksadesimal kode.

{  "overrides": {    "colors": {      "dominant": {        "background-default": {          "light": "#ff0000",          "dark": "#000fff"        }      }    }  }}

Fargenavn

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

Namn	Type	Påkrevd	Forklaring
"fargeNavn"	Streng	Nei	Hex-farge som skal settast som base

Overstyringen av severity lar deg tilpasse fargane som blir brukt for severity, som er success, warning, danger og info.

overrides.linkVisited

Namn	Type	Påkrevd	Forklaring
light	Streng	Nei	Hex-farge for besøkte lenker i lyst tema
dark	Streng	Nei	Hex-farge for besøkte lenker i mørkt tema

overrides.focus

Namn	Type	Påkrevd	Forklaring
inner	Objekt	Nei	Inneheld fargar for indre fokus
outer	Objekt	Nei	Inneheld fargar for ytre fokus

overrides.focus.(inner|outer)

Namn	Type	Påkrevd	Forklaring
light	Streng	Nei	Hex-farge for indre fokus i lyst tema
dark	Streng	Nei	Hex-farge for indre fokus i mørkt tema

Komplett Eksempel

{  "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",  "outDir": "./design-tokens",  "themes": {    "my-theme": {      "colors": {        "primary": "#0062BA",        "accent": "#1E98F5",        "extra1": "#F45F63",        "neutral": "#1E2B3C",        "extra2": "#E5AA20"      },      "borderRadius": 4,      "typography": {        "fontFamily": "Inter"      },      "overrides": {        "colors": {          "primary": {            "background-default": {              "light": "#ff0000",              "dark": "#000fff"            },            "text-default": {              "light": "#00ff00",              "dark": "#00ffff"            }          }        },        "severity": {          "success": "#28a745",          "warning": "#ffc107",          "danger": "#dc3545",          "info": "#17a2b8"        },        "linkVisited": {          "light": "#ff1234",          "dark": "#1234ff"        }      }    }  }}

Rediger denne siden på github.com (åpnes i ny fane)