Design-Token

Eine der zentralen Grundlagen moderner Komponentenbibliotheken liegt in ihrem durchdachten Ansatz für Styling. Anstatt Farben fest zu kodieren oder starre Klassensysteme zu erstellen, können wir eine semantische Benennungskonvention verwenden, die die Belange von Thema, Kontext und Verwendung trennt.

Diese semantische Benennungskonvention ist als Design-Token bekannt. Diese architektonische Entscheidung schafft ein wartbares, flexibles System, das sich elegant über Anwendungen skalieren lässt.

Die Philosophie semantischer CSS-Variablen

Traditionelle CSS-Ansätze koppeln Farbwerte oft direkt an ihre Verwendungskontexte, wodurch fragile Systeme entstehen, die schwer zu warten sind. Design-Token verfolgen einen anderen Ansatz, indem sie Abstraktionsebenen schaffen, die trennen, was etwas ist, von wie es aussieht.

Die Architektur der Variablen verstehen

Schauen wir uns an, wie wir unsere CSS-Variablen strukturieren können, um dieses flexible System zu schaffen:

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

Im obigen Beispiel haben wir vier Design-Token:

• --background, das für Hintergrundfarben verwendet wird (hauptsächlich für den Seitenhintergrund)
• --foreground, das für Vordergrundfarben verwendet wird (die allgemeine Textfarbe)
• --primary, das für Primärfarben verwendet wird (die Hauptfarbe der Marke)
• --primary-foreground, das für primäre Vordergrundfarben verwendet wird (die Textfarbe, wie sie auf der Primärfarbe erscheint)