Color variables

[johnsicili]

Having color variables/saved colors speeds up development and makes it easy to globally update a color.

Would love to be able to:

• Save colors to be reused
• Give them a name (e.g., "Primary")
• Delete them
• Edit them

[kof]

Would you see color variables as a separate UI? I could imagine having a generic UI for variables like figma has that also works for colors

[kof]

I get it, but a color could be just as easily a variable, see figma variables

[johnsicili]

Correct, my suggestion was the color swatches that Webflow has, or something similar where I can reference a defined color in the UI.

Yeah true @taylornowotny that's the best way to do it now. I think when this really comes into play is when I want to reuse a color for different properties.

So lets say I have my primary color that I want to easily reference when adding a border, a background, or text color. In this case I would need to go copy the color that I used on one of my tokens (e.g., background-primary) and then paste it into my new token (e.g, border-primary). In this case it wouldn't make sense to create a token for each one, rather just have like a card token where I can easily select my primary color swatch from the UI.

[taylornowotny]

Yes @kof the plan is for variables to have a range of data types, hex value for color being one of them.

@johnsicili That would allow you to use the same color variable across multiple properties.

[kof]

I think color picker could just have a convenient access to color variables to pick a design system color directly from color picker

[taylornowotny]

Yea that would be much better than swatches

[johnsicili]

Launched with CSS vars! https://www.youtube.com/watch?v=Th3XRwSltLs