Repository navigation
Ring primary and tint secondary actions inside toasts - #729
Merged
Merged
Conversation
A primary action inside a toast collapsed to ghost text and read as plain
copy, while a secondary action kept the app's gray chip, which was never
picked against a status fill. An outline action rendered invisibly, since it
takes its colour from the primary background a toast sets to transparent.
All three now follow the toast's text colour via currentColor. Primary and
outline get a 60% ring, secondary a soft 15% tint one step below it, and the
dismiss button stays ghost.
Button gains two hooks a surface can set: --silver-button-primary-border
(drawn as an inset shadow so the box is unchanged, transparent by default)
and --silver-button-outline-{fg,border,bg-hover,bg-active}.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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
1 participant
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.
Problem
--silver-button-primary-bg, which a toast sets totransparent.Change
Every toast action now follows the toast's text colour via
currentColor: white on the dark fills, dark onwarning, with no per-type values. Importance is shown by treatment, not by a fill colour:primary/outlinecurrentColorring, 15% tint on hoversecondarycurrentColortint (22% on hover, 28% when pressed)To make this possible,
Buttongains hooks a surface can set:--silver-button-primary-border: drawn as an insetbox-shadowso the button's size is unchanged. It defaults totransparent, so primary buttons elsewhere look exactly as before.--silver-button-outline-fg/-border/-bg-hover/-bg-active: each falls back to the previous value.Inside a toast,
outlinerenders the same asprimary. The only difference is that its real 1px border makes it 2px wider.Stories
Toast / With Primary And Secondary ActionsandToast / With Outline Action.With Primary Actiondocs.Tests
🤖 Generated with Claude Code