Remove hex code and use variable from step 1 instead
Save
Behaviour is confusing and unpredictable when attempting to save variables as colour palette presets. At first, I had issues saving the variable, as nothing would happen when I pressed Enter or clicked the Save icon.
Later (when I recorded the videos), it started working. I now have two colours in my palette that appear as active (green dot) and cannot be selected (nothing happens when clicking them).
It’s a bit hard to describe. The videos show the issue as clearly as I can describe it. This very much looks like a bug to me, but I might just be misunderstanding the logic here.
Important follow-up: After replacing my magenta colour preset with my variable, the preset definitely no longer works.
I changed the variable so the colour is now brown, not magenta. Still, everything on my website is still magenta. I would need to manually update every class and element on my entire website now, because the colour preset is definitely broken.
It’s hard to follow the videos and find out what the actual problem is to be honest. It would be great if you could provide us with some exact steps to reproduce a possible problem.
I just set up a fresh (beta 2) demo site, created some custom colors in a WPCB SCSS snippet, added those colors to a custom palette in Bricks and was able to work with those colors without issues.
you’re importing lots of colors with CSS vars. Like var(--color-a), var(--color-b) and so on. And Bricks correctly imports those as shown in your video. But you do not add the CSS somewhere which translates those variables into actual colors (or at least you do not show it in the video).
I made you an admin account and am sending you a PM with the access data. New video:
Steps to Reproduce:
Open front page in Bricks
Pick e.g. a text element, go to Style > Typography
Edit any of the 4 preset colours
Remove its hex value
Put variable var(–fill) in
Save
Step 6 might not work on the first attempt. After that, the newly updated colour preset becomes un-selectable and none of the elements and classes on the website that use this colour are updated.
As you can see the first five color vars don’t have valid CSS color values in them. So what you’re trying to do results in an invalid CSS statement like color: 229, 105, 96;.
