UModal overlay styling in app.config.ts not applying with variants.overlay.true.overlay

[iBobik]

Environment

• Operating System: Linux
• Node Version: v20.12.0
• Nuxt Version: 4.1.2
• CLI Version: 3.28.0
• Nitro Version: 2.12.6
• Package Manager: pnpm@8.15.6
• Builder: -
• User Config: modules, devtools, compatibilityDate, future, css
• Runtime Modules: @nuxt/ui@4.0.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.1.0

Reproduction

https://codesandbox.io/p/devbox/sharp-moser-8z8hpy?file=%2Fapp%2Fapp.config.ts%3A20%2C13-20%2C38&workspaceId=ws_38ikhJkQTKT4qUMyXiAxRX

Description

When attempting to customize the UModal overlay background color using app.config.ts with the path ui.modal.variants.overlay.true.overlay, the custom style is not applied. The default overlay color persists.

export default defineAppConfig({
  ui: {
    modal: {
      variants: {
        overlay: {
          true: {
            overlay: 'bg-green-500/60',
          },
        },
      },
    },
  },
});

A workaround that successfully applies the custom overlay color is to use the variants.fullscreen.false.overlay or slots.overlay:

export default defineAppConfig({
  ui: {
    modal: {
      slots: {
        overlay: 'bg-black/60',
      },
      variants: {
        fullscreen: {
          false: {
            content: 'rounded ring-0',
            overlay: 'bg-green-500/60',
          },
        },
      },
    },
  },
});

This suggests that the variants.overlay.true.overlay path is not correctly recognized or processed by the UModal component's theming system, or there's a higher-priority default style overriding it.

Additional context

It would be beneficial to clarify the intended overriding priorities in docs generally of all components and have it unified. If this rule is broken somewhere this should be considered bug, like this one.

Logs

[init-qy]

This change hasn‘t been released yet, you can check this pr #5306