Improved colors

[zepfietje]

Make sure foreground color is accessible on background color for buttons for example.
Also add support for light and dark buttons.

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[mgkimsal]

I'd added a discussion item about this a couple months ago. Might be able to lend a hand if there's something to help review/test or submits PRs for. Glad to fund a bit towards filament improving this too.

[zepfietje]

Thanks, @mgkimsal!
Could you link to that discussion here?

[mgkimsal]

@zepfietje - sorry for delay!

#12548

It was just an initial ask for "is this interesting to anyone?" I was a bit reluctant to put in work in to this if it wasn't something anyone thought would be useful. AT THAT TIME, I had more time on my hands. :). I don't today, but am definitely open to helping if there's something I may be able to lend a hand with.

My initial thoughts were to just come up with some tweaks to a few of the color palettes to help get them to validate against the WCAG(?) contrast standards. But I was also reading in the github project that there's a potentially bigger overhaul of styling coming in a future version, so unsure how colors may impact any of that work.

And... as you can see, it's not a 'discussion' as much as a starting question :)

[danharrin]

In Filament 3, colored components like buttons had fixed shades. For example, the background color of a button would be 600 (green, red, blue) on light mode and 500 in dark mode. Some 600 shades are accessible and some are not.

#15474 introduces scripts that analyse the color palette used and dynamically pick the shade of color based on its contrast ratio. All textual elements should now have 4.5 ratio with their background (WCAG AA standard) and non-textual elements have a 3 ratio also (WCAG standard). Hover states of elements also tweak the text color to ensure it remains accessible.

Colors are defined in OKLCH in Filament 4, so the work involved converting that format to RGB before calculating the ratio.

UI components now have their own classes that determine how shades are picked for that component. It replaces the old shade configuration system from Filament 3. These classes can be overriden by the user (used when the theme is heavily customized).

[mgkimsal]

Sounds great! Thanks!