Open jones1008 opened 4 months 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.
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 stylebackground-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 propcolor
should not overwrite this css rule of.va-popover__content
.One possible solution would be to set the default of the prop
color
tobackgroundPrimary
. But maybe it would make more sense to not have a default at all and just get thebackground-color
from the CSS rule of.va-popover__content
, and only overwrite it with an inline style, if thecolor
prop is set.Reproduction
Playground Link