Possible to use math in tokens?

[bradfrost]

Hi there! I'm setting up Theo for my project and know that it's possible to reference other token names, which is great! I was wondering if it's possible to apply math functions to tokens.

I currently have a general sizing Sass variable that we're hoping to extract into tokens:

$size-base-unit: 0.5rem; // = 8px

We then use that size unit for our typography sizing and spacing, like so:

$font-size-xxs: size(1.25); // 10px
$font-size-sm: size(1.5); // 12px
$font-size-med: size(2); // 16px
$font-size-large: size(3); // 24px
$font-size-xl: size(5); // 40px

The gist is that altering the base size unit will affect the typography and spacing systems, which is pretty neat.

Is it possible to do this type of thing at the token level? Or do those font size token values need hard coded?

Thanks very much!

[aputinski]

I think this could be achieved with a custom transform. Here's an example that takes "50%" and converts it to "0.5".

https://github.com/salesforce-ux/theo/blob/master/lib/transforms/number.js

You could write a transform that tests for the size function and performs the calculation. The only problem will be getting the value of $size-base-unit inside that transform function. We have a similar function that converts rems to px. I take advantage of the fact that theo merges global metadata into each prop, so instead of referencing another token, you could store that value in global metadaata.

https://github.com/salesforce-ux/theo/blob/master/lib/transforms/unit.js

Hopefully that helps.

[bradfrost]

Awesome, thanks so much @aputinski! I'll hopefully find some time to poke around with it and will report back.