Multiple values for a token (modes), or access to "inheritance stack for references"??

[chris-dura]

So, our iOS SDK devs would like some custom Swift syntax to leverage some iOS system level things for light/dark modes, but also so we can scale it up to handle multiple modes.

The desired output for a colorPrimary token would be something like this...

open var colorPrimary: UIColor { UIColor(light: colorRed30, dark: colorRed20, highcontrast: colorRed10) } 

My folder structure is something like this:

tokens/
├─ core/
│   └── color.js
│  
├─ mode/
│  ├─ dark/
│  │   └── color.js
│  ├─ highcontrast/
│  │   └── color.js

But, by the time the tokens get to my custom formatter, they've already been Deep Merged, so the colorPrimary value only has the highcontrast value (eg, colorRed10)... so in my output logic in the template, I end up with:

open var colorPrimary: UIColor { UIColor(light: colorRed10, dark: colorRed10, highcontrast: colorRed10) } 

So, my question...

What approach should I take to be able to get the separate values for all modes and output them in the same template like this?

(The best I could come up with is to "pre-generate" the modes tokens as standalone outputs, then look them up in the "main" output?)

[moatorres]

Sharing a possible workaround to "pre-generate" the tokens from a "central" source, in case anyone lands here looking for one.

Let's say we have a JSON file that was exported from our central source in the following structure:

color-scales.json

[{ "group": "color", "token": "white-100", "light": "#fafafa", "dark": "#f1f1f1", "highcontrast": "#ffffff" }]

We could generate *.token.json files in style-dictionary's expected structure.

dictionary-builder.js

import * as colorScales from '../data/color-scales.json'

function dictionaryBuilder(jsonData, mode) {
  const metadata = jsonData.reduce((acc, color) => {
    acc[color.token] = {
      value: color[mode],
    }
    return acc
  }, {})

  return { color: metadata }
}

const lightColors = dictionaryBuilder(colorScales, 'light') // { color: { "white-100": { value: "#fafafa" } } }
const darkColors = dictionaryBuilder(colorScales, 'dark') // { color: { "white-100": { value: "#f1f1f1" } } }

fs.writeFile('tokens/mode/light/color.tokens.json', lightColors)
fs.writeFile('tokens/mode/dark/color.tokens.json', darkColors)

Then use our token files as the "source" on our style-dictionary configuration:

generate-outputs.js

const generator = require('style-dictionary')

function createConfig(mode) {
  return {
    source: [`tokens/mode/${mode}/*.tokens.json`],
    platforms: {
      js: {
        transformGroup: 'js',
        buildPath: `build/js/`,
        files: [
          {
            destination: `mode/${mode}/color.js`,
            format: 'javascript/es6',
          },
        ],
      },
    },
  }
}

generator.extend(createConfig('light')).buildAllPlatforms()
generator.extend(createConfig('dark')).buildAllPlatforms()

That way we can manage tokens outside the "code editor" (using a management tool or a simple spreadsheet to serve as our GUI holding the multiple values of a token), then transform them to style-dictionary's expected structure and generate the desired output files for each "mode". We could use stream pipelines (using a Writable in Node.js) so we don't actually have to generate intermediate files.