mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 19:21:10 +02:00
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:
parent
8a5d200c84
commit
fc028fa8f0
4 changed files with 246 additions and 2 deletions
|
|
@ -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 |
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue