# Tokens

This part contains mixins and helpers for generating spacings and hosting wrapper for rem values.

## spacings.json

JSON output from which token variables are created. JSON values are specified using px. Style dictionary in turn convertes those value to REM by dividing from base font size (10px) and wraps them with dynamic-rem function. This is done to ensure that teams both using 10px and 16px REMs could consume our components.

## dynamic-rem.scss

Helper function ensuring that we keep consistent code and logic when making component compatible for both 10px and 16px sizes.

## Usage and development

When defining rem sizes we need to use **dynamic-rem** function which can imported in our component stylesheets. If spacings from token files is being used, spacing value can be used instead, final value will be wrapped with multiplier by default.

### Lexical points to remember

Because convertor/multiplier uses css variables, values cannot be calculated on compile time. Instead they are calculated on runtime. This leads to usage differences when comparing to regular scss tokens:

1. Math operations needs to be wrapped in calc function. For e.g. substraction goes from ```telia-spacing-12 - 0.1rem```  to ```calc(#{telia-spacing-12} - dynamic-rem(0.1rem))``` where **telia-spacing-12** is **calc(1.2rem * var(--voca-rem-multiplier))**;
1. In addition to wrapping in calc function you must remember to use correct syntax for then using tokens which contains css variable. Tokens usage changes from this ```telia-spacing-12``` to ```#{telia-spacing-12}``` if used inside css ```calc``` function. This is to ensure that css output would not result in a string, which would create incalid calc rule.
1. rem values used directly inside code, like ```1rem```, needs to be wrapped inside dynamic-rem function, this will ensure that value is being wrapped with multiplier operation as expected.