How to alias RGB with custom Alpha?

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?

[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})",
		}
	}
}

[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