Hey 🙂
I have a problem understanding the "new" variables in Webflow. I have already understood when and how to use the variables, but I don't understand how to control the opacity. As an example I have a base colour "primary dark", at a certain point I want to set the opacity of the background colour to 80%. Do I then have to create a new base colour "primary dark 0.8"? What happens if I then also need 50%? Or 26%? For me, this applies to text colours and background colours. What is the cleanest way for such cases?
Yeah for sure - you've pointed out a current limitation of the feature set for Webflow and Variables. As of right now, you can't modify opacity of a color variable. This is not a limitation of Relume necessarily - just an inherited one I guess.
Thank you for your answer 🙂 I didn't mean to question the Relume Library, sorry if it sounded like that 😄
Can you perhaps help me with how I should deal with situations like the one I described? Should I create countless variables or should I rather do without variables in such special cases and enter oldschool HEX values of different opacities directly in the Webflow style panel?
naw, any and all feedback is welcome Marvin! I guess it kind of depends on the project really. Setting the opacity of something, while in some use cases makes sense to do and in those cases, I would put the base color without the opacity into Webflow as a variable, and then apply the base color variable to the class and "detach variable" and then adjust the opacity from there.
If you are trying to systematically create a color palette/theme, I would change up the approach a little bit and try to get your colors to an absolute shade via Figma, and then transfer whatever the results of those colors are into Webflow as a variable.
I would need more context of the actual project to better understand the problem you are trying to solve by having colors with opacities. There is more than one way to do things, for sure.
