The idea behind this feature is to allow you to quickly and easily transform your existing palettes created with Bricks into reusable CSS variables and leverage all the corresponding benefits of dynamic data applied to CSS values.
Where can I find it inside the builder?
The converter is visible inside the Class Manager when hovering a static color created using the Vanilla Bricks Palette. You can easily recognize the static colors inside the Color Manager: they are slightly grayed compared to the other ones, and contain a unique icon when hovered:
Here is how it looks inside the native color popup:
How does it work?
When you click on the converter icon, the following steps are automated:
- a CSS variable is created based on the Color Name and AT will take care of enqueuing it on frontend
- The actual HEX/RGB/HSL value is assigned to the variable
- The static value is removed from the color object
Once the color has been converted, you get access to all the advanced features provided by the Color Manager:
… here is how it looks now in the native color popup:
Note that the color is exactly the same, but now you’re using a dynamic value and you can easily manage it inside the Color Manager.
