search

tokens-studio / sd-transforms

Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio
MIT License
185 stars 28 forks source link

[Bug]: HEXRGBA function override variable value #230

Closed silescream closed 9 months ago

silescream commented 9 months ago

What happened?

Hello! I have found some bug when I parse my tokens. For example, we have a variables: base-dark with "value": "#000000", overlay-gradient with "value": "linear-gradient(180deg, {base.dark} 0%, rgba({base.dark}, 0.00) 45%)".

When we're trying to parse overlay-gradient variable, we use HEXRGBA function because base-dark have HEX value and there is a bug. After parsing, we have --bg-overlay-gradient-1: rgba(0, 0, 0, 0.00); instead of --bg-overlay-gradient-1: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.00) 45%).

Reproduction

We just need to parse variable with gradient like this "linear-gradient(180deg, {base.dark} 0%, rgba({base.dark}, 0.00) 45%)".

base.dark variable must contain HEX value and HEXRGBA must be used

Expected output

No response

Version

0.5.5

jorenbroekema commented 9 months ago

Reproduction for latest sd-transforms version 0.12.0

Expected: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.00) 45%)

Actual: rgba(0, 0, 0, 0.00)

Seems this happens because the regex replace doesn't replace occurances of rgba(#hex, alpha) but rather when it finds a match, it throws the value away and creates a new one entirely, so this only works for colors that are exclusively rgba(#hex, alpha) format, but it doesn't work for colors that contain such patterns (and more).

Will take a look at your PR :) thanks!