fix(website): make Card hover lift render border/shadow (+ accent ring)#579
Merged
Conversation
The global [data-hoverable]:hover rule set box-shadow/border-color without !important, so Card's inline border/box-shadow always won — only the translate applied. Add !important so the lift renders; add an accent variant (accent ring, keeps the accent border) via a new Card `accent` prop. Switch the docs landing + prev/next cards from the broken ad-hoc `data-ui="docs-card"` scoped styles to the shared hoverable/accent mechanism and delete the duplicated <style> blocks. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The previous fix beat Card's inline border/box-shadow with !important on the hover rules. That treats the symptom: the resting border/box-shadow are still inline, so every future state (focus, active) hits the same wall, and per-card overrides have to fight !important. Move Card's resting background/border/box-shadow/transition out of inline and into the `[data-ui="card"]` stylesheet; drive surface via `data-surface` and the accent fill via `[data-ui="card"][data-accent]`. With nothing inline, the hover rules win on specificity alone — no !important anywhere. Accent cards keep the accent ring + shadow; plain cards get the neutral border-strong + shadow lift. Verified: e2e/docs.spec.ts 8/8; real Playwright hover shows the accent ring (0 0 0 3px accent-glow + shadow-md) and the neutral lift render correctly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
Summary
Card's resting
border/box-shadowwere set as inline styles, which beat any stylesheet:hoverrule — so every hoverable card (solutions, dev/primitives, docs prev/next, and the docs fork cards) only got thetranslateYlift, never the shadow/border change. The docs cards papered over this with ad-hocdata-ui="docs-card"scoped<style>blocks that hit the same inline-specificity wall.Root-cause fix (no
!important):background/border/box-shadow/transitionout of inline and into the[data-ui="card"]stylesheet. With nothing inline, the:hoverrules win on specificity alone — no!importantanywhere, and future states (focus, active) work for free.data-surfaceand the accent fill via[data-ui="card"][data-accent].accentprop toCard: accent cards render the accent-tinted surface + border and gain an accent ring (0 0 0 3px accent-glow) + shadow on hover; plain cards get the neutralborder-strong+shadow-mdlift.data-ui="docs-card"scoped<style>blocks on the docs landing andDocsPrevNextwith the sharedhoverable/accentmechanism, and delete the duplicated styles.Follow-up to the docs polish work (#568/#573).
Test Plan
e2e/docs.spec.ts— 8/8eslinton changed files — cleanhover(): accent cards show the ring (rgba(0,64,144,0.2) 0 0 0 3px+shadow-md, accent border preserved,translateY(-1px)); plain cards getborder-strong+shadow-md; resting states unchangeddata-accent/data-hoverable/data-surfacewith inline style trimmed toborder-radius/paddingonly (no border/shadow/bg) — nothing blocks hover🤖 Generated with Claude Code