amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.93k stars 557 forks source link

color/hex8 not keeping the transparency definition #984

Closed burakukula closed 1 year ago

burakukula commented 1 year ago

Hey there!

I came across an issue with transforming transparent values. Or maybe this is just me doing something wrong. I am not quite sure, so this might be a problem on the implementation level on my end. Maybe you would be able to help me out.

Let's say what I am getting in my JSON file is something like:

"foo": {
  "background": {
    "value": "#FFFFFF00", <- this is transparent
    "type": "color"
  }
}

In my config I am defining some specific things to be able to export it for one of the platforms

 "my-export": {
      "transformGroup": "my-transform-group",
      "buildPath": "dist/",
      "files": [
        {
          "destination": "output.json",
          "format": "my-specific-format",
          "filter": "some filter"
        }
      ]
    }
 }

and here I have my definition of the transform group:

const myTransformGroup = {
  name: 'my-transform-group',
  transforms: [
    ...styleDictionaryFactory.transformGroup.js,
    'color/hex8',
    'and-custom-transform',
  ],
};

What I would expect is that specifying color/hex8 would allow me to keep the transparency definition - in that case #FFFFFF00, but it is unfortunately not working for me, and what I get in my output is:

"FooBackground": {
    "light": "#ffffffff",
    ...
  }

Maybe someone came across similar problem? Thanks a lot for any help!

burakukula commented 1 year ago

We learned that transformGroup.js is using 'color/hex' and it can not be overwritten. We solved that by using transforms instead and use color/hex8