Farger

Designsystemet bruker semantiske fargetokens som tilpasser seg automatisk basert på valgt tema og fargemodus (lys/mørk). Tokensene er tilgjengelige som CSS-variabler og via TypeScript.

Oversikt

Kategorier

Fargetokensene er delt inn i åtte kategorier:

Temaavhengige kategorier

Disse kategoriene endrer farge basert på valgt Bekk-tema (dag, natt, rebell, vann, jord, ild, luft):

• dominant — Hovedfargen i temaet. Brukes til primærflater, bakgrunner og hovedelementer.
• accent — Aksentfargen i temaet. Brukes til fremhevede elementer og lenker.
• neutral — Nøytralfargen i temaet. Brukes til generell tekst, bakgrunner og kantlinjer.

Globale kategorier

Disse kategoriene er like på tvers av alle temaer:

• info — Informasjon (blå). Brukes til informasjonsmeldinger og -flater.
• success — Suksess (grønn). Brukes til bekreftelser og positive tilbakemeldinger.
• warning — Advarsel (oransje). Brukes til advarsler og varselmeldinger.
• danger — Fare/feil (rød). Brukes til feilmeldinger og destruktive handlinger.
• interactive — Interaktive elementer (lilla). Brukes til fokusringer og interaktive tilstander.

Tokens per kategori

Hver kategori har 16 tokens organisert i fem grupper:

dominant

accent

neutral

info

success

warning

danger

interactive

Bruk i CSS

.card {
  background-color: var(--color-neutral-surface-default);
  border: 1px solid var(--color-neutral-border-default);
  color: var(--color-neutral-text-default);
}
 
.alert-error {
  background-color: var(--color-danger-surface-default);
  border-color: var(--color-danger-border-default);
  color: var(--color-danger-text-default);
}

Bruk med Tailwind

Fargetokensene er tilgjengelige som Tailwind-klasser via CSS-variablene:

<div
  class="bg-[var(--color-neutral-surface-default)] text-[var(--color-neutral-text-default)]"
>
  Innhold
</div>

Bruk i TypeScript

import { tokens } from "@kilden/design-tokens";
 
// Hent CSS-variabelreferanse
const bgColor = tokens.color.neutral["surface-default"];
// → "var(--color-neutral-surface-default)"