Improve colour contrast for Flat variant

[sajohans]

Hi! I’m a Product Designer and I've been looking into the colour contrast for Alert, Toast, Chip and Button, because I noticed we had some issues with our brand colours not having enough colour contrast when using the Flat variant (I also noticed that the default Danger colour also doesn’t have enough contrast for Chip and Button in Flat).

I've been trying to tweak our colour palette to fix the issue (we didn’t like the idea of going into each component and customizing them, since this makes the components harder to maintain for us), but the design of the Flat variant makes it difficult to ensure good contrast.

I think it could be a good idea to make the text colour for Flat variant darker, for example changing it to 700 or 800 for all colours. It would also help if the background wasn’t transparent for Chip and Button and instead using one of the lighter shades for the background, like you are already doing for Alert and Toast.

[J4v4Scr1pt]

I would also like to know better how to work with the colors for the flat version. Lighthouse always complains about the contrast for the flat ones. I have tried adjusting the color pallet but it kind of mess up the other colors. I tried the theme generator that claims to "Ensure proper contrast and accessibility" But that don't work in all cases either. When I ask your new AI Chat it suggested to remove the opacity on the color and use lighter color instead.

But maybe this is something that will be addressed in V3 of HeroUI? 😄