fix(pwa): give the dark topnav its own button skin

[ralyodio]

The bug

.btn in apps/pwa/src/lib/html.mjs is skinned for the light page ground — white fill, ink text, light border. The topnav rail is dark (--rail:#101418), and it had no button variant of its own, so those light-mode buttons were dropped straight onto it.

Two distinct symptoms, matching the report ("washed out", "wrong theme color", "no contrast"):

1. Settings is invisible. .bar a{color:var(--rail-text)} has specificity (0,1,1); .btn's color is (0,1,0). So .bar a wins, and <a class="btn" href="/settings">Settings</a> renders #f6f7f4 text on the #ffffff button fill:

1.08:1 — below even the 3:1 large-text floor. Effectively unreadable.

2. Sign out is the wrong theme. It's a <button>, not an <a>, so it keeps ink text and stays legible — but it's a white light-mode chip sitting on a dark bar.

Confirmed live: curl https://app.logicsrc.com/ serves exactly this CSS.

The fix

A rail-scoped button skin, added right after the existing .bar .brand .app rule. Every selector is .bar-scoped, so body buttons are untouched.

	before	after
Settings label	1.08:1 ❌	17.20:1 ✅
Sign out	light chip on dark rail	17.20:1, on-theme ✅
Button border	--rail-line, 1.4:1 ❌	38% rail-text, 3.40:1 ✅
Focus ring	green, 3.60:1	mint, 9.03:1 ✅
Email .faint	5.85:1	--rail-dim, 9.67:1 ✅
Sign in (acid)	green — already fine	unchanged, 5.13:1 ✅

The 38% border alpha isn't arbitrary — it's the floor that clears WCAG's 3:1 non-text minimum against the rail. --rail-line (the bar's own divider color) is only 1.4:1 and disappears entirely as a button outline. Both constants are commented in place.

Sign in deliberately keeps the green accent: .bar .btn.acid (0,3,0) outranks .bar .btn (0,2,0), so the one intentional theme-colored button stays intentional.

Verification

• npm test in apps/pwa — 13/13 pass.
• Rendered the real signed-in appBar() through jsdom to resolve the actual cascade, not my reading of it. It confirms the root cause and the fix: a.btn color comes from .bar a before, and button.btn flips var(--text) → var(--rail-text) after, proving .bar .btn (0,2,0) beats .bar a (0,1,1).
• All contrast figures computed with the WCAG relative-luminance formula, alpha borders composited over the rail first.

Screenshots weren't possible — the cached Chromium is missing libatk-1.0.so.0 and installing it needs sudo. Verification is cascade-resolution plus contrast math rather than a visual diff; worth an eyeball on the rendered bar before merge.

🤖 Generated with Claude Code

[github-actions]

vu1nz Security Review

0 finding(s) in PR #?

No security issues found.