The /tools/verfahrensablauf?view=timeline page (and the columns-view
mirror via `.fr-col-item--*` modifiers) had hardcoded light backgrounds
that survived a dark-mode flip. Root cause: four undefined custom
properties (`--color-bg-soft`, `--color-border-soft`, `--color-accent-bg`,
`--brand-lime`) consumed by the `.timeline-*` and adjacent
`.event-card-choices-*` rules, each with a hardcoded hex / RGBA fallback.
Since neither :root nor :root[data-theme='dark'] defines those tokens,
every consumer fell through to the light fallback in both themes —
leaving the conditional-row bg, the popover surface, the option-button
bg, the chip-skipped bg, and the popover block-separator border stuck on
near-white in dark mode. Earlier t-paliad-326 covered the new
Fristenrechner overhaul CSS only; the timeline view styles are a
separate block (~L3337-3810 in `frontend/src/styles/global.css`) and
were not touched.
Migrate every consumer to the existing dual-theme tokens already used
across paliad. Same approach m approved for t-paliad-326, no new tokens
introduced (all reuse):
- Card / popover surfaces (`.event-card-choices-popover`,
`.event-card-choices-option`) → `--color-surface` (white light /
card-tint dark) so the popover reads as raised above the body in
both themes.
- Subtle raised surface for conditional row, skipped chip, option
hover (`.timeline-item--conditional .timeline-content`,
`.fr-col-item--conditional`, `.event-card-choices-chip-part--skipped`,
`.event-card-choices-option:hover/:focus-visible`) →
`--color-surface-muted`. **This is the visible bug fix m flagged.**
- Lime-tint backdrops (`.timeline-context-note` bg,
`.event-card-choices-caret:hover/:focus-visible`) →
`--color-bg-lime-tint` (lime-alpha 0.10 light / 0.12 dark).
- Active-option chip bg (`.event-card-choices-chip-part`) →
`--color-accent-soft-bg`.
- Lime accent borders / fills (`.timeline-context-note` left border,
`.timeline-date--overridden`, `.frist-date-edit-input`,
`.event-card-choices-unhide-btn`, `.event-card-choices-option--active`)
→ `--color-accent` / `--color-accent-fg`. Drops the
legacy `#c6f41c` fallback that doesn't match the current brand
(`--hlc-lime: #BFF355`).
- Neutral borders (`.event-card-choices-caret`,
`.timeline-item--hidden .timeline-content`, `.fr-col-item--hidden`,
`.timeline-item--conditional .timeline-content`,
`.event-card-choices-popover`, `.event-card-choices-option`,
`.event-card-choices-block + .event-card-choices-block`) →
`--color-border` (warm cream-derived light / cream-alpha dark).
- Popover shadow `rgba(0, 0, 0, 0.12)` → `var(--shadow-md)`
(auto-deepens to `rgba(0, 0, 0, 0.45)` in dark).
- Status red (`.event-card-choices-error`) → `--status-red-fg`
(defined in both themes; old `#b00020` fallback unreachable).
Zero new tokens introduced — every replacement uses a token already
shipped in both :root and :root[data-theme='dark']. Verified by
mounting `frontend/dist/assets/global.css` against a representative
static DOM (context-note banner, every timeline-item variant —
conditional / skipped / hidden / overridden-date / mandatory —
popover with active/inactive options, unhide button, error message,
all four party-badge stances) and toggling `data-theme` between
light and dark: conditional row bg flips from grey to muted-cream-on-
midnight, popover lifts off the body via `--shadow-md`, every chip and
border stays legible in both themes.
bun build + bun test (256 pass) + go vet clean.
mAi
c48fa93e3d