Design tokenek

A modern komponenskönyvtárak egyik alapvető pillére a stíluskezelésük átgondolt megközelítése. Ahelyett, hogy színeket keményen kódolnánk vagy merev osztályrendszereket hoznánk létre, alkalmazhatunk egy szemantikus elnevezési konvenciót, amely elkülöníti a téma, a kontextus és a használat szempontjait.

Ezt a szemantikus elnevezési konvenciót design tokeneknek nevezzük. Ez az architekturális döntés karbantartható, rugalmas rendszert hoz létre, amely jól skálázódik az alkalmazások között.

A szemantikus CSS-változók filozófiája

A hagyományos CSS-megközelítések gyakran közvetlenül a használati kontextusokhoz kötik a színértékeket, ami törékeny, nehezen karbantartható rendszereket eredményez. A design tokenek másképp közelítik meg a problémát: absztrakciós rétegeket hoznak létre, amelyek elválasztják azt, hogy mi valami, attól, hogy hogyan néz ki.

A változóarchitektúra megértése

Nézzük meg, hogyan strukturálhatjuk a CSS-változóinkat ennek a rugalmas rendszernek a létrehozásához:

@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);
}

A fenti példában négy design tokenünk van:

• --background, amelyet háttérszínekhez használnak (elsősorban az oldal hátteréhez)
• --foreground, amelyet előtérszínekhez használnak (általános szövegszínként)
• --primary, amelyet elsődleges színekhez használnak (a márka fő színe)
• --primary-foreground, amelyet elsődleges előtérszínekhez használnak (a szöveg színe, amikor a fő szín hátterében jelenik meg)