Implement CSS color shades using `color-mix`

[silverwind]

It will massively reduce the number of CSS variables. Supported in all desktop browsers since early 2023. Not yet available in Palemoon and I see that as a blocker currently, but this blocker could be relaxed later.

Blocked by: https://repo.palemoon.org/MoonchildProductions/UXP/issues/2489
Related: #19353

[wxiaoguang]

I would say that it is somewhat aggressive to use a browser feature (Released 2023-03-07).

I could accept to use a feature released before 2018 or 2020, but I guess there could be many users still using an old browser released in 2023 ......

[silverwind]

I'd expect 90%+ users to be on a evergreen browser, but yes, those remaining 10% are a pain.

[silverwind]

Just noting here that should we ever upgrade to tailwindcss v4, color-mix is in their requirements, thought I doubt much if anything would break if a browser doesn't have it.

[lunny]

What's the benefit to upgrade to talwindcss v4? Meanwhile, there are many breaks.

[silverwind]

https://tailwindcss.com/blog/tailwindcss-v4

Seems rather unexciting to me. Container queries might be useful, but other than that, it's a big breaking change that requires migration (maybe automated). Not the mention the weird CSS config file, but they do still support at least part of the config in JS.

[silverwind]

I recently tried migrating to tailwindcss 4, but it's a shitshow. Their migration tool is misses many cases and produces a number of false replacements as well. Currently I don't think it's worth migrating.