Design Tokens

Verwende CMS-konfigurierte Farben und Werte in deinen Components via Tailwind CSS.

Übersicht

Design Tokens sind semantische Farben und Werte, die vom CMS bereitgestellt werden. Sie können vom CMS-Admin geändert werden, ohne dass Components angepasst werden müssen.

Verfügbare Tokens

Brand Colors

html

<!-- Primary -->
<div class="bg-primary text-white">Primary Background</div>
<div class="text-primary">Primary Text</div>
<div class="border-primary">Primary Border</div>

<!-- Primary Variants -->
<div class="bg-primary-light">Light Primary</div>
<div class="bg-primary-dark">Dark Primary</div>

<!-- Secondary -->
<div class="bg-secondary text-white">Secondary Background</div>
<div class="text-secondary">Secondary Text</div>
<div class="border-secondary">Secondary Border</div>

<!-- Secondary Variants -->
<div class="bg-secondary-light">Light Secondary</div>
<div class="bg-secondary-dark">Dark Secondary</div>

Feedback Colors

html

<!-- Success (Grün) -->
<div class="bg-success text-white">Success</div>
<div class="bg-success-light">Light Success</div>
<div class="bg-success-dark">Dark Success</div>

<!-- Error (Rot) -->
<div class="bg-error text-white">Error</div>
<div class="bg-error-light">Light Error</div>
<div class="bg-error-dark">Dark Error</div>

<!-- Warning (Gelb/Orange) -->
<div class="bg-warning text-white">Warning</div>
<div class="bg-warning-light">Light Warning</div>
<div class="bg-warning-dark">Dark Warning</div>

<!-- Info (Blau) -->
<div class="bg-info text-white">Info</div>
<div class="bg-info-light">Light Info</div>
<div class="bg-info-dark">Dark Info</div>

Semantic Text Colors

html

<!-- Text Body (Standard-Textfarbe) -->
<p class="text-text-body">Standard body text</p>

<!-- Text Heading (Überschriften) -->
<h1 class="text-text-heading">Heading color</h1>

<!-- Text Muted (Gedämpfter Text) -->
<p class="text-text-muted">Muted secondary text</p>

<!-- Text Inverse (Für dunkle Hintergründe) -->
<div class="bg-gray-900">
  <p class="text-text-inverse">White text on dark background</p>
</div>

Semantic Background Colors

html

<!-- Default Background -->
<div class="bg-bg-default">Default background</div>

<!-- Subtle Background (z.B. für Cards) -->
<div class="bg-bg-subtle">Subtle background</div>

<!-- Elevated Background (z.B. für Modals) -->
<div class="bg-bg-elevated shadow-lg">Elevated surface</div>

<!-- Inverse Background -->
<div class="bg-bg-inverse text-text-inverse">Dark background</div>

Gray Scale

Vollständige Gray-Skala (50-900):

html

<div class="bg-gray-50">Lightest gray</div>
<div class="bg-gray-100">Very light gray</div>
<div class="bg-gray-200">Light gray</div>
<div class="bg-gray-300">Medium-light gray</div>
<div class="bg-gray-400">Medium gray</div>
<div class="bg-gray-500">Medium gray</div>
<div class="bg-gray-600">Medium-dark gray</div>
<div class="bg-gray-700">Dark gray</div>
<div class="bg-gray-800">Very dark gray</div>
<div class="bg-gray-900">Darkest gray</div>

Black & White

html

<div class="bg-black text-white">Black background</div>
<div class="bg-white text-black">White background</div>

<p class="text-black">Black text</p>
<p class="text-white">White text</p>

Alle Token-Klassen

Text Colors

