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.
Token categories for relative unit sizing all are aiming to enable users to text zoom font size capability in browsers to enable readability without limitations: width, height, max-width, max-height, font-size.
We're going for unit-less line-height already which enables scaling inherently. Other possible future categories would include clip-path, tab-size, text-indent, word-spacing.
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 (see T296689#7825357 for implementation ideas)
- Enable unit transformation for the relevant current token categories
- size (but not size.viewport; for completion also not min-size, and 0 and percentage carrying sizes are excluded)
- max-width (but not max-width.breakpoint)
- font-size
- Configure MediaWiki so that Vector uses the 14px version and MinervaNeue uses the 16px version (For completion, Monobook uses 12.8px, Timeless 15.2px)