generated from coulomb/repo-seed
tegwick
00469c4cc0
Replace vergabe's blue brand-* palette with whynot's near-black/paper/yellow visual language. Tokens vendored at static/src/vendor/whynot-design/ (synced from commit 9419f16 via scripts/sync-whynot-design.sh / make sync-whynot-design). main.css imports the vendored CSS first, exposes ink/paper/hi as Tailwind @theme tokens (bg-paper, text-ink, border-line, etc.), and re-tones every component class (.btn-*, .card, .field-row, .phase-*, .form-input, .table-*, .sidebar-*). Border radii drop to whynot's 0-4px; .card loses its shadow. Legacy text-brand-* / bg-brand-* / border-brand-* template references are kept working via @theme aliases that map the old blue scale onto the whynot ink ramp — Phase 1 is tokens-only, no template churn. btn-danger keeps an off-spec red (#B22222) as a local --danger var until upstream defines a canonical destructive color. base.html body class swapped: bg-slate-50 → bg-paper-2 text-ink. Phase 2 (component adoption) deferred until whynot-design ships Lit web components + missing atoms (Card, Modal, Input, Table, Toast). See wiki/DesignSystem.md and history/2026-05-23-whynot-design-cross-framework-analysis.md. Verified: 8/8 e2e tests pass; dev server boots; static/dist/main.css contains no #3b5bdb references. Visual pixel-level verification still pending Bernd's browser walk.
51 lines
2.2 KiB
Markdown
51 lines
2.2 KiB
Markdown
# Design System
|
||
|
||
vergabe-teilnahme nutzt das `whynot-design`-System (gitea
|
||
`whynot/whynot-design`) als visuelle Basis.
|
||
|
||
## Phase 1 — Tokens + CSS (aktiv, ab WP-0017)
|
||
|
||
- Vendored CSS unter `static/src/vendor/whynot-design/`.
|
||
- Sync via `make sync-whynot-design` (Skript: `scripts/sync-whynot-design.sh`).
|
||
- Gepinnter Commit steht in `static/src/vendor/whynot-design/.whynot-design-ref`.
|
||
- `static/src/main.css` importiert die Vendor-CSS und mappt die whynot-Tokens
|
||
in den Tailwind-`@theme`-Block: `bg-ink`, `bg-paper`, `text-ink-3`,
|
||
`border-line` usw. sind als Utility-Klassen verfügbar.
|
||
- Legacy `bg-brand-*` / `text-brand-*` Utilities sind weiterhin nutzbar; sie
|
||
sind als Aliasse auf die ink/paper-Skala gemappt, damit Page-Templates
|
||
nicht in einer großen Migration mitgezogen werden müssen.
|
||
|
||
## Phase 2 — Komponenten (offen)
|
||
|
||
Adoption der whynot-Komponenten erfolgt sobald upstream Lit Web Components
|
||
und die fehlenden Atome (`Card`, `Modal`, `Input`, `Table`, `Toast`)
|
||
ausliefert. Eigener Workplan wird zu diesem Zeitpunkt angelegt.
|
||
|
||
## Lokale Abweichungen vom whynot-System
|
||
|
||
Dokumentiert direkt in `static/src/main.css`:
|
||
|
||
- **`.btn-danger`** nutzt ein Off-Spec-Rot (`#B22222`, `--danger`-Variable).
|
||
whynot definiert aktuell keine destruktive Farbe; vergabe-Nutzung erfordert
|
||
sie für Löschen-Aktionen. Wird zurückgebaut, sobald upstream eine
|
||
kanonische Lösung definiert.
|
||
|
||
## Visuelle Hausregeln aus whynot übernommen
|
||
|
||
- Mostly Black & White; gelber Akzent (`--hi: #FFE14A`) nur als Highlighter /
|
||
Stamp / S4-Signal — nie als Button-Fill oder Hero-Hintergrund.
|
||
- 1px-Hairlines (`var(--line)` / `border-line`), großzügiger Weißraum,
|
||
Monospace-Eyebrow-Labels.
|
||
- Keine Schatten auf Cards; nur Popovers bekommen einen weichen 4–12px-Shadow.
|
||
- 0–4px Border-Radius für Cards/Sheets; 8px nur für große Modale; Pill nur
|
||
für Tag-Capsules.
|
||
- IBM Plex Sans / Mono / Serif via Google-Fonts (`@import url(...)` in der
|
||
Vendor-CSS). Build-Container und Browser brauchen Internet-Zugriff zu
|
||
Google Fonts. Air-gapped Deployment würde self-hosting erfordern.
|
||
|
||
## Hintergrund
|
||
|
||
- Strategie-Analyse + Komponenten-Lücken-Inventar:
|
||
`history/2026-05-23-whynot-design-cross-framework-analysis.md`.
|
||
- Adoption-Workplan: `workplans/WP-0017-whynot-design-tokens.md`.
|