search

antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
544 stars 39 forks source link

[config] Color shades Css variable option #149

Closed DerrikMilligan closed 3 months ago

DerrikMilligan commented 5 months ago

This PR adds a new config css.colorShadeCssVariables which slightly modifies how the generateColors 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 the bg-color or color props.

antoniandre commented 4 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?

DerrikMilligan commented 4 months ago

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.

antoniandre commented 3 months ago

Definitely makes sense now you're explaining the border case, thanks @DerrikMilligan!

antoniandre commented 3 months ago

Released in version 3.13.0