45 lines
1.9 KiB
Markdown
45 lines
1.9 KiB
Markdown
# Prompt: Neues Design-Token hinzufügen
|
|
|
|
Verwende diesen Prompt wenn du einen neuen Wert in `tokens.css` einführst.
|
|
Tokens sind die einzige Source of Truth — kein Hardcoding in Komponenten oder Utilities.
|
|
|
|
---
|
|
|
|
## Vorbereitung
|
|
|
|
Bevor du anfängst:
|
|
- Prüfe ob ein vorhandener Token den Bedarf bereits deckt (z.B. `--surface-raised` statt neuem `--card-bg`)
|
|
- Prüfe ob ein semantischer Alias eines Rohwerts ausreicht (z.B. `--accent-subtle` statt neuem `--highlight-bg`)
|
|
- Entscheide: Rohpalette (`--color-xxx-500`) oder semantischer Alias (`--surface-interactive`)?
|
|
- Rohpaletten-Tokens gehören in die Farbpaletten-Sektion
|
|
- Semantische Aliases gehören in `:root` (Light) **und** `[data-theme="dark"]` (Dark) — beide müssen gepflegt werden
|
|
|
|
---
|
|
|
|
## Checkliste
|
|
|
|
### 1. Token in `tokens.css`
|
|
- Einordnen unter dem passenden `/* === ABSCHNITT === */`-Header
|
|
- Semantische Aliases: in `:root` **und** `[data-theme="dark"]` eintragen
|
|
- Naming: `--kategorie-name` (z.B. `--color-brand-500`, `--surface-interactive`, `--space-18`)
|
|
- Kein direktes Verwenden von Rohpaletten-Tokens in Komponenten — immer über semantische Alias
|
|
|
|
### 2. `.opencode/skills/references/tokens.md` aktualisieren
|
|
- Token in der passenden Kategorie mit Wert und Verwendungszweck dokumentieren
|
|
- Dark-Mode-Wert ebenfalls eintragen falls abweichend
|
|
|
|
### 3. `.opencode/skills/SKILL.md` — Kurzübersicht prüfen
|
|
- Falls der Token für häufige Aufgaben relevant ist: in der Token-Kurzübersicht ergänzen
|
|
|
|
### 4. Sofort verwenden
|
|
- Vorhandene Stellen im CSS identifizieren, die denselben Wert hardcoded haben
|
|
- Diese Stellen auf den neuen Token umstellen
|
|
|
|
---
|
|
|
|
## Nicht erlaubt
|
|
|
|
- Rohpaletten-Tokens direkt in `components.css` oder `utilities.css` verwenden (`var(--color-accent-500)` → immer `var(--accent)`)
|
|
- Token mit identischem Wert wie ein bereits vorhandener Token
|
|
- Semantischer Alias ohne Dark-Mode-Gegenstück in `[data-theme="dark"]`
|
|
- Token ohne Eintrag in `references/tokens.md`
|