Reference platform config value in tokens

[SalimBensiali]

Hi,

I have a use case where I would like a token font.size.base to reference basePxFontSize defined in the platform config. I could not find any docs alluding to this being possible currently and had a look at the v4 branch but nothing there either.

Basically I would like a way to achieve the following:

font:
  size:
    base:
      value: '{$$platform.basePxFontSize}px'

where $$platform is some special way of referencing the config under platform (ie for both web and ios) in the below:

{
  "source": ["tokens/**/*.yml"],
  "platforms": {
    "web": {
      "transforms": ["attribute/cti", "name/cti/kebab", "color/hex", "size/rem"],
      "basePxFontSize": 16
    },
    "ios": {
      "transforms": ["attribute/cti", "name/cti/kebab", "color/hex", "size/rem"],
      "basePxFontSize": 14
    }
  }
}

[jorenbroekema]

It's not possible to reference something that isn't in the scope of the design tokens themselves. Design tokens files should be scoped to only include references to the tokens, I think it would be a bad idea to make tokens dependent on things that live in the scope of the design tokens tooling (e.g. style-dictionary -> platform config property).

So a tiny bit of deduplication here is necessary I'm afraid, where you have to specify the base px font size in the config as well as in the tokens somewhere.

Another option is to use some kind of special character and then use a custom transform to convert that to the configured base px font size, but that's a bit too hacky for my personal preference so I wouldn't really recommend this approach.

Slightly better option would be to do something like this:

# trick: you can add some metadata to your tokens file like so, if it doesn't have a "value" prop
# it's not considered a token and won't be treated as such or end up in the output
basePxFontSize: 16
font:
  size:
    base:
      value: '{$$platform.basePxFontSize}px'

const sd = new StyleDictionary({
  "source": ["tokens/**/*.yml"],
  "platforms": {
    "web": {
      "transforms": ["attribute/cti", "name/cti/kebab", "color/hex", "size/rem"],
    },
    "ios": {
      "transforms": ["attribute/cti", "name/cti/kebab", "color/hex", "size/rem"],
    }
  }
});
await sd.hasInitialized; // wait for initialization and sd.tokens prop to be available
const basePxFontSize = sd.tokens.basePxFontSize;
// mutate the sd instance "platforms" prop
sd.platforms.css.basePxFontSize = basePxFontSize; // could do the same for ios
// transforms haven't ran yet at this point

// they will when you call this method
await sd.buildAllPlatforms();

I haven't tested this personally but something like that should work