Join the Webstudio community

Updated 7 months ago

Global Colors/ Variants?

At a glance
Is there a function for global Colors ? Cant find it.
I now that the colors are supposed to be used in the tokens, but for starting it would be very nice.
Thanks πŸ™‚
1
B
b
O
26 comments
We are working on css custom properties support which will enable having global colors.
I was going to ask a very beginner's question, but I'm not entirely is this is about the same thing. So I know I can use the "convert to token" button in "style sources" to make multiple elements across a site share properties. I have now put my colour palette as JSON inside a variable. But I don't see a way to reference that variable in the colour selector for the element. So am I able to fill out things like typefaces or colours or point sizes through a variable currently? Or only share them by using a token. Example being I decide a particular shade of purple is a little too dark and want to edit it across text, backgrounds, buttons, IDK.
Currently styles sharing works using tokens only.
Css variables will be released next.
Okay, thanks! I will keep an eye out
I have a proposal :
I know you are inspired a bit by Webflow for the UI/UX but I have a different proposal that can make the difference.
I put the illustrated image.
The goal is that when the globals are accessible, we can directly have the colors in the menu instead of a colorimetry, and leave the colorimetry in a second level, when we press the plus (the first round icon).

Reason 1: Because we will rarely use the colorimetry except to find a specific color, usually in advance we have the colors, that's why leaving it in the second level would be better.
Reason 2: the color choice interface will be less large and invasive since the colorimetric will be after clicking on the + icon (in the second level)
Reason 3: This allows us to be more efficient, and work with the essentials, what we generally need.
Attachment
change-color.png
So basically primary UI for colors would be the swatches and only if you want to add a new swatch you would open colorimetry?
The plan is to use css variables. So swatches would be bascially css variables colors.

Webflow right now allows to do this by creating a binding, so if you want to see predefined colors, you click the little purple button
Attachment
image.png
We also use this purple button to use variables in settings, so these will also be in the style panel soon.
I was not planing on adding swatches into the color picker tool at all.
I think would make more sense to just autocomplete variable as keyword in text and color controls
yeah that would be another quick access to variables/swatches
could be both, autocomplete or click the purple binding button
color picker itself becomes less relevant in the input if you are using predefined colors, you would just rarely use it I guess, that's it
you would use it when you experiment with different colors to find the right one and then store it in a variable as part of the design system
Thank you for taking the time to answer, Yes, you interpreted my words well. Given that we often work mainly with pre-established colors
So prioritize variables instead of colorimetrics.
Think about daily use, repeated tasks.
When we go to look for a color, we usually go directly to the pre-established variables instead of having the whole colorimetry menu, leaving it in second place.
because it forces me to do 2 clicks instead of 1 to search for a variable.
If you make a color system use it first and then search in order to have a search as recommended by @TrySound
This is just a suggestion. Because yes the webflow side is well thought out, but I know we can get ahead of ourselves on this kind of details
Autocomplete list and binding list are both 1 click/key press away
In this case you have answered my concern. THANKS !
Just to confirm, so this isn't currently deployed on the hosted editor, but will be soonish? OR is this currently possible and I'm missing something in the UI?
I do kinda like the swtaches from a visual poin of view, but totally agree that typing a variable/CSS class probably more consistent
WIP = Work In Progress 😁
Thanks. I was not sure if
Webflow right now allows to do this
means in the development branch or if it should be deployed and I'm not looking in the right place.
Add a reply
Sign up and join the conversation on Discord