From d8f79a9e1fedfc243af2f6765979532e022647da Mon Sep 17 00:00:00 2001 From: Anthony Ettinger Date: Thu, 30 Jul 2026 19:30:40 +0000 Subject: [PATCH] fix(pwa): give the dark topnav its own button skin The .btn skin is built for the light page ground (white fill, ink text). The topnav rail is #101418, so those buttons landed there as stray light-mode chips -- and ".bar a{color:var(--rail-text)}" outranks ".btn" on color (0,1,1 vs 0,1,0), so Settings painted rail-text on a white fill: 1.08:1, effectively invisible. Scope a rail variant to .bar: transparent fill, rail-text label, and a border at 38% rail-text (3.40:1, clearing the 3:1 non-text minimum -- --rail-line is only 1.4:1 and vanishes). Sign in keeps the green accent, the focus ring moves green -> mint (3.60:1 -> 9.03:1), and .faint/.dim in the bar resolve to --rail-dim. Settings and Sign out go 1.08:1 and light-chip-on-dark to 17.20:1. Body buttons are untouched -- every rule is .bar-scoped. Co-Authored-By: Claude Opus 5 (1M context) --- apps/pwa/src/lib/html.mjs | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/apps/pwa/src/lib/html.mjs b/apps/pwa/src/lib/html.mjs index 18508b7..87dc1f1 100644 --- a/apps/pwa/src/lib/html.mjs +++ b/apps/pwa/src/lib/html.mjs @@ -60,6 +60,18 @@ label.field span{display:block;font-family:var(--mono);font-size:.66rem;letter-s .brand .mark{width:26px;height:26px;border-radius:6px;border:1px solid var(--mint);color:var(--mint);display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:.8rem;background:transparent} .brand .app{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;border:1px solid var(--line-2);padding:2px 6px;border-radius:5px} .bar .brand .app{color:var(--rail-dim);border-color:var(--rail-line)} +/* .btn is skinned for the light page ground (white fill, ink text). Dropped in + the dark rail it reads as a stray light-mode chip, and worse: ".bar a" above + outranks ".btn" on color, so ended up rail-text on white -- + 1.05:1, effectively invisible. Give the rail its own button skin. */ +/* 38% is the floor that keeps the button outline at 3:1 against the rail + (WCAG non-text contrast); --rail-line is only 1.4:1 and disappears here. */ +.bar .btn{background:transparent;color:var(--rail-text);border-color:color-mix(in srgb,var(--rail-text) 38%,transparent)} +.bar .btn:hover{background:color-mix(in srgb,var(--rail-text) 12%,transparent);border-color:var(--rail-dim)} +.bar .btn.acid,.bar .btn.primary{background:var(--green);color:var(--green-ink);border-color:var(--green)} +.bar .btn.acid:hover,.bar .btn.primary:hover{background:var(--green-2);border-color:var(--green-2)} +.bar .btn:focus-visible{outline-color:var(--mint)} +.bar .faint,.bar .dim{color:var(--rail-dim)} .bar-right{margin-left:auto;display:flex;align-items:center;gap:12px} .grid{display:grid;grid-template-columns:1.55fr .95fr;gap:22px;align-items:start} .col{display:flex;flex-direction:column;gap:22px}