[6.x] Refactor CSS color variables

[andjsch]

This PR refactors how the theming works in regards to light and dark variants.

Instead of creating dark theme CSS classes, the default (light-mode) CSS theme classes are overridden within :root when dark mode is active.

This allows to introduce dark mode variants for all color config options, simply by prepending dark- in front of them without needing to introduce a dark-something class on a component.

For example: Till now you could only set a primary color or all grays globally. Now you can set different colors for the modes:

'theme' => [
    'dark-primary' => Color::Indigo[700],
    'primary' => Color::Indigo[500],
    'grays' => Color::Slate,
    'dark-grays' => Color::Zinc,
];

Before:

<button class="bg-ui-accent-bg dark:bg-dark-ui-accent-bg">I am a simple example</button>

After:

<button class="bg-ui-accent-bg">I am a simple example</button>

[jackmcdade]

I like the idea but I don't think Tailwind will parse these variables when do you this. 🤔

[andjsch]

@jackmcdade Works fine. Initially it didn't but I figured it out with one of the last commits. Gave it some thorough testing and couldn't find any problems so far.

But if this will eventually be merged I'd appreciate some more eyes in case I haven't found all occurrences of the classes that aren't needed anymore.

The idea was to not overcomplicate the dark mode with additional classes and make all variables configurable, dark and light.

[jackmcdade]

Okay cool, I'll have a tinker and see what I can find. I also had this possible angle to make "themes" just CSS files and maybe get rid of the config thing entirely. #12947 Not sure how this would play nicely with that, but I was on the fence w/ that one anyway.

[andjsch]

I think both can work together. In the end we still print out native CSS with this config. Only difference with this PR is, that we override the CSS variables for dark mode when dark mode is active.

Take a look at the head partial for reference, it's still pure CSS with less CSS variables. I'd still fancy your file approach for more sophisticated theming if one is in the need. That would give anyone ultimate theming capabilities 😆

[JayGeorge]

This all looks good to me, thanks for your work on this, Andreas :). I've played around with it and it's all working OK with the dark overrides.

While playing with the different hues I noticed some stray hard coded gray values so I fixed those.

[andjsch]

Fixes #13027

[andjsch]

@jasonvarga If we want to make the newly added focus-outline to be override-able, we should add a dark-focus-outline as well.

[jasonvarga]

If we want to make the newly added focus-outline to be override-able, we should add a dark-focus-outline as well.

I've adjusted the logic so adding a dark- variant to your config will work even if we don't have it in the default array.