refactor: reconfigure CSS and theming variables for consistency

[phojie]

⁉️ Why

• Current shortcut presets cannot be used with opacity. For instance, if you want to use existing shortcuts such as text-muted or bg-inverted, you cannot apply opacity like bg-inverted/50 or text-muted/30.
• Shortcuts do not resolve properly in tailwind-merge. When merging two color presets, they do not combine as expected but instead override each other. This makes it difficult to use in nested component configurations.
• The current implementation of CSS variables does not align with ShadCN UI. This introduces inconsistencies in how UnaUI theming works, leading to a different design philosophy that strays from its intended reliance on ShadCN.
• The current theming system generates unnecessary variables due to auto dark mode support. Instead, we should remove them and use only the existing provided variables, such as text-background, text-foreground, like in shadcn design system.
• Lastly, these changes make it seamless to use generated ShadCN components since they share the same design system and CSS variables. This ensures UnaUI is fully portable to ShadCN + Tailwind 4 configuration.

🎯 TODOS

• Remove color shortcuts/presets.
• Use ShadCN variables as the basis of the entire design system.
• Use oklch instead of rgba.
• Remove unnecessary variables and avoid using shortcuts like text-$c-gray-900.
• Convert existing shortcuts to CSS variables (TW4 😊)

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

[mnenie]

I completely support this idea, in particular, I am in favor of switching to css variables.
but we should understand that its the breaking change (breaking for our design sytem👀)

[phojie]

Yes, @mnenie , I understand, but I think we should lean towards Tailwind CSS 4, as the Unocss team is doing. Unocss has breaking changes due to their migration to Tailwind 4, so we need to adapt. However, these changes mainly affect presets and configuration and should not impact the components by default, so it’s not a big deal. Eg: In my projects, I do need to change some shortcuts, such as ⁠text-base to ⁠text-foreground and ⁠bg-base to ⁠bg-background, and so on.

We are still on BETA, we are expected to have a breaking changes. and I think this is also essential before we introduce the stable release (v1 😊).

[mnenie]

Yes, @mnenie , I understand, but I think we should lean towards Tailwind CSS 4, as the Unocss team is doing. Unocss has breaking changes due to their migration to Tailwind 4, so we need to adapt. However, these changes mainly affect presets and configuration and should not impact the components by default, so it’s not a big deal. Eg: In my projects, I do need to change some shortcuts, such as ⁠text-base to ⁠text-foreground and ⁠bg-base to ⁠bg-background, and so on.

We are still on BETA, we are expected to have a breaking changes. and I think this is also essential before we introduce the stable release (v1 😊).

for sure @phojie 💯