bbs.profullstack/logicsrc
1
0
Fork 0
mirror of https://github.com/profullstack/logicsrc.git synced 2026-08-13 14:37:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
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 <a class="btn">Settings</a> 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) <noreply@anthropic.com>
This commit is contained in:
Anthony Ettinger 2026-07-30 12:41:05 -07:00 • committed by GitHub
parent aa4a690d60
commit d28f20b9f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 12 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/pwa/src/lib/html.mjs
View file

@ -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 <a class="btn"> 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}