Add support for color modifiers lighten, darken, alpha, mix

[bzupancic]

I see support for aliases like 'rgba($colors.brand, 0.5)' and I think it's awesome!

Thinking of ways to expand on aliases, I would love a way to manipulate the hue, saturation, lightness, and alpha of a specified color. For example:

{ "colors": { "primary": { "base": "hsla(219, 99%, 53%, 100%)", "hover": "scale($colors.primary.base, lightness: 8%)", "active": "scale($colors.primary.base, lightness: -6%)", "selected": "scale($colors.primary.base, lightness: 10%)", }, etc. }

https://sass-lang.com/documentation/modules

[six7]

I like that! I have no experience manipulating colors via Javascript, but after quick research I think that should be easy to implement! I think we might have to refactor the way we transform values currently to offer more flexibility for these sort of functions (I imagine there could be other use cases like this one in the future)

[mpaiva]

@bzupancic - I've been able to achieve what you want by using this approach:

       "secondary": {
            "hue": "176",
            "base": "#2AC9BE",
            "contrast-text": "#ffffff",
            "text-dark": "hsl($colors.secondary.hue, 90%,43%)",
            "main": "hsl($colors.secondary.hue, 76%,39%)",
            "light": "hsl($colors.secondary.hue, 89%,82%)",
            "dark": "hsl($colors.secondary.hue, 92%,25%)",
            "background": "hsla($colors.secondary.hue, 90%, 54%, 0.08)",
            "selected": "hsla($colors.secondary.hue, 90%, 54%, 0.08)",
            "border": "hsla($colors.secondary.hue, 90%, 54%, 0.5)"

[bzupancic]

@mpaiva - thank you for the reply. Conceptually the model you use is close to what I am looking for. In fact I experimented with that model prior to posting an issue. There are a few limitations though, that I don't know how to overcome:

1. Setting the 'hue' on secondary creates an 'blank' color token, that if clicked would actually resolve to '#117766' (from your example of "hue": "176") in Figma. So after every update to my styles I would have to go through and manually remove any utility tokens.
2. Math isn't possible on the hue/saturation/lightness values, so there isn't a way to set a base color and then have fine grain control over the lightness for different states. (While I could set "hover-lightness": "8%" and "selected-lightness": "10%", etc. I don't use the same values across hues, so it would create more work and make the JSON much less readable.)

@six7 - totally agree! I imagine being able to build out color palettes in the future using math, similar to the way I build type scales, and I like that idea a lot.

[six7]

That would be so cool. Being able to create tokens dynamically is where a lot of opportunity is hidden I believe. Especially when it comes to creating color and type scales.

[mpaiva]

I am using this structure successfully with the Material UI library. It is not as scalable as SASS, but the HSL support was a good addition to this plugin.

[AlexeyNovik]

I wonder if the color can be splitted into parts. I.e. hsla(100,50%,50%,1.0).h would give me value of "100" or same color (as primary color) $colors.primaryColor.s would give me "50", so I could reuse it with math.

[robcleaton]

Would be great to be able to apply something like this '$Primary + rgba (0,0,0,0.5)' for it to then work across multiple themes. This would be used for an instance of a hover state.

[kendrick]

@six7, is it possible to do interpolated math inside of color fields? For instance, I'm able to multiply and call roundTo in my typography tokens to build a modular scale. I'd love to be able to set individual base values for HSL and add/subtract saturation/lightness for hover or active states or manipulate the base hue to generate secondary and accent colors.

[six7]

Math currently works on the whole token, so math inside a hsla() string likely won't work, what would work however is if you'd extract each of the parts into their own token, perform math there, and then combine them with references: hsla({hue}, {saturation}, {lightness}, 1) - however that is probably super cumbersome. i don't want to bloat the ui with individual controls for hue, saturation and lightness, but maybe there's something there in the future to treat color tokens not just as a simple string but break it up into RGBA parts, HSLA parts which can all be using different values or even math.

feels like a different topic than this issue, though.

[kendrick]

That makes sense. Congrats on v97! 🎉

[0xtutti]

This is exactly an issue I was facing and wanted to work out. Seems like I'll have to wait until it's implemented. It would be a killer feature, one thing that would be great is if there was an integration with the great geenes plugin.

[AndySobol]

@six7 Hello! How does it work?

[six7]

I captured our plan on how we want to tackle this in https://github.com/six7/figma-tokens/issues/1166 - would love your feedback on it!

[six7]

Closing this issue, we'll work on this in #1166.