Bricks Version: Beta 1.5
Browser: Chrome/Firefox/Firefox Dev/Edge
OS: Windows
URL:
Simple to test. Use a CSS Variable in the Gradient/Overlay tab, and it doesn’t output in the CSS.
Bricks Builder Settings: https://snipboard.io/vdfQNj.jpg
Output: https://snipboard.io/RUEYVp.jpg
Hi studioapollo,
Welcome to the forum and thanks for reaching out!
Please try the following: go to the List View of the color palette, click on the edit button of the color, enter var(–primary) into the RAW field and click on save. That should work.
What is still on our ToDo list is that the variable is output as a variable in the frontend and not as HEX.
Best regards,
timmse
I have a variable already saved to the colour pallet, but it still doesn’t work for the Gradient/Overlay.
Background is just empty on the frontend still.
I tested it again and recorded a video, check it out - maybe it will work for you 
Okay so I finally made it work, but it required me to clear the one I had saved, create a new one with a HEX first, then edit and add the variable after like you did.
Seems like a really strange way of setting it up though. Is your suggestion just a temporary workaround? Doesn’t feel very intuitive like this.
100% appreciate this is a beta and you’ve just revamped the colour system. I’ve only been using Bricks for a short time but very impressed with how comprehensive it is despite it’s young life. Keep up the good work regardless, and thank you for the quick & comprehensive response 
You’re welcome and thank you for your kind words.
It may be that the problem has arisen due to the “new” color palette, which is certainly not yet 100% perfect. But we are working on making it better 
I’ll mark the post as solved.
I don’t think this can be considered as solved.
Using Bricks 1.5 beta + ACSS2.0 beta
Selecting colors defined as variables in ACSS works fine for background, texts, … but when selecting one of these color variables in the gradient color picker it’s not working.
Confirmed that this is not working as expected. Pre-defined colors in the palette using variables cannot be used in overlay/gradients.
Also for shape dividers colors variables are not working.
This is definitely not working as of 1.5 RC1
Yes, correct … this is working now. But there is still a small issue:
If you select a css variable color AND make this css variable color transparent (with native Bricks transparency setting), THEN save the page => everything is working perfectly fine.
The issue is:
Say you left / reloaded the page in Bricks builder and you want to THEN (after reloading) edit the transparency settings and you click on your overlay-color (that had the transparency setting before), ALL stylings are lost and you have to redo all stylings again.
Could you please double check?
Editing the transparency of an existing color palette color with a CSS var value set under RAW works for me fine locally in RC2. Both on frontend & builder (also after reloading). Could you share a short screencast that illustrates the bug step-by-step?
Sure, I have made a short screenvideo with an image-overlay.
You will see, that using css variable and using it WITHOUT changing the transparency works perfectly fine.
As soon as I change the transparency AND come back to the same setting after reload, my color is swapped out and my transparency settings has gone.
Thanks so much for the video. Looks like there is something funky going on with the color palettes you are using.
The little green dot in the top right corner should only appear for the selected/active global color. But this green dot is added to all the orange colors in your palette (also visible in the screenshot you shared above).
If you create a new color palette with just one color + CSS variable, does the issue still occur?
Maybe you can export your palette, and share their .json files with me here as well, so I can have a look at your color palette data …
I found the issue. Due to visual color organization I added placeholder colors on the right side in every color row to achieve that every new ACSS color scheme starts on the left side in the next row.
The issue was that I did use the SAME color variable name and the SAME color value for all placeholder colors. I have now changed this and chose different color variable names colors, which solved the issue.
Thanks for guiding me into the right direction!
