Creating a hovered color from an existing color

[yangwooseong]

I want to add a color to the result file that changes when hovered over a certain color. The logic that changes when hovered applies a specific formula (e.g. reduce 10% lightness).

For example, when converting a JSON file like this one

{
  "color": {
      "black": {
          "value": "#000000d9",
          "type": "color"
      },
  }
}

I want the resulting CSS file to look like the one below.

--color-black: #000000d9,
--color-black-hovered: ${#000000d9 with 10% less lightness},

As far as I know, transform is a 1:1 transformation, so I can't create multiple css variables from one token. Is there any way around this. I tried to access styleDictionary.properties as well as styleDictionary.tokens like https://www.michaelmang.dev/blog/generating-design-token-theme-shades-with-style-dictionary suggests, but it was empty object. FYI, current config is https://github.com/channel-io/bezier-react/blob/main/packages/bezier-tokens/scripts/build-tokens.ts

[yangwooseong]

I think I can do this by registering a transform that applies the desired transformation to another SD object, building, and then merging the files.

[astjohnpaycor]

I am also trying to do this exact same thing.

[yangwooseong]

https://github.com/channel-io/bezier-react/blob/main/packages/bezier-tokens/scripts/lib/format.ts I made custom format