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:
@@ -72,11 +72,33 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<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) {
|
:global(html, body) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||||
background: #0f172a;
|
background: var(--bg-primary);
|
||||||
color: #e2e8f0;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shell {
|
.shell {
|
||||||
|
|||||||
Reference in New Issue
Block a user