Automatically generate variables for colors and fonts + custom prefix options

Beta
#1

It would be great to have variables for colors and fonts as well included in the variables list. Either automatically generated as you add colors and fonts or by clicking a button in the color and font managers which would then generate the variables?

A custom prefix option per variable group might be good to have too. So you could have --color- for colors and --font-for fonts or whatever you’d want it to be. This would also help prevent conflicts with other plugins that may include CSS variables.

1 Like
#2

This comes up every once in a while. I can start the feature, but I think it’ll be a little more work then I initially thought to get controls related to the prefix. Have a great day.

2 Likes
#3

We just must make sure custom font and color variables stay as they were, because I add custom prefixes to them since the introduction of the feature. My all colors start with clr- and fonts with ft-. In combination with naming conventions sucs as clr-brand-primary, it makes it easy to port elements between websites.

1 Like
#4

Yeah, if the variable names could be generated based on the color title you enter in the color manager that might cover it? So a color named Brand Primary would result in a variable name of {{custom-prefix}}-brand-primary.