Proof of concept fix: token generation for dashboard

[TiddoLangerak]

Context: the existing build scripts don't generate any output for the dashboard tokens. #316

After some debugging, it appears that omod cannot resolve variables from different tokensets. The dashboard token sets exclusively refer to tokens in the origin set, and hence all their values end up empty.

Fortunately, there's an official npm package from tokens-studio to transform these figma tokens: https://www.npmjs.com/package/token-transformer

Unfortunately, that package also doesn't work 100% how we would want.

Our existing build takes all tokenSets, and generate outputs for each of them. I tried this with token-transformer too. token-transformer works slightly different though, and flattens the output. So if we want to have grouped outputs, we need to run it once per tokenset. And then to resolve all variables correctly, we need to:

• Pass all dependency token sets as inputs, such that the variables from these can be found.
• Also pass the dependency token sets as "excludes", such that the dependencies themselves don't end up in the output.

E.g. in order to build "dashboard/darkMode", we'd need to pass:
inputs: dashboard/darkMode,origin,base
excludes: origin,base

The output will be just the dashboard/darkMode values, with values resolved from any of the sets.

So my first attempt was this:

for each tokenSet "targetSet":
    set all sets as input, and all but "targetSet" as excludes.

This means that for each tokenSet we can resolve variables from any other tokenSet.

Unfortunately, this is where I ran into issues: apparently, this doesn't quite work when there's overlap in naming between the tokensets. Specifically, since darkMode and lightMode share all the same keys, this would result in the lightMode file just being completely empty.

So from here, I had 2 options:

• Hardcode the dependencies, such that we can avoid conflicts between lightMode and darkMode.
• Figure out the actual dependencies from the data file

I managed to do the second. The data file has a "themes" section, which indicates which sets are needed for each theme, and which is the "target set". So we can use that.

The only caveat here is that this now doesn't include a standalone export for the "origin" set. Our current builds all include an "origin" set (with all the "reference only" values), but on this new build this will be gone. Now given that all of these are "reference only", I would assume they're not used anywhere in product, but I don't have enough context for this.

Lastly, the switch from omod -> token-transformer also has some smaller differences in output format:

• Hex values are now capitalised
• Colours without opacity no longer include the opacity. E.g. instead of #000000ff we would now get #000000. I don't know if this would break anything, advice needed.

---

Summary

• Switch to use the official token-transformer package such that we can properly resolve the references for dashboard/lightMode and dashboard/darkMode
• This has 2 potential breaking changes:
  • There's no longer an origin export
  • Colours without opacity are now 6-digit hex values instead of 8-digit hex values.