Farger

Fargetokens utgjør Jøkuls fargepalett. De beskriver både basefarger og semantiske farger.

Prinsipper

Fargene er valgt slik at de i kombinasjon oppfyller kontrastkrav
Gjør det enkelt å veksle mellom lyst og mørkt tema
Det er semantiske tokens som skal brukes, ikke basefarger eller hardkodede HEX-verdier

Hvordan bruke tokens

Figma

Ingen gode svar å få

Kode

.container { background-color: var(--jkl-color-background-page); color: var(--jkl-color-text-default); border: 1px solid var(--jkl-color-border-input); }

Tokens

Bakgrunnsfarger

Bakgrunnsfarger
Navn på token	Brukes til
--jkl-color-background-page	Bakgrunn på sider
--jkl-color-background-page-variant	Uthevet bakgrunnsfarge
--jkl-color-background-container	Flater som ligger direkte på bakgrunnen
--jkl-color-background-container-high	Uthevede flater som ligger direkte på bakgrunnen
--jkl-color-background-container-low	Nedtonede flater
--jkl-color-background-container-inverted	Kontrastflater
--jkl-color-background-alert-info	Informasjonsflater
--jkl-color-background-alert-success	Suksessflater
--jkl-color-background-alert-warning	Advarselsflater
--jkl-color-background-alert-error	Feilmeldingsflater

Tekstfarger

Tekstfarger
Navn på token	Brukes til
--jkl-color-text-default	Vanlig tekst
--jkl-color-text-subdued	Nedtonet tekst
--jkl-color-text-inverted	Tekst på kontrastflater
--jkl-color-text-on-alert	Tekst på varslingsflater

Border

Border-tokens
Navn på token	Brukes til
--jkl-color-border-separator	De fleste skillelinjer
--jkl-color-border-separator-strong	Fremhevet skillelinje

Til bruk i komponenter

Disse fargene brukes i Jøkul-komponentene, og skal som regel ikke brukes direkte.

Tokens brukt i komponenter
Navn på token	Brukes til
--jkl-color-background-action	Handlingsflater (som primærknapp)
--jkl-color-background-interactive	Bakgrunn på interaktive flater som menyelementer
--jkl-color-background-interactive-hover	Som over, men ved hover
--jkl-color-background-interactive-selected	Som over, men der elementet er valgt
--jkl-color-background-input-base	Bakgrunnsfarge i skjemafelter
--jkl-color-background-input-focus	Bakgrunnsfarge i skjemafelter med fokus
--jkl-color-text-on-action	Tekst på handlingsflater
--jkl-color-text-interactive	Frittstående tekst som kan interageres med (som lenker)
--jkl-color-text-interactive-hover	Som over, men ved hover
--jkl-color-border-input	Omriss til skjemafelter
--jkl-color-border-input-focus	Omriss til skjemafelter med fokus
--jkl-color-border-separator-hover	Skillelinjer for uthevede rader i tabeller og lister