The idea is to make the Global Swatches available in the css to be manipulated via custom css or javascript outside of the designer by utilizing CSS Custom Properties.
For example, if I setup a few color swatches as global; webflow could include them in the CSS like this:
:root {
/*Global Swatches*/
--primary: #000000;
--secondary: #111111;
--tertiary: #222222;
--quaternary: #333333;
--info: #444444;
--warning: #555555;
--danger: #666666;
--success: #777777;
--background: #888888;
}
This should be simple to implement and would open up many possibilities.
This way in your custom css code if you needed to reference a color swatch for something that webflow doesn't have any UI for changing, like webkit scrollbars as an example:
::-webkit-scrollbar-track {
background-color: var(--primary);
}
::-webkit-scrollbar {
width: 6px;
background-color: var(--primary);
}
::-webkit-scrollbar-thumb {
background-color: var(--secondary);
}
This has been done
Or maybe they can add ability to add color swatches as variables in embed popup so we can configure them as we want in our global custom code component.
Maybe they can add a checkbox in the color swatch settings like "Public" so we can select which color swatches will be available in front-end.
Yes please 😁
I second this: styles & global classes should appear/work as global vars in the CSS
Totally agree and it supports best practices and cleaner use to include variables