Design Tokens

Design Tokens werden als CSS Custom Properties implementiert und sind in TypeScript als Typen verfügbar.

Struktur

Tokens liegen in /src/styles/tokens.css:

:root {
  /* Primitive */
  --color-blue-500: #0066cc;
  --spacing-4: 16px;

  /* Semantic */
  --color-text-primary: var(--color-gray-900);
  --color-background-default: var(--color-white);

  /* Component */
  --button-background-primary: var(--color-primary-default);
}

Verwendung

In CSS

.button {
  color: var(--color-text-primary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
}

Mit Tailwind

Tailwind ist so konfiguriert, dass es die Tokens nutzt:

<button class="bg-primary text-white px-4 py-2 rounded-md">
  <!-- Tokens werden automatisch verwendet -->
</button>

Automatisierung

Tokens werden aus Figma automatisch synchronisiert:

# Tokens aktualisieren
bun run tokens:sync

Best Practices

1. Keine Hardcoded-Werte

   /* Falsch */
   color: #1a1a1a;
   
   /* Richtig */
   color: var(--color-text-primary);

2. Semantische Tokens bevorzugen

   /* Primitive vermeiden */
   color: var(--color-gray-900);
   
   /* Semantic nutzen */
   color: var(--color-text-primary);

3. Component-Scoping

   /* Component-spezifisch wenn nötig */
   .button-primary {
     background: var(--button-background-primary);
   }

---

Tokens sind implementiert – nutzt sie konsistent.