As part of T297000, we decided to transform certain categories of tokens from pixels to relative units (`em` or `rem`). This transformation depends on the base font size, meaning the exported values of these tokens assume a certain base font size, and aren't appropriate for use in a context where the base font size is different.
In the MediaWiki context, we have to support two different base font sizes:
- The Vector skin (default skin on desktop) uses 14px
- The MinervaNeue skin (default skin on mobile) uses 16px
In Codex, we want to default to a base font size of 16px, but the output of the token transform also needs to support environments where the base font size is 14px. To that end, we'll need to create two themes: a default theme (using 16px) and a legacy theme (using 14px). We don't need a full theming system for this yet, nor do we need to change the values of the dimension/size/spacing tokens to fit in better in the 14px environment (yet), for now we just need to get the px->em calculations right, and produce two sets of CSS/LESS/SCSS files, one with the calculations done for 16px (so e.g. 8px becomes 0.5em) and one with the calculations done for 14px (so e.g. 8px becomes 0.5714em).
[ ] Add the ability to transform tokens from absolute (px) to relative (em/rem) units
[ ] Build two versions of the tokens output files (`theme-wikimedia-ui.less` etc), one for a 16px base font size and one for 14px base font size
[ ] Build two versions of the Codex styles (`codex.style.css` and `codex.style-rtl.css`), one for 16px and one for 14px
[ ] Enable unit transformation for the relevant token categories
[ ] size (but not size.viewport)
[ ] max-width (but not max-width.breakpoint)
[ ] font-size
[ ] (others?)
[ ] Configure MediaWiki so that Vector uses the 14px version and MinervaNeue uses the 16px version (TODO what do other skins use?)