[BUG] - Inaccessible button variants

[tovaschreier]

NextUI Version

"@nextui-org/button": "^2.0.31",
"@nextui-org/system": "^2.1.2",
"@nextui-org/theme": "^2.2.3",

Describe the bug

The way NextUI's color palette is used within the Button component means some variants of the Button component (as well as other components like Input and Badge) fail a basic contrast check.

1. Success & warning colors - the default colors look great as solid buttons, but the light button variant isn’t accessible because these colors don't have a high enough contrast when used as text colors on a white background.
2. Flat & faded variants - the contrast between the text color & background color is not high enough.

The root cause of this issue is that AFAICT we can only configure one success and one warning color, and that gets used for both text & background colors (you can see this in the code here and here - it's using the same success color value for bg-success in solid buttons & text-success in light buttons).

Your Example Website or App

https://storybook.nextui.org/?path=/story/components-button--default

Steps to Reproduce the Bug or Issue

Just clicking around the Button component in NextUI's Storybook and checking contrast with Chrome dev tools highlights this issue:

1. Success light button & warning light button fail a basic contrast check
2. Flat & faded Button variants used with any color (e.g. primary flat & danger faded) fail a basic contrast check

Expected behavior

The color palette should support configuring different colors for text vs background, since it's unlikely that the same color will be accessible when used in both contexts.

How it could work:

• Instead of accepting only a DEFAULT and foreground color for each color variant (as described here and illustrated here), NextUI should also accept a background and text color for each variant.
• That would allow the Button component's theming to use different colors for backgrounds (e.g. bg-success-background) and text (e.g. text-success-text).

That would help the library live up to the promise that its color palette is accessible out of the box (as stated here) no matter which component variant combination is used.

Screenshots or Videos

Operating System Version

macOS

Browser

Chrome