Remove Popover default color

[jones1008]

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.

Reproduction

Playground Link

[m0ksem]

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: #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.