Encapsulation of themes for layers

[sanuy1997]

Package

v4.x

Description

Hello. I'm facing an issue in Nuxt 4. I want to render two buttons with different design systems on the same page, but their styles are overridden because when configuring app.config, they are merged across layers. This prevents layer isolation in the main application. Is it possible to configure passing this theme, for example, to UAPP, for their isolation?

Additional context

  ui: {
    button: {
      variants: {
        color: {
          'primary': '',
        },
        size: {
          'md': {
            base: 'px-8 py-2 gap-2 min-h-[42px] text-base',
          },
        },
      },
      compoundVariants: [{
        color: 'primary',
        variant: 'solid',
        class: 'text-inverted bg-[#830051] hover:bg-[#9a3374] active:bg-[#9a3374] disabled:bg-[#830051] aria-disabled:bg-[#830051] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
      }],
    },
  },
})

  ui: {
    button: {
      variants: {
        color: {
          'primary': '',
        },
        size: {
          'md': {
            base: 'px-10 py-4 gap-2 min-h-[80px] text-base',
          },
        },
      },
      compoundVariants: [{
        color: 'primary',
        variant: 'solid',
        class: 'text-inverted bg-[#000] hover:bg-[#fff] active:bg-[#9a3374] disabled:bg-[#830051] aria-disabled:bg-[#830051] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
      }],
    },
  },
})

[Bobakanoosh]

I believe https://ui.nuxt.com/docs/components/theme will solve the problem?

[sanuy1997]

I believe https://ui.nuxt.com/docs/components/theme will solve the problem?

Yes, exactly. But why didn't they extract the full structure like in app.config? Without compoundVariants, it's difficult to customize properties.

[Bobakanoosh]

I have #6031 to add variants