fix(core): tint ClickableCard background on hover instead of overlay#3712
Open
kentonquatman wants to merge 1 commit into
Open
fix(core): tint ClickableCard background on hover instead of overlay#3712kentonquatman wants to merge 1 commit into
kentonquatman wants to merge 1 commit into
Conversation
Non-default ClickableCard variants (blue, muted, transparent, the color tints) rendered a faint 1px untinted ring on hover: the hover feedback was a pseudo-element at inset: 0 that covers the padding box but not the card's 1px transparent border, so the untinted variant background showed through the border edge. Replace the pseudo-element overlay with a per-variant background tint on hover/active. Tinting the card's real background paints the full border box, edge included, so the ring is gone. The tint mixes each variant's background with --color-tint-hover (black in light mode, white in dark mode), darkening in light mode and lightening in dark mode, mirroring how other interactive components tint on hover.
kentonquatman
requested review from
cixzhang,
ejhammond,
imdreamrunner,
josephfarina,
marie-lucas,
nynexman4464 and
thedjpetersen
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR No new or modified components detected. Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
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.
What
Fixes a faint 1px "ring" that appeared around
ClickableCardon hover for any non-defaultvariant (blue,muted,transparent, and the color tints). On hover the interior darkened but the outer 1px edge stayed at the untinted background color.Why it happened
Hover/active feedback was a pseudo-element (
::after) positioned atinset: 0.inset: 0aligns to the card's padding box, which sits inside the card's 1pxborder(transparent on tinted variants). The variant background, however, paints the full border box — under that transparent border. So on hover:The fix
Drop the pseudo-element overlay and tint the card's real background per variant on
:hover/:active. Tinting the actual background paints the full border box — edge included — so there's no ring.The tint mixes each variant's background token with
--color-tint-hover(light-dark(black, white)), which darkens in light mode and lightens in dark mode. This mirrors how other interactive components (CheckboxInput,Switch,RadioList,Slider) already tint on hover, and follows the same conditional-style approachLinkuses for hover feedback.:hover→ 5% tint (guarded by@media (hover: hover)so touch devices don't get a stuck state):active→ 10% tint (works everywhere)Each variant's resting
defaultvalue equals its base token, so the non-hovered appearance is unchanged.Testing
pnpm -F @astryxdesign/core build(StyleX + CSS) — generated CSS confirms per-variantcolor-mix(... --color-tint-hover ...)rules under@media (hover: hover)for:hoverand unguarded for:activepnpm -F @astryxdesign/core typecheck+typecheck:docseslintcleangenerate+ exports/token-doc sync checks clean