Farger

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

Prinsipper

Farger er en sentral del av bankenes merkevare, det er viktig å bruke riktig fargerolle når du lager grensesnitt. Dersom du er usikker på hva som skal brukes, er vi nødt til å vite det. Si ifra til oss på Teams eller Github.

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