Skip to content

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
@eduardoyutaka
Copy link

@cirdes or @sethhorsley tagging as this seems like a low hanging fruit

@sethhorsley
Copy link
Member

I like this change but I'm closing it because we want to keep this as close to shadcn as possible.
https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/manual.mdx#configure-styles

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.

3 participants