CLI Config
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.
Over har me definert eit tema som heiter my-theme med nokre fargar og border radius.
Legg merke til at neutral er definert som ein streng, medan main og support er objekt.
Dette er fordi neutral berre har ein farge, medan main og support har fleire.
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 |
|---|---|---|---|
| main | Objekt | Ja | Hovudfargar for temaet. |
| neutral | Streng | Ja | Nøytral farge for temaet. |
| support | Objekt | Nei | Støttefargar for temaet. Standard er tomt objekt. |
Objektet for main og support inneheld fargar, der nøkkelen er fargen sitt namn og verdien er ein hexkode.
Overrides
| Namn | Type | Påkrevd | Forklaring |
|---|---|---|---|
| colors | Objekt | Nei | Inneheld overskrivingar for individuelle fargesteg |
| severity | Objekt | Nei | Inneheld overskrivingar for severity-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 (både main og support fargar), 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.
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.