Extend colors not work after update to v3.1

[icarusion]

Environment

• Operating System: Darwin
• Node Version: v22.11.0
• Nuxt Version: 3.16.2
• CLI Version: 3.25.0
• Nitro Version: 2.11.9
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, runtimeConfig, app, css, ui, icon, i18n, future, compatibilityDate
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @vueuse/[email protected], [email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.0

Reproduction

https://codesandbox.io/p/devbox/vigorous-cerf-pnrc3g

// app.config.ts
export default defineAppConfig({
ui: {
colors: {
primary: 'emerald',
neutral: 'zinc',
red: 'red',
orange: 'orange',
yellow: 'yellow',
green: 'green',
blue: 'blue',
purple: 'purple',
gray: 'gray',
},
}
}

// nuxt.config.ts

ui: {
theme: {
colors: [ 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray' ],
},
},

Description

Yesterday everything was working fine, no code was changed, after the upgrade it broke.
For example:

<div class="bg-(--ui-orange)">

Or

<div class="bg-orange">

Both not work

Additional context

No response

Logs