Environment

• Operating System: Darwin
• Node Version: v22.11.0
• Nuxt Version: 3.17.0
• CLI Version: 3.25.0
• Nitro Version: 2.11.11
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.0

Reproduction

https://codesandbox.io/p/devbox/modern-dust-h3lryc

Description

Hey, after upgrading to latest @nuxt/ui, custom Nuxt UI variable overrides stopped working. Looks like the correct colors are not generating.

This has worked in the previous versions:

:root {
  --ui-bg-elevated: var(--ui-color-neutral-500);
}

main {
  --ui-bg-elevated: var(--color-white);
}

// Should have color --ui-color-neutral-500 with 0.5 opacity - CORRECT
<div class="p-8 flex items-center gap-2 bg-elevated/50">
</div>

// Should have color --color-white with 0.5 opacity - NOT WORKING - has colors from :root
<main class="p-8 flex items-center gap-2 bg-elevated/50">
</main>

Currently, the variables in main have no effect on the sites.

Additional context

No response

Logs