Kom i gang med CSS

For å bruke Designsystemets CSS, så må du installere @digdir/designsystemet-css og @digdir/designsystemet-theme (eller lage ditt eget tema).

Layers

Vi bruker css layers for å få lavest mulig spesifisitet på vår css. Dette betyr at du lett kan overstye med din egen styling.

Alle våre layers ligger under layer gruppen ds.

Har du f.eks en css reset, så vil denne overstyre deler av det vi har gjort. Vi anbefaler å legge denne i en layer og sortere denne først. Dette gjør du ved å først legge reseten din i en layer, og så sortere denne layeren først:

Data attributter

Vi tilbyr flere data attributter som kan brukes for å endre tema på komponentene.

data-color-scheme

Brukes til å endre fargemodus på komponentene. Mulige verdier er light, dark og auto. Dersom auto er valgt, vil fargemodusen endres basert på brukerens preferanser ved hjelp av prefers-color-scheme.

data-typography

Brukes til å endre typografien på komponentene. Mulige verdier er primary og secondary. Et vanlig bruksområde for denne attributten er når du ønsker en monospace font på tabeller.

Hvilken typografi som er tilknyttet primary eller secondary må defineres i teamet, ved hjelp av Tokens Studio (med Designsystemet design-tokens) eller Temabyggeren.

Dersom du skal bruke denne attributten må du huske å definere font-family til å bruke --ds-font-family CSS variabelen. Dette kan løses ved å f.eks bruke attribute selector i CSS.

Hjelpeklasser

Vi benytter oss av enkelte hjelpeklasser som kan brukes mer generelt på tvers av komponenter.

ds-sr-only

Skjuler et element visuelt mens det fortsatt er tilgjengelig for skjermlesere.

ds-print-preserve

Bevarer utseende, inkludert bakgrunnsfarge, i print.

ds-focus / ds-focus--inset

Legger til designsystemets fokusring rundt elementet når det får fokus med tastaturnavigering (:focus-visible).

ds-focus--visible / ds-focus--visible--inset

Statiske "alltid på" klasser som legger til designsystemets fokusring rundt elementet. Eksempel.