Separate meaningful theme parts out

[LeaVerou]

• Split out color tokens, typography, overrides. Some for mixing & matching (colors, typography), some for maintainability (overrides).
• Implemented a potential fix (or at least improvement) for Multiple themes cannot be used on the same page #475.
• Added .wa-palette-* classes to each color palette

Haven't done Gl[ao]ssy and Playful to not conflict with @lindsaym-fa's work.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
webawesome	✅ Ready (Inspect)	Visit Preview	Jan 15, 2025 9:49pm

[lindsaym-fa]

Mostly there. I fixed up a few misplaced properties, but there seems to be an issue with the Component Group properties not being applied in dark mode.

For example, here's a Premium switch in light mode:

And here's the same switch in dark mode (note the color and smaller size):

Compare this to a Premium switch in dark mode on next, which has the intended appearance:

[LeaVerou]

Oh, I know what is causing this. It's an easy fix, will ping you when it's time to re-review. Thank you!

[lindsaym-fa]

That (mostly) fixed it, thanks!

Our good friend Safari is ignoring any colors set for the component group tokens in dark mode. 🤦 I've approved this anyway; we can make another issue and investigate separately since it's a fairly minor problem.

For example, a Brutalist switch in dark mode in Chrome (expected):

...and a Brutalist switch in dark mode in Safari (unexpected):

An Awesome input in dark mode in Chrome (expected):

An Awesome input in dark mode in Safari (unexpected):

sigh

[LeaVerou]

That's so strange. I have a theory: I wonder if it's related to support for :host-context() somehow. Does Firefox have the same issue?

[lindsaym-fa]

Surprisingly, no. Just Safari.

[LeaVerou]

So weird. Anyhow, I'm confident we can fix it, and the longer this sits, the harder it will get to merge, so I'm going to go ahead and merge this, then debug.