When aliasing a color variable to another (img 1), or using it directly on an element (img 2), we should be able to override the opacity without the need to create a variable for each transparency variation:
It’s virtually impossible to have a solid emphasis-level management for colors right now since it doesn’t make sense to add opacity to your “first tier tokens” and palettes in order to have variations on your aliased ones. Hopefully it gets added.
Hey all! PM for the variables stream here. Would love to understand more as we’ve seen this request a lot. In the example above where @Equinusocio has brand/40 as a variable, if it were set to 50% opacity, how would you represent that in code? What would the equivalent of this be in css or on whatever platform you’re outputting to?
I want to make sure we’re approaching this in the right way, so any info here would help.
We’re hitting this same issue. We’re setting semantic usage of Primary, secondary and tertiary labels which are percentages of solid at the primitive level.
Let’s say we have color-red and background variables where background is an alias of color-red but 20% transparent. If we output to CSS we have a couple of ways.
The colorspace can be any of the supported ones by Figma (HSL, RGB, etc…). Unfortunately, the color space is mandatory in color-mix() function. Returns a --color-red fill with 80% opacity (or 20% transparency).
2. Using relative colors (less supported)
--color-red: #ff0000;
--background: rgb(from var(--color-red) r g b / 20%);
This is more intuitive and produces a red 20% without doing mental calc. If using different color spaces, the returned channels are different. Eg.
--color-red: #ff0000;
--background: oklch(from var(--color-red) l c h / 20%);
With this new function, we can also perform calculations on the channels.
--color-red: #ff0000;
--background: rgb(from var(--color-red) r calc(g - 50) b / 20%);
The above solutions keep the variables dynamic preventing their values from becoming fixed. If we change color-red, also background will change
There is also a third option, using HEX colors with alpha channels, which is supported everywhere but requires values to be in any RGB color space and static values, losin aliases.
