In T346072 - Develop a strategy for using CSS Custom Properties in Vector , we decided that CSS Custom properties were a necessary technology that would enable us to implement font-size customizations (for anonymous and logged-in users, across languages etc.) in a scalable way. We decided that the initial scope would be limited to the font-size project (with the goal of eventually centralizing these custom properties in Codex in the future).

During that task, a POC patch was developed to show what a potential implementation could look like. The patch does the following:

1. Creates a new Less file that defines a new CSS custom property in Vector
2. Limits the initial usage to Vector, marking the variables as @private (inspired by the Stable interface policy)
3. Uses the Codex Token naming convention instead of a skin-specific one (--font-size-medium instead of --vector-font-size-medium)
4. Uses the existing Codex token value @fontSizeMedium as the basis for the new custom property
5. Converts that value from em to rem using the Less convert() method, because we would like to switch Vector 2022 over to rems.

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/960116

The goal of this task is to develop and merge that patch and add an ADR documenting our decisions with regards to CSS custom properties.

A/C

• No visual changes
• The font-size feature flag continues to increase the font-size to 16px

QA Results - Beta

QA Results - Prod