Files

tegwick 00469c4cc0 Adopt whynot-design tokens (WP-0017 Phase 1)

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.

2026-05-23 21:52:59 +02:00

2.2 KiB

Raw Blame History

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.

2.2 KiB Raw Blame History Unescape Escape