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.
This commit is contained in:
parent
fbb8def9ce
commit
00469c4cc0
13 changed files with 566 additions and 48 deletions
|
|
@ -1,3 +1,9 @@
|
|||
/* whynot-design tokens & semantic element styles (pinned via
|
||||
scripts/sync-whynot-design.sh; see .whynot-design-ref).
|
||||
Must precede the Tailwind import so the @import url(...) for IBM Plex
|
||||
ends up at the top of the generated bundle. */
|
||||
@import "./vendor/whynot-design/colors_and_type.css";
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Explicit content sources. Without these, Tailwind's automatic detection
|
||||
|
|
@ -7,44 +13,88 @@
|
|||
template dirs copied in the Dockerfile `assets` stage. */
|
||||
@source "../../vergabe_teilnahme/templates";
|
||||
|
||||
/* whynot tokens → Tailwind theme. Exposes utilities like bg-paper, text-ink,
|
||||
border-line, bg-paper-2, text-ink-3, … */
|
||||
@theme {
|
||||
--color-brand-50: #f0f4ff;
|
||||
--color-brand-100: #dce7ff;
|
||||
--color-brand-500: #3b5bdb;
|
||||
--color-brand-600: #2f4ac7;
|
||||
--color-brand-700: #2541b2;
|
||||
--color-brand-900: #152d99;
|
||||
--color-ink: #0A0A0A;
|
||||
--color-ink-2: #1F1F1F;
|
||||
--color-ink-3: #5C5C5C;
|
||||
--color-ink-4: #8A8A8A;
|
||||
--color-ink-5: #B5B5B3;
|
||||
--color-line: #E5E5E2;
|
||||
--color-line-strong: #C9C9C5;
|
||||
--color-line-soft: #F0F0EC;
|
||||
--color-paper: #FFFFFF;
|
||||
--color-paper-2: #FAFAF7;
|
||||
--color-paper-3: #F4F4EF;
|
||||
--color-hi: #FFE14A;
|
||||
--color-hi-2: #FFD400;
|
||||
--color-hi-ink: #1A1500;
|
||||
|
||||
/* Backwards-compat aliases for legacy `brand-*` utility usage in templates.
|
||||
Keeps Phase 1 a tokens-only swap; templates can migrate to ink/paper at
|
||||
leisure. Map blue-brand scale onto the whynot ink ramp. */
|
||||
--color-brand-50: #FAFAF7;
|
||||
--color-brand-100: #F4F4EF;
|
||||
--color-brand-500: #0A0A0A;
|
||||
--color-brand-600: #1F1F1F;
|
||||
--color-brand-700: #0A0A0A;
|
||||
--color-brand-900: #0A0A0A;
|
||||
}
|
||||
|
||||
/* Off-spec — vergabe-local until whynot-design defines a canonical
|
||||
destructive color. See history/2026-05-23-whynot-design-cross-framework-analysis.md
|
||||
§4 for context. */
|
||||
:root {
|
||||
--danger: #B22222;
|
||||
--danger-fg: #FFFFFF;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
/* German-app base resets */
|
||||
html {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-family: var(--ff-sans, ui-sans-serif), system-ui, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.card { @apply bg-white rounded-xl border border-slate-200 shadow-sm p-6; }
|
||||
.btn-primary { @apply bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition-colors; }
|
||||
.btn-secondary { @apply bg-white text-slate-700 border border-slate-300 px-4 py-2 rounded-lg hover:bg-slate-50; }
|
||||
.btn-danger { @apply bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700; }
|
||||
.btn-ghost { @apply text-slate-600 px-3 py-2 rounded-lg hover:bg-slate-100; }
|
||||
.field-row { @apply grid grid-cols-3 gap-4 py-3 border-b border-slate-100 last:border-0; }
|
||||
.field-label { @apply text-sm font-medium text-slate-500 col-span-1; }
|
||||
.field-value { @apply text-sm text-slate-900 col-span-2; }
|
||||
.phase-badge { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold; }
|
||||
.phase-todo { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-slate-200 text-slate-500; }
|
||||
.phase-active { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-brand-500 text-white; }
|
||||
.phase-done { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-green-500 text-white; }
|
||||
.phase-warn { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-amber-400 text-amber-900; }
|
||||
.section-title { @apply text-base font-semibold text-slate-900 mb-4; }
|
||||
.page-title { @apply text-2xl font-bold text-slate-900; }
|
||||
.form-input { @apply w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent; }
|
||||
.form-label { @apply block text-sm font-medium text-slate-700 mb-1; }
|
||||
.table-base { @apply w-full text-sm text-left; }
|
||||
.table-header { @apply bg-slate-50 text-slate-500 font-medium text-xs uppercase tracking-wide; }
|
||||
.table-row { @apply border-t border-slate-100 hover:bg-slate-50 transition-colors; }
|
||||
.sidebar-link { @apply flex items-center px-3 py-2 rounded-lg text-sm text-slate-700 hover:bg-slate-100 transition-colors; }
|
||||
.sidebar-link-active { @apply bg-brand-50 text-brand-700 font-medium; }
|
||||
.sidebar-section-btn { @apply w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wide hover:text-slate-700; }
|
||||
/* Cards / sheets — whynot: no shadow, hairline border */
|
||||
.card { @apply bg-paper rounded border border-line p-6; }
|
||||
|
||||
/* Buttons — whynot: 3 variants + off-spec danger */
|
||||
.btn-primary { @apply bg-ink text-paper px-4 py-2 rounded hover:bg-ink-2 transition-colors; }
|
||||
.btn-secondary { @apply bg-paper text-ink border border-line px-4 py-2 rounded hover:bg-paper-2 transition-colors; }
|
||||
.btn-ghost { @apply text-ink-3 px-3 py-2 rounded hover:bg-paper-2; }
|
||||
.btn-danger { background: var(--danger); color: var(--danger-fg); @apply px-4 py-2 rounded transition-colors; }
|
||||
.btn-danger:hover { filter: brightness(0.92); }
|
||||
|
||||
/* Field-row — label/value grid */
|
||||
.field-row { @apply grid grid-cols-3 gap-4 py-3 border-b border-line-soft last:border-0; }
|
||||
.field-label { @apply text-sm font-medium text-ink-3 col-span-1; }
|
||||
.field-value { @apply text-sm text-ink col-span-2; }
|
||||
|
||||
/* Phase indicators — vergabe semantics (todo/active/done/warn), translated
|
||||
into whynot palette. `phase-warn` uses --hi (annotation yellow). */
|
||||
.phase-badge { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold; }
|
||||
.phase-todo { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-paper-3 text-ink-4; }
|
||||
.phase-active { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-ink text-paper; }
|
||||
.phase-done { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-ink-3 text-paper; }
|
||||
.phase-warn { background: var(--hi); color: var(--hi-ink); @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold; }
|
||||
|
||||
/* Titles / sections */
|
||||
.section-title { @apply text-base font-semibold text-ink mb-4; }
|
||||
.page-title { @apply text-2xl font-medium text-ink tracking-tight; }
|
||||
|
||||
/* Forms */
|
||||
.form-input { @apply w-full rounded border border-line px-3 py-2 text-sm bg-paper focus:outline-none focus:border-ink transition-colors; }
|
||||
.form-label { @apply block text-sm font-medium text-ink-2 mb-1; }
|
||||
|
||||
/* Tables */
|
||||
.table-base { @apply w-full text-sm text-left; }
|
||||
.table-header { @apply bg-paper-2 text-ink-3 font-medium text-xs uppercase tracking-wide; }
|
||||
.table-row { @apply border-t border-line-soft hover:bg-paper-2 transition-colors; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar-link { @apply flex items-center px-3 py-2 rounded text-sm text-ink-2 hover:bg-paper-2 transition-colors; }
|
||||
.sidebar-link-active { @apply bg-paper text-ink font-medium; box-shadow: inset 0 0 0 1px var(--line); }
|
||||
.sidebar-section-btn { @apply w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-ink-4 uppercase tracking-wide hover:text-ink-2; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue