epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.48k stars 336 forks source link

Prefer vue v-bind instead of :style on dom elements in components. #2817

Open m0ksem opened 1 year ago

m0ksem commented 1 year ago

For example, it is required to use !important to restyle va-card because it explicitly has background declared in style attribute. That is not intuitive, so I'd prefer moving to CSS variables where in style tag we define new value for css variable, instead of style. It is pretty simple with v-bind.

Reproduce: Try to change va-card background with css without important and nothing happens.

BTW, --va-card-background-color is useless because even if it redefined background color from prop is taken. Consider deleting this css variable?

asvae commented 1 year ago

Can we try it on one component, review, then figure out if we want continue with that?

Would be nice to have an estimate on how much would it take.

m0ksem commented 1 year ago

Deal with https://github.com/epicmaxco/vuestic-ui/issues/3046 at first.