salesforce-ux/theo

Allows resolving of aliases from separate token files

grelas opened this issue · 1 comments

grelas commented

Is there support for referencing a token alias from a separate file without alias duplication?

Currently, we organize our token files separately like so:

design-tokens
|_  colors.json
|_  typography.json
|_  borders.json
// etc

We define our colors in colors.json.

{
  "aliases": {
    "color-black": "#000000"
    // etc
  },
  "props": [//etc]
}

And define our borders in borders.json. Here I'm attempting to use the color-black token.

{
  "aliases": {
    "border-divider-color": "{!color-black}"
    // etc
  },
  "props": [//etc]
}

In the above example, when we build the tokens, the border-divider-color token resolves to the string {!color-black} and not #000000.

After looking into the documentation, Theo allows us to “import” other files, but the downside is that it pulls in all of the imported tokens during build. For example, when I import the colors into “borders.json” like so:

{ 
  "imports": [
    "./colors.json"  
  ],  
  "aliases": {
     "border-divider-color": "{!color-black}"
     // etc
  },
 "props": [//etc]
}

The output (format is SCSS in the example) duplicates the color variables:

$color-black: #000000;
// etc
$border-divider-color: #000000;

We're thinking about creating an index.json which imports all the token files in the right dependency order, but the downside would be not being able to selectively import a needed token file (i.e. for documentation purposes or certain applications not needing all tokens).