formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Button font color is not set to black when the button color is set to a light color #199

Closed jkbreunig closed 7 months ago

jkbreunig commented 7 months ago

Describe the bug The button font color is not set to black when the button color is set to a light color. The button font color should be set to black if a black font color has a higher contract ratio than a white font color for the set button color.

To Reproduce Set primary color to a color that does not contrast enough with white such as #8957b6 or #FFFF00

<Button
            variant="solid"
            color="primary"
            size="large"
            rounded
            fullWidth
            onClick={onClick}>
            Title
        </Button>

Expected behavior The button font color should be set to black if black font color contrasts more with the button color than white font color.

Screenshots Actual Screenshot 2023-11-21 at 3 26 26 PM Screenshot 2023-11-21 at 3 17 32 PM

Expected Screenshot 2023-11-21 at 3 26 11 PM Screenshot 2023-11-21 at 3 24 31 PM

Environment (please complete the following information):

Additional context Add any other context about the problem here.

blvdmitry commented 7 months ago

Hey, can you try reproducing it here or send your reshaped.config.js file contents? I've tried reproducing this using the colors you've suggested but it still seems to work as expected

https://codesandbox.io/p/sandbox/practical-antonelli-8lvwlw?file=%2Fsrc%2FApp.tsx

jkbreunig commented 7 months ago

hey, sorry I provided the incorrect hex value for the teal color (#00E5C4).

Expect primary color "#00E5C4" to have black font color since it has a higher contrast ratio than white font color https://codesandbox.io/p/sandbox/adoring-gates-c4txgj?file=%2Fsrc%2FApp.tsx%3A17%2C4

I've resolved the issue that caused the white font color for yellow primary color.

blvdmitry commented 7 months ago

Updated the on colors generation in 2.6.2, it should be more precise now but it also means it might have changed for other colors as well. This should be a good change but just making sure you're aware in case you were relying on a color that didn't have enought contrast according to WCAG