fix(banner): key the announcement bar CTA to the app theme - #6675
Merged
Merged
Conversation
#6672 chose the CTA from the bar's ink, so pale bars always got the dark button and deep bars the white one. The product call is the opposite: the bar shows the theme's own primary button, white in dark mode and dark in light mode, on every fill. The only exception is the two neutral fills that flip with the theme (white-pepper and salt), where the theme primary would match the bar, so those invert it. The two ink-specific solid modifiers are gone; `btn-primary-inverted` replaces `btn-on-fill-solid-invert` for the exception. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
In light mode the bars whose text is white (the purples, blue, red and brown) read better with the white primary than the dark one, and the white button clears 4.9:1 or more against every one of those fills. The pale bars keep the theme's dark button there since white would sit at 1.4-2.9:1 against them. Adds a `white` CTA mode (`btn-primary-white`) next to `theme` and `inverted`. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
idoshamun
approved these changes
Sep 17, 2026
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.
Changes
Follow-up to #6672, which picked the CTA from the bar's ink (pale bar → dark button, deep bar → white). The product call is:
Measured: in light mode the white button clears 4.9:1+ against every fill it sits on; on the pale fills it would have been 1.4–2.9:1, so those keep the dark button.
saltinverts like white-pepper because the theme primary on it would be 2.1 / 2.7:1.Implementation:
stylesByThemecarries acta: 'theme' | 'white' | 'inverted'per theme, mapped to no class,btn-primary-white, orbtn-primary-inverted. The ink-specific solid modifiers from #6672 are gone.Storybook: contrast numbers and per-theme notes follow the new rule; the before/after story's top row is labeled as the pre-#6672 bar.
Trade-off to be aware of: in dark mode the white button sits on the pale fills (cheese, lettuce, avocado, blue-cheese) at 1.3–1.7:1 against the bar edge; the label itself stays fully legible.
Events
No new tracking events.
Experiment
No new experiments.
🤖 Generated with Claude Code
Preview domain
https://claude-announcement-bar-cta-them.preview.app.daily.dev