Incorrect token type for Figma variable with an alias

[andrewpucci]

I have an issue where dimension tokens are being exported as color tokens. In the sample below, I'd expect the space.component.button.inside tokens to be dimension, not color tokens.

Here is an example file with Figma variables set up with aliases that produce this output.
https://www.figma.com/file/1eQQNyiQprQJ8GlJnjnDzT/Untitled?type=design&node-id=0%3A1&mode=design&t=axtP1XAWGj3kvM9x-1

{
  "dimension": {
    "default": {
      "base": {
        "25": {
          "type": "dimension",
          "value": 4,
          "extensions": {
            "org.lukasoppermann.figmaDesignTokens": {
              "mode": "Default",
              "collection": "dimension",
              "scopes": [
                "ALL_SCOPES"
              ],
              "variableId": "VariableID:1:3",
              "exportKey": "variables"
            }
          }
        },
        "50": {
          "type": "dimension",
          "value": 8,
          "extensions": {
            "org.lukasoppermann.figmaDesignTokens": {
              "mode": "Default",
              "collection": "dimension",
              "scopes": [
                "ALL_SCOPES"
              ],
              "variableId": "VariableID:1:4",
              "exportKey": "variables"
            }
          }
        },
        "75": {
          "type": "dimension",
          "value": 12,
          "extensions": {
            "org.lukasoppermann.figmaDesignTokens": {
              "mode": "Default",
              "collection": "dimension",
              "scopes": [
                "ALL_SCOPES"
              ],
              "variableId": "VariableID:1:5",
              "exportKey": "variables"
            }
          }
        },
        "100": {
          "type": "dimension",
          "value": 16,
          "extensions": {
            "org.lukasoppermann.figmaDesignTokens": {
              "mode": "Default",
              "collection": "dimension",
              "scopes": [
                "ALL_SCOPES"
              ],
              "variableId": "VariableID:1:6",
              "exportKey": "variables"
            }
          }
        },
        "125": {
          "type": "dimension",
          "value": 20,
          "extensions": {
            "org.lukasoppermann.figmaDesignTokens": {
              "mode": "Default",
              "collection": "dimension",
              "scopes": [
                "ALL_SCOPES"
              ],
              "variableId": "VariableID:1:7",
              "exportKey": "variables"
            }
          }
        },
        "150": {
          "type": "dimension",
          "value": 24,
          "extensions": {
            "org.lukasoppermann.figmaDesignTokens": {
              "mode": "Default",
              "collection": "dimension",
              "scopes": [
                "ALL_SCOPES"
              ],
              "variableId": "VariableID:1:8",
              "exportKey": "variables"
            }
          }
        }
      }
    }
  },
  "space": {
    "default": {
      "semantic": {
        "inside": {
          "x-small": {
            "type": "dimension",
            "value": "{dimension.base.50}",
            "extensions": {
              "org.lukasoppermann.figmaDesignTokens": {
                "mode": "Default",
                "collection": "space",
                "scopes": [
                  "GAP"
                ],
                "variableId": "VariableID:1:10",
                "exportKey": "variables"
              }
            }
          },
          "small": {
            "type": "dimension",
            "value": "{dimension.base.75}",
            "extensions": {
              "org.lukasoppermann.figmaDesignTokens": {
                "mode": "Default",
                "collection": "space",
                "scopes": [
                  "GAP"
                ],
                "variableId": "VariableID:1:12",
                "exportKey": "variables"
              }
            }
          },
          "medium": {
            "type": "dimension",
            "value": "{dimension.base.100}",
            "extensions": {
              "org.lukasoppermann.figmaDesignTokens": {
                "mode": "Default",
                "collection": "space",
                "scopes": [
                  "GAP"
                ],
                "variableId": "VariableID:1:13",
                "exportKey": "variables"
              }
            }
          },
          "large": {
            "type": "dimension",
            "value": "{dimension.base.125}",
            "extensions": {
              "org.lukasoppermann.figmaDesignTokens": {
                "mode": "Default",
                "collection": "space",
                "scopes": [
                  "GAP"
                ],
                "variableId": "VariableID:1:14",
                "exportKey": "variables"
              }
            }
          },
          "x-large": {
            "type": "dimension",
            "value": "{dimension.base.150}",
            "extensions": {
              "org.lukasoppermann.figmaDesignTokens": {
                "mode": "Default",
                "collection": "space",
                "scopes": [
                  "GAP"
                ],
                "variableId": "VariableID:1:15",
                "exportKey": "variables"
              }
            }
          }
        }
      },
      "component": {
        "button": {
          "inside": {
            "start": {
              "type": "color",
              "value": "{space.semantic.inside.medium}",
              "extensions": {
                "org.lukasoppermann.figmaDesignTokens": {
                  "mode": "Default",
                  "collection": "space",
                  "scopes": [
                    "GAP"
                  ],
                  "variableId": "VariableID:1:17",
                  "exportKey": "variables"
                }
              }
            },
            "bottom": {
              "type": "color",
              "value": "{space.semantic.inside.small}",
              "extensions": {
                "org.lukasoppermann.figmaDesignTokens": {
                  "mode": "Default",
                  "collection": "space",
                  "scopes": [
                    "GAP"
                  ],
                  "variableId": "VariableID:1:18",
                  "exportKey": "variables"
                }
              }
            },
            "end": {
              "type": "color",
              "value": "{space.semantic.inside.medium}",
              "extensions": {
                "org.lukasoppermann.figmaDesignTokens": {
                  "mode": "Default",
                  "collection": "space",
                  "scopes": [
                    "GAP"
                  ],
                  "variableId": "VariableID:1:19",
                  "exportKey": "variables"
                }
              }
            },
            "top": {
              "type": "color",
              "value": "{space.semantic.inside.small}",
              "extensions": {
                "org.lukasoppermann.figmaDesignTokens": {
                  "mode": "Default",
                  "collection": "space",
                  "scopes": [
                    "GAP"
                  ],
                  "variableId": "VariableID:1:20",
                  "exportKey": "variables"
                }
              }
            }
          }
        }
      }
    }
  }
}

[JackHowa]

This repo is awesome and your focus on the spec too. I want to get into working with the spec as defining your own can be tough. I noticed you were looking for more dev help on this project from your bio. Let me know if I can help in the implementation on this 👍 @lukasoppermann

In any case, I work with Andrew. A few things I've noticed so far:

• The type is being set so that's good because the spec seems intent on having a type: "A token's type can be set directly by giving it a $type property specifying the chosen type. Alternatively, it can inherit a type from one of its parent groups, or be an alias of a token that has the desired type."
• color type seems to be the default type for handling variables

  design-tokens/src/utilities/getVariables.ts

  Line 11 in bec866a

  let category: tokenCategoryType = 'color'

  . Yet the output here does not have the blend mode set so I don't think that this color type is getting all the way to the color category

  design-tokens/src/transformer/standardTransformer.ts

  Line 274 in bec866a

  blendMode: values.fill.blendMode?.toLowerCase() || 'normal'

• Yet it is a fallback for object value.

  design-tokens/src/utilities/getVariableTypeByValue.ts

  Lines 4 to 5 in bec866a

  	if (typeof value === 'object') return 'color'
  	if (typeof value === 'string') return 'string'

  Since we're working with aliases of aliases, I wonder if the object value may be getting set. We're not having issues with single alias values. (Based on product requirements, we're working with aliases of aliases that can inherit based on user preference.)

Based on the observations and figma linked, I was curious about how best to approach this in your experience. I noticed that there were integration tests including aliases in the standard tokens json.

Since this is using a color, it would be hard to test a non-color type.

design-tokens/tests/files/standard-tokens.json

Line 674 in bec866a

"value": "{color.colors.single blue}",

      "ref blue": {
        "description": "Some other description",
        "type": "color",
        "value": "{color.colors.single blue}",
        "blendMode": "normal",
        "extensions": {
          "org.lukasoppermann.figmaDesignTokens": {
            "styleId": "S:a466a5c4f753617558885425bf0c42b7a53fcda4,",
            "exportKey": "color",
            "alias": "color.colors.single blue"
          }
        }
      },

Thanks so much for the time!