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

fix(verfahrensablauf): dark-mode token migration for timeline view CSS

Browse Source 
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.
This commit is contained in:
mAi
2026-05-27 14:51:15 +02:00
parent 9aee9e4101
commit c48fa93e3d
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3352,10 +3352,10 @@ input[type="range"]::-moz-range-thumb {
.timeline-context-note {
margin: 0 0 1rem;
padding: 0.7rem 0.9rem;
background: rgba(198, 244, 28, 0.10);
border-left: 3px solid var(--brand-lime, #c6f41c);
background: var(--color-bg-lime-tint);
border-left: 3px solid var(--color-accent);
border-radius: 4px;
color: var(--color-text, #222);
color: var(--color-text);
font-size: 0.9rem;
line-height: 1.4;
white-space: pre-line;
@@ -3480,8 +3480,8 @@ input[type="range"]::-moz-range-thumb {
}
.timeline-date--overridden {
color: var(--color-accent-fg, #4d7c0f);
border-bottom: 1px solid var(--color-accent, #c6f41c);
color: var(--color-accent-fg);
border-bottom: 1px solid var(--color-accent);
}
.frist-date-edit-input {
@@ -3489,7 +3489,7 @@ input[type="range"]::-moz-range-thumb {
font-size: 0.85rem;
font-weight: 600;
padding: 0.1rem 0.3rem;
border: 1px solid var(--color-accent, #c6f41c);
border: 1px solid var(--color-accent);
border-radius: 3px;
background: var(--color-bg);
color: var(--color-text);
@@ -3571,7 +3571,7 @@ input[type="range"]::-moz-range-thumb {
width: 22px;
height: 22px;
margin-left: 0.4rem;
border: 1px solid var(--color-border, #d4d4d4);
border: 1px solid var(--color-border);
border-radius: 4px;
background: transparent;
color: var(--color-text-muted);
@@ -3582,7 +3582,7 @@ input[type="range"]::-moz-range-thumb {
.event-card-choices-caret:hover,
.event-card-choices-caret:focus-visible {
background: var(--color-accent-bg, rgba(198, 244, 28, 0.18));
background: var(--color-bg-lime-tint);
color: var(--color-text);
}
@@ -3601,12 +3601,12 @@ input[type="range"]::-moz-range-thumb {
font-weight: 500;
padding: 0.05rem 0.4rem;
border-radius: 99px;
background: var(--color-accent-bg, rgba(198, 244, 28, 0.22));
background: var(--color-accent-soft-bg);
color: var(--color-text);
}
.event-card-choices-chip-part--skipped {
background: var(--color-bg-soft, #f1f1f1);
background: var(--color-surface-muted);
color: var(--color-text-muted);
text-decoration: line-through;
}
@@ -3624,7 +3624,7 @@ input[type="range"]::-moz-range-thumb {
.timeline-item--hidden .timeline-content,
.fr-col-item--hidden {
opacity: 0.55;
border: 1px dotted var(--color-border, #d4d4d4);
border: 1px dotted var(--color-border);
border-radius: 6px;
padding: 0.3rem 0.5rem;
}
@@ -3652,8 +3652,8 @@ input[type="range"]::-moz-range-thumb {
font-size: 0.82rem;
font-weight: 600;
border-radius: 4px;
border: 1px solid var(--color-accent, #c6f41c);
background: var(--color-accent, #c6f41c);
border: 1px solid var(--color-accent);
background: var(--color-accent);
/* Match the active-option pin (lime fg → midnight text) so the
button reads against the lime in both light and dark themes
(m/paliad#123). */
@@ -3664,7 +3664,7 @@ input[type="range"]::-moz-range-thumb {
.event-card-choices-unhide-btn:hover,
.event-card-choices-unhide-btn:focus-visible {
background: var(--color-bg, #fff);
background: var(--color-bg);
color: var(--color-text);
outline: none;
}
@@ -3686,10 +3686,10 @@ input[type="range"]::-moz-range-thumb {
resolves. */
.timeline-item--conditional .timeline-content,
.fr-col-item--conditional {
border: 1px dashed var(--color-border, #d4d4d4);
border: 1px dashed var(--color-border);
border-radius: 4px;
padding: 0.35rem 0.55rem;
background: var(--color-bg-soft, #fafafa);
background: var(--color-surface-muted);
}
.timeline-item--conditional .timeline-name,
@@ -3706,10 +3706,10 @@ input[type="range"]::-moz-range-thumb {
.event-card-choices-popover {
background: var(--color-bg, #fff);
border: 1px solid var(--color-border, #d4d4d4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
box-shadow: var(--shadow-md);
padding: 0.6rem 0.7rem;
min-width: 240px;
max-width: 320px;
@@ -3718,7 +3718,7 @@ input[type="range"]::-moz-range-thumb {
.event-card-choices-block + .event-card-choices-block {
margin-top: 0.7rem;
padding-top: 0.6rem;
border-top: 1px solid var(--color-border-soft, #ececec);
border-top: 1px solid var(--color-border);
}
.event-card-choices-title {
@@ -3738,20 +3738,20 @@ input[type="range"]::-moz-range-thumb {
font-size: 0.78rem;
padding: 0.25rem 0.55rem;
border-radius: 4px;
border: 1px solid var(--color-border, #d4d4d4);
background: var(--color-bg, #fff);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
}
.event-card-choices-option:hover,
.event-card-choices-option:focus-visible {
background: var(--color-bg-soft, #f1f1f1);
background: var(--color-surface-muted);
}
.event-card-choices-option--active {
background: var(--color-accent, #c6f41c);
border-color: var(--color-accent, #c6f41c);
background: var(--color-accent);
border-color: var(--color-accent);
/* Foreground stays midnight in both themes — --color-text would flip
to cream in dark mode and leave the active "Berufung durch …"
chip unreadable on lime (m/paliad#123). */
@@ -3777,7 +3777,7 @@ input[type="range"]::-moz-range-thumb {
.event-card-choices-error {
margin-top: 0.5rem;
font-size: 0.74rem;
color: var(--status-red-fg, #b00020);
color: var(--status-red-fg);
}
.timeline-rule {