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.
100 lines
4.6 KiB
CSS
100 lines
4.6 KiB
CSS
/* 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
|
|
depends on the build CWD finding the templates — which fails in the Docker
|
|
asset stage (it only copies static/src), producing a CSS with no utility
|
|
classes and badly oversized SVG icons. Keep these paths in sync with the
|
|
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-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 {
|
|
html {
|
|
font-family: var(--ff-sans, ui-sans-serif), system-ui, sans-serif;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* 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; }
|
|
}
|