Overview

The proposed font modes feature for Codex (see T387778) would update some existing token values for font-size and line-height tokens to reference CSS variables (similar to how we handle color modes).

Before that work can be released, we need to ensure that any code downstream (in MW Core, skins, extensions, etc) which uses font-size or line-height tokes in Less calculations must be updated to be compatible with CSS variables. If this is not done, Less compilation will fail and styles will break in a very visible way.

@AnneT discovered this issue when she deployed a patchdemo instance based on the main patch These errors are due to calculations that use Codex tokens that previously had rem or em units and now reference CSS variables (since all font-size tokens now do so, e.g. @font-size-medium: var( --font-size-medium, 1rem )).

Impacted projects

Below is a list of references to Codex design tokens (found via Codesearch) that will need to be updated before the font modes work can move forward.

CodeSearch example font-size
CodeSearch example line-height

Note: OOUI is not included in this list because it relies on a "frozen" set of Codex design tokens from v1.3.5. OOUI does not need to be updated in order for Codex font modes to be released, but OOUI widgets will not participate in font-mode switching.

Examples

Example 1: Less unit() calc to output relative em/rem sizes

From Vector:

Less_Exception_Compiler: Operation on an invalid type in variables.less on line 88, column 1
86| 
87| // Search
88| @max-width-search: unit( ( 500px / @font-size-browser / @font-size-small ), em ); // 35.71428571em @ 16 & 0.875em T270202

Note that @font-size-browser = 16. The Codex token @font-size-small used to be 0.875rem and is being updated to var( --font-size-small, 0.875rem ). This is happening because you can't use CSS variables inside most Less functions, like unit().

Example 2: Less combinatory calculations to be explicit where output is from

From Extension:Popups:

Less_Exception_Compiler: Operation on an invalid type in settingsDialog.less on line 24, column 4
22| 		> div {
23| 			display: table-cell;
24| 			width: @size-icon-medium + ( 2 * @width-icon-gutter );
25| 			vertical-align: middle;
26| 			cursor: pointer;
27| 		}

Note that @width-icon-gutter = 1em. The Codex token @size-icon-medium used to be 1.25rem and is being updated to @font-size-x-large which is var( --font-size-x-large, 1.25rem ). This is happening because you can't do operations like addition on CSS variables without using calc().

These are just two examples, but there are likely more (possibly many) depending on which page you're on and which extensions are enabled. Note that these issues are not specific to the MediaWiki Less.php compiler. This is similar to T357740.

Next steps

DST would like to go in now and fix the references listed above to no longer rely on Less calculation. This work will pave the way for a near-future Codex release that will include support for font-mode switching. We will rely on PatchDemo to test for visual parity after any changes.

• For places where calculations are being done directly in Less, we will typically be able to replace this with use of CSS calc() – this will preserve any original styling but it will also work the same way when CSS variables are used.
• For places where the Less unit() function is used, we will need to understand the specific intent and update accordingly. Many of these cases will actually be better served by the ability to rely on font-mode-aware CSS variables in the future. In the worst-case scenario, we may need to temporarily hard-code the current computed values, and then go back once font-modes land to write the styles in a CSS-var-aware way.

DST will coordinate with the Web team and other feature teams who manage impacted codebases. The new font modes feature will not be merged until this issue is addressed. If things prove more complicated for whatever reason, the font modes work may need to be delayed until such a time that we can fix these problems.