Using Math

A lot of times it may make sense to build your tokens with a scale in mind, such as a type scale or a spacing scale. What that means, is that a value uses another value, but does calculations with it.

For example, you may want your spacing.sm token reference the spacing.xs token, but multiply its value by 2. To do that, you can write the following as the token's value: {spacing.xs} * 2 (note the space between token and value)

You can also multiply with another token: {spacing.xs} * {spacing.scale}

where spacing.scale would be a token who's value could be for example 2.

Other use cases where this is helpful could be typography with font sizes referencing the previous token and multiply that with a type scale of e.g. 1.25.

Adding units#

The plugin cannot calculate if one of your tokens had the unit included (e.g. spacing.sm = 2rem). In that case you can either decide to remove the unit or append the unit after the operation (e.g. {spacing.xs} * {spacing.scale}rem)