234 lines
5.6 KiB
Markdown
234 lines
5.6 KiB
Markdown
# Design Tokens Referenz
|
|
|
|
Alle CSS Custom Properties aus `tokens.css` — die zentrale Anlaufstelle für alle Anpassungen.
|
|
|
|
**Regel:** Immer semantische Aliases verwenden, nie direkt die Palette.
|
|
|
|
---
|
|
|
|
## Farb-Palette (nur intern)
|
|
|
|
Diese Werte nie direkt in HTML/CSS verwenden — nur als Basis für semantische Aliases.
|
|
|
|
```css
|
|
/* Graustufen */
|
|
--color-white, --color-gray-50/100/200/300/400/500/600/700/800/900, --color-black
|
|
|
|
/* Akzent (Primärfarbe) */
|
|
--color-accent-50/100/200/300/400/500/600/700/800/900
|
|
/* Standard: --color-accent-500: #6366f1 (Indigo) */
|
|
|
|
/* Status */
|
|
--color-success, --color-success-bg, --color-success-border
|
|
--color-warning, --color-warning-bg, --color-warning-border
|
|
--color-danger, --color-danger-bg, --color-danger-border
|
|
--color-info, --color-info-bg, --color-info-border
|
|
```
|
|
|
|
**Primärfarbe anpassen:** Nur `--color-accent-*`-Werte in `tokens.css` ändern → alle Komponenten folgen automatisch.
|
|
|
|
---
|
|
|
|
## Semantische Aliases (diese verwenden)
|
|
|
|
### Hintergründe
|
|
|
|
| Token | Light | Verwendung |
|
|
|---|---|---|
|
|
| `--bg` | `#ffffff` | Seiten-Hintergrund |
|
|
| `--bg-subtle` | `#f8f9fa` | Subtiler Hintergrund, Zebra-Zeilen |
|
|
| `--bg-muted` | `#f1f3f5` | Gedämpfter Hintergrund |
|
|
|
|
### Surfaces (Karten, Overlays)
|
|
|
|
| Token | Verwendung |
|
|
|---|---|
|
|
| `--surface` | Karten, Panels |
|
|
| `--surface-raised` | Erhöhte Elemente (Tooltips) |
|
|
| `--surface-overlay` | Modale Overlays, Dropdowns |
|
|
|
|
### Rahmen
|
|
|
|
| Token | Verwendung |
|
|
|---|---|
|
|
| `--border` | Standard-Rahmen |
|
|
| `--border-strong` | Betonter Rahmen |
|
|
| `--border-focus` | Fokus-Ring (= Akzentfarbe) |
|
|
|
|
### Text
|
|
|
|
| Token | Verwendung |
|
|
|---|---|
|
|
| `--text` | Primärtext |
|
|
| `--text-muted` | Sekundärtext, Metadaten |
|
|
| `--text-subtle` | Platzhalter, deaktivierte Elemente |
|
|
| `--text-on-accent` | Text auf Akzent-Hintergrund |
|
|
|
|
### Akzentfarbe
|
|
|
|
| Token | Verwendung |
|
|
|---|---|
|
|
| `--accent` | Primärfarbe (Buttons, Links, Fokus) |
|
|
| `--accent-hover` | Hover-State |
|
|
| `--accent-active` | Aktiv/Gedrückt-State |
|
|
| `--accent-subtle` | Sehr heller Hintergrund |
|
|
| `--accent-muted` | Heller Hintergrund |
|
|
|
|
---
|
|
|
|
## Typografie
|
|
|
|
### Font Families
|
|
|
|
```css
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
```
|
|
|
|
### Font Sizes
|
|
|
|
| Token | Wert | px |
|
|
|---|---|---|
|
|
| `--text-xs` | `0.75rem` | 12px |
|
|
| `--text-sm` | `0.875rem` | 14px |
|
|
| `--text-base` | `1rem` | 16px |
|
|
| `--text-md` | `1.125rem` | 18px |
|
|
| `--text-lg` | `1.25rem` | 20px |
|
|
| `--text-xl` | `1.5rem` | 24px |
|
|
| `--text-2xl` | `1.875rem` | 30px |
|
|
| `--text-3xl` | `2.25rem` | 36px |
|
|
| `--text-4xl` | `3rem` | 48px |
|
|
|
|
### Font Weights
|
|
|
|
```css
|
|
--weight-normal: 400
|
|
--weight-medium: 500
|
|
--weight-semibold: 600
|
|
--weight-bold: 700
|
|
```
|
|
|
|
### Line Heights
|
|
|
|
```css
|
|
--leading-tight: 1.25
|
|
--leading-snug: 1.375
|
|
--leading-normal: 1.5
|
|
--leading-relaxed: 1.625
|
|
```
|
|
|
|
---
|
|
|
|
## Spacing (4px-Grid)
|
|
|
|
| Token | Wert | px |
|
|
|---|---|---|
|
|
| `--space-1` | `0.25rem` | 4px |
|
|
| `--space-2` | `0.5rem` | 8px |
|
|
| `--space-3` | `0.75rem` | 12px |
|
|
| `--space-4` | `1rem` | 16px |
|
|
| `--space-5` | `1.25rem` | 20px |
|
|
| `--space-6` | `1.5rem` | 24px |
|
|
| `--space-8` | `2rem` | 32px |
|
|
| `--space-10` | `2.5rem` | 40px |
|
|
| `--space-12` | `3rem` | 48px |
|
|
| `--space-16` | `4rem` | 64px |
|
|
| `--space-20` | `5rem` | 80px |
|
|
| `--space-24` | `6rem` | 96px |
|
|
|
|
---
|
|
|
|
## Border Radius
|
|
|
|
| Token | Wert | px |
|
|
|---|---|---|
|
|
| `--radius-sm` | `0.25rem` | 4px |
|
|
| `--radius-md` | `0.375rem` | 6px |
|
|
| `--radius-lg` | `0.5rem` | 8px |
|
|
| `--radius-xl` | `0.75rem` | 12px |
|
|
| `--radius-2xl` | `1rem` | 16px |
|
|
| `--radius-full` | `9999px` | Vollständig rund |
|
|
|
|
---
|
|
|
|
## Schatten
|
|
|
|
```css
|
|
--shadow-xs /* Minimal, z.B. kleine Karten */
|
|
--shadow-sm /* Standard-Karten */
|
|
--shadow-md /* Erhöhte Elemente */
|
|
--shadow-lg /* Dropdowns, Modals */
|
|
--shadow-xl /* Große Overlays */
|
|
--shadow-focus /* Fokus-Ring: 0 0 0 3px rgba(accent, 0.25) */
|
|
```
|
|
|
|
---
|
|
|
|
## Übergänge
|
|
|
|
```css
|
|
--duration-fast: 120ms
|
|
--duration-base: 200ms /* Standard */
|
|
--duration-slow: 300ms
|
|
|
|
--ease: cubic-bezier(0.4, 0, 0.2, 1) /* Standard */
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1)
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1)
|
|
|
|
--transition: var(--duration-base) var(--ease) /* Kombination für transition-Shorthand */
|
|
```
|
|
|
|
---
|
|
|
|
## Layout-Konstanten
|
|
|
|
### Container Breakpoints
|
|
|
|
| Token | Wert | px |
|
|
|---|---|---|
|
|
| `--container-sm` | `40rem` | 640px |
|
|
| `--container-md` | `48rem` | 768px |
|
|
| `--container-lg` | `64rem` | 1024px |
|
|
| `--container-xl` | `80rem` | 1280px (default) |
|
|
| `--container-2xl` | `90rem` | 1440px |
|
|
|
|
### Strukturelle Maße
|
|
|
|
```css
|
|
--nav-height: 3.5rem /* 56px — Höhe der Topnav */
|
|
--sidebar-width: 16rem /* 256px — Breite der Sidebar */
|
|
```
|
|
|
|
### Z-Index Skala
|
|
|
|
| Token | Wert | Verwendung |
|
|
|---|---|---|
|
|
| `--z-base` | `0` | Normal |
|
|
| `--z-raised` | `10` | Leicht erhöht |
|
|
| `--z-dropdown` | `100` | Dropdowns |
|
|
| `--z-sticky` | `200` | Sticky Elemente (Topnav) |
|
|
| `--z-overlay` | `300` | Overlays |
|
|
| `--z-modal` | `400` | Modals |
|
|
| `--z-toast` | `500` | Toast-Benachrichtigungen |
|
|
|
|
---
|
|
|
|
## Dark Mode
|
|
|
|
Aktivierung via `data-theme`-Attribut auf `<html>`:
|
|
|
|
```html
|
|
<html data-theme="light"> <!-- oder "dark" -->
|
|
```
|
|
|
|
Nur semantische Aliases werden im Dark Mode überschrieben — die Palette bleibt unverändert. Toggle-Logik inkl. `localStorage`-Persistenz und `prefers-color-scheme`-Erkennung ist in `base.html` fertig implementiert.
|
|
|
|
**Dark Mode Overrides (Beispiele):**
|
|
```css
|
|
[data-theme="dark"] {
|
|
--bg: var(--color-black); /* #0d0f12 */
|
|
--surface: #161920;
|
|
--text: var(--color-gray-100);
|
|
--accent: var(--color-accent-400); /* Heller für besseren Kontrast */
|
|
}
|
|
```
|