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 extract the operation to its own token, and then append the unit after that new alias token (e.g. spacing.sm = {spacing.xs} * {spacing.scale} and then {spacing.sm}rem). However, we recommend to use unit-less tokens and instead rely on transformers such as Style Dictionary to later add units to your tokens. The plugin itself will consider any unit-less token as px-based.