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`.
|