Skip to content

Fix note admonition and linked inline-code contrast/consistency - #3371

Open
annakudelska wants to merge 1 commit into
repo/summer-2026-redesign-all-componentsfrom
repo/summer-2026/anka-fixes
Open

Fix note admonition and linked inline-code contrast/consistency#3371
annakudelska wants to merge 1 commit into
repo/summer-2026-redesign-all-componentsfrom
repo/summer-2026/anka-fixes

Conversation

@annakudelska

Copy link
Copy Markdown
Contributor

Summary

Part of the contrast/readability pass on the redesigned components (see the design showcase preview). This PR covers the note (blue) admonition and a couple of site-wide inline-code fixes; the caution/danger variants are still under discussion with design and will follow in a separate PR.

  • note admonition (light + dark): reworked background, border, and inline-code colors so text meets WCAG AA (4.5:1) against their actual backgrounds. Verified contrast ratios:
    • Light: heading 5.46:1, body text 13.86:1, inline-code 5.20:1
    • Dark: heading 5.32:1, body text 12.55:1, inline-code 4.99:1
  • All inline code wrapped in a link ([text with `code`](url), any context/variant): prepend a link icon (Phosphor ph-link, inherits currentColor so it matches every admonition variant and both themes automatically), reduce font-weight from bold to regular, and normalize border width to 1px (previously 0.1rem/1.6px via Infima's default) to match the 1px admonition border.

Test plan

  • yarn build passes locally (client + server compiled successfully)
  • Verified light and dark mode rendering on a local design-showcase page covering every admonition variant and inline-code context
  • Computed WCAG contrast ratios for all note text/background pairs (see above)
  • Design sign-off on the visual result (background/border tint levels)

🤖 Generated with Claude Code

- note admonition: rework background/border/inline-code colors in both
  light and dark mode so text meets WCAG AA (4.5:1) against their
  backgrounds
- all inline code wrapped in a link: prepend a link icon (Phosphor),
  reduce font-weight from bold to regular, and normalize the border
  width to 1px to match admonition borders (previously 1.6px via
  Infima's default)
@annakudelska
annakudelska requested a review from pwizla as a code owner August 4, 2026 12:03
@vercel

vercel Bot commented Aug 4, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
documentation Ready Ready Preview Aug 4, 2026 12:04pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant