How to reference with alias tokens correctly

[imlastrebor]

Hi!

In Figma Tokens I've used aliases to refer values of the base colors. When I do style-dictionary build base colors appears correctly in _variables.scss file but aliases doesn't. Alias tokens get value: [object object]. I found that this can be fixed if instead of Colors.UI.Dark I use Colors.UI.Dark.value. I have to manually add that key reference.value.

Why is this happening? Am I doing something wrong? How this can be fixed so Style Dictionary would identify alias tokens used in Figma Tokens?

Simplified version of the Figma Tokens file:

{
  "Colors": {
    "UI": {
      "Dark": {
        "value": "#333333",
        "type": "color"
      }
    },
    "Components": {
      "Button": {
        "Button-Primary-BG": {
          "type": "color",
          "value": "{Colors.UI.Dark}"
        }
      }
    }
  }
}

This is how my _variables.scss looks likea after style-dictionary build:

:root {
  --sd-colors-ui-dark: #333333;
  --sd-components-button-button-primary-bg: [object Object];
}

[nahiyankhan]

Style Dictionary relies on the "value" field to know when to process and transform a design token. The architecture section in the documentation is a good read about it. https://amzn.github.io/style-dictionary/#/architecture

Here's another nifty documentation on how to make sure Figma Token's outputs play well with Style Dictionary. https://github.com/apart-edgar/figma-tokens-with-style-dictionary

[imlastrebor]

Thanks for the answer!

I found this: #746 yesterday and understood that Style Dictionary should work without value.

You can now reference other tokens without .value!

Did I understand this incorrectly?

[imlastrebor]

I run the token-transformer and now aliases have the right values. Thanks for this!

But I still wonder what was that release info I mentioned in last message. Should reference to other token work without value key and how that can be done?

[nahiyankhan]

Glad it worked out! And thanks for the link - I wasn't aware of that. I just tried it and it appears to work in our implementation 😮 (we are not using Figma tokens).