Style-dictionary: How to alias RGB with custom Alpha?

[MrX8503]

Style Dictionary v2.10.2

I would like to do the following:

{
  "color": {
    "font": {
      "primary": { "value": "{color.base.grey.90.value}" },
      "secondary": {
        "value": {
          "r": "{color.base.grey.90.value.r}",
          "g": "{color.base.grey.90.value.g}",
          "b": "{color.base.grey.90.value.b}",
          "a": 0.2
        }
      }
    }
  }
}

But I get the following --color-font-secondary: rgba(NaN, NaN, NaN, 0.2);. Am I missing something? Is there a better way to reference a color, but change the opacity?

[dbanksdesign]

Apologies for the delayed response. I'm trying to figure out a way to do this right now and can't get it to work. We are working on the next major release (3.0) that I believe should make this possible. Let me try to get something working and get back to you.

[MrX8503]

Awesome. Thank you for looking into this.

We needed this working right away, so my workaround is:

{
  "color": {
    "base": {
      "grey": {
        "90": { "value": "#252525", "rgb": "37,37,37" }
      }
    }
  }
}

Not ideal, but works for now until a better solution comes along. Looking fwd to v3. You guys are doing really great work here.

[henry-wr]

@MrX8503 note with the workaround you described you now have 2 attributes for each colour token: value and rgb , which can get a bit tricky when you need to update it (ensuring both attributes resolve to the same colour).

I had the same workaround and found it inconvenient when I had to update colour tokens, so I did this instead:

{
   "color": {
    "system": {
        "base": {
          "rgb": "0,62,82",
          "alpha": "1",
          "value": "rgba({color.system.base.rgb}, {color.system.base.alpha})"
        },
        "500": {
          "rgb": "{color.system.base.rgb}",
          "alpha": "0.9",
          "value": "rgba({color.system.500.rgb}, {color.system.500.alpha})",
        }
    }
}

[MrX8503]

@henry-wr cool, thanks for the workaround. It's more to write, but less error prone.

[Haemp]

@henry-wr that is a very neat approach but will this work with transforms? My understanding is that aliasing applies after transforms in which case you won't be able to transform the composed rgba into any other color representation - is that right?

[dbanksdesign]

In the next version of Style Dictionary, 3.0, we are adding the ability to have transitive transforms. This would get around the issue with transforms that @Haemp mentions. Here is an example that shows how to add transparency to colors two different ways. By splitting up the RGB or HSL channels and combining them into a single value, or by defining a custom _transitive_ transform that modifies a color (adding transparency or brightening, darkening, etc.).

To try a pre-release of 3.0 you can install it with:

npm install style-dictionary@next

[dbanksdesign]

Just checking in on this, does the example I provided for the upcoming version solve this? Let me know if there are other things I can do to help.

[chazzmoney]

This is solved as part of 3.0 (#636). Check out the example at https://github.com/amzn/style-dictionary/tree/main/examples/advanced/transitive-transforms