Klasse	CSS Variable	Beschreibung
`text-primary`	`--color-primary`	Brand Primary
`text-primary-light`	`--color-primary-light`	Heller Primary
`text-primary-dark`	`--color-primary-dark`	Dunkler Primary
`text-secondary`	`--color-secondary`	Brand Secondary
`text-secondary-light`	`--color-secondary-light`	Heller Secondary
`text-secondary-dark`	`--color-secondary-dark`	Dunkler Secondary
`text-success`	`--color-success`	Erfolg (Grün)
`text-success-light`	`--color-success-light`	Hell Erfolg
`text-success-dark`	`--color-success-dark`	Dunkel Erfolg
`text-error`	`--color-error`	Fehler (Rot)
`text-error-light`	`--color-error-light`	Hell Fehler
`text-error-dark`	`--color-error-dark`	Dunkel Fehler
`text-warning`	`--color-warning`	Warnung (Gelb/Orange)
`text-warning-light`	`--color-warning-light`	Hell Warnung
`text-warning-dark`	`--color-warning-dark`	Dunkel Warnung
`text-info`	`--color-info`	Info (Blau)
`text-info-light`	`--color-info-light`	Hell Info
`text-info-dark`	`--color-info-dark`	Dunkel Info
`text-text-body`	`--color-text-body`	Standard Text
`text-text-heading`	`--color-text-heading`	Überschriften
`text-text-muted`	`--color-text-muted`	Gedämpfter Text
`text-text-inverse`	`--color-text-inverse`	Inverser Text (meist weiß)
`text-gray-{50-900}`	`--color-gray-{50-900}`	Gray Scale
`text-black`	`--color-black`	Schwarz
`text-white`	`--color-white`	Weiß

Background Colors

Ersetze text- mit bg- für Hintergrundfarben:

html

<div class="bg-primary">Primary Background</div>
<div class="bg-success-light">Light Success Background</div>
<div class="bg-gray-100">Gray Background</div>

Border Colors

Ersetze text- mit border- für Rahmenfarben:

html

<div class="border border-primary">Primary Border</div>
<div class="border-2 border-error">Error Border</div>
<div class="border-t border-gray-200">Top Gray Border</div>

Verwendung

Button Styles

html

<!-- Primary Button -->
<button class="px-6 py-3 bg-primary text-white hover:bg-primary-dark rounded-lg">
  Primary Action
</button>

<!-- Secondary Button -->
<button class="px-6 py-3 bg-secondary text-white hover:bg-secondary-dark rounded-lg">
  Secondary Action
</button>

<!-- Outline Button -->
<button class="px-6 py-3 border-2 border-primary text-primary hover:bg-primary hover:text-white rounded-lg">
  Outline
</button>

Alert Messages

html

<!-- Success Alert -->
<div class="p-4 bg-success-light text-success-dark border-l-4 border-success rounded">
  <p class="font-semibold">Success!</p>
  <p>Operation completed successfully.</p>
</div>

<!-- Error Alert -->
<div class="p-4 bg-error-light text-error-dark border-l-4 border-error rounded">
  <p class="font-semibold">Error!</p>
  <p>Something went wrong.</p>
</div>

<!-- Warning Alert -->
<div class="p-4 bg-warning-light text-warning-dark border-l-4 border-warning rounded">
  <p class="font-semibold">Warning!</p>
  <p>Please review your input.</p>
</div>

<!-- Info Alert -->
<div class="p-4 bg-info-light text-info-dark border-l-4 border-info rounded">
  <p class="font-semibold">Info</p>
  <p>Here's some helpful information.</p>
</div>

Cards

html

<div class="bg-bg-subtle border border-gray-200 rounded-lg p-6 shadow">
  <h3 class="text-text-heading text-xl font-bold mb-2">Card Title</h3>
  <p class="text-text-body mb-4">Card description text</p>
  <p class="text-text-muted text-sm">Additional info</p>
</div>

Status Badges

html

<!-- Active -->
<span class="px-3 py-1 bg-success text-white text-sm rounded-full">
  Active
</span>

<!-- Inactive -->
<span class="px-3 py-1 bg-gray-400 text-white text-sm rounded-full">
  Inactive
</span>

<!-- Pending -->
<span class="px-3 py-1 bg-warning text-white text-sm rounded-full">
  Pending
</span>

<!-- Error -->
<span class="px-3 py-1 bg-error text-white text-sm rounded-full">
  Error
</span>

CMS-Konfiguration

