Skip to content

Visual polish: neo card tokens, rounded media, sidebar active leaf#501

Merged
LindsayAuch merged 1 commit into
LindsayAuch/visual-refresh-sandboxfrom
LindsayAuch/visual-polish
May 12, 2026
Merged

Visual polish: neo card tokens, rounded media, sidebar active leaf#501
LindsayAuch merged 1 commit into
LindsayAuch/visual-refresh-sandboxfrom
LindsayAuch/visual-polish

Conversation

@LindsayAuch
Copy link
Copy Markdown
Collaborator

@LindsayAuch LindsayAuch commented May 1, 2026

Changes

Design tokens

Added --neo-border-card, --neo-grey-300, --neo-shadow-card, --neo-card-hover-bg to :root and the dark-mode block.

Card hover treatment

Both DocCard (generated index pages) and markdown link-list cards (recipe READMEs):

  • Default: transparent fill (page lavender shows through), 1px --neo-border-card outline only
  • Hover: card fills white (--neo-card-hover-bg), border deepens to --neo-grey-300, gains --neo-shadow-card lift
  • Transition: 120ms ease on bg + border + shadow

Other polish

  • Round corners (12px) on .markdown img, figure img, and any .markdown iframe (YouTube/Vimeo embeds inline in markdown beyond .reactPlayer)
  • Sidebar active leaf bumped to font-weight: 700 + Inter

Notes

Self-contained: written as additive !important overrides + attribute selectors so it lands cleanly regardless of merge order with the other refresh PRs.

Test plan

  • DocCards default transparent against page lavender, hover white with shadow lift
  • Recipe README link-list cards behave the same way
  • Inline images and embeds in docs have rounded corners
  • Active sidebar item appears bolder than category labels
  • Dark mode tokens work (translucent white tints)

- Define --neo-* design tokens (border, grey-300, card shadow, hover bg)
  for both light and dark mode. Cards default to transparent fill and
  fill in to white with a soft shadow on hover, replacing the flat grey
  hover with something that feels more intentional
- Apply the same treatment to markdown link-list cards (recipe READMEs)
- Round corners (12px) on inline images and YouTube/Vimeo iframes inside
  markdown content, matching the existing video player treatment
- Bump the sidebar's active leaf from 600 to 700 Inter for clearer
  current-page emphasis

Self-contained: all additions use !important / attribute selectors so
the PR lands cleanly on top of the other visual-refresh PRs in any order.

Refs #492

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@github-project-automation github-project-automation Bot moved this from In Progress to Ready to Review in OpenRewrite May 1, 2026
@LindsayAuch LindsayAuch marked this pull request as ready for review May 12, 2026 15:00
@LindsayAuch LindsayAuch merged commit 7a8eac9 into LindsayAuch/visual-refresh-sandbox May 12, 2026
@github-project-automation github-project-automation Bot moved this from Ready to Review to Done in OpenRewrite May 12, 2026
@LindsayAuch LindsayAuch deleted the LindsayAuch/visual-polish branch May 12, 2026 15:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

2 participants