Skip to content

Change destructive foreground color #262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

JMalheiros
Copy link
Contributor

@JMalheiros JMalheiros commented Apr 23, 2025

Related to issue Destructive button preview in docs has red text over red background #252

Changed destructive-foreground color to white. It contrasts better with the red from the background.
This constant is used on both Link and Button component, so changed for both of them.
Note: there are two commits on this PR:

  • First one changes the destructive-foreground color so we have contrast on both light and dark modes.
  • Second one, changes the destructive color to a red a little darker. By WCAG2 patterns, the contrast between white and the older red is not perfectly contrastable to the AAA levels. This one is just a suggestion, and can be reverted easily.

WCAG2 comparison between original destructive and destructive-foreground colors:
Screenshot 2025-04-23 at 09 41 39

WCAG2 comparison between slight darker destructive and destructive-foreground colors:
Screenshot 2025-04-23 at 09 42 08

Button and Link with original destructive and destructive-foreground colors:
image

Button and Link with slight darker destructive and destructive-foreground colors:
image

@JMalheiros JMalheiros marked this pull request as ready for review April 23, 2025 17:42
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