Closed DerrikMilligan closed 3 months ago
Hey @DerrikMilligan, this looks good, and good that it's an option because it generates a lot of vars.
But I'm curious why you would need CSS variables for shades?
Atm, if you have provided a mint-green
color to Wave UI in the colors config, you can always use a class like .mint-green-dark3
for text or .mint-green-dark3--bg
for background on anything!
What would the CSS 3 var be for?
Hey @antoniandre! Thanks for getting to all my PR's! I really appreciate it.
The main purpose for this would be to have the option to use the shades on any elements that are not native to wave, but still part of the Vue project.
95% of the time you're correct the bg-color
or color
props cover what we need with the standard components. But there are times where we still have some elements that we have to use alongside the WaveUI components to achieve the UI that we are going for. The main things missing are like for border
, and creating all the shades with a --border
as well felt worse than just making the CSS variable available to use when needed.
Definitely makes sense now you're explaining the border case, thanks @DerrikMilligan!
Released in version 3.13.0
This PR adds a new config
css.colorShadeCssVariables
which slightly modifies how thegenerateColors
method works. It allows for that method to also generate CSS variables for all the shades as well giving easier access to use them when you have to have a component or HTML element that isn't a Wave component supporting thebg-color
orcolor
props.