WAIT: Css variable and HSLA

I have created a css variable in the body, and it holds the hsl value of the color I need.

–my-color: 27,74%,55%;

When I set the background color within the builder, in the raw field I write:


and before hit enter I can see it works fine.
As I hit enter the code changes to


Welcome to the forum, and thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Would you be so kind as to provide a screencast showing and explaining what’s going on?

Best regards,

Aaah I see. Please put the variables in :root{} instead of the body tag. Then it works as expected :slight_smile:

Changed body to :root, no luck. Same behaviour when hitting enter.

I created a new template, set the background color → issue persist.
I moved all the :root{variables} in the custom CSS of Bricks settings → issue persist.
I moved my variable in the css element itself, as of root{–my-color:13,13%,13%;}, still same issue.
I declared another variable “–alpha:0.5”, in the raw field I write:

hsla(var(–my-color),var(–alpha)) → hit enter → hsla(var(–bookings–alpha))

The issue keeps being there.
I wonder If I am doing something wrong elsewhere as I am confident it works if you say so.

Would you be so kind as to send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase? :face_with_monocle:

I think your syntax is wrong:

–base-trans-80: hsla(var(–base-h), var(–base-s), var(–base-l), .8);

Try it like this and use var(–base-trans-80) in the colorfield.
You need to store the whole color in a variable (as far I tested it).