fix(ui): give Button a pointer cursor and the secondary variant a hover - #37
Merged
Merged
Conversation
The consent bar's Allow and Decline were the first secondary Buttons to render as <button> rather than <a>. They showed an arrow cursor and nothing on hover. Tailwind v4's preflight leaves buttons on the default cursor, and the secondary variant had no hover at all; a link's pointer had always stood in for one. The primitive now carries cursor-pointer. Secondary steps up to border-rule-strong over a bg-muted fill on hover, measured at 1.09:1 against the card in light and 1.19:1 in dark. The transition covers background and border as well as opacity. Every other secondary Button is a link and gains the same hover.
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
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.
Follow-up to #36. The consent bar's Allow and Decline show an arrow cursor and nothing on hover, so they don't look clickable.
They are the first secondary
Buttons to render as<button>rather than<a>. Two gaps meet there:<button>on the default cursor, and the primitive never set one. A link gets the pointer from the browser.secondaryvariant had no hover state at all. The link's pointer had been the only feedback it ever gave.Change
cursor-pointeron theButtonprimitive.secondarysteps up toborder-rule-strongover abg-mutedfill.The hover fill measures 1.09:1 against the card in light and 1.19:1 in dark, alongside the border going from 7% to 14%. It was checked visually in both themes in headless Chrome.
Every other secondary
Buttonon the site is a link (hero GitHub, the database pages' docs links, the Download page's second architecture) and gains the same hover.Testing
AnalyticsConsentTestpinscursor-pointerin the base classes and ahover:on the secondary variant. It fails with the cursor removed.tsc --noEmitis clean.pointerand the hover background isoklch(0.97 0 0)in light andoklch(0.269 0 0)in dark.