What teams or group is this for?

Design System Team

Who is your main point of contact and contact preference?

Eng: @AnneT, Design: @DTorsani-WMF, PM: @CCiufo-WMF

What are the details of your request? Include relevant timelines or deadlines

In our upcoming Codex 2.0 release, we will include font modes, which are a set of typographic scales meant to enable the skins to use scales consistent with the design system and to ensure that Codex components look ideal at different base font sizes. Including font modes in Codex is just the first step - the next step will be to actually use the font modes in the skins.

For Vector, this means updating CSSCustomProperties.less to use the font mode mixins provided by Codex to set various font-related design tokens at the small, standard, and large text sizes. This will replace the code that currently sets the --font-size-medium and --line-height-medium CSS custom properties for the different font size client preferences.

Once all of the font-size, line-height, and size-icon token scale with client's preferred text size, any part of the UI that uses these tokens will also scale. This is beneficial to parts of the UI that use Codex components (like QuickSurveys, message boxes, and WikiFunctions pages) because the components will scale perfectly as we designed them to at the different text sizes. However, this also means that parts of the UI that we don't intend to scale yet will start to scale. This includes the entire header and sidebars - see this patchdemo. To maintain the status quo in which content scales but the "chrome" does not, we will need to update the code to ensure that text scaling only affects the intended areas.

Codex 2.0.0-rc1 will be released on 2025-04-29 and ride the train the following week. There is no required timeline for integrating font modes into Vector 2022. However, doing so will resolve inconsistencies caused by scaling some tokens but not others, and allow us to remove workarounds such as those done as part of T391890. Integrating font modes into Vector 2022 will also resolve the parent tasks of the [[ T363845 | typographic scale epic ]], fixing long-standing inconsistencies with typography styles.

How does the request fit within the departmental or foundation priorities?

As mentioned above:

• Using Codex font modes in the skins will mean we're using one consistent typographic scale.
• It will mean Codex components scale perfectly at different font sizes.
• It will resolve long-standing issues (parent tasks of T363845).
• It will enable us to remove hard-coded values and overridden CSS custom properties from Vector.

Is this request urgent or time sensitive?

Not terribly. We'd like to at least discuss pursuing this in the next month or so, but it does not have to get done at a specific time. The main motivations are improved UX and reduction of technical debt.