chore(lint): audit:theme-tokens guard against bare --muted / --theme-* drift

Three naming conventions had drifted through the monorepo (--muted, --theme-*,
--color-*). Only the last is defined in the Mana theme; the others silently
fell back to nothing and stopped tracking theme variants. Today's cleanup
migrated ~100 files, but nothing stopped the drift from creeping back.

- scripts/audit-theme-tokens.mjs scans ~3k source files and fails if any
  references a bare shadcn token or a --theme-* prefix, with an allowlist
  for known-literal module brand colors (news-research, agent templates)
- wire into pnpm script and lint-staged (runs once per commit touching
  *.{svelte,css}, ignores per-file args)
- design-ux.md guideline: fix stale --color-destructive entry (Mana uses
  --color-error), add explicit "never bare tokens" warning with examples

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-16 00:58:13 +02:00
parent 8a5d200c84
commit fc028fa8f0
4 changed files with 246 additions and 2 deletions

View file

@ -114,10 +114,32 @@ background: white;
| `--color-muted-foreground` | Sekundärtext, Platzhalter |
| `--color-surface` | Hintergründe |
| `--color-border` | Rahmen, Trennlinien |
| `--color-destructive` | Lösch-Aktionen, Fehler |
| `--color-error` | Lösch-Aktionen, Fehler |
| `--color-success` | Erfolgsmeldungen |
| `--color-warning` | Warnungen |
### ⚠️ Nie bare shadcn-Tokens
Manche Komponenten aus shadcn- oder theme-Vorlagen sprechen bare Token-Namen
an (`--muted`, `--primary`, `--theme-muted`). **Diese existieren im Mana-Theme
nicht** und fallen stumm aus — das Theme-Wechseln wird nicht mehr mitgezogen.
Immer den `--color-*`-Präfix nutzen:
```css
/* Falsch */
background: hsl(var(--muted));
color: var(--foreground, #111);
border: 1px solid var(--theme-border);
/* Richtig */
background: hsl(var(--color-muted));
color: hsl(var(--color-foreground));
border: 1px solid hsl(var(--color-border));
```
Der Audit `pnpm audit:theme-tokens` (läuft auch in `lint-staged`) schlägt
jeden Drift an.
### Dark Mode
Immer beide Modi berücksichtigen:
@ -434,7 +456,7 @@ function handleKeydown(e: KeyboardEvent) {
| Aspekt | Input-Toggle | contenteditable |
| -------------------- | ------------------------------ | ---------------------------- |
| Klicks zum Editieren | 2 (aktivieren + positionieren) | 1 (Cursor an Klick-Position) |
| DOM-Wechsel | `<span>``<input>` | Keiner |
| DOM-Wechsel | `<span>``<input>` | Keiner |
| Mehrzeilig | Braucht `<textarea>` | Nativ |
| Styling | Muss Input an Span anpassen | Gleich |