Improve typography sizing sync between Figma and code

[mimarz]

Todays solution is a bit brittle since Figma needs to mimic "em/rem" functionality which means its formula for typography based sizing needs to support this.

This does not translate 1:1 to code which means we need to mutate the formula during build for it to work as a CSS variable and media-query.

For example;

• The formula must start with floor(, we replace variable size.mode-font-size and interpolate em unit support.
• The outputted formula is also a bit more complex than it needs to be if we wrote it by hand.
• We only pick the medium size design-token, and ignore the other sizing modes needed in Figma.

A side-effect of this is that if end users want to change the formula, the build might break or translate wrong.

Given design-token

"1": {
  "$type": "dimension",
  "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *1)"
},

is transformed into

 --ds-sizing-1:  calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1);

@supports (width: round(down, .1em, 1px)) {
 --ds-sizing-1: round(down,  calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1), 0.0625rem);
  }

ideally we would want it to be

--ds-sizing-scale: var(--ds-sizing-step) / var(--ds-sizing-base);

--ds-sizing-1: calc(var(--ds-sizing-scale) * 1em);

@supports (width: round(down, .1em, 1px)) {
 --ds-sizing-1: round(down, calc(var(--ds-sizing-scale) * 1em), 0.0625rem);
  }

Figure out if there is a better way to handle this or if we should solve this in a different way.

Notes

• One option would be to ignore the size formula from design-tokens and use a predefined value format in our build script. The sizing design-tokens are just used as a schema for variables.
• Better warnings or/and document that this can not or should not be changed