Style-dictionary: Add support for variable references in output

[dbanksdesign]

This would be useful to see reference chain in the generated files. Although would need to only be used for files that have all properties in them or there might be errors.

[chazzmoney]

The question here is whether this is a use case that we see as being valuable. It isn't quite on the path of "enable end-to-end consistency of design atoms across platforms / deliverables.

[sarahbethfederman]

I would definitely find this useful for use in supporting tooling. I would love to have a vscode plugin that shows the reference chain on hover when using a token

[didoo]

Let's keep in mind also that a token "A" can reference as "alias" another token, let's say "B", who can reference another token, "C" , who can reference another token, "D", who finally references a key/value pair, let's say "XYZ / 12px". In that case, which one is the reference to show for "A"? "B" or "XYZ" ?

[chazzmoney]

Or do we want to show the entire chain?

XYZ, D, C, B, A

[dbanksdesign]

The issue in showing the entire chain in the output like this:

$A: $B;
$B: $C;
$C: $D;
$D: $XYZ;
$XYZ: 12px;

Is that file would need to include all tokens to ensure the file is valid. Or if we don't we at least need to make sure the full variable chain is there, but to also not duplicate variable definitions or that might cause issues.

Now a VSCode plugin that shows the reference chain in a style dictionary...

[lukasoppermann]

If I understand this correctly, it would mean in css I would have:

--core-primary-color: #0022AA;
/*...*/
--interactive-color: var(--core-primary-color);
/*...*/
--button-color-primary: var(--interactive-color);

This would be very helpful for the goal of building a somewhat "self-documenting" and human readable system. Since the idea of design tokens is to provide named entities and bring meaning into the whole mess, I'd argue a referenced variable is very valuable. It helps me to understand why this color is used for the button color, vs. just --button-color-primary: #0022AA

[dbanksdesign]

This is in 3.0 and you can get it today with npm install style-dictionary@next. For users of the future, this feature is available in Style Dictionary starting with 3.0.