Hey there, I've been putting together a custom vue component that includes a color prop.
I want to ensure this color can be matched to all different scenarios it may encounter. The main cases I'm considering include:
- Standard browser colors like
white,black, etc. - Hex/RGB color codes (or any other formats browsers can interpret).
- Custom color variables (for example:
var(--pa-primary-accent)
For the first two situations, simply passing the color and utilizing it should suffice. However, for the third case, if a user only provides pa-primary-accent, then I need to append it with var(--${color}). How can I create a solution that accommodates both scenarios seamlessly?
Here's a snippet of the code in question:
// Current implementation, breaks if user passes `white` for example.
computed: {
style () {
return `
background-color: var(--${this.bgColor});
`
},