fix(webapp): use white text on solid indigo backgrounds in light mode - #4536
Open
claude[bot] wants to merge 2 commits into
Open
fix(webapp): use white text on solid indigo backgrounds in light mode#4536claude[bot] wants to merge 2 commits into
claude[bot] wants to merge 2 commits into
Conversation
The primary PopoverArrowTrigger variant and the calendar's selected-day state used the theme-flipping `text-text-bright` token on a solid `bg-indigo-600` background. In light mode that token resolves to near-black, so the label sat as dark grey on indigo and was hard to read. Hardcode `text-white` on these solid indigo surfaces, matching the established pattern in Buttons.tsx. Co-Authored-By: Claude <noreply@anthropic.com>
|
|
Preview Deployment
|
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.
Requested by Eric Allam · Slack thread
✅ Checklist
Testing
Verified on the preview deployment in light mode on 2026-08-08: the "Mark error as…" button label renders white on the indigo background and reads correctly. Dark mode is unchanged. The calendar selected-day fix is the same one-token swap — to check it, open any date picker and confirm the selected day reads white on indigo.
Changelog
Before: in light mode, the "Mark error as…" button on the error detail page rendered its label and icon in dark grey on the solid indigo background — low contrast and hard to read. Selected dates in the calendar had the same problem.
After: both render white text on the indigo background, in light and dark mode alike.
How: these surfaces were using the
text-text-brighttoken, which flips with the theme (near-white in dark mode, near-black in light mode). That is correct on a theme-aware background, but wrong on a background that stays solid indigo in both themes. Swapped to a hardcodedtext-whiteon just those spots, matching the existing pattern inapps/webapp/app/components/primitives/Buttons.tsxwhere the primary button hardcodestext-whiteonbg-indigo-600.Files touched:
apps/webapp/app/components/primitives/Popover.tsx— theprimaryentry ofpopoverArrowTriggerVariants(trigger, text, icon). The now-redundanthover:text-whiteontextis dropped.apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx— the icon inside that primary trigger.apps/webapp/app/components/primitives/Calendar.tsx— the selected-day classes.Blast radius is small:
PopoverArrowTrigger variant="primary"has exactly one call site in the app (the "Mark error as…" button), so the Popover change affects that one button, plus the separate calendar selected-day fix. No token definitions changed, and no othertext-text-brightcall site is touched — it is correct everywhere else, since those sit on theme-aware backgrounds.Screenshots
None yet.
💯