Shadow tokens that use a rgba() output colors as rgba(#hex, ..)

[six7]

It seems that shadow tokens that use a rgba() value won't transform the used value inside the rgba() function. That means if my tokens reference a hex value, we don't currently change that hex value to the required rgba() equivalent.

{
    "base": {
        "value": "#fff",
        "type": "color"
    },
        "rgb": {
        "value": "rgb(0, 0, 0)",
        "type": "color"
    },
    "shadow": {
        "type": "boxShadow",
        "value": [
            {
                "x": "0",
                "y": "1px",
                "blur": "1px",
                "spread": "0",
                "color": "rgba({rgb}, 0.15)",
                "type": "dropShadow"
            },
            {
                "x": "0",
                "y": "2px",
                "blur": "0",
                "spread": "0",
                "color": "rgba({base}, 0.15)",
                "type": "innerShadow"
            }
        ]
    }
}

Actual output

--sdShadow: 0 1px 1px 0 rgba(rgb(0, 0, 0), 0.15), 0 2px 0 0 rgba(#fff, 0.15);

Expected output

--sdShadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 2px 0 0 rgba(255, 255, 255, 0.15);

Configurator link

https://configurator.tokens.studio/#project=rVPdbsIgFH6Vht2oYVWX7MYX2O2SXVqz0ALK1kED1Gmavvs4pazFTecSG0I45/vO3wdtUKEkF9v0zSiJVqjJZJJkyKhaFyxDq2QNDnDNZvNZatU7k6YjZwiQDfYBVUksV/rDQEwTYgoztsFjNZEGiE9a1RWAztclvTe2pkJlCA/sSjMuDp5laATltSjpM7E7j3bm3NWbRywuSmZGY8DXDEegUGaskMQKGAlSve6JFiR3gWnXP4750Dyxngr1vtleEP+14bjxh852W4sw8nOOpQy6d3MRwyLNwLknZc18yTvOedST0+9Y9WChSqVDH21E0tv8UloHTxY4gTX9X3p3MztC1eeP7ENcrg4vPQf/Wn89lvjkhgK5fwaLkwsJ8NHDy+pwhpCXtf6LY9yDI/RyoV6EXjQyadzeOtnS5eP0TMigBNWqClLEzBbfTIOHKzRY3FIBeLNXSyCkZPqMBoM5/DduofYL

[jorenbroekema]

From 0.12.1 part of this issue has been resolved, namely that the rgba(#fff, 0.15) wthin a larger token is not resolved correctly.
Now, it is :)

However, the other part of the issue remains, which is that rgba(rgb(0,0,0), 0.15) is not resolved to rgba(0,0,0, 0.15).
Similarly, this occurs with other color formats as well when they are being cross referenced from one format to another, e.g. rgba(hsl(255, 0, 255), 0.15) should theoretically be resolvable.

I think it makes sense to solve at least rgb(a) within rgb(a) and resolve this ticket:

• rgba inside rgba
• rgb inside rgba
• rgb inside rgb
• will not solve rgba insde rgb since this is invalid, as the alpha value would be lost. I suppose we could make an exception if the alpha is 1 though

Then at least when people are being consistent in using rgb(a) format, they can use them in a nested way with references. I think that covers most people's use cases.

We can create a separate enhancement issue for:

• other examples of the same format within the same format e.g. hsla(hsl(), 0.15) and similar, this may be somewhat straightforward if we have the code that does this for rgb(a) already.
• using different formats within different formats e.g. rgba(hsl(255, 100, 50), 0.15), but I suspect the implementation of this could get pretty complex and maybe there isn't any demand for this niche use case.

But I only think that really makes sense if other formats are accepted in the figma plugin, if not, we don't need to get into it I think.