0.10.1: the nav button is readable without hovering - #44
Merged
Conversation
`.nav a` is one class and one element more specific than `.btn`, so the header's "Post a job" and "Sign in" buttons took the nav link's --muted-foreground on the button's --primary background. In light that is oklch lightness 0.53 on 0.52, a contrast ratio of 1.05:1; in dark it is 0.71 on 0.72, 1.11:1. The label was there and invisible. Hovering appeared to fix it only because `.nav a:hover` repainted the whole thing as a plain grey nav pill, which also threw away the button's own hover state. Excluding buttons from the nav link rules with `:not(.btn)` hands them back to `.btn`, which pairs --primary with --primary-foreground: 4.89:1 light and 8.32:1 dark, and keeps the darker-green hover a button is supposed to have. sw.js VERSION follows the shell asset hash, or returning readers keep the old stylesheet. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01969fmPKb5j3PUCdBRfCnbm
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The "Post a job" button in the header (and "Sign in" when logged out) was
unreadable unless you hovered it.
Cause:
.nav a(0,1,1) outranks.btn(0,1,0), so the button rendered thenav link's
--muted-foregroundon the button's own--primarybackground:Hover only looked like a fix because
.nav a:hoverrepainted the element as agrey nav pill, discarding the button's background along with its own hover state.
Fix: scope the nav link rules with
:not(.btn)so a button in the nav is leftto
.btn, which already pairs--primarywith--primary-foreground. One rule,no new tokens, and future button variants in the nav inherit the right colours.
web/public/sw.jsVERSION follows the shell asset hash (the suite asserts it), orreturning readers keep the old stylesheet.
Verified in Chrome against the real
app.cssin both themes; 119/119 tests pass.🤖 Generated with Claude Code
https://claude.ai/code/session_01969fmPKb5j3PUCdBRfCnbm