CSS

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

Designsystemet tilbyr flere dataattributter for å styre temaet til komponentene og verdiene i CSS-variabler. Dataattributtene kan settes på et hvilket som helst HTML-element, og CSS-variablene de setter, arves automatisk av underliggende elementer.

data-size

Tilsvarer Appearance › Size i Figma.
Setter størrelse på komponentene.

data-color

Tilsvarer Appearance › Color i Figma.
Brukes til å endre farge på komponentene. Mulige verdier er definert av ditt tema. Du kan lese mer om denne på "Fargar i kode".

data-color-scheme

Tilsvarer Appearance › Color scheme i Figma.
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.

Du kan lese mer om denne på "Fargar i kode".

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.

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