Button color may not work properly in position absolute

[albertcito]

Environment

• Operating System: Darwin
• Node Version: v21.7.3
• Nuxt Version: 3.16.2
• CLI Version: 3.24.1
• Nitro Version: 2.11.8
• Package Manager: npm@10.5.0
• Builder: -
• User Config: extends, components, devtools, googleFonts, modules, runtimeConfig, compatibilityDate, typescript, build, vite, devServer, app, colorMode, spaLoadingTemplate, bugsnag
• Runtime Modules: @nuxtjs/google-fonts@3.2.0, @nuxt/ui@3.0.2, nuxt-bugsnag@8.4.0, @nuxt/devtools@2.3.2
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.0.2

Reproduction

Description

I try to make a design with position absolute. It works correctly when I use solid colors. But if I use soft or subtle variants it displays the background line anyway. Also, the color varies depending on the background color.

Is there a way to make it work with those colors?

Maybe the solution is to create variables for those colors instead of using opacity.

Additional context

No response

Logs