m/paliad
1
0
Fork 0
Code Issues 146 Pull Requests 8 Actions 3 Packages Projects Releases Wiki Activity

feat(t-paliad-108): bucket card palette — Heute orange, Diese Woche yellow

Browse Source 
5-bucket urgency cards (Dashboard "Fristen auf einen Blick" + /deadlines
summary) now share a single source of truth via new --bucket-* tokens:

  Überfällig red → Heute orange → Diese Woche yellow → Nächste Woche green → Erledigt grey

Light values pass WCAG AA-large (3:1+) on the white surface for the
colored count (1.6–2.25rem, 600–700 weight = large text):
  red #ef4444 · orange #c2410c · yellow #a16207 · green #16a34a · grey #6b7280
Dark mode lifts to bright pastels for readability on midnight:
  red #fca5a5 · orange #fb923c · yellow #fbbf24 · green #4ade80 · grey #9ca3af

Both surfaces (.dashboard-card-* and .frist-card-*) now wire through the
same tokens, so the visual hierarchy reads identically. The Überfällig
alarm pulse (saturated red bg + white text, t-paliad-105/106) remains
unchanged. The dashboard-card-green border previously used --color-accent
(brand lime); it now uses --bucket-next-week to match the Fristen page.
This commit is contained in:
m
2026-05-04 13:02:12 +02:00
parent 99af714d65
commit db09f6e7d5
1 changed files with 43 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/styles/global.css
View File

@@ -5130,6 +5130,29 @@ input[type="range"]::-moz-range-thumb {
--frist-amber: #f59e0b;
--frist-green: #22c55e;
--frist-grey: #9ca3af;
/* 5-bucket deadline-summary palette (t-paliad-108). Drives both the
Dashboard "Fristen auf einen Blick" cards (.dashboard-card-*) and
the /deadlines summary cards (.frist-card-*) so the urgency
hierarchy reads identically on both surfaces:
red → orange → yellow → green → grey
Each bucket is visually distinct from its neighbours. Light values
pass WCAG AA-large (3:1+) on the white surface for the colored
count (1.6–2.25rem, 600–700 weight = large text). The Überfällig
alarm rule (saturated red bg + white text) overrides this when
overdue > 0; see the .dashboard-card-alarm block below. */
--bucket-overdue: #ef4444;
--bucket-today: #c2410c;
--bucket-week: #a16207;
--bucket-next-week: #16a34a;
--bucket-done: #6b7280;
}
:root[data-theme="dark"] {
--bucket-overdue: #fca5a5;
--bucket-today: #fb923c;
--bucket-week: #fbbf24;
--bucket-next-week: #4ade80;
--bucket-done: #9ca3af;
}
.fristen-header-actions {
@@ -5189,12 +5212,12 @@ input[type="range"]::-moz-range-thumb {
color: var(--color-text-muted);
}
.frist-card-overdue { border-left-color: var(--frist-red); color: var(--frist-red); }
.frist-card-today { border-left-color: var(--status-amber-fg-2); color: var(--status-amber-fg-2); }
.frist-card-week { border-left-color: var(--frist-amber); color: var(--frist-amber); }
.frist-card-next-week { border-left-color: var(--frist-green); color: var(--frist-green); }
.frist-card-upcoming { border-left-color: var(--frist-green); color: var(--frist-green); }
.frist-card-completed { border-left-color: var(--frist-grey); color: var(--frist-grey); }
.frist-card-overdue { border-left-color: var(--bucket-overdue); color: var(--bucket-overdue); }
.frist-card-today { border-left-color: var(--bucket-today); color: var(--bucket-today); }
.frist-card-week { border-left-color: var(--bucket-week); color: var(--bucket-week); }
.frist-card-next-week { border-left-color: var(--bucket-next-week); color: var(--bucket-next-week); }
.frist-card-upcoming { border-left-color: var(--bucket-next-week); color: var(--bucket-next-week); }
.frist-card-completed { border-left-color: var(--bucket-done); color: var(--bucket-done); }
.fristen-table .frist-col-check {
width: 28px;
@@ -5662,19 +5685,20 @@ input[type="range"]::-moz-range-thumb {
color: var(--color-text-muted);
}
.dashboard-card-red .dashboard-card-count { color: var(--status-red-fg); }
.dashboard-card-red { border-left: 3px solid var(--status-red-fg); }
/* Heute uses the same burnt-amber as .termin-card-today / status-amber-fg-2 —
sits between Überfällig (red) and Diese Woche (amber) on the urgency
gradient, t-paliad-106. */
.dashboard-card-today .dashboard-card-count { color: var(--status-amber-fg); }
.dashboard-card-today { border-left: 3px solid var(--status-amber-fg); }
.dashboard-card-amber .dashboard-card-count { color: var(--status-amber-fg-2); }
.dashboard-card-amber { border-left: 3px solid var(--status-amber-fg-2); }
.dashboard-card-green .dashboard-card-count { color: var(--status-green-fg); }
.dashboard-card-green { border-left: 3px solid var(--color-accent); }
.dashboard-card-done .dashboard-card-count { color: var(--status-neutral-fg-2); }
.dashboard-card-done { border-left: 3px solid var(--status-neutral-fg-2); }
/* 5-bucket urgency cards — palette shared with .frist-card-* via the
--bucket-* tokens (t-paliad-108). The .dashboard-card-amber class name
is historical (was amber-only pre-t-paliad-106); it now drives the
"Diese Woche" yellow bucket. */
.dashboard-card-red .dashboard-card-count { color: var(--bucket-overdue); }
.dashboard-card-red { border-left: 3px solid var(--bucket-overdue); }
.dashboard-card-today .dashboard-card-count { color: var(--bucket-today); }
.dashboard-card-today { border-left: 3px solid var(--bucket-today); }
.dashboard-card-amber .dashboard-card-count { color: var(--bucket-week); }
.dashboard-card-amber { border-left: 3px solid var(--bucket-week); }
.dashboard-card-green .dashboard-card-count { color: var(--bucket-next-week); }
.dashboard-card-green { border-left: 3px solid var(--bucket-next-week); }
.dashboard-card-done .dashboard-card-count { color: var(--bucket-done); }
.dashboard-card-done { border-left: 3px solid var(--bucket-done); }
/* Überfällig alarm — see t-paliad-105 / t-paliad-106.
When overdue > 0 the card flips from a calm border-left accent to a