Design Tokens werden im CMS konfiguriert:

CMS → Settings → Design → Colors

Änderungen werden automatisch auf alle Components angewendet, die Design Tokens verwenden.

Custom Overrides

In tokens/tokens.css kannst du zusätzliche Tokens definieren:

css

:root {
  /* Component-spezifische Tokens */
  --my-component-accent: #705ef0;
  --my-grid-gap: 2rem;

  /* Überschreibe CMS-Defaults (nicht empfohlen) */
  /* --color-primary: #custom-color; */
}

WARNING

Überschreibe CMS-Tokens nur wenn unbedingt nötig. Die Idee ist, dass CMS-Admins die Farben zentral steuern können.

Best Practices

1. Design Tokens statt feste Farben

html

<!-- ✓ Gut: Design Tokens -->
<button class="bg-primary hover:bg-primary-dark">
  Click me
</button>

<!-- ✗ Schlecht: Feste Farben -->
<button class="bg-blue-600 hover:bg-blue-700">
  Click me
</button>

2. Semantische Tokens verwenden

html

<!-- ✓ Gut: Semantisch -->
<div class="text-text-heading">Heading</div>
<p class="text-text-body">Body text</p>
<span class="text-text-muted">Muted text</span>

<!-- ✗ Weniger gut: Grays direkt -->
<div class="text-gray-900">Heading</div>
<p class="text-gray-700">Body text</p>
<span class="text-gray-500">Muted text</span>

3. Variants für Hover/Active

html

<button class="
  bg-primary
  hover:bg-primary-dark
  active:bg-primary-dark
  text-white
  px-6 py-3 rounded-lg
  transition-colors
">
  Button
</button>

4. Feedback-Farben korrekt einsetzen

html

<!-- Success für positive Aktionen -->
<button class="bg-success hover:bg-success-dark">Save</button>

<!-- Error für destruktive Aktionen -->
<button class="bg-error hover:bg-error-dark">Delete</button>

<!-- Warning für Vorsicht -->
<button class="bg-warning hover:bg-warning-dark">Reset</button>

Technische Details

Tailwind v4 Integration

Design Tokens werden als Tailwind v4 @theme definiert:

css

@theme {
  --color-primary: #cf0ce9;
  --color-primary-light: #fb923c;
  --color-primary-dark: #c2410c;
  /* ... */
}

Build-Zeit

Tokens werden beim Build eingefügt:

wm dev: Lädt Tokens vom CMS via API
wm build: Inkludiert Tokens im generierten CSS

Nächste Schritte

Tailwind CSS - Styling-System
Component Basics - Grundlagen
Props - Dynamische Daten

Design Tokens ​

Übersicht ​

Verfügbare Tokens ​

Brand Colors ​

Feedback Colors ​

Semantic Text Colors ​

Semantic Background Colors ​

Gray Scale ​

Black & White ​

Alle Token-Klassen ​

Text Colors ​

Background Colors ​

Border Colors ​

Verwendung ​

Button Styles ​

Alert Messages ​

Cards ​

Status Badges ​

CMS-Konfiguration ​

Custom Overrides ​

Best Practices ​

1. Design Tokens statt feste Farben ​

2. Semantische Tokens verwenden ​

3. Variants für Hover/Active ​

4. Feedback-Farben korrekt einsetzen ​

Technische Details ​

Tailwind v4 Integration ​

Build-Zeit ​

Nächste Schritte ​

Design Tokens

Übersicht

Verfügbare Tokens

Brand Colors

Feedback Colors

Semantic Text Colors

Semantic Background Colors

Gray Scale

Black & White

Alle Token-Klassen

Text Colors

Background Colors

Border Colors

Verwendung

Button Styles

Alert Messages

Cards

Status Badges

CMS-Konfiguration

Custom Overrides

Best Practices

1. Design Tokens statt feste Farben

2. Semantische Tokens verwenden

3. Variants für Hover/Active

4. Feedback-Farben korrekt einsetzen

Technische Details

Tailwind v4 Integration

Build-Zeit

Nächste Schritte