I am trying to use a CSS variable in my design token, where the value is a color represented in HSL. In a regular CSS class, I would wrap the variable in an hsl function, e.g., hsl(var(–brand-green)). How would I do this in the design token? Is it even possible? This is what I have currently. The color of the token is displayed properly in the editor but when I select the color, the color of the element does not change since the style is not being applied correctly.
Hey @tim ! Welcome to the Builder Forum! I jsut tried that same color token in my code base and it worked for me as expected, I wonder if maybe there is some conflicting styles being applied to the block… could you share a content entry where you are seeing this?
If it is a rich text editor block, sometimes there are hidden inline styles. Browsers often copy over styles when you copy from another site… it might be worth hitting the Clear Styles button in the rich text editor to see if that helps:
