fix(dashboard): F-U-004 define :root CSS-variable palette so per-page fallbacks unreachable

Five dashboard pages (dead-letters, files, users, invitations, queues)
reference CSS custom properties like var(--text-muted, #666),
var(--bg-secondary, #f5f5f5), var(--border, #e0e0e0),
var(--color-link) that the dashboard never defined — so users saw the
light-theme fallbacks: #666 text on #f5f5f5 backgrounds, borders that
disappeared, a white-on-red error banner. The dashboard otherwise
renders with the slate-900 dark palette.

Define a :root token set in routes/+layout.svelte using the slate
shades already used inline elsewhere. Per-page styles stop hitting
their fallbacks; the dark theme renders consistently everywhere.

No per-page CSS touched — the tokens cover every fallback already in
use (audited via grep across the five pages cited in the AUDIT.md).
Adds a few extra tokens (danger/success/warning) so future pages have a
single source of truth instead of inline hex.

`npm run check` shows no new errors (the pre-existing 149 errors in
tests/e2e/* from missing @playwright/test were documented out-of-scope
in the AUDIT.md methodology notes).

AUDIT.md anchor: F-U-004.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-06-07 20:02:06 +02:00
parent e29ac1c03d
commit ae5cf80426

View File

@@ -72,11 +72,33 @@
</div>
<style>
:global(:root) {
/* Slate-based dark palette — the source of truth for tokens that
per-page styles reference via `var(--name, fallback)`. Without
these defaults the fallbacks (e.g. #666 muted text on #f5f5f5
secondary background) render light-on-dark and bury content
on dead-letters, files, users, invitations and queues pages. */
--bg-primary: #0f172a;
--bg-secondary: #0b1220;
--bg-elevated: #1e293b;
--text-primary: #e2e8f0;
--text-muted: #94a3b8;
--text-subtle: #64748b;
--border: #334155;
--border-subtle: #1e293b;
--color-link: #38bdf8;
--color-muted: #94a3b8;
--color-danger: #f87171;
--color-danger-bg: #7f1d1d;
--color-success: #34d399;
--color-warning: #fbbf24;
}
:global(html, body) {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
background: #0f172a;
color: #e2e8f0;
background: var(--bg-primary);
color: var(--text-primary);
}
.shell {