Fargesystemet i Jøkul

Farge er ett av de mest kraftfulle verktøyene i designsystemet. Jøkuls fargesystem er bygget i to lag — primitive tokens og semantiske tokens — for å gjøre det enkelt å bytte tema, sikre tilgjengelighet og holde produkter konsistente.

Primitive tokens — fargepaletten

De primitive tokenene er det nederste laget i systemet. De definerer alle konkrete fargeverdier — eksakte hex-koder eller HSL-verdier. De er ikke ment å brukes direkte i komponentkode, men er byggesteinene som de semantiske tokenene refererer til.

--jkl-color-primitive-granitt-*

Gråskalaen fra nesten hvit (10) til nesten svart (100). Grunnlaget for nøytrale overflater og tekst.

--jkl-color-primitive-skog-*

Fremtinds primærfarge — en mørk, rolig grønn. Brukes for interaktive elementer og merkevareidentitet.

--jkl-color-primitive-varde-*

En varm beige/sandfarge. Brukes til sekundære overflater og bakgrunner i markedsførings- kontekst.

--jkl-color-primitive-fjord-*

En kjølig blå. Brukes primært for informasjons- og lenkefarger.

--jkl-color-primitive-furu-*

En varm terrakotta/rødoransje. Brukes for varsler og feilmeldinger.

Semantiske tokens — fargeroller

Semantiske tokens gir farger mening i stedet for å beskrive den faktiske fargen. Dette gjør det mulig å bytte ut alle underliggende primitive verdier (f.eks. mørk modus) uten å endre komponentkoden.

Bakgrunnsfarger

--jkl-color-background-default

Sidens hovedbakgrunn. Hvit i lys modus, nesten svart i mørk modus.

--jkl-color-background-subtle

Lett hevet overflate. Brukes på kort, paneler og seksjoner som skal skille seg fra siden bak.

--jkl-color-background-sunken

Nedsenket overflate — litt mørkere enn default. Brukes for inndatafelter og innrammede områder som visuelt «synker» inn.

--jkl-color-background-inverted

Invertert overflate — mørk bakgrunn i lys modus, lys i mørk modus. For tydelig kontrast, f.eks. footer eller hero-seksjoner.

Innholdsfarger (tekst og ikoner)

--jkl-color-content-default

Primær tekstfarge. Brukes for overskrifter og brødtekst.

--jkl-color-content-subtle

Sekundær tekstfarge. Brukes for hjelpetekst, metadata og plassholdertekst i skjemafelter.

--jkl-color-content-inverted

Tekst på invertert bakgrunn. Automatisk kontrastert mot background-inverted.

--jkl-color-content-link

Farge for lenker og interaktive inline-tekstelementer.

Kantlinjefarger

--jkl-color-border-default

Standard kantlinje for skjemafelter, skillelinjer og kortkanter.

--jkl-color-border-focused

Fokusring. Brukes automatisk av alle Jøkul-komponenter ved tastaturnavigasjon.

--jkl-color-border-invalid

Feilmarkering. Vises automatisk på skjemafelter med valideringsfeil.

Tilstandsfarger (feedback)

Tilstandsfarger brukes for å kommunisere suksess, advarsel, feil og informasjon:

--jkl-color-feedback-success-*

Grønn — operasjonen var vellykket, feltet er godkjent.

--jkl-color-feedback-warning-*

Gul/amber — noe krever brukerens oppmerksomhet, men er ikke kritisk.

--jkl-color-feedback-error-*

Rød — en feil har oppstått, eller feltet er ugyldig. Krever handling.

--jkl-color-feedback-info-*

Blå — nøytral informasjon som kan hjelpe brukeren.

Lys og mørk tema

Jøkul støtter fullstendig mørk modus uten ekstra kode i komponentene. Temaet aktiveres ved å sette et attributt på et overordnet element:

<!-- Lys modus (standard) -->
<div data-theme="light">...</div>

<!-- Mørk modus -->
<div data-theme="dark">...</div>

<!-- Følger OS-innstillingen (anbefalt) -->
<div data-theme="auto">...</div>

Alle semantiske fargevariabler bytter automatisk verdi basert på det aktive temaet. Primitive tokens endres ikke.

Kontrastkrav og WCAG

Jøkuls fargepar er testet mot WCAG 2.1 AA-krav. Tommelfingerreglene er:

• Normal tekst (under 18pt / 14pt bold): minimalt kontrastforhold på 4,5:1.
• Stor tekst (18pt+ / 14pt+ bold): minimalt kontrastforhold på 3:1.
• UI-komponenter og grafiske elementer: minimalt kontrastforhold på 3:1 mot tilstøtende farger.
• Bruk verktøy som Stark (Figma-plugin) eller WebAIM Contrast Checker for å verifisere egne fargekombinasjoner.

.mitt-kort {
  background-color: var(--jkl-color-background-subtle);
  border: 1px solid var(--jkl-color-border-default);
  color: var(--jkl-color-content-default);
}

.mitt-kort__etikett {
  color: var(--jkl-color-content-subtle);
  font-size: var(--jkl-font-size-small);
}

.mitt-kort--markert {
  border-color: var(--jkl-color-border-focused);
  background-color: var(--jkl-color-background-default);
}