Linear gradients do not work with color modifier transform

[darylthornhill]

What happened?

When using the `ts/color/modifiers' plugin, and using a gradient in a token we get the error

`TypeError: Could not parse linear-gradient(90deg, #535353 12.8%, #434343 62.47%) as a color. Missing a plugin?

Temporarily im using patch-package to get around it just for looking for linear-gradient in the value string and exiting early. But other people may get this same issue.

Reproduction

just put the linear-gradient as a value of a color

e.g. click here for the configurator link

Expected output

Just for the gradient to use

Version

1.2.6

[jorenbroekema]

The expected output isn't clear to me, do you expect it to darken every color element within the linear-gradient? Or just don't modify it and return without throwing an error? Wouldn't that mean the color modification isn't happening; that seems undesirable to me as well.

This is former behavior is not supported but I suppose it could be a feature request if we wanted this. The latter (just ignoring) is also fine by me but it should at least throw some kind of warning otherwise the "exiting early" and not doing the color modification may go unnoticed.

[Blackbaud-ErikaMcVey]

@jorenbroekema I commented on a similar issue in the style-dictionary repo and it looks like you work on both, but figured I'd comment here as well.

Simplified example:

{
  "color": {
    "blue": {
      "$type": "color",
      "$value": "#0000ff"
    },
    "red": {
      "$type": "color",
      "$value": "#ff0000"
    },
    "red_40_percent": {
      "$type": "color",
      "$value": "rgba({color.red}, .4)"
    },
    "gradient": {
      "$type": "color",
      "$value": "linear-gradient(45deg, rgba({color.blue}, .4), rgba({color.red}, .4))"
    },
  }
}

for the CSS custom property output, I would expect the hexrgba transform to convert those referenced hex values to the correct rgb values:

--color-blue: #0000ff;
--color-red: #ff0000;
--color-red_40_percent: rgba(255, 0, 0, .4);
--color-gradient: linear-gradient(45deg, rgba(0, 0, 255, .4), rgba(255, 0, 0, .4));

instead I get:

--color-blue: #0000ff;
--color-red: #ff0000;
--color-red_40_percent: rgba(var(--color-red), .4);
--color-gradient: linear-gradient(45deg, rgba(var(--color-blue), .4), rgba(var(--color-red), .4));

Interestingly, I also have many box shadow tokens that look like:

"shadow": {
  "$type": "boxShadow",
  "$value": 
    {
      "x": "0",
      "y": "1",
      "blur": "1",
      "spread": "0",
      "color": "rgba({color.blue}, .4)",
      "type": "dropShadow"
    }
  }
}

and those do get output the way I'd expect, with the rgba value correctly transformed:

--shadow: 0 1px 1px 0 rgba(0, 0, 255, .4)

Obviously they're different types with different transforms applied to them, but I would expect rgba with referenced tokens to behave consistently.