Custom Names for CSS Variables

Hi,

I’ve just discovered the beauty of the global CSS variables provided by your plugin. It’s a great timesaver, since I’ve realized I can link those colors to my custom theme without the need to manualy copy them. And naturally, change them later from the palette.

May I just suggest one improvement? ??
I’d like to have the possibility to choose my own names for the variables.

Use cases:

1. I tend to include little “notes” in the color names (e.g.: Light Gray (92%), Deep Gray (40%)) to distinguish between them. In this case, it’s the level of the brightness. When I deside to use 90% brightness instead of 92%, I change the note. But it means the name of the variable changes too and the connection is broken. In this case the custom names of the variables would be just “LightGray” and “DeepGray”.

2. The names of the colors reflecting their real color don’t necessarily reflect their usage. I can name the color e.g. “Bright Red”, but in the theme, I’d like to assign it to the SCSS variable named “heading-color” or primary-color.

Sure, I can use $heading-color: var(--BrightRed); in my theme, but when I decide to use another color from the palette, e.g. “Bright Red (alternative)”, I’d need to rewrite the rule in theme’s CSS. It would be better to have to rule like $heading-color: var(--HeadingColor); and then just assign the right variable in the Central Color Palette.

And when I’d decided to use Navy Blue for the headings I’d just change the name of the CSS variable in CCP.

The current way of generating CSS names could be used as fallback. Or if the name of the CSS variable was deleted, it wouldn’t be exported.

Yes, I’m aware I can name the colors in the Palette by their usage, so Navy Blue becomes Primary Color. But sometimes, when you use similar colors, it’s better to have them named this way to distinguish one from another.

Hope it all makes sense to you ??

Thanks
Petr