Designtokener

En av kjernefundamentene i moderne komponentbiblioteker ligger i deres gjennomtenkte tilnærming til stilsetting. I stedet for å hardkode farger eller lage rigide klassesystemer, kan vi bruke en semantisk navnekonvensjon som skiller tema, kontekst og bruk.

Denne semantiske navnekonvensjonen kalles designtokener. Denne arkitektoniske avgjørelsen skaper et vedlikeholdbart, fleksibelt system som skalerer godt på tvers av applikasjoner.

Filosofien bak semantiske CSS-variabler

Tradisjonelle CSS-tilnærminger kobler ofte fargeverdier direkte til bruksområder, noe som skaper skjøre systemer som er vanskelige å vedlikeholde. Designtokener tar en annen tilnærming ved å lage abstraksjonslag som skiller hva noe er fra hvordan det ser ut.

Forstå variabelarkitekturen

La oss se på hvordan vi kan strukturere CSS-variablene våre for å lage dette fleksible systemet:

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
}

I eksemplet ovenfor har vi fire designtokener:

• --background, som brukes til bakgrunnsfarger (primært bakgrunnen på siden)
• --foreground, som brukes til forgrunnsfarger (generell tekstfarge)
• --primary, som brukes til primærfarger (hovedfargen til merkevaren)
• --primary-foreground, som brukes til primær forgrunnsfarger (tekstfargen, sett mot primærfargen)