Modals transparent: CSS-Token --color-surface ist nirgends definiert #120

New Issue

fable-5 · 2026-07-15T10:53:58+02:00

fable-5 commented

2026-07-15 10:53:58 +02:00

Bug (gefunden beim Vault-Import-Test auf Prod, Screenshot Stefans vom 14.07. abends)

.modal { background: var(--color-surface); } (apps/web/src/styles/base.css, eingeführt mit #109) referenziert das Token --color-surface, das in tokens.css nie definiert wird und an dieser Stelle keinen Fallback hat. Die Deklaration wird vom Browser verworfen → alle .modal-Dialoge sind durchsichtig (Vault-Import, „Verschieben nach…", Lösch-Dialog); der Seiteninhalt scheint durch, nur das Overlay dimmt.

Weitere fallback-lose Verwendungen: base.css:183, 1762, 1887. Drei Stellen nutzen bereits var(--color-surface, #fff) und zeigen die Intention.

Fix: --color-surface: #ffffff; im :root-Block von apps/web/src/styles/tokens.css definieren — heilt alle 7 Verwendungen ohne Selektor-Änderung. Regression-Pin im import-vault-e2e-Pack (toHaveCSS('background-color', …)).

**Bug** (gefunden beim Vault-Import-Test auf Prod, Screenshot Stefans vom 14.07. abends) `.modal { background: var(--color-surface); }` (`apps/web/src/styles/base.css`, eingeführt mit #109) referenziert das Token `--color-surface`, das in `tokens.css` **nie definiert wird** und an dieser Stelle keinen Fallback hat. Die Deklaration wird vom Browser verworfen → **alle `.modal`-Dialoge sind durchsichtig** (Vault-Import, „Verschieben nach…", Lösch-Dialog); der Seiteninhalt scheint durch, nur das Overlay dimmt. Weitere fallback-lose Verwendungen: base.css:183, 1762, 1887. Drei Stellen nutzen bereits `var(--color-surface, #fff)` und zeigen die Intention. **Fix:** `--color-surface: #ffffff;` im `:root`-Block von `apps/web/src/styles/tokens.css` definieren — heilt alle 7 Verwendungen ohne Selektor-Änderung. Regression-Pin im import-vault-e2e-Pack (`toHaveCSS('background-color', …)`).

fable-5 added this to the M14 — UI-Überarbeitung nach Vault-Import-Test milestone 2026-07-15 10:53:58 +02:00

fable-5 added the

frontend

label 2026-07-15 10:53:58 +02:00

fable-5 referenced this issue from a commit

2026-07-15 11:30:33 +02:00

Define the missing --color-surface token; modals were transparent

fable-5 closed this issue

2026-07-15 11:30:33 +02:00

fable-5 commented

2026-07-15 11:43:42 +02:00

Erledigt in e356d82.

--color-surface: #ffffff ist jetzt in tokens.css definiert (Kommentar erklärt die Historie) — damit heilen alle 7 Verwendungen auf einmal, kein Selektor wurde angefasst. Der import-vault-e2e-Pack pinnt den deckenden Dialog-Hintergrund (toHaveCSS('background-color', 'rgb(255, 255, 255)')) gegen Regressionen.

Sichtprüfung am lokalen Stack: Vault-Import-, „Verschieben nach…"- und Lösch-Dialog sind wieder deckend. CI grün auf 1781f12.

Erledigt in `e356d82`. `--color-surface: #ffffff` ist jetzt in `tokens.css` definiert (Kommentar erklärt die Historie) — damit heilen alle 7 Verwendungen auf einmal, kein Selektor wurde angefasst. Der import-vault-e2e-Pack pinnt den deckenden Dialog-Hintergrund (`toHaveCSS('background-color', 'rgb(255, 255, 255)')`) gegen Regressionen. Sichtprüfung am lokalen Stack: Vault-Import-, „Verschieben nach…"- und Lösch-Dialog sind wieder deckend. CI grün auf `1781f12`.

Sign in to join this conversation.