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.
29 lines
1.3 KiB
JSON
29 lines
1.3 KiB
JSON
{
|
|
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
"spacing": {
|
|
"1": { "value": "4px", "type": "dimension" },
|
|
"2": { "value": "8px", "type": "dimension" },
|
|
"3": { "value": "12px", "type": "dimension" },
|
|
"4": { "value": "16px", "type": "dimension" },
|
|
"5": { "value": "24px", "type": "dimension" },
|
|
"6": { "value": "32px", "type": "dimension" },
|
|
"7": { "value": "48px", "type": "dimension" },
|
|
"8": { "value": "64px", "type": "dimension" },
|
|
"9": { "value": "96px", "type": "dimension" },
|
|
"10": { "value": "128px", "type": "dimension" }
|
|
},
|
|
"radius": {
|
|
"0": { "value": "0px", "type": "dimension" },
|
|
"1": { "value": "2px", "type": "dimension" },
|
|
"2": { "value": "4px", "type": "dimension" },
|
|
"3": { "value": "8px", "type": "dimension" },
|
|
"pill": { "value": "999px", "type": "dimension" }
|
|
},
|
|
"shadow": {
|
|
"0": { "value": "none", "type": "shadow" },
|
|
"1": { "value": "0 1px 0 #E5E5E2", "type": "shadow" },
|
|
"2": { "value": "0 1px 0 #C9C9C5", "type": "shadow" },
|
|
"3": { "value": "0 4px 12px -6px rgba(10,10,10,0.10)", "type": "shadow", "comment": "Floating elements only." }
|
|
}
|
|
}
|