style: define missing --bg-elev-3 / --accent-fg CSS variables

--bg-elev-3 was referenced (spinner ring, search-clear hover) but never
defined in either theme, so var(--bg-elev-3) with no fallback produced an
invalid declaration — that's why the busy spinner ring was invisible
until it was switched to --border. Define it as a real elevation step
above --bg-elev-2 in dark (#34343f) and light (#e3e3dd).

Also define --accent-fg (#fff) explicitly instead of relying on the
inline var(--accent-fg, #fff) fallback.

Audited used-vs-defined custom properties: the only remaining "undefined"
one is --strength, which is set at runtime by JS on the password-strength
bar (has a 0% fallback) — intentional, not a bug.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-07-03 18:01:57 +01:00
parent 48bb06c029
commit b367d031b5
2 changed files with 3 additions and 0 deletions
+3
View File
@@ -35,6 +35,7 @@ kbd {
--bg: #15151c; --bg: #15151c;
--bg-elev: #1d1d26; --bg-elev: #1d1d26;
--bg-elev-2: #292932; --bg-elev-2: #292932;
--bg-elev-3: #34343f; /* one step above elev-2 — hover / raised bits */
--bg-glass: rgba(29,29,38,0.78); --bg-glass: rgba(29,29,38,0.78);
--border: #353541; --border: #353541;
--border-soft: #25252e; --border-soft: #25252e;
@@ -44,6 +45,7 @@ kbd {
--accent: #06b6d4; --accent: #06b6d4;
--accent-hover: #22d3ee; --accent-hover: #22d3ee;
--accent-soft: rgba(6,182,212,0.12); --accent-soft: rgba(6,182,212,0.12);
--accent-fg: #ffffff; /* text/icon colour on an accent background */
--accent-2: #a78bfa; --accent-2: #a78bfa;
--danger: #f43f5e; --danger: #f43f5e;
--danger-soft: rgba(244,63,94,0.12); --danger-soft: rgba(244,63,94,0.12);
@@ -63,6 +65,7 @@ kbd {
--bg: #f7f7f5; --bg: #f7f7f5;
--bg-elev: #ffffff; --bg-elev: #ffffff;
--bg-elev-2: #efefec; --bg-elev-2: #efefec;
--bg-elev-3: #e3e3dd; /* one step above elev-2 — hover / raised bits */
--bg-glass: rgba(255,255,255,0.92); --bg-glass: rgba(255,255,255,0.92);
--border: #dcdcd7; --border: #dcdcd7;
--border-soft: #ebebe6; --border-soft: #ebebe6;
Binary file not shown.