[v4] Palette gen / dyn-colors with oklch

[domlen2003]

Motivation

I read an article about using oklch and tailwindcss for a better color palette as well as dynamic colours.

I thought there has to be a better way to integrate automatically generated palettes.
This led to me analyzing the current tailwind colors with a python script and hacking together a script for dynamically generated color variants based on the current tailwindcss colors.

Also when configuring a color with a variable oklch hue you can do really cool stuff with reactive colors as shown in the aforementioned blogpost.

Idea

Since tailwindcss v4 is planning to add better support for oklch and updating the color scheme to a wider gamut, this would also be the perfect time to support the features mentioned above.

I don't have a clear idea for config/syntax, but the features would be:

1. generate variants of a custom color, so you could define primary and then use e.g. bg-primary-700 for a darker shade but bg-primary would still give you the original color
2. generate hue vars for custom dynamic colors e.g. --dyn-1 so you can use e.g. bg-dyn-1-700 and change its hue dynamically my modifying --dyn-1
3. update tailwind color palette to use maximally consistent chroma and lightness oklch
4. add customization options to enable e.g.max-chroma, balanced or max-consistency for default palette (and custom colors?)

Option max-choma would be the maximum available chroma for a specific hue and lightness.
Option max-consisntency would be the min chroma across all colors for a specific lightness.
Option balanced could be inbetween by taking max-consistency and multiplying chroma by a factor of e.g. max 1.2 based on the available chroma for that specific color.

Problems

Supporting hue vars

• Compatibility fallbacks can't be generated at compile-time because the hue has to be known.
• Modifying the chroma curve based on hue (as it would have to be for max-chroma and balanced) can't be done because this would also need a fixed hue.

This problem could be addressed with a bit of client side js code but thats probably unwanted in a "pure" css library.