Description

First of all, thank you for Nuxt UI v3, it's absolutely wonderful! The migration was a bit challenging but now it's a pure joy to use. The new design system with Tailwind V4 CSS variables is brilliant.

Suggestion

While the current system with CSS variables is powerful, writing classes like text-(--ui-text-dimmed) can be a bit verbose. We could provide shorter utility classes that wrap these variables.

Example implementation:

@layer utilities {
  .text-dimmed {
    @apply text-(--ui-text-dimmed);
  }
  
  .text-muted {
    @apply text-(--ui-text-muted);
  }
  
  .text-toned {
    @apply text-(--ui-text-toned);
  }
  
  .text-base {
    @apply text-(--ui-text);
  }
  
  .text-highlighted {
    @apply text-(--ui-text-highlighted);
  }
}

Benefits

• More concise syntax: text-dimmed vs text-(--ui-text-dimmed)
• Easier to type and remember
• Less prone to typos
• Still leverages the full power of Nuxt UI's theming system
• Maintains dark mode compatibility out of the box

Would it make sense to include these shorter utilities by default in Nuxt UI?

Additional context

No response