search

epicmaxco / vuestic-ui

Free and Open Source UI Library for Vue 3 🤘
https://vuestic.dev
MIT License
3.37k stars 327 forks source link

Remove Popover default color #4329

Open jones1008 opened 1 month ago

jones1008 commented 1 month ago

Vuestic-ui version: 1.9.11

Description

The default of the prop color of the Popover component is currently "#1b1a1f" as stated here.

As you can see in the screenshot, the background-color: var(--va-popover-content-background-color) of .va-popover__content is overwritten by the inline style background-color: #1b1a1. The CSS variable --va-popover-content-background-color is defined as --va-background-primary as you can see here. Optimally the default of the prop color should not overwrite this css rule of .va-popover__content.

One possible solution would be to set the default of the prop color to backgroundPrimary. But maybe it would make more sense to not have a default at all and just get the background-color from the CSS rule of .va-popover__content, and only overwrite it with an inline style, if the color prop is set.

grafik

Reproduction

Playground Link

m0ksem commented 1 month ago

Color props have higher priority over CSS variables right now. We're working on an intuitive instrument for CSS variables which is going to resolve this issue. Basically, color prop should become CSS variable.

More here: https://github.com/epicmaxco/vuestic-ui/pull/4261

Right now, you need to prefer color props over css variables. We're not able to calculate text colors, hover colors without js right now.