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

Dark mode: lime-green chip background gives zero contrast with white font (Berufung-durch + likely other selectors) #123

New Issue
Open
opened 2026-05-26 07:35:22 +00:00 by mAi · 1 comment
mAi commented 2026-05-26 07:35:22 +00:00
Collaborator
Copy Link

m's report (2026-05-26 09:34)

Berufung durch …
Klägerseite
Beklagtenseite
beide Parteien

There is some CSS fail - in dark style where the font is white, we cannot have the limegreen background - that gives 0 contrast for the font so we cant read it.

Scope

The selected-chip state uses lime-green (#c6f41c per project CLAUDE.md brand) as background, with white font in dark mode → near-zero contrast (lime is high-luminance). m wants the chip's active-state text colour adjusted for dark mode so the label is readable.

Likely affected:

  • Verfahrensablauf appellant selector (Berufung durch …) — m's exact report
  • Side selector (Klägerseite / Beklagtenseite / Nicht festgelegt) — same chip-cluster pattern
  • Filter-bar axes that use .agenda-chip-active or similar — date-range picker, deadline-status, etc.
  • Any other *-chip-active / *-active background-lime class

What to do

  1. Search frontend/src/styles/global.css for #c6f41c or --accent-lime or .*-active rules that set lime background.
  2. For each affected class, ensure the active-state text colour is dark (e.g. #0a0a0a or var(--bg)) regardless of light/dark theme. The lime accent is high-luminance — it always needs dark text on top.
  3. Verify in both light and dark modes — the active chip should be clearly readable in either.
  4. Audit other components that pair white text with lime backgrounds.

Files most likely touched

  • frontend/src/styles/global.css — chip + active-state colour rules
  • Possibly a CSS variable in a :root / [data-theme="dark"] block

Hard rules

  • Don't change the lime hue itself (it's the brand colour per CLAUDE.md).
  • Don't change non-active states.
  • Test in dark mode (whatever toggles paliad's dark theme — verify on the test data).
  • go build ./... && go test ./internal/... && cd frontend && bun run build clean.
  • Branch: mai/<worker>/darkmode-chip-contrast.

Out of scope

  • Redesigning the colour palette.
  • Removing lime as the accent.
  • Other contrast issues not on chips (file separately if found).

Reporting

mai report completed with branch + SHAs + screenshots-or-equivalent description: open Verfahrensablauf in dark mode → pick an appellant → confirm the active chip text is readable.

## m's report (2026-05-26 09:34) > Berufung durch … > Klägerseite > Beklagtenseite > beide Parteien > > There is some CSS fail - in dark style where the font is white, we cannot have the limegreen background - that gives 0 contrast for the font so we cant read it. ## Scope The selected-chip state uses lime-green (`#c6f41c` per project CLAUDE.md brand) as background, with **white** font in dark mode → near-zero contrast (lime is high-luminance). m wants the chip's active-state text colour adjusted for dark mode so the label is readable. Likely affected: - Verfahrensablauf appellant selector (`Berufung durch …`) — m's exact report - Side selector (Klägerseite / Beklagtenseite / Nicht festgelegt) — same chip-cluster pattern - Filter-bar axes that use `.agenda-chip-active` or similar — date-range picker, deadline-status, etc. - Any other `*-chip-active` / `*-active` background-lime class ## What to do 1. Search `frontend/src/styles/global.css` for `#c6f41c` or `--accent-lime` or `.*-active` rules that set lime background. 2. For each affected class, ensure the active-state text colour is **dark** (e.g. `#0a0a0a` or `var(--bg)`) regardless of light/dark theme. The lime accent is high-luminance — it always needs dark text on top. 3. Verify in both light and dark modes — the active chip should be clearly readable in either. 4. Audit other components that pair white text with lime backgrounds. ## Files most likely touched - `frontend/src/styles/global.css` — chip + active-state colour rules - Possibly a CSS variable in a `:root` / `[data-theme="dark"]` block ## Hard rules - Don't change the lime hue itself (it's the brand colour per CLAUDE.md). - Don't change non-active states. - Test in dark mode (whatever toggles paliad's dark theme — verify on the test data). - `go build ./... && go test ./internal/... && cd frontend && bun run build` clean. - Branch: `mai/<worker>/darkmode-chip-contrast`. ## Out of scope - Redesigning the colour palette. - Removing lime as the accent. - Other contrast issues not on chips (file separately if found). ## Reporting `mai report completed` with branch + SHAs + screenshots-or-equivalent description: open Verfahrensablauf in dark mode → pick an appellant → confirm the active chip text is readable.
mAi self-assigned this 2026-05-26 07:35:22 +00:00
mAi commented 2026-05-26 07:46:31 +00:00
Author
Collaborator
Copy Link

Fixed in 18d2e74 on branch mai/hermes/gitster-dark-mode-fix.

Root cause

Six CSS rules paired a lime background (var(--color-accent)) with color: var(--color-text) (or var(--color-text, #…) fallbacks). --color-text is midnight in light mode but flips to cream in dark mode — so the active chip rendered cream-on-lime, near-zero contrast.

The design already declares a token for this: --color-accent-dark is defined to stay midnight in both themes precisely because it's the WCAG-AA foreground for the lime brand colour (see :root line 44 + :root[data-theme="dark"] line 172 in frontend/src/styles/global.css). All correctly-contrasting active states in the codebase already use it (.agenda-chip-active, .proceeding-btn.active, .filter-pill.active, .streitwert-presets button.active, the .filter-bar-segment chip, …).

Fixes

All switched to color: var(--color-accent-dark):

Selector Surface Line
.event-card-choices-option--active Berufung durch … popover (m's primary report) 3578
.fristen-row.is-active .fristen-row-num Fristenrechner row-number badge when active 1917
.form-hint-badge Auto-fill hint badge (e.g. "AUTO") 7990
.paliadin-widget-send-btn Paliadin chat send button 15916
.smart-timeline-anchor-submit Smart-timeline anchor "Setzen" button 16530
.admin-rules-chip.active Admin rules filter chip 17468

The .event-card-choices-option--active rule is the one m saw — the popover that fires from the per-event "Berufung durch …" caret on Verfahrensablauf cards (choices.appellant.{title,claimant,defendant,both,none} in i18n.ts).

Audit

Full audit script over global.css confirmed:

  • All other lime-background rules either already use --color-accent-dark, an explicit dark hex (#000, #1c1917), or apply to text-less elements (::before/::after markers, dots, progress fills).
  • Translucent-lime backgrounds (rgb(var(--hlc-lime-rgb) / 0.06–0.18) etc.) are unaffected — the lime tint never lifts the underlying surface to a contrast hazard.
  • Lime hue (#BFF355) and non-active states untouched per scope.

Verification

Built the frontend, then loaded the compiled global.css into a standalone harness with all six selectors rendered side-by-side, in both data-theme="dark" and data-theme="light":

  • Dark mode: "Klägerseite" (active Berufung-durch chip), "12" (active Frist-num), "AUTO" (form-hint badge), "Setzen" (anchor submit), "Aktive Regel" (admin-rules chip) and the paliadin arrow are all clearly readable midnight-on-lime.
  • Light mode: unchanged — already midnight-on-lime, still midnight-on-lime.

Builds:

  • go build ./... ✅
  • go test ./internal/... ✅
  • cd frontend && bun run build ✅
  • cd frontend && bun test ✅ (169 pass)

Commit

18d2e74 — fix(styles): dark-mode contrast on lime-active chips (t-paliad-291)

Fixed in [`18d2e74`](https://mgit.msbls.de/m/paliad/commit/18d2e74) on branch `mai/hermes/gitster-dark-mode-fix`. ## Root cause Six CSS rules paired a lime background (`var(--color-accent)`) with `color: var(--color-text)` (or `var(--color-text, #…)` fallbacks). `--color-text` is midnight in light mode but flips to **cream** in dark mode — so the active chip rendered cream-on-lime, near-zero contrast. The design already declares a token for this: `--color-accent-dark` is defined to stay midnight in **both** themes precisely because it's the WCAG-AA foreground for the lime brand colour (see `:root` line 44 + `:root[data-theme="dark"]` line 172 in `frontend/src/styles/global.css`). All correctly-contrasting active states in the codebase already use it (`.agenda-chip-active`, `.proceeding-btn.active`, `.filter-pill.active`, `.streitwert-presets button.active`, the `.filter-bar-segment` chip, …). ## Fixes All switched to `color: var(--color-accent-dark)`: | Selector | Surface | Line | |---|---|---| | `.event-card-choices-option--active` | **Berufung durch … popover** (m's primary report) | 3578 | | `.fristen-row.is-active .fristen-row-num` | Fristenrechner row-number badge when active | 1917 | | `.form-hint-badge` | Auto-fill hint badge (e.g. "AUTO") | 7990 | | `.paliadin-widget-send-btn` | Paliadin chat send button | 15916 | | `.smart-timeline-anchor-submit` | Smart-timeline anchor "Setzen" button | 16530 | | `.admin-rules-chip.active` | Admin rules filter chip | 17468 | The `.event-card-choices-option--active` rule is the one m saw — the popover that fires from the per-event "Berufung durch …" caret on Verfahrensablauf cards (`choices.appellant.{title,claimant,defendant,both,none}` in `i18n.ts`). ## Audit Full audit script over `global.css` confirmed: - All other lime-background rules either already use `--color-accent-dark`, an explicit dark hex (`#000`, `#1c1917`), or apply to text-less elements (`::before`/`::after` markers, dots, progress fills). - Translucent-lime backgrounds (`rgb(var(--hlc-lime-rgb) / 0.06–0.18)` etc.) are unaffected — the lime tint never lifts the underlying surface to a contrast hazard. - Lime hue (`#BFF355`) and non-active states untouched per scope. ## Verification Built the frontend, then loaded the compiled `global.css` into a standalone harness with all six selectors rendered side-by-side, in both `data-theme="dark"` and `data-theme="light"`: - **Dark mode:** "Klägerseite" (active Berufung-durch chip), "12" (active Frist-num), "AUTO" (form-hint badge), "Setzen" (anchor submit), "Aktive Regel" (admin-rules chip) and the paliadin arrow are all clearly readable midnight-on-lime. - **Light mode:** unchanged — already midnight-on-lime, still midnight-on-lime. Builds: - `go build ./...` ✅ - `go test ./internal/...` ✅ - `cd frontend && bun run build` ✅ - `cd frontend && bun test` ✅ (169 pass) ## Commit [`18d2e74`](https://mgit.msbls.de/m/paliad/commit/18d2e74) — `fix(styles): dark-mode contrast on lime-active chips (t-paliad-291)`
mAi added the
done
 label 2026-05-26 07:46:37 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
deferred
Parked — not pursuing now, may un-park later
done
Work completed by an agent; awaiting m to close
No Label
done
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/paliad#123
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?