fix(redesign): guard OS-light WCAG inks against explicit app-dark theme#588
Merged
Conversation
Three root-caused polish fixes found by examining the canonical answer harness before presentation: 1. All eight @media (prefers-color-scheme: light) hardening blocks keyed off the OS scheme while the app themes via data-redesign-theme. An OS-light user with the app toggled dark received near-black !important inks on dark surfaces: invisible table headers ([class*="muted"] even matched Tailwind's bg-muted), unreadable code lines, vanished run-summary meta, darkened accent. Every selector in those blocks now carries :where(:not([data-redesign-theme="dark"])) - zero added specificity, so the light-mode cascade is byte-identical. 2. The light block's [class*="primary"] substring shotgun force-filled streamdown markdown links (<button class="text-primary underline">) into terracotta pills. Narrowed to bg-primary/rd-btn--primary and added a scoped link reset under .rd-answer-copy--markdown. 3. Evidence rows with an honestly-empty quote rendered an empty paragraph that displaced the source label; the quote is now gated on content. Harness now imports the app Tailwind entry so captures show real chrome. Evidence: docs/design/ui-contract/20260718-polish-chat-answer (before/after, light+dark, captured under the worst-case OS-light + app-dark combination). tsc clean, 505 targeted tests green, build clean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
HomenShum
enabled auto-merge (squash)
July 18, 2026 22:17
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Dogfood Visual QA Gate: PASSED
ArtifactsDownload the Generated by Dogfood QA Gate |
|
Demo: walkthrough of the surfaces this PR changed is available as a workflow artifact ( |
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
2 participants
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
Examine-then-polish pass over the unified chat answer anatomy (canonical answer harness) before final presentation photos. Three root-caused fixes:
Theme-mismatch ink bug (the big one). All eight
@media (prefers-color-scheme: light)WCAG hardening blocks inprimitives.csskeyed off the OS scheme, but the app themes viadata-redesign-theme. An OS-light user with the app toggled dark got near-black!importantinks forced onto dark surfaces: invisible table headers ([class*="muted"]even matches Tailwind'sbg-muted), unreadable code lines, vanished run-summary meta, silently darkened accent. Every selector in those blocks now carries:where(:not([data-redesign-theme="dark"]))—:where()adds zero specificity, so the light-mode cascade is byte-identical (verified by pixel-stable light captures).Markdown links rendered as terracotta pills. Streamdown links are
<button class="text-primary underline">; the light block's[class*="primary"]substring shotgun force-filled them. Narrowed tobg-primary/rd-btn--primary+ scoped link reset under.rd-answer-copy--markdown.Empty-quote evidence rows rendered an empty paragraph displacing the source label; quote now gated on content.
Evidence
docs/design/ui-contract/20260718-polish-chat-answer/— before/after, light+dark, captured under the worst-case OS-light + app-dark combination that reproduces the bug. Dark before: table header + code line + run summary illegible. Dark after: all legible, accent restored.Verification
npx tsc --noEmit— 0 errorsnpx vite build— clean🤖 Generated with Claude